refactor(compiler-vapor): extract v-on

packages/compiler-vapor/src/compile.ts

@@ -18,6 +18,7 @@ import { transformOnce } from './transforms/vOnce'
 import { transformElement } from './transforms/transformElement'
 import { transformVHtml } from './transforms/vHtml'
 import { transformVText } from './transforms/vText'
+import { transformVBind } from './transforms/vBind'
 import { transformVOn } from './transforms/vOn'
 import { transformInterpolation } from './transforms/transformInterpolation'
 import type { HackOptions } from './ir'
@@ -92,6 +93,7 @@ export function getBaseTransformPreset(
   return [
     [transformOnce, transformInterpolation, transformElement],
     {
+      bind: transformVBind,
       on: transformVOn,
       html: transformVHtml,
       text: transformVText,

packages/compiler-vapor/src/transforms/transformElement.ts

@@ -2,12 +2,9 @@ import {
   type ElementNode,
   type AttributeNode,
   NodeTypes,
-  ErrorCodes,
-  createCompilerError,
   ElementTypes,
-  createSimpleExpression,
 } from '@vue/compiler-dom'
-import { camelize, isBuiltInDirective, isVoidTag } from '@vue/shared'
+import { isBuiltInDirective, isVoidTag } from '@vue/shared'
 import { NodeTransform, TransformContext } from '../transform'
 import { VaporDirectiveNode, IRNodeTypes } from '../ir'
 
@@ -69,54 +66,17 @@ function transformProp(
     return
   }
 
-  let { arg, exp, loc } = prop
   const directiveTransform = context.options.directiveTransforms[name]
   if (directiveTransform) {
     directiveTransform(prop, node, context)
   } else if (!isBuiltInDirective(name)) {
+    // custom directive
     context.registerOperation({
       type: IRNodeTypes.WITH_DIRECTIVE,
       element: context.reference(),
       name,
-      binding: exp,
+      binding: prop.exp,
       loc: prop.loc,
     })
   }
-
-  switch (name) {
-    case 'bind': {
-      if (!arg) {
-        // TODO support v-bind="{}"
-        return
-      }
-      if (!exp) {
-        // shorthand syntax https://github.com/vuejs/core/pull/9451
-        const propName = camelize(arg.content)
-        exp = createSimpleExpression(propName, false, arg.loc)
-        exp.ast = null
-      }
-
-      if (!exp.content.trim()) {
-        context.options.onError(
-          createCompilerError(ErrorCodes.X_V_BIND_NO_EXPRESSION, loc),
-        )
-        context.template += ` ${arg.content}=""`
-        return
-      }
-
-      context.registerEffect(
-        [exp],
-        [
-          {
-            type: IRNodeTypes.SET_PROP,
-            loc: prop.loc,
-            element: context.reference(),
-            name: arg,
-            value: exp,
-          },
-        ],
-      )
-      break
-    }
-  }
 }

packages/compiler-vapor/src/transforms/vBind.ts

@@ -0,0 +1,44 @@
+import {
+  createCompilerError,
+  createSimpleExpression,
+  ErrorCodes,
+} from '@vue/compiler-core'
+import { camelize } from '@vue/shared'
+import { IRNodeTypes } from '../ir'
+import type { DirectiveTransform } from '../transform'
+
+export const transformVBind: DirectiveTransform = (dir, node, context) => {
+  let { arg, exp, loc } = dir
+
+  if (!arg) {
+    // TODO support v-bind="{}"
+    return
+  }
+  if (!exp) {
+    // shorthand syntax https://github.com/vuejs/core/pull/9451
+    const propName = camelize(arg.content)
+    exp = createSimpleExpression(propName, false, arg.loc)
+    exp.ast = null
+  }
+
+  if (!exp.content.trim()) {
+    context.options.onError(
+      createCompilerError(ErrorCodes.X_V_BIND_NO_EXPRESSION, loc),
+    )
+    context.template += ` ${arg.content}=""`
+    return
+  }
+
+  context.registerEffect(
+    [exp],
+    [
+      {
+        type: IRNodeTypes.SET_PROP,
+        loc: dir.loc,
+        element: context.reference(),
+        name: arg,
+        value: exp,
+      },
+    ],
+  )
+}