diff --git a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap index 445d3fd13ed..7267ba6b041 100644 --- 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 index c7a21df7a78..21e7327f2eb 100644 --- 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( + `
hello
{{ foo }}
world
`, + { + 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 index 987293d5124..39170bac5a0 100644 --- a/packages/compiler-core/src/codegen.ts +++ b/packages/compiler-core/src/codegen.ts @@ -572,8 +572,9 @@ function genHoists(hoists: (JSChildNode | null)[], context: CodegenContext) { // generate inlined withScopeId helper if (genScopeId) { + const param = context.isTS ? '(n: any)' : 'n' push( - `const _withScopeId = n => (${helper( + `const _withScopeId = ${param} => (${helper( PUSH_SCOPE_ID, )}("${scopeId}"),n=n(),${helper(POP_SCOPE_ID)}(),n)`, )