改用@vue/compiler-dom

lib/compile-vue.js

@@ -9,6 +9,7 @@ import scss from '@bytedo/sass'
 import { createHash } from 'crypto'
 import Es from 'esbuild'
 import { join } from 'path'
+import { compile } from '@vue/compiler-dom'
 
 import {
   JS_EXP,
@@ -189,6 +190,7 @@ export function parseJs(
  * @return <String> 返回转换后的js代码
  */
 export function compileVue(file, imports, options = {}, isBuild) {
+  let filename = file.slice(options.SOURCE_DIR.length).replace(/\\/g, '/')
   let code = (fs.cat(file) || '').toString().replace(/\r\n/g, '\n')
   let CACHE = options.CACHE || {}
   let output = '',
@@ -199,6 +201,7 @@ export function compileVue(file, imports, options = {}, isBuild) {
   let html = code.match(HTML_EXP)
 
   let hash = md5(file)
+  let scopeId = 'data-' + hash
 
   scss = scss
     .map(it => {
@@ -219,11 +222,17 @@ export function compileVue(file, imports, options = {}, isBuild) {
 
   js = js ? js[1] : ''
 
-  html = (html ? html[1] : '').replace(/`/g, '\\`').replace(/\$\{/g, '\\${')
+  html = compile(html[1], {
+    mode: 'module',
+    prefixIdentifiers: true,
+    hoistStatic: true,
+    cacheHandlers: true,
+    scopeId: scoped ? scopeId : void 0,
+    sourceMap: false,
+    isCustomElement: tag => tag.startsWith('wc-')
+  }).code.replace('export function render', 'function render')
 
-  if (scoped) {
+  output += html
-    html = html.replace(/<([\w\-]+)([^>]*?)>/g, `<$1 data-${hash} $2>`)
-  }
 
   if (CACHE[file]) {
     CACHE[file] = {
@@ -237,7 +246,7 @@ export function compileVue(file, imports, options = {}, isBuild) {
 
   output += parseJs(js, imports, options, isBuild).replace(
     'export default {',
-    `export default {\n  template: \`${html}\`,`
+    'const __sfc__ = {\n  render,\n'
   )
 
   if (scss) {
@@ -246,11 +255,15 @@ export function compileVue(file, imports, options = {}, isBuild) {
     // 修正那反人类的windows路径
     output += `
 let stylesheet = new CSSStyleSheet()
-stylesheet.path = '${file.slice(options.SOURCE_DIR.length).replace(/\\/g, '/')}'
+stylesheet.path = '${filename}'
 stylesheet.replaceSync(\`${scss}\`)
 document.adoptedStyleSheets.push(stylesheet)
-      `
+`
   }
+  if (scoped) {
+    output += `__sfc__.__scopeId = '${scopeId}'\n`
+  }
+  output += `__sfc__.__file = '${filename}'\nexport default __sfc__`
 
   return output
 }

package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "@bytedo/sass": "^1.54.8",
+    "@vue/compiler-dom": "^3.2.47",
     "chokidar": "^3.5.3",
     "esbuild": "^0.15.13",
     "iofs": "^1.5.2",
@@ -14,6 +15,6 @@
     "ws": "^8.12.0"
   },
   "engines": {
-    "node": "^16.6.0"
+    "node": ">=16.6.0"
   }
 }