bytedo
/
fite
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

https -> http2 #1

Merged
yutent merged 1 commits from http2 into master 2023-06-13 15:32:20 +08:00
Conversation 0 Commits 1 Files Changed 4
4 changed files with 64 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
lib/compile-vue.js
View File

@ -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(
'</head>',
`${
process.env.NODE_ENV === 'development'
? ` <script>${Es.transformSync(createHmrScript(LEGACY_MODE), {
? ` <script>${Es.transformSync(
createHmrScript(LEGACY_MODE, session),
{
minify: true
}).code.trim()}</script>\n`
}
).code.trim()}</script>\n`
: ''
}</head>`
)

29
lib/dev.js
View File

@ -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(
'<div>注意: 你看到这个页面, 仅在开发时可见。<br>仅为了方便开发多页应用时访问自己想要修改的页面, 而不需要手动输入地址。</div><ul>' +
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)
}
})

23
lib/utils.js
View File

@ -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){

23
lib/ws.js
View File

@ -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)
}