From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Sat, 9 Dec 2023 10:41:59 +0000 (+0800)
Subject: feat: camel modifier for `v-bind` (#39)
X-Git-Tag: v3.6.0-alpha.1~16^2~726
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=26308c51ebf28e339d3ab1fb0e91c54eea7b976d;p=thirdparty%2Fvuejs%2Fcore.git

feat: camel modifier for `v-bind` (#39)
---

diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
index 3352803132..0c115735cf 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
@@ -8,7 +8,7 @@ export function render(_ctx) {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _effect(() => {
-    _setAttr(n1, "foo-bar", undefined, _ctx.id)
+    _setAttr(n1, "fooBar", undefined, _ctx.id)
   })
   return n0
 }"
diff --git a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
index fbaf2b0891..416f65c4eb 100644
--- a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
@@ -165,7 +165,7 @@ describe('compiler: transform v-bind', () => {
     })
   })
 
-  test.fails('.camel modifier', () => {
+  test('.camel modifier', () => {
     const node = parseWithVBind(`<div v-bind:foo-bar.camel="id"/>`)
     expect(node.effect[0].operations[0]).toMatchObject({
       key: {
@@ -179,7 +179,7 @@ describe('compiler: transform v-bind', () => {
     })
   })
 
-  test.fails('.camel modifier w/ no expression', () => {
+  test('.camel modifier w/ no expression', () => {
     const node = parseWithVBind(`<div v-bind:foo-bar.camel />`)
     expect(node.effect[0].operations[0]).toMatchObject({
       key: {
@@ -193,13 +193,13 @@ describe('compiler: transform v-bind', () => {
     })
   })
 
-  test.fails('.camel modifier w/ dynamic arg', () => {
+  test('.camel modifier w/ dynamic arg', () => {
     const node = parseWithVBind(`<div v-bind:[foo].camel="id"/>`)
     expect(node.effect[0].operations[0]).toMatchObject({
+      runtimeCamelize: true,
       key: {
         content: `foo`,
         isStatic: false,
-        somethingShouldBeTrue: true,
       },
       value: {
         content: `id`,
@@ -289,8 +289,7 @@ describe('compiler: codegen v-bind', () => {
     expect(code).contains('_setAttr(n1, _ctx.id, undefined, _ctx.id)')
   })
 
-  // TODO: camel modifier for v-bind
-  test.fails('.camel modifier', () => {
+  test('.camel modifier', () => {
     const code = compile(`<div v-bind:foo-bar.camel="id"/>`)
 
     expect(code).matchSnapshot()
diff --git a/packages/compiler-vapor/src/generate.ts b/packages/compiler-vapor/src/generate.ts
index d92def7fe2..4bce56044d 100644
--- a/packages/compiler-vapor/src/generate.ts
+++ b/packages/compiler-vapor/src/generate.ts
@@ -370,9 +370,11 @@ function genOperation(oper: OperationNode, context: CodegenContext) {
 }
 
 function genSetProp(oper: SetPropIRNode, context: CodegenContext) {
-  const { push, pushWithNewline, vaporHelper } = context
+  const { push, pushWithNewline, vaporHelper, helper } = context
   pushWithNewline(`${vaporHelper('setAttr')}(n${oper.element}, `)
+  if (oper.runtimeCamelize) push(`${helper('camelize')}(`)
   genExpression(oper.key, context)
+  if (oper.runtimeCamelize) push(`)`)
   push(`, undefined, `)
   genExpression(oper.value, context)
   push(')')
diff --git a/packages/compiler-vapor/src/ir.ts b/packages/compiler-vapor/src/ir.ts
index 172f32fd7e..979536af80 100644
--- a/packages/compiler-vapor/src/ir.ts
+++ b/packages/compiler-vapor/src/ir.ts
@@ -60,6 +60,7 @@ export interface SetPropIRNode extends BaseIRNode {
   element: number
   key: IRExpression
   value: IRExpression
+  runtimeCamelize: boolean
 }
 
 export interface SetTextIRNode extends BaseIRNode {
diff --git a/packages/compiler-vapor/src/transforms/vBind.ts b/packages/compiler-vapor/src/transforms/vBind.ts
index 6bd4cc939a..84fd1ac438 100644
--- a/packages/compiler-vapor/src/transforms/vBind.ts
+++ b/packages/compiler-vapor/src/transforms/vBind.ts
@@ -8,7 +8,7 @@ import { IRNodeTypes } from '../ir'
 import type { DirectiveTransform } from '../transform'
 
 export const transformVBind: DirectiveTransform = (dir, node, context) => {
-  let { arg, exp, loc } = dir
+  let { arg, exp, loc, modifiers } = dir
 
   if (!arg) {
     // TODO support v-bind="{}"
@@ -21,6 +21,15 @@ export const transformVBind: DirectiveTransform = (dir, node, context) => {
     exp.ast = null
   }
 
+  let camel = false
+  if (modifiers.includes('camel')) {
+    if (arg.isStatic) {
+      arg.content = camelize(arg.content)
+    } else {
+      camel = true
+    }
+  }
+
   if (!exp.content.trim()) {
     context.options.onError(
       createCompilerError(ErrorCodes.X_V_BIND_NO_EXPRESSION, loc),
@@ -38,6 +47,7 @@ export const transformVBind: DirectiveTransform = (dir, node, context) => {
         element: context.reference(),
         key: arg,
         value: exp,
+        runtimeCamelize: camel,
       },
     ],
   )