调整isCustomElement的设定

index.js

@@ -7,7 +7,7 @@
  */
 
 import fs from 'iofs'
-import { join, normalize } from 'path'
+import { join, normalize } from 'node:path'
 import { red, blue } from 'kolorist'
 
 import createServer from './lib/dev.js'

lib/compile-vue.js

@@ -6,9 +6,9 @@
 
 import fs from 'iofs'
 import scss from '@bytedo/sass'
-import { createHash, randomUUID } from 'crypto'
+import { createHash, randomUUID } from 'node:crypto'
 import Es from 'esbuild'
-import { join } from 'path'
+import { join } from 'node:path'
 import { compile } from '@vue/compiler-dom'
 import { red, cyan, blue } from 'kolorist'
 
@@ -23,9 +23,9 @@ import {
   CSS_SHEET_EXP,
   V_DEEP,
   PERCENT_EXP,
-  SHEETS_DEF,
-  createHmrScript
+  SHEETS_DEF
 } from './constants.js'
+import {createHmrScript} from './utils.js'
 
 const OPTIONS = {
   style: 'compressed'
@@ -282,6 +282,7 @@ export function compileVue(file, imports, options = {}) {
   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 { isCustomElement } = options
   let output = '',
     scoped = false
 
@@ -319,7 +320,7 @@ export function compileVue(file, imports, options = {}) {
       cacheHandlers: true,
       scopeId: scoped ? scopeId : void 0,
       sourceMap: false,
-      isCustomElement: tag => tag.startsWith('wc-')
+      isCustomElement
     }).code.replace('export function render', 'function render')
   } catch (err) {
     let tmp = html[1].split('\n')

lib/constants.js

@@ -18,61 +18,3 @@ export const COMMON_HEADERS = {
 
 export const SHEETS_DEF =
   'const __sheets__ = [...document.adoptedStyleSheets];\n'
-
-export function createHmrScript(legacy) {
-  return `
-  !(function vue_live_hmr(){
-    var ws = new WebSocket(\`ws\${location.protocol === 'https:' ? 's' : ''}://\${location.host}/ws-vue-live\`)
-  
-    ws.addEventListener('open', function (r) {
-      if(vue_live_hmr.closed){
-        delete vue_live_hmr.closed
-        location.reload()
-      }
-      console.log('vue-live hmr ready...')
-    })
-  
-    ws.addEventListener('close', function(){
-      vue_live_hmr.closed = true
-      setTimeout(vue_live_hmr, 2000)
-    })
-    
-    ws.addEventListener('message', function (ev) {
-      var { action, data } = JSON.parse(ev.data)
-    
-      switch (action) {
-        case 'reload':
-          location.reload()
-          break
-    
-        case 'render':
-          {
-            ${
-              legacy
-                ? `
-            let stylesheet = document.head.children.namedItem(data.path)
-            if (stylesheet) {
-              stylesheet.textContent = data.content
-            }
-            `
-                : `
-            let tmp = [...document.adoptedStyleSheets]
-            for (let i = -1, it; (it = tmp[++i]); ) {
-              if (it.path === data.path) {
-                let stylesheet = new CSSStyleSheet()
-                stylesheet.path = data.path
-                stylesheet.replaceSync(data.content)
-                tmp[i] = stylesheet
-                document.adoptedStyleSheets = tmp
-                break
-              }
-            }
-            `
-            }
-          }
-          break
-      }
-    })
-  })()
-  `
-}

lib/dev.js

@@ -1,13 +1,13 @@
-import http from 'http'
-import https from 'https'
+import http from 'node:http'
+import https from 'node:https'
 import fs from 'iofs'
-import { join, dirname } from 'path'
-import { parse } from 'url'
+import { join, dirname } from 'node:path'
+import { parse } from 'node:url'
 import socket from './ws.js'
 import chokidar from 'chokidar'
 import { red } from 'kolorist'
 
-import { friendlyErrors } from './utils.js'
+import { friendlyErrors , isCustomElement} from './utils.js'
 
 import { compileScss, parseJs, compileVue, parseHtml } from './compile-vue.js'
 
@@ -210,7 +210,8 @@ export default async function createServer(root = '', conf = {}) {
                 CACHE,
                 DEPLOY_PATH,
                 INJECT_SCSS,
-                LEGACY_MODE
+                LEGACY_MODE,
+                isCustomElement: conf.isCustomElement || isCustomElement
               })
 
               res.setHeader('content-type', MIME_TYPES.js)
@@ -382,7 +383,8 @@ export default async function createServer(root = '', conf = {}) {
                       CACHE,
                       DEPLOY_PATH,
                       INJECT_SCSS,
-                      LEGACY_MODE
+                      LEGACY_MODE,
+                      isCustomElement: conf.isCustomElement || isCustomElement
                     })
                     let tmp = CACHE[filePath]
                     if (tmp.changed) {

lib/prod.js

@@ -1,7 +1,8 @@
+import { join, dirname, parse } from 'node:path'
 import fs from 'iofs'
-import { join, dirname, parse } from 'path'
 import Es from 'esbuild'
 import { compileScss, parseJs, compileVue, parseHtml } from './compile-vue.js'
+import { isCustomElement } from './utils.js'
 
 function readFile(file) {
   return (file && fs.cat(file)?.toString()) || ''
@@ -50,7 +51,8 @@ export default function compile(root = '', dist = '', conf = {}) {
       SOURCE_DIR,
       DEPLOY_PATH,
       INJECT_SCSS,
-      LEGACY_MODE
+      LEGACY_MODE,
+      isCustomElement: conf.isCustomElement || isCustomElement
     }
 
     for (let it of files) {

lib/utils.js

@@ -1,4 +1,11 @@
+/**
+ * {一些工具类函数}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/05/22 14:52:00
+ */
+
 import { red, cyan, blue } from 'kolorist'
+import { Worker } from 'node:worker_threads'
 
 export function friendlyErrors(pathname, ext = '') {
   console.log(cyan(pathname), red(`not found!!!`))
@@ -7,3 +14,78 @@ export function friendlyErrors(pathname, ext = '') {
     blue(`/index.${ext}`)
   )
 }
+
+export function createHmrScript(legacy) {
+  return `
+  !(function vue_live_hmr(){
+    var ws = new WebSocket(\`ws\${location.protocol === 'https:' ? 's' : ''}://\${location.host}/ws-vue-live\`)
+  
+    ws.addEventListener('open', function (r) {
+      if(vue_live_hmr.closed){
+        delete vue_live_hmr.closed
+        location.reload()
+      }
+      console.log('vue-live hmr ready...')
+    })
+  
+    ws.addEventListener('close', function(){
+      vue_live_hmr.closed = true
+      setTimeout(vue_live_hmr, 2000)
+    })
+    
+    ws.addEventListener('message', function (ev) {
+      var { action, data } = JSON.parse(ev.data)
+    
+      switch (action) {
+        case 'reload':
+          location.reload()
+          break
+    
+        case 'render':
+          {
+            ${
+              legacy
+                ? `
+            let stylesheet = document.head.children.namedItem(data.path)
+            if (stylesheet) {
+              stylesheet.textContent = data.content
+            }
+            `
+                : `
+            let tmp = [...document.adoptedStyleSheets]
+            for (let i = -1, it; (it = tmp[++i]); ) {
+              if (it.path === data.path) {
+                let stylesheet = new CSSStyleSheet()
+                stylesheet.path = data.path
+                stylesheet.replaceSync(data.content)
+                tmp[i] = stylesheet
+                document.adoptedStyleSheets = tmp
+                break
+              }
+            }
+            `
+            }
+          }
+          break
+      }
+    })
+  })()
+  `
+}
+
+export function isCustomElement(tag) {
+  return tag.startsWith('wc-')
+}
+
+export function startWorker(file) {
+  return new Promise((resolve, reject) => {
+    let worker = new Worker(file)
+    worker.on('message', resolve)
+    worker.on('error', reject)
+    worker.on('exit', code => {
+      if (code !== 0) {
+        reject(new Error(`Worker stopped with exit code ${code}`))
+      }
+    })
+  })
+}