diff --git a/assets/app/stack/react/modules/vite/customization/CustomNode.tsx b/assets/app/stack/react/modules/vite/customization/CustomNode.tsx index fb331eb..a5bb6b7 100644 --- a/assets/app/stack/react/modules/vite/customization/CustomNode.tsx +++ b/assets/app/stack/react/modules/vite/customization/CustomNode.tsx @@ -1,4 +1,5 @@ import { type ClassicScheme, type RenderEmit, Presets } from "rete-react-plugin"; +import { type JSX } from "react"; import styled, { css } from "styled-components"; import { $nodewidth, $socketmargin, $socketsize } from "./vars"; diff --git a/assets/app/templates/3d b/assets/app/templates/3d index a193369..f80210f 100644 --- a/assets/app/templates/3d +++ b/assets/app/templates/3d @@ -5,6 +5,7 @@ import { type Area3D, Area3DExtensions, Area3DPlugin } from 'rete-area-3d-plugin import { ConnectionPlugin, Presets as ConnectionPresets } from 'rete-connection-plugin' /* [react-render] import { ReactPlugin, type ReactArea2D, Presets as ReactPresets } from 'rete-react-plugin' [/react-render] */ /* [react18] import { createRoot } from 'react-dom/client' [/react18] */ +/* [react19] import { createRoot } from 'react-dom/client' [/react19] */ /* [vue-render] import { VuePlugin, type VueArea2D, Presets as VuePresets } from 'rete-vue-plugin/* [vue2] /vue2 [/vue2] */' [/vue-render] */ /* [angular-render] import { AngularPlugin, type 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] *//* [angular19] /19 [/angular19] *//* [angular20] /20 [/angular20] */' [/angular-render] */ /* [svelte-render] import { SveltePlugin, type SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin/* [svelte5] /5 [/svelte5] */' [/svelte-render] */ @@ -91,7 +92,7 @@ export async function createEditor(container: HTMLElement/* [stack-angular] , in const editor = new NodeEditor() const area = new Area3DPlugin(container) const connection = new ConnectionPlugin() - /* [react-render] const reactRender = new ReactPlugin(/* [react18] { createRoot } [/react18] */)[/react-render] */ + /* [react-render] const reactRender = new ReactPlugin(/* [react18] { createRoot } [/react18] *//* [react19] { createRoot } [/react19] */)[/react-render] */ /* [vue-render] const vueRender = new VuePlugin() [/vue-render] */ /* [angular-render] const angularRender = new AngularPlugin({ injector }) [/angular-render] */ /* [svelte-render] const svelteRender = new SveltePlugin() [/svelte-render] */ diff --git a/assets/app/templates/customization b/assets/app/templates/customization index 27b7dc0..8138131 100644 --- a/assets/app/templates/customization +++ b/assets/app/templates/customization @@ -7,6 +7,7 @@ import { } from "rete-connection-plugin"; /* [stack-react] import { ReactPlugin, type ReactArea2D, Presets as ReactPresets } from 'rete-react-plugin' [/stack-react] */ /* [react18] import { createRoot } from 'react-dom/client' [/react18] */ +/* [react19] import { createRoot } from 'react-dom/client' [/react19] */ /* [stack-vue] import { VuePlugin, type VueArea2D, Presets as VuePresets } from 'rete-vue-plugin/* [vue2] /vue2 [/vue2] */' [/stack-vue] */ /* [stack-angular] import { AngularPlugin, type 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] *//* [angular19] /19 [/angular19] *//* [angular20] /20 [/angular20] */' [/stack-angular] */ /* [stack-svelte] import { SveltePlugin, type SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin/* [svelte5] /5 [/svelte5] */' [/stack-svelte] */ @@ -54,7 +55,7 @@ export async function createEditor(container: HTMLElement/* [stack-angular] , in const editor = new NodeEditor(); const area = new AreaPlugin(container); const connection = new ConnectionPlugin(); - /* [stack-react] const reactRender = new ReactPlugin(/* [react18] { createRoot } [/react18] */)[/stack-react] */ + /* [stack-react] const reactRender = new ReactPlugin(/* [react18] { createRoot } [/react18] *//* [react19] { createRoot } [/react19] */)[/stack-react] */ /* [stack-vue] const vueRender = new VuePlugin() [/stack-vue] */ /* [stack-angular] const angularRender = new AngularPlugin({ injector }) [/stack-angular] */ /* [stack-svelte] const svelteRender = new SveltePlugin() [/stack-svelte] */ diff --git a/assets/app/templates/default b/assets/app/templates/default index 131108c..1c5c322 100644 --- a/assets/app/templates/default +++ b/assets/app/templates/default @@ -4,6 +4,7 @@ import { type Area2D, /* [import-area-extensions] AreaExtensions, [/import-area- /* [!readonly] import { ConnectionPlugin, Presets as ConnectionPresets } from 'rete-connection-plugin' [/!readonly] */ /* [react-render] import { ReactPlugin, type ReactArea2D, Presets as ReactPresets } from 'rete-react-plugin' [/react-render] */ /* [react18] import { createRoot } from 'react-dom/client' [/react18] */ +/* [react19] import { createRoot } from 'react-dom/client' [/react19] */ /* [vue-render] import { VuePlugin, type VueArea2D, Presets as VuePresets } from 'rete-vue-plugin/* [vue2] /vue2 [/vue2] */' [/vue-render] */ /* [angular-render] import { AngularPlugin, type 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] *//* [angular19] /19 [/angular19] *//* [angular20] /20 [/angular20] */' [/angular-render] */ /* [svelte-render] import { SveltePlugin, type SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin/* [svelte5] /5 [/svelte5] */' [/svelte-render] */ @@ -95,7 +96,7 @@ export async function createEditor(container: HTMLElement/* [stack-angular] , in const editor = new NodeEditor() const area = new AreaPlugin(container) /* [!readonly] const connection = new ConnectionPlugin() [/!readonly] */ - /* [react-render] const reactRender = new ReactPlugin(/* [react18] { createRoot } [/react18] */)[/react-render] */ + /* [react-render] const reactRender = new ReactPlugin(/* [react18] { createRoot } [/react18] *//* [react19] { createRoot } [/react19] */)[/react-render] */ /* [vue-render] const vueRender = new VuePlugin() [/vue-render] */ /* [angular-render] const angularRender = new AngularPlugin({ injector }) [/angular-render] */ /* [svelte-render] const svelteRender = new SveltePlugin() [/svelte-render] */ diff --git a/assets/app/templates/perf b/assets/app/templates/perf index 828889b..ecbb7a0 100644 --- a/assets/app/templates/perf +++ b/assets/app/templates/perf @@ -3,6 +3,7 @@ import { /* [import-area-extensions] AreaExtensions, [/import-area-extensions] * /* [stack-angular] import { type Injector } from '@angular/core' [/stack-angular] */ /* [react-render] import { ReactPlugin, type ReactArea2D, Presets as ReactPresets } from 'rete-react-plugin' [/react-render] */ /* [react18] import { createRoot } from 'react-dom/client' [/react18] */ +/* [react19] import { createRoot } from 'react-dom/client' [/react19] */ /* [vue-render] import { VuePlugin, type VueArea2D, Presets as VuePresets } from 'rete-vue-plugin/* [vue2] /vue2 [/vue2] */' [/vue-render] */ /* [angular-render] import { AngularPlugin, type 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] *//* [angular19] /19 [/angular19] *//* [angular20] /20 [/angular20] */' [/angular-render] */ /* [svelte-render] import { SveltePlugin, type SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin/* [svelte5] /5 [/svelte5] */' [/svelte-render] */ @@ -34,7 +35,7 @@ type AreaExtra = export async function createEditor(container: HTMLElement/* [stack-angular] , injector: Injector [/stack-angular] */) { const editor = new NodeEditor() const area = new AreaPlugin(container) - /* [react-render] const reactRender = new ReactPlugin(/* [react18] { createRoot } [/react18] */)[/react-render] */ + /* [react-render] const reactRender = new ReactPlugin(/* [react18] { createRoot } [/react18] *//* [react19] { createRoot } [/react19] */)[/react-render] */ /* [vue-render] const vueRender = new VuePlugin() [/vue-render] */ /* [angular-render] const angularRender = new AngularPlugin({ injector }) [/angular-render] */ /* [svelte-render] const svelteRender = new SveltePlugin() [/svelte-render] */ diff --git a/assets/app/templates/scopes b/assets/app/templates/scopes index 0939057..746f9c8 100644 --- a/assets/app/templates/scopes +++ b/assets/app/templates/scopes @@ -4,6 +4,7 @@ import { type Area2D, /* [import-area-extensions] AreaExtensions, [/import-area- /* [!readonly] import { ConnectionPlugin, Presets as ConnectionPresets } from 'rete-connection-plugin' [/!readonly] */ /* [react-render] import { ReactPlugin, type ReactArea2D, Presets as ReactPresets } from 'rete-react-plugin' [/react-render] */ /* [react18] import { createRoot } from 'react-dom/client' [/react18] */ +/* [react19] import { createRoot } from 'react-dom/client' [/react19] */ /* [vue-render] import { VuePlugin, type VueArea2D, Presets as VuePresets } from 'rete-vue-plugin/* [vue2] /vue2 [/vue2] */' [/vue-render] */ /* [angular-render] import { AngularPlugin, type 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] *//* [angular19] /19 [/angular19] *//* [angular20] /20 [/angular20] */' [/angular-render] */ /* [svelte-render] import { SveltePlugin, type SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin/* [svelte5] /5 [/svelte5] */' [/svelte-render] */ @@ -73,7 +74,7 @@ export async function createEditor(container: HTMLElement/* [stack-angular] , in const editor = new NodeEditor(); const area = new AreaPlugin(container); /* [!readonly] const connection = new ConnectionPlugin() [/!readonly] */ - /* [react-render] const reactRender = new ReactPlugin(/* [react18] { createRoot } [/react18] */)[/react-render] */ + /* [react-render] const reactRender = new ReactPlugin(/* [react18] { createRoot } [/react18] *//* [react19] { createRoot } [/react19] */)[/react-render] */ /* [vue-render] const vueRender = new VuePlugin() [/vue-render] */ /* [angular-render] const angularRender = new AngularPlugin({ injector }) [/angular-render] */ /* [svelte-render] const svelteRender = new SveltePlugin() [/svelte-render] */ diff --git a/src/app/features.ts b/src/app/features.ts index 31e0cc6..afe5fb2 100644 --- a/src/app/features.ts +++ b/src/app/features.ts @@ -57,7 +57,7 @@ export class React implements Feature { ] constructor(version: number, stack: AppStack, next: boolean) { - if (version === 18) this.templateKeys.push('react18') + this.templateKeys.push(`react${version}`) this.requiredDependencies.push( ver('rete-render-utils', next), diff --git a/src/app/stack/react/vite.ts b/src/app/stack/react/vite.ts index 67f7a8b..2b943df 100644 --- a/src/app/stack/react/vite.ts +++ b/src/app/stack/react/vite.ts @@ -8,7 +8,7 @@ import { assetsCommon, assetsStack } from '../../consts' export class ReactViteBuilder implements AppBuilder { public name = 'React.js Vite' - public versions = [16, 17, 18] + public versions = [16, 17, 18, 19] public foundation = 'react' as const public async create(name: string, version: number) { diff --git a/src/app/template-builder.ts b/src/app/template-builder.ts index b025bc5..d6ce797 100644 --- a/src/app/template-builder.ts +++ b/src/app/template-builder.ts @@ -9,7 +9,7 @@ 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' +export type DefaultTemplateKey = 'zoom-at' | 'react-render' | `react${number}` | 'vue-render' | `vue${2 | 3}` | 'angular-render' | `angular${AngularVersion}` | 'svelte-render' | `svelte${SvelteVersion}` | 'lit-render' | `lit${3}` | 'dataflow' | 'arrange' | 'sizes' | 'readonly' | 'order-nodes' | 'selectable'