fix(alita wx-react wx-react-native): 修复 wxs过滤数组引起的bug

Author: ykforerlang

mptemp/commonwxs.wxs

@@ -40,25 +40,12 @@ var lite = function(v) {
     return v.constructor === 'Number' || v.constructor === 'String'
 }
 
-var isArray = function(v) {
-    return v.constructor === 'Array'
-}
-
-var compact = function(v) {
-    return v.filter(function(item) {
-         return item !== null
-    })
-}
 
 module.exports = {
    getFinalStyle: getFinalStyle,
    lite: lite,
-   isArray: isArray,
-   compact: compact,
 
 
     s: getFinalStyle,
     l: lite,
-    a: isArray,
-    c: compact
 };

packages/wx-react-native/miniprogram_dist/component/WXFlatList/index.wxml

@@ -61,7 +61,7 @@
 
             <block wx:if="{{numColumns >= 2}}">
                 <view style="display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap">
-                    <view wx:for="{{tools.compact(renderItemData)}}" wx:key="key" style="width: {{100 / numColumns}}%">
+                    <view wx:for="{{renderItemData}}" wx:key="key" style="width: {{100 / numColumns}}%">
                         <renderItemCPT id="id_{{index}}"
                                        diuu="{{item.renderItemDIUU}}"
                                        R="{{item.renderItemDIUUR}}"
@@ -70,7 +70,7 @@
                 </view>
             </block>
             <block wx:else>
-                <block wx:for="{{tools.compact(renderItemData)}}" wx:key="key">
+                <block wx:for="{{renderItemData}}" wx:key="key">
                     <view wx:if="{{methods.ArrayContains(stickyHeaderIndices,index)}}" style="{{sti['stickyContainerStyle'+index]}}">
                         <renderItemCPT id="id_{{index}}"
                                        diuu="{{item.renderItemDIUU}}"

packages/wx-react-native/miniprogram_dist/component/WXPicker/index.wxml

@@ -8,7 +8,7 @@
             bindchange="onValueChange">
         <picker-view-column>
             <block
-                    wx:for="{{tools.compact(childrenData)}}"
+                    wx:for="{{childrenData}}"
                     wx:key="key"
             >
                 <childrenCPT

packages/wx-react-native/miniprogram_dist/component/WXSectionList/index.wxml

@@ -34,15 +34,15 @@
                     style="{{tools.getFinalStyle(ListHeaderComponentDIUUstyle)}}"
             />
 
-            <block wx:for="{{tools.compact(sectionsData)}}" wx:key="key">
+            <block wx:for="{{sectionsData}}" wx:key="key">
                 <renderSectionHeaderCPT
                         wx:if="{{item.renderSectionHeaderDIUU}}"
                         diuu="{{item.renderSectionHeaderDIUU}}"
                         R="{{item.renderSectionHeaderDIUUR}}"
                         style="{{tools.getFinalStyle(item.renderSectionHeaderDIUUstyle)}}"
                 />
 
-                <block wx:for="{{tools.compact(item.renderItemData)}}" wx:key="key">
+                <block wx:for="{{item.renderItemData}}" wx:key="key">
                     <renderItemCPT
                             diuu="{{item.renderItemDIUU}}"
                             R="{{item.renderItemDIUUR}}"

packages/wx-react/miniprogram_dist/getChangePath.js

@@ -6,6 +6,12 @@
  *
  */
 
+function hasMoreKeys(okeys, nkeys) {
+    const nkeysSet = new Set(nkeys)
+
+    return okeys.some(key => !nkeysSet.has(key))
+}
+
 function getObjectPathInner(v, prefix, result) {
     const tv = typeof v
 
@@ -54,17 +60,17 @@ function getChangePathInner(newR, oldR, prefix, result) {
     ) {
         getObjectPathInner(newR, prefix, result)
     } else if (Array.isArray(newR)) {
+        // 由于小程序 setData 设置为 undefined 会出问题。 所以这种情况直接设置对象
+        if (newR.length < oldR.length) {
+            result[prefix] = newR
+            return
+        }
+
         for (let i = 0; i < newR.length; i++) {
             const v = newR[i]
             const ov = oldR[i]
             getChangePathInner(v, ov, `${prefix}[${i}]`, result)
         }
-        
-        if (newR.length < oldR.length) {
-            for (let i = newR.length; i < oldR.length; i ++) {
-                result[`${prefix}[${i}]`] = null
-            }
-        }
     } else if (tn === 'object' && tn !== null) {
         if (newR.__isAnimation__) {
             result[prefix] = newR
@@ -73,18 +79,21 @@ function getChangePathInner(newR, oldR, prefix, result) {
 
 
         const nkeys = Object.keys(newR)
+        const okeys = Object.keys(oldR)
+
+        // 由于小程序 setData 设置为 undefined 会出问题。 所以这种情况直接设置对象
+        // TODO 这种情况下， 是否依然可以减少数据的传递呢？？
+        if (hasMoreKeys(okeys, nkeys)) {
+            result[prefix] = newR
+            return
+        }
+
         for (let i = 0; i < nkeys.length; i++) {
             const k = nkeys[i]
             const v = newR[k]
             const ov = oldR[k]
             getChangePathInner(v, ov, `${prefix}.${k}`, result)
         }
-
-        const okeys = Object.keys(oldR)
-        const onlyNkeys = okeys.filter(k => newR[k] === undefined)
-        for(let i = 0; i < onlyNkeys.length; i ++) {
-            result[`${prefix}.${onlyNkeys[i]}`] = null
-        }
     } else {
         result[prefix] = newR
     }

src/tran/childrenToTemplate.js

@@ -117,7 +117,7 @@ export default function childrenToTemplate(ast, info) {
                                 [
                                     t.jsxAttribute(t.jsxIdentifier('datakey'), t.stringLiteral(datakey)),
                                     t.jsxAttribute(t.jsxIdentifier('tempVnode'), ele),
-                                    t.jsxAttribute(t.jsxIdentifier('wx:if'), t.stringLiteral(`{{${datakey}}}`)),
+                                    t.jsxAttribute(t.jsxIdentifier('wx:if'), t.stringLiteral(`{{${datakey}}} !== undefined`)),
                                     t.jsxAttribute(t.jsxIdentifier('is'), t.stringLiteral(tempName)),
                                     t.jsxAttribute(t.jsxIdentifier('data'), t.stringLiteral(`{{d: ${datakey}}}`))
                                 ]

src/tran/geneWxml.js

@@ -66,7 +66,16 @@ export default function(info) {
         const name = childTemplates[i];
         // 如果只使用一个child 小程序会报递归， 然后就不渲染了
         const subT = `
-<template name="${name}"><block wx:if="{{t.a(d)}}"><block wx:for="{{t.c(d)}}" wx:key="key"><block wx:if="{{t.l(item)}}">{{item}}</block><template wx:else is="{{item.tempName}}" data="{{...item}}"></template></block></block><template wx:elif="{{d.tempName}}" is="{{d.tempName}}" data="{{...d}}"></template></template>
+<template name="${name}">
+   <block wx:if="{{t.l(d)}}">{{d}}</block>
+   <template wx:elif="{{d.tempName}}" is="{{d.tempName}}" data="{{...d}}"/>
+   <block wx:else>
+       <block wx:for="{{d}}" wx:key="key">
+           <block wx:if="{{t.l(item)}}">{{item}}</block>
+           <template wx:else is="{{item.tempName}}" data="{{...item}}"/>
+       </block>
+   </block>
+</template>
         `;
 
         templateWxml = subT + templateWxml;

src/tran/index.js

@@ -66,7 +66,7 @@ export default function (ast, filepath, isFuncComp, entryFilePath, isPageComp) {
 
     geneReactJS(ast, info)
 
-    ast = literalTemplate(ast, info)
+    //ast = literalTemplate(ast, info)
 
     ast = addEventHandler(ast, info)