From 2f2c92eca2670ad174703b0a8ec53d3a3630e165 Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Fri, 27 Dec 2024 23:24:41 +0200
Subject: [PATCH 1/5] feat: support svelte 5

---
 assets/app/stack/svelte/5/svelte.config.js    | 20 ++++++
 .../customization/CustomConnection.svelte     |  2 +-
 .../modules/customization/CustomNode.svelte   |  4 +-
 .../stack/svelte/modules/routes/+page.svelte  |  5 +-
 assets/app/stack/svelte/modules/shims.d.ts    |  8 +++
 assets/app/templates/3d                       |  2 +-
 assets/app/templates/customization            |  8 +--
 assets/app/templates/default                  |  2 +-
 assets/app/templates/perf                     |  2 +-
 assets/app/templates/scopes                   |  2 +-
 src/app/stack/angular/index.ts                |  8 ++-
 src/app/stack/svelte/compatibility.ts         | 65 +++++++++++++++++++
 src/app/stack/svelte/index.ts                 | 31 ++++++---
 src/app/template-builder-helpers.ts           | 15 +++++
 14 files changed, 149 insertions(+), 25 deletions(-)
 create mode 100644 assets/app/stack/svelte/5/svelte.config.js
 create mode 100644 assets/app/stack/svelte/modules/shims.d.ts
 create mode 100644 src/app/stack/svelte/compatibility.ts
 create mode 100644 src/app/template-builder-helpers.ts

diff --git a/assets/app/stack/svelte/5/svelte.config.js b/assets/app/stack/svelte/5/svelte.config.js
new file mode 100644
index 0000000..b9d06fc
--- /dev/null
+++ b/assets/app/stack/svelte/5/svelte.config.js
@@ -0,0 +1,20 @@
+import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter({
+			strict: false
+		})
+	}
+};
+
+export default config;
diff --git a/assets/app/stack/svelte/modules/customization/CustomConnection.svelte b/assets/app/stack/svelte/modules/customization/CustomConnection.svelte
index ce13980..f2c592f 100644
--- a/assets/app/stack/svelte/modules/customization/CustomConnection.svelte
+++ b/assets/app/stack/svelte/modules/customization/CustomConnection.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ClassicScheme } from "rete-svelte-plugin";
+  import type { ClassicScheme } from "rete-svelte-plugin/* [svelte5] /5 [/svelte5] */";
   type Position = { x: number; y: number };
 
   // svelte-ignore unused-export-let
diff --git a/assets/app/stack/svelte/modules/customization/CustomNode.svelte b/assets/app/stack/svelte/modules/customization/CustomNode.svelte
index 23ab14c..37ffab8 100644
--- a/assets/app/stack/svelte/modules/customization/CustomNode.svelte
+++ b/assets/app/stack/svelte/modules/customization/CustomNode.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { ClassicScheme, SvelteArea2D } from "rete-svelte-plugin";
-  import { Ref } from "rete-svelte-plugin";
+  import type { ClassicScheme, SvelteArea2D } from "rete-svelte-plugin/* [svelte5] /5 [/svelte5] */";
+  import { Ref } from "rete-svelte-plugin/* [svelte5] /5 [/svelte5] */";
   type NodeExtraData = { width?: number; height?: number };
 
   function sortByIndex<K, I extends undefined | { index?: number }>(
diff --git a/assets/app/stack/svelte/modules/routes/+page.svelte b/assets/app/stack/svelte/modules/routes/+page.svelte
index 6404d57..979a077 100644
--- a/assets/app/stack/svelte/modules/routes/+page.svelte
+++ b/assets/app/stack/svelte/modules/routes/+page.svelte
@@ -3,6 +3,8 @@
 	import welcome_fallback from "$lib/images/svelte-welcome.png";
 
 	import "./styles.css";
+	import "../common.css";
+	import "../customization/background.css";
 	import { onMount } from "svelte";
 	let el: HTMLElement;
 
@@ -33,9 +35,6 @@
 </section>
 
 <style>
-	@import '../common.css';
-	@import '../customization/background.css';
-
 	section {
 		display: flex;
 		flex-direction: column;
diff --git a/assets/app/stack/svelte/modules/shims.d.ts b/assets/app/stack/svelte/modules/shims.d.ts
new file mode 100644
index 0000000..a93f974
--- /dev/null
+++ b/assets/app/stack/svelte/modules/shims.d.ts
@@ -0,0 +1,8 @@
+declare module '*.svelte' {
+    import type { Component } from 'svelte'
+
+    // eslint-disable-next-line init-declarations
+    const component: Component
+
+    export default component
+  }
diff --git a/assets/app/templates/3d b/assets/app/templates/3d
index e04bc72..83e220d 100644
--- a/assets/app/templates/3d
+++ b/assets/app/templates/3d
@@ -7,7 +7,7 @@ import { ConnectionPlugin, Presets as ConnectionPresets } from 'rete-connection-
 /* [react18] import { createRoot } from 'react-dom/client' [/react18] */
 /* [vue-render] import { VuePlugin, VueArea2D, Presets as VuePresets } from 'rete-vue-plugin/* [vue2] /vue2 [/vue2] */' [/vue-render] */
 /* [angular-render] import { AngularPlugin, AngularArea2D, Presets as AngularPresets } from 'rete-angular-plugin/* [angular12] /12 [/angular12] *//* [angular13] /13 [/angular13] *//* [angular14] /14 [/angular14] *//* [angular15] /15 [/angular15] *//* [angular16] /16 [/angular16] *//* [angular17] /17 [/angular17] *//* [angular18] /18 [/angular18] */' [/angular-render] */
-/* [svelte-render] import { SveltePlugin, SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin' [/svelte-render] */
+/* [svelte-render] import { SveltePlugin, SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin/* [svelte5] /5 [/svelte5] */' [/svelte-render] */
 /* [lit-render] import { LitPlugin, LitArea2D, Presets as LitPresets } from '@retejs/lit-plugin' [/lit-render] */
 /* [dataflow] import { DataflowEngine, DataflowNode } from 'rete-engine' [/dataflow] */
 /* [arrange] import { AutoArrangePlugin, Presets as ArrangePresets } from 'rete-auto-arrange-plugin' [/arrange] */
diff --git a/assets/app/templates/customization b/assets/app/templates/customization
index 488c542..b9c6a5d 100644
--- a/assets/app/templates/customization
+++ b/assets/app/templates/customization
@@ -9,7 +9,7 @@ import {
 /* [react18] import { createRoot } from 'react-dom/client' [/react18] */
 /* [stack-vue] import { VuePlugin, VueArea2D, Presets as VuePresets } from 'rete-vue-plugin/* [vue2] /vue2 [/vue2] */' [/stack-vue] */
 /* [stack-angular] import { AngularPlugin, AngularArea2D, Presets as AngularPresets } from 'rete-angular-plugin/* [angular12] /12 [/angular12] *//* [angular13] /13 [/angular13] *//* [angular14] /14 [/angular14] *//* [angular15] /15 [/angular15] *//* [angular16] /16 [/angular16] *//* [angular17] /17 [/angular17] *//* [angular18] /18 [/angular18] */' [/stack-angular] */
-/* [stack-svelte] import { SveltePlugin, SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin' [/stack-svelte] */
+/* [stack-svelte] import { SveltePlugin, SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin/* [svelte5] /5 [/svelte5] */' [/stack-svelte] */
 /* [stack-lit] import { LitPlugin, LitArea2D, Presets as LitPresets } from '@retejs/lit-plugin' [/stack-lit] */
 /* [stack-react] import { CustomNode } from "../customization/CustomNode";
 import { StyledNode } from "../customization/StyledNode";
@@ -127,13 +127,13 @@ export async function createEditor(container: HTMLElement/* [stack-angular] , in
     SveltePresets.classic.setup({
       customize: {
         node() {
-          return CustomNodeComponent as any;
+          return CustomNodeComponent;
         },
         connection() {
-          return CustomConnectionComponent as any;
+          return CustomConnectionComponent;
         },
         socket() {
-          return CustomSocketComponent as any;
+          return CustomSocketComponent;
         }
       },
     })
diff --git a/assets/app/templates/default b/assets/app/templates/default
index 38e1874..cae24a2 100644
--- a/assets/app/templates/default
+++ b/assets/app/templates/default
@@ -6,7 +6,7 @@ import { Area2D, /* [import-area-extensions] AreaExtensions, [/import-area-exten
 /* [react18] import { createRoot } from 'react-dom/client' [/react18] */
 /* [vue-render] import { VuePlugin, VueArea2D, Presets as VuePresets } from 'rete-vue-plugin/* [vue2] /vue2 [/vue2] */' [/vue-render] */
 /* [angular-render] import { AngularPlugin, AngularArea2D, Presets as AngularPresets } from 'rete-angular-plugin/* [angular12] /12 [/angular12] *//* [angular13] /13 [/angular13] *//* [angular14] /14 [/angular14] *//* [angular15] /15 [/angular15] *//* [angular16] /16 [/angular16] *//* [angular17] /17 [/angular17] *//* [angular18] /18 [/angular18] */' [/angular-render] */
-/* [svelte-render] import { SveltePlugin, SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin' [/svelte-render] */
+/* [svelte-render] import { SveltePlugin, SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin/* [svelte5] /5 [/svelte5] */' [/svelte-render] */
 /* [lit-render] import { LitPlugin, LitArea2D, Presets as LitPresets } from '@retejs/lit-plugin' [/lit-render] */
 /* [dataflow] import { DataflowEngine, DataflowNode } from 'rete-engine' [/dataflow] */
 /* [arrange] import { AutoArrangePlugin, Presets as ArrangePresets } from 'rete-auto-arrange-plugin' [/arrange] */
diff --git a/assets/app/templates/perf b/assets/app/templates/perf
index 64893a5..788a7d1 100644
--- a/assets/app/templates/perf
+++ b/assets/app/templates/perf
@@ -5,7 +5,7 @@ import { /* [import-area-extensions] AreaExtensions, [/import-area-extensions] *
 /* [react18] import { createRoot } from 'react-dom/client' [/react18] */
 /* [vue-render] import { VuePlugin, VueArea2D, Presets as VuePresets } from 'rete-vue-plugin/* [vue2] /vue2 [/vue2] */' [/vue-render] */
 /* [angular-render] import { AngularPlugin, AngularArea2D, Presets as AngularPresets } from 'rete-angular-plugin/* [angular12] /12 [/angular12] *//* [angular13] /13 [/angular13] *//* [angular14] /14 [/angular14] *//* [angular15] /15 [/angular15] *//* [angular16] /16 [/angular16] *//* [angular17] /17 [/angular17] *//* [angular18] /18 [/angular18] */' [/angular-render] */
-/* [svelte-render] import { SveltePlugin, SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin' [/svelte-render] */
+/* [svelte-render] import { SveltePlugin, SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin/* [svelte5] /5 [/svelte5] */' [/svelte-render] */
 /* [lit-render] import { LitPlugin, LitArea2D, Presets as LitPresets } from '@retejs/lit-plugin' [/lit-render] */
 
 
diff --git a/assets/app/templates/scopes b/assets/app/templates/scopes
index f218bc5..ec113e3 100644
--- a/assets/app/templates/scopes
+++ b/assets/app/templates/scopes
@@ -6,7 +6,7 @@ import { Area2D, /* [import-area-extensions] AreaExtensions, [/import-area-exten
 /* [react18] import { createRoot } from 'react-dom/client' [/react18] */
 /* [vue-render] import { VuePlugin, VueArea2D, Presets as VuePresets } from 'rete-vue-plugin/* [vue2] /vue2 [/vue2] */' [/vue-render] */
 /* [angular-render] import { AngularPlugin, AngularArea2D, Presets as AngularPresets } from 'rete-angular-plugin/* [angular12] /12 [/angular12] *//* [angular13] /13 [/angular13] *//* [angular14] /14 [/angular14] *//* [angular15] /15 [/angular15] *//* [angular16] /16 [/angular16] *//* [angular17] /17 [/angular17] *//* [angular18] /18 [/angular18] */' [/angular-render] */
-/* [svelte-render] import { SveltePlugin, SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin' [/svelte-render] */
+/* [svelte-render] import { SveltePlugin, SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin/* [svelte5] /5 [/svelte5] */' [/svelte-render] */
 /* [lit-render] import { LitPlugin, LitArea2D, Presets as LitPresets } from '@retejs/lit-plugin' [/lit-render] */
 import { ScopesPlugin, Presets as ScopesPresets } from "rete-scopes-plugin";
 /* [context-menu] import { ContextMenuPlugin, ContextMenuExtra, Presets as ContextMenuPresets } from 'rete-context-menu-plugin' [/context-menu] */
diff --git a/src/app/stack/angular/index.ts b/src/app/stack/angular/index.ts
index c7e79df..a057529 100644
--- a/src/app/stack/angular/index.ts
+++ b/src/app/stack/angular/index.ts
@@ -6,6 +6,7 @@ import { basename, dirname, join } from 'path'
 import { AppBuilder } from '../../app-builder'
 import { assetsCommon, assetsStack } from '../../consts'
 import { TemplateBuilder } from '../../template-builder'
+import { FileTemplate } from '../../template-builder-helpers'
 import { removeBudgets } from './budgets'
 import { installCompatibleTS } from './compatibility'
 
@@ -56,10 +57,11 @@ export class AngularBuilder implements AppBuilder {
       }
     })
 
-    const appModulePath = join(src, 'app', 'app.module.ts')
-    const appFile = await fs.promises.readFile(appModulePath, { encoding: 'utf-8' })
+    const fileTemplate = new FileTemplate(template)
 
-    await fs.promises.writeFile(appModulePath, await template.build(appFile))
+    await fileTemplate.apply([
+      join(src, 'app', 'app.module.ts')
+    ])
   }
 
   async putScript(name: string, path: string, code: string): Promise<void> {
diff --git a/src/app/stack/svelte/compatibility.ts b/src/app/stack/svelte/compatibility.ts
new file mode 100644
index 0000000..589628c
--- /dev/null
+++ b/src/app/stack/svelte/compatibility.ts
@@ -0,0 +1,65 @@
+import { join } from "path"
+
+interface ToolsSet {
+  create: {
+    version: string
+    flags?: string[]
+  }
+  kit: {
+    version: string
+  }
+  config?: {
+    path?: string
+  }
+  adapter: {
+    version: string
+  }
+}
+
+const legacy: ToolsSet = {
+  create: {
+    version: '4'
+  },
+  kit: {
+    version: '1'
+  },
+  adapter: {
+    version: '2'
+  }
+}
+
+const tools: Record<`v${number}`, ToolsSet> = {
+  v5: {
+    create: {
+      version: '6',
+      flags: ['--svelte5']
+    },
+    kit: {
+      version: '2'
+    },
+    config: {
+      path: '5'
+    },
+    adapter: {
+      version: '3'
+    }
+  },
+  v4: legacy,
+  v3: legacy
+}
+
+export function getToolsFor(version: number) {
+  return tools[`v${version}`]
+}
+
+export function getConfigFor(version: number) {
+  const name = 'svelte.config.js'
+  const path = version === 5
+    ? '5'
+    : '.'
+
+  return {
+    source: join(path, name),
+    name
+  }
+}
diff --git a/src/app/stack/svelte/index.ts b/src/app/stack/svelte/index.ts
index bf3986c..cb47d6a 100644
--- a/src/app/stack/svelte/index.ts
+++ b/src/app/stack/svelte/index.ts
@@ -6,20 +6,26 @@ import { dirname, join } from 'path'
 import { getTSConfig, setTSConfig } from '../../../shared/ts-config'
 import { AppBuilder } from '../../app-builder'
 import { assetsCommon, assetsStack } from '../../consts'
+import { TemplateBuilder } from '../../template-builder'
+import { FileTemplate } from '../../template-builder-helpers'
+import { getConfigFor, getToolsFor } from './compatibility'
 
 export class SvelteBuilder implements AppBuilder {
   public name = 'Svelte'
-  public versions = [3, 4]
+  public versions = [3, 4, 5]
   public foundation = 'svelte' as const
 
   public async create(name: string, version: number) {
+    const tools = getToolsFor(version)
+
     await execa('npm', [
-      'create', `svelte-with-args@4`, '-y',
+      'create', `svelte-with-args@${tools.create.version}`, '-y',
       '--',
       '--name', name,
       '--template', 'default',
       '--types', 'typescript',
-      '--no-prettier', '--no-eslint', '--no-playwright', '--no-vitest'
+      '--no-prettier', '--no-eslint', '--no-playwright', '--no-vitest',
+      ...tools.create.flags ?? []
     ], { stdio: 'inherit' })
     await execa('npm', ['i'], { cwd: join(process.cwd(), name), stdio: 'inherit' })
 
@@ -27,22 +33,24 @@ export class SvelteBuilder implements AppBuilder {
 
     tsConfig.compilerOptions.preserveValueImports = false
     tsConfig.compilerOptions.importsNotUsedAsValues = 'preserve'
+    tsConfig.compilerOptions.verbatimModuleSyntax = false
 
     await setTSConfig(name, tsConfig)
 
     await execa('npm', [
       'i',
       `svelte@${version}`,
-      `@sveltejs/kit@1`
+      `@sveltejs/kit@${tools.kit.version}`
     ], { stdio: 'inherit', cwd: name })
 
-    const configName = 'svelte.config.js'
+    const { name: configName, source } = getConfigFor(version)
 
-    await fse.copy(join(assetsStack, 'svelte', configName), join(name, configName), { overwrite: true })
-    await execa('npm', ['i', `@sveltejs/adapter-static@2`], { stdio: 'inherit', cwd: name })
+    await fse.copy(join(assetsStack, 'svelte', source), join(name, configName), { overwrite: true })
+    await execa('npm', ['i', `@sveltejs/adapter-static@${tools.adapter.version}`], { stdio: 'inherit', cwd: name })
   }
 
-  async putAssets(name: string) {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  async putAssets<K extends string>(name: string, _version: number, template: TemplateBuilder<K>) {
     const modules = join(assetsStack, 'svelte', 'modules')
     const src = join(name, 'src')
 
@@ -54,6 +62,13 @@ export class SvelteBuilder implements AppBuilder {
       recursive: true,
       overwrite: true
     })
+
+    const fileTemplate = new FileTemplate(template)
+
+    await fileTemplate.apply([
+      join(src, 'customization', 'CustomConnection.svelte'),
+      join(src, 'customization', 'CustomNode.svelte')
+    ], false)
   }
 
   async putScript(name: string, path: string, code: string) {
diff --git a/src/app/template-builder-helpers.ts b/src/app/template-builder-helpers.ts
new file mode 100644
index 0000000..94942e3
--- /dev/null
+++ b/src/app/template-builder-helpers.ts
@@ -0,0 +1,15 @@
+import fs from 'fs'
+
+import { TemplateBuilder } from './template-builder'
+
+export class FileTemplate<K extends string> {
+  constructor(private readonly template: TemplateBuilder<K>) {}
+
+  async apply(modules: string[], format = true) {
+    for (const module of modules) {
+      const file = await fs.promises.readFile(module, { encoding: 'utf-8' })
+
+      await fs.promises.writeFile(module, await this.template.build(file, format))
+    }
+  }
+}

From 6e5dddd7991ef42e26dad69c687826ec5848a6f9 Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Sat, 28 Dec 2024 13:30:35 +0200
Subject: [PATCH 2/5] refactor: svelte versions

---
 src/app/features.ts                   |  3 ++-
 src/app/index.ts                      | 10 +++++++---
 src/app/stack/svelte/compatibility.ts |  2 +-
 src/app/stack/svelte/index.ts         |  4 +++-
 src/app/template-builder.ts           |  3 ++-
 5 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/app/features.ts b/src/app/features.ts
index 1be3065..31e0cc6 100644
--- a/src/app/features.ts
+++ b/src/app/features.ts
@@ -1,5 +1,6 @@
 import { AppStack } from '.'
 import { AngularVersion } from './stack/angular'
+import { SvelteVersion } from './stack/svelte'
 import { DefaultTemplateKey } from './template-builder'
 
 function ver(name: string, next: boolean) {
@@ -92,7 +93,7 @@ export class Svelte implements Feature {
   templateKeys: DefaultTemplateKey[] = ['svelte-render']
   requiredDependencies: string[] = ['sass']
 
-  constructor(version: 3 | 4, next: boolean) {
+  constructor(version: SvelteVersion, next: boolean) {
     this.templateKeys.push(`svelte${version}`)
     this.requiredDependencies.push(
       ver('rete-render-utils', next),
diff --git a/src/app/index.ts b/src/app/index.ts
index fbe4c1d..dc044c4 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -10,6 +10,7 @@ import {
   ViteBuilder, VueBuilder, VueViteBuilder
 } from './stack'
 import { AngularVersion } from './stack/angular'
+import { SvelteVersion } from './stack/svelte'
 import { DefaultTemplateKey, TemplateBuilder } from './template-builder'
 
 export const builders = {
@@ -51,12 +52,15 @@ export async function createApp({ name, stack, version, features, depsAlias, for
   if (!appStacks.includes(selectedStack)) throwError('unknown stack')
 
   const builder = builders[selectedStack]
-  const selectedVersion = version || await select('Version', builder.versions.map(value => ({
+  const builderVersions = builder.versions as number[]
+  const selectedVersion = version || await select<number>('Version', builderVersions.map(value => ({
     name: String(value),
     value: value
   })))
 
-  if (!builder.versions.includes(selectedVersion)) throwError('specified version is not available for selected stack')
+  if (!builderVersions.includes(selectedVersion)) {
+    throwError('specified version is not available for selected stack')
+  }
 
   const featuresList: Features.Feature[] = [
     new Features.Default(builder.foundation, next),
@@ -71,7 +75,7 @@ export async function createApp({ name, stack, version, features, depsAlias, for
       ? selectedVersion as 2
       : 3, next),
     new Features.Svelte(builder.foundation === 'svelte'
-      ? selectedVersion as 4
+      ? selectedVersion as SvelteVersion
       : 4, next),
     new Features.Lit(builder.foundation === 'lit'
       ? selectedVersion as 3
diff --git a/src/app/stack/svelte/compatibility.ts b/src/app/stack/svelte/compatibility.ts
index 589628c..4ddf5a9 100644
--- a/src/app/stack/svelte/compatibility.ts
+++ b/src/app/stack/svelte/compatibility.ts
@@ -1,4 +1,4 @@
-import { join } from "path"
+import { join } from 'path'
 
 interface ToolsSet {
   create: {
diff --git a/src/app/stack/svelte/index.ts b/src/app/stack/svelte/index.ts
index cb47d6a..6e881a4 100644
--- a/src/app/stack/svelte/index.ts
+++ b/src/app/stack/svelte/index.ts
@@ -10,9 +10,11 @@ import { TemplateBuilder } from '../../template-builder'
 import { FileTemplate } from '../../template-builder-helpers'
 import { getConfigFor, getToolsFor } from './compatibility'
 
+export type SvelteVersion = 3 | 4 | 5
+
 export class SvelteBuilder implements AppBuilder {
   public name = 'Svelte'
-  public versions = [3, 4, 5]
+  public versions: SvelteVersion[] = [3, 4, 5]
   public foundation = 'svelte' as const
 
   public async create(name: string, version: number) {
diff --git a/src/app/template-builder.ts b/src/app/template-builder.ts
index bec024c..b025bc5 100644
--- a/src/app/template-builder.ts
+++ b/src/app/template-builder.ts
@@ -5,12 +5,13 @@ import prettier from 'prettier'
 
 import { assets as assetsRoot } from '../consts'
 import { AngularVersion } from './stack/angular'
+import { SvelteVersion } from './stack/svelte'
 
 export const templatesPath = join(assetsRoot, 'app', 'templates')
 export const entryScriptPath = join(assetsRoot, 'app', 'entry_ts')
 export type DefaultTemplateKey = 'zoom-at' | 'react-render' | 'react18' | 'vue-render'
   | `vue${2 | 3}` | 'angular-render' | `angular${AngularVersion}`
-  | 'svelte-render' | `svelte${3 | 4}` | 'lit-render' | `lit${3}`
+  | 'svelte-render' | `svelte${SvelteVersion}` | 'lit-render' | `lit${3}`
   | 'dataflow' | 'arrange' | 'sizes' | 'readonly' | 'order-nodes' | 'selectable'
   | 'context-menu' | 'import-area-extensions' | 'minimap' | 'reroute' | `stack-${string}`
 

From dce36f2f7242b50493493acfb35b0abea082ef8d Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Sat, 28 Dec 2024 17:15:39 +0200
Subject: [PATCH 3/5] feat: verbose exec in svelte builder

---
 src/app/stack/svelte/index.ts | 10 +++++-----
 src/shared/exec.ts            |  8 ++++++++
 2 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 src/shared/exec.ts

diff --git a/src/app/stack/svelte/index.ts b/src/app/stack/svelte/index.ts
index 6e881a4..3e35f60 100644
--- a/src/app/stack/svelte/index.ts
+++ b/src/app/stack/svelte/index.ts
@@ -1,8 +1,8 @@
-import execa from 'execa'
 import fs from 'fs'
 import fse from 'fs-extra'
 import { dirname, join } from 'path'
 
+import { exec } from '../../../shared/exec'
 import { getTSConfig, setTSConfig } from '../../../shared/ts-config'
 import { AppBuilder } from '../../app-builder'
 import { assetsCommon, assetsStack } from '../../consts'
@@ -20,7 +20,7 @@ export class SvelteBuilder implements AppBuilder {
   public async create(name: string, version: number) {
     const tools = getToolsFor(version)
 
-    await execa('npm', [
+    await exec('npm', [
       'create', `svelte-with-args@${tools.create.version}`, '-y',
       '--',
       '--name', name,
@@ -29,7 +29,7 @@ export class SvelteBuilder implements AppBuilder {
       '--no-prettier', '--no-eslint', '--no-playwright', '--no-vitest',
       ...tools.create.flags ?? []
     ], { stdio: 'inherit' })
-    await execa('npm', ['i'], { cwd: join(process.cwd(), name), stdio: 'inherit' })
+    await exec('npm', ['i'], { cwd: join(process.cwd(), name), stdio: 'inherit' })
 
     const tsConfig = await getTSConfig(name)
 
@@ -39,7 +39,7 @@ export class SvelteBuilder implements AppBuilder {
 
     await setTSConfig(name, tsConfig)
 
-    await execa('npm', [
+    await exec('npm', [
       'i',
       `svelte@${version}`,
       `@sveltejs/kit@${tools.kit.version}`
@@ -48,7 +48,7 @@ export class SvelteBuilder implements AppBuilder {
     const { name: configName, source } = getConfigFor(version)
 
     await fse.copy(join(assetsStack, 'svelte', source), join(name, configName), { overwrite: true })
-    await execa('npm', ['i', `@sveltejs/adapter-static@${tools.adapter.version}`], { stdio: 'inherit', cwd: name })
+    await exec('npm', ['i', `@sveltejs/adapter-static@${tools.adapter.version}`], { stdio: 'inherit', cwd: name })
   }
 
   // eslint-disable-next-line @typescript-eslint/naming-convention
diff --git a/src/shared/exec.ts b/src/shared/exec.ts
new file mode 100644
index 0000000..e7974c7
--- /dev/null
+++ b/src/shared/exec.ts
@@ -0,0 +1,8 @@
+import { default as execa, Options } from 'execa'
+
+export const exec = async (file: string, args?: readonly string[], options?: Options) => {
+  if (process.env.VERBOSE) {
+    console.log(`exec: ${file} ${args?.join(' ')}`)
+  }
+  return execa(file, args, options)
+}

From 45734f636edddc030a3e3a58911c00859b8ed4d0 Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Sat, 28 Dec 2024 17:16:04 +0200
Subject: [PATCH 4/5] fix: issue with loading wrong create-svelte-with-args
 version

---
 src/app/stack/svelte/index.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/stack/svelte/index.ts b/src/app/stack/svelte/index.ts
index 3e35f60..78bdec6 100644
--- a/src/app/stack/svelte/index.ts
+++ b/src/app/stack/svelte/index.ts
@@ -20,9 +20,8 @@ export class SvelteBuilder implements AppBuilder {
   public async create(name: string, version: number) {
     const tools = getToolsFor(version)
 
-    await exec('npm', [
-      'create', `svelte-with-args@${tools.create.version}`, '-y',
-      '--',
+    await exec('npx', [
+      `create-svelte-with-args@${tools.create.version}`,
       '--name', name,
       '--template', 'default',
       '--types', 'typescript',

From 65c52907c9642526f47e5b113464052ffd2bd05e Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Sat, 28 Dec 2024 18:03:24 +0200
Subject: [PATCH 5/5] fix: imports for svelte 5

---
 assets/app/stack/svelte/modules/routes/+layout.svelte | 3 ++-
 assets/app/stack/svelte/modules/routes/+page.svelte   | 1 -
 src/app/stack/svelte/index.ts                         | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/assets/app/stack/svelte/modules/routes/+layout.svelte b/assets/app/stack/svelte/modules/routes/+layout.svelte
index bac1660..e90253a 100644
--- a/assets/app/stack/svelte/modules/routes/+layout.svelte
+++ b/assets/app/stack/svelte/modules/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script>
 	import Header from "./Header.svelte";
-	import "./styles.css";
+	/* [!svelte5] import "./styles.css"; [/!svelte5] */
+	/* [svelte5] import "../app.css"; [/svelte5] */
 </script>
 
 <div class="app">
diff --git a/assets/app/stack/svelte/modules/routes/+page.svelte b/assets/app/stack/svelte/modules/routes/+page.svelte
index 979a077..1b0323b 100644
--- a/assets/app/stack/svelte/modules/routes/+page.svelte
+++ b/assets/app/stack/svelte/modules/routes/+page.svelte
@@ -2,7 +2,6 @@
 	import welcome from "$lib/images/svelte-welcome.webp";
 	import welcome_fallback from "$lib/images/svelte-welcome.png";
 
-	import "./styles.css";
 	import "../common.css";
 	import "../customization/background.css";
 	import { onMount } from "svelte";
diff --git a/src/app/stack/svelte/index.ts b/src/app/stack/svelte/index.ts
index 78bdec6..2ce082d 100644
--- a/src/app/stack/svelte/index.ts
+++ b/src/app/stack/svelte/index.ts
@@ -68,7 +68,9 @@ export class SvelteBuilder implements AppBuilder {
 
     await fileTemplate.apply([
       join(src, 'customization', 'CustomConnection.svelte'),
-      join(src, 'customization', 'CustomNode.svelte')
+      join(src, 'customization', 'CustomNode.svelte'),
+      join(src, 'routes', '+layout.svelte'),
+      join(src, 'routes', '+page.svelte')
     ], false)
   }