diff --git a/lib/compile-vue.js b/lib/compile-vue.js
index 438daf1..f7deb8e 100644
--- a/lib/compile-vue.js
+++ b/lib/compile-vue.js
@@ -6,16 +6,11 @@
import fs from 'iofs'
import scss from '@bytedo/sass'
-import { createHash, randomUUID } from 'node:crypto'
import Es from 'esbuild'
-import { join } from 'node:path'
+
import { compile } from '@vue/compiler-dom'
import { red, cyan, blue } from 'kolorist'
-function uuid() {
- return randomUUID().slice(-8)
-}
-
import {
JS_EXP,
STYLE_EXP,
@@ -25,23 +20,13 @@ import {
PERCENT_EXP,
SHEETS_DEF
} from './constants.js'
-import { createHmrScript } from './utils.js'
+import { createHmrScript, md5, uuid, urlJoin } from './utils.js'
const OPTIONS = {
style: 'compressed'
}
-// 修正路径合并 避免在windows下被转义
-function urlJoin(...args) {
- return join(...args).replace(/\\/g, '/')
-}
-
-function md5(str = '') {
- let sum = createHash('md5')
- sum.update(str, 'utf8')
- return sum.digest('hex').slice(0, 8)
-}
-
+// 处理css中的 :deep()
function parseVDeep(curr, val, scoped) {
let res = V_DEEP.exec(curr)
if (res) {
@@ -52,6 +37,7 @@ function parseVDeep(curr, val, scoped) {
}
}
+// 处理style中的scoped属性
function scopeCss(css = '', hash) {
return css.replace(CSS_SHEET_EXP, (m, selector) => {
if (!selector.startsWith('@')) {
@@ -415,16 +401,22 @@ function render(_ctx, _cache) {
/**
* 解析模板html
*/
-export function parseHtml(html, { page, imports, entry, LEGACY_MODE }) {
+export function parseHtml(
+ html,
+ { page, imports, entry, LEGACY_MODE, session }
+) {
return html
.replace(/\r\n/g, '\n')
.replace(
'',
`${
process.env.NODE_ENV === 'development'
- ? ` \n`
+ ? ` \n`
: ''
}`
)
diff --git a/lib/dev.js b/lib/dev.js
index d563d56..f6a51e6 100644
--- a/lib/dev.js
+++ b/lib/dev.js
@@ -1,5 +1,5 @@
import http from 'node:http'
-import https from 'node:https'
+import https from 'node:http2'
import fs from 'iofs'
import { join, dirname } from 'node:path'
import { parse } from 'node:url'
@@ -7,7 +7,7 @@ import socket from './ws.js'
import chokidar from 'chokidar'
import { red } from 'kolorist'
-import { friendlyErrors, isCustomElement } from './utils.js'
+import { friendlyErrors, isCustomElement, md5 } from './utils.js'
import { compileScss, parseJs, compileVue, parseHtml } from './compile-vue.js'
@@ -15,7 +15,7 @@ import MIME_TYPES from './mime-tpyes.js'
import { COMMON_HEADERS } from './constants.js'
const noc = Buffer.from('')
-const SERVER_OPTIONS = {}
+const SERVER_OPTIONS = { allowHTTP1: true }
const CACHE = {} //文件缓存, 用于hmr
function readFile(file) {
@@ -50,7 +50,7 @@ export default async function createServer(root = '', conf = {}) {
}
const server = (USE_HTTPS ? https : http)
- .createServer(SERVER_OPTIONS)
+ [USE_HTTPS ? 'createSecureServer' : 'createServer'](SERVER_OPTIONS)
.listen(PORT)
const ws = socket(server)
@@ -80,7 +80,7 @@ export default async function createServer(root = '', conf = {}) {
if (prefix && req.url === '/') {
res.setHeader('Location', DEPLOY_PATH)
- res.writeHead(302, 'Redirect')
+ res.writeHead(302, USE_HTTPS ? void 0 : 'Redirect')
return res.end('')
}
@@ -105,7 +105,7 @@ export default async function createServer(root = '', conf = {}) {
pageName = tmp.join('.')
// 页面不存在时输出404, 避免进程崩溃退出
if (!conf.pages[pageName]) {
- res.writeHead(404, 'Not Found')
+ res.writeHead(404, USE_HTTPS ? void 0 : 'Not Found')
return res.end(`Oops!!! 404 Not Found`)
}
@@ -143,7 +143,7 @@ export default async function createServer(root = '', conf = {}) {
if (isIndex) {
res.setHeader('content-type', MIME_TYPES.html)
- res.writeHead(200, 'OK')
+ res.writeHead(200, USE_HTTPS ? void 0 : 'OK')
res.end(
'
注意: 你看到这个页面, 仅在开发时可见。
仅为了方便开发多页应用时访问自己想要修改的页面, 而不需要手动输入地址。
' +
indexPage +
@@ -175,7 +175,8 @@ export default async function createServer(root = '', conf = {}) {
page,
imports: conf.imports,
entry,
- LEGACY_MODE
+ LEGACY_MODE,
+ session: md5(page.entry)
})
}
@@ -198,7 +199,7 @@ export default async function createServer(root = '', conf = {}) {
}
if (!fs.isfile(file)) {
friendlyErrors(pathname, ext)
- res.writeHead(404, 'Not Found')
+ res.writeHead(404, USE_HTTPS ? void 0 : 'Not Found')
res.end('')
return
}
@@ -227,14 +228,14 @@ export default async function createServer(root = '', conf = {}) {
if (!fs.isfile(file)) {
friendlyErrors(pathname, ext)
- res.writeHead(404, 'Not Found')
+ res.writeHead(404, USE_HTTPS ? void 0 : 'Not Found')
res.end('')
return
}
}
if (file === conf.inject?.scss) {
console.log(red('设置为注入的样式文件不可被vue/js文件引用\n'))
- res.writeHead(404, 'Not Found')
+ res.writeHead(404, USE_HTTPS ? void 0 : 'Not Found')
res.end('')
return
}
@@ -265,7 +266,7 @@ export default async function createServer(root = '', conf = {}) {
code = fs.cat(join(PUBLIC_DIR, rpath))
} else {
friendlyErrors(rpath, ext)
- res.writeHead(404, 'Not Found')
+ res.writeHead(404, USE_HTTPS ? void 0 : 'Not Found')
res.end('')
return
}
@@ -308,7 +309,7 @@ export default async function createServer(root = '', conf = {}) {
}
if (code === null) {
friendlyErrors(pathname, ext)
- res.writeHead(404, 'Not Found')
+ res.writeHead(404, USE_HTTPS ? void 0 : 'Not Found')
res.end('')
return
}
@@ -316,7 +317,7 @@ export default async function createServer(root = '', conf = {}) {
}
res.setHeader('content-length', Buffer.byteLength(code || noc))
- res.writeHead(200, 'OK')
+ res.writeHead(200, USE_HTTPS ? void 0 : 'OK')
res.end(code || noc)
}
})
diff --git a/lib/utils.js b/lib/utils.js
index ead7c3a..e2a8d1c 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -4,8 +4,25 @@
* @date 2023/05/22 14:52:00
*/
-import { red, cyan, blue } from 'kolorist'
+import { createHash, randomUUID } from 'node:crypto'
+import { join } from 'node:path'
import { Worker } from 'node:worker_threads'
+import { red, cyan, blue } from 'kolorist'
+
+// 修正路径合并 避免在windows下被转义
+export function urlJoin(...args) {
+ return join(...args).replace(/\\/g, '/')
+}
+
+export function uuid() {
+ return randomUUID().slice(-8)
+}
+
+export function md5(str = '') {
+ let sum = createHash('md5')
+ sum.update(str, 'utf8')
+ return sum.digest('hex').slice(0, 8)
+}
export function friendlyErrors(pathname, ext = '') {
console.log(cyan(pathname), red(`not found!!!`))
@@ -15,10 +32,10 @@ export function friendlyErrors(pathname, ext = '') {
)
}
-export function createHmrScript(legacy) {
+export function createHmrScript(legacy, session = '') {
return `
!(function vue_live_hmr(){
- var ws = new WebSocket(\`ws\${location.protocol === 'https:' ? 's' : ''}://\${location.host}/ws-fite-hmr\`)
+ var ws = new WebSocket(\`ws\${location.protocol === 'https:' ? 's' : ''}://\${location.host}/ws-fite-hmr?session=${session}\`)
ws.addEventListener('open', function (r) {
if(vue_live_hmr.closed){
diff --git a/lib/ws.js b/lib/ws.js
index a28ff6f..a495f48 100644
--- a/lib/ws.js
+++ b/lib/ws.js
@@ -6,17 +6,22 @@
import { WebSocketServer } from 'ws'
class WebSocket {
- #ws = null // ws实例
+ #clients = new Map()
#queue = [] // 消息队列
constructor(server) {
if (server.listening) {
let conn = new WebSocketServer({ server, path: '/ws-fite-hmr' })
- conn.on('connection', ws => {
- this.#ws = ws
- // ws.on('message', data => {
- // console.log(data + '');
- // })
+ conn.on('connection', (client, req) => {
+ let params = new URLSearchParams(req.url.slice(req.url.indexOf('?')))
+ let session = params.get('session')
+
+ this.#clients.set(session, client)
+
+ client.once('close', _ => {
+ this.#clients.delete(session)
+ })
+
while (this.#queue.length) {
let msg = this.#queue.shift()
this.send(msg)
@@ -26,8 +31,10 @@ class WebSocket {
}
send(msg = {}) {
- if (this.#ws) {
- this.#ws.send(JSON.stringify(msg))
+ if (this.#clients.size) {
+ for (let [key, client] of this.#clients.entries()) {
+ client.send(JSON.stringify(msg))
+ }
} else {
this.#queue.push(msg)
}