feat: support reactivityTransform option

BREAKING CHANGE: remove `refSugar` option, require `vue@^3.2.13`

Author: yyx990803

README.md

@@ -4,9 +4,11 @@
 
 - [Documentation](https://vue-loader.vuejs.org)
 
-## v16 Only Options
+## v16+ Only Options
 
-- `refSugar: boolean`: enable experimental ref sugar.
+- `reactivityTransform: boolean`: enable [Vue Reactivity Transform](https://github.com/vuejs/rfcs/discussions/369) (SFCs only).
+
+- ~~`refSugar: boolean`: **removed.** use `reactivityTransform` instead.~~
 
 - `customElement: boolean | RegExp`: enable custom elements mode. An SFC loaded in custom elements mode inlines its `<style>` tags as strings under the component's `styles` option. When used with `defineCustomElement` from Vue core, the styles will be injected into the custom element's shadow root.
 

example/webpack.config.js

@@ -54,8 +54,7 @@ module.exports = (env = {}) => {
             test: /\.vue$/,
             loader: 'vue-loader',
             options: {
-              refSugar: true,
-              // enableTsInTemplate: false,
+              reactivityTransform: true,
             },
           },
           {

package.json

@@ -51,7 +51,6 @@
     "@types/mini-css-extract-plugin": "^0.9.1",
     "@types/webpack": "^4.41.0",
     "@types/webpack-merge": "^4.1.5",
-    "@vue/compiler-sfc": "^3.2.12",
     "babel-loader": "^8.1.0",
     "cache-loader": "^4.1.0",
     "conventional-changelog-cli": "^2.1.1",
@@ -81,7 +80,7 @@
     "ts-loader-v9": "npm:ts-loader@^9.2.4",
     "typescript": "^4.4.3",
     "url-loader": "^4.1.0",
-    "vue": "^3.2.13",
+    "vue": "^3.2.25",
     "vue-i18n": "^9.1.7",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",

src/compiler.ts

@@ -1,11 +1,11 @@
 // extend the descriptor so we can store the scopeId on it
-declare module '@vue/compiler-sfc' {
+declare module 'vue/compiler-sfc' {
   interface SFCDescriptor {
     id: string
   }
 }
 
-import * as _compiler from '@vue/compiler-sfc'
+import * as _compiler from 'vue/compiler-sfc'
 
 export let compiler: typeof _compiler
 

src/descriptorCache.ts

@@ -1,6 +1,6 @@
 import * as fs from 'fs'
-import type { SFCDescriptor } from '@vue/compiler-sfc'
-import { compiler } from './compiler'
+import type { SFCDescriptor } from 'vue/compiler-sfc'
+import { parse } from 'vue/compiler-sfc'
 
 const cache = new Map<string, SFCDescriptor>()
 
@@ -20,7 +20,7 @@ export function getDescriptor(filename: string): SFCDescriptor {
   // loaders being run in separate threads. The only way to deal with this is to
   // read from disk directly...
   const source = fs.readFileSync(filename, 'utf-8')
-  const { descriptor } = compiler.parse(source, {
+  const { descriptor } = parse(source, {
     filename,
     sourceMap: true,
   })

src/formatError.ts

@@ -1,5 +1,5 @@
-import type { CompilerError } from '@vue/compiler-sfc'
-import { compiler } from './compiler'
+import type { CompilerError } from 'vue/compiler-sfc'
+import { generateCodeFrame } from 'vue/compiler-sfc'
 import chalk = require('chalk')
 
 export function formatError(
@@ -13,11 +13,7 @@ export function formatError(
   }
   const locString = `:${loc.start.line}:${loc.start.column}`
   const filePath = chalk.gray(`at ${file}${locString}`)
-  const codeframe = compiler.generateCodeFrame(
-    source,
-    loc.start.offset,
-    loc.end.offset
-  )
+  const codeframe = generateCodeFrame(source, loc.start.offset, loc.end.offset)
   err.message = `\n${chalk.red(
     `VueCompilerError: ${err.message}`
   )}\n${filePath}\n${chalk.yellow(codeframe)}\n`

src/index.ts

@@ -5,14 +5,14 @@ import * as loaderUtils from 'loader-utils'
 
 import hash = require('hash-sum')
 
-import { compiler } from './compiler'
+import { parse } from 'vue/compiler-sfc'
 import type {
   TemplateCompiler,
   CompilerOptions,
   SFCBlock,
   SFCTemplateCompileOptions,
   SFCScriptCompileOptions,
-} from '@vue/compiler-sfc'
+} from 'vue/compiler-sfc'
 import { selectBlock } from './select'
 import { genHotReloadCode } from './hotReload'
 import { genCSSModulesCode } from './cssModules'
@@ -30,7 +30,7 @@ export interface VueLoaderOptions {
   transformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']
   compiler?: TemplateCompiler | string
   compilerOptions?: CompilerOptions
-  refSugar?: boolean
+  reactivityTransform?: boolean
   customElement?: boolean | RegExp
 
   hotReload?: boolean
@@ -88,7 +88,7 @@ export default function loader(
     mode === 'production' || process.env.NODE_ENV === 'production'
 
   const filename = resourcePath.replace(/\?.*$/, '')
-  const { descriptor, errors } = compiler.parse(source, {
+  const { descriptor, errors } = parse(source, {
     filename,
     sourceMap,
   })

src/resolveScript.ts

@@ -3,10 +3,10 @@ import type {
   SFCDescriptor,
   SFCScriptBlock,
   TemplateCompiler,
-} from '@vue/compiler-sfc'
+} from 'vue/compiler-sfc'
 import type { VueLoaderOptions } from 'src'
 import { resolveTemplateTSOptions } from './util'
-import { compiler } from './compiler'
+import { compileScript } from 'vue/compiler-sfc'
 
 const clientCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
 const serverCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
@@ -53,34 +53,25 @@ export function resolveScript(
     templateCompiler = options.compiler
   }
 
-  if (compiler.compileScript) {
-    try {
-      resolved = compiler.compileScript(descriptor, {
-        id: scopeId,
-        isProd,
-        inlineTemplate: enableInline,
-        refSugar: options.refSugar,
-        babelParserPlugins: options.babelParserPlugins,
-        templateOptions: {
-          ssr: isServer,
-          compiler: templateCompiler,
-          compilerOptions: {
-            ...options.compilerOptions,
-            ...resolveTemplateTSOptions(descriptor, options),
-          },
-          transformAssetUrls: options.transformAssetUrls || true,
+  try {
+    resolved = compileScript(descriptor, {
+      id: scopeId,
+      isProd,
+      inlineTemplate: enableInline,
+      reactivityTransform: options.reactivityTransform,
+      babelParserPlugins: options.babelParserPlugins,
+      templateOptions: {
+        ssr: isServer,
+        compiler: templateCompiler,
+        compilerOptions: {
+          ...options.compilerOptions,
+          ...resolveTemplateTSOptions(descriptor, options),
         },
-      })
-    } catch (e) {
-      loaderContext.emitError(e)
-    }
-  } else if (descriptor.scriptSetup) {
-    loaderContext.emitError(
-      `<script setup> is not supported by the installed version of ` +
-        `@vue/compiler-sfc - please upgrade.`
-    )
-  } else {
-    resolved = descriptor.script
+        transformAssetUrls: options.transformAssetUrls || true,
+      },
+    })
+  } catch (e) {
+    loaderContext.emitError(e)
   }
 
   cacheToUse.set(descriptor, resolved)

src/select.ts

@@ -1,5 +1,5 @@
 import webpack = require('webpack')
-import type { SFCDescriptor } from '@vue/compiler-sfc'
+import type { SFCDescriptor } from 'vue/compiler-sfc'
 import type { ParsedUrlQuery } from 'querystring'
 import { resolveScript } from './resolveScript'
 import type { VueLoaderOptions } from 'src'

src/stylePostLoader.ts

@@ -1,13 +1,13 @@
 import * as qs from 'querystring'
-import { compiler } from './compiler'
 import webpack = require('webpack')
+import { compileStyle } from 'vue/compiler-sfc'
 
 // This is a post loader that handles scoped CSS transforms.
 // Injected right before css-loader by the global pitcher (../pitch.js)
 // for any <style scoped> selection requests initiated from within vue files.
 const StylePostLoader: webpack.loader.Loader = function (source, inMap) {
   const query = qs.parse(this.resourceQuery.slice(1))
-  const { code, map, errors } = compiler.compileStyle({
+  const { code, map, errors } = compileStyle({
     source: source as string,
     filename: this.resourcePath,
     id: `data-v-${query.id}`,

src/templateLoader.ts

@@ -3,11 +3,11 @@ import * as qs from 'querystring'
 import * as loaderUtils from 'loader-utils'
 import { VueLoaderOptions } from './'
 import { formatError } from './formatError'
-import type { TemplateCompiler } from '@vue/compiler-sfc'
+import type { TemplateCompiler } from 'vue/compiler-sfc'
 import { getDescriptor } from './descriptorCache'
 import { resolveScript } from './resolveScript'
 import { resolveTemplateTSOptions } from './util'
-import { compiler } from './compiler'
+import { compileTemplate } from 'vue/compiler-sfc'
 
 // Loader that compiles raw template into JavaScript functions.
 // This is injected by the global pitcher (../pitch) for template
@@ -42,7 +42,7 @@ const TemplateLoader: webpack.loader.Loader = function (source, inMap) {
     templateCompiler = options.compiler
   }
 
-  const compiled = compiler.compileTemplate({
+  const compiled = compileTemplate({
     source,
     filename: loaderContext.resourcePath,
     inMap,

src/util.ts

@@ -1,4 +1,4 @@
-import type { SFCDescriptor, CompilerOptions } from '@vue/compiler-sfc'
+import type { SFCDescriptor, CompilerOptions } from 'vue/compiler-sfc'
 import type { VueLoaderOptions } from '.'
 
 export function resolveTemplateTSOptions(