Merge pull request #55 from retejs/svelte-5

feat: support svelte 5

Author: Ni55aN

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;

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

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 }>(

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">

assets/app/stack/svelte/modules/routes/+page.svelte

@@ -2,7 +2,8 @@
 	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";
 	let el: HTMLElement;
 
@@ -33,9 +34,6 @@
 </section>
 
 <style>
-	@import '../common.css';
-	@import '../customization/background.css';
-
 	section {
 		display: flex;
 		flex-direction: column;

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
+  }

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] */

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;
         }
       },
     })

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] */

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] */
 
 

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] */

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),

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

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> {

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
+  }
+}

src/app/stack/svelte/index.ts

@@ -1,48 +1,57 @@
-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'
+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]
+  public versions: SvelteVersion[] = [3, 4, 5]
   public foundation = 'svelte' as const
 
   public async create(name: string, version: number) {
-    await execa('npm', [
-      'create', `svelte-with-args@4`, '-y',
-      '--',
+    const tools = getToolsFor(version)
+
+    await exec('npx', [
+      `create-svelte-with-args@${tools.create.version}`,
       '--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' })
+    await exec('npm', ['i'], { cwd: join(process.cwd(), name), stdio: 'inherit' })
 
     const tsConfig = await getTSConfig(name)
 
     tsConfig.compilerOptions.preserveValueImports = false
     tsConfig.compilerOptions.importsNotUsedAsValues = 'preserve'
+    tsConfig.compilerOptions.verbatimModuleSyntax = false
 
     await setTSConfig(name, tsConfig)
 
-    await execa('npm', [
+    await exec('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 exec('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 +63,15 @@ 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'),
+      join(src, 'routes', '+layout.svelte'),
+      join(src, 'routes', '+page.svelte')
+    ], false)
   }
 
   async putScript(name: string, path: string, code: string) {

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))
+    }
+  }
+}

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}`