feat(compiler): support v-bind

Author: zhiyuanzmj

src/core/compiler/compile.ts

@@ -25,6 +25,7 @@ import {
   type RootNode,
 } from './ir'
 import { transformText } from './transforms/transformText'
+import { transformVBind } from './transforms/vBind'
 import type { JSXElement, JSXFragment, Program } from '@babel/types'
 
 export interface VaporCodegenResult
@@ -121,5 +122,10 @@ export type TransformPreset = [
 export function getBaseTransformPreset(
   prefixIdentifiers?: boolean,
 ): TransformPreset {
-  return [[transformText, transformElement, transformChildren], {}]
+  return [
+    [transformText, transformElement, transformChildren],
+    {
+      bind: transformVBind,
+    },
+  ]
 }

src/core/compiler/index.ts

@@ -8,6 +8,9 @@ export {
 } from './compile'
 export * from './transform'
 
+export * from './ir'
+
 export { transformText } from './transforms/transformText'
 export { transformElement } from './transforms/transformElement'
 export { transformChildren } from './transforms/transformChildren'
+export { transformVBind } from './transforms/vBind'

src/core/compiler/transform.ts

@@ -19,17 +19,16 @@ import {
   type OperationNode,
   type RootIRNode,
   type RootNode,
-  type VaporDirectiveNode,
 } from './ir/index'
-import type { JSXElement, JSXFragment } from '@babel/types'
+import type { JSXAttribute, JSXElement, JSXFragment } from '@babel/types'
 
 export type NodeTransform = (
   node: BlockIRNode['node'],
   context: TransformContext<BlockIRNode['node']>,
 ) => void | (() => void) | (() => void)[]
 
 export type DirectiveTransform = (
-  dir: VaporDirectiveNode,
+  dir: JSXAttribute,
   node: JSXElement,
   context: TransformContext<JSXElement>,
 ) => DirectiveTransformResult | void

src/core/compiler/transforms/transformElement.ts

@@ -235,21 +235,20 @@ function transformProp(
   context: TransformContext<JSXElement>,
 ): DirectiveTransformResult | void {
   if (prop.type === 'JSXSpreadAttribute') return
-
   let name = prop.name.type === 'JSXIdentifier' ? prop.name.name : ''
-  const value = prop.value?.type === 'StringLiteral' ? prop.value.value : ''
 
-  if (prop.type === 'JSXAttribute') {
+  if (!prop.value || prop.value.type === 'StringLiteral') {
     if (isReservedProp(name)) return
     return {
       key: resolveSimpleExpression(name, true, prop.name.loc!),
       value:
         prop.value && prop.value.type === 'StringLiteral'
-          ? resolveSimpleExpression(value, true, prop.value.loc!)
+          ? resolveSimpleExpression(prop.value.value, true, prop.value.loc!)
           : EMPTY_EXPRESSION,
     }
   }
 
+  name = /^on[A-Z]/.test(name) ? 'on' : 'bind'
   const directiveTransform = context.options.directiveTransforms[name]
   if (directiveTransform) {
     return directiveTransform(prop, node, context)

src/core/compiler/transforms/transformText.ts

@@ -9,7 +9,7 @@ import {
   getLiteralExpressionValue,
   isComponent,
   isConstantExpression,
-  resolveSimpleExpression,
+  resolveExpression,
 } from '../utils'
 import type {
   Expression,
@@ -88,25 +88,7 @@ function processTextLikeContainer(
 
 function createTextLikeExpression(node: TextLike, context: TransformContext) {
   seen.get(context.root)!.add(node)
-  if (node.type === 'JSXText') {
-    return resolveSimpleExpression(node.value, true, node.loc!)
-  } else {
-    const source = context.ir.source.slice(
-      node.expression.start!,
-      node.expression.end!,
-    )
-    let ast: false | ParseResult<Expression> = false
-    if (context.options.prefixIdentifiers) {
-      ast = parseExpression(` ${source}`, {
-        sourceType: 'module',
-        plugins: context.options.expressionPlugins,
-      })
-    }
-
-    const result = resolveSimpleExpression(source, false, node.loc!)
-    result.ast = ast
-    return result
-  }
+  return resolveExpression(node, context)
 }
 
 function isAllTextLike(children: Node[]): children is TextLike[] {

src/core/compiler/transforms/vBind.ts

@@ -0,0 +1,63 @@
+import {
+  ErrorCodes,
+  type SimpleExpressionNode,
+  createCompilerError,
+} from '@vue/compiler-dom'
+import { camelize, extend } from '@vue/shared'
+import {
+  resolveExpression,
+  resolveLocation,
+  resolveSimpleExpression,
+} from '../utils'
+import { isReservedProp } from './transformElement'
+import type { DirectiveTransform } from '../transform'
+
+const __BROWSER__ = false
+export const transformVBind: DirectiveTransform = (dir, node, context) => {
+  const { loc } = dir
+  if (!loc || dir.name.type === 'JSXNamespacedName') return
+
+  const [name, ...modifiers] = dir.name.name.split('_')
+
+  let exp: SimpleExpressionNode
+  if (!name.trim() && loc) {
+    if (!__BROWSER__) {
+      // #10280 only error against empty expression in non-browser build
+      // because :foo in in-DOM templates will be parsed into :foo="" by the
+      // browser
+      context.options.onError(
+        createCompilerError(
+          ErrorCodes.X_V_BIND_NO_EXPRESSION,
+          resolveLocation(loc, name),
+        ),
+      )
+    }
+    exp = resolveSimpleExpression('', true, loc)
+  }
+
+  exp = resolveExpression(dir.value, context)
+  let arg = resolveExpression(dir.name, context)
+
+  if (arg.isStatic && isReservedProp(arg.content)) return
+
+  let camel = false
+  if (modifiers.includes('camel')) {
+    if (arg.isStatic) {
+      arg = extend({}, arg, { content: camelize(arg.content) })
+    } else {
+      camel = true
+    }
+  }
+
+  return {
+    key: arg,
+    value: exp,
+    loc,
+    runtimeCamelize: camel,
+    modifier: modifiers.includes('prop')
+      ? '.'
+      : modifiers.includes('attr')
+        ? '^'
+        : undefined,
+  }
+}

src/core/compiler/utils.ts

@@ -11,10 +11,16 @@ import {
 } from '@vue/compiler-dom'
 import htmlTags, { type HtmlTags } from 'html-tags'
 import svgTags from 'svg-tags'
+import { type ParseResult, parseExpression } from '@babel/parser'
 import { EMPTY_EXPRESSION } from './transforms/utils'
+import type { TransformContext } from './transform'
 import type { VaporDirectiveNode } from './ir'
 import type {
   BigIntLiteral,
+  Expression,
+  JSXAttribute,
+  JSXIdentifier,
+  JSXText,
   Node,
   NumericLiteral,
   SourceLocation,
@@ -53,16 +59,6 @@ export function isConstantExpression(exp: SimpleExpressionNode) {
   )
 }
 
-export function resolveExpression(exp: SimpleExpressionNode) {
-  if (!exp.isStatic) {
-    const value = getLiteralExpressionValue(exp)
-    if (value !== null) {
-      return createSimpleExpression(`${value}`, true, exp.loc)
-    }
-  }
-  return exp
-}
-
 export function getLiteralExpressionValue(
   exp: SimpleExpressionNode,
 ): number | string | boolean | null {
@@ -83,24 +79,73 @@ export function getLiteralExpressionValue(
   return exp.isStatic ? exp.content : null
 }
 
+export function resolveExpression(
+  node: JSXAttribute['value'] | JSXText | JSXIdentifier,
+  context: TransformContext,
+) {
+  const isStatic =
+    !!node &&
+    (node.type === 'StringLiteral' ||
+      node.type === 'JSXText' ||
+      node.type === 'JSXIdentifier')
+  const source = !node
+    ? ''
+    : node.type === 'JSXIdentifier'
+      ? node.name
+      : isStatic
+        ? node.value
+        : node.type === 'JSXExpressionContainer'
+          ? node.expression.type === 'Identifier'
+            ? node.expression.name
+            : context.ir.source.slice(
+                node.expression.start!,
+                node.expression.end!,
+              )
+          : ''
+  const location = node ? node.loc : null
+  let ast: false | ParseResult<Expression> = false
+  if (!isStatic && context.options.prefixIdentifiers) {
+    ast = parseExpression(` ${source}`, {
+      sourceType: 'module',
+      plugins: context.options.expressionPlugins,
+    })
+  }
+  return resolveSimpleExpression(source, isStatic, location, ast)
+}
+
 export function resolveSimpleExpression(
   source: string,
   isStatic: boolean,
-  location: SourceLocation,
+  location?: SourceLocation | null,
+  ast?: false | ParseResult<Expression>,
 ) {
-  return createSimpleExpression(source, isStatic, {
-    start: {
-      line: location.start.line,
-      column: location.start.column,
-      offset: location.start.index,
-    },
-    end: {
-      line: location.end.line,
-      column: location.end.column,
-      offset: location.end.index,
-    },
+  const result = createSimpleExpression(
+    source,
+    isStatic,
+    resolveLocation(location, source),
+  )
+  result.ast = ast ?? null
+  return result
+}
+
+export function resolveLocation(location?: SourceLocation | null, source = '') {
+  return {
+    start: location
+      ? {
+          line: location.start.line,
+          column: location.start.column + 1,
+          offset: location.start.index,
+        }
+      : { line: 1, column: 1, offset: 0 },
+    end: location
+      ? {
+          line: location.end.line,
+          column: location.end.column + 1,
+          offset: location.end.index,
+        }
+      : { line: 1, column: 1, offset: 0 },
     source,
-  })
+  }
 }
 
 export function isComponent(node: Node) {

test/compile.spec.ts

@@ -70,7 +70,7 @@ describe('compile', () => {
           return n0
         })()"
       `)
-      // expect(code).contains('a + b.value')
+      expect(code).contains('a + b.value')
     })
   })
 })

test/transforms/transformChildren.spec.ts

@@ -22,15 +22,15 @@ describe('compiler: children transform', () => {
 
   test('children & sibling references', () => {
     const { code, vaporHelpers } = compileWithElementTransform(
-      `<div id>
+      `<div>
         <p>{ first }</p> 
         { second }
         <p>{ forth }</p>
       </div>`,
     )
     expect(code).toMatchInlineSnapshot(`
       "import { next as _next, createTextNode as _createTextNode, insert as _insert, renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue/vapor';
-      const t0 = _template("<div id><p></p> <!><p></p></div>")
+      const t0 = _template("<div><p></p> <!><p></p></div>")
 
       export function render(_ctx) {
         const n4 = t0()