refactor(language-core): wrap template virtual code into a function (#…

…4784) * refactor(language-core): wrap template virtual code into a function * fix: drop `declare` --------- Co-authored-by: KazariEX <1364035137@qq.com>
vuejs · Sep 1, 2024 · ece125b · ece125b
1 parent fd30217
commit ece125b
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 93 deletions.
diff --git a/packages/language-core/lib/codegen/script/component.ts b/packages/language-core/lib/codegen/script/component.ts
@@ -41,7 +41,7 @@ export function* generateComponent(
  yield generateSfcBlockSection(options.sfc.script, args.start + 1, args.end - 1, codeFeatures.all);
  }
  if (options.vueCompilerOptions.target >= 3.5 && scriptSetupRanges.templateRefs.length) {
- yield `__typeRefs: {} as __VLS_Refs,${newLine}`;
+ yield `__typeRefs: {} as __VLS_TemplateResult['refs'],${newLine}`;
  }
  yield `})`;
 }
@@ -142,7 +142,7 @@ export function* generatePropsOption(
  optionExpCodes.push(generateSfcBlockSection(scriptSetup, arg.start, arg.end, codeFeatures.navigation));
  }
  if (inheritAttrs && options.templateCodegen?.inheritedAttrVars.size) {
- let attrsType = `typeof __VLS_templateAttrs`;
+ let attrsType = `__VLS_TemplateResult['attrs']`;
  if (hasEmitsOption) {
  attrsType = `Omit<${attrsType}, \`on\${string}\`>`;
  }

diff --git a/packages/language-core/lib/codegen/script/index.ts b/packages/language-core/lib/codegen/script/index.ts
@@ -10,6 +10,7 @@ import { generateScriptSetup, generateScriptSetupImports } from './scriptSetup';
 import { generateSrc } from './src';
 import { generateTemplate } from './template';
 import { generateGlobalTypes } from '../globalTypes';
+import { generateInternalComponent } from './internalComponent';
 
 export const codeFeatures = {
  all: {
@@ -112,7 +113,10 @@ export function* generateScript(options: ScriptCodegenOptions): Generator<Code,
  else {
  yield generateSfcBlockSection(options.sfc.script, 0, classBlockEnd, codeFeatures.all);
  yield `__VLS_template = () => {`;
- yield* generateTemplate(options, ctx, true);
+ const templateCodegenCtx = yield* generateTemplate(options, ctx, true);
+ if (templateCodegenCtx) {
+ yield* generateInternalComponent(options, ctx, templateCodegenCtx);
+ }
  yield `},${newLine}`;
  yield generateSfcBlockSection(options.sfc.script, classBlockEnd, options.sfc.script.content.length, codeFeatures.all);
  }
@@ -135,7 +139,12 @@ export function* generateScript(options: ScriptCodegenOptions): Generator<Code,
  yield newLine;
 
  if (!ctx.generatedTemplate) {
- yield* generateTemplate(options, ctx, false);
+ yield `function __VLS_template() {${newLine}`;
+ const templateCodegenCtx = yield* generateTemplate(options, ctx, false);
+ yield `}${endOfLine}`;
+ if (templateCodegenCtx) {
+ yield* generateInternalComponent(options, ctx, templateCodegenCtx);
+ }
  }
 
  if (options.edited) {

diff --git a/packages/language-core/lib/codegen/script/scriptSetup.ts b/packages/language-core/lib/codegen/script/scriptSetup.ts
@@ -4,6 +4,7 @@ import { endOfLine, generateSfcBlockSection, newLine } from '../common';
 import { generateComponent, generateEmitsOption } from './component';
 import type { ScriptCodegenContext } from './context';
 import { ScriptCodegenOptions, codeFeatures } from './index';
+import { generateInternalComponent } from './internalComponent';
 import { generateCssClassProperty, generateTemplate } from './template';
 
 export function* generateScriptSetupImports(
@@ -70,7 +71,7 @@ export function* generateScriptSetup(
  + ` props: ${ctx.localTypes.PrettifyLocal}<typeof __VLS_functionalComponentProps & __VLS_PublicProps> & __VLS_BuiltInPublicProps,${newLine}`
  + ` expose(exposed: import('${options.vueCompilerOptions.lib}').ShallowUnwrapRef<${scriptSetupRanges.expose.define ? 'typeof __VLS_exposed' : '{}'}>): void,${newLine}`
  + ` attrs: any,${newLine}`
- + ` slots: __VLS_Slots,${newLine}`
+ + ` slots: __VLS_TemplateResult['slots'],${newLine}`
  + ` emit: ${emitTypes.length ? emitTypes.join(' & ') : `{}`},${newLine}`
  + ` }${endOfLine}`;
  yield ` })(),${newLine}`; // __VLS_setup = (async () => {
@@ -246,9 +247,9 @@ function* generateSetupFunction(
  if (define?.arg) {
  setupCodeModifies.push([
  [
- `<__VLS_Refs[`,
+ `<__VLS_TemplateResult['refs'][`,
  generateSfcBlockSection(scriptSetup, define.arg.start, define.arg.end, codeFeatures.navigation),
- `], keyof __VLS_Refs>`
+ `], keyof __VLS_TemplateResult['refs']>`
  ],
  define.arg.start - 1,
  define.arg.start - 1
@@ -287,17 +288,21 @@ function* generateSetupFunction(
  yield* generateComponentProps(options, ctx, scriptSetup, scriptSetupRanges, definePropMirrors);
  yield* generateModelEmits(options, scriptSetup, scriptSetupRanges);
  yield* generateStyleModules(options, ctx);
- yield* generateTemplate(options, ctx, false);
- yield `type __VLS_Refs = typeof __VLS_templateRefs${endOfLine}`;
- yield `type __VLS_Slots = typeof __VLS_templateSlots${endOfLine}`;
+ yield `function __VLS_template() {${newLine}`;
+ const templateCodegenCtx = yield* generateTemplate(options, ctx, false);
+ yield `}${endOfLine}`;
+ if (templateCodegenCtx) {
+ yield* generateInternalComponent(options, ctx, templateCodegenCtx);
+ }
+ yield `type __VLS_TemplateResult = ReturnType<typeof __VLS_template>${endOfLine}`;
 
  if (syntax) {
  if (!options.vueCompilerOptions.skipTemplateCodegen && (options.templateCodegen?.hasSlot || scriptSetupRanges?.slots.define)) {
  yield `const __VLS_component = `;
  yield* generateComponent(options, ctx, scriptSetup, scriptSetupRanges);
  yield endOfLine;
  yield `${syntax} `;
- yield `{} as ${ctx.localTypes.WithTemplateSlots}<typeof __VLS_component, __VLS_Slots>${endOfLine}`;
+ yield `{} as ${ctx.localTypes.WithTemplateSlots}<typeof __VLS_component, __VLS_TemplateResult['slots']>${endOfLine}`;
  }
  else {
  yield `${syntax} `;

diff --git a/packages/language-core/lib/codegen/script/template.ts b/packages/language-core/lib/codegen/script/template.ts
@@ -7,7 +7,6 @@ import { forEachInterpolationSegment } from '../template/interpolation';
 import { generateStyleScopedClasses } from '../template/styleScopedClasses';
 import type { ScriptCodegenContext } from './context';
 import { codeFeatures, type ScriptCodegenOptions } from './index';
-import { generateInternalComponent } from './internalComponent';
 
 export function* generateTemplateCtx(
  options: ScriptCodegenOptions,
@@ -93,7 +92,7 @@ export function* generateTemplate(
  options: ScriptCodegenOptions,
  ctx: ScriptCodegenContext,
  isClassComponent: boolean
-): Generator<Code> {
+): Generator<Code, TemplateCodegenContext | undefined> {
  ctx.generatedTemplate = true;
 
  if (!options.vueCompilerOptions.skipTemplateCodegen) {
@@ -104,15 +103,17 @@ export function* generateTemplate(
  yield* generateTemplateCtx(options, isClassComponent);
  yield* generateTemplateComponents(options);
  yield* generateTemplateBody(options, templateCodegenCtx);
- yield* generateInternalComponent(options, ctx, templateCodegenCtx);
+ return templateCodegenCtx;
  }
  else {
  const templateUsageVars = [...getTemplateUsageVars(options, ctx)];
  yield `// @ts-ignore${newLine}`;
  yield `[${templateUsageVars.join(', ')}]${newLine}`;
- yield `const __VLS_templateSlots = {}${endOfLine}`;
- yield `const __VLS_templateRefs = {}${endOfLine}`;
- yield `const __VLS_templateAttrs = {}${endOfLine}`;
+ yield `return {${newLine}`;
+ yield ` slots: {},${newLine}`;
+ yield ` refs: {},${newLine}`;
+ yield ` attrs: {},${newLine}`;
+ yield `}${endOfLine}`;
  }
 }
 
@@ -164,9 +165,11 @@ function* generateTemplateBody(
  }
  }
 
- yield `const __VLS_templateSlots = ${options.scriptSetupRanges?.slots.name ?? '__VLS_slots'}${endOfLine}`;
- yield `const __VLS_templateRefs = $refs${endOfLine}`;
- yield `const __VLS_templateAttrs = {} as Partial<typeof __VLS_inheritedAttrs>${endOfLine}`;
+ yield `return {${newLine}`;
+ yield ` slots: ${options.scriptSetupRanges?.slots.name ?? '__VLS_slots'},${newLine}`;
+ yield ` refs: $refs,${newLine}`;
+ yield ` attrs: {} as Partial<typeof __VLS_inheritedAttrs>,${newLine}`;
+ yield `}${endOfLine}`;
 }
 
 export function* generateCssClassProperty(

diff --git a/packages/language-core/lib/codegen/template/index.ts b/packages/language-core/lib/codegen/template/index.ts
@@ -68,7 +68,7 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
  yield `: ${varName},${newLine}`;
  }
  yield `}${endOfLine}`;
- yield `declare var $refs: typeof __VLS_refs${endOfLine}`;
+ yield `var $refs!: typeof __VLS_refs${endOfLine}`;
  }
 
  function* generateSlotsType(): Generator<Code> {

diff --git a/packages/tsc/tests/__snapshots__/dts.spec.ts.snap b/packages/tsc/tests/__snapshots__/dts.spec.ts.snap
@@ -633,26 +633,26 @@ export {};
 `;
 
 exports[`vue-tsc-dts > Input: template-slots/component.vue, Output: template-slots/component.vue.d.ts 1`] = `
-"declare var __VLS_0: {};
-declare var __VLS_1: {
- num: number;
-};
-declare var __VLS_2: {
- str: string;
-};
-declare var __VLS_3: {
- num: number;
- str: string;
-};
-declare const __VLS_templateSlots: {
- "no-bind"?(_: typeof __VLS_0): any;
- default?(_: typeof __VLS_1): any;
- "named-slot"?(_: typeof __VLS_2): any;
- vbind?(_: typeof __VLS_3): any;
+"declare function __VLS_template(): {
+ slots: {
+  "no-bind"?(_: {}): any;
+ default?(_: {
+ num: number;
+  }): any;
+ "named-slot"?(_: {
+ str: string;
+  }): any;
+  vbind?(_: {
+ num: number;
+ str: string;
+  }): any;
+ };
+ refs: {};
+ attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateSlots;
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
  new (): {
@@ -664,34 +664,38 @@ type __VLS_WithTemplateSlots<T, S> = T & {
 
 exports[`vue-tsc-dts > Input: template-slots/component-define-slots.vue, Output: template-slots/component-define-slots.vue.d.ts 1`] = `
 "import { VNode } from 'vue';
-declare const __VLS_templateSlots: Readonly<{
- default: (props: {
- num: number;
- }) => VNode[];
- 'named-slot': (props: {
- str: string;
- }) => VNode[];
- vbind: (props: {
- num: number;
- str: string;
- }) => VNode[];
- 'no-bind': () => VNode[];
-}> & {
- default: (props: {
- num: number;
- }) => VNode[];
- 'named-slot': (props: {
- str: string;
- }) => VNode[];
- vbind: (props: {
- num: number;
- str: string;
- }) => VNode[];
- 'no-bind': () => VNode[];
+declare function __VLS_template(): {
+ slots: Readonly<{
+ default: (props: {
+ num: number;
+ }) => VNode[];
+ 'named-slot': (props: {
+ str: string;
+ }) => VNode[];
+ vbind: (props: {
+ num: number;
+ str: string;
+ }) => VNode[];
+ 'no-bind': () => VNode[];
+ }> & {
+ default: (props: {
+ num: number;
+ }) => VNode[];
+ 'named-slot': (props: {
+ str: string;
+ }) => VNode[];
+ vbind: (props: {
+ num: number;
+ str: string;
+ }) => VNode[];
+ 'no-bind': () => VNode[];
+ };
+ refs: {};
+ attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateSlots;
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
  new (): {
@@ -702,18 +706,22 @@ type __VLS_WithTemplateSlots<T, S> = T & {
 `;
 
 exports[`vue-tsc-dts > Input: template-slots/component-destructuring.vue, Output: template-slots/component-destructuring.vue.d.ts 1`] = `
-"declare const __VLS_templateSlots: Readonly<{
- bottom: (props: {
- num: number;
- }) => any[];
-}> & {
- bottom: (props: {
- num: number;
- }) => any[];
+"declare function __VLS_template(): {
+ slots: Readonly<{
+ bottom: (props: {
+ num: number;
+ }) => any[];
+ }> & {
+ bottom: (props: {
+ num: number;
+ }) => any[];
+ };
+ refs: {};
+ attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateSlots;
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
  new (): {
@@ -724,26 +732,26 @@ type __VLS_WithTemplateSlots<T, S> = T & {
 `;
 
 exports[`vue-tsc-dts > Input: template-slots/component-no-script.vue, Output: template-slots/component-no-script.vue.d.ts 1`] = `
-"declare var __VLS_0: {};
-declare var __VLS_1: {
- num: number;
-};
-declare var __VLS_2: {
- str: string;
-};
-declare var __VLS_3: {
- num: number;
- str: string;
-};
-declare const __VLS_templateSlots: {
- "no-bind"?(_: typeof __VLS_0): any;
- default?(_: typeof __VLS_1): any;
- "named-slot"?(_: typeof __VLS_2): any;
- vbind?(_: typeof __VLS_3): any;
+"declare function __VLS_template(): {
+ slots: {
+  "no-bind"?(_: {}): any;
+ default?(_: {
+ num: number;
+  }): any;
+ "named-slot"?(_: {
+ str: string;
+  }): any;
+  vbind?(_: {
+ num: number;
+ str: string;
+  }): any;
+ };
+ refs: {};
+ attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateSlots;
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
  new (): {