fix(compiler-vapor): quote slot name

Author: sxzz

packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap

@@ -35,7 +35,7 @@ export function render(_ctx) {
   const _directive_test = _resolveDirective("test")
   const n4 = _createComponent(_component_Comp, null, [
     {
-      default: () => {
+      "default": () => {
         const n0 = _createIf(() => (true), () => {
           const n3 = t0()
           const n2 = _createComponent(_component_Bar)

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

@@ -102,7 +102,7 @@ export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
   const n1 = _createComponent(_component_Comp, null, [
     {
-      default: () => {
+      "default": () => {
         const n0 = t0()
         return n0
       }
@@ -122,11 +122,11 @@ export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
   const n4 = _createComponent(_component_Comp, null, [
     {
-      one: () => {
+      "one": () => {
         const n0 = t0()
         return n0
       }, 
-      default: () => {
+      "default": () => {
         const n2 = t1()
         const n3 = t2()
         return [n2, n3]
@@ -146,11 +146,11 @@ export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
   const n5 = _createComponent(_component_Comp, null, [
     {
-      default: _withDestructure(({ foo }) => [foo], (_ctx0) => {
+      "default": _withDestructure(({ foo }) => [foo], (_ctx0) => {
         const n2 = t0()
         const n1 = _createComponent(_component_Inner, null, [
           {
-            default: _withDestructure(({ bar }) => [bar], (_ctx1) => {
+            "default": _withDestructure(({ bar }) => [bar], (_ctx1) => {
               const n0 = _createTextNode(() => [_ctx0[0] + _ctx1[0] + _ctx.baz])
               return n0
             })
@@ -190,7 +190,7 @@ export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
   const n1 = _createComponent(_component_Comp, null, [
     {
-      named: _withDestructure(({ foo }) => [foo], (_ctx0) => {
+      "named": _withDestructure(({ foo }) => [foo], (_ctx0) => {
         const n0 = _createTextNode(() => [_ctx0[0] + _ctx.bar])
         return n0
       })
@@ -207,7 +207,7 @@ export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
   const n1 = _createComponent(_component_Comp, null, [
     {
-      default: _withDestructure(({ foo }) => [foo], (_ctx0) => {
+      "default": _withDestructure(({ foo }) => [foo], (_ctx0) => {
         const n0 = _createTextNode(() => [_ctx0[0] + _ctx.bar])
         return n0
       })
@@ -216,3 +216,19 @@ export function render(_ctx) {
   return n1
 }"
 `;
+
+exports[`compiler: transform slot > quote slot name 1`] = `
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
+
+export function render(_ctx) {
+  const _component_Comp = _resolveComponent("Comp")
+  const n1 = _createComponent(_component_Comp, null, [
+    {
+      "nav-bar-title-before": () => {
+        return null
+      }
+    }
+  ], true)
+  return n1
+}"
+`;

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

@@ -398,6 +398,14 @@ describe('compiler: transform slot', () => {
     ])
   })
 
+  test('quote slot name', () => {
+    const { code } = compileWithSlots(
+      `<Comp><template #nav-bar-title-before></template></Comp>`,
+    )
+    expect(code).toMatchSnapshot()
+    expect(code).contains(`"nav-bar-title-before"`)
+  })
+
   describe('errors', () => {
     test('error on extraneous children w/ named default slot', () => {
       const onError = vi.fn()

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

@@ -175,7 +175,7 @@ function genStaticSlots({ slots }: IRSlotsStatic, context: CodegenContext) {
   return genMulti(
     DELIMITERS_OBJECT_NEWLINE,
     ...names.map(name => [
-      `${name}: `,
+      `${JSON.stringify(name)}: `,
       ...genSlotBlockWithProps(slots[name], context),
     ]),
   )