fix(weex): append as tree by default for recycle-list and cell-slot (vuejs#7216)

Author: Hanks10100

src/platforms/weex/compiler/modules/append.js

@@ -1,7 +1,13 @@
 /* @flow */
 
+import { makeMap } from 'shared/util'
+
+// The "unitary tag" means that the tag node and its children
+// must be sent to the native together.
+const isUnitaryTag = makeMap('cell,header,cell-slot,recycle-list', true)
+
 function preTransformNode (el: ASTElement, options: CompilerOptions) {
-  if (el.tag === 'cell' && !el.attrsList.some(item => item.name === 'append')) {
+  if (isUnitaryTag(el.tag) && !el.attrsList.some(item => item.name === 'append')) {
     el.attrsMap.append = 'tree'
     el.attrsList.push({ name: 'append', value: 'tree' })
   }

test/weex/cases/cases.spec.js

@@ -136,7 +136,7 @@ describe('Usage', () => {
       }]).then(code => {
         const id = String(Date.now() * Math.random())
         const instance = createInstance(id, code)
-        expect(tasks.length).toEqual(7)
+        expect(tasks.length).toEqual(3)
         tasks.length = 0
         instance.$triggerHook(2, 'create', ['component-1'])
         instance.$triggerHook(2, 'create', ['component-2'])

test/weex/cases/recycle-list/attrs.vdom.js

@@ -1,6 +1,7 @@
 ({
   type: 'recycle-list',
   attr: {
+    append: 'tree',
     listData: [
       { type: 'A', count: 1, source: 'http://whatever.com/x.png' },
       { type: 'A', count: 2, source: 'http://whatever.com/y.png' },
@@ -11,7 +12,7 @@
   },
   children: [{
     type: 'cell-slot',
-    attr: { templateType: 'A' },
+    attr: { append: 'tree', templateType: 'A' },
     children: [{
       type: 'image',
       attr: {

test/weex/cases/recycle-list/classname.vdom.js

@@ -1,6 +1,7 @@
 ({
   type: 'recycle-list',
   attr: {
+    append: 'tree',
     listData: [
       { type: 'A', color: 'red' },
       { type: 'A', color: 'blue' }
@@ -10,7 +11,7 @@
   },
   children: [{
     type: 'cell-slot',
-    attr: { templateType: 'A' },
+    attr: { append: 'tree', templateType: 'A' },
     style: {
       backgroundColor: '#FF6600'
     },

test/weex/cases/recycle-list/components/stateful-v-model.vdom.js

@@ -1,6 +1,7 @@
 ({
   type: 'recycle-list',
   attr: {
+    append: 'tree',
     listData: [
       { type: 'A' },
       { type: 'A' }
@@ -10,7 +11,7 @@
   },
   children: [{
     type: 'cell-slot',
-    attr: { templateType: 'A' },
+    attr: { append: 'tree', templateType: 'A' },
     children: [{
       type: 'div',
       attr: {

test/weex/cases/recycle-list/components/stateful.vdom.js

@@ -1,6 +1,7 @@
 ({
   type: 'recycle-list',
   attr: {
+    append: 'tree',
     listData: [
       { type: 'A', number: 24 },
       { type: 'A', number: 42 }
@@ -10,7 +11,7 @@
   },
   children: [{
     type: 'cell-slot',
-    attr: { templateType: 'A' },
+    attr: { append: 'tree', templateType: 'A' },
     children: [{
       type: 'div',
       attr: {

test/weex/cases/recycle-list/components/stateless-multi-components.vdom.js

@@ -1,6 +1,7 @@
 ({
   type: 'recycle-list',
   attr: {
+    append: 'tree',
     listData: [
       { type: 'A' },
       { type: 'B', poster: 'yy', title: 'y' },
@@ -11,7 +12,7 @@
   },
   children: [{
     type: 'cell-slot',
-    attr: { templateType: 'A' },
+    attr: { append: 'tree', templateType: 'A' },
     children: [{
       type: 'div',
       attr: {
@@ -51,7 +52,7 @@
     }]
   }, {
     type: 'cell-slot',
-    attr: { templateType: 'B' },
+    attr: { append: 'tree', templateType: 'B' },
     children: [{
       type: 'div',
       attr: {

test/weex/cases/recycle-list/components/stateless-with-props.vdom.js

@@ -1,6 +1,7 @@
 ({
   type: 'recycle-list',
   attr: {
+    append: 'tree',
     listData: [
       { type: 'A', poster: 'xx', title: 'x' },
       { type: 'A', poster: 'yy', title: 'y' }
@@ -10,7 +11,7 @@
   },
   children: [{
     type: 'cell-slot',
-    attr: { templateType: 'A' },
+    attr: { append: 'tree', templateType: 'A' },
     children: [{
       type: 'div',
       attr: {

test/weex/cases/recycle-list/components/stateless.vdom.js

@@ -1,6 +1,7 @@
 ({
   type: 'recycle-list',
   attr: {
+    append: 'tree',
     listData: [
       { type: 'A' },
       { type: 'A' }
@@ -10,7 +11,7 @@
   },
   children: [{
     type: 'cell-slot',
-    attr: { templateType: 'A' },
+    attr: { append: 'tree', templateType: 'A' },
     children: [{
       type: 'div',
       attr: {

test/weex/cases/recycle-list/inline-style.vdom.js

@@ -1,6 +1,7 @@
 ({
   type: 'recycle-list',
   attr: {
+    append: 'tree',
     listData: [
       { type: 'A', color: '#606060' },
       { type: 'A', color: '#E5E5E5' }
@@ -10,7 +11,7 @@
   },
   children: [{
     type: 'cell-slot',
-    attr: { templateType: 'A' },
+    attr: { append: 'tree', templateType: 'A' },
     style: {
       backgroundColor: '#FF6600'
     },

test/weex/cases/recycle-list/text-node.vdom.js

@@ -1,6 +1,7 @@
 ({
   type: 'recycle-list',
   attr: {
+    append: 'tree',
     listData: [
       { type: 'A', dynamic: 'decimal', two: '2', four: '4' },
       { type: 'A', dynamic: 'binary', two: '10', four: '100' }
@@ -10,7 +11,7 @@
   },
   children: [{
     type: 'cell-slot',
-    attr: { templateType: 'A' },
+    attr: { append: 'tree', templateType: 'A' },
     children: [{
       type: 'text',
       attr: {

test/weex/cases/recycle-list/v-else-if.vdom.js

@@ -1,6 +1,7 @@
 ({
   type: 'recycle-list',
   attr: {
+    append: 'tree',
     listData: [
       { type: 'A' },
       { type: 'A' }
@@ -10,7 +11,7 @@
   },
   children: [{
     type: 'cell-slot',
-    attr: { templateType: 'A' },
+    attr: { append: 'tree', templateType: 'A' },
     children: [{
       type: 'image',
       attr: {

test/weex/cases/recycle-list/v-else.vdom.js

@@ -1,6 +1,7 @@
 ({
   type: 'recycle-list',
   attr: {
+    append: 'tree',
     listData: [
       { type: 'A' },
       { type: 'A' }
@@ -10,7 +11,7 @@
   },
   children: [{
     type: 'cell-slot',
-    attr: { templateType: 'A' },
+    attr: { append: 'tree', templateType: 'A' },
     children: [{
       type: 'image',
       attr: {

test/weex/cases/recycle-list/v-for-iterator.vdom.js

@@ -1,6 +1,7 @@
 ({
   type: 'recycle-list',
   attr: {
+    append: 'tree',
     listData: [
       { type: 'A' },
       { type: 'A' }
@@ -10,7 +11,7 @@
   },
   children: [{
     type: 'cell-slot',
-    attr: { templateType: 'A' },
+    attr: { append: 'tree', templateType: 'A' },
     children: [{
       type: 'div',
       attr: {

test/weex/cases/recycle-list/v-for.vdom.js

@@ -1,6 +1,7 @@
 ({
   type: 'recycle-list',
   attr: {
+    append: 'tree',
     listData: [
       { type: 'A' },
       { type: 'A' }
@@ -10,7 +11,7 @@
   },
   children: [{
     type: 'cell-slot',
-    attr: { templateType: 'A' },
+    attr: { append: 'tree', templateType: 'A' },
     children: [{
       type: 'div',
       attr: {

test/weex/cases/recycle-list/v-if.vdom.js

@@ -1,6 +1,7 @@
 ({
   type: 'recycle-list',
   attr: {
+    append: 'tree',
     listData: [
       { type: 'A' },
       { type: 'A' }
@@ -10,7 +11,7 @@
   },
   children: [{
     type: 'cell-slot',
-    attr: { templateType: 'A' },
+    attr: { append: 'tree', templateType: 'A' },
     children: [{
       type: 'image',
       attr: {

test/weex/cases/recycle-list/v-on-inline.vdom.js

@@ -1,6 +1,7 @@
 ({
   type: 'recycle-list',
   attr: {
+    append: 'tree',
     listData: [
       { type: 'A' },
       { type: 'A' }
@@ -10,7 +11,7 @@
   },
   children: [{
     type: 'cell-slot',
-    attr: { templateType: 'A' },
+    attr: { append: 'tree', templateType: 'A' },
     children: [{
       type: 'text',
       event: ['click', {

test/weex/cases/recycle-list/v-on.vdom.js

@@ -1,6 +1,7 @@
 ({
   type: 'recycle-list',
   attr: {
+    append: 'tree',
     listData: [
       { type: 'A' },
       { type: 'A' }
@@ -10,7 +11,7 @@
   },
   children: [{
     type: 'cell-slot',
-    attr: { templateType: 'A' },
+    attr: { append: 'tree', templateType: 'A' },
     children: [{
       type: 'text',
       event: ['click', 'longpress'],

test/weex/compiler/append.spec.js

@@ -2,7 +2,7 @@ import { compile } from '../../../packages/weex-template-compiler'
 import { strToRegExp } from '../helpers/index'
 
 describe('append props', () => {
-  it('append="tree"', () => {
+  it('add append="tree" on <cell>', () => {
     const { render, staticRenderFns, errors } = compile(`<list><cell></cell></list>`)
     expect(render).not.toBeUndefined()
     expect(staticRenderFns).not.toBeUndefined()
@@ -11,4 +11,37 @@ describe('append props', () => {
     expect(staticRenderFns).toMatch(strToRegExp(`attrs:{"append":"tree"}`))
     expect(errors).toEqual([])
   })
+
+  it('override append="node" on <cell>', () => {
+    const { render, staticRenderFns, errors } = compile(`<list><cell append="node"></cell></list>`)
+    expect(render + staticRenderFns).toMatch(strToRegExp(`attrs:{"append":"node"}`))
+    expect(errors).toEqual([])
+  })
+
+  it('add append="tree" on <header>', () => {
+    const { render, staticRenderFns, errors } = compile(`<list><header></header></list>`)
+    expect(render + staticRenderFns).toMatch(strToRegExp(`appendAsTree:true`))
+    expect(render + staticRenderFns).toMatch(strToRegExp(`attrs:{"append":"tree"}`))
+    expect(errors).toEqual([])
+  })
+
+  it('add append="tree" on <recycle-list>', () => {
+    const { render, staticRenderFns, errors } = compile(`<recycle-list><div></div></recycle-list>`)
+    expect(render + staticRenderFns).toMatch(strToRegExp(`appendAsTree:true`))
+    expect(render + staticRenderFns).toMatch(strToRegExp(`attrs:{"append":"tree"}`))
+    expect(errors).toEqual([])
+  })
+
+  it('add append="tree" on <cell-slot>', () => {
+    const { render, staticRenderFns, errors } = compile(`<list><cell-slot></cell-slot></list>`)
+    expect(render + staticRenderFns).toMatch(strToRegExp(`appendAsTree:true`))
+    expect(render + staticRenderFns).toMatch(strToRegExp(`attrs:{"append":"tree"}`))
+    expect(errors).toEqual([])
+  })
+
+  it('override append="node" on <cell-slot>', () => {
+    const { render, staticRenderFns, errors } = compile(`<list><cell-slot append="node"></cell-slot></list>`)
+    expect(render + staticRenderFns).toMatch(strToRegExp(`attrs:{"append":"node"}`))
+    expect(errors).toEqual([])
+  })
 })