@shijiu/jsview 1.9.921 → 1.9.943-next-vue.0

package/patches/node_modules/@vue/compiler-dom/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@vue/compiler-dom",
+  "version": "3.2.45",
+  "description": "@vue/compiler-dom",
+  "main": "index.js",
+  "module": "dist/compiler-dom.esm-bundler.js",
+  "types": "dist/compiler-dom.d.ts",
+  "unpkg": "dist/compiler-dom.global.js",
+  "jsdelivr": "dist/compiler-dom.global.js",
+  "files": [
+    "index.js",
+    "dist"
+  ],
+  "sideEffects": false,
+  "buildOptions": {
+    "name": "VueCompilerDOM",
+    "compat": true,
+    "formats": [
+      "esm-bundler",
+      "esm-browser",
+      "cjs",
+      "global"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuejs/core.git",
+    "directory": "packages/compiler-dom"
+  },
+  "keywords": [
+    "vue"
+  ],
+  "author": "Evan You",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vuejs/core/issues"
+  },
+  "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-dom#readme",
+  "dependencies": {
+    "@vue/shared": "3.2.45",
+    "@vue/compiler-core": "3.2.45"
+  }
+}

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

@@ -8,8 +8,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const crypto = require('crypto');
 const fs = require('fs');
 const path = require('path');
+const postCss = require('postcss');
 const postCssJs = require('postcss-js');
-const styleFormat = require("./jsview-style-format");
+const styleChecker = require("./jsview-style-checker");
 
 const compilerSfc = require("./compiler-sfc.cjs");
 const processorLangList = [
@@ -83,7 +84,7 @@ function compileCssToJsImpl(sfc, options) {
         }
         
         const {styleImports, styleSheets } = compileAndSaveImportedNode(rawResult.result.root.nodes);
-        cachedStyleImports = [...cachedStyleImports, styleImports];
+        cachedStyleImports = [...cachedStyleImports, ...styleImports];
         cachedStyleSheets = { ...cachedStyleSheets, ...styleSheets };
     }
 
@@ -172,14 +173,14 @@ function compileAndSaveImportedNode(styleNodes) {
     let styleImports = [];
     let styleSheets = {};
 
-    styleNodes.forEach(node => {
+    for(const node of styleNodes) {
         if (node.type === "comment"
         || node.name === "-webkit-keyframes"
         || node.name === "charset") {
                 // DO NOTHING
         } else if(node.name === "import") {
-            const importContent = compileImportNode(node);
-            if (styleImports.includes(importContent) == false) {
+            const importContent = compileImportNodeRecursive(node);
+            if (importContent && styleImports.includes(importContent) == false) {
                 styleImports.push(importContent);
             }
         } else if(node.name === "keyframes") {
@@ -187,8 +188,8 @@ function compileAndSaveImportedNode(styleNodes) {
             const styleSelectors = new Set([node.params]);
             const checked = checkSelectors(node, styleFilePath, styleSelectors); // 检测selector是否已经处理过
             if (checked == false) {
-                // 已经处理过，直接返回了，优化@import被展开问题。
-                return;
+                let errMsg = "JsView Warn: Multi defined CSS keyframes '" + node.params + "'.\n";
+                console.warn(errMsg);
             }
 
             const subStyleSheets = compileKeyframesNode(node);
@@ -200,8 +201,8 @@ function compileAndSaveImportedNode(styleNodes) {
             const styleSelectors = new Set([node.selector]);
             const checked = checkSelectors(node, styleFilePath, styleSelectors); // 检测selector是否已经处理过
             if (checked == false) {
-                // 已经处理过，直接返回了，优化@import被展开问题。
-                return;
+                let errMsg = "JsView Warn: Multi defined CSS selector '" + node.selector + "'.\n";
+                console.warn(errMsg);
             }
 
             const subStyleSheets = compileSelectorNode(node);
@@ -223,7 +224,7 @@ function compileAndSaveImportedNode(styleNodes) {
             console.log("Unsupported css node: ", node);
             check(false, node.source.input.css, "JsView Error: Unsupported css node from import css file.");
         }
-    })
+    }
 
     // console.log('jsview-css-to-js.compileAndSaveImportedNode() styleSheets=', styleImports, styleSheets);
     return {
@@ -233,19 +234,19 @@ function compileAndSaveImportedNode(styleNodes) {
 }
 
 function serializeStyleJsFile(styleImports, styleSheets) {
-    if (styleImports.length == 0
-    && Object.keys(styleSheets).length === 0) {
-        return "";
-    }
+    let styleJsContent = "\n";
 
-    const styleImportsContent = styleImports.join('\n');
-    const styleSheetsContent = JSON.stringify(styleSheets);
+    if (styleImports.length > 0) {
+        const styleImportsContent = styleImports.join('\n');
+        styleJsContent += styleImportsContent;
+    }
 
-    let styleJsContent = "\n";
-    styleJsContent += styleImportsContent;
-    styleJsContent += "\nconst styleSheetsContent = ";
-    styleJsContent += styleSheetsContent;
-    styleJsContent += ";\nwindow.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);";
+    if (Object.keys(styleSheets).length > 0) {
+        const styleSheetsContent = JSON.stringify(styleSheets);
+        styleJsContent += "\nconst styleSheetsContent = ";
+        styleJsContent += styleSheetsContent;
+        styleJsContent += ";\nwindow.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);";
+    }
 
     return styleJsContent;
 }
@@ -291,12 +292,69 @@ function getStringOffset(source, line, column) {
     return offset;
 }
 
-function compileImportNode(node) {
+function compileImportNodeRecursive(node, parsedImports = []) {
+    const name = node.name;
+    check(name === "import", node.source.input.css, "JsView Error: @import name is not found!");
+
+    let cssFilePath = node.params.replaceAll('"', '');
+    cssFilePath = cssFilePath.replaceAll("'", '');
     const baseDir = path.dirname(node.source.input.file);
-    const cssFilePath = path.resolve(baseDir, node.params.replaceAll('"', ''));
-    const styleJsFilePath = getStyleJsFilePath(cssFilePath);
+    const cssFileFullPath = path.resolve(baseDir, cssFilePath);
+    const styleJsFilePath = getStyleJsFilePath(cssFileFullPath);
+
+    // 解死循环
+    if (parsedImports.includes(cssFileFullPath)) {
+        console.log('JsView Info: Ignore to parse file in dead loop: ' + cssFileFullPath);
+        return null;
+    }
+    parsedImports.push(cssFileFullPath);
+
+    try {
+        const content = fs.readFileSync(cssFileFullPath, "utf8");;
+        const options = {
+            from: cssFileFullPath
+        };
+        const parsedCss = postCss([]).process(content, options);
+
+        const styleNodes = parsedCss.result.root.nodes;
+        const styleImportNodes = [];
+        const importNodeIndexs = [];
+        for (let idx = 0; idx < styleNodes.length; idx++) {
+            const node = styleNodes[idx];
+            if (node.name !== "import") {
+                continue;
+            }
+
+            importNodeIndexs.push(idx);
+        }
+        for (const idx of importNodeIndexs) {
+            const node = styleNodes[idx];
+            styleImportNodes.push(node);
+            styleNodes.splice(idx, 1);
+        }
+
+        const styleImports = [];
+        for (const node of styleImportNodes) {
+            const importContent = compileImportNodeRecursive(node, parsedImports);
+            if (styleImports.includes(importContent) == true) {
+                continue;
+            }
+
+            styleImports.push(importContent);
+        }
+
+        const { _, styleSheets } = compileAndSaveImportedNode(styleNodes);
+        const styleJsContents = serializeStyleJsFile(styleImports, styleSheets);
+
+        fs.writeFileSync(styleJsFilePath, styleJsContents, "utf8");;
+    } catch (e) {
+        console.log('JsView Error: Failed to compile css import node.', e);
+        throw e;
+    }
+
     const styleImportContent = `\nimport "${styleJsFilePath}";`;
 
+    // console.log('jsview-css-to-js.compileImportNodeRecursive() return ', styleImportContent);
     return styleImportContent;
 }
 
@@ -320,6 +378,7 @@ function compileKeyframesNode(node) {
     const kfName = node.params;
     let kfValue = content.replace(/(\r|\n|\r\n)/g, " ");
     kfValue = kfValue.replace(/@keyframes .*? {/g, "@keyframes " + kfName + " {");
+    kfValue = styleChecker.GetFormattedKeyframe(kfName, kfValue);
 
     const scopedId = '0'; // CSS规范中，keyframes没有继承, 放在glabol中
     const kfRule = { [kfName]: kfValue };
@@ -375,6 +434,12 @@ function parseUnscopedStyleSheets(node, selector, declarations, scopedId) {
     let styleRules = {};
 
     for (let [name, value] of Object.entries(declarations)) {
+        if (value instanceof Array) { // 同一个name定义了多次
+            let errMsg = "JsView Warn: Multi defined CSS name '" + name + "' from " + selector + ".\n";
+            console.warn(errMsg);
+            value = value[value.length - 1];
+        }
+
         // 处理var变量中如果存在'a.b'的写法，被翻译成'a\.b'的问题。
         if (typeof (value) == 'string' && value.startsWith('var(--')) {
             value = value.replaceAll('\\', '');
@@ -392,7 +457,7 @@ function parseUnscopedStyleSheets(node, selector, declarations, scopedId) {
             continue;
         }
 
-        const formattedValue = styleFormat.getFormattedValue(name, value);
+        const formattedValue = styleChecker.GetFormattedValue(name, value);
         declarations[name] = formattedValue;
     }
 

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

@@ -0,0 +1,189 @@
+const {
+  StyleFormator,
+  StyleName,
+  StyleValue,
+  StyleVariable
+} = require("./jsview-style-formator.cjs");
+
+    // if (StyleVariable.IsVariable(value)) {
+    //   return value;
+    // }
+
+class StyleChecker {
+  static GetFormattedValue(propName, propValue) {
+    propValue = new StyleValue(propValue);
+    if (StyleVariable.IsVariable(propValue)) {
+      return propValue;
+    }
+
+    let formattedValue = propValue.get();
+    switch (propName) {
+      case StyleName.Layout.Height:
+      case StyleName.Layout.Left:
+      case StyleName.Layout.Top:
+      case StyleName.Layout.Width:
+        formattedValue = StyleChecker.#GetLayoutValue(propName, propValue);
+        break;
+      case StyleName.Background.BackgroundColor:
+      case StyleName.Background.BackgroundImage:
+      case StyleName.Background.BorderRadius:
+        formattedValue = StyleChecker.#GetBackgroundValue(propName, propValue);
+        break;
+      case StyleName.Effect.BackfaceVisibility:
+      case StyleName.Effect.BorderImage:
+      case StyleName.Effect.BorderImageWidth:
+      case StyleName.Effect.BorderImageOutset:
+      case StyleName.Effect.ClipPath:
+      case StyleName.Effect.Display:
+      case StyleName.Effect.ObjectFit:
+      case StyleName.Effect.Opacity:
+      case StyleName.Effect.Overflow:
+      case StyleName.Effect.Perspective:
+      case StyleName.Effect.PerspectiveOrigin:
+      case StyleName.Effect.Visibility:
+      case StyleName.Effect.ZIndex:
+        formattedValue = StyleChecker.#GetEffectValue(propName, propValue);
+        break;
+      case StyleName.Text.Color:
+      case StyleName.Text.FontFamily:
+      case StyleName.Text.FontSize:
+      case StyleName.Text.FontStyle:
+      case StyleName.Text.FontWeight:
+      case StyleName.Text.LineHeight:
+      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 = StyleChecker.#GetTextValue(propName, propValue);
+        break;
+      case StyleName.Motion.Animation:
+      case StyleName.Motion.Transition:
+        formattedValue = StyleChecker.#GetMotionValue(propName, propValue);
+        break;
+      default:
+        // 返回未处理的值
+        console.warn("JsView Warn: Unimplemented style property [" + propName + "]");
+        break;
+    }
+
+    return formattedValue;
+  }
+
+  static GetFormattedKeyframe(propName, propValue) {
+    let removedPxSuffix = false;
+
+    // 去掉translate3d中的px单位
+    const valueArray = propValue.split('translate3d');
+    for (let idx = 1; idx < valueArray.length; idx++) {
+      let useFormated = false;
+      let translate3dValue = valueArray[idx].replace(/\).*/, ''); // 只保留value
+      translate3dValue = translate3dValue.replace(/.*\(/, ''); // 只保留value
+      const translate3dCoord = translate3dValue.split(',');
+      for (let coordIdx = 0; coordIdx < translate3dCoord.length; coordIdx++) {
+        const coordValue = translate3dCoord[coordIdx].trim();
+        if (coordValue.includes('px')) {
+          translate3dCoord[coordIdx] = coordValue.replace('px', '');
+          useFormated = true;
+        }
+      }
+
+      if (useFormated) { // 替换成去掉px的值
+        translate3dValue = translate3dCoord.join(',');
+        valueArray[idx] = valueArray[idx].replace(/\(.*?\)/, '(' + translate3dValue + ')');
+        removedPxSuffix = true;
+      }
+    }
+
+    if (removedPxSuffix) {
+      const msg = `JsView Info:`
+                + ` Auto optimize style keyframes ${propName},`
+                + ` remove unnecessary 'px' suffix.`;
+      console.info(msg);
+    }
+    const value = valueArray.join('translate3d');
+
+    return value;
+  }
+
+  static #GetLayoutValue(propName, propValue) {
+    const formattedValue = StyleChecker.#ConvertToInt32(propName, propValue);
+
+    return formattedValue;
+  }
+
+  static #GetBackgroundValue(propName, propValue) {
+    let formattedValue = null;
+    switch (propName) {
+      case StyleName.Background.BorderRadius:
+        propValue = propValue.replace('px', ''); // 去掉px
+        formattedValue = StyleFormator.ConvertToString(propValue);
+        break;
+      default:
+        formattedValue = StyleFormator.ConvertToString(propValue);
+        break;
+    }
+
+    return formattedValue;
+  }
+
+  static #GetEffectValue(propName, propValue) {
+    let formattedValue = null;
+    switch (propName) {
+      case StyleName.Effect.Opacity:
+        formattedValue = StyleFormator.ConvertToFloat(propValue);
+        break;
+      default:
+        formattedValue = StyleFormator.ConvertToString(propValue);
+        break;
+    }
+
+    return formattedValue;
+  }
+
+  static #GetTextValue(propName, propValue) {
+    let formattedValue = null;
+    switch (propName) {
+      case StyleName.Text.FontSize:
+      case StyleName.Text.LineHeight:
+        formattedValue = StyleChecker.#ConvertToInt32(propName, propValue);
+        break;
+      default:
+        formattedValue = StyleFormator.ConvertToString(propValue);
+        break;
+    }
+
+    return formattedValue;
+  }
+
+  static #GetMotionValue(propName, propValue) {
+    // 需要留到执行时处理
+    const formattedValue = StyleFormator.ConvertToString(propValue);
+
+    return formattedValue;
+  }
+
+  static #ConvertToInt32(propName, propValue) {
+    if (propValue.is(StyleValue.DataType.String)) {
+      const strValue = propValue.get();
+      StyleFormator.StringTrim(strValue);
+      if (StyleFormator.StringEndsWith(strValue, "px")) {
+        const fmtValue = StyleFormator.StringToInt32(strValue);
+        const msg = `JsView Info:`
+                  + ` Auto optimize style propery ${propName},`
+                  + ` convert value from string ${strValue} to number ${fmtValue}.`;
+        console.info(msg);
+        return fmtValue;
+      }
+    } 
+
+    return StyleFormator.ConvertToInt32(propValue);
+  }
+
+}
+
+module.exports = StyleChecker;