test(scopeId): add tests for slot wrapping with withVaporCtx

Author: edison1105

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

@@ -0,0 +1,69 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`scopeId compiler support > should wrap default slot 1`] = `
+"import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+  const _component_Child = _resolveComponent("Child")
+  const n1 = _createComponentWithFallback(_component_Child, null, {
+    "default": _withVaporCtx(() => {
+      const n0 = t0()
+      return n0
+    })
+  }, true)
+  return n1
+}"
+`;
+
+exports[`scopeId compiler support > should wrap dynamic slots 1`] = `
+"import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createForSlots as _createForSlots, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template("<div test></div>")
+
+export function render(_ctx) {
+  const _component_Child = _resolveComponent("Child")
+  const n4 = _createComponentWithFallback(_component_Child, null, {
+    $: [
+      () => (_ctx.ok
+        ? {
+          name: "foo",
+          fn: _withVaporCtx(() => {
+            const n0 = t0()
+            return n0
+          })
+        }
+        : void 0),
+      () => (_createForSlots(_ctx.list, (i) => ({
+        name: i,
+        fn: _withVaporCtx(() => {
+          const n2 = t0()
+          return n2
+        })
+      })))
+    ]
+  }, true)
+  return n4
+}"
+`;
+
+exports[`scopeId compiler support > should wrap named slots 1`] = `
+"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template(" ")
+const t1 = _template("<div test></div>")
+
+export function render(_ctx) {
+  const _component_Child = _resolveComponent("Child")
+  const n4 = _createComponentWithFallback(_component_Child, null, {
+    "foo": _withVaporCtx((_slotProps0) => {
+      const n0 = t0()
+      _renderEffect(() => _setText(n0, _toDisplayString(_slotProps0["msg"])))
+      return n0
+    }),
+    "bar": _withVaporCtx(() => {
+      const n2 = t1()
+      return n2
+    })
+  }, true)
+  return n4
+}"
+`;

packages/compiler-vapor/__tests__/scopeId.spec.ts

@@ -1,3 +1,58 @@
-// import { compile } from '../src/compile'
+import type { RootNode } from '@vue/compiler-dom'
+import { type CompilerOptions, compile as _compile } from '../src'
 
-describe.todo('scopeId compiler support', () => {})
+function compile(template: string | RootNode, options: CompilerOptions = {}) {
+  let { code } = _compile(template, {
+    ...options,
+    mode: 'module',
+    prefixIdentifiers: true,
+  })
+  return code
+}
+
+/**
+ * Ensure all slot functions are wrapped with `withVaporCtx`
+ * which sets the `currentInstance` to owner when rendering
+ * the slot.
+ */
+describe('scopeId compiler support', () => {
+  test('should wrap default slot', () => {
+    const code = compile(`<Child><div/></Child>`)
+    expect(code).toMatch(`"default": _withVaporCtx(() => {`)
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should wrap named slots', () => {
+    const code = compile(
+      `<Child>
+        <template #foo="{ msg }">{{ msg }}</template>
+        <template #bar><div/></template>
+        </Child>
+        `,
+      {
+        mode: 'module',
+        scopeId: 'test',
+      },
+    )
+    expect(code).toMatch(`"foo": _withVaporCtx((_slotProps0) => {`)
+    expect(code).toMatch(`"bar": _withVaporCtx(() => {`)
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should wrap dynamic slots', () => {
+    const code = compile(
+      `<Child>
+        <template #foo v-if="ok"><div/></template>
+        <template v-for="i in list" #[i]><div/></template>
+      </Child>
+        `,
+      {
+        mode: 'module',
+        scopeId: 'test',
+      },
+    )
+    expect(code).toMatch(/name: "foo",\s+fn: _withVaporCtx\(/)
+    expect(code).toMatch(/name: i,\s+fn: _withVaporCtx\(/)
+    expect(code).toMatchSnapshot()
+  })
+})