feat(svelte2tsx): autotype const load = ... declarations (#2540)

GauBen · web-flow · commit 77c9ccfaab3b · 2024-10-31T10:45:30.000+01:00
diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/sveltekit-autotypings-arrow/$types.d.ts b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/sveltekit-autotypings-arrow/$types.d.ts
@@ -0,0 +1,9 @@
+export interface PageLoadEvent<> {
+    test: {
+        exists: boolean;
+    };
+}
+
+export type PageLoad<OutputData = Record<string, any>> = (event: PageLoadEvent) => OutputData;
+
+export type PageData = ReturnType<typeof import('./+page').load>;
diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/sveltekit-autotypings-arrow/+page.svelte b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/sveltekit-autotypings-arrow/+page.svelte
@@ -0,0 +1,3 @@
+<script lang="ts">
+    export let data;
+</script>
diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/sveltekit-autotypings-arrow/+page.ts b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/sveltekit-autotypings-arrow/+page.ts
@@ -0,0 +1,8 @@
+// In a real SvelteKit application, $types are autogenerated, for this test we manually create them to our liking
+// @ts-expect-error - to silence tsc
+export const load = decorator((event) => event.test);
+
+// Dummy decorator function, to open the door to SvelteKit extensions
+function decorator<T>(fn: T): T {
+    return fn;
+}
diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/sveltekit-autotypings-arrow/expectedv2.json b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/sveltekit-autotypings-arrow/expectedv2.json
@@ -0,0 +1,19 @@
+[
+    {
+        "range": {
+            "start": {
+                "line": 4,
+                "character": 1
+            },
+            "end": {
+                "line": 4,
+                "character": 5
+            }
+        },
+        "severity": 1,
+        "source": "ts",
+        "message": "Property 'data' is missing in type '{}' but required in type '{ data: { exists: boolean; }; }'.",
+        "code": 2741,
+        "tags": []
+    }
+]
diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/sveltekit-autotypings-arrow/input.svelte b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/sveltekit-autotypings-arrow/input.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import Page from './+page.svelte';
+</script>
+
+<Page />
diff --git a/packages/svelte2tsx/src/helpers/sveltekit.ts b/packages/svelte2tsx/src/helpers/sveltekit.ts
@@ -160,6 +160,18 @@ function upsertKitRouteFile(
         );
 
         insert(pos, inserted);
+    } else if (load?.type === 'var' && !load.hasTypeDefinition) {
+        // "const load = ..." will be transformed into
+        // "const load = (...) satisfies PageLoad"
+        insert(load.node.initializer.getStart(), surround('('));
+        insert(
+            load.node.initializer.getEnd(),
+            surround(
+                `) satisfies import('./$types.js').${basename.includes('layout') ? 'Layout' : 'Page'}${
+                    basename.includes('server') ? 'Server' : ''
+                }Load`
+            )
+        );
     }
 
     // add type to entries function if not explicitly typed

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<script lang="ts">`
	`2`	`+ export let data;`
	`3`	`+</script>`