fix(compiler-vapor): prevent `_camelize` from receiving nullish value for dynamic...

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 e2c94526b9bd959dda5ed98c93323b16120d2a8b..bd02d764df2a132a6759559f270589954cf15884 100644 (file)
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
+++ b/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
 }"
 `;

diff --git a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
index 230ae2c4da415605e347e1b6bfb66db1f3585958..17295beeaae942c467ab2f7cb550f3410e95f9aa 100644 (file)
--- a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
+++ b/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"/>`)

diff --git a/packages/compiler-vapor/src/generators/prop.ts b/packages/compiler-vapor/src/generators/prop.ts
index 63c6471f1f4343f12370ef4e8338ed58ea4558dd..d6e73017fd2a0aee793409d94cb7cb4d61c8e85c 100644 (file)
--- a/packages/compiler-vapor/src/generators/prop.ts
+++ b/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) {