fix(compiler-core): emit TS-compatible function declaration when requ…

…ested
vuejs · Jan 16, 2024 · 5e55e6d · 5e55e6d
1 parent 07922da
commit 5e55e6d
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 1 deletion.
diff --git a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
@@ -16,6 +16,22 @@ export function render(_ctx, _cache) {
 }"
 `;
 
+exports[`scopeId compiler support > should push typescript-compatible scopeId for hoisted nodes 1`] = `
+"import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\"
+
+const _withScopeId = (n: () => any) => (_pushScopeId(\\"test\\"),n=n(),_popScopeId(),n)
+const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */))
+const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */))
+
+export function render(_ctx: any,_cache: any) {
+  return (_openBlock(), _createElementBlock(\\"div\\", null, [
+    _hoisted_1,
+    _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
+    _hoisted_2
+  ]))
+}"
+`;
+
 exports[`scopeId compiler support > should wrap default slot 1`] = `
 "import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue"
 

diff --git a/packages/compiler-core/__tests__/scopeId.spec.ts b/packages/compiler-core/__tests__/scopeId.spec.ts
@@ -81,4 +81,29 @@ describe('scopeId compiler support', () => {
     ].forEach(c => expect(code).toMatch(c))
     expect(code).toMatchSnapshot()
   })
+
+  test('should push typescript-compatible scopeId for hoisted nodes', () => {
+    const { ast, code } = baseCompile(
+      `<div><div>hello</div>{{ foo }}<div>world</div></div>`,
+      {
+        mode: 'module',
+        scopeId: 'test',
+        hoistStatic: true,
+        isTS: true
+      }
+    )
+    expect(ast.helpers).toContain(PUSH_SCOPE_ID)
+    expect(ast.helpers).toContain(POP_SCOPE_ID)
+    expect(ast.hoists.length).toBe(2)
+    ;[
+      `const _withScopeId = (n: () => any) => (_pushScopeId("test"),n=n(),_popScopeId(),n)`,
+      `const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "hello", ${genFlagText(
+        PatchFlags.HOISTED
+      )}))`,
+      `const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "world", ${genFlagText(
+        PatchFlags.HOISTED
+      )}))`
+    ].forEach(c => expect(code).toMatch(c))
+    expect(code).toMatchSnapshot()
+  })
 })
diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
@@ -533,8 +533,9 @@ function genHoists(hoists: (JSChildNode | null)[], context: CodegenContext) {
 
   // generate inlined withScopeId helper
   if (genScopeId) {
+    const functionDeclaration = context.isTS ? '(n: () => any)' : 'n'
     push(
-      `const _withScopeId = n => (${helper(
+      `const _withScopeId = ${functionDeclaration} => (${helper(
         PUSH_SCOPE_ID,
       )}("${scopeId}"),n=n(),${helper(POP_SCOPE_ID)}(),n)`,
     )