feat(runtime-vapor): onMounted and onUnMounted hook

packages/compiler-core/src/utils.ts

@@ -152,11 +152,17 @@ export const isMemberExpressionBrowser = (path: string): boolean => {
 }
 
 export const isMemberExpressionNode = __BROWSER__
-  ? (NOOP as any as (path: string, context: TransformContext) => boolean)
-  : (path: string, context: TransformContext): boolean => {
+  ? (NOOP as any as (
+      path: string,
+      options: Pick<TransformContext, 'expressionPlugins'>
+    ) => boolean)
+  : (
+      path: string,
+      options: Pick<TransformContext, 'expressionPlugins'>
+    ): boolean => {
       try {
         let ret: Expression = parseExpression(path, {
-          plugins: context.expressionPlugins
+          plugins: options.expressionPlugins
         })
         if (ret.type === 'TSAsExpression' || ret.type === 'TSTypeAssertion') {
           ret = ret.expression

packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap

@@ -1,48 +1,48 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`compiler: codegen v-bind > .camel modifier 1`] = `
+exports[`compiler v-bind > .camel modifier 1`] = `
 "import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _effect(() => {
-    _setAttr(n1, "foo-bar", undefined, _ctx.id)
+    _setAttr(n1, "fooBar", undefined, _ctx.id)
   })
   return n0
 }"
 `;
 
-exports[`compiler: codegen v-bind > dynamic arg 1`] = `
-"import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
+exports[`compiler v-bind > .camel modifier w/ dynamic arg 1`] = `
+"import { camelize as _camelize } from 'vue';
 
 export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _effect(() => {
-    _setAttr(n1, _ctx.id, undefined, _ctx.id)
+    _setAttr(n1, _camelize(_ctx.foo), undefined, _ctx.id)
   })
   return n0
 }"
 `;
 
-exports[`compiler: codegen v-bind > no expression (shorthand) 1`] = `
+exports[`compiler v-bind > .camel modifier w/ no expression 1`] = `
 "import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _effect(() => {
-    _setAttr(n1, "camel-case", undefined, _ctx.camelCase)
+    _setAttr(n1, "fooBar", undefined, _ctx.fooBar)
   })
   return n0
 }"
 `;
 
-exports[`compiler: codegen v-bind > no expression 1`] = `
+exports[`compiler v-bind > basic 1`] = `
 "import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
 
 export function render(_ctx) {
@@ -56,17 +56,35 @@ export function render(_ctx) {
 }"
 `;
 
-exports[`compiler: codegen v-bind > should error if no expression 1`] = `
-"import { template as _template } from 'vue/vapor';
+exports[`compiler v-bind > dynamic arg 1`] = `
+"import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
 
 export function render(_ctx) {
-  const t0 = _template("<div arg=\\"\\"></div>")
+  const t0 = _template("<div></div>")
   const n0 = t0()
+  const { 0: [n1],} = _children(n0)
+  _effect(() => {
+    _setAttr(n1, _ctx.id, undefined, _ctx.id)
+  })
   return n0
 }"
 `;
 
-exports[`compiler: codegen v-bind > simple expression 1`] = `
+exports[`compiler v-bind > no expression (shorthand) 1`] = `
+"import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
+
+export function render(_ctx) {
+  const t0 = _template("<div></div>")
+  const n0 = t0()
+  const { 0: [n1],} = _children(n0)
+  _effect(() => {
+    _setAttr(n1, "camel-case", undefined, _ctx.camelCase)
+  })
+  return n0
+}"
+`;
+
+exports[`compiler v-bind > no expression 1`] = `
 "import { template as _template, children as _children, effect as _effect, setAttr as _setAttr } from 'vue/vapor';
 
 export function render(_ctx) {
@@ -79,3 +97,13 @@ export function render(_ctx) {
   return n0
 }"
 `;
+
+exports[`compiler v-bind > should error if empty expression 1`] = `
+"import { template as _template } from 'vue/vapor';
+
+export function render(_ctx) {
+  const t0 = _template("<div arg=\\"\\"></div>")
+  const n0 = t0()
+  return n0
+}"
+`;