From 786b0a29efd5eade3fbcc9c19c09c832f212adce Mon Sep 17 00:00:00 2001
From: Gautier Ben Aim <benaim.gautier@gmail.com>
Date: Mon, 21 Oct 2024 12:49:56 +0200
Subject: [PATCH] feat(svelte2tsx): autotype `const load = ...` declarations

---
 .../sveltekit-autotypings-arrow/$types.d.ts   |  9 +++++++++
 .../sveltekit-autotypings-arrow/+page.svelte  |  3 +++
 .../sveltekit-autotypings-arrow/+page.ts      |  8 ++++++++
 .../expectedv2.json                           | 19 +++++++++++++++++++
 .../sveltekit-autotypings-arrow/input.svelte  |  5 +++++
 packages/svelte2tsx/src/helpers/sveltekit.ts  | 12 ++++++++++++
 6 files changed, 56 insertions(+)
 create mode 100644 packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/sveltekit-autotypings-arrow/$types.d.ts
 create mode 100644 packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/sveltekit-autotypings-arrow/+page.svelte
 create mode 100644 packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/sveltekit-autotypings-arrow/+page.ts
 create mode 100644 packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/sveltekit-autotypings-arrow/expectedv2.json
 create mode 100644 packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/sveltekit-autotypings-arrow/input.svelte

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
new file mode 100644
index 000000000..1cf487157
--- /dev/null
+++ 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
new file mode 100644
index 000000000..907f4b2f7
--- /dev/null
+++ 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
new file mode 100644
index 000000000..326fc309b
--- /dev/null
+++ 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
new file mode 100644
index 000000000..29de9ea9a
--- /dev/null
+++ 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
new file mode 100644
index 000000000..5245cb935
--- /dev/null
+++ 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
index 92456d187..9fc804c88 100644
--- 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