From 7cc0b559e9e57fcb3baeae5d8d4c8964aa335b5e Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Tue, 19 Dec 2017 16:19:07 -0500
Subject: [PATCH] feat(weex): update new syntax for <recycle-list>

---
 src/compiler/parser/index.js                  |  9 +++-
 .../compiler/modules/recycle-list/index.js    |  2 +
 .../modules/recycle-list/recycle-list.js      | 49 +++++++++++++++++++
 test/weex/cases/recycle-list/attrs.vdom.js    |  4 +-
 test/weex/cases/recycle-list/attrs.vue        |  4 +-
 .../weex/cases/recycle-list/classname.vdom.js |  4 +-
 test/weex/cases/recycle-list/classname.vue    |  4 +-
 .../components/stateful-lifecycle.vdom.js     |  4 +-
 .../components/stateful-lifecycle.vue         |  4 +-
 .../components/stateful-v-model.vdom.js       |  4 +-
 .../components/stateful-v-model.vue           |  4 +-
 .../recycle-list/components/stateful.vdom.js  |  4 +-
 .../recycle-list/components/stateful.vue      |  4 +-
 .../stateless-multi-components.vdom.js        |  6 +--
 .../components/stateless-multi-components.vue |  6 +--
 .../components/stateless-with-props.vdom.js   |  4 +-
 .../components/stateless-with-props.vue       |  4 +-
 .../recycle-list/components/stateless.vdom.js |  4 +-
 .../recycle-list/components/stateless.vue     |  4 +-
 .../cases/recycle-list/inline-style.vdom.js   |  4 +-
 test/weex/cases/recycle-list/inline-style.vue |  4 +-
 .../weex/cases/recycle-list/text-node.vdom.js |  4 +-
 test/weex/cases/recycle-list/text-node.vue    |  4 +-
 .../weex/cases/recycle-list/v-else-if.vdom.js |  4 +-
 test/weex/cases/recycle-list/v-else-if.vue    |  4 +-
 test/weex/cases/recycle-list/v-else.vdom.js   |  4 +-
 test/weex/cases/recycle-list/v-else.vue       |  4 +-
 .../cases/recycle-list/v-for-iterator.vdom.js |  4 +-
 .../cases/recycle-list/v-for-iterator.vue     |  4 +-
 test/weex/cases/recycle-list/v-for.vdom.js    |  4 +-
 test/weex/cases/recycle-list/v-for.vue        |  4 +-
 test/weex/cases/recycle-list/v-if.vdom.js     |  4 +-
 test/weex/cases/recycle-list/v-if.vue         |  4 +-
 .../cases/recycle-list/v-on-inline.vdom.js    |  4 +-
 test/weex/cases/recycle-list/v-on-inline.vue  |  4 +-
 test/weex/cases/recycle-list/v-on.vdom.js     |  4 +-
 test/weex/cases/recycle-list/v-on.vue         |  4 +-
 test/weex/compiler/append.spec.js             |  4 +-
 38 files changed, 131 insertions(+), 73 deletions(-)
 create mode 100644 src/platforms/weex/compiler/modules/recycle-list/recycle-list.js

diff --git a/src/compiler/parser/index.js b/src/compiler/parser/index.js
index 464ece1595..ba1b726870 100644
--- a/src/compiler/parser/index.js
+++ b/src/compiler/parser/index.js
@@ -360,7 +360,14 @@ export function processFor (el: ASTElement) {
   }
 }
 
-export function parseFor (exp: string): ?Object {
+type ForParseResult = {
+  for: string;
+  alias: string;
+  iterator1?: string;
+  iterator2?: string;
+};
+
+export function parseFor (exp: string): ?ForParseResult {
   const inMatch = exp.match(forAliasRE)
   if (!inMatch) return
   const res = {}
diff --git a/src/platforms/weex/compiler/modules/recycle-list/index.js b/src/platforms/weex/compiler/modules/recycle-list/index.js
index d163c2d854..1b85a45f99 100644
--- a/src/platforms/weex/compiler/modules/recycle-list/index.js
+++ b/src/platforms/weex/compiler/modules/recycle-list/index.js
@@ -1,5 +1,6 @@
 /* @flow */
 
+import { preTransformRecycleList } from './recycle-list'
 import { postTransformComponent } from './component'
 import { postTransformComponentRoot } from './component-root'
 import { postTransformText } from './text'
@@ -17,6 +18,7 @@ function shouldCompile (el: ASTElement, options: WeexCompilerOptions) {
 
 function preTransformNode (el: ASTElement, options: WeexCompilerOptions) {
   if (el.tag === 'recycle-list') {
+    preTransformRecycleList(el, options)
     currentRecycleList = el
   }
   if (shouldCompile(el, options)) {
diff --git a/src/platforms/weex/compiler/modules/recycle-list/recycle-list.js b/src/platforms/weex/compiler/modules/recycle-list/recycle-list.js
new file mode 100644
index 0000000000..22e3b5d552
--- /dev/null
+++ b/src/platforms/weex/compiler/modules/recycle-list/recycle-list.js
@@ -0,0 +1,49 @@
+/* @flow */
+
+import { parseFor } from 'compiler/parser/index'
+import { getAndRemoveAttr, addRawAttr } from 'compiler/helpers'
+
+/**
+ * Map the following syntax to corresponding attrs:
+ *
+ * <recycle-list for="(item, i) in longList" switch="cellType">
+ *   <cell-slot case="A"> ... </cell-slot>
+ *   <cell-slot case="B"> ... </cell-slot>
+ * </recycle-list>
+ */
+
+export function preTransformRecycleList (
+  el: ASTElement,
+  options: WeexCompilerOptions
+) {
+  const exp = getAndRemoveAttr(el, 'for')
+  if (!exp) {
+    if (options.warn) {
+      options.warn(`Invalid <recycle-list> syntax: missing "for" expression.`)
+    }
+    return
+  }
+
+  const res = parseFor(exp)
+  if (!res) {
+    if (options.warn) {
+      options.warn(`Invalid <recycle-list> syntax: ${exp}.`)
+    }
+    return
+  }
+
+  addRawAttr(el, ':list-data', res.for)
+  addRawAttr(el, 'alias', res.alias)
+  if (res.iterator2) {
+    // (item, key, index) for object iteration
+    // is this even supported?
+    addRawAttr(el, 'index', res.iterator2)
+  } else if (res.iterator1) {
+    addRawAttr(el, 'index', res.iterator1)
+  }
+
+  const switchKey = getAndRemoveAttr(el, 'switch')
+  if (switchKey) {
+    addRawAttr(el, 'switch', switchKey)
+  }
+}
diff --git a/test/weex/cases/recycle-list/attrs.vdom.js b/test/weex/cases/recycle-list/attrs.vdom.js
index 0d15ed8341..ccce367fc3 100644
--- a/test/weex/cases/recycle-list/attrs.vdom.js
+++ b/test/weex/cases/recycle-list/attrs.vdom.js
@@ -7,12 +7,12 @@
       { type: 'A', count: 2, source: 'http://whatever.com/y.png' },
       { type: 'A', count: 3, source: 'http://whatever.com/z.png' }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'A' },
+    attr: { append: 'tree', case: 'A' },
     children: [{
       type: 'image',
       attr: {
diff --git a/test/weex/cases/recycle-list/attrs.vue b/test/weex/cases/recycle-list/attrs.vue
index b9de8f9e71..1e2d0318af 100644
--- a/test/weex/cases/recycle-list/attrs.vue
+++ b/test/weex/cases/recycle-list/attrs.vue
@@ -1,6 +1,6 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="A">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="A">
       <image resize="cover" :src="item.source">
       <text lines="3" v-bind:count="item.count"></text>
     </cell-slot>
diff --git a/test/weex/cases/recycle-list/classname.vdom.js b/test/weex/cases/recycle-list/classname.vdom.js
index 45fcff829e..e9280e0e1b 100644
--- a/test/weex/cases/recycle-list/classname.vdom.js
+++ b/test/weex/cases/recycle-list/classname.vdom.js
@@ -6,12 +6,12 @@
       { type: 'A', color: 'red' },
       { type: 'A', color: 'blue' }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'A' },
+    attr: { append: 'tree', case: 'A' },
     style: {
       backgroundColor: '#FF6600'
     },
diff --git a/test/weex/cases/recycle-list/classname.vue b/test/weex/cases/recycle-list/classname.vue
index afa8c9f890..beca441fa3 100644
--- a/test/weex/cases/recycle-list/classname.vue
+++ b/test/weex/cases/recycle-list/classname.vue
@@ -1,6 +1,6 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="A" class="cell">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="A" class="cell">
       <text :class="['text', item.color]">content</text>
     </cell-slot>
   </recycle-list>
diff --git a/test/weex/cases/recycle-list/components/stateful-lifecycle.vdom.js b/test/weex/cases/recycle-list/components/stateful-lifecycle.vdom.js
index 5264259f14..45268ffefa 100644
--- a/test/weex/cases/recycle-list/components/stateful-lifecycle.vdom.js
+++ b/test/weex/cases/recycle-list/components/stateful-lifecycle.vdom.js
@@ -6,12 +6,12 @@
       { type: 'X' },
       { type: 'X' }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'X' },
+    attr: { append: 'tree', case: 'X' },
     children: [{
       type: 'div',
       attr: {
diff --git a/test/weex/cases/recycle-list/components/stateful-lifecycle.vue b/test/weex/cases/recycle-list/components/stateful-lifecycle.vue
index c01a96b6d1..97673b7bb9 100644
--- a/test/weex/cases/recycle-list/components/stateful-lifecycle.vue
+++ b/test/weex/cases/recycle-list/components/stateful-lifecycle.vue
@@ -1,6 +1,6 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="X">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="X">
       <lifecycle></lifecycle>
     </cell-slot>
   </recycle-list>
diff --git a/test/weex/cases/recycle-list/components/stateful-v-model.vdom.js b/test/weex/cases/recycle-list/components/stateful-v-model.vdom.js
index 97f055e73f..88af1438c2 100644
--- a/test/weex/cases/recycle-list/components/stateful-v-model.vdom.js
+++ b/test/weex/cases/recycle-list/components/stateful-v-model.vdom.js
@@ -6,12 +6,12 @@
       { type: 'A' },
       { type: 'A' }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'A' },
+    attr: { append: 'tree', case: 'A' },
     children: [{
       type: 'div',
       attr: {
diff --git a/test/weex/cases/recycle-list/components/stateful-v-model.vue b/test/weex/cases/recycle-list/components/stateful-v-model.vue
index 7a998a8bbb..3b7cc61a1f 100644
--- a/test/weex/cases/recycle-list/components/stateful-v-model.vue
+++ b/test/weex/cases/recycle-list/components/stateful-v-model.vue
@@ -1,6 +1,6 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="A">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="A">
       <editor message="No binding"></editor>
     </cell-slot>
   </recycle-list>
diff --git a/test/weex/cases/recycle-list/components/stateful.vdom.js b/test/weex/cases/recycle-list/components/stateful.vdom.js
index f716bc1ad0..bfa45455b3 100644
--- a/test/weex/cases/recycle-list/components/stateful.vdom.js
+++ b/test/weex/cases/recycle-list/components/stateful.vdom.js
@@ -6,12 +6,12 @@
       { type: 'A', number: 24 },
       { type: 'A', number: 42 }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'A' },
+    attr: { append: 'tree', case: 'A' },
     children: [{
       type: 'div',
       attr: {
diff --git a/test/weex/cases/recycle-list/components/stateful.vue b/test/weex/cases/recycle-list/components/stateful.vue
index b6882ad355..797f3f5681 100644
--- a/test/weex/cases/recycle-list/components/stateful.vue
+++ b/test/weex/cases/recycle-list/components/stateful.vue
@@ -1,6 +1,6 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="A">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="A">
       <counter :start="item.number"></counter>
       <text>other</text>
     </cell-slot>
diff --git a/test/weex/cases/recycle-list/components/stateless-multi-components.vdom.js b/test/weex/cases/recycle-list/components/stateless-multi-components.vdom.js
index 4d91101a82..9c1f1b21b6 100644
--- a/test/weex/cases/recycle-list/components/stateless-multi-components.vdom.js
+++ b/test/weex/cases/recycle-list/components/stateless-multi-components.vdom.js
@@ -7,12 +7,12 @@
       { type: 'B', poster: 'yy', title: 'y' },
       { type: 'A' }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'A' },
+    attr: { append: 'tree', case: 'A' },
     children: [{
       type: 'div',
       attr: {
@@ -52,7 +52,7 @@
     }]
   }, {
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'B' },
+    attr: { append: 'tree', case: 'B' },
     children: [{
       type: 'div',
       attr: {
diff --git a/test/weex/cases/recycle-list/components/stateless-multi-components.vue b/test/weex/cases/recycle-list/components/stateless-multi-components.vue
index 38fd0823b7..9a6d6bf694 100644
--- a/test/weex/cases/recycle-list/components/stateless-multi-components.vue
+++ b/test/weex/cases/recycle-list/components/stateless-multi-components.vue
@@ -1,11 +1,11 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="A">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="A">
       <banner></banner>
       <text>----</text>
       <footer></footer>
     </cell-slot>
-    <cell-slot template-type="B">
+    <cell-slot case="B">
       <banner></banner>
       <poster :image-url="item.poster" :title="item.title"></poster>
     </cell-slot>
diff --git a/test/weex/cases/recycle-list/components/stateless-with-props.vdom.js b/test/weex/cases/recycle-list/components/stateless-with-props.vdom.js
index 782cdd4d93..744c6af286 100644
--- a/test/weex/cases/recycle-list/components/stateless-with-props.vdom.js
+++ b/test/weex/cases/recycle-list/components/stateless-with-props.vdom.js
@@ -6,12 +6,12 @@
       { type: 'A', poster: 'xx', title: 'x' },
       { type: 'A', poster: 'yy', title: 'y' }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'A' },
+    attr: { append: 'tree', case: 'A' },
     children: [{
       type: 'div',
       attr: {
diff --git a/test/weex/cases/recycle-list/components/stateless-with-props.vue b/test/weex/cases/recycle-list/components/stateless-with-props.vue
index 134ad5e1c1..e1d3d8ccb2 100644
--- a/test/weex/cases/recycle-list/components/stateless-with-props.vue
+++ b/test/weex/cases/recycle-list/components/stateless-with-props.vue
@@ -1,6 +1,6 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="A">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="A">
       <poster :image-url="item.poster" :title="item.title"></poster>
       <text>content</text>
     </cell-slot>
diff --git a/test/weex/cases/recycle-list/components/stateless.vdom.js b/test/weex/cases/recycle-list/components/stateless.vdom.js
index da3b2b5201..a516132e0a 100644
--- a/test/weex/cases/recycle-list/components/stateless.vdom.js
+++ b/test/weex/cases/recycle-list/components/stateless.vdom.js
@@ -6,12 +6,12 @@
       { type: 'A' },
       { type: 'A' }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'A' },
+    attr: { append: 'tree', case: 'A' },
     children: [{
       type: 'div',
       attr: {
diff --git a/test/weex/cases/recycle-list/components/stateless.vue b/test/weex/cases/recycle-list/components/stateless.vue
index ee3f45bf6b..3ad942de64 100644
--- a/test/weex/cases/recycle-list/components/stateless.vue
+++ b/test/weex/cases/recycle-list/components/stateless.vue
@@ -1,6 +1,6 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="A">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="A">
       <banner></banner>
       <text>content</text>
     </cell-slot>
diff --git a/test/weex/cases/recycle-list/inline-style.vdom.js b/test/weex/cases/recycle-list/inline-style.vdom.js
index bac7961c56..c29bcf977f 100644
--- a/test/weex/cases/recycle-list/inline-style.vdom.js
+++ b/test/weex/cases/recycle-list/inline-style.vdom.js
@@ -6,12 +6,12 @@
       { type: 'A', color: '#606060' },
       { type: 'A', color: '#E5E5E5' }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'A' },
+    attr: { append: 'tree', case: 'A' },
     style: {
       backgroundColor: '#FF6600'
     },
diff --git a/test/weex/cases/recycle-list/inline-style.vue b/test/weex/cases/recycle-list/inline-style.vue
index 5f59c211ac..af9da5b083 100644
--- a/test/weex/cases/recycle-list/inline-style.vue
+++ b/test/weex/cases/recycle-list/inline-style.vue
@@ -1,6 +1,6 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="A" style="background-color:#FF6600">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="A" style="background-color:#FF6600">
       <text :style="{ fontSize: '100px', color: item.color }">content</text>
     </cell-slot>
   </recycle-list>
diff --git a/test/weex/cases/recycle-list/text-node.vdom.js b/test/weex/cases/recycle-list/text-node.vdom.js
index 4b7c834c7f..6ab5d1e6bb 100644
--- a/test/weex/cases/recycle-list/text-node.vdom.js
+++ b/test/weex/cases/recycle-list/text-node.vdom.js
@@ -6,12 +6,12 @@
       { type: 'A', dynamic: 'decimal', two: '2', four: '4' },
       { type: 'A', dynamic: 'binary', two: '10', four: '100' }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'A' },
+    attr: { append: 'tree', case: 'A' },
     children: [{
       type: 'text',
       attr: {
diff --git a/test/weex/cases/recycle-list/text-node.vue b/test/weex/cases/recycle-list/text-node.vue
index 801f3168d5..56b21cad1c 100644
--- a/test/weex/cases/recycle-list/text-node.vue
+++ b/test/weex/cases/recycle-list/text-node.vue
@@ -1,6 +1,6 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="A">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="A">
       <text>static</text>
       <text>{{item.dynamic}}</text>
       <text>one {{item.two}} three {{ item.four }} five</text>
diff --git a/test/weex/cases/recycle-list/v-else-if.vdom.js b/test/weex/cases/recycle-list/v-else-if.vdom.js
index 781e327e4e..30b38864b8 100644
--- a/test/weex/cases/recycle-list/v-else-if.vdom.js
+++ b/test/weex/cases/recycle-list/v-else-if.vdom.js
@@ -6,12 +6,12 @@
       { type: 'A' },
       { type: 'A' }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'A' },
+    attr: { append: 'tree', case: 'A' },
     children: [{
       type: 'image',
       attr: {
diff --git a/test/weex/cases/recycle-list/v-else-if.vue b/test/weex/cases/recycle-list/v-else-if.vue
index bde4ccc65f..6078450c33 100644
--- a/test/weex/cases/recycle-list/v-else-if.vue
+++ b/test/weex/cases/recycle-list/v-else-if.vue
@@ -1,6 +1,6 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="A">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="A">
       <image v-if="item.sourceA" :src="item.sourceA"></image>
       <image v-else-if="item.sourceB" :src="item.sourceB"></image>
       <image v-else :src="item.placeholder"></image>
diff --git a/test/weex/cases/recycle-list/v-else.vdom.js b/test/weex/cases/recycle-list/v-else.vdom.js
index 466cb379a2..dc37e1d3cd 100644
--- a/test/weex/cases/recycle-list/v-else.vdom.js
+++ b/test/weex/cases/recycle-list/v-else.vdom.js
@@ -6,12 +6,12 @@
       { type: 'A' },
       { type: 'A' }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'A' },
+    attr: { append: 'tree', case: 'A' },
     children: [{
       type: 'image',
       attr: {
diff --git a/test/weex/cases/recycle-list/v-else.vue b/test/weex/cases/recycle-list/v-else.vue
index 086d39dbac..48e85fd888 100644
--- a/test/weex/cases/recycle-list/v-else.vue
+++ b/test/weex/cases/recycle-list/v-else.vue
@@ -1,6 +1,6 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="A">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="A">
       <image v-if="item.source" :src="item.source"></image>
       <image v-else v-bind:src="item.placeholder"></image>
     </cell-slot>
diff --git a/test/weex/cases/recycle-list/v-for-iterator.vdom.js b/test/weex/cases/recycle-list/v-for-iterator.vdom.js
index ea164fe93e..5507403b8c 100644
--- a/test/weex/cases/recycle-list/v-for-iterator.vdom.js
+++ b/test/weex/cases/recycle-list/v-for-iterator.vdom.js
@@ -6,12 +6,12 @@
       { type: 'A' },
       { type: 'A' }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'A' },
+    attr: { append: 'tree', case: 'A' },
     children: [{
       type: 'div',
       attr: {
diff --git a/test/weex/cases/recycle-list/v-for-iterator.vue b/test/weex/cases/recycle-list/v-for-iterator.vue
index a6b7dc312e..ed424a2806 100644
--- a/test/weex/cases/recycle-list/v-for-iterator.vue
+++ b/test/weex/cases/recycle-list/v-for-iterator.vue
@@ -1,6 +1,6 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="A">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="A">
       <div v-for="(object, index) in item.list" :key="index">
         <text>{{object.name}}</text>
         <text v-for="(v, k, i) in object" :key="k">{{v}}</text>
diff --git a/test/weex/cases/recycle-list/v-for.vdom.js b/test/weex/cases/recycle-list/v-for.vdom.js
index 0060e34c4b..bbae2d5318 100644
--- a/test/weex/cases/recycle-list/v-for.vdom.js
+++ b/test/weex/cases/recycle-list/v-for.vdom.js
@@ -6,12 +6,12 @@
       { type: 'A' },
       { type: 'A' }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'A' },
+    attr: { append: 'tree', case: 'A' },
     children: [{
       type: 'div',
       attr: {
diff --git a/test/weex/cases/recycle-list/v-for.vue b/test/weex/cases/recycle-list/v-for.vue
index 713d5c0286..57a6890d94 100644
--- a/test/weex/cases/recycle-list/v-for.vue
+++ b/test/weex/cases/recycle-list/v-for.vue
@@ -1,6 +1,6 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="A">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="A">
       <div v-for="panel in item.list" :key="panel.id">
         <text>{{panel.label}}</text>
       </div>
diff --git a/test/weex/cases/recycle-list/v-if.vdom.js b/test/weex/cases/recycle-list/v-if.vdom.js
index fc9405d80e..fe5339b0e7 100644
--- a/test/weex/cases/recycle-list/v-if.vdom.js
+++ b/test/weex/cases/recycle-list/v-if.vdom.js
@@ -6,12 +6,12 @@
       { type: 'A' },
       { type: 'A' }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'A' },
+    attr: { append: 'tree', case: 'A' },
     children: [{
       type: 'image',
       attr: {
diff --git a/test/weex/cases/recycle-list/v-if.vue b/test/weex/cases/recycle-list/v-if.vue
index bec7cdac8e..ab2e04706d 100644
--- a/test/weex/cases/recycle-list/v-if.vue
+++ b/test/weex/cases/recycle-list/v-if.vue
@@ -1,6 +1,6 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="A">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="A">
       <image v-if="item.source" :src="item.source"></image>
       <text v-if="!item.source">Title</text>
     </cell-slot>
diff --git a/test/weex/cases/recycle-list/v-on-inline.vdom.js b/test/weex/cases/recycle-list/v-on-inline.vdom.js
index 436a12d80e..461fb993d8 100644
--- a/test/weex/cases/recycle-list/v-on-inline.vdom.js
+++ b/test/weex/cases/recycle-list/v-on-inline.vdom.js
@@ -6,12 +6,12 @@
       { type: 'A' },
       { type: 'A' }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'A' },
+    attr: { append: 'tree', case: 'A' },
     children: [{
       type: 'text',
       event: ['click', {
diff --git a/test/weex/cases/recycle-list/v-on-inline.vue b/test/weex/cases/recycle-list/v-on-inline.vue
index bf7ae7018d..ae909b281a 100644
--- a/test/weex/cases/recycle-list/v-on-inline.vue
+++ b/test/weex/cases/recycle-list/v-on-inline.vue
@@ -1,6 +1,6 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="A">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="A">
       <text v-on:click="toggle()" @longpress="toggle(item.key)"></text>
       <text @appear="onappear(item.index, 'static', item.type, $event)">Button</text>
       <text @disappear="onappear(25, 'static')">Tips</text>
diff --git a/test/weex/cases/recycle-list/v-on.vdom.js b/test/weex/cases/recycle-list/v-on.vdom.js
index be347c34d8..3da8209638 100644
--- a/test/weex/cases/recycle-list/v-on.vdom.js
+++ b/test/weex/cases/recycle-list/v-on.vdom.js
@@ -6,12 +6,12 @@
       { type: 'A' },
       { type: 'A' }
     ],
-    templateKey: 'type',
+    switch: 'type',
     alias: 'item'
   },
   children: [{
     type: 'cell-slot',
-    attr: { append: 'tree', templateType: 'A' },
+    attr: { append: 'tree', case: 'A' },
     children: [{
       type: 'text',
       event: ['click', 'longpress'],
diff --git a/test/weex/cases/recycle-list/v-on.vue b/test/weex/cases/recycle-list/v-on.vue
index de5fc51bfb..fb40f1522a 100644
--- a/test/weex/cases/recycle-list/v-on.vue
+++ b/test/weex/cases/recycle-list/v-on.vue
@@ -1,6 +1,6 @@
 <template>
-  <recycle-list :list-data="longList" template-key="type" alias="item">
-    <cell-slot template-type="A">
+  <recycle-list for="item in longList" switch="type">
+    <cell-slot case="A">
       <text v-on:click="handler" @longpress="move">A</text>
       <text @touchend="move">B</text>
     </cell-slot>
diff --git a/test/weex/compiler/append.spec.js b/test/weex/compiler/append.spec.js
index 60ceccd328..0492a6d001 100644
--- a/test/weex/compiler/append.spec.js
+++ b/test/weex/compiler/append.spec.js
@@ -26,9 +26,9 @@ describe('append props', () => {
   })
 
   it('add append="tree" on <recycle-list>', () => {
-    const { render, staticRenderFns, errors } = compile(`<recycle-list><div></div></recycle-list>`)
+    const { render, staticRenderFns, errors } = compile(`<recycle-list for="item in list"><div></div></recycle-list>`)
     expect(render + staticRenderFns).toMatch(strToRegExp(`appendAsTree:true`))
-    expect(render + staticRenderFns).toMatch(strToRegExp(`attrs:{"append":"tree"}`))
+    expect(render + staticRenderFns).toMatch(strToRegExp(`attrs:{"listData":list,"alias":"item","append":"tree"}`))
     expect(errors).toEqual([])
   })