fix: Update +error.svelte creation template in vscode extension (#2811)

* Update +error.svelte creation syntax (#2810)

* Add Svelte 5 variants to +error.svelte creation syntax template (#2810)

* Change withRunes to withProps in +error.svelte template

* Add withAppState option

* Change withRunes to withAppState in +error.svelte template

* Remove trailing comma

* Add type for withAppState

Author: olegpolin

packages/svelte-vscode/src/sveltekit/generateFiles/templates/error.ts

@@ -8,6 +8,14 @@ const defaultScriptTemplate = `
 <h1>{$page.status}: {$page.error.message}</h1>
 `;
 
+const jsSv5ScriptTemplateAppState = `
+<script>
+    import { page } from '$app/state';
+</script>
+
+<h1>{page.status}: {page.error.message}</h1>
+`;
+
 const tsScriptTemplate = `
 <script lang="ts">
     import { page } from '$app/stores';
@@ -16,12 +24,26 @@ const tsScriptTemplate = `
 <h1>{$page.status}: {$page.error?.message}</h1>
 `;
 
+const tsSv5ScriptTemplateAppState = `
+<script lang="ts">
+    import { page } from '$app/state';
+</script>
+
+<h1>{page.status}: {page.error?.message}</h1>
+`;
+
 export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
-    const { withTs } = config.kind;
+    const { withTs, withAppState } = config.kind;
     let template = defaultScriptTemplate;
 
-    if (withTs) {
+    if (withAppState && withTs) {
+        template = tsSv5ScriptTemplateAppState;
+    } else if (withAppState && !withTs) {
+        template = jsSv5ScriptTemplateAppState;
+    } else if (!withAppState && withTs) {
         template = tsScriptTemplate;
+    } else if (!withAppState && !withTs) {
+        template = defaultScriptTemplate;
     }
 
     return template.trim();

packages/svelte-vscode/src/sveltekit/generateFiles/types.ts

@@ -39,6 +39,7 @@ export interface GenerateConfig {
         withSatisfies: boolean;
         withRunes: boolean;
         withProps: boolean;
+        withAppState: boolean;
     };
     pageExtension: string;
     scriptExtension: string;

packages/svelte-vscode/src/sveltekit/utils.ts

@@ -47,6 +47,13 @@ export async function checkProjectKind(path: string): Promise<GenerateConfig['ki
         fallback: true
     });
 
+    let withAppState = atLeast({
+        packageName: '@sveltejs/kit',
+        versionMin: '2.12',
+        versionToCheck: svelteKitVersion ?? '',
+        fallback: true
+    });
+
     const withTs = !!tsconfig && (!jsconfig || tsconfig.length >= jsconfig.length);
     let withSatisfies = false;
     if (withTs) {
@@ -70,7 +77,8 @@ export async function checkProjectKind(path: string): Promise<GenerateConfig['ki
         withTs,
         withSatisfies,
         withRunes,
-        withProps
+        withProps,
+        withAppState
     };
 }