feat(weex): recycle-list support stateful child component

vuejs · Dec 19, 2017 · 70b97ac · 70b97ac
1 parent 452a65c
commit 70b97ac
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 41 deletions.
diff --git a/src/core/util/props.js b/src/core/util/props.js
@@ -45,7 +45,11 @@ export function validateProp (
     observe(value)
     observerState.shouldConvert = prevShouldConvert
   }
-  if (process.env.NODE_ENV !== 'production') {
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    // skip validation for weex recycle-list child component props
+    !(__WEEX__ && isObject(value) && ('@binding' in value))
+  ) {
     assertProp(prop, key, value, vm, absent)
   }
   return value

diff --git a/src/platforms/weex/compiler/modules/recycle-list/component-root.js b/src/platforms/weex/compiler/modules/recycle-list/component-root.js
@@ -10,6 +10,6 @@ export function postTransformComponentRoot (
   if (!el.parent) {
     // component root
     addAttr(el, '@isComponentRoot', 'true')
-    addAttr(el, '@componentProps', JSON.stringify({}))
+    addAttr(el, '@componentProps', '$props || {}')
   }
 }
diff --git a/src/platforms/weex/runtime/recycle-list/render-component-template.js b/src/platforms/weex/runtime/recycle-list/render-component-template.js
@@ -12,9 +12,6 @@ export function isRecyclableComponent (vnode: VNodeWithData): boolean {
 }
 
 export function renderRecyclableComponentTemplate (vnode: MountedComponentVNode): VNode {
-  // TODO:
-  // adding @isComponentRoot / @componentProps to the root node
-
   // $flow-disable-line
   delete vnode.data.attrs[RECYCLE_LIST_MARKER]
   const vm = createComponentInstanceForVnode(vnode)

diff --git a/test/weex/cases/cases.spec.js b/test/weex/cases/cases.spec.js
@@ -84,41 +84,39 @@ describe('Usage', () => {
       }).catch(done.fail)
     })
 
-    // it('stateless component with props', done => {
-    //   compileWithDeps('recycle-list/components/stateless-with-props.vue', [{
-    //     name: 'poster',
-    //     path: 'recycle-list/components/poster.vue'
-    //   }]).then(code => {
-    //     const id = String(Date.now() * Math.random())
-    //     const instance = createInstance(id, code)
-    //     setTimeout(() => {
-    //       const target = readObject('recycle-list/components/stateless-with-props.vdom.js')
-    //       expect(getRoot(instance)).toEqual(target)
-    //       done()
-    //     }, 50)
-    //   }).catch(done.fail)
-    // })
+    it('stateless component with props', done => {
+      compileWithDeps('recycle-list/components/stateless-with-props.vue', [{
+        name: 'poster',
+        path: 'recycle-list/components/poster.vue'
+      }]).then(code => {
+        const id = String(Date.now() * Math.random())
+        const instance = createInstance(id, code)
+        setTimeout(() => {
+          const target = readObject('recycle-list/components/stateless-with-props.vdom.js')
+          expect(getRoot(instance)).toEqual(target)
+          done()
+        }, 50)
+      }).catch(done.fail)
+    })
 
-    // it('stateful component', done => {
-    //   compileWithDeps('recycle-list/components/stateful.vue', [{
-    //     name: 'counter',
-    //     path: 'recycle-list/components/counter.vue'
-    //   }]).then(code => {
-    //     const id = String(Date.now() * Math.random())
-    //     const instance = createInstance(id, code)
-    //     setTimeout(() => {
-    //       const target = readObject('recycle-list/components/stateful.vdom.js')
-    //       expect(getRoot(instance)).toEqual(target)
-    //       const event = getEvents(instance)[0]
-    //       fireEvent(instance, event.ref, event.type, {})
-    //       setTimeout(() => {
-    //         // TODO: check render results
-    //         // expect(getRoot(instance)).toEqual(target)
-    //         done()
-    //       })
-    //     }, 50)
-    //   }).catch(done.fail)
-    // })
+    it('stateful component', done => {
+      compileWithDeps('recycle-list/components/stateful.vue', [{
+        name: 'counter',
+        path: 'recycle-list/components/counter.vue'
+      }]).then(code => {
+        const id = String(Date.now() * Math.random())
+        const instance = createInstance(id, code)
+        setTimeout(() => {
+          const target = readObject('recycle-list/components/stateful.vdom.js')
+          expect(getRoot(instance)).toEqual(target)
+          const event = getEvents(instance)[0]
+          fireEvent(instance, event.ref, event.type, {})
+          setTimeout(() => {
+            expect(getRoot(instance)).toEqual(target)
+            done()
+          })
+        }, 50)
+      }).catch(done.fail)
+    })
   })
 })
-
diff --git a/test/weex/cases/recycle-list/components/poster.vue b/test/weex/cases/recycle-list/components/poster.vue
@@ -1,4 +1,4 @@
-<template>
+<template recyclable="true">
   <div>
     <image class="image" :src="imageUrl"></image>
     <text class="title">{{title}}</text>