wip: adapt to vue2

Author: yyx990803

package.json

@@ -41,13 +41,15 @@
   "devDependencies": {
     "@jridgewell/gen-mapping": "^0.3.1",
     "@jridgewell/trace-mapping": "^0.3.13",
+    "@rollup/pluginutils": "^4.2.1",
     "debug": "^4.3.4",
     "esno": "^0.16.3",
+    "hash-sum": "^2.0.0",
     "rollup": "^2.75.6",
     "slash": "^4.0.0",
     "source-map": "^0.6.1",
     "unbuild": "^0.7.4",
-    "vite": "^3.0.0-alpha.12",
-    "vue": "^2.7.0-alpha.9"
+    "vite": "^2.9.12",
+    "vue": "^2.7.0-alpha.12"
   }
 }

pnpm-lock.yaml

@@ -10,13 +10,12 @@ import type * as _compiler from 'vue/compiler-sfc'
 
 export function resolveCompiler(root: string): typeof _compiler {
   // resolve from project root first, then fallback to peer dep (if any)
-  const compiler =
-    tryRequire('vue/compiler-sfc', root) || tryRequire('vue/compiler-sfc')
+  const compiler = tryRequire('vue/compiler-sfc', root)
 
   if (!compiler) {
     throw new Error(
       `Failed to resolve vue/compiler-sfc.\n` +
-        `@vitejs/plugin-vue requires vue (>=3.2.25) ` +
+        `@vitejs/plugin-vue2 requires vue (>=2.7.0) ` +
         `to be present in the dependency tree.`
     )
   }
@@ -25,6 +24,7 @@ export function resolveCompiler(root: string): typeof _compiler {
 }
 
 const _require = createRequire(import.meta.url)
+
 function tryRequire(id: string, from?: string) {
   try {
     return from

src/compiler.ts

@@ -1,4 +1,3 @@
-import _debug from 'debug'
 import type { SFCBlock, SFCDescriptor } from 'vue/compiler-sfc'
 import type { HmrContext, ModuleNode } from 'vite'
 import {
@@ -9,8 +8,6 @@ import {
 import { getResolvedScript, setResolvedScript } from './script'
 import type { ResolvedOptions } from '.'
 
-const debug = _debug('vite:hmr')
-
 const directRequestRE = /(\?|&)direct\b/
 
 /**
@@ -75,9 +72,9 @@ export async function handleHotUpdate(
   const nextStyles = descriptor.styles || []
 
   // force reload if CSS vars injection changed
-  if (prevDescriptor.cssVars.join('') !== descriptor.cssVars.join('')) {
-    affectedModules.add(mainModule)
-  }
+  // if (prevDescriptor.cssVars.join('') !== descriptor.cssVars.join('')) {
+  //   affectedModules.add(mainModule)
+  // }
 
   // force reload if scoped status has changed
   if (prevStyles.some((s) => s.scoped) !== nextStyles.some((s) => s.scoped)) {
@@ -156,9 +153,6 @@ export async function handleHotUpdate(
   if (didUpdateStyle) {
     updateType.push(`style`)
   }
-  if (updateType.length) {
-    debug(`[vue:update(${updateType.join('&')})] ${file}`)
-  }
   return [...affectedModules].filter(Boolean) as ModuleNode[]
 }
 

src/handleHotUpdate.ts

@@ -1,15 +1,13 @@
 import fs from 'fs'
 import type { Plugin, ViteDevServer } from 'vite'
-import { createFilter } from 'vite'
-/* eslint-disable import/no-duplicates */
+import { createFilter } from '@rollup/pluginutils'
 import type {
   SFCBlock,
   SFCScriptCompileOptions,
   SFCStyleCompileOptions,
   SFCTemplateCompileOptions
 } from 'vue/compiler-sfc'
 import type * as _compiler from 'vue/compiler-sfc'
-/* eslint-enable import/no-duplicates */
 import { resolveCompiler } from './compiler'
 import { parseVueRequest } from './utils/query'
 import { getDescriptor, getSrcDescriptor } from './utils/descriptorCache'
@@ -34,32 +32,9 @@ export interface Options {
   template?: Partial<SFCTemplateCompileOptions>
   style?: Partial<SFCStyleCompileOptions>
 
-  /**
-   * Transform Vue SFCs into custom elements.
-   * - `true`: all `*.vue` imports are converted into custom elements
-   * - `string | RegExp`: matched files are converted into custom elements
-   *
-   * @default /\.ce\.vue$/
-   */
-  customElement?: boolean | string | RegExp | (string | RegExp)[]
-
-  /**
-   * Enable Vue reactivity transform (experimental).
-   * https://github.com/vuejs/core/tree/master/packages/reactivity-transform
-   * - `true`: transform will be enabled for all vue,js(x),ts(x) files except
-   *           those inside node_modules
-   * - `string | RegExp`: apply to vue + only matched files (will include
-   *                      node_modules, so specify directories in necessary)
-   * - `false`: disable in all cases
-   *
-   * @default false
-   */
-  reactivityTransform?: boolean | string | RegExp | (string | RegExp)[]
-
-  /**
-   * Use custom compiler-sfc instance. Can be used to force a specific version.
-   */
-  compiler?: typeof _compiler
+  // customElement?: boolean | string | RegExp | (string | RegExp)[]
+  // reactivityTransform?: boolean | string | RegExp | (string | RegExp)[]
+  // compiler?: typeof _compiler
 }
 
 export interface ResolvedOptions extends Options {
@@ -74,33 +49,21 @@ export interface ResolvedOptions extends Options {
 export default function vuePlugin(rawOptions: Options = {}): Plugin {
   const {
     include = /\.vue$/,
-    exclude,
-    customElement = /\.ce\.vue$/,
-    reactivityTransform = false
+    exclude
+    // customElement = /\.ce\.vue$/,
+    // reactivityTransform = false
   } = rawOptions
 
   const filter = createFilter(include, exclude)
 
-  const customElementFilter =
-    typeof customElement === 'boolean'
-      ? () => customElement
-      : createFilter(customElement)
-
-  const refTransformFilter =
-    reactivityTransform === false
-      ? () => false
-      : reactivityTransform === true
-      ? createFilter(/\.(j|t)sx?$/, /node_modules/)
-      : createFilter(reactivityTransform)
-
   let options: ResolvedOptions = {
     isProduction: process.env.NODE_ENV === 'production',
     compiler: null as any, // to be set in buildStart
     ...rawOptions,
     include,
     exclude,
-    customElement,
-    reactivityTransform,
+    // customElement,
+    // reactivityTransform,
     root: process.cwd(),
     sourceMap: true,
     cssDevSourcemap: false,
@@ -117,25 +80,13 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
       return handleHotUpdate(ctx, options)
     },
 
-    config(config) {
-      return {
-        define: {
-          __VUE_OPTIONS_API__: config.define?.__VUE_OPTIONS_API__ ?? true,
-          __VUE_PROD_DEVTOOLS__: config.define?.__VUE_PROD_DEVTOOLS__ ?? false
-        },
-        ssr: {
-          external: ['vue', '@vue/server-renderer']
-        }
-      }
-    },
-
     configResolved(config) {
       options = {
         ...options,
         root: config.root,
+        isProduction: config.isProduction,
         sourceMap: config.command === 'build' ? !!config.build.sourcemap : true,
         cssDevSourcemap: config.css?.devSourcemap ?? false,
-        isProduction: config.isProduction,
         devToolsEnabled:
           !!config.define!.__VUE_PROD_DEVTOOLS__ || !config.isProduction
       }
@@ -146,7 +97,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
     },
 
     buildStart() {
-      options.compiler = options.compiler || resolveCompiler(options.root)
+      options.compiler = resolveCompiler(options.root)
     },
 
     async resolveId(id) {
@@ -200,29 +151,22 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
         return
       }
       if (!filter(filename) && !query.vue) {
-        if (
-          !query.vue &&
-          refTransformFilter(filename) &&
-          options.compiler.shouldTransformRef(code)
-        ) {
-          return options.compiler.transformRef(code, {
-            filename,
-            sourceMap: true
-          })
-        }
+        // if (
+        //   !query.vue &&
+        //   refTransformFilter(filename) &&
+        //   options.compiler.shouldTransformRef(code)
+        // ) {
+        //   return options.compiler.transformRef(code, {
+        //     filename,
+        //     sourceMap: true
+        //   })
+        // }
         return
       }
 
       if (!query.vue) {
         // main request
-        return transformMain(
-          code,
-          filename,
-          options,
-          this,
-          ssr,
-          customElementFilter(filename)
-        )
+        return transformMain(code, filename, options, this, ssr)
       } else {
         // sub block request
         const descriptor = query.src