feat: support <script setup>

Author: yyx990803

example/App.vue

@@ -3,19 +3,22 @@
   <div>
     {{ count }}
     <span>{{ count }}</span>
-    <Button><span>slot</span></Button>
+    <Button foo="hello!"><span>slot</span></Button>
+    <ScriptSetup/>
   </div>
 </template>
 
 <script>
 import Button from './Button.vue'
+import ScriptSetup from './ScriptSetup.vue'
 
 export default {
   data() {
     return { count: 0 }
   },
   components: {
-    Button
+    Button,
+    ScriptSetup
   }
 }
 </script>

example/Button.vue

@@ -1,4 +1,5 @@
 <template>
+  <p>prop foo: {{ foo }}</p>
   <button @click="inc">{{ count }}</button>
   <slot/>
 </template>
@@ -7,7 +8,10 @@
 import { ref } from 'vue'
 
 export default {
-  setup() {
+  props: {
+    foo: String
+  },
+  setup(props) {
     const count = ref(0)
     return {
       count,

example/ScriptSetup.vue

@@ -0,0 +1,20 @@
+<template>
+  <h2>{{ hello }}</h2>
+  <div>
+    {{ count }} <button @click="inc">+</button>
+    <Button/>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+export { default as Button } from './Button.vue'
+
+export const count = ref(0)
+
+export function inc() {
+  count.value++
+}
+
+export const hello = 'hi from script setup'
+</script>

example/webpack.config.js

@@ -1,7 +1,8 @@
 const fs = require('fs')
 const path = require('path')
+const webpack = require('webpack')
 const hash = require('hash-sum')
-const VueLoaderPlugin = require('../dist/plugin')
+const VueLoaderPlugin = require('../dist/plugin').default
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 module.exports = (env = {}) => {
@@ -86,6 +87,10 @@ module.exports = (env = {}) => {
       new VueLoaderPlugin(),
       new MiniCssExtractPlugin({
         filename: '[name].css'
+      }),
+      new webpack.DefinePlugin({
+        __VUE_OPTIONS_API__: true,
+        __VUE_PROD_DEVTOOLS__: false
       })
     ],
     optimization: {

package.json

@@ -48,7 +48,7 @@
     "@types/loader-utils": "^1.1.3",
     "@types/webpack": "^4.41.0",
     "@types/webpack-merge": "^4.1.5",
-    "@vue/compiler-sfc": "^3.0.0-rc.6",
+    "@vue/compiler-sfc": "^3.0.0-rc.10",
     "babel-loader": "^8.0.6",
     "cache-loader": "^4.1.0",
     "css-loader": "^3.3.2",
@@ -65,7 +65,7 @@
     "ts-jest": "^26.2.0",
     "typescript": "^4.0.2",
     "url-loader": "^3.0.0",
-    "vue": "^3.0.0-rc.6",
+    "vue": "^3.0.0-rc.10",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0",

src/index.ts

@@ -14,11 +14,14 @@ import hash from 'hash-sum'
 import loaderUtils from 'loader-utils'
 import {
   parse,
+  compileScript,
   TemplateCompiler,
   CompilerOptions,
   SFCBlock,
   SFCTemplateCompileOptions,
-  SFCStyleBlock
+  SFCScriptCompileOptions,
+  SFCStyleBlock,
+  SFCScriptBlock
 } from '@vue/compiler-sfc'
 import { selectBlock } from './select'
 import { genHotReloadCode } from './hotReload'
@@ -30,6 +33,8 @@ import VueLoaderPlugin from './plugin'
 export { VueLoaderPlugin }
 
 export interface VueLoaderOptions {
+  // https://babeljs.io/docs/en/next/babel-parser#plugins
+  babelParserPlugins?: SFCScriptCompileOptions['babelParserPlugins']
   transformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']
   compiler?: TemplateCompiler | string
   compilerOptions?: CompilerOptions
@@ -121,6 +126,29 @@ export default function loader(
     !!(descriptor.script || descriptor.template) &&
     options.hotReload !== false
 
+  // script
+  let script: SFCScriptBlock | undefined
+  let scriptImport = `const script = {}`
+  if (descriptor.script || descriptor.scriptSetup) {
+    try {
+      script = (descriptor as any).scriptCompiled = compileScript(descriptor, {
+        babelParserPlugins: options.babelParserPlugins
+      })
+    } catch (e) {
+      loaderContext.emitError(e)
+    }
+    if (script) {
+      const src = script.src || resourcePath
+      const attrsQuery = attrsToQuery(script.attrs, 'js')
+      const query = `?vue&type=script${attrsQuery}${resourceQuery}`
+      const scriptRequest = stringifyRequest(src + query)
+      scriptImport =
+        `import script from ${scriptRequest}\n` +
+        // support named exports
+        `export * from ${scriptRequest}`
+    }
+  }
+
   // template
   let templateImport = ``
   let templateRequest
@@ -129,22 +157,14 @@ export default function loader(
     const idQuery = `&id=${id}`
     const scopedQuery = hasScoped ? `&scoped=true` : ``
     const attrsQuery = attrsToQuery(descriptor.template.attrs)
-    const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}${resourceQuery}`
+    const bindingsQuery = script
+      ? `&bindings=${JSON.stringify(script.bindings)}`
+      : ``
+    const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}${bindingsQuery}${resourceQuery}`
     templateRequest = stringifyRequest(src + query)
     templateImport = `import { render } from ${templateRequest}`
   }
 
-  // script
-  let scriptImport = `const script = {}`
-  if (descriptor.script) {
-    const src = descriptor.script.src || resourcePath
-    const attrsQuery = attrsToQuery(descriptor.script.attrs, 'js')
-    const query = `?vue&type=script${attrsQuery}${resourceQuery}`
-    const scriptRequest = stringifyRequest(src + query)
-    scriptImport =
-      `import script from ${scriptRequest}\n` + `export * from ${scriptRequest}` // support named exports
-  }
-
   // styles
   let stylesCode = ``
   let hasCSSModules = false

src/select.ts

@@ -22,7 +22,7 @@ export function selectBlock(
 
   // script
   if (query.type === `script`) {
-    const script = descriptor.script!
+    const script = (descriptor as any).scriptCompiled
     if (appendExtension) {
       loaderContext.resourcePath += '.' + (script.lang || 'js')
     }

src/templateLoader.ts

@@ -37,7 +37,8 @@ const TemplateLoader: webpack.loader.Loader = function(source, inMap) {
     compiler,
     compilerOptions: {
       ...options.compilerOptions,
-      scopeId
+      scopeId,
+      bindingMetadata: JSON.parse(query.bindings as string)
     },
     transformAssetUrls: options.transformAssetUrls || true
   })

test/core.spec.ts

@@ -3,3 +3,7 @@ import { bundle } from './utils'
 test('basic', async () => {
   await bundle({ entry: 'basic.vue' })
 })
+
+test('script setup', async () => {
+  await bundle({ entry: 'ScriptSetup.vue' })
+})

test/fixtures/ScriptSetup.vue

@@ -0,0 +1,13 @@
+<template>
+  <button @click="inc">{{ count }}</button>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+export const count = ref(0)
+
+export function inc() {
+  count.value++
+}
+</script>