fix(compiler-vapor): prevent _camelize from receiving nullish value for dynamic v-bind keys with .camel modifier. (#14138)

Author: edison1105

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

@@ -361,13 +361,24 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler v-bind > .camel modifier w/ dynamic arg + prefixIdentifiers 1`] = `
+"import { camelize as _camelize, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div></div>", true)
+
+export function render(_ctx) {
+  const n0 = t0()
+  _renderEffect(() => _setDynamicProps(n0, [{ [_camelize(_ctx.foo(_ctx.bar) || "")]: _ctx.id }]))
+  return n0
+}"
+`;
+
 exports[`compiler v-bind > .camel modifier w/ dynamic arg 1`] = `
 "import { camelize as _camelize, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
-  _renderEffect(() => _setDynamicProps(n0, [{ [_camelize(_ctx.foo)]: _ctx.id }]))
+  _renderEffect(() => _setDynamicProps(n0, [{ [_camelize(_ctx.foo || "")]: _ctx.id }]))
   return n0
 }"
 `;

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

@@ -341,11 +341,40 @@ describe('compiler v-bind', () => {
     expect(code).matchSnapshot()
     expect(code).contains('renderEffect')
     expect(code).contains(
-      `_setDynamicProps(n0, [{ [_camelize(_ctx.foo)]: _ctx.id }])`,
+      `_setDynamicProps(n0, [{ [_camelize(_ctx.foo || "")]: _ctx.id }])`,
     )
   })
 
-  test.todo('.camel modifier w/ dynamic arg + prefixIdentifiers')
+  test('.camel modifier w/ dynamic arg + prefixIdentifiers', () => {
+    const { ir, code } = compileWithVBind(
+      `<div v-bind:[foo(bar)].camel="id"/>`,
+      {
+        prefixIdentifiers: true,
+      },
+    )
+    expect(code).matchSnapshot()
+    expect(ir.block.effect[0].operations[0]).toMatchObject({
+      type: IRNodeTypes.SET_DYNAMIC_PROPS,
+      props: [
+        [
+          {
+            key: {
+              content: `foo(bar)`,
+              isStatic: false,
+            },
+            values: [
+              {
+                content: `id`,
+                isStatic: false,
+              },
+            ],
+            runtimeCamelize: true,
+            modifier: undefined,
+          },
+        ],
+      ],
+    })
+  })
 
   test('.prop modifier', () => {
     const { ir, code } = compileWithVBind(`<div v-bind:fooBar.prop="id"/>`)

packages/compiler-vapor/src/generators/prop.ts

@@ -138,6 +138,7 @@ export function genPropKey(
 
   let key = genExpression(node, context)
   if (runtimeCamelize) {
+    key.push(' || ""')
     key = genCall(helper('camelize'), key)
   }
   if (handler) {