fix: re-adding <keep-alive> elements to view (nativescript-vue#291)

msaelices · rigor789 · commit a953db565348 · 2018-08-01T15:14:20.000+02:00
* chore: more useful tracing information related to the VDom operations * fix: reset node next sibling when removing it to be able to add the components again. Fix nativescript-vue#220 * test: cleaner sample app which test the nativescript-vue#220 issue * fix: reset the prevSibling of the removed childNode
diff --git a/__tests__/renderer/ViewNode.test.js b/__tests__/renderer/ViewNode.test.js
@@ -241,6 +241,8 @@ describe('ViewNode', () => {
     expect(prevChildNode.nextSibling).toEqual(nextChildNode)
     expect(nextChildNode.prevSibling).toEqual(prevChildNode)
     expect(childNode.parentNode).toBeNull()
+    expect(childNode.prevSibling).toBeNull()
+    expect(childNode.nextSibling).toBeNull()
   })
 
   test('nativeView can be set once', () => {
diff --git a/platform/nativescript/renderer/ViewNode.js b/platform/nativescript/renderer/ViewNode.js
@@ -246,6 +246,12 @@ export default class ViewNode {
       childNode.nextSibling.prevSibling = childNode.prevSibling
     }
 
+    // reset the prevSibling and nextSibling. If not, a keep-alived component will
+    // still have a filled nextSibling attribute so vue will not
+    // insert the node again to the parent. See #220
+    childNode.prevSibling = null
+    childNode.nextSibling = null
+
     this.childNodes = this.childNodes.filter(node => node !== childNode)
 
     viewUtil.removeChild(this, childNode)
diff --git a/platform/nativescript/runtime/node-ops.js b/platform/nativescript/runtime/node-ops.js
@@ -41,19 +41,19 @@ export function appendChild(node, child) {
 }
 
 export function parentNode(node) {
-  trace(`ParentNode(${node})`)
+  trace(`ParentNode(${node}) -> ${node.parentNode}`)
 
   return node.parentNode
 }
 
 export function nextSibling(node) {
-  trace(`NextSibling(${node})`)
+  trace(`NextSibling(${node}) -> ${node.nextSibling}`)
 
   return node.nextSibling
 }
 
 export function tagName(elementNode) {
-  trace(`TagName(${elementNode})`)
+  trace(`TagName(${elementNode}) -> ${elementNode.tagName}`)
 
   return elementNode.tagName
 }
diff --git a/samples/app/220.js b/samples/app/220.js
@@ -5,14 +5,12 @@ Vue.config.silent = false
 
 const CompButton = {
   template: `
-    <Button @tap="counter++">{{label}}: {{counter}}</Button>
+    <Button>{{label}}: {{counter}}</Button>
   `,
   name: 'CompButton',
-  props: ['label'],
-  data() {
-    return {
-      counter: 0
-    }
+  props: ['label', 'counter'],
+  destroyed() {
+    console.log('Component destroyed. This should not happen')
   }
 }
 
@@ -27,8 +25,8 @@ new Vue({
         <StackLayout>
           <Button @tap="counter++">{{counter}}</Button>
           <keep-alive>
-            <CompButton v-if="counter % 2" key="odd" label="Odd" />
-            <CompButton v-else key="even" label="Even" />
+            <CompButton v-if="counter % 2" key="odd" label="Odd" :counter="counter" />
+            <CompButton v-else key="even" label="Even" :counter="counter" />
           </keep-alive>
         </StackLayout>
       </Page>

Original file line number	Diff line number	Diff line change
`@@ -41,19 +41,19 @@ export function appendChild(node, child) {`
`41`	`41`	`}`
`42`	`42`
`43`	`43`	`export function parentNode(node) {`
`44`		- trace(`ParentNode(${node})`)
	`44`	+ trace(`ParentNode(${node}) -> ${node.parentNode}`)
`45`	`45`
`46`	`46`	`return node.parentNode`
`47`	`47`	`}`
`48`	`48`
`49`	`49`	`export function nextSibling(node) {`
`50`		- trace(`NextSibling(${node})`)
	`50`	+ trace(`NextSibling(${node}) -> ${node.nextSibling}`)
`51`	`51`
`52`	`52`	`return node.nextSibling`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	`export function tagName(elementNode) {`
`56`		- trace(`TagName(${elementNode})`)
	`56`	+ trace(`TagName(${elementNode}) -> ${elementNode.tagName}`)
`57`	`57`
`58`	`58`	`return elementNode.tagName`
`59`	`59`	`}`