fix: add Sveltekit snippets for Svelte 5 (#2548)

--------- Co-authored-by: Alexandre Oger <[email protected]> Co-authored-by: Simon H <[email protected]>
sveltejs · Oct 28, 2024 · 02847e0 · 02847e0
1 parent 156bd7d
commit 02847e0
Show file tree

Hide file tree

Showing 11 changed files with 254 additions and 98 deletions.
diff --git a/packages/svelte-vscode/src/sveltekit/generateFiles/index.ts b/packages/svelte-vscode/src/sveltekit/generateFiles/index.ts
@@ -3,7 +3,7 @@ import { commands, ExtensionContext, ProgressLocation, Uri, window, workspace }
 import { addResourceCommandMap } from './commands';
 import { generateResources } from './generate';
 import { resourcesMap } from './resources';
-import { FileType, ResourceType, GenerateConfig, CommandType } from './types';
+import { FileType, ResourceType, GenerateConfig, CommandType, ProjectType } from './types';
 import { checkProjectType } from '../utils';
 
 class GenerateError extends Error {}
@@ -126,14 +126,18 @@ async function getCommonConfig(uri: Uri | undefined) {
     }
 
     const type = await checkProjectType(rootPath);
-    const scriptExtension = type === 'js' ? 'js' : 'ts';
+    const scriptExtension = getScriptExtension(type);
     return {
         type,
         scriptExtension,
         rootPath
     } as const;
 }
 
+function getScriptExtension(type: ProjectType) {
+    return type === ProjectType.JS || type === ProjectType.JS_SV5 ? 'js' : 'ts';
+}
+
 function getRootPath(uri: Uri | undefined) {
     let rootPath!: string;
     if (uri) {

diff --git a/packages/svelte-vscode/src/sveltekit/generateFiles/templates/error.ts b/packages/svelte-vscode/src/sveltekit/generateFiles/templates/error.ts
@@ -1,21 +1,30 @@
-import { GenerateConfig } from '../types';
+import { GenerateConfig, ProjectType, Resource } from '../types';
 
-export default async function (config: GenerateConfig) {
-    const ts = `
-<script lang="ts">
+const defaultScriptTemplate = `
+<script>
     import { page } from '$app/stores';
 </script>
 
-<h1>{$page.status}: {$page.error?.message}</h1>
-    `.trim();
+<h1>{$page.status}: {$page.error.message}</h1>
+`;
 
-    const js = `
-<script>
+const tsScriptTemplate = `
+<script lang="ts">
     import { page } from '$app/stores';
 </script>
 
-<h1>{$page.status}: {$page.error.message}</h1>
-    `.trim();
+<h1>{$page.status}: {$page.error?.message}</h1>
+`;
+
+const scriptTemplate: ReadonlyMap<ProjectType, string> = new Map([
+    [ProjectType.TS_SV5, tsScriptTemplate],
+    [ProjectType.TS_SATISFIES_SV5, tsScriptTemplate],
+    [ProjectType.JS_SV5, defaultScriptTemplate],
+    [ProjectType.TS, tsScriptTemplate],
+    [ProjectType.TS_SATISFIES, tsScriptTemplate],
+    [ProjectType.JS, defaultScriptTemplate]
+]);
 
-    return config.type === 'js' ? js : ts;
+export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
+    return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
 }
diff --git a/packages/svelte-vscode/src/sveltekit/generateFiles/templates/layout-load.ts b/packages/svelte-vscode/src/sveltekit/generateFiles/templates/layout-load.ts
@@ -1,28 +1,37 @@
-import { GenerateConfig } from '../types';
+import { GenerateConfig, ProjectType, Resource } from '../types';
 
-export default async function (config: GenerateConfig) {
-    const ts = `
+const defaultScriptTemplate = `
+/** @type {import('./$types').LayoutLoad} */
+export async function load() {
+    return {};
+}
+`;
+
+const tsScriptTemplate = `
 import type { LayoutLoad } from './$types';
 
 export const load: LayoutLoad = async () => {
     return {};
 };
-    `.trim();
+`;
 
-    const tsSatisfies = `
+const tsSatisfiesScriptTemplate = `
 import type { LayoutLoad } from './$types';
 
 export const load = (async () => {
     return {};
 }) satisfies LayoutLoad;
-    `.trim();
+`;
 
-    const js = `
-/** @type {import('./$types').LayoutLoad} */
-export async function load() {
-    return {};
-}
-    `.trim();
+const scriptTemplate: ReadonlyMap<ProjectType, string> = new Map([
+    [ProjectType.TS_SV5, tsScriptTemplate],
+    [ProjectType.TS_SATISFIES_SV5, tsSatisfiesScriptTemplate],
+    [ProjectType.JS_SV5, defaultScriptTemplate],
+    [ProjectType.TS, tsScriptTemplate],
+    [ProjectType.TS_SATISFIES, tsSatisfiesScriptTemplate],
+    [ProjectType.JS, defaultScriptTemplate]
+]);
 
-    return config.type === 'js' ? js : config.type === 'ts' ? ts : tsSatisfies;
+export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
+    return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
 }
diff --git a/packages/svelte-vscode/src/sveltekit/generateFiles/templates/layout-server.ts b/packages/svelte-vscode/src/sveltekit/generateFiles/templates/layout-server.ts
@@ -1,28 +1,37 @@
-import { GenerateConfig } from '../types';
+import { GenerateConfig, ProjectType, Resource } from '../types';
 
-export default async function (config: GenerateConfig) {
-    const ts = `
+const defaultScriptTemplate = `
+/** @type {import('./$types').LayoutServerLoad} */
+export async function load() {
+    return {};
+}
+`;
+
+const tsScriptTemplate = `
 import type { LayoutServerLoad } from './$types';
 
 export const load: LayoutServerLoad = async () => {
     return {};
 };
-    `.trim();
+`;
 
-    const tsSatisfies = `
+const tsSatisfiesScriptTemplate = `
 import type { LayoutServerLoad } from './$types';
 
 export const load = (async () => {
     return {};
 }) satisfies LayoutServerLoad;
-    `.trim();
+`;
 
-    const js = `
-/** @type {import('./$types').LayoutServerLoad} */
-export async function load() {
-    return {};
-}
-    `.trim();
+const scriptTemplate: ReadonlyMap<ProjectType, string> = new Map([
+    [ProjectType.TS_SV5, tsScriptTemplate],
+    [ProjectType.TS_SATISFIES_SV5, tsSatisfiesScriptTemplate],
+    [ProjectType.JS_SV5, defaultScriptTemplate],
+    [ProjectType.TS, tsScriptTemplate],
+    [ProjectType.TS_SATISFIES, tsSatisfiesScriptTemplate],
+    [ProjectType.JS, defaultScriptTemplate]
+]);
 
-    return config.type === 'js' ? js : config.type === 'ts' ? ts : tsSatisfies;
+export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
+    return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
 }
diff --git a/packages/svelte-vscode/src/sveltekit/generateFiles/templates/layout.ts b/packages/svelte-vscode/src/sveltekit/generateFiles/templates/layout.ts
@@ -1,20 +1,44 @@
-import { GenerateConfig } from '../types';
+import { GenerateConfig, ProjectType, Resource } from '../types';
 
-export default async function (config: GenerateConfig) {
-    const ts = `
+const defaultScriptTemplate = `
+<script>
+    /** @type {import('./$types').LayoutData} */
+    export let data;
+</script>
+`;
+
+const tsSv5ScriptTemplate = `
+<script lang="ts">
+    import type { LayoutData } from './$types';
+    
+    let { data }: LayoutData = $props();
+</script>
+`;
+
+const tsScriptTemplate = `
 <script lang="ts">
     import type { LayoutData } from './$types';
     
     export let data: LayoutData;
 </script>
-    `.trim();
+`;
 
-    const js = `
+const jsSv5ScriptTemplate = `
 <script>
     /** @type {import('./$types').LayoutData} */
-    export let data;
+    let { data } = $props();
 </script>
-    `.trim();
+`;
+
+const scriptTemplate: ReadonlyMap<ProjectType, string> = new Map([
+    [ProjectType.TS_SV5, tsSv5ScriptTemplate],
+    [ProjectType.TS_SATISFIES_SV5, tsSv5ScriptTemplate],
+    [ProjectType.JS_SV5, jsSv5ScriptTemplate],
+    [ProjectType.TS, tsScriptTemplate],
+    [ProjectType.TS_SATISFIES, tsScriptTemplate],
+    [ProjectType.JS, defaultScriptTemplate]
+]);
 
-    return config.type === 'js' ? js : ts;
+export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
+    return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
 }
diff --git a/packages/svelte-vscode/src/sveltekit/generateFiles/templates/page-load.ts b/packages/svelte-vscode/src/sveltekit/generateFiles/templates/page-load.ts
@@ -1,28 +1,37 @@
-import { GenerateConfig } from '../types';
+import { GenerateConfig, ProjectType, Resource } from '../types';
 
-export default async function (config: GenerateConfig) {
-    const ts = `
+const defaultScriptTemplate = `
+/** @type {import('./$types').PageLoad} */
+export async function load() {
+    return {};
+};
+`;
+
+const tsScriptTemplate = `
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async () => {
     return {};
 };
-    `.trim();
+`;
 
-    const tsSatisfies = `
+const tsSatisfiesScriptTemplate = `
 import type { PageLoad } from './$types';
 
 export const load = (async () => {
     return {};
 }) satisfies PageLoad;
-    `.trim();
+`;
 
-    const js = `
-/** @type {import('./$types').PageLoad} */
-export async function load() {
-    return {};
-};
-    `.trim();
+const scriptTemplate: ReadonlyMap<ProjectType, string> = new Map([
+    [ProjectType.TS_SV5, tsScriptTemplate],
+    [ProjectType.TS_SATISFIES_SV5, tsSatisfiesScriptTemplate],
+    [ProjectType.JS_SV5, defaultScriptTemplate],
+    [ProjectType.TS, tsScriptTemplate],
+    [ProjectType.TS_SATISFIES, tsSatisfiesScriptTemplate],
+    [ProjectType.JS, defaultScriptTemplate]
+]);
 
-    return config.type === 'js' ? js : config.type === 'ts' ? ts : tsSatisfies;
+export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
+    return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
 }
diff --git a/packages/svelte-vscode/src/sveltekit/generateFiles/templates/page-server.ts b/packages/svelte-vscode/src/sveltekit/generateFiles/templates/page-server.ts
@@ -1,28 +1,37 @@
-import { GenerateConfig } from '../types';
+import { GenerateConfig, ProjectType, Resource } from '../types';
 
-export default async function (config: GenerateConfig) {
-    const ts = `
+const defaultScriptTemplate = `
+/** @type {import('./$types').PageServerLoad} */
+export async function load() {
+    return {};
+};
+`;
+
+const tsScriptTemplate = `
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async () => {
     return {};
 };
-    `.trim();
+`;
 
-    const tsSatisfies = `
+const tsSatisfiesScriptTemplate = `
 import type { PageServerLoad } from './$types';
 
 export const load = (async () => {
     return {};
 }) satisfies PageServerLoad;
-    `.trim();
+`;
 
-    const js = `
-/** @type {import('./$types').PageServerLoad} */
-export async function load() {
-    return {};
-};
-    `.trim();
+const scriptTemplate: ReadonlyMap<ProjectType, string> = new Map([
+    [ProjectType.TS_SV5, tsScriptTemplate],
+    [ProjectType.TS_SATISFIES_SV5, tsSatisfiesScriptTemplate],
+    [ProjectType.JS_SV5, defaultScriptTemplate],
+    [ProjectType.TS, tsScriptTemplate],
+    [ProjectType.TS_SATISFIES, tsSatisfiesScriptTemplate],
+    [ProjectType.JS, defaultScriptTemplate]
+]);
 
-    return config.type === 'js' ? js : config.type === 'ts' ? ts : tsSatisfies;
+export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
+    return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
 }
diff --git a/packages/svelte-vscode/src/sveltekit/generateFiles/templates/page.ts b/packages/svelte-vscode/src/sveltekit/generateFiles/templates/page.ts
@@ -1,20 +1,44 @@
-import { GenerateConfig } from '../types';
+import { GenerateConfig, ProjectType, Resource } from '../types';
 
-export default async function (config: GenerateConfig) {
-    const ts = `
+const defaultScriptTemplate = `
+<script>
+    /** @type {import('./$types').PageData} */
+    export let data;
+</script>
+`;
+
+const tsSv5ScriptTemplate = `
+<script lang="ts">
+    import type { PageData } from './$types';
+    
+    let { data }: PageData = $props();
+</script>
+`;
+
+const tsScriptTemplate = `
 <script lang="ts">
     import type { PageData } from './$types';
     
     export let data: PageData;
 </script>
-    `.trim();
+`;
 
-    const js = `
+const jsSv5ScriptTemplate = `
 <script>
     /** @type {import('./$types').PageData} */
-    export let data;
+    let { data } = $props();
 </script>
-    `.trim();
+`;
+
+const scriptTemplate: ReadonlyMap<ProjectType, string> = new Map([
+    [ProjectType.TS_SV5, tsSv5ScriptTemplate],
+    [ProjectType.TS_SATISFIES_SV5, tsSv5ScriptTemplate],
+    [ProjectType.JS_SV5, jsSv5ScriptTemplate],
+    [ProjectType.TS, tsScriptTemplate],
+    [ProjectType.TS_SATISFIES, tsScriptTemplate],
+    [ProjectType.JS, defaultScriptTemplate]
+]);
 
-    return config.type === 'js' ? js : ts;
+export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
+    return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
 }