修复无法打包的问题、增加轻卡事件参数支持、增加属性支持

packages/hap-compiler/src/style/validator.js

@@ -2648,8 +2648,28 @@ const validatorMap = {
   backgroundPosition: validator.backgroundPosition,
   display: validator.display,
   visibility: makeEnumValidator(['visible', 'hidden']),
-  objectFit: makeEnumValidator(['fill', 'contain', 'cover', 'none', 'scale-down', 'fit-start', 'fit-end', 'cover-start', 'cover-end']),
-  altObjectFit: makeEnumValidator(['fill', 'contain', 'cover', 'none', 'scale-down', 'fit-start', 'fit-end', 'cover-start', 'cover-end']),
+  objectFit: makeEnumValidator([
+    'fill',
+    'contain',
+    'cover',
+    'none',
+    'scale-down',
+    'fit-start',
+    'fit-end',
+    'cover-start',
+    'cover-end'
+  ]),
+  altObjectFit: makeEnumValidator([
+    'fill',
+    'contain',
+    'cover',
+    'none',
+    'scale-down',
+    'fit-start',
+    'fit-end',
+    'cover-start',
+    'cover-end'
+  ]),
   // text
   lines: validator.integer,
   color: validator.color,
@@ -2712,7 +2732,29 @@ const validatorMap = {
   themeTrackColor: makeEnumValidator(themeColors),
   themeSelectedColor: makeEnumValidator(themeColors),
   themeBlockColor: makeEnumValidator(themeColors), */
-  letterSpacing: validator.letterSpacing
+  letterSpacing: validator.letterSpacing,
+  // legacy card styles
+  textWeight: validator.fontWeight,
+  textSize: validator.length,
+  fillet: validator.length,
+  lineColor: validator.color,
+  lineWidth: validator.length,
+  faceColor: validator.color,
+  titleColor: validator.color,
+  titleSize: validator.length,
+  titleStyle: validator.fontWeight,
+  itemColor: validator.color,
+  itemSize: validator.length,
+  selectItemColor: validator.color,
+  unitStyle: validator.fontWeight,
+  unitColor: validator.color,
+  size: validator.length,
+  bgBeginColor: validator.color,
+  bgEndColor: validator.color,
+  ringBeginColor: validator.color,
+  ringEndColor: validator.color,
+  thumbBeginColor: validator.color,
+  thumbEndColor: validator.color
 }
 
 /**

packages/hap-compiler/src/template/validator.js

@@ -94,6 +94,9 @@ const tagCommon = {
     },
     overflow: {
       enum: ['visible', 'hidden']
+    },
+    followcorner: {
+      enum: ['true', 'false']
     }
   },
   children: ['block', 'slot', 'component'], // 通用控制组件
@@ -181,6 +184,7 @@ const tagNatives = {
     attrs: {
       src: {},
       alt: {},
+      symbolcode: {},
       enablenightmode: {
         enum: ['true', 'false']
       },
@@ -217,7 +221,15 @@ const tagNatives = {
   },
   web: {
     atomic: true,
-    events: ['pagestart', 'pagefinish', 'titlereceive', 'error', 'message', 'progress', 'intercepturl'],
+    events: [
+      'pagestart',
+      'pagefinish',
+      'titlereceive',
+      'error',
+      'message',
+      'progress',
+      'intercepturl'
+    ],
     attrs: {
       src: {},
       trustedurl: {},
@@ -233,7 +245,7 @@ const tagNatives = {
       supportzoom: {
         enum: ['true', 'false']
       },
-      intercepturl:{}
+      intercepturl: {}
     }
   },
   list: {
@@ -354,6 +366,20 @@ const tagNatives = {
     textContent: true,
     atomic: true
   },
+  vbutton: {
+    supportCard: true,
+    textContent: true,
+    atomic: true,
+    attrs: {
+      enablecolor: {},
+      enableanim: {},
+      animtype: {},
+      loading: {},
+      drawtype: {},
+      text: {},
+      disable: {}
+    }
+  },
   refresh: {
     attrs: {
       offset: {
@@ -577,6 +603,68 @@ const tagNatives = {
     },
     events: ['change', 'columnchange', 'cancel']
   },
+  vcustompicker: {
+    supportCard: true,
+    selfClosing: true,
+    atomic: true,
+    empty: true,
+    attrs: {
+      mode: {},
+      defaultvalue: {},
+      itemcycle: {},
+      visibleitemcount: {}
+    },
+    events: ['change']
+  },
+  vtimepicker: {
+    supportCard: true,
+    selfClosing: true,
+    atomic: true,
+    empty: true,
+    attrs: {
+      defaultvalue: {},
+      itemcycle: {},
+      visibleitemcount: {}
+    },
+    events: ['change']
+  },
+  vdatepicker: {
+    supportCard: true,
+    selfClosing: true,
+    atomic: true,
+    empty: true,
+    attrs: {
+      defaultvalue: {},
+      itemcycle: {},
+      yearrange: {},
+      visibleitemcount: {}
+    },
+    events: ['change']
+  },
+  vdatepicker2: {
+    supportCard: true,
+    selfClosing: true,
+    atomic: true,
+    empty: true,
+    attrs: {
+      defaultvalue: {},
+      itemcycle: {},
+      yearrange: {},
+      visibleitemcount: {}
+    },
+    events: ['change']
+  },
+  vcalendardatepicker: {
+    supportCard: true,
+    selfClosing: true,
+    atomic: true,
+    empty: true,
+    attrs: {
+      defaultvalue: {},
+      yearrange: {}
+    },
+    events: ['change']
+  },
   switch: {
     supportCard: true,
     selfClosing: true,
@@ -588,6 +676,50 @@ const tagNatives = {
     },
     events: ['change']
   },
+  vswitch: {
+    supportCard: true,
+    selfClosing: true,
+    atomic: true,
+    empty: true,
+    attrs: {
+      checked: {},
+      blurmaterial: {},
+      disable: {},
+      loading: {}
+    },
+    events: ['change']
+  },
+  vcheckbox: {
+    supportCard: true,
+    selfClosing: true,
+    atomic: true,
+    empty: true,
+    attrs: {
+      text: {},
+      checked: {},
+      groupid: {},
+      type: {},
+      tickcolor: {},
+      framecolor: {},
+      fillcolor: {},
+      checkstatus: {}
+    },
+    events: ['change']
+  },
+  vradiobutton: {
+    supportCard: true,
+    selfClosing: true,
+    atomic: true,
+    empty: true,
+    attrs: {
+      text: {},
+      checked: {},
+      groupid: {},
+      radiocolor: {},
+      framecolor: {}
+    },
+    events: ['change']
+  },
   textarea: {
     supportCard: true,
     atomic: true,
@@ -1328,7 +1460,7 @@ function checkTagName(node, output, options = {}) {
           log.push({
             line: location.line || 1,
             column: location.col || 1,
-            reason: 'WARN: 组件 `' + tagName + '` 不支持属性 `' + item
+            reason: 'WARN: 组件 `' + tagName + '` 不支持属性 `' + item + '`'
           })
         }
       }
@@ -1869,12 +2001,12 @@ function checkEvent(name, value, output, options) {
     // 如果表达式形式为XXX(xxxx)
     const paramsMatch = value.match(/(.*)\((.*)\)/)
     if (paramsMatch) {
-      if (options.lite) {
-        const err = new Error('轻卡不支持带参数的事件')
-        err.isExpressionError = true
-        err.expression = value
-        throw err
-      }
+      // if (options.lite) {
+      //   const err = new Error('轻卡不支持带参数的事件')
+      //   err.isExpressionError = true
+      //   err.expression = value
+      //   throw err
+      // }
       const funcName = paramsMatch[1]
       let params = paramsMatch[2]
       // 解析','分隔的参数
@@ -1888,22 +2020,25 @@ function checkEvent(name, value, output, options) {
         // 否则默认有一个参数'$evt'
         params = ['evt']
       }
-      value = '{{' + funcName + '(' + params.join(',') + ')}}'
-      try {
-        // 将事件转换为函数对象
-        if (options.newJSCard) {
-          value = 'function (evt) { return ' + exp(value, false).replace('this.evt', 'evt') + '}'
-        } else {
-          /* eslint-disable no-eval */
-          value = eval(
-            '(function (evt) { return ' + exp(value, false).replace('this.evt', 'evt') + '})'
-          )
-          /* eslint-enable no-eval */
+      value = funcName + '(' + params.join(',') + ')'
+      if (!options.lite) {
+        value = '{{' + value + '}}'
+        try {
+          // 将事件转换为函数对象
+          if (options.newJSCard) {
+            value = 'function (evt) { return ' + exp(value, false).replace('this.evt', 'evt') + '}'
+          } else {
+            /* eslint-disable no-eval */
+            value = eval(
+              '(function (evt) { return ' + exp(value, false).replace('this.evt', 'evt') + '})'
+            )
+            /* eslint-enable no-eval */
+          }
+        } catch (err) {
+          err.isExpressionError = true
+          err.expression = originValue
+          throw err
         }
-      } catch (err) {
-        err.isExpressionError = true
-        err.expression = originValue
-        throw err
       }
     }
     output.result.events = output.result.events || {}
@@ -2161,4 +2296,4 @@ export default {
   isNotTextContentAtomic,
   isExpr: exp.isExpr,
   parseText: exp.parseText
-}
+}

packages/hap-packager/src/plugins/card-script-handle-plugin.js

@@ -199,27 +199,35 @@ const prodUtils = {
     if (templateFileName === `${compPath}.template.json`) {
       templatePath = CARD_ENTRY
     }
-    const uniquePlaceHolder = `_START_PLACE_HOLDER_TEMPLATE_${templateFileName}_${templatePath}_END_`
+    // 用_做分隔符容易与开发者卡片路径冲突造成匹配失效，使用[]序列化，碰撞概率更低
+    const payload = JSON.stringify([templateFileName, templatePath])
+    const uniquePlaceHolder = `_START_PLACE_HOLDER_TEMPLATE_${payload}_END_`
     path.replaceWith(t.stringLiteral(uniquePlaceHolder))
   },
   replaceStyleStr(path, styleStr, cssFileName, pathSrc) {
     const compPath = this.getCompPath(styleStr, pathSrc)
     const styleObjId = getStyleObjectId(compPath)
-    const uniquePlaceHolder = `_START_PLACE_HOLDER_CSS_${cssFileName}_${styleObjId}_END_`
+    const payload = JSON.stringify([cssFileName, styleObjId])
+    const uniquePlaceHolder = `_START_PLACE_HOLDER_CSS_${payload}_END_`
     path.replaceWith(t.stringLiteral(uniquePlaceHolder))
   },
   replacePlaceHolder(code) {
-    // 正则表达式匹配_idX_valY_place_holder_格式的字符串
-    const regexTemplate = /["'`]_START_PLACE_HOLDER_TEMPLATE_([^\s]+?)_([^\s]+?)_END_["'`]/g
+    // 正则表达式匹配 JSON 序列化的占位符
+    const regexTemplate = /["'`]_START_PLACE_HOLDER_TEMPLATE_(.+?)_END_["'`]/g
 
     // 替换 template 的 placeholder
-    code = code.replace(regexTemplate, function (match, templateFileName, templatePath) {
+    code = code.replace(regexTemplate, function (match, payload) {
+      // generate 会对字符串中的 " 转义为 \"，需先还原
+      const unescaped = payload.replace(/\\"/g, '"')
+      const [templateFileName, templatePath] = JSON.parse(unescaped)
       return `$json_require$("${templateFileName}",{"componentPath":"${templatePath}"})`
     })
-    const regexCss = /["'`]_START_PLACE_HOLDER_CSS_([^\s]+?)_([^\s]+?)_END_["'`]/g
+    const regexCss = /["'`]_START_PLACE_HOLDER_CSS_(.+?)_END_["'`]/g
 
     // 替换 css 的 placeholder
-    code = code.replace(regexCss, function (match, cssFileName, styleObjId) {
+    code = code.replace(regexCss, function (match, payload) {
+      const unescaped = payload.replace(/\\"/g, '"')
+      const [cssFileName, styleObjId] = JSON.parse(unescaped)
       return JSON.stringify({
         '@info': { styleObjectId: styleObjId },
         extracted: true,