feat(runtime): allow rendering to NSVRoot containers

rigor789 · Apr 25, 2020 · 57ebd28 · 57ebd28
1 parent cab807f
commit 57ebd28
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/packages/runtime/src/index.ts b/packages/runtime/src/index.ts
@@ -10,7 +10,7 @@ import { Application } from '@nativescript/core'
 import { debug } from '@nativescript-vue/shared'
 import { nodeOps } from './nodeOps'
 import { patchProp } from './patchProp'
-import { INSVElement } from './nodes'
+import { INSVElement, NSVRoot } from './nodes'
 import './registry'
 
 const rendererOptions = {
@@ -41,9 +41,12 @@ function runApp(root: ComponentPublicInstance): ComponentPublicInstance {
   return root
 }
 
-export const render = ((vnode: VNode | null, container: INSVElement) => {
+export const render = ((
+  vnode: VNode | null,
+  container: INSVElement | NSVRoot
+) => {
   ensureRenderer().render(vnode, container)
-}) as RootRenderFunction<INSVElement>
+}) as RootRenderFunction<INSVElement | NSVRoot>
 
 export const createApp = ((...args) => {
   const app = ensureRenderer().createApp(...args)

diff --git a/packages/runtime/src/nodes.ts b/packages/runtime/src/nodes.ts
@@ -2,7 +2,7 @@ import {
   getViewClass,
   getViewMeta,
   normalizeElementName,
-  NSVViewMeta
+  NSVViewMeta,
 } from './registry'
 import { ELEMENT_REF } from '@nativescript-vue/runtime'
 import { debug } from '@nativescript-vue/shared'
@@ -17,7 +17,7 @@ export const enum NSVNodeTypes {
   TEXT = 'text',
   ELEMENT = 'element',
   COMMENT = 'comment',
-  ROOT = 'root'
+  ROOT = 'root',
 }
 
 // View Flags indicate the kind of view the element is
@@ -29,7 +29,7 @@ export const enum NSVViewFlags {
   SKIP_ADD_TO_DOM = 1 << 0,
   CONTENT_VIEW = 1 << 1,
   LAYOUT_VIEW = 1 << 2,
-  NO_CHILDREN = 1 << 3
+  NO_CHILDREN = 1 << 3,
 }
 
 export interface INSVNode {
@@ -207,7 +207,7 @@ export class NSVElement extends NSVNode implements INSVElement {
     }
 
     const refIndex = this.childNodes.findIndex(
-      node => node.nodeId === anchor.nodeId
+      (node) => node.nodeId === anchor.nodeId
     )
 
     if (refIndex === -1) {
@@ -226,8 +226,8 @@ export class NSVElement extends NSVNode implements INSVElement {
     // todo: potentially refactor based on my benchmark:
     // https://www.measurethat.net/Benchmarks/Show/7450/0/filter-findindex
     const trueIndex = this.childNodes
-      .filter(node => node.nodeType === NSVNodeTypes.ELEMENT)
-      .findIndex(node => node.nodeId === el.nodeId)
+      .filter((node) => node.nodeType === NSVNodeTypes.ELEMENT)
+      .findIndex((node) => node.nodeId === el.nodeId)
 
     this.addChild(el, trueIndex)
   }
@@ -240,7 +240,7 @@ export class NSVElement extends NSVNode implements INSVElement {
   }
 
   removeChild(el: INSVNode) {
-    const index = this.childNodes.findIndex(node => node.nodeId === el.nodeId)
+    const index = this.childNodes.findIndex((node) => node.nodeId === el.nodeId)
 
     if (index > -1) {
       this.childNodes.splice(index, 1)
@@ -266,7 +266,7 @@ export class NSVElement extends NSVNode implements INSVElement {
     this.setAttribute(
       'text',
       this.childNodes
-        .filter(node => node.nodeType === NSVNodeTypes.TEXT)
+        .filter((node) => node.nodeType === NSVNodeTypes.TEXT)
         .reduce((text: string, currentNode) => {
           return text + currentNode.text
         }, '')
@@ -291,11 +291,17 @@ export class NSVText extends NSVNode {
 }
 
 export class NSVRoot extends NSVNode {
+  el?: NSVElement
+
   constructor() {
     super(NSVNodeTypes.ROOT)
   }
 
-  appendChild() {
+  appendChild(el: INSVNode) {
+    // console.log(`NSVRoot->appendChild(${el.nodeType})`)
+    if (el instanceof NSVElement) {
+      this.el = el
+    }
     // no-op
   }
 }