@shijiu/jsview 1.9.914 → 1.9.921

package/patches/node_modules/@vue/compiler-sfc/dist/jsview-css-to-js.js

@@ -11,32 +11,87 @@ const path = require('path');
 const postCssJs = require('postcss-js');
 const styleFormat = require("./jsview-style-format");
 
+const compilerSfc = require("./compiler-sfc.cjs");
+const processorLangList = [
+    'less',
+    'sass',
+    'scss',
+    'styl',
+    'stylus',
+];
+
 const cachedCssStyles = {};
 
 function ensureSfcDescriptor(descriptor) {
     try {
         ensureSfcDescriptorImpl(descriptor)
+
     } catch (exception) {
-        console.error("Failed to call ensureSfcDescriptor()! Exception:\n", exception);
+        console.error("JsView Error: Failed to call ensureSfcDescriptor()! Exception:\n", exception);
     }
 }
 
 function compileCssToJs(sfc, options) {
     try {
-        const styleJsFilePath = getStyleJsFilePath(sfc.filename);
-        return `\nimport "${styleJsFilePath}";`
-        // return compileCssToJsImpl(sfc, options)
+        // 必须在此处parse css，否则npm run build时进入不到js代码中。
+        // const styleJsFilePath = getStyleJsFilePath(sfc.filename);
+        // return `\nimport "${styleJsFilePath}";`
+
+        const compiledJsContent = compileCssToJsImpl(sfc, options)
+        return compiledJsContent;
     } catch (exception) {
-        console.error("Failed to call compileCssToJs()! Exception:\n", exception);
+        console.error("JsView Error: Failed to call compileCssToJs()! Exception:\n", exception);
     }
 }
 
-function compileAndSaveImportedNode(styleFilePath, styleNodes) {
-    try {
-        return compileAndSaveImportedNodeImpl(styleFilePath, styleNodes)
-    } catch (exception) {
-        console.error("Failed to call compileAndSaveImportedNode()! Exception:\n", exception);
+function compileCssToJsImpl(sfc, options) {
+    let cachedStyleImports = [];
+    let cachedStyleSheets = {};
+    for (const style of sfc.styles) {
+        if(!!style.module) {
+            let errMsg = "JsView Error: style module is not released by Vue3!\n";
+            errMsg += style;
+            console.error(errMsg + " errors =", errors);
+            throw new Error(errMsg)
+        }
+
+        const compileStyleOptions = {
+            filename: sfc.filename,
+            id: `data-v-${options.id}`,
+            // map: null,
+            trim: true,
+            isProd: options.isProd,
+
+            source: style.content,
+            scoped: style.scoped,
+            modules: style.module,
+
+            preprocessLang: style.attrs.lang,
+        };
+
+        if(!!style.attrs.src) { // 处理<style [scoped] src="xxx">
+            const baseDir = path.dirname(sfc.filename);
+            const cssSrcPath = path.resolve(baseDir, style.attrs.src);
+            compileStyleOptions.source = fs.readFileSync(cssSrcPath, "utf8");
+        }
+
+        const { rawResult, errors } = compilerSfc.compileStyle(compileStyleOptions)
+        if(errors.length) {
+            const errMsg = "JsView Error: Failed to compile style when convert css to js!";
+            console.error(errMsg + " errors =", errors);
+            throw new Error(errMsg)
+        }
+        
+        const {styleImports, styleSheets } = compileAndSaveImportedNode(rawResult.result.root.nodes);
+        cachedStyleImports = [...cachedStyleImports, styleImports];
+        cachedStyleSheets = { ...cachedStyleSheets, ...styleSheets };
     }
+
+    const styleJsContents = serializeStyleJsFile(cachedStyleImports, cachedStyleSheets);
+
+    // console.log("jsview-css-to-js.compileCssToJsImpl() styleJsContents=", styleJsContents);
+
+    return styleJsContents;
 }
 
 function ensureSfcDescriptorImpl(descriptor) {
@@ -113,8 +168,9 @@ function check(expr, source, errMsg) {
     }
 }
 
-function compileAndSaveImportedNodeImpl(styleFilePath, styleNodes) {
-    const { styleImports, styleSheets } = deserializeStyleJsFile(styleFilePath);
+function compileAndSaveImportedNode(styleNodes) {
+    let styleImports = [];
+    let styleSheets = {};
 
     styleNodes.forEach(node => {
         if (node.type === "comment"
@@ -169,61 +225,34 @@ function compileAndSaveImportedNodeImpl(styleFilePath, styleNodes) {
         }
     })
 
-    // console.log('jsview-css-to-js.compileAndSaveImportedNodeImpl() styleFilePath=', styleFilePath, ', styleSheets=', styleSheets);
-    serializeStyleJsFile(styleFilePath, { styleImports, styleSheets });
-}
-
-function  deserializeStyleJsFile(styleFilePath) {
-    const styleJsFilePath = getStyleJsFilePath(styleFilePath);
-
-    let styleImports = [];
-    let styleSheets = {};
-
-    let styleJsContent = fs.readFileSync(styleJsFilePath, "utf8");
-    if (styleJsContent) {
-        const styleSheetsFlags = getStyleSheetsDeclaredFlags();
-        const styleImportsContent = styleJsContent.substring(0, styleJsContent.indexOf(styleSheetsFlags.start));
-        let styleSheetsContent = styleJsContent.substring(0, styleJsContent.indexOf(styleSheetsFlags.end));
-        styleSheetsContent = styleSheetsContent.substring(styleJsContent.indexOf(styleSheetsFlags.start) + styleSheetsFlags.start.length);
-
-        styleImports = styleImportsContent.split('\n');
-        styleSheets = JSON.parse(styleSheetsContent.length != 0 ? styleSheetsContent : '{}');
-    }
-
-
+    // console.log('jsview-css-to-js.compileAndSaveImportedNode() styleSheets=', styleImports, styleSheets);
     return {
         styleImports,
         styleSheets,
     }
 }
 
-function serializeStyleJsFile(styleFilePath, { styleImports, styleSheets }) {
-    const styleJsFilePath = getStyleJsFilePath(styleFilePath);
+function serializeStyleJsFile(styleImports, styleSheets) {
+    if (styleImports.length == 0
+    && Object.keys(styleSheets).length === 0) {
+        return "";
+    }
 
-    const styleSheetsFlags = getStyleSheetsDeclaredFlags();
     const styleImportsContent = styleImports.join('\n');
     const styleSheetsContent = JSON.stringify(styleSheets);
 
-    let styleJsContent = "";
+    let styleJsContent = "\n";
     styleJsContent += styleImportsContent;
-    styleJsContent += styleSheetsFlags.start;
+    styleJsContent += "\nconst styleSheetsContent = ";
     styleJsContent += styleSheetsContent;
-    styleJsContent += styleSheetsFlags.end;
+    styleJsContent += ";\nwindow.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);";
 
-    // 保存到js文件并import到script中
-    fs.writeFileSync(styleJsFilePath, styleJsContent, "utf8");
-}
-
-function getStyleSheetsDeclaredFlags() {
-    return {
-        start: "\nconst styleSheetsContent = ",
-        end: ";\nwindow.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);",
-    }
+    return styleJsContent;
 }
 
 function getStyleJsCacheDir() {
     const nodeModulesDir = path.resolve(process.cwd(), 'node_modules');
-    const cacheDir = path.resolve(nodeModulesDir, '@shijiu', '.cache', 'css-to-js'); // 不能放在.vite文件夹，否则有网络缓存，文件改变后不更新
+    const cacheDir = path.resolve(nodeModulesDir, '.vite', 'jsview', 'css-to-js'); // 不能放在.vite文件夹，否则有网络缓存，文件改变后不更新
     if (!fs.existsSync(cacheDir)) {
         fs.mkdirSync(cacheDir, { recursive: true });
     }
@@ -236,7 +265,7 @@ function getStyleJsFilePath(styleFilePath) {
     const cacheDir = getStyleJsCacheDir()
 
     const styleFilePathHash = crypto.createHash('md5').update(styleFilePath).digest('hex').substring(0, 8);
-    const styleJsFileName = styleFilePathHash + '.' + path.basename(styleFilePath) + '.js';
+    const styleJsFileName = path.basename(styleFilePath) + '.' + styleFilePathHash + '.js';
     const styleJsFilePath = path.join(cacheDir, styleJsFileName);
     if (!fs.existsSync(styleJsFilePath)) {
         fs.closeSync(fs.openSync(styleJsFilePath, 'w'));
@@ -345,7 +374,12 @@ function parsePostCssJs(node, selector, declarations) {
 function parseUnscopedStyleSheets(node, selector, declarations, scopedId) {
     let styleRules = {};
 
-    for (const [name, value] of Object.entries(declarations)) {
+    for (let [name, value] of Object.entries(declarations)) {
+        // 处理var变量中如果存在'a.b'的写法，被翻译成'a\.b'的问题。
+        if (typeof (value) == 'string' && value.startsWith('var(--')) {
+            value = value.replaceAll('\\', '');
+        }
+
         if (name.startsWith('@keyframes')) { // keyframes解嵌套处理
             check(false, node.source.input.css, "JsView Error: Nested keyframes is not supported!");
             delete declarations[name];
@@ -370,4 +404,4 @@ function parseUnscopedStyleSheets(node, selector, declarations, scopedId) {
 
 exports.ensureSfcDescriptor = ensureSfcDescriptor;
 exports.compileCssToJs = compileCssToJs;
-exports.compileAndSaveImportedNode = compileAndSaveImportedNode;
+// exports.compileAndSaveImportedNode = compileAndSaveImportedNode;

package/patches/node_modules/@vue/compiler-sfc/dist/jsview-style-format.js

@@ -116,21 +116,21 @@ class StyleFormatter {
       case StyleName.Text.TextAlign:
       case StyleName.Text.TextShadow:
       case StyleName.Text.TextOverflow:
+      case StyleName.Text.Transform:
+      case StyleName.Text.TransformOrigin:
+      case StyleName.Text.TransformStyle:
       case StyleName.Text.WebkitTextStroke:
       case StyleName.Text.WhiteSpace:
       case StyleName.Text.WordWrap:
         formattedValue = StyleFormatter.#GetTextValue(propName, propValue);
         break;
       case StyleName.Motion.Animation:
-      case StyleName.Motion.Transform:
-      case StyleName.Motion.TransformOrigin:
-      case StyleName.Motion.TransformStyle:
       case StyleName.Motion.Transition:
         formattedValue = StyleFormatter.#GetMotionValue(propName, propValue);
         break;
       default:
         // 返回未处理的值
-        console.warn("JsView Warn: Unimplemented style property " + propName);
+        console.warn("JsView Warn: Unimplemented style property [" + propName + "]");
         break;
     }
 

package/patches/node_modules/@vue/compiler-sfc/dist/jsview-style-types.js

@@ -47,6 +47,9 @@ class StyleName {
     static TextAlign = "textAlign";
     static TextOverflow = "textOverflow";
     static TextShadow = "textShadow";
+    static Transform = "transform";
+    static TransformOrigin = "transformOrigin";
+    static TransformStyle = "transformStyle";
     static WebkitTextStroke = "WebkitTextStroke";
     static WhiteSpace = "whiteSpace";
     static WordWrap = "wordWrap";