vscode xxxData to xxxProps

README.md

@@ -25,14 +25,14 @@ A `.svelte` file would look something like this:
     let count = $state(1);
 
     let doubled = $derived(count * 2);
-    let quadrupled =  $derived(doubled * 2);
+    let quadrupled = $derived(doubled * 2);
 
     function handleClick() {
         count += 1;
     }
 </script>
 
-<button onclick={handleClick}>Count: {count}</button>
+<button onclick="{handleClick}">Count: {count}</button>
 
 <p>{count} * 2 = {doubled}</p>
 <p>{doubled} * 2 = {quadrupled}</p>

packages/svelte-vscode/package.json

@@ -9,7 +9,7 @@
         "build": "npm run build:ts && npm run build:grammar",
         "vscode:prepublish": "npm install && npm run build && npm prune --production",
         "watch": "npm run build:grammar && tsc -w -p ./",
-        "test": "npm run build:grammar && node test/grammar/test.js"
+        "test": "npm run build:grammar && node test/grammar/test.js && vitest --run"
     },
     "repository": {
         "type": "git",
@@ -745,6 +745,7 @@
         "js-yaml": "^3.14.0",
         "tslib": "^2.4.0",
         "typescript": "^5.8.2",
+        "vitest": "^3.2.4",
         "vscode-tmgrammar-test": "^0.0.11"
     },
     "dependencies": {

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

@@ -3,8 +3,8 @@ import { commands, ExtensionContext, ProgressLocation, Uri, window, workspace }
 import { addResourceCommandMap } from './commands';
 import { generateResources } from './generate';
 import { resourcesMap } from './resources';
-import { FileType, ResourceType, GenerateConfig, CommandType, ProjectType } from './types';
-import { checkProjectType } from '../utils';
+import { FileType, ResourceType, GenerateConfig, CommandType } from './types';
+import { checkProjectKind } from '../utils';
 
 class GenerateError extends Error {}
 
@@ -38,7 +38,7 @@ async function handleSingle(uri: Uri | undefined, resourceType: ResourceType) {
     }
     const resources = [resource];
 
-    const { type, rootPath, scriptExtension } = await getCommonConfig(uri);
+    const { kind, rootPath, scriptExtension } = await getCommonConfig(uri);
 
     const itemPath = await promptResourcePath();
 
@@ -48,15 +48,15 @@ async function handleSingle(uri: Uri | undefined, resourceType: ResourceType) {
 
     await generate({
         path: path.join(rootPath, itemPath),
-        type,
+        kind,
         pageExtension: 'svelte',
         scriptExtension,
         resources
     });
 }
 
 async function handleMultiple(uri: Uri | undefined) {
-    const { type, rootPath, scriptExtension } = await getCommonConfig(uri);
+    const { kind, rootPath, scriptExtension } = await getCommonConfig(uri);
     const itemPath = await promptResourcePath();
 
     if (!itemPath) {
@@ -92,7 +92,7 @@ async function handleMultiple(uri: Uri | undefined) {
 
     await generate({
         path: path.join(rootPath, itemPath),
-        type,
+        kind,
         pageExtension: 'svelte',
         scriptExtension,
         resources: result.map((res) => res.value)
@@ -125,17 +125,17 @@ async function getCommonConfig(uri: Uri | undefined) {
         );
     }
 
-    const type = await checkProjectType(rootPath);
-    const scriptExtension = getScriptExtension(type);
+    const kind = await checkProjectKind(rootPath);
+    const scriptExtension = getScriptExtension(kind);
     return {
-        type,
+        kind,
         scriptExtension,
         rootPath
     } as const;
 }
 
-function getScriptExtension(type: ProjectType) {
-    return type === ProjectType.JS || type === ProjectType.JS_SV5 ? 'js' : 'ts';
+function getScriptExtension(kind: GenerateConfig['kind']) {
+    return kind.withTs ? 'ts' : 'js';
 }
 
 function getRootPath(uri: Uri | undefined) {

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

@@ -1,4 +1,4 @@
-import { GenerateConfig, ProjectType, Resource } from '../types';
+import { GenerateConfig, Resource } from '../types';
 
 const defaultScriptTemplate = `
 <script>
@@ -16,15 +16,13 @@ const tsScriptTemplate = `
 <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]
-]);
-
 export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
-    return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
+    const { withTs } = config.kind;
+    let template = defaultScriptTemplate;
+
+    if (withTs) {
+        template = tsScriptTemplate;
+    }
+
+    return template.trim();
 }

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

@@ -1,4 +1,4 @@
-import { GenerateConfig, ProjectType, Resource } from '../types';
+import { GenerateConfig, Resource } from '../types';
 
 const defaultScriptTemplate = `
 /** @type {import('./$types').LayoutLoad} */
@@ -23,15 +23,15 @@ export const load = (async () => {
 }) satisfies LayoutLoad;
 `;
 
-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]
-]);
-
 export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
-    return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
+    const { withTs, withSatisfies } = config.kind;
+    let template = defaultScriptTemplate;
+
+    if (withTs && withSatisfies) {
+        template = tsSatisfiesScriptTemplate;
+    } else if (withTs && !withSatisfies) {
+        template = tsScriptTemplate;
+    }
+
+    return template.trim();
 }

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

@@ -1,4 +1,4 @@
-import { GenerateConfig, ProjectType, Resource } from '../types';
+import { GenerateConfig, Resource } from '../types';
 
 const defaultScriptTemplate = `
 /** @type {import('./$types').LayoutServerLoad} */
@@ -23,15 +23,15 @@ export const load = (async () => {
 }) satisfies LayoutServerLoad;
 `;
 
-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]
-]);
-
 export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
-    return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
+    const { withTs, withSatisfies } = config.kind;
+    let template = defaultScriptTemplate;
+
+    if (withTs && withSatisfies) {
+        template = tsSatisfiesScriptTemplate;
+    } else if (withTs && !withSatisfies) {
+        template = tsScriptTemplate;
+    }
+
+    return template.trim();
 }

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

@@ -1,4 +1,4 @@
-import { GenerateConfig, ProjectType, Resource } from '../types';
+import { GenerateConfig, Resource } from '../types';
 
 const defaultScriptTemplate = `
 <script>
@@ -20,6 +20,16 @@ const tsSv5ScriptTemplate = `
 {@render children()}
 `;
 
+const tsSv5ScriptTemplateProps = `
+<script lang="ts">
+    import type { LayoutProps } from './$types';
+
+    let { data, children }: LayoutProps = $props();
+</script>
+
+{@render children()}
+`;
+
 const tsScriptTemplate = `
 <script lang="ts">
     import type { LayoutData } from './$types';
@@ -39,15 +49,32 @@ const jsSv5ScriptTemplate = `
 {@render children()}
 `;
 
-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]
-]);
+const jsSv5ScriptTemplateProps = `
+<script>
+    /** @type {import('./$types').LayoutProps} */
+    let { data, children } = $props();
+</script>
+
+{@render children()}
+`;
 
 export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
-    return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
+    const { withRunes, withTs, withProps } = config.kind;
+    let template = defaultScriptTemplate;
+
+    if (withRunes && withTs && withProps) {
+        template = tsSv5ScriptTemplateProps;
+    } else if (withRunes && withTs && !withProps) {
+        template = tsSv5ScriptTemplate;
+    } else if (withRunes && !withTs && withProps) {
+        template = jsSv5ScriptTemplateProps;
+    } else if (withRunes && !withTs && !withProps) {
+        template = jsSv5ScriptTemplate;
+    } else if (!withRunes && withTs) {
+        template = tsScriptTemplate;
+    } else if (!withRunes && !withTs) {
+        template = defaultScriptTemplate;
+    }
+
+    return template.trim();
 }

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

@@ -1,4 +1,4 @@
-import { GenerateConfig, ProjectType, Resource } from '../types';
+import { GenerateConfig, Resource } from '../types';
 
 const defaultScriptTemplate = `
 /** @type {import('./$types').PageLoad} */
@@ -23,15 +23,15 @@ export const load = (async () => {
 }) satisfies PageLoad;
 `;
 
-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]
-]);
-
 export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
-    return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
+    const { withTs, withSatisfies } = config.kind;
+    let template = defaultScriptTemplate;
+
+    if (withTs && withSatisfies) {
+        template = tsSatisfiesScriptTemplate;
+    } else if (withTs && !withSatisfies) {
+        template = tsScriptTemplate;
+    }
+
+    return template.trim();
 }

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

@@ -1,4 +1,4 @@
-import { GenerateConfig, ProjectType, Resource } from '../types';
+import { GenerateConfig, Resource } from '../types';
 
 const defaultScriptTemplate = `
 /** @type {import('./$types').PageServerLoad} */
@@ -23,15 +23,15 @@ export const load = (async () => {
 }) satisfies PageServerLoad;
 `;
 
-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]
-]);
-
 export default async function (config: GenerateConfig): ReturnType<Resource['generate']> {
-    return (scriptTemplate.get(config.type) ?? defaultScriptTemplate).trim();
+    const { withTs, withSatisfies } = config.kind;
+    let template = defaultScriptTemplate;
+
+    if (withTs && withSatisfies) {
+        template = tsSatisfiesScriptTemplate;
+    } else if (withTs && !withSatisfies) {
+        template = tsScriptTemplate;
+    }
+
+    return template.trim();
 }