@aiot-toolkit/parser 2.0.6-beta.2 → 2.0.6-beta.4

package/lib/ux/config/{vela/StyleAttributeConfig.d.ts → StyleBaseConfig.d.ts}

@@ -1,6 +1,6 @@
 import { Dictionary, Loglevel } from '@aiot-toolkit/shared-utils';
 import { StyleMessage } from '@aiot-toolkit/shared-utils';
-import { BlockItem, StyleItem } from '../../interface/IStyleAst';
+import { BlockItem, StyleItem } from '../interface/IStyleAst';
 type ValidateInfo = {
     level: Loglevel;
     message: StyleMessage[];

package/lib/ux/config/{vela/StyleAttributeConfig.js → StyleBaseConfig.js}

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.STYLE_ATTRIBUTE_LIST = exports.STYLE_ATTRIBUTE_CONFIG = void 0;
 var _sharedUtils = require("@aiot-toolkit/shared-utils");
-var _ExtendedBoxStyle = _interopRequireDefault(require("../../translate/vela/utils/ExtendedBoxStyle"));
-var _UxUtil = _interopRequireDefault(require("../../utils/UxUtil"));
+var _ExtendedBoxStyle = _interopRequireDefault(require("../translate/vela/utils/ExtendedBoxStyle"));
+var _UxUtil = _interopRequireDefault(require("../utils/UxUtil"));
 var _cssTree = _interopRequireDefault(require("css-tree"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const REGEXP_NAME = /^([a-zA-Z_]+[a-zA-Z0-9]*\s*,\s*)*[a-zA-Z_]+[a-zA-Z0-9]*$/;
@@ -1345,9 +1345,9 @@ function validateLengthNode(sourceNode) {
     value[0] = value[0];
     const validResult = validLength(value[0]);
     if (validResult.message.length > 0) {
-      validateInfo.message = [`The value verification of attribute`, {
-        word: attributeName
-      }, `failed.`, ...validResult.message];
+      validateInfo.message = [`The value of attribute`, {
+        word: `${attributeName}:`
+      }, ...validResult.message];
     }
   }
   return validateInfo;
@@ -1363,11 +1363,9 @@ function validLength(value) {
     message: []
   };
   if (_cssTree.default.lexer.matchType('length', value.value + value.unit).error !== null) {
-    validateInfo.message = [`The length value is`, {
-      word: value.value || 'null'
-    }, `, unit is`, {
-      word: value.unit || 'null'
-    }, `, which does not meet the length standard.`];
+    validateInfo.message = [{
+      word: `${value.value}${value.unit}`
+    }, `is invalid.`];
   }
   return validateInfo;
 }
@@ -1549,30 +1547,24 @@ function validPosition(sourceNode) {
     name: attributeName
   } = sourceNode;
   if (value.length <= 0) {
-    validateInfo.message = [`Error parsing the value of attribute`, {
+    validateInfo.message = [`The value of attribute`, {
       word: `${attributeName}`
-    }];
+    }, 'is invalid.'];
   } else if (value.length > 3) {
-    validateInfo.message = [`Error parsing the value length`, `of`, {
-      word: `'${attributeName}'`
-    }, `is`, {
-      word: value.length
-    }, `, which does not meet the requirement.`];
+    validateInfo.message = [`The value length`, `of attribute`, {
+      word: `${attributeName}: ${value.length}`
+    }, `is invalid.`];
   } else {
     value.forEach(v => {
       v = v;
       const validResult = validLength(v);
       // 有报错
       if (validResult.message.length > 0) {
-        validateInfo.message.push(...validResult.message);
+        validateInfo.message = [`The value of attribute`, {
+          word: `${attributeName}:`
+        }, ...validResult.message];
       }
     });
-    // 如果有报错，添加一下属性名
-    if (validateInfo.message.length > 0) {
-      validateInfo.message.unshift(`The value verification of attribute `, {
-        word: attributeName
-      }, `failed.`);
-    }
   }
   return validateInfo;
 }

package/lib/ux/interface/IStyleError.d.ts

@@ -1,8 +1,9 @@
 /**
  * IStyleError
  */
+import { StyleMessage } from '@aiot-toolkit/shared-utils';
 export interface IStyleError {
-    message: string;
+    messages: StyleMessage[];
     details: string;
     startLine: number;
     startCol: number;

package/lib/ux/parser/ScriptParser.js

@@ -14,7 +14,8 @@ class ScriptParser {
   parser(content) {
     // const { onLog } = this.options
     const ast = {
-      content
+      // 判断content是否包含有效js内容，若只包含\n\r\t空白符，则content为''
+      content: content.trim() ? content : ''
     };
     return {
       ast

package/lib/ux/parser/StyleParser.d.ts

@@ -3,7 +3,7 @@ import IOptions from '../config/IOptions';
 import { IStyleAst } from '../interface/IStyleAst';
 import ITranslateOption from '../interface/ITranslateOption';
 import { IImageFunction } from '../interface/IImageResource';
-import { RawSourceMap, SourceMapConsumer } from 'source-map';
+import { SourceMapConsumer } from 'source-map';
 /**
  * StyleParser
  * 1. 根据语言类型分别转为CSS样式
@@ -15,9 +15,10 @@ declare class StyleParser implements IParser<IStyleAst> {
     readonly compilerOption: ITranslateOption;
     collectImageResource: IImageFunction;
     readonly styleLineOffset: number;
-    nodeMap: RawSourceMap | string;
+    nodeMap: string;
     sourceMapConsumer: SourceMapConsumer;
     private styleMapUtil;
+    private isCss;
     readonly QUICKAPP_CONFIG = "quickapp.config.js";
     constructor(options: IOptions, compilerOption: ITranslateOption, collectImageResource: IImageFunction, styleLineOffset: number);
     parser(content: string, fileName: string): Promise<ParserResult<IStyleAst>>;

package/lib/ux/parser/StyleParser.js

@@ -32,19 +32,21 @@ const {
  * 3. 把解析结果转换为目标格式
  */
 class StyleParser {
+  // 是否是css样式代码
+  isCss = true;
   QUICKAPP_CONFIG = 'quickapp.config.js';
   constructor(options, compilerOption, collectImageResource, styleLineOffset) {
     this.options = options;
     this.compilerOption = compilerOption;
     this.collectImageResource = collectImageResource;
     this.styleLineOffset = styleLineOffset;
-    this.nodeMap = {
+    this.nodeMap = JSON.stringify({
       version: 3,
       sources: [],
       names: [],
       mappings: '',
       file: ''
-    };
+    });
   }
   async parser(content, fileName) {
     const {
@@ -147,7 +149,8 @@ class StyleParser {
         relativeUrls: true,
         sourceMap: {
           sourceMapURL: `${baseName}.map`,
-          outputSourceFiles: true
+          outputSourceFiles: true,
+          sourceMapRootpath: 'file:///'
         }
       }, (error, output) => {
         if (error) {
@@ -161,6 +164,7 @@ class StyleParser {
           CSSCode = output?.css ? output.css : '';
           if (output?.map) {
             this.nodeMap = output.map;
+            this.isCss && (this.isCss = false);
           }
           resolve(CSSCode);
         }
@@ -177,7 +181,7 @@ class StyleParser {
       onLog,
       filePath
     } = this.options;
-    const url = `file://${filePath}`;
+    const url = `file:///${filePath}`;
     const alias = this.getAlias();
 
     // sass 的 alias 处理依赖当前文件路径
@@ -196,6 +200,7 @@ class StyleParser {
       });
       if (Result.sourceMap) {
         this.nodeMap = JSON.stringify(Result.sourceMap);
+        this.isCss && (this.isCss = false);
       }
       return Result.css;
     } catch (error) {
@@ -217,23 +222,29 @@ class StyleParser {
       onLog,
       filePath
     } = this.options;
+    const newFilePath = this.isCss ? filePath : `file:///${filePath}`;
     const alias = this.getAlias();
     try {
       const result = await (0, _postcss.default)([(0, _postcssImport.default)({
-        resolve: id => {
+        resolve: (id, basedir) => {
+          // 处理所有路径中的 file:/// 前缀
+          const cleanId = id.replace(/^file:\/\/\//, '');
+          const cleanBase = basedir.replace(/^file:\/\/\//, '');
+          const filePath = _path.default.resolve(cleanBase, cleanId);
           for (const [key, value] of Object.entries(alias)) {
-            if (id.startsWith(key)) {
-              return id.replace(key, value);
+            if (filePath.startsWith(key)) {
+              return filePath.replace(key, value);
             }
           }
-          return id;
+          return filePath;
         }
       }), _postcssUrl.default]).process(sourceContent, {
-        from: filePath,
+        from: newFilePath,
         map: {
           prev: this.nodeMap,
           inline: false,
-          annotation: true
+          sourcesContent: true,
+          absolute: this.isCss
         }
       });
       this.nodeMap = result.map.toString();
@@ -307,7 +318,7 @@ class StyleParser {
       type: '',
       prelude: [],
       block: [],
-      position: sourceNode.loc ? this.styleMapUtil.transfromLocToPosition(sourceNode.loc) : undefined
+      position: sourceNode.loc ? this.styleMapUtil.transfromLocToPosition(sourceNode.loc, false) : undefined
     };
     const {
       type,
@@ -330,7 +341,7 @@ class StyleParser {
       name: '',
       prelude: [],
       rules: [],
-      position: sourceNode.loc ? this.styleMapUtil.transfromLocToPosition(sourceNode.loc) : undefined
+      position: sourceNode.loc ? this.styleMapUtil.transfromLocToPosition(sourceNode.loc, false) : undefined
     };
     const {
       type,
@@ -376,7 +387,7 @@ class StyleParser {
       type: '',
       name: '',
       block: [],
-      position: sourceNode.loc ? this.styleMapUtil.transfromLocToPosition(sourceNode.loc) : undefined
+      position: sourceNode.loc ? this.styleMapUtil.transfromLocToPosition(sourceNode.loc, false) : undefined
     };
     const {
       type,
@@ -494,7 +505,7 @@ class StyleParser {
       let value = '';
       nodeValue.children.map(v => {
         let tempTargetValue;
-        const tempPosition = v.loc ? this.styleMapUtil.transfromLocToPosition(v.loc) : undefined;
+        const tempPosition = v.loc ? this.styleMapUtil.transfromLocToPosition(v.loc, false) : undefined;
         switch (v.type) {
           case 'Operator':
             value = _cssTree.default.generate(v);
@@ -578,7 +589,7 @@ class StyleParser {
       targetList.push({
         name: nodeName,
         value: valueList,
-        position: node.loc ? this.styleMapUtil.transfromLocToPosition(node.loc) : undefined
+        position: node.loc ? this.styleMapUtil.transfromLocToPosition(node.loc, false) : undefined
       });
     }
     return targetList;
@@ -617,9 +628,7 @@ class StyleParser {
         level: sourceCodeStyle,
         filePath,
         position,
-        message: [{
-          word: error.message
-        }, ...sourceCode]
+        message: [...error.messages, ...sourceCode]
       });
     });
     return [];

package/lib/ux/parser/UxParser.d.ts

@@ -20,6 +20,7 @@ declare class UxParser implements IParser<IUxAst> {
      * 1. template：
      *    a. 最多1个
      *    b. 子元素有且仅有1个，不能是 block
+     * 2. 必须有闭合标签， 示例：  `<script>....</script>`正确，  `<script>aaaa`错误
      */
     private validateContent;
     /**

package/lib/ux/parser/UxParser.js

@@ -201,6 +201,7 @@ class UxParser {
    * 1. template：
    *    a. 最多1个
    *    b. 子元素有且仅有1个，不能是 block
+   * 2. 必须有闭合标签， 示例：  `<script>....</script>`正确，  `<script>aaaa`错误
    */
   validateContent(childNodes) {
     let result = true;
@@ -249,21 +250,22 @@ class UxParser {
     }
 
     // 2
-    // if (scriptCount !== 1) {
-    //   onLog({
-    //     level: Loglevel.THROW,
-    //     filePath,
-    //     message: [
-    //       { word: '<script>' },
-    //       `There are`,
-    //       { word: scriptCount },
-    //       `, but expect to have`,
-    //       { word: 1 }
-    //     ]
-    //   })
-    //   result = false
-    // }
-
+    childNodes.forEach(node => {
+      if (_TemplateUtil.default.isElement(node)) {
+        const {
+          sourceCodeLocation
+        } = node;
+        if (sourceCodeLocation && !sourceCodeLocation.endTag) {
+          onLog({
+            level: _sharedUtils.Loglevel.ERROR,
+            filePath,
+            position: _TemplateUtil.default.parse5LocationToPosition(sourceCodeLocation.startTag),
+            message: [`<${node.nodeName}>`, 'must have an end tag']
+          });
+          result = false;
+        }
+      }
+    });
     return result;
   }
   /**

package/lib/ux/translate/vela/ScriptToTypescript.js

@@ -51,7 +51,10 @@ class ScriptToTypescript {
    * @returns
    */
   babelScript(sourceTree) {
-    const sourceCode = sourceTree.content ? sourceTree.content : `""`;
+    if (sourceTree.content === '') {
+      return '';
+    }
+    const sourceCode = sourceTree.content;
     const relativePath = _path.default.relative(this.options.projectPath, this.options.filePath);
     const plugins = [
     // 替换所有的require节点

package/lib/ux/translate/vela/StyleToTypescript.js

@@ -94,8 +94,14 @@ class StyleToTypescript {
         const selector = node[i];
         const {
           type,
-          name
+          name: orgName
         } = selector;
+
+        // 去除名称中的转义符，例如 源码是  .w-20\% {},  希望生成 w-20%
+        // 注意：此处的反转义不能用 JSON.parse
+        // 原因：js中 % 不需要转义，但css选择器中%需要转义，两者规则不一样，所以不能使用 JSON.parse
+        // 示例：js可以写'abc%', 但css选择器中必须写'abc\%'
+        const name = orgName.replace(/\\(.{1})/g, '$1');
         // 选择器类型转为数字
         const selectorIndex = (0, _StyleSelectorType.findSelectorIndex)(type);
         if (type === _StyleSelectorType.Selector.COMBINATOR) {

package/lib/ux/translate/vela/utils/AttributeConfig.js

@@ -29,7 +29,7 @@ const ATTRIBUTE_CONFIG = {
           return $classValue$;
         }`;
       }
-      return `[${JSON.parse(result).split(' ').map(item => `"${item.trim()}"`).filter(Boolean).join(',')}]`;
+      return `[${JSON.parse(result).split(' ').map(item => item.trim()).filter(Boolean).map(item => JSON.stringify(item)).join(',')}]`;
     }
   },
   style: {

package/lib/ux/utils/StyleMapUtil.d.ts

@@ -18,11 +18,10 @@ declare class StyleMapUtil {
      *  3.4 原始位置的endColumn根据map结果，发现存在1个位置的差异，所以-1
      *  3.5 source存储来源的文件
      * @param location 生成结果中节点的位置信息
-     * @param consumer 经过解析器获取的map信息生成的consumer对象
-     * @param offset 当前样式代码在ux文件中的偏移量
+     * @param useAbsolutePath 是否生成绝对路径
      * @returns
      */
-    transfromLocToPosition(location: CssLocation): {
+    transfromLocToPosition(location: CssLocation, useAbsolutePath?: boolean): {
         pos: number;
         end: number;
         startLine: number;

package/lib/ux/utils/StyleMapUtil.js

@@ -25,11 +25,11 @@ class StyleMapUtil {
    *  3.4 原始位置的endColumn根据map结果，发现存在1个位置的差异，所以-1
    *  3.5 source存储来源的文件
    * @param location 生成结果中节点的位置信息
-   * @param consumer 经过解析器获取的map信息生成的consumer对象
-   * @param offset 当前样式代码在ux文件中的偏移量
+   * @param useAbsolutePath 是否生成绝对路径
    * @returns
    */
   transfromLocToPosition(location) {
+    let useAbsolutePath = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     const {
       projectPath
     } = this.options;
@@ -41,7 +41,7 @@ class StyleMapUtil {
       line: location.end.line,
       column: location.end.column
     });
-    let nodeRelativePath = '';
+    let nodePath = '';
     if (nodeStartPosition.source?.endsWith('.ux') && nodeStartPosition.line) {
       nodeStartPosition.line = nodeStartPosition.line - 1 + this.lineOffset;
     }
@@ -54,7 +54,8 @@ class StyleMapUtil {
       if (decodeStr.startsWith('file://')) {
         decodeStr = (0, _url.fileURLToPath)(decodeStr);
       }
-      nodeRelativePath = _path.default.relative(projectPath, decodeStr).replaceAll(_path.default.sep, _path.default.posix.sep);
+      // useAbsolutePath为false，返回相对路径
+      nodePath = (useAbsolutePath ? decodeStr : _path.default.relative(projectPath, decodeStr)).replaceAll(_path.default.sep, _path.default.posix.sep);
     }
     return {
       pos: 0,
@@ -63,7 +64,7 @@ class StyleMapUtil {
       startColumn: nodeStartPosition.column || 0,
       endLine: nodeEndPosition.line || 0,
       endColumn: nodeEndPosition.column || 0,
-      source: nodeRelativePath
+      source: nodePath
     };
   }
 }

package/lib/ux/utils/StyleUtil.d.ts

@@ -226,5 +226,6 @@ declare class StyleUtil {
      * @returns
      */
     static translateToNormalValue(value: any): any;
+    private static translateError;
 }
 export default StyleUtil;

package/lib/ux/utils/StyleUtil.js

@@ -11,8 +11,8 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _path = _interopRequireDefault(require("path"));
 var _CompressConfig = require("../config/CompressConfig");
 var _StyleSelectorType = require("../enum/StyleSelectorType");
-var _StyleAttributeConfig = require("../config/vela/StyleAttributeConfig");
 var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+var _StyleBaseConfig = require("../config/StyleBaseConfig");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * StyleUtil
@@ -291,7 +291,9 @@ class StyleUtil {
         loc
       } = fallbackNode;
       parserError = {
-        message: name,
+        messages: [{
+          word: name
+        }],
         details: message,
         startLine: loc?.start?.line || loc?.start?.startLine || 0,
         startCol: loc?.start?.column || loc?.start?.startCol || 0,
@@ -321,14 +323,29 @@ class StyleUtil {
         message,
         details,
         loc,
-        css
+        css,
+        property
       } = error;
-      if (message.includes('Unknown property') && _StyleAttributeConfig.STYLE_ATTRIBUTE_LIST.includes(_sharedUtils.StringUtil.hyphenedToCamel(error.property)) || message.includes('Invalid value for `@media` prelude')) {
+      let messages = [];
+      if (message.includes('Unknown property') && _StyleBaseConfig.STYLE_ATTRIBUTE_LIST.includes(_sharedUtils.StringUtil.hyphenedToCamel(error.property)) || message.includes('Invalid value for `@media` prelude')) {
         continue;
       }
+      // 优化值报错的信息，csstree-validator值报错时为Invalida value for
+      if (message.includes('Invalid value for')) {
+        // 请检查属性的值是否符合要求
+        messages = [`The value of attribute`, {
+          word: `${property}: ${css}`
+        }, 'is invalid.'];
+        css = '';
+      } else {
+        // 高亮原始报错信息
+        messages = [{
+          word: message
+        }];
+      }
       if (loc) {
         syntaxErrors.push({
-          message,
+          messages,
           details,
           startLine: loc?.start?.line || 0,
           startCol: loc?.start?.column || 1,
@@ -341,7 +358,7 @@ class StyleUtil {
       } else {
         const propertyLength = error?.property?.length || 0;
         syntaxErrors.push({
-          message,
+          messages,
           details,
           startLine: error.line || 0,
           startCol: error.column || 0,
@@ -351,7 +368,6 @@ class StyleUtil {
           endOffset: (error.offset || 0) + propertyLength,
           source: css
         });
-        continue;
       }
     }
     return syntaxErrors;
@@ -568,10 +584,6 @@ class StyleUtil {
    * @returns
    */
   static translateKeyFramesRule(rule, options) {
-    const {
-      onLog,
-      filePath
-    } = options;
     const {
       prelude,
       block,
@@ -594,12 +606,8 @@ class StyleUtil {
           result.time = 100;
           break;
         default:
-          onLog({
-            level: _sharedUtils.Loglevel.THROW,
-            message: `${firstName} is not a valid time value`,
-            filePath,
-            position
-          });
+          const errorMessage = [`${firstName} is not a valid time value`];
+          StyleUtil.translateError(_sharedUtils.Loglevel.THROW, errorMessage, options, position);
           break;
       }
     }
@@ -633,20 +641,14 @@ class StyleUtil {
         value: valueNode
       } = sourceNode;
       // 属性校验
-      const config = _StyleAttributeConfig.STYLE_ATTRIBUTE_CONFIG[name];
+      const config = _StyleBaseConfig.STYLE_ATTRIBUTE_CONFIG[name];
       if (config?.validate) {
-        const validateResult = config.validate(sourceNode);
-        if (validateResult.message.length > 0) {
-          const {
-            onLog,
-            filePath
-          } = options;
-          onLog({
-            filePath: filePath,
-            level: validateResult.level,
-            position: sourceNode.position,
-            message: [`Attribute verification failed,`, ...validateResult.message]
-          });
+        const {
+          message: validMessages,
+          level: validInfoLevel
+        } = config.validate(sourceNode);
+        if (validMessages.length > 0) {
+          StyleUtil.translateError(validInfoLevel, validMessages, options, sourceNode.position);
         }
       }
       if (config?.translate) {
@@ -770,5 +772,26 @@ class StyleUtil {
     }
     return value;
   }
+  static translateError(errorLevel, messages, options, position) {
+    const {
+      onLog,
+      filePath,
+      projectPath
+    } = options;
+    // position.source存储的是相对路径，报错时要用绝对路径
+    let updatedPosition;
+    if (position) {
+      updatedPosition = {
+        ...position,
+        source: position.source && _path.default.resolve(projectPath, position.source)
+      };
+    }
+    onLog({
+      level: errorLevel,
+      message: messages,
+      filePath,
+      position: updatedPosition
+    });
+  }
 }
 var _default = exports.default = StyleUtil;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiot-toolkit/parser",
-  "version": "2.0.6-beta.2",
+  "version": "2.0.6-beta.4",
   "description": "Parse the source code of aiot and convert it to the AST (Abstract Syntax Tree) of the target code.",
   "keywords": [
     "aiot",
@@ -20,7 +20,7 @@
     "test": "node ./__tests__/parser.test.js"
   },
   "dependencies": {
-    "@aiot-toolkit/shared-utils": "2.0.6-beta.2",
+    "@aiot-toolkit/shared-utils": "2.0.6-beta.4",
     "@babel/core": "^7.23.6",
     "@babel/generator": "^7.24.10",
     "@babel/parser": "^7.24.8",
@@ -31,7 +31,7 @@
     "css-tree": "npm:aiot-css-tree@^2.3.1",
     "csstree-validator": "^3.0.0",
     "eslint": "^8.46.0",
-    "file-lane": "2.0.6-beta.2",
+    "file-lane": "2.0.6-beta.4",
     "fs-extra": "^11.2.0",
     "google-protobuf": "^3.21.2",
     "less": "^4.2.0",
@@ -60,5 +60,5 @@
     "@types/tinycolor2": "^1.4.6",
     "babel-plugin-tester": "^11.0.4"
   },
-  "gitHead": "d0057f9e62ac191d21445787667217cfa4aff1e9"
+  "gitHead": "1acc8279ba3c5995aebe3a97a6b33154086f09d6"
 }