feat: add support for model and dir for new jscard package

Signed-off-by: lileirjyb <[email protected]>

Author: lilei946

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

@@ -128,15 +128,9 @@ function traverse(node, output, previousNode, conditionList, options) {
           if (name.match(/^model:/)) {
             // 解析model指令，model指令格式：model:name="{{youName}}"
             validator.checkModel(name, value, output, node, locationInfo, options)
-            if (output.isCard) {
-              throw new Error('卡片不支持 model 指令')
-            }
           } else if (name.match(/^dir:/)) {
             // 解析自定义指令，自定义指令格式：dir:指令名称="{{data}}"
             validator.checkCustomDirective(name, value, output, node)
-            if (output.isCard) {
-              throw new Error('卡片不支持自定义指令')
-            }
           } else {
             // 其余为普通属性
             validator.checkAttr(name, value, output, node.tagName, locationInfo, options)

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

@@ -102,9 +102,16 @@ function genCheckboxModel(node, attrName, value, output) {
       ${expValue} = checked ? ${trueValueBinding} : ${falseValueBinding}
     }`
 
-  addAttr(output.result, attrName, eval(`(function() {${attrCheckedCode}})`))
-  addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
-
+  const isCard = output.isCard
+  const isLite = output.isLite
+  if (isCard && !isLite) {
+    addAttr(output.result, attrName, `(function() {${attrCheckedCode}})`)
+    addAttr(output.result, attrName + 'Raw', value)
+    addHandler(output.result, 'change', `function(evt) {${eventChangeCode}}`)
+  } else {
+    addAttr(output.result, attrName, eval(`(function() {${attrCheckedCode}})`))
+    addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
+  }
   return {
     attr: { checked: attrCheckedCode },
     events: { change: eventChangeCode }
@@ -125,8 +132,16 @@ function genRadioModel(node, attrName, value, output) {
   const attrCheckedCode = `return ${exp(value, false)} === ${valueBinding}`
   const eventChangeCode = `${exp(value, false)} = ${valueBinding}`
 
-  addAttr(output.result, attrName, eval(`(function() {${attrCheckedCode}})`))
-  addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
+  const isCard = output.isCard
+  const isLite = output.isLite
+  if (isCard && !isLite) {
+    addAttr(output.result, attrName, `(function() {${attrCheckedCode}})`)
+    addAttr(output.result, attrName + 'Raw', value)
+    addHandler(output.result, 'change', `function(evt) {${eventChangeCode}}`)
+  } else {
+    addAttr(output.result, attrName, eval(`(function() {${attrCheckedCode}})`))
+    addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
+  }
 
   return {
     attr: { checked: attrCheckedCode },
@@ -140,11 +155,17 @@ function genRadioModel(node, attrName, value, output) {
  * @param {object} output 构建的输出结果
  */
 function genSelectModel(value, output) {
-  addHandler(
-    output.result,
-    'change',
-    eval(`(function(evt) { ${exp(value, false)} = evt.newValue})`)
-  )
+  const isCard = output.isCard
+  const isLite = output.isLite
+  if (isCard && !isLite) {
+    addHandler(output.result, 'change', `function(evt) { ${exp(value, false)} = evt.newValue}`)
+  } else {
+    addHandler(
+      output.result,
+      'change',
+      eval(`(function(evt) { ${exp(value, false)} = evt.newValue})`)
+    )
+  }
 }
 
 /**
@@ -156,10 +177,16 @@ function genSelectModel(value, output) {
  */
 function genDefaultModel(attrName, value, output) {
   const eventChangeCode = `${exp(value, false)} = evt.target.value`
-
-  addAttr(output.result, attrName, exp(value))
-  addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
-
+  const isCard = output.isCard
+  const isLite = output.isLite
+  if (isCard && !isLite) {
+    addAttr(output.result, attrName, exp(value, true, isLite, isCard))
+    addAttr(output.result, attrName + 'Raw', value)
+    addHandler(output.result, 'change', `function(evt) {${eventChangeCode}}`)
+  } else {
+    addAttr(output.result, attrName, exp(value))
+    addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
+  }
   return { events: { change: eventChangeCode } }
 }
 
@@ -176,12 +203,22 @@ function genComponentModel(node, attrName, value, output, locationInfo, options)
   // 自定义组件model指令绑定的属性，依然作为普通属性处理
   validator.checkAttr(attrName, value, output, node.tagName, locationInfo, options)
 
-  // 为自定义组件绑定update:${attrName}事件，接收组件内部emit的update:${attrName}事件
-  addHandler(
-    output.result,
-    `update:${attrName}`,
-    eval(`(function(evt) { ${exp(value, false)} = evt.detail})`)
-  )
+  const isCard = output.isCard
+  const isLite = output.isLite
+  if (isCard && !isLite) {
+    addHandler(
+      output.result,
+      `update:${attrName}`,
+      `function(evt) { ${exp(value, false)} = evt.detail}`
+    )
+  } else {
+    // 为自定义组件绑定update:${attrName}事件，接收组件内部emit的update:${attrName}事件
+    addHandler(
+      output.result,
+      `update:${attrName}`,
+      eval(`(function(evt) { ${exp(value, false)} = evt.detail})`)
+    )
+  }
 }
 
 /**
@@ -196,40 +233,76 @@ function genDynamicModel(node, attrName, value, output, expType) {
   const checkboxCode = genCheckboxModel(node, attrName, value, output)
   const radioCode = genRadioModel(node, attrName, value, output)
   const textCode = genDefaultModel(attrName, value, output)
+  const isCard = output.isCard
+  const isLite = output.isLite
+  if (isCard && !isLite) {
+    addAttr(output.result, attrName, exp(value, true, isLite, isCard))
+    addAttr(output.result, attrName + 'Raw', value)
 
-  addAttr(output.result, attrName, exp(value))
+    addAttr(
+      output.result,
+      'checked',
+      `(function() { 
+        if (${expType} === 'checkbox') {
+          ${checkboxCode.attr.checked}
+        } else if (${expType} === 'radio') {
+          ${radioCode.attr.checked}
+        } else {
+          return false
+        }
+      })
+    `
+    )
 
-  addAttr(
-    output.result,
-    'checked',
-    eval(`
-    (function() { 
-      if (${expType} === 'checkbox') {
-        ${checkboxCode.attr.checked}
-      } else if (${expType} === 'radio') {
-        ${radioCode.attr.checked}
-      } else {
-        return false
-      }
-    })
-  `)
-  )
+    addAttr(output.result, 'checkedRaw', value)
+    addHandler(
+      output.result,
+      'change',
+      `function(evt) {
+        if (${expType} === 'checkbox') {
+          ${checkboxCode.events.change}
+        } else if (${expType} === 'radio') {
+          ${radioCode.events.change}
+        } else {
+          ${textCode.events.change}
+        }
+      }`
+    )
+  } else {
+    addAttr(output.result, attrName, exp(value))
 
-  addHandler(
-    output.result,
-    'change',
-    eval(`
-    (function(evt) {
-      if (${expType} === 'checkbox') {
-        ${checkboxCode.events.change}
-      } else if (${expType} === 'radio') {
-        ${radioCode.events.change}
-      } else {
-        ${textCode.events.change}
-      }
-    })
-  `)
-  )
+    addAttr(
+      output.result,
+      'checked',
+      eval(`
+      (function() { 
+        if (${expType} === 'checkbox') {
+          ${checkboxCode.attr.checked}
+        } else if (${expType} === 'radio') {
+          ${radioCode.attr.checked}
+        } else {
+          return false
+        }
+      })
+    `)
+    )
+
+    addHandler(
+      output.result,
+      'change',
+      eval(`
+      (function(evt) {
+        if (${expType} === 'checkbox') {
+          ${checkboxCode.events.change}
+        } else if (${expType} === 'radio') {
+          ${radioCode.events.change}
+        } else {
+          ${textCode.events.change}
+        }
+      })
+    `)
+    )
+  }
 }
 
 /**

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

@@ -1423,7 +1423,6 @@ function checkId(id, output) {
     const isLite = output.isLite
     const isCard = output.isCard
     output.result.id = exp.isExpr(id) ? exp(id, true, isLite, isCard) : id
-    output.result.idExpr = true
     if (isCard && !isLite) {
       output.result.idRaw = id
     }
@@ -1824,9 +1823,9 @@ function checkEvent(name, value, output) {
       value = '{{' + funcName + '(' + params.join(',') + ')}}'
       try {
         // 将事件转换为函数对象
-        if (output.isCard) {
+        if (output.isCard && !output.isLite) {
           value = 'function (evt) { return ' + exp(value, false).replace('this.evt', 'evt') + '}'
-        } else if (!output.isLite) {
+        } else {
           /* eslint-disable no-eval */
           value = eval(
             '(function (evt) { return ' + exp(value, false).replace('this.evt', 'evt') + '})'
@@ -1858,12 +1857,24 @@ function checkCustomDirective(name, value, output, node) {
     colorconsole.warn(`\`${node.tagName}\` 组件自定义指令名称不能为空`)
     return false
   }
-
+  const isCard = output.isCard
+  const isLite = output.isLite
   output.result.directives = output.result.directives || []
-  output.result.directives.push({
-    name: dirName,
-    value: exp.isExpr(value) ? exp(value, true, output.isLite, output.isCard) : value
-  })
+  if (isCard && !isLite) {
+    // 补全绑定值的双花括号，如：dir:指令名称="data"补全为dir:指令名称="{{data}}"
+    value = exp.addExprffix(value)
+
+    output.result.directives.push({
+      name: dirName,
+      value: exp.isExpr(value) ? exp(value, true, output.isLite, output.isCard) : value,
+      valueRaw: value
+    })
+  } else {
+    output.result.directives.push({
+      name: dirName,
+      value: exp.isExpr(value) ? exp(value, true, output.isLite, output.isCard) : value
+    })
+  }
 }
 
 /**

packages/hap-dsl-xvm/test/unit/ux/__snapshots__/component.test.js.snap

@@ -4951,24 +4951,24 @@ exports[`Component 编译测试 ux components: ../../../lib/loaders/template-loa
                 \\"type\\": function () {return this.dynamicType},
                 \\"value\\": \\"test dynamic type\\",
                 \\"checked\\": function() { 
-      if (this.dynamicType === 'checkbox') {
-        
+        if (this.dynamicType === 'checkbox') {
+          
     if (Array.isArray(this.dynamicValue)) {
       return this.dynamicValue.indexOf(\\"test dynamic type\\") > -1
     } else {
       return this.dynamicValue
     }
-      } else if (this.dynamicType === 'radio') {
-        return this.dynamicValue === \\"test dynamic type\\"
-      } else {
-        return false
+        } else if (this.dynamicType === 'radio') {
+          return this.dynamicValue === \\"test dynamic type\\"
+        } else {
+          return false
+        }
       }
-    }
               },
               \\"events\\": {
                 \\"change\\": function(evt) {
-      if (this.dynamicType === 'checkbox') {
-        
+        if (this.dynamicType === 'checkbox') {
+          
     const checked = evt.target.checked;
     if (Array.isArray(this.dynamicValue)) {
       const index = this.dynamicValue.indexOf(\\"test dynamic type\\")
@@ -4980,12 +4980,12 @@ exports[`Component 编译测试 ux components: ../../../lib/loaders/template-loa
     } else {
       this.dynamicValue = checked ? true : false
     }
-      } else if (this.dynamicType === 'radio') {
-        this.dynamicValue = \\"test dynamic type\\"
-      } else {
-        this.dynamicValue = evt.target.value
+        } else if (this.dynamicType === 'radio') {
+          this.dynamicValue = \\"test dynamic type\\"
+        } else {
+          this.dynamicValue = evt.target.value
+        }
       }
-    }
               }
             },
             {

packages/hap-packager/src/post-handler/js-card-post.js

@@ -205,6 +205,13 @@ function markClass(template) {
 
 function markEvents(template) {
   if (template.events) {
+    Object.keys(template.events).forEach((eventName) => {
+      const eventStr = template.events[eventName]
+      if (isFunctionStr(eventStr)) {
+        template.events['$' + eventName] = eventStr
+        delete template.events[eventName]
+      }
+    })
     template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
   }
 }
@@ -216,12 +223,14 @@ function markAttr(template) {
   if (isObject(attr)) {
     Object.keys(attr).forEach((attrKey) => {
       const attrValueRaw = attr[attrKey + 'Raw']
-      if (isExpr(attrValueRaw)) {
-        attr['$' + attrKey] = getExprRes(attrValueRaw, attr[attrKey])
-        delete attr[attrKey]
-        template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
+      if (attrValueRaw !== undefined) {
+        if (isExpr(attrValueRaw)) {
+          attr['$' + attrKey] = getExprRes(attrValueRaw, attr[attrKey])
+          delete attr[attrKey]
+          template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
+        }
+        delete attr[attrKey + 'Raw']
       }
-      delete attr[attrKey + 'Raw']
     })
   }
 }
@@ -231,6 +240,11 @@ function isExpr(val) {
   return validator.isExpr(val)
 }
 
+function isFunctionStr(str) {
+  const pattern = /^\s*function\s*\([\w\s,$]*\)\s*\{[\s\S]*\}\s*$/
+  return pattern.test(str.trim())
+}
+
 function isObject(obj) {
   return obj && Object.prototype.toString.call(obj) === '[object Object]' && obj !== null
 }