From f09e6199acf9a42f1c42ab82bfe73c2f67639ede Mon Sep 17 00:00:00 2001 From: yutent Date: Mon, 22 May 2023 15:06:33 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4isCustomElement=E7=9A=84?= =?UTF-8?q?=E8=AE=BE=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.js | 2 +- lib/compile-vue.js | 11 ++++--- lib/constants.js | 58 -------------------------------- lib/dev.js | 16 +++++---- lib/prod.js | 6 ++-- lib/utils.js | 82 ++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 102 insertions(+), 73 deletions(-) diff --git a/index.js b/index.js index 5ff1900..e2f83b2 100755 --- a/index.js +++ b/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' diff --git a/lib/compile-vue.js b/lib/compile-vue.js index 8244f69..ccf5027 100644 --- a/lib/compile-vue.js +++ b/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') diff --git a/lib/constants.js b/lib/constants.js index a236644..35a6a4b 100644 --- a/lib/constants.js +++ b/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 - } - }) - })() - ` -} diff --git a/lib/dev.js b/lib/dev.js index afb25eb..d1ac0f5 100644 --- a/lib/dev.js +++ b/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) { diff --git a/lib/prod.js b/lib/prod.js index a47e3e6..c8a2227 100644 --- a/lib/prod.js +++ b/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) { diff --git a/lib/utils.js b/lib/utils.js index 8187b5f..b96ab35 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -1,4 +1,11 @@ +/** + * {一些工具类函数} + * @author yutent + * @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}`)) + } + }) + }) +}