diff --git a/lib/compile-vue.js b/lib/compile-vue.js
index 0df2793..2c0d595 100644
--- a/lib/compile-vue.js
+++ b/lib/compile-vue.js
@@ -7,8 +7,15 @@
import fs from 'iofs'
import scss from '@bytedo/sass'
import { createHash } from 'crypto'
+import Es from 'esbuild'
-import { JS_EXP, STYLE_EXP, HTML_EXP, CSS_SHEET_EXP } from './constants.js'
+import {
+ JS_EXP,
+ STYLE_EXP,
+ HTML_EXP,
+ CSS_SHEET_EXP,
+ HMR_SCRIPT
+} from './constants.js'
const OPTIONS = {
indentType: 'space',
@@ -227,7 +234,11 @@ export function parseHtml(html, { page, imports, entry }, isBuild = false) {
` \n${
- isBuild ? '' : ' '
+ isBuild
+ ? ''
+ : ` `
}`
)
.replace('{{title}}', page.title || '')
diff --git a/lib/constants.js b/lib/constants.js
index f1a275f..76417f0 100644
--- a/lib/constants.js
+++ b/lib/constants.js
@@ -14,3 +14,38 @@ export const CSS_SHEET_EXP =
export const COMMON_HEADERS = {
'Cache-Control': 'no-store'
}
+
+export const HMR_SCRIPT = `
+!(function(){
+ var ws = new WebSocket(\`ws://\${location.host}/ws-vue-live\`)
+
+ ws.addEventListener('open', function (r) {
+ console.log('vue-live hmr ready...')
+ })
+
+ ws.addEventListener('message', function (ev) {
+ var { action, data } = JSON.parse(ev.data)
+
+ switch (action) {
+ case 'reload':
+ location.reload()
+ break
+
+ case 'render':
+ {
+ 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)
+ document.adoptedStyleSheets[i] = stylesheet
+ break
+ }
+ }
+ }
+ break
+ }
+ })
+})()
+`
diff --git a/lib/dev.js b/lib/dev.js
index d9f18bb..fbfd380 100644
--- a/lib/dev.js
+++ b/lib/dev.js
@@ -5,6 +5,7 @@ import { join, resolve, dirname } from 'path'
import { parse } from 'url'
import socket from './ws.js'
import chokidar from 'chokidar'
+import { red, cyan, blue } from 'kolorist'
import { compileScss, parseJs, compileVue, parseHtml } from './compile-vue.js'
@@ -134,10 +135,16 @@ export default async function createServer(root = '', conf = {}) {
file = join(root, rpath)
}
if (!fs.isfile(file)) {
- file = file.replace(/\.vue$/, '/index.vue')
+ console.clear()
+ console.log(cyan(rpath), red(`not found!!!`))
+ console.log(
+ red(
+ '请正确填写引入的文件路径, vue-live 不再自动补全【%s】\n'
+ ),
+ blue('/index.vue')
+ )
}
- // console.log('>>>>', file)
code = compileVue(file, conf.imports, {
IS_MPA,
currentPage,
@@ -176,8 +183,14 @@ export default async function createServer(root = '', conf = {}) {
if (fs.isfile(file)) {
code = fs.cat(file)
} else {
- file = file.replace(/\.js$/, '/index.js')
- code = fs.cat(file)
+ console.clear()
+ console.log(cyan(pathname), red(`not found!!!`))
+ console.log(
+ red(
+ '请正确填写引入的文件路径, vue-live 不再自动补全【%s】\n'
+ ),
+ blue('/index.js')
+ )
}
code = parseJs(code + '', conf.imports, { IS_MPA, currentPage })
res.setHeader('content-type', MIME_TYPES.js)
@@ -215,7 +228,10 @@ export default async function createServer(root = '', conf = {}) {
})
.on('error', err => {
- console.log(`${PORT}端口被占用~~~`)
+ console.log(
+ red(`${PORT} 端口被占用!!! 尝试使用 ${PORT + 1} 端口...`),
+ '\n'
+ )
conf.devServer.port = PORT + 1
createServer(root, conf)
})
@@ -255,7 +271,6 @@ export default async function createServer(root = '', conf = {}) {
case 'vue':
{
- // console.log('>>>>', file)
let content = compileVue(filePath, conf.imports, {
IS_MPA,
currentPage,
@@ -264,9 +279,7 @@ export default async function createServer(root = '', conf = {}) {
CACHE
})
let tmp = CACHE[filePath]
- // console.log(tmp);
if (tmp.changed) {
- console.log('需要刷新了')
ws.send({ action: 'reload' })
} else {
ws.send({
diff --git a/lib/ws.js b/lib/ws.js
index a1a6c84..2428a01 100644
--- a/lib/ws.js
+++ b/lib/ws.js
@@ -1,35 +1,28 @@
/**
- * 一个简单到极致的 WebSocket 类
+ * 一个简单到发指的 WebSocket 类
* @author yutent
* @date 2023/01/17 17:32:51
*/
import { WebSocketServer } from 'ws'
-function defer() {
- var o = {}
- o.promise = new Promise((resolve, reject) => {
- o.resolve = resolve
- o.reject = reject
- })
- return o
-}
-
class WebSocket {
#ws = null // ws实例
#queue = [] // 消息队列
constructor(server) {
- var conn = new WebSocketServer({ server, path: '/ws-vue-live' })
- conn.on('connection', ws => {
- this.#ws = ws
- // ws.on('message', data => {
- // console.log(data + '');
- // })
- while (this.#queue.length) {
- let msg = this.#queue.shift()
- this.send(msg)
- }
- })
+ if (server.listening) {
+ let conn = new WebSocketServer({ server, path: '/ws-vue-live' })
+ conn.on('connection', ws => {
+ this.#ws = ws
+ // ws.on('message', data => {
+ // console.log(data + '');
+ // })
+ while (this.#queue.length) {
+ let msg = this.#queue.shift()
+ this.send(msg)
+ }
+ })
+ }
}
send(msg = {}) {
diff --git a/package.json b/package.json
index 17f854c..878862e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "@bytedo/vue-live",
"type": "module",
- "version": "0.1.0",
+ "version": "0.1.1",
"bin": {
"vue-live": "index.js"
},
@@ -10,6 +10,7 @@
"chokidar": "^3.5.3",
"esbuild": "^0.15.13",
"iofs": "^1.5.2",
+ "kolorist": "^1.6.0",
"ws": "^8.12.0"
}
}