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

修复使用独立的样式文件时热更新失效的bug; 增加legacy模式的支持

pull/1/head 1.1.0
yutent 2023-05-18 12:04:24 +08:00
parent 7ed5f81da2
commit 27afea8649
5 changed files with 202 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
lib/compile-vue.js
View File

@ -21,9 +21,10 @@ import {
STYLE_EXP,
HTML_EXP,
CSS_SHEET_EXP,
HMR_SCRIPT,
V_DEEP,
PERCENT_EXP
PERCENT_EXP,
SHEETS_DEF,
createHmrScript
} from './constants.js'
const OPTIONS = {
@ -126,7 +127,7 @@ export function parseJs(
{ IS_MPA, currentPage, IS_ENTRY, DEPLOY_PATH, LEGACY_MODE } = {},
filename
) {
let fixedStyle = '\n\n'
let fixedStyle = ''
let ASSETS_DIR = '/@/'
let isBuild = process.env.NODE_ENV === 'production'
@ -134,10 +135,6 @@ export function parseJs(
ASSETS_DIR = '/assets/'
}
if (IS_ENTRY) {
fixedStyle += 'const __sheets__ = [...document.adoptedStyleSheets];\n'
}
try {
code = Es.transformSync(code).code || ''
} catch (e) {
@ -156,8 +153,7 @@ export function parseJs(
)
}
return (
code
code = code
.replace(/\r\n/g, '\n')
.replace(/process\.env\.NODE_ENV/g, `'${process.env.NODE_ENV}'`)
.replace(
@ -216,18 +212,18 @@ export function parseJs(
name = name.replace(/\.scss/, '.css')
}
// 修正那反人类的windows路径
let _name = name.replace(/\\/g, '/')
let _name = name.replace(/\\/g, '/').replace('@/', '')
let tmp = `style_${uuid()}`
if (LEGACY_MODE) {
fixedStyle += `${tmp}.then(r => {
let stylesheet = new CSSStyleSheet()
stylesheet.path = '${_name}'
stylesheet.replaceSync(r)
__sheets__.push(stylesheet)
let stylesheet = document.createElement('style')
stylesheet.setAttribute('name', '${_name}')
stylesheet.textContent = r
document.head.appendChild(stylesheet)
})
`
return `${tmp} = window.fetch('${name}').then(r => r.text())`
return `const ${tmp} = window.fetch('${name}').then(r => r.text())`
} else {
fixedStyle += `${tmp}.path = '${_name}'\n__sheets__.push(${tmp})\n`
@ -261,10 +257,17 @@ export function parseJs(
return `import '${name}'`
}
}) +
fixedStyle +
(IS_ENTRY ? '\ndocument.adoptedStyleSheets = __sheets__' : '')
)
})
if (fixedStyle) {
code += '\n\n' + (LEGACY_MODE ? '' : SHEETS_DEF) + fixedStyle
if (IS_ENTRY && !LEGACY_MODE) {
code += '\ndocument.adoptedStyleSheets = __sheets__'
}
}
return code
}
/**
@ -273,6 +276,7 @@ export function parseJs(
* @return <String> 返回转换后的js代码
*/
export function compileVue(file, imports, options = {}) {
// 修正那反人类的windows路径
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 || {}
@ -360,13 +364,24 @@ function render(_ctx, _cache) {
output += parseJs(js, imports, options, file).replace(
'export default {',
`\nconst __sheets__ = [...document.adoptedStyleSheets]\n${html}\n\nconst __sfc__ = {\n render,\n`
`\n${
options.LEGACY_MODE ? '' : SHEETS_DEF
}${html}\n\nconst __sfc__ = {\n render,\n`
)
if (scss) {
CACHE[file].css = scss
// 修正那反人类的windows路径
if (options.LEGACY_MODE) {
output += `
{
let stylesheet = document.createElement('style')
stylesheet.setAttribute('name', '${filename}')
stylesheet.textContent = \`${scss}\`
document.head.appendChild(stylesheet)
}
`
} else {
output += `
{
let stylesheet = new CSSStyleSheet()
@ -377,6 +392,7 @@ function render(_ctx, _cache) {
document.adoptedStyleSheets = __sheets__
`
}
}
if (scoped) {
output += `__sfc__.__scopeId = '${scopeId}'\n`
}
@ -388,14 +404,14 @@ document.adoptedStyleSheets = __sheets__
/**
* 解析模板html
*/
export function parseHtml(html, { page, imports, entry }) {
export function parseHtml(html, { page, imports, entry, LEGACY_MODE }) {
return html
.replace(/\r\n/g, '\n')
.replace(
'</head>',
`${
process.env.NODE_ENV === 'development'
? ` <script>${Es.transformSync(HMR_SCRIPT, {
? ` <script>${Es.transformSync(createHmrScript(LEGACY_MODE), {
minify: true
}).code.trim()}</script>\n`
: ''

18
lib/constants.js
View File

@ -16,7 +16,11 @@ export const COMMON_HEADERS = {
'Cache-Control': 'no-store'
}
export const HMR_SCRIPT = `
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\`)
@ -43,6 +47,15 @@ export const HMR_SCRIPT = `
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) {
@ -54,9 +67,12 @@ export const HMR_SCRIPT = `
break
}
}
`
}
}
break
}
})
})()
`
}

15
lib/dev.js
View File

@ -164,14 +164,19 @@ export default async function createServer(root = '', conf = {}) {
LEGACY_MODE
})
code = parseHtml(html, { page, imports: conf.imports, entry })
code = parseHtml(html, {
page,
imports: conf.imports,
entry,
LEGACY_MODE
})
}
break
case 'vue':
{
let rpath = pathname.replace(/@\//, '')
let rpath = pathname.replace('@/', '')
let file
if (IS_MPA) {
@ -208,9 +213,9 @@ export default async function createServer(root = '', conf = {}) {
case 'scss':
case 'css':
{
let file = join(SOURCE_DIR, pathname.replace(/@\//, ''))
let file = join(SOURCE_DIR, pathname.replace('@/', ''))
if (!fs.isfile(file)) {
file = join(PUBLIC_DIR, pathname.replace(/@\//, ''))
file = join(PUBLIC_DIR, pathname.replace('@/', ''))
if (!fs.isfile(file)) {
friendlyErrors(pathname, ext)
@ -232,7 +237,7 @@ export default async function createServer(root = '', conf = {}) {
case 'js':
{
let rpath = pathname.replace(/@\//, '')
let rpath = pathname.replace('@/', '')
let file
if (IS_MPA) {

7
lib/prod.js
View File

@ -60,7 +60,12 @@ export default function compile(root = '', dist = '', conf = {}) {
entry = parseJs(entry, conf.imports, { ...options, IS_ENTRY: true })
let code = parseHtml(template, { page, imports: conf.imports, entry })
let code = parseHtml(template, {
page,
imports: conf.imports,
entry,
LEGACY_MODE
})
fs.echo(code, join(dist, `${currentPage}.html`))
continue

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "fite",
"type": "module",
"version": "1.0.3",
"version": "1.1.0",
"bin": {
"fite": "index.js"
},