feat(runtime): mark element types with flags

+ implement initial addChild/removeChild methods

apps/test/app/app.js

@@ -1,38 +1,78 @@
-import { createApp, h, ref, onUnmounted } from '@nativescript-vue/runtime'
+import {
+    createApp,
+    h,
+    ref,
+    onUnmounted,
+    onMounted
+} from '@nativescript-vue/runtime'
+
+function dumpViewTree(root) {
+    const mapNode = node => {
+        return {
+            id: node.nodeId,
+            type: node.tagName ? node.tagName : node.nodeType,
+            text: node.text,
+            children: node.childNodes.map(mapNode)
+        }
+    }
+    return root.childNodes.map(mapNode)
+}
 
 function useInterval(cb, ms) {
     const interval = setInterval(cb, ms)
     onUnmounted(() => clearInterval(interval))
 }
 
-createApp({
+const app = createApp({
     render() {
         const label = (row, col) =>
-            h('Label', {
-                text: 'Hello World: ' + this.counter,
-                textAlignment: 'center',
-                verticalAlignment: 'middle',
-                row,
-                col
-            })
-
-        return h('Page', [
             h(
-                'GridLayout',
+                'Label',
                 {
-                    rows: '*, *',
-                    columns: '*, *'
-                },
-                [label(0, 0), label(0, 1), label(1, 0), label(1, 1)]
+                    text: 'Hello World: ' + this.counter,
+                    textAlignment: 'center',
+                    verticalAlignment: 'middle',
+                    row,
+                    col
+                }
+                // ['Hello World: ' + this.counter]
             )
-        ])
+
+        return h(
+            'GridLayout',
+            {
+                rows: '*, *',
+                columns: '*, *'
+            },
+            [
+                // label(0, 0),
+                this.p === 0 ? null : label(0, 0),
+                //'text node?',
+                this.p === 1 ? null : label(0, 1),
+                this.p === 2 ? null : label(1, 0),
+                this.p === 3 ? null : label(1, 1)
+            ]
+        )
     },
     setup() {
         const counter = ref(0)
-        useInterval(() => counter.value++, 1000)
+        const p = ref(0)
+        useInterval(() => {
+            counter.value++
+            p.value++
+            if (p.value > 3) {
+                p.value = 0
+            }
+        }, 200)
 
+        onMounted(() => {
+            setTimeout(() => {
+                console.log(JSON.stringify(dumpViewTree(app.$el), null, 2))
+            }, 1000)
+        })
         return {
-            counter
+            counter,
+            p
         }
     }
 }).mount()

packages/runtime/__tests__/nodeOps.spec.ts

@@ -41,6 +41,15 @@ describe('createElement', () => {
     expect(root.firstChild).toBe(child)
     expect(root.lastChild).toBe(child)
   })
-
+  test('NSVElement - insertBefore', () => {
+    const root = nodeOps.createElement('ContentView')
+    const child = nodeOps.createElement('Label')
+    expect(root.childNodes.length).toBe(0)
+    root.insertBefore(child, null)
+    expect(root.childNodes.length).toBe(1)
+    expect(child.parentNode).toBe(root)
+    expect(root.firstChild).toBe(child)
+    expect(root.lastChild).toBe(child)
+  })
   // TODO: Complete
 })

packages/runtime/src/index.ts

@@ -26,6 +26,11 @@ function runApp(root: ComponentPublicInstance): ComponentPublicInstance {
   console.log('->runApp')
   run({
     create: () => {
+      console.log({
+        id: root.$el.nodeId,
+        type: root.$el.nodeType,
+        tag: root.$el.tagName
+      })
       return root.$el.nativeView
     }
   })