feat(compiler): support vModel in templates

apps/test/app/app.js

@@ -23,12 +23,14 @@ const testComp = defineComponent({
   data() {
     return {
       toggle: true,
+      msg: 'Hello World!',
     }
   },
   template: `<StackLayout v-bind="$attrs">
     <Button text="Hello Button" @tap="tapHandler(true)"/>
     <Label text="Compiled label from template" v-show="toggle" />
-    <Label text="Another Compiled label from template" />
+    <TextField v-model="msg"/>
+    <Label :text="msg" />
     <Label v-text="'Label with v-text...!?!?!?'" v-on:tap="tapHandler(false)" />
 </StackLayout>`,
   methods: {

apps/test/app/package.json

@@ -2,6 +2,7 @@
   "main": "app.js",
   "android": {
     "v8Flags": "--expose_gc",
-    "markingMode": "none"
+    "markingMode": "none",
+    "maxLogcatObjectSize": 10000
   }
 }

packages/compiler/src/index.ts

@@ -7,7 +7,7 @@ import {
   RootNode,
   noopDirectiveTransform,
   NodeTransform,
-  DirectiveTransform
+  DirectiveTransform,
 } from '@vue/compiler-core'
 import { parserOptions } from './parserOptions'
 import { transformStyle } from './transforms/transformStyle'
@@ -22,16 +22,16 @@ import { transformShow } from './transforms/vShow'
 export { parserOptions }
 
 export const DOMNodeTransforms: NodeTransform[] = [
-  transformStyle
+  transformStyle,
   // ...(__DEV__ ? [warnTransitionChildren] : [])
 ]
 
 export const DOMDirectiveTransforms: Record<string, DirectiveTransform> = {
   cloak: noopDirectiveTransform,
   text: transformVText,
-  model: transformModel, // override compiler-core todo: remove if not needed
+  model: transformModel, // override compiler-core
   on: transformOn, // override compiler-core todo: remove if not needed
-  show: transformShow
+  show: transformShow,
 }
 
 export function compile(
@@ -44,16 +44,16 @@ export function compile(
     nodeTransforms: [...DOMNodeTransforms, ...(options.nodeTransforms || [])],
     directiveTransforms: {
       ...DOMDirectiveTransforms,
-      ...(options.directiveTransforms || {})
-    }
+      ...(options.directiveTransforms || {}),
+    },
     // transformHoist: stringifyStatic
   })
 }
 
 export function parse(template: string, options: ParserOptions = {}): RootNode {
   return baseParse(template, {
     ...parserOptions,
-    ...options
+    ...options,
   })
 }
 

packages/compiler/src/runtimeHelpers.ts

@@ -10,6 +10,9 @@ export const V_SHOW = Symbol(__DEV__ ? `vShow` : ``)
 export const TRANSITION = Symbol(__DEV__ ? `Transition` : ``)
 export const TRANSITION_GROUP = Symbol(__DEV__ ? `TransitionGroup` : ``)
 
+// todo: we might want to move built-in components into 'resolveAssets'
+// as we are already treating all elements as "components" and resolving them
+// to components/actual elements at runtime
 export const ACTION_BAR = Symbol(__DEV__ ? `ActionBar` : ``)
 
 registerRuntimeHelpers({

packages/compiler/src/transforms/vModel.ts

@@ -1,9 +1,21 @@
 import {
+  DirectiveTransform,
+  NodeTypes,
   transformModel as baseTransform,
-  DirectiveTransform
 } from '@vue/compiler-core'
+import { V_MODEL } from '@nativescript-vue/compiler'
 
 export const transformModel: DirectiveTransform = (dir, node, context) => {
-  // todo: remove if we don't need to alter vModel from compilerCore
-  return baseTransform(dir, node, context)
+  const baseResult = baseTransform(dir, node, context)
+  baseResult.needRuntime = context.helper(V_MODEL)
+  baseResult.props = baseResult.props.filter((p) => {
+    if (
+      p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
+      p.key.content === 'modelValue'
+    ) {
+      return false
+    }
+    return true
+  })
+  return baseResult
 }