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

修复单文件组件中同时引入多个样式文件时重名的bug; 优化vue文件的解析

pull/1/head
yutent 2023-05-11 11:37:50 +08:00
parent b08b5c9172
commit 3e6ecc5e5f
1 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
lib/compile-vue.js
View File

@ -6,12 +6,16 @@
import fs from 'iofs' import fs from 'iofs'
import scss from '@bytedo/sass' import scss from '@bytedo/sass'
import { createHash } from 'crypto' import { createHash, randomUUID } from 'crypto'
import Es from 'esbuild' import Es from 'esbuild'
import { join } from 'path' import { join } from 'path'
import { compile } from '@vue/compiler-dom' import { compile } from '@vue/compiler-dom'
import { red, cyan, blue } from 'kolorist' import { red, cyan, blue } from 'kolorist'
function uuid() {
return randomUUID().slice(-8)
}
import { import {
JS_EXP, JS_EXP,
STYLE_EXP, STYLE_EXP,
@ -208,12 +212,8 @@ export function parseJs(
if (isBuild) { if (isBuild) {
name = name.replace(/\.scss/, '.css') name = name.replace(/\.scss/, '.css')
} }
let tmp = `style${Date.now()}` let tmp = `style_${uuid()}`
fixedStyle += ` fixedStyle += `__sheets__.push(${tmp})\n`
let __sheets__ = [...document.adoptedStyleSheets]
__sheets__.push(${tmp})
document.adoptedStyleSheets = __sheets__
`
// 修正那反人类的windows路径 // 修正那反人类的windows路径
return `import ${tmp} from '${name}' assert { type: 'css' }\n${tmp}.path = '${name.replace( return `import ${tmp} from '${name}' assert { type: 'css' }\n${tmp}.path = '${name.replace(
@ -300,7 +300,12 @@ export function compileVue(file, imports, options = {}, isBuild) {
isCustomElement: tag => tag.startsWith('wc-') isCustomElement: tag => tag.startsWith('wc-')
}).code.replace('export function render', 'function render') }).code.replace('export function render', 'function render')
output += html + '\n\n' html = html
.replace(/import .* from "vue"/, str => {
output += str + '\n'
return ''
})
.trim()
if (CACHE[file]) { if (CACHE[file]) {
CACHE[file] = { CACHE[file] = {
@ -314,7 +319,7 @@ export function compileVue(file, imports, options = {}, isBuild) {
output += parseJs(js, imports, options, isBuild, file).replace( output += parseJs(js, imports, options, isBuild, file).replace(
'export default {', 'export default {',
'const __sfc__ = {\n render,\n' `\nconst __sheets__ = [...document.adoptedStyleSheets]\n${html}\n\nconst __sfc__ = {\n render,\n`
) )
if (scss) { if (scss) {
@ -322,11 +327,12 @@ export function compileVue(file, imports, options = {}, isBuild) {
// 修正那反人类的windows路径 // 修正那反人类的windows路径
output += ` output += `
{
let stylesheet = new CSSStyleSheet() let stylesheet = new CSSStyleSheet()
let __sheets__ = [...document.adoptedStyleSheets]
stylesheet.path = '${filename}' stylesheet.path = '${filename}'
stylesheet.replaceSync(\`${scss}\`) stylesheet.replaceSync(\`${scss}\`)
__sheets__.push(stylesheet) __sheets__.push(stylesheet)
}
document.adoptedStyleSheets = __sheets__ document.adoptedStyleSheets = __sheets__
` `
} }