fix(compiler): component/element resolution at runtime

apps/test/app/app.js

@@ -5,16 +5,20 @@ import {
     onUnmounted,
     onMounted,
     ActionBar,
-    defineComponent
+    defineComponent,
+    compile
 } from 'nativescript-vue'
 
 const testComp = defineComponent({
     template: `<StackLayout v-bind="$attrs">
+    <Button text="Hello Button" />
     <Label text="Compiled label from template" />
     <Label text="Another Compiled label from template" />
 </StackLayout>`
 })
 
+console.log(compile('<StackLayout/>').toString())
+
 function dumpViewTree(root) {
     const mapNode = node => {
         return {

package.json

@@ -40,7 +40,7 @@
     "@rollup/plugin-commonjs": "11.0.2",
     "@types/jest": "^24.0.21",
     "@types/puppeteer": "^2.0.0",
-    "@vue/compiler-sfc": "^3.0.0-alpha.9",
+    "@vue/compiler-sfc": "^3.0.0-alpha.10",
     "brotli": "^1.3.2",
     "chalk": "^2.4.2",
     "conventional-changelog-cli": "^2.0.31",

packages/compiler/package.json

@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/nativescript-vue/nativescript-vue/tree/dev/packages/compiler#readme",
   "dependencies": {
-    "@vue/shared": "3.0.0-alpha.9",
-    "@vue/compiler-core": "3.0.0-alpha.9"
+    "@vue/shared": "3.0.0-alpha.10",
+    "@vue/compiler-core": "3.0.0-alpha.10"
   }
 }

packages/compiler/src/parserOptions.ts

@@ -31,14 +31,7 @@ const isBuiltInComponent = (tag: string): symbol | undefined => {
 export const parserOptions: ParserOptions = {
   // We don't have void tags in NativeScript (<br>, <hr> etc.)
   isVoidTag: tag => false,
-  isNativeTag: tag => {
-    if (isBuiltInComponent(tag)) {
-      return false
-    }
-    // in case we encounter an element that is not a built-in component
-    // we will assume it's a plugin provided element
-    return true
-  },
+  isNativeTag: tag => false,
   isPreTag: tag => tag === 'pre',
   isBuiltInComponent,
   // todo: we might add support for different namespaces in the future

packages/nativescript-vue/package.json

@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/nativescript-vue/nativescript-vue/tree/dev/packages/nativescript-vue#readme",
   "dependencies": {
-    "@vue/shared": "3.0.0-alpha.9",
+    "@vue/shared": "3.0.0-alpha.10",
     "@nativescript-vue/compiler": "3.0.0-dev",
     "@nativescript-vue/runtime": "3.0.0-dev"
   }

packages/nativescript-vue/src/index.ts

@@ -5,6 +5,7 @@ import {
   CompilerError
 } from '@nativescript-vue/compiler'
 import {
+  isKnownView,
   registerRuntimeCompiler,
   RenderFunction,
   warn
@@ -31,6 +32,9 @@ function compileToFunction(
   }
 
   const { code } = compile(template, {
+    // at runtime - the registry should know about all elements, so we override the
+    // isNativeTag function from our standalone compiler
+    isNativeTag: tag => isKnownView(tag),
     hoistStatic: true,
     onError(err: CompilerError) {
       // todo

packages/runtime/package.json

@@ -32,9 +32,9 @@
   "homepage": "https://github.com/nativescript-vue/nativescript-vue/tree/dev/packages/runtime#readme",
   "dependencies": {
     "@nativescript/core": "6.5.0",
-    "@vue/shared": "3.0.0-alpha.9",
-    "@vue/reactivity": "3.0.0-alpha.9",
-    "@vue/runtime-core": "3.0.0-alpha.9",
+    "@vue/shared": "3.0.0-alpha.10",
+    "@vue/reactivity": "3.0.0-alpha.10",
+    "@vue/runtime-core": "3.0.0-alpha.10",
     "set-value": "3.0.1",
     "unset-value": "1.0.0"
   },

packages/runtime/src/index.ts

@@ -8,7 +8,7 @@ import {
 import { Application } from '@nativescript/core'
 import { nodeOps } from './nodeOps'
 import { patchProp } from './patchProp'
-import { INSVElement, INSVNode } from './nodes'
+import { INSVElement } from './nodes'
 import './registry'
 
 const rendererOptions = {
@@ -39,7 +39,7 @@ function runApp(root: ComponentPublicInstance): ComponentPublicInstance {
 
 export const render = ((...args) => {
   ensureRenderer().render(...args)
-}) as RootRenderFunction<INSVNode, INSVElement>
+}) as RootRenderFunction<INSVElement>
 
 export const createApp = ((...args) => {
   const app = ensureRenderer().createApp(...args)
@@ -55,6 +55,7 @@ export const createApp = ((...args) => {
 export * from './nodeOps'
 export * from './runtimeHelpers'
 export * from './registry'
+export { resolveComponent } from './resolveAssets'
 
 // Runtime components
 export { ActionBar } from './components/ActionBar'

packages/runtime/src/resolveAssets.ts

@@ -0,0 +1,18 @@
+import {
+  Component,
+  resolveComponent as _resolveComponent
+} from '@vue/runtime-core'
+import { isKnownView } from '.'
+
+export function resolveComponent(name: string): Component | string | undefined {
+  // in the standalone compiler, everything is treated as a component because we don't
+  // know if certain tags are elements or not at runtime
+  // (they are only registered at runtime with registerElement)
+  // if we return a string here, vue will render them as normal elements
+  // with the default slot as children
+  if (isKnownView(name)) {
+    return name
+  }
+
+  return _resolveComponent(name)
+}