Skip to content

Commit 02847e0

Browse files
nielkAlexandre Ogerdummdidumm
authored
fix: add Sveltekit snippets for Svelte 5 (#2548)
 --------- Co-authored-by: Alexandre Oger <[email protected]> Co-authored-by: Simon H <[email protected]>
1 parent 156bd7d commit 02847e0

File tree

11 files changed

+254
-98
lines changed

11 files changed

+254
-98
lines changed

‎packages/svelte-vscode/src/sveltekit/generateFiles/index.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { commands, ExtensionContext, ProgressLocation, Uri, window, workspace }
33
import { addResourceCommandMap } from './commands';
44
import { generateResources } from './generate';
55
import { resourcesMap } from './resources';
6-
import { FileType, ResourceType, GenerateConfig, CommandType } from './types';
6+
import { FileType, ResourceType, GenerateConfig, CommandType, ProjectType } from './types';
77
import { checkProjectType } from '../utils';
88

99
class GenerateError extends Error {}
@@ -126,14 +126,18 @@ async function getCommonConfig(uri: Uri | undefined) {
126126
}
127127

128128
const type = await checkProjectType(rootPath);
129-
const scriptExtension = type === 'js' ? 'js' : 'ts';
129+
const scriptExtension = getScriptExtension(type);
130130
return {
131131
type,
132132
scriptExtension,
133133
rootPath
134134
} as const;
135135
}
136136

137+
function getScriptExtension(type: ProjectType) {
138+
return type === ProjectType.JS || type === ProjectType.JS_SV5 ? 'js' : 'ts';
139+
}
140+
137141
function getRootPath(uri: Uri | undefined) {
138142
let rootPath!: string;
139143
if (uri) {

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

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,30 @@
1-
import { GenerateConfig } from '../types';
1+
import { GenerateConfig, ProjectType, Resource } from '../types';
22

3-
export default async function (config: GenerateConfig) {
4-
const ts = `
5-
<script lang="ts">
3+
const defaultScriptTemplate = `
4+
<script>
65
import { page } from '$app/stores';
76
</script>
87
9-
<h1>{$page.status}: {$page.error?.message}</h1>
10-
`.trim();
8+
<h1>{$page.status}: {$page.error.message}</h1>
9+
`;
1110

12-
const js = `
13-
<script>
11+
const tsScriptTemplate = `
12+
<script lang="ts">
1413
import { page } from '$app/stores';
1514
</script>
1615
17-
<h1>{$page.status}: {$page.error.message}</h1>
18-
`.trim();
16+
<h1>{$page.status}: {$page.error?.message}</h1>
17+
`;
18+
19+
const scriptTemplate: ReadonlyMap<ProjectType, string> = new Map([
20+
[ProjectType.TS_SV5, tsScriptTemplate],
21+
[ProjectType.TS_SATISFIES_SV5, tsScriptTemplate],
22+
[ProjectType.JS_SV5, defaultScriptTemplate],
23+
[ProjectType.TS, tsScriptTemplate],
24+
[ProjectType.TS_SATISFIES, tsScriptTemplate],
25+
[ProjectType.JS, defaultScriptTemplate]
26+
]);
1927

20-
return config.type === 'js' ? js : ts;
28+
export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
29+
return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
2130
}

‎packages/svelte-vscode/src/sveltekit/generateFiles/templates/layout-load.ts

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,37 @@
1-
import { GenerateConfig } from '../types';
1+
import { GenerateConfig, ProjectType, Resource } from '../types';
22

3-
export default async function (config: GenerateConfig) {
4-
const ts = `
3+
const defaultScriptTemplate = `
4+
/** @type {import('./$types').LayoutLoad} */
5+
export async function load() {
6+
return {};
7+
}
8+
`;
9+
10+
const tsScriptTemplate = `
511
import type { LayoutLoad } from './$types';
612
713
export const load: LayoutLoad = async () => {
814
return {};
915
};
10-
`.trim();
16+
`;
1117

12-
const tsSatisfies = `
18+
const tsSatisfiesScriptTemplate = `
1319
import type { LayoutLoad } from './$types';
1420
1521
export const load = (async () => {
1622
return {};
1723
}) satisfies LayoutLoad;
18-
`.trim();
24+
`;
1925

20-
const js = `
21-
/** @type {import('./$types').LayoutLoad} */
22-
export async function load() {
23-
return {};
24-
}
25-
`.trim();
26+
const scriptTemplate: ReadonlyMap<ProjectType, string> = new Map([
27+
[ProjectType.TS_SV5, tsScriptTemplate],
28+
[ProjectType.TS_SATISFIES_SV5, tsSatisfiesScriptTemplate],
29+
[ProjectType.JS_SV5, defaultScriptTemplate],
30+
[ProjectType.TS, tsScriptTemplate],
31+
[ProjectType.TS_SATISFIES, tsSatisfiesScriptTemplate],
32+
[ProjectType.JS, defaultScriptTemplate]
33+
]);
2634

27-
return config.type === 'js' ? js : config.type === 'ts' ? ts : tsSatisfies;
35+
export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
36+
return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
2837
}

‎packages/svelte-vscode/src/sveltekit/generateFiles/templates/layout-server.ts

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,37 @@
1-
import { GenerateConfig } from '../types';
1+
import { GenerateConfig, ProjectType, Resource } from '../types';
22

3-
export default async function (config: GenerateConfig) {
4-
const ts = `
3+
const defaultScriptTemplate = `
4+
/** @type {import('./$types').LayoutServerLoad} */
5+
export async function load() {
6+
return {};
7+
}
8+
`;
9+
10+
const tsScriptTemplate = `
511
import type { LayoutServerLoad } from './$types';
612
713
export const load: LayoutServerLoad = async () => {
814
return {};
915
};
10-
`.trim();
16+
`;
1117

12-
const tsSatisfies = `
18+
const tsSatisfiesScriptTemplate = `
1319
import type { LayoutServerLoad } from './$types';
1420
1521
export const load = (async () => {
1622
return {};
1723
}) satisfies LayoutServerLoad;
18-
`.trim();
24+
`;
1925

20-
const js = `
21-
/** @type {import('./$types').LayoutServerLoad} */
22-
export async function load() {
23-
return {};
24-
}
25-
`.trim();
26+
const scriptTemplate: ReadonlyMap<ProjectType, string> = new Map([
27+
[ProjectType.TS_SV5, tsScriptTemplate],
28+
[ProjectType.TS_SATISFIES_SV5, tsSatisfiesScriptTemplate],
29+
[ProjectType.JS_SV5, defaultScriptTemplate],
30+
[ProjectType.TS, tsScriptTemplate],
31+
[ProjectType.TS_SATISFIES, tsSatisfiesScriptTemplate],
32+
[ProjectType.JS, defaultScriptTemplate]
33+
]);
2634

27-
return config.type === 'js' ? js : config.type === 'ts' ? ts : tsSatisfies;
35+
export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
36+
return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
2837
}

‎packages/svelte-vscode/src/sveltekit/generateFiles/templates/layout.ts

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,44 @@
1-
import { GenerateConfig } from '../types';
1+
import { GenerateConfig, ProjectType, Resource } from '../types';
22

3-
export default async function (config: GenerateConfig) {
4-
const ts = `
3+
const defaultScriptTemplate = `
4+
<script>
5+
/** @type {import('./$types').LayoutData} */
6+
export let data;
7+
</script>
8+
`;
9+
10+
const tsSv5ScriptTemplate = `
11+
<script lang="ts">
12+
import type { LayoutData } from './$types';
13+
14+
let { data }: LayoutData = $props();
15+
</script>
16+
`;
17+
18+
const tsScriptTemplate = `
519
<script lang="ts">
620
import type { LayoutData } from './$types';
721
822
export let data: LayoutData;
923
</script>
10-
`.trim();
24+
`;
1125

12-
const js = `
26+
const jsSv5ScriptTemplate = `
1327
<script>
1428
/** @type {import('./$types').LayoutData} */
15-
export let data;
29+
let { data } = $props();
1630
</script>
17-
`.trim();
31+
`;
32+
33+
const scriptTemplate: ReadonlyMap<ProjectType, string> = new Map([
34+
[ProjectType.TS_SV5, tsSv5ScriptTemplate],
35+
[ProjectType.TS_SATISFIES_SV5, tsSv5ScriptTemplate],
36+
[ProjectType.JS_SV5, jsSv5ScriptTemplate],
37+
[ProjectType.TS, tsScriptTemplate],
38+
[ProjectType.TS_SATISFIES, tsScriptTemplate],
39+
[ProjectType.JS, defaultScriptTemplate]
40+
]);
1841

19-
return config.type === 'js' ? js : ts;
42+
export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
43+
return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
2044
}

‎packages/svelte-vscode/src/sveltekit/generateFiles/templates/page-load.ts

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,37 @@
1-
import { GenerateConfig } from '../types';
1+
import { GenerateConfig, ProjectType, Resource } from '../types';
22

3-
export default async function (config: GenerateConfig) {
4-
const ts = `
3+
const defaultScriptTemplate = `
4+
/** @type {import('./$types').PageLoad} */
5+
export async function load() {
6+
return {};
7+
};
8+
`;
9+
10+
const tsScriptTemplate = `
511
import type { PageLoad } from './$types';
612
713
export const load: PageLoad = async () => {
814
return {};
915
};
10-
`.trim();
16+
`;
1117

12-
const tsSatisfies = `
18+
const tsSatisfiesScriptTemplate = `
1319
import type { PageLoad } from './$types';
1420
1521
export const load = (async () => {
1622
return {};
1723
}) satisfies PageLoad;
18-
`.trim();
24+
`;
1925

20-
const js = `
21-
/** @type {import('./$types').PageLoad} */
22-
export async function load() {
23-
return {};
24-
};
25-
`.trim();
26+
const scriptTemplate: ReadonlyMap<ProjectType, string> = new Map([
27+
[ProjectType.TS_SV5, tsScriptTemplate],
28+
[ProjectType.TS_SATISFIES_SV5, tsSatisfiesScriptTemplate],
29+
[ProjectType.JS_SV5, defaultScriptTemplate],
30+
[ProjectType.TS, tsScriptTemplate],
31+
[ProjectType.TS_SATISFIES, tsSatisfiesScriptTemplate],
32+
[ProjectType.JS, defaultScriptTemplate]
33+
]);
2634

27-
return config.type === 'js' ? js : config.type === 'ts' ? ts : tsSatisfies;
35+
export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
36+
return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
2837
}

‎packages/svelte-vscode/src/sveltekit/generateFiles/templates/page-server.ts

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,37 @@
1-
import { GenerateConfig } from '../types';
1+
import { GenerateConfig, ProjectType, Resource } from '../types';
22

3-
export default async function (config: GenerateConfig) {
4-
const ts = `
3+
const defaultScriptTemplate = `
4+
/** @type {import('./$types').PageServerLoad} */
5+
export async function load() {
6+
return {};
7+
};
8+
`;
9+
10+
const tsScriptTemplate = `
511
import type { PageServerLoad } from './$types';
612
713
export const load: PageServerLoad = async () => {
814
return {};
915
};
10-
`.trim();
16+
`;
1117

12-
const tsSatisfies = `
18+
const tsSatisfiesScriptTemplate = `
1319
import type { PageServerLoad } from './$types';
1420
1521
export const load = (async () => {
1622
return {};
1723
}) satisfies PageServerLoad;
18-
`.trim();
24+
`;
1925

20-
const js = `
21-
/** @type {import('./$types').PageServerLoad} */
22-
export async function load() {
23-
return {};
24-
};
25-
`.trim();
26+
const scriptTemplate: ReadonlyMap<ProjectType, string> = new Map([
27+
[ProjectType.TS_SV5, tsScriptTemplate],
28+
[ProjectType.TS_SATISFIES_SV5, tsSatisfiesScriptTemplate],
29+
[ProjectType.JS_SV5, defaultScriptTemplate],
30+
[ProjectType.TS, tsScriptTemplate],
31+
[ProjectType.TS_SATISFIES, tsSatisfiesScriptTemplate],
32+
[ProjectType.JS, defaultScriptTemplate]
33+
]);
2634

27-
return config.type === 'js' ? js : config.type === 'ts' ? ts : tsSatisfies;
35+
export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
36+
return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
2837
}

‎packages/svelte-vscode/src/sveltekit/generateFiles/templates/page.ts

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,44 @@
1-
import { GenerateConfig } from '../types';
1+
import { GenerateConfig, ProjectType, Resource } from '../types';
22

3-
export default async function (config: GenerateConfig) {
4-
const ts = `
3+
const defaultScriptTemplate = `
4+
<script>
5+
/** @type {import('./$types').PageData} */
6+
export let data;
7+
</script>
8+
`;
9+
10+
const tsSv5ScriptTemplate = `
11+
<script lang="ts">
12+
import type { PageData } from './$types';
13+
14+
let { data }: PageData = $props();
15+
</script>
16+
`;
17+
18+
const tsScriptTemplate = `
519
<script lang="ts">
620
import type { PageData } from './$types';
721
822
export let data: PageData;
923
</script>
10-
`.trim();
24+
`;
1125

12-
const js = `
26+
const jsSv5ScriptTemplate = `
1327
<script>
1428
/** @type {import('./$types').PageData} */
15-
export let data;
29+
let { data } = $props();
1630
</script>
17-
`.trim();
31+
`;
32+
33+
const scriptTemplate: ReadonlyMap<ProjectType, string> = new Map([
34+
[ProjectType.TS_SV5, tsSv5ScriptTemplate],
35+
[ProjectType.TS_SATISFIES_SV5, tsSv5ScriptTemplate],
36+
[ProjectType.JS_SV5, jsSv5ScriptTemplate],
37+
[ProjectType.TS, tsScriptTemplate],
38+
[ProjectType.TS_SATISFIES, tsScriptTemplate],
39+
[ProjectType.JS, defaultScriptTemplate]
40+
]);
1841

19-
return config.type === 'js' ? js : ts;
42+
export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
43+
return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
2044
}

0 commit comments

Comments
 (0)