feat: add react 19

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

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<Schemes>()
   const area = new Area3DPlugin<Schemes, AreaExtra>(container)
   const connection = new ConnectionPlugin<Schemes, AreaExtra>()
-  /* [react-render] const reactRender = new ReactPlugin<Schemes, AreaExtra>(/* [react18] { createRoot } [/react18] */)[/react-render] */
+  /* [react-render] const reactRender = new ReactPlugin<Schemes, AreaExtra>(/* [react18] { createRoot } [/react18] *//* [react19] { createRoot } [/react19] */)[/react-render] */
   /* [vue-render] const vueRender = new VuePlugin<Schemes, AreaExtra>() [/vue-render] */
   /* [angular-render] const angularRender = new AngularPlugin<Schemes, AreaExtra>({ injector }) [/angular-render] */
   /* [svelte-render] const svelteRender = new SveltePlugin<Schemes, AreaExtra>() [/svelte-render] */

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<Schemes>();
   const area = new AreaPlugin<Schemes, AreaExtra>(container);
   const connection = new ConnectionPlugin<Schemes, AreaExtra>();
-  /* [stack-react] const reactRender = new ReactPlugin<Schemes, AreaExtra>(/* [react18] { createRoot } [/react18] */)[/stack-react] */
+  /* [stack-react] const reactRender = new ReactPlugin<Schemes, AreaExtra>(/* [react18] { createRoot } [/react18] *//* [react19] { createRoot } [/react19] */)[/stack-react] */
   /* [stack-vue] const vueRender = new VuePlugin<Schemes, AreaExtra>() [/stack-vue] */
   /* [stack-angular] const angularRender = new AngularPlugin<Schemes, AreaExtra>({ injector }) [/stack-angular] */
   /* [stack-svelte] const svelteRender = new SveltePlugin<Schemes, AreaExtra>() [/stack-svelte] */

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<Schemes>()
   const area = new AreaPlugin<Schemes, AreaExtra>(container)
   /* [!readonly] const connection = new ConnectionPlugin<Schemes, AreaExtra>() [/!readonly] */
-  /* [react-render] const reactRender = new ReactPlugin<Schemes, AreaExtra>(/* [react18] { createRoot } [/react18] */)[/react-render] */
+  /* [react-render] const reactRender = new ReactPlugin<Schemes, AreaExtra>(/* [react18] { createRoot } [/react18] *//* [react19] { createRoot } [/react19] */)[/react-render] */
   /* [vue-render] const vueRender = new VuePlugin<Schemes, AreaExtra>() [/vue-render] */
   /* [angular-render] const angularRender = new AngularPlugin<Schemes, AreaExtra>({ injector }) [/angular-render] */
   /* [svelte-render] const svelteRender = new SveltePlugin<Schemes, AreaExtra>() [/svelte-render] */

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<Schemes>()
   const area = new AreaPlugin<Schemes, AreaExtra>(container)
-  /* [react-render] const reactRender = new ReactPlugin<Schemes, AreaExtra>(/* [react18] { createRoot } [/react18] */)[/react-render] */
+  /* [react-render] const reactRender = new ReactPlugin<Schemes, AreaExtra>(/* [react18] { createRoot } [/react18] *//* [react19] { createRoot } [/react19] */)[/react-render] */
   /* [vue-render] const vueRender = new VuePlugin<Schemes, AreaExtra>() [/vue-render] */
   /* [angular-render] const angularRender = new AngularPlugin<Schemes, AreaExtra>({ injector }) [/angular-render] */
   /* [svelte-render] const svelteRender = new SveltePlugin<Schemes, AreaExtra>() [/svelte-render] */

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<Schemes>();
   const area = new AreaPlugin<Schemes, AreaExtra>(container);
   /* [!readonly] const connection = new ConnectionPlugin<Schemes, AreaExtra>() [/!readonly] */
-  /* [react-render] const reactRender = new ReactPlugin<Schemes, AreaExtra>(/* [react18] { createRoot } [/react18] */)[/react-render] */
+  /* [react-render] const reactRender = new ReactPlugin<Schemes, AreaExtra>(/* [react18] { createRoot } [/react18] *//* [react19] { createRoot } [/react19] */)[/react-render] */
   /* [vue-render] const vueRender = new VuePlugin<Schemes, AreaExtra>() [/vue-render] */
   /* [angular-render] const angularRender = new AngularPlugin<Schemes, AreaExtra>({ injector }) [/angular-render] */
   /* [svelte-render] const svelteRender = new SveltePlugin<Schemes, AreaExtra>() [/svelte-render] */

src/app/features.ts

@@ -57,7 +57,7 @@
   ]
 
   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),
@@ -246,5 +246,5 @@
 }
 
 export function getDependencies(features: Feature[]) {
   return features.map(feature => feature.requiredDependencies || []).flat()
 }

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

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'