feat: add template-ref

vuejs · johnsoncodehk · Aug 25, 2024 · Aug 5, 2024 · Aug 9, 2024 · Aug 9, 2024
commit 31c8350966f3f477644f6f052ff5b06db8f10ea8
diff --git a/packages/language-core/lib/codegen/script/component.ts b/packages/language-core/lib/codegen/script/component.ts
@@ -36,6 +36,7 @@ export function* generateComponent(
 	if (options.sfc.script && options.scriptRanges) {
 		yield* generateScriptOptions(options.sfc.script, options.scriptRanges);
 	}
+	yield `__typeRefs: {} as __VLS_Refs,${newLine}`
 	yield `})`;
 }
 

diff --git a/packages/language-core/lib/codegen/script/globalTypes.ts b/packages/language-core/lib/codegen/script/globalTypes.ts
@@ -129,6 +129,14 @@ declare global {
 		>
 	>;
 	type __VLS_PrettifyGlobal<T> = { [K in keyof T]: T[K]; } & {};
+	type __VLS_PickRefsExpose<T> = T extends object
+		? { [K in keyof T]: 'expose' extends keyof T[K] 
+		// @ts-ignore
+		? Parameters<T[K]['expose']>[0] | null 
+    : T[K] extends any[]
+    ? Parameters<T[K][0]['expose']>[0][]
+    : T[K] }
+    : never;
 }
 export const __VLS_globalTypesEnd = {};
 `;

diff --git a/packages/language-core/lib/codegen/script/internalComponent.ts b/packages/language-core/lib/codegen/script/internalComponent.ts
@@ -29,7 +29,7 @@ export function* generateInternalComponent(
 		]) {
 			for (const expose of bindings) {
 				const varName = content.substring(expose.start, expose.end);
-				if (!templateUsageVars.has(varName) && !templateCodegenCtx.accessExternalVariables.has(varName)) {
+				if ((!templateUsageVars.has(varName) && !templateCodegenCtx.accessExternalVariables.has(varName)) || options.scriptSetupRanges.templateRefs.some(ref => ref.name == varName)) {
 					continue;
 				}
 				const templateOffset = options.getGeneratedLength();

diff --git a/packages/language-core/lib/codegen/script/scriptSetup.ts b/packages/language-core/lib/codegen/script/scriptSetup.ts
@@ -67,7 +67,7 @@ export function* generateScriptSetup(
 			+ `			props: ${ctx.helperTypes.Prettify.name}<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: ReturnType<typeof __VLS_template>,${newLine}`
+			+ `			slots: ReturnType<typeof __VLS_template>['slots'],${newLine}`
 			+ `			emit: ${emitTypes.join(' & ')},${newLine}`
 			+ `		}${endOfLine}`;
 		yield `	})(),${newLine}`; // __VLS_setup = (async () => {
@@ -211,6 +211,11 @@ function* generateSetupFunction(
 			]);
 		}
 	}
+	for (const { define } of scriptSetupRanges.templateRefs) {
+		if (define?.arg) {
+			setupCodeModifies.push([[`<__VLS_Refs[${scriptSetup.content.slice(define.arg.start, define.arg.end)}], keyof __VLS_Refs>`], define.arg.start - 1, define.arg.start - 1]);
+		}
+	}
 	setupCodeModifies = setupCodeModifies.sort((a, b) => a[1] - b[1]);
 
 	if (setupCodeModifies.length) {
@@ -242,6 +247,8 @@ function* generateSetupFunction(
 
 	yield* generateComponentProps(options, ctx, scriptSetup, scriptSetupRanges, definePropMirrors);
 	yield* generateModelEmits(options, scriptSetup, scriptSetupRanges);
+	yield* generateRefsType(options, scriptSetupRanges);
+
 	yield* generateTemplate(options, ctx, false);
 
 	if (syntax) {
@@ -250,7 +257,7 @@ function* generateSetupFunction(
 			yield* generateComponent(options, ctx, scriptSetup, scriptSetupRanges);
 			yield endOfLine;
 			yield `${syntax} `;
-			yield `{} as ${ctx.helperTypes.WithTemplateSlots.name}<typeof __VLS_component, ReturnType<typeof __VLS_template>>${endOfLine}`;
+			yield `{} as ${ctx.helperTypes.WithTemplateSlots.name}<typeof __VLS_component, ReturnType<typeof __VLS_template>['slots']>${endOfLine}`;
 		}
 		else {
 			yield `${syntax} `;
@@ -423,3 +430,14 @@ function* generateDefinePropType(scriptSetup: NonNullable<Sfc['scriptSetup']>, p
 		yield `any`;
 	}
 }
+
+function* generateRefsType(options: ScriptCodegenOptions, scriptSetupRanges: ScriptSetupRanges) {
+	yield `type __VLS_TypeRefs = import('${options.vueCompilerOptions.lib}').UnwrapRef<{${newLine}`;
+	for (const { name } of scriptSetupRanges.templateRefs) {
+		if (name) {
+			yield `${name}: typeof ${name}${newLine}`;
+		}
+	}
+	yield `}>${newLine}`;
+	yield `type __VLS_Refs = ReturnType<typeof __VLS_template>['refs']${endOfLine}`;
+}
diff --git a/packages/language-core/lib/codegen/script/template.ts b/packages/language-core/lib/codegen/script/template.ts
@@ -109,7 +109,7 @@ function* generateCtx(
 		}
 		yield `}`;
 	}
-	yield endOfLine;
+	yield ` & __VLS_TypeRefs & { $refs: __VLS_TypeRefs }${endOfLine}`;
 }
 
 function* generateTemplateContext(
@@ -154,10 +154,14 @@ function* generateTemplateContext(
 		yield `// no template${newLine}`;
 		if (!options.scriptSetupRanges?.slots.define) {
 			yield `const __VLS_slots = {}${endOfLine}`;
+			yield `const __VLS_refs = {}${endOfLine}`;
 		}
 	}
 
-	yield `return ${options.scriptSetupRanges?.slots.name ?? '__VLS_slots'}${endOfLine}`;
+	yield `return {${newLine}`;
+	yield `slots: ${options.scriptSetupRanges?.slots.name ?? '__VLS_slots'},${newLine}`;
+	yield `refs: __VLS_refs as __VLS_PickRefsExpose<typeof __VLS_refs>,${newLine}`;
+	yield `}${endOfLine}`;
 }
 
 function* generateCssClassProperty(

diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts
@@ -258,13 +258,26 @@ export function* generateComponent(
 		yield endOfLine;
 	}
 
-	yield* generateVScope(options, ctx, node, props);
+	const refName = yield* generateVScope(options, ctx, node, props);
 
 	ctx.usedComponentCtxVars.add(componentCtxVar);
 	const usedComponentEventsVar = yield* generateElementEvents(options, ctx, node, var_functionalComponent, var_componentInstance, var_componentEmit, var_componentEvents);
 
 	if (var_defineComponentCtx && ctx.usedComponentCtxVars.has(var_defineComponentCtx)) {
 		yield `const ${componentCtxVar} = __VLS_nonNullable(__VLS_pickFunctionalComponentCtx(${var_originalComponent}, ${var_componentInstance}))${endOfLine}`;
+		if (refName) {
+			yield `// @ts-ignore${newLine}`;
+			if (node.codegenNode?.type === CompilerDOM.NodeTypes.VNODE_CALL
+				&& node.codegenNode.props?.type === CompilerDOM.NodeTypes.JS_OBJECT_EXPRESSION
+				&& node.codegenNode.props.properties.find(({ key }) => key.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && key.content === 'ref_for')
+			) {
+				yield `(${refName} ??= []).push(${var_defineComponentCtx})`;
+			} else {
+				yield `${refName} = ${var_defineComponentCtx}`;
+			}
+
+			yield endOfLine;
+		}
 	}
 	if (usedComponentEventsVar) {
 		yield `let ${var_componentEmit}!: typeof ${componentCtxVar}.emit${endOfLine}`;
@@ -340,7 +353,17 @@ export function* generateElement(
 		yield endOfLine;
 	}
 
-	yield* generateVScope(options, ctx, node, node.props);
+	const refName = yield* generateVScope(options, ctx, node, node.props);
+	if (refName) {
+		yield `// @ts-ignore${newLine}`;
+		yield `${refName} = __VLS_intrinsicElements`;
+		yield* generatePropertyAccess(
+			options,
+			ctx,
+			node.tag
+		);
+		yield endOfLine;
+	}
 
 	const slotDir = node.props.find(p => p.type === CompilerDOM.NodeTypes.DIRECTIVE && p.name === 'slot') as CompilerDOM.DirectiveNode;
 	if (slotDir && componentCtxVar) {
@@ -380,13 +403,14 @@ function* generateVScope(
 	}
 
 	yield* generateElementDirectives(options, ctx, node);
-	yield* generateReferencesForElements(options, ctx, node); // <el ref="foo" />
+	const refName = yield* generateReferencesForElements(options, ctx, node); // <el ref="foo" />
 	yield* generateReferencesForScopedCssClasses(ctx, node);
 
 	if (inScope) {
 		yield `}${newLine}`;
 		ctx.blockConditions.length = originalConditionsNum;
 	}
+	return refName;
 }
 
 export function getCanonicalComponentName(tagText: string) {
@@ -554,6 +578,10 @@ function* generateReferencesForElements(
 				')'
 			);
 			yield endOfLine;
+
+			const refName = CompilerDOM.toValidAssetId(prop.value.content, '_VLS_refs' as any);
+			options.templateRefNames.set(prop.value.content, refName);
+			return refName;
 		}
 	}
 }

diff --git a/packages/language-core/lib/codegen/template/index.ts b/packages/language-core/lib/codegen/template/index.ts
@@ -14,6 +14,7 @@ export interface TemplateCodegenOptions {
 	template: NonNullable<Sfc['template']>;
 	scriptSetupBindingNames: Set<string>;
 	scriptSetupImportComponentNames: Set<string>;
+	templateRefNames: Map<string, string>;
 	hasDefineSlots?: boolean;
 	slotsAssignName?: string;
 	propsAssignName?: string;
@@ -45,8 +46,21 @@ export function* generateTemplate(options: TemplateCodegenOptions): Generator<Co
 
 	yield* ctx.generateAutoImportCompletion();
 
+	yield* generateRefs()
+
 	return ctx;
 
+	function* generateRefs(): Generator<Code>{
+		for (const [, validId] of options.templateRefNames) {
+			yield `let ${validId}${newLine}`;
+		}
+		yield `const __VLS_refs = {${newLine}`;
+		for (const [name, validId] of options.templateRefNames) {
+			yield `'${name}': ${validId}!,${newLine}`;
+		}
+		yield `}${endOfLine}`;
+	}
+
 	function* generateSlotsType(): Generator<Code> {
 		for (const { expVar, varName } of ctx.dynamicSlots) {
 			ctx.hasSlot = true;

diff --git a/packages/language-core/lib/parsers/scriptSetupRanges.ts b/packages/language-core/lib/parsers/scriptSetupRanges.ts
@@ -107,6 +107,7 @@ export function parseScriptSetupRanges(
 		expose,
 		defineProp,
 		options,
+		templateRefs,
 	};
 
 	function _getStartEnd(node: ts.Node) {
@@ -293,9 +294,17 @@ export function parseScriptSetupRanges(
 					}
 				}
 			} else if (vueCompilerOptions.macros.templateRef.includes(callText)) {
+				const define = parseDefineFunction(node);
+				if (node.arguments.length) {
+					define.arg = _getStartEnd(node.arguments[0]);
+				}
+				let name;
+				if (ts.isVariableDeclaration(parent)) {
+					name = getNodeText(ts, parent.name, ast);
+				}
 				templateRefs.push({
-					name: ts.isVariableDeclaration(parent) ? getNodeText(ts, parent.name, ast) : undefined,
-					define: parseDefineFunction(node)
+					name,
+					define
 				});
 			}
 		}

diff --git a/packages/language-core/lib/plugins/vue-tsx.ts b/packages/language-core/lib/plugins/vue-tsx.ts
@@ -94,6 +94,7 @@ function createTsx(
 			template: _sfc.template,
 			scriptSetupBindingNames: scriptSetupBindingNames(),
 			scriptSetupImportComponentNames: scriptSetupImportComponentNames(),
+			templateRefNames: new Map(),
 			hasDefineSlots: hasDefineSlots(),
 			slotsAssignName: slotsAssignName(),
 			propsAssignName: propsAssignName(),