From c72be08e0e98b4e3c3f4bf57383a5fb302248175 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Wed, 1 Mar 2023 00:30:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E7=94=A8@vue/compiler-dom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/compile-vue.js | 27 ++++++++++++++++++++-------
 package.json       |  3 ++-
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/lib/compile-vue.js b/lib/compile-vue.js
index e2126e8..20f56c9 100644
--- a/lib/compile-vue.js
+++ b/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) {
-    html = html.replace(/<([\w\-]+)([^>]*?)>/g, `<$1 data-${hash} $2>`)
-  }
+  output += html
 
   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
 }
diff --git a/package.json b/package.json
index 0e044ae..d4042f5 100644
--- a/package.json
+++ b/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"
   }
 }