feat: convert integrations to TS (#13663)

10 files changed, 66 insertions, 50 deletions

diff --git a/packages/integrations/vue/context.js b/packages/integrations/vue/context.js
deleted file mode 100644
index 80a569ce6..000000000
--- a/packages/integrations/vue/context.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const contexts = new WeakMap();
-
-const ID_PREFIX = 'v';
-
-function getContext(rendererContextResult) {
-	if (contexts.has(rendererContextResult)) {
-		return contexts.get(rendererContextResult);
-	}
-	const ctx = {
-		currentIndex: 0,
-		get id() {
-			return ID_PREFIX + this.currentIndex.toString();
-		},
-	};
-	contexts.set(rendererContextResult, ctx);
-	return ctx;
-}
-
-export function incrementId(rendererContextResult) {
-	const ctx = getContext(rendererContextResult);
-	const id = ctx.id;
-	ctx.currentIndex++;
-	return id;
-}
diff --git a/packages/integrations/vue/env.d.ts b/packages/integrations/vue/env.d.ts
new file mode 100644
index 000000000..3a0052dca
--- /dev/null
+++ b/packages/integrations/vue/env.d.ts
@@ -0,0 +1,3 @@
+declare module 'virtual:@astrojs/vue/app' {
+	export const setup: (app: import('vue').App<Element>) => void | Promise<void>;
+}
\ No newline at end of file
diff --git a/packages/integrations/vue/package.json b/packages/integrations/vue/package.json
index 6b05637de..e113443b4 100644
--- a/packages/integrations/vue/package.json
+++ b/packages/integrations/vue/package.json
@@ -22,21 +22,15 @@
   "exports": {
     ".": "./dist/index.js",
     "./editor": "./dist/editor.cjs",
-    "./*": "./*",
-    "./client.js": "./client.js",
-    "./server.js": "./server.js",
+    "./client.js": "./dist/client.js",
+    "./server.js": "./dist/server.js",
     "./package.json": "./package.json"
   },
   "files": [
-    "dist",
-    "client.js",
-    "context.js",
-    "server.js",
-    "server.d.ts",
-    "static-html.js"
+    "dist"
   ],
   "scripts": {
-    "build": "astro-scripts build \"src/index.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist && tsc",
+    "build": "astro-scripts build \"src/**/*.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist && tsc",
     "build:ci": "astro-scripts build \"src/**/*.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist",
     "dev": "astro-scripts dev \"src/**/*.ts\"",
     "test": "astro-scripts test \"test/**/*.test.js\""
diff --git a/packages/integrations/vue/server.d.ts b/packages/integrations/vue/server.d.ts
deleted file mode 100644
index 75cc3eb64..000000000
--- a/packages/integrations/vue/server.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import type { NamedSSRLoadedRendererValue } from 'astro';
-
-declare const renderer: NamedSSRLoadedRendererValue;
-export default renderer;
diff --git a/packages/integrations/vue/client.js b/packages/integrations/vue/src/client.ts
index 4ec2b9e68..8f02d534e 100644
--- a/packages/integrations/vue/client.js
+++ b/packages/integrations/vue/src/client.ts
@@ -3,15 +3,23 @@ import { Suspense, createApp, createSSRApp, h } from 'vue';
 import StaticHtml from './static-html.js';
 
 // keep track of already initialized apps, so we don't hydrate again for view transitions
-let appMap = new WeakMap();
+let appMap = new WeakMap<
+	HTMLElement,
+	{ props: Record<string, any>; slots: Record<string, any>; component?: any }
+>();
 
-export default (element) =>
-	async (Component, props, slotted, { client }) => {
+export default (element: HTMLElement) =>
+	async (
+		Component: any,
+		props: Record<string, any>,
+		slotted: Record<string, any>,
+		{ client }: Record<string, string>,
+	) => {
 		if (!element.hasAttribute('ssr')) return;
 
 		// Expose name on host component for Vue devtools
 		const name = Component.name ? `${Component.name} Host` : undefined;
-		const slots = {};
+		const slots: Record<string, any> = {};
 		for (const [key, value] of Object.entries(slotted)) {
 			slots[key] = () => h(StaticHtml, { value, name: key === 'default' ? undefined : key });
 		}
@@ -30,8 +38,9 @@ export default (element) =>
 			const app = bootstrap({
 				name,
 				render() {
-					let content = h(Component, appInstance.props, appInstance.slots);
-					appInstance.component = this;
+					// At this point, appInstance has been set so it's safe to use a non-null assertion
+					let content = h(Component, appInstance!.props, appInstance!.slots);
+					appInstance!.component = this;
 					// related to https://github.com/withastro/astro/issues/6549
 					// if the component is async, wrap it in a Suspense component
 					if (isAsync(Component.setup)) {
@@ -40,7 +49,7 @@ export default (element) =>
 					return content;
 				},
 			});
-			app.config.idPrefix = element.getAttribute('prefix');
+			app.config.idPrefix = element.getAttribute('prefix') ?? undefined;
 			await setup(app);
 			app.mount(element, isHydrate);
 			appMap.set(element, appInstance);
@@ -52,7 +61,7 @@ export default (element) =>
 		}
 	};
 
-function isAsync(fn) {
+function isAsync(fn: () => any) {
 	const constructor = fn?.constructor;
 	return constructor && constructor.name === 'AsyncFunction';
 }
diff --git a/packages/integrations/vue/src/context.ts b/packages/integrations/vue/src/context.ts
new file mode 100644
index 000000000..833755044
--- /dev/null
+++ b/packages/integrations/vue/src/context.ts
@@ -0,0 +1,26 @@
+import type { SSRResult } from 'astro';
+
+const contexts = new WeakMap<SSRResult, { currentIndex: number; readonly id: string }>();
+
+const ID_PREFIX = 's';
+
+function getContext(rendererContextResult: SSRResult) {
+	if (contexts.has(rendererContextResult)) {
+		return contexts.get(rendererContextResult);
+	}
+	const ctx = {
+		currentIndex: 0,
+		get id() {
+			return ID_PREFIX + this.currentIndex.toString();
+		},
+	};
+	contexts.set(rendererContextResult, ctx);
+	return ctx;
+}
+
+export function incrementId(rendererContextResult: SSRResult) {
+	const ctx = getContext(rendererContextResult)!;
+	const id = ctx.id;
+	ctx.currentIndex++;
+	return id;
+}
diff --git a/packages/integrations/vue/server.js b/packages/integrations/vue/src/server.ts
index 315909087..6b4c2a3f4 100644
--- a/packages/integrations/vue/server.js
+++ b/packages/integrations/vue/src/server.ts
@@ -1,21 +1,29 @@
 import { setup } from 'virtual:@astrojs/vue/app';
+import type { AstroComponentMetadata } from 'astro';
 import { createSSRApp, h } from 'vue';
 import { renderToString } from 'vue/server-renderer';
 import { incrementId } from './context.js';
 import StaticHtml from './static-html.js';
+import type { RendererContext } from './types.js';
 
-function check(Component) {
+function check(Component: any) {
 	return !!Component['ssrRender'] || !!Component['__ssrInlineRender'];
 }
 
-async function renderToStaticMarkup(Component, inputProps, slotted, metadata) {
+async function renderToStaticMarkup(
+	this: RendererContext,
+	Component: any,
+	inputProps: Record<string, any>,
+	slotted: Record<string, any>,
+	metadata: AstroComponentMetadata,
+) {
 	let prefix;
 	if (this && this.result) {
 		prefix = incrementId(this.result);
 	}
 	const attrs = { prefix };
 
-	const slots = {};
+	const slots: Record<string, any> = {};
 	const props = { ...inputProps };
 	delete props.slot;
 	for (const [key, value] of Object.entries(slotted)) {
diff --git a/packages/integrations/vue/static-html.js b/packages/integrations/vue/src/static-html.ts
index 689b56a70..689b56a70 100644
--- a/packages/integrations/vue/static-html.js
+++ b/packages/integrations/vue/src/static-html.ts
diff --git a/packages/integrations/vue/src/types.ts b/packages/integrations/vue/src/types.ts
new file mode 100644
index 000000000..5dff5b0b4
--- /dev/null
+++ b/packages/integrations/vue/src/types.ts
@@ -0,0 +1,4 @@
+import type { SSRResult } from 'astro';
+export type RendererContext = {
+	result: SSRResult;
+};
diff --git a/packages/integrations/vue/tsconfig.json b/packages/integrations/vue/tsconfig.json
index 5742d1f6e..100f3c93b 100644
--- a/packages/integrations/vue/tsconfig.json
+++ b/packages/integrations/vue/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "extends": "../../../tsconfig.base.json",
-  "include": ["src"],
+  "include": ["src", "env.d.ts"],
   "compilerOptions": {
     "outDir": "./dist",
     "verbatimModuleSyntax": false