@dolphinweex/weex-harmony 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dolphinweex/weex-harmony",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "weex harmony adapter",
   "main": "index.js",
   "files": [

package/src/components/midea-progresscycle-view.vue

@@ -42,6 +42,7 @@ export default {
         width: this.width,
         height: this.height,
         data: this.data,
+        handleProgresscycleTap: this.handleProgresscycleTap,
       };
     },
   },
@@ -51,6 +52,9 @@ export default {
   },
 
   methods: {
+    handleProgresscycleTap (res){
+      this.$emit("progresscycleTap", res);
+    },
   },
 };
 </script>

package/src/transform-loader.js

@@ -3,7 +3,7 @@ const parser = require('@babel/parser')
 const traverse = require('@babel/traverse').default
 const generator = require('@babel/generator').default
 const t = require('@babel/types')
-const { parse } = require('@dolphinweex/himalaya')
+const { parse, stringify } = require('@dolphinweex/himalaya')
 const path = require('path')
 
 let currentModulePath = ''
@@ -21,6 +21,7 @@ const baseUrl = '../src/components/'
 const componentMap = require("./index")
 
 const componentSet = new Set()
+const vBindMap = new Map()
 
 /**
  * 判断是否为windows环境
@@ -66,16 +67,60 @@ function hasTargetElement(tagName) {
  * 遍历html节点，将需要引入的组件添加到componentSet中
  * @param {*} node html节点
  */
-function traverseNode(node) {
+function traverseNode(node, parent = null) {
   if (node.type === 'element') {
-    const {hasElement, componentName} = hasTargetElement(node.tagName)
+    const { hasElement, componentName } = hasTargetElement(node.tagName);
     if (hasElement) {
-      componentSet.add(componentName)
+      componentSet.add(componentName);
     }
+
+    // 判断父节点是否有 v-for，若父节点是 <template> 且有 v-for，则跳过
+    const isInsideVFor = parent && parent.attributes && parent.attributes.some(attr => attr.key === 'v-for');
+    
+    if (!isInsideVFor) {  // 如果不在 v-for 中，才处理 v-bind
+      if (node.attributes) {
+        node.attributes.forEach((attr, index) => {
+          if (attr.key === 'v-bind') {
+            // 如果是对象绑定，处理 style 属性
+            if (attr.value.trim().startsWith('{') && attr.value.trim().endsWith('}')) {
+              const parsedAst = parser.parseExpression(attr.value);
+              const styleProperty = parsedAst.properties.find(prop => prop.key && prop.key.name === 'style');
+              if (styleProperty) {
+                const styleValue = styleProperty.value;
+
+                // style 的值套上 _px2rem 方法
+                styleProperty.value = {
+                  type: 'CallExpression',
+                  callee: {
+                    type: 'Identifier',
+                    name: '_px2rem'
+                  },
+                  arguments: [styleValue] // 将原始的 style 对象作为参数传递给 _px2rem
+                };
+              }
+              node.attributes[index] = {
+                key: 'v-bind',
+                value: generator(parsedAst).code
+              };
+            } else {
+              const customComputedName = `customVBindComputed${index}`; // 自定义的名字
+              vBindMap.set(customComputedName, {
+                computedName: attr.value,
+                customComputedName
+              });
+              // 更新属性值为自定义名字
+              node.attributes[index].value = customComputedName;
+            }
+          }
+        });
+      }
+    }
+
+    // 继续递归处理子节点
     if (node.children) {
       node.children.forEach((child) => {
-        traverseNode(child)
-      })
+        traverseNode(child, node);  // 将当前节点作为 parent 传递给子节点
+      });
     }
   }
 }
@@ -128,6 +173,56 @@ function getComponentLoc(name) {
     return getAbsPath(address)
   }
 }
+function createComputedProperty(vBindValue, computedName) {
+  return t.objectProperty(
+    t.identifier('computed'),  // 为对象添加 computed 属性
+    t.objectExpression([  // 计算属性
+      t.objectProperty(
+        t.identifier(computedName),  // 计算属性的名称
+        t.functionExpression(  // 计算属性的值是一个函数
+          null, //不需要传参
+          [],
+          t.blockStatement([  // 函数体是一个块语句，包含多个语句
+            t.ifStatement(// if (this.scrollerWrapProps && this.scrollerWrapProps.style)
+              t.logicalExpression(  
+                '&&',  // 使用逻辑“与”操作符
+                t.memberExpression(t.thisExpression(), t.identifier(vBindValue)), // this.scrollerWrapProps
+                t.memberExpression(
+                  t.memberExpression(t.thisExpression(), t.identifier(vBindValue)),
+                  t.identifier('style')  // this.scrollerWrapProps.style
+                )
+              ),
+              t.blockStatement([  // 如果条件符合妖气
+                t.expressionStatement( 
+                  t.assignmentExpression(
+                    '=',  // 赋值操作
+                    t.memberExpression(
+                      t.memberExpression(t.thisExpression(), t.identifier(vBindValue)),
+                      t.identifier('style')  // this.scrollerWrapProps.style
+                    ),
+                    t.callExpression(
+                      t.identifier('this._px2rem'),  // weex._px2remFn 函数
+                      [//函数传参
+                        t.memberExpression(
+                          t.memberExpression(t.thisExpression(), t.identifier(vBindValue)),
+                          t.identifier('style') 
+                        )
+                      ]
+                    )
+                  )
+                )
+              ]),
+            ),
+            t.returnStatement( //return 值
+              t.memberExpression(t.thisExpression(), t.identifier(vBindValue))  // this.scrollerWrapProps
+            )
+          ])
+        )
+      )
+    ])
+  );
+}
+
 
 /**
  * 根据引入的路径获取组件导入的路径
@@ -198,24 +293,70 @@ function addComponentsProperty(data) {
     })
   }
 }
+function addComputedPropertyToScript(scriptAst, vBindMap) {
+  vBindMap.forEach((obj,customComputedName) => {
+    const computedProperty = createComputedProperty(obj.computedName, customComputedName);
+    traverse(scriptAst, {
+      ObjectExpression(path) { //对象key value
+        const computedNode = path.node.properties.find(
+          (property) => property.key && property.key.name === 'computed'
+        );
+        if (computedNode) {  // 如果找到了computed，检查是否已经存在该计算属性
+          const existingProperty = computedNode.value.properties.find(
+            (property) => property.key && property.key.name === customComputedName
+          );
+          
+          if (!existingProperty) {  // 如果没有相同名称的计算属性，插入新计算属性
+            computedNode.value.properties.push(computedProperty.value.properties[0]);
+          }
+        }
+      },
+      // 判断computed是否存在
+      ExportDefaultDeclaration(path) {
+        if (t.isObjectExpression(path.node.declaration)) {
+          const properties = path.node.declaration.properties;
+          let computedPropertyNode = properties.find((item) => item.key.name === 'computed');
+          if (!computedPropertyNode) {//创建
+            computedPropertyNode = t.objectProperty(t.identifier('computed'), t.objectExpression([]));
+            properties.push(computedPropertyNode);
+          }
+          // 继续检查是否已存在相同名称的计算属性
+          const existingProperty = computedPropertyNode.value.properties.find(
+            (property) => property.key && property.key.name === customComputedName
+          );
+          
+          if (!existingProperty) {
+            computedPropertyNode.value.properties.push(computedProperty.value.properties[0]);
+          }
+        }
+      }
+    });
+  });
+}
 
 module.exports = function (source) {
   if (process.env.ISHARMONY === 'true') {
     currentModulePath = this.resourcePath
     const moduleResoveRet = compiler.parseComponent(source)
-    const { template, script, styles } = moduleResoveRet
+    let {
+      template,
+      script,
+      styles
+    } = moduleResoveRet
     const tempAst = parse(template.content)
     tempAst.forEach((node) => {
       traverseNode(node)
     })
-  
-    // 单模块中引入了自定义组件
+
+    moduleResoveRet.template.content = stringify(tempAst); 
+
+    const scriptAst = parser.parse(script.content, {
+      sourceType: 'module',
+    // 在此添加需要解析的插件
+    })
+
+    // 单模块中引入了自定义组件    if (componentSet.size !== 0) {
     if (componentSet.size !== 0) {
-      const scriptAst = parser.parse(script.content, {
-        sourceType: 'module',
-        // 在此添加需要解析的插件
-      })
-    
       traverse(scriptAst, {
         Program(path) {
           componentSet.forEach((componentName) => {
@@ -260,14 +401,21 @@ module.exports = function (source) {
           }
         }
       })
-
       // 清除componentSet中的缓存，准备进入下次循环
       componentSet.clear()
+    }
     
-      const { code } = generator(scriptAst)
-      moduleResoveRet.script.content = code
-      source = generateCode(moduleResoveRet)
+    if (vBindMap.size !== 0) {
+      addComputedPropertyToScript(scriptAst, vBindMap);
+      vBindMap.clear()
     }
+
+    const {
+      code
+    } = generator(scriptAst)
+    moduleResoveRet.script.content = code
+    source = generateCode(moduleResoveRet)
   }
   return source
+
 }