feat: build cli types during docs sync (#1882)

* feat: build cli repo types during docs sync for twoslash support

* rmv TODO JYC as we have no error anymore

* pnpm i

* patch types of svelte & kit

* no need comment!

Author: jycouet

apps/svelte.dev/package.json

@@ -57,6 +57,7 @@
 		"@sveltejs/enhanced-img": "^0.10.3",
 		"@sveltejs/kit": "^2.53.2",
 		"@sveltejs/site-kit": "workspace:*",
+		"@sveltejs/sv-utils": "^0.0.3",
 		"@sveltejs/vite-plugin-svelte": "^7.0.0",
 		"@types/node": "^20.19.33",
 		"browserslist": "^4.28.1",
@@ -73,7 +74,7 @@
 		"prettier-plugin-svelte": "^3.5.0",
 		"satori": "^0.19.2",
 		"satori-html": "^0.3.2",
-		"sv": "^0.12.2",
+		"sv": "^0.12.8",
 		"svelte": "^5.53.5",
 		"svelte-check": "^4.4.3",
 		"svelte-preprocess": "^6.0.3",

apps/svelte.dev/scripts/sync-docs/index.ts

@@ -9,7 +9,7 @@ import ts from 'typescript';
 import glob from 'tiny-glob/sync.js';
 import chokidar from 'chokidar';
 import { fileURLToPath } from 'node:url';
-import { clone_repo, migrate_meta_json } from './utils.ts';
+import { clone_repo, invoke, migrate_meta_json } from './utils.ts';
 import { get_types, read_d_ts_file, read_types } from './types.ts';
 import type { Modules } from '@sveltejs/site-kit/markdown';
 import { generate_crosslinks } from './crosslinks.ts';
@@ -24,6 +24,7 @@ interface Package {
 	docs: string;
 	types: string | null;
 	process_modules?: (modules: Modules, pkg: Package) => Promise<Modules>;
+	post_clone?: (dir: string) => Promise<void>;
 }
 
 const get_trigger = (pkg: Package) => pkg.trigger ?? pkg.name;
@@ -79,6 +80,26 @@ const get_downstream_repo = (name: string) => {
 	return `${owner}/${downstream}`;
 };
 
+function patch_node_modules(
+	cloned_dir: string,
+	pkg_subdir: string,
+	npm_name: string,
+	onlyDirs?: string[]
+) {
+	const source = path.join(cloned_dir, pkg_subdir);
+	const target = path.join(dirname, '../../node_modules', npm_name);
+	if (onlyDirs) {
+		for (const dir of onlyDirs) {
+			const t = path.join(target, dir);
+			fs.rmSync(t, { recursive: true, force: true });
+			fs.cpSync(path.join(source, dir), t, { recursive: true });
+		}
+	} else {
+		fs.rmSync(target, { force: true });
+		fs.symlinkSync(source, target);
+	}
+}
+
 const packages: Package[] = [
 	{
 		name: 'svelte',
@@ -87,6 +108,9 @@ const packages: Package[] = [
 		pkg: 'packages/svelte',
 		docs: 'documentation/docs',
 		types: 'types',
+		post_clone: async (dir) => {
+			patch_node_modules(dir, 'packages/svelte', 'svelte', ['types']);
+		},
 		process_modules: async (modules: Modules) => {
 			// Remove $$_attributes from ActionReturn
 			const module_with_ActionReturn = modules.find((m) =>
@@ -111,6 +135,9 @@ const packages: Package[] = [
 		pkg: 'packages/kit',
 		docs: 'documentation/docs',
 		types: 'types',
+		post_clone: async (dir) => {
+			patch_node_modules(dir, 'packages/kit', '@sveltejs/kit', ['types']);
+		},
 		process_modules: async (modules, pkg) => {
 			const kit_base = `${REPOS}/${pkg.name}/${pkg.pkg}/`;
 
@@ -170,7 +197,14 @@ const packages: Package[] = [
 		branch: branches['cli']?.branch ?? 'main',
 		pkg: 'packages/sv',
 		docs: 'documentation/docs',
-		types: null
+		types: null,
+		post_clone: async (dir) => {
+			await invoke('npx', ['pnpm@10', 'install'], { cwd: dir });
+			await invoke('npx', ['pnpm@10', 'build'], { cwd: dir });
+
+			patch_node_modules(dir, 'packages/sv', 'sv');
+			patch_node_modules(dir, 'packages/sv-utils', '@sveltejs/sv-utils');
+		}
 	},
 	{
 		name: 'ai',
@@ -213,6 +247,9 @@ if (parsed.values.pull) {
 
 	for (const pkg of filtered) {
 		await clone_repo(`https://github.com/${pkg.repo}.git`, pkg.name, pkg.branch, REPOS);
+		if (pkg.post_clone) {
+			await pkg.post_clone(`${REPOS}/${pkg.name}`);
+		}
 	}
 }
 

packages/site-kit/src/lib/markdown/renderer.ts

@@ -1115,7 +1115,7 @@ async function syntax_highlight({
 									compilerOptions: {
 										allowJs: true,
 										checkJs: true,
-										types: ['svelte', '@sveltejs/kit', 'sv']
+										types: ['svelte', '@sveltejs/kit', 'sv', '@sveltejs/sv-utils']
 									}
 								},
 								// by default, twoslash does not run on .js files, change that through this option