feat(weex): update new syntax for <recycle-list>

Author: yyx990803

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 = {}

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)) {

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)
+  }
+}

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: {

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>

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'
     },

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>

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: {

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>

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: {

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>

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: {

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>

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: {

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>

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: {

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>

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: {

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>

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'
     },

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>

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: {

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>

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: {

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>

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: {

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>

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: {