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

优化样式scoped的实现; 优化HMR恢复时刷新页面

pull/1/head 0.2.1
yutent 2023-02-20 00:41:58 +08:00
parent 733e6ce941
commit cc348dccc4
3 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
lib/compile-vue.js
View File

@ -30,12 +30,8 @@ function md5(str = '') {
} }
function scopeCss(css = '', hash) { function scopeCss(css = '', hash) {
let rules = css.matchAll(CSS_SHEET_EXP) return css.replace(CSS_SHEET_EXP, (m, selector) => {
if (!selector.startsWith('@')) {
return [...rules]
.map(r => {
let selector = r[1]
let style = r[2]
selector = selector.split(',') selector = selector.split(',')
selector = selector selector = selector
@ -51,10 +47,9 @@ function scopeCss(css = '', hash) {
return tmp.join(' ') return tmp.join(' ')
}) })
.join(', ') .join(', ')
}
return selector + ` {${style}}` return selector + '{'
}) })
.join('\n')
} }
/** /**
@ -224,7 +219,7 @@ export function compileVue(file, imports, options = {}, isBuild) {
let scoped = it[0].includes('scoped') let scoped = it[0].includes('scoped')
let css = compileScss(it[1]) let css = compileScss(it[1])
if (scoped) { if (scoped) {
return scopeCss(css, hash) css = scopeCss(css, hash)
} }
return css return css
}) })

8
lib/constants.js
View File

@ -8,8 +8,7 @@ export const JS_EXP = /<script[^>]*?>([\w\W]*?)<\/script>/
export const STYLE_EXP = /<style[^>]*?>([\w\W]*?)<\/style>/g export const STYLE_EXP = /<style[^>]*?>([\w\W]*?)<\/style>/g
export const HTML_EXP = /<template[^>]*?>([\w\W]*?)<\/template>/ export const HTML_EXP = /<template[^>]*?>([\w\W]*?)<\/template>/
export const CSS_SHEET_EXP = export const CSS_SHEET_EXP = /([@\w\.,#\-:>\+\~\|\(\)\[\]"'\=\s]+)\{/g
/([\w\.,#\-:>\+\~\|\(\)\[\]"'\=\s]+)\{([^\{\}]*?)\}/g
export const COMMON_HEADERS = { export const COMMON_HEADERS = {
'Cache-Control': 'no-store' 'Cache-Control': 'no-store'
@ -20,10 +19,15 @@ export const HMR_SCRIPT = `
var ws = new WebSocket(\`ws\${location.protocol === 'https:' ? 's' : ''}://\${location.host}/ws-vue-live\`) var ws = new WebSocket(\`ws\${location.protocol === 'https:' ? 's' : ''}://\${location.host}/ws-vue-live\`)
ws.addEventListener('open', function (r) { ws.addEventListener('open', function (r) {
if(vue_live_hmr.closed){
delete vue_live_hmr.closed
location.reload()
}
console.log('vue-live hmr ready...') console.log('vue-live hmr ready...')
}) })
ws.addEventListener('close', function(){ ws.addEventListener('close', function(){
vue_live_hmr.closed = true
setTimeout(vue_live_hmr, 2000) setTimeout(vue_live_hmr, 2000)
}) })

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "@bytedo/vue-live", "name": "@bytedo/vue-live",
"type": "module", "type": "module",
"version": "0.2.0", "version": "0.2.1",
"bin": { "bin": {
"vue-live": "index.js" "vue-live": "index.js"
}, },