feat(angular): add support for angular 21

.github/workflows/test-build-angular.yml

@@ -26,7 +26,7 @@ jobs:
       fail-fast: false
       max-parallel: 3
       matrix:
-        version: [20,19,18,17,16,15,14,13,12]
+        version: [21,20,19,18,17,16,15,14,13,12]
     uses: ./.github/workflows/test-build.yml
     with:
       os: ${{ inputs.os }}

assets/app/stack/angular/modules/app/app.component.ts

@@ -5,15 +5,31 @@ import { createEditor } from './rete'
 @Component({
   selector: 'app-root',
   templateUrl:
-    /* [!angular20] './app.component.html', [/!angular20] */
+    /* [angular12] './app.component.html', [/angular12] */
+    /* [angular13] './app.component.html', [/angular13] */
+    /* [angular14] './app.component.html', [/angular14] */
+    /* [angular15] './app.component.html', [/angular15] */
+    /* [angular16] './app.component.html', [/angular16] */
+    /* [angular17] './app.component.html', [/angular17] */
+    /* [angular18] './app.component.html', [/angular18] */
+    /* [angular19] './app.component.html', [/angular19] */
     /* [angular20] './app.html', [/angular20] */
+    /* [angular21] './app.html', [/angular21] */
   styleUrls: [
-    /* [!angular20] './app.component.css', [/!angular20] */
+    /* [angular12] './app.component.css', [/angular12] */
+    /* [angular13] './app.component.css', [/angular13] */
+    /* [angular14] './app.component.css', [/angular14] */
+    /* [angular15] './app.component.css', [/angular15] */
+    /* [angular16] './app.component.css', [/angular16] */
+    /* [angular17] './app.component.css', [/angular17] */
+    /* [angular18] './app.component.css', [/angular18] */
+    /* [angular19] './app.component.css', [/angular19] */
     /* [angular20] './app.css', [/angular20] */
+    /* [angular21] './app.css', [/angular21] */
     './common.css'
   ]
 })
-export class /* [!angular20] AppComponent [/!angular20] *//* [angular20] App [/angular20] */ implements AfterViewInit {
+export class /* [angular12] AppComponent [/angular12] *//* [angular13] AppComponent [/angular13] *//* [angular14] AppComponent [/angular14] *//* [angular15] AppComponent [/angular15] *//* [angular16] AppComponent [/angular16] *//* [angular17] AppComponent [/angular17] *//* [angular18] AppComponent [/angular18] *//* [angular19] AppComponent [/angular19] *//* [angular20] App [/angular20] *//* [angular21] App [/angular21] */ implements AfterViewInit {
   title = 'angular'
   @ViewChild('rete') container!: ElementRef<HTMLElement>
 

assets/app/stack/angular/modules/app/app.module.ts

@@ -1,13 +1,56 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-/* [!angular20] import { AppComponent } from './app.component'; [/!angular20] */
+/* [angular12] import { AppComponent } from './app.component'; [/angular12] */
+/* [angular13] import { AppComponent } from './app.component'; [/angular13] */
+/* [angular14] import { AppComponent } from './app.component'; [/angular14] */
+/* [angular15] import { AppComponent } from './app.component'; [/angular15] */
+/* [angular16] import { AppComponent } from './app.component'; [/angular16] */
+/* [angular17] import { AppComponent } from './app.component'; [/angular17] */
+/* [angular18] import { AppComponent } from './app.component'; [/angular18] */
+/* [angular19] import { AppComponent } from './app.component'; [/angular19] */
 /* [angular20] import { App } from './app'; [/angular20] */
-/* [!angular20]
+/* [angular21] import { App } from './app'; [/angular21] */
+/* [angular12]
 import { CustomSocketComponent } from "./customization/custom-socket/custom-socket.component"
 import { CustomNodeComponent } from "./customization/custom-node/custom-node.component"
 import { CustomConnectionComponent } from "./customization/custom-connection/custom-connection.component";
-[/!angular20] */
+[/angular12] */
+/* [angular13]
+import { CustomSocketComponent } from "./customization/custom-socket/custom-socket.component"
+import { CustomNodeComponent } from "./customization/custom-node/custom-node.component"
+import { CustomConnectionComponent } from "./customization/custom-connection/custom-connection.component";
+[/angular13] */
+/* [angular14]
+import { CustomSocketComponent } from "./customization/custom-socket/custom-socket.component"
+import { CustomNodeComponent } from "./customization/custom-node/custom-node.component"
+import { CustomConnectionComponent } from "./customization/custom-connection/custom-connection.component";
+[/angular14] */
+/* [angular15]
+import { CustomSocketComponent } from "./customization/custom-socket/custom-socket.component"
+import { CustomNodeComponent } from "./customization/custom-node/custom-node.component"
+import { CustomConnectionComponent } from "./customization/custom-connection/custom-connection.component";
+[/angular15] */
+/* [angular16]
+import { CustomSocketComponent } from "./customization/custom-socket/custom-socket.component"
+import { CustomNodeComponent } from "./customization/custom-node/custom-node.component"
+import { CustomConnectionComponent } from "./customization/custom-connection/custom-connection.component";
+[/angular16] */
+/* [angular17]
+import { CustomSocketComponent } from "./customization/custom-socket/custom-socket.component"
+import { CustomNodeComponent } from "./customization/custom-node/custom-node.component"
+import { CustomConnectionComponent } from "./customization/custom-connection/custom-connection.component";
+[/angular17] */
+/* [angular18]
+import { CustomSocketComponent } from "./customization/custom-socket/custom-socket.component"
+import { CustomNodeComponent } from "./customization/custom-node/custom-node.component"
+import { CustomConnectionComponent } from "./customization/custom-connection/custom-connection.component";
+[/angular18] */
+/* [angular19]
+import { CustomSocketComponent } from "./customization/custom-socket/custom-socket.component"
+import { CustomNodeComponent } from "./customization/custom-node/custom-node.component"
+import { CustomConnectionComponent } from "./customization/custom-connection/custom-connection.component";
+[/angular19] */
 /* [angular12] import { ReteModule } from 'rete-angular-plugin/12'; [/angular12] */
 /* [angular13] import { ReteModule } from 'rete-angular-plugin/13'; [/angular13] */
 /* [angular14] import { ReteModule } from 'rete-angular-plugin/14'; [/angular14] */
@@ -17,24 +60,75 @@ import { CustomConnectionComponent } from "./customization/custom-connection/cus
 /* [angular18] import { ReteModule } from 'rete-angular-plugin/18'; [/angular18] */
 /* [angular19] import { ReteModule } from 'rete-angular-plugin/19'; [/angular19] */
 /* [angular20] import { ReteModule } from 'rete-angular-plugin/20'; [/angular20] */
+/* [angular21] import { ReteModule } from 'rete-angular-plugin/21'; [/angular21] */
 
 @NgModule({
   declarations: [
-    /* [!angular20]
+    /* [angular12]
+    AppComponent,
+    CustomSocketComponent,
+    CustomNodeComponent,
+    CustomConnectionComponent
+    [/angular12] */
+    /* [angular13]
+    AppComponent,
+    CustomSocketComponent,
+    CustomNodeComponent,
+    CustomConnectionComponent
+    [/angular13] */
+    /* [angular14]
+    AppComponent,
+    CustomSocketComponent,
+    CustomNodeComponent,
+    CustomConnectionComponent
+    [/angular14] */
+    /* [angular15]
+    AppComponent,
+    CustomSocketComponent,
+    CustomNodeComponent,
+    CustomConnectionComponent
+    [/angular15] */
+    /* [angular16]
+    AppComponent,
+    CustomSocketComponent,
+    CustomNodeComponent,
+    CustomConnectionComponent
+    [/angular16] */
+    /* [angular17]
+    AppComponent,
+    CustomSocketComponent,
+    CustomNodeComponent,
+    CustomConnectionComponent
+    [/angular17] */
+    /* [angular18]
+    AppComponent,
+    CustomSocketComponent,
+    CustomNodeComponent,
+    CustomConnectionComponent
+    [/angular18] */
+    /* [angular19]
     AppComponent,
     CustomSocketComponent,
     CustomNodeComponent,
     CustomConnectionComponent
-    [/!angular20] */
+    [/angular19] */
   ],
   imports: [
     BrowserModule,
     /* [angular-render] ReteModule [/angular-render] */
   ],
   providers: [],
   bootstrap: [
-    /* [!angular20] AppComponent [/!angular20] */
+    /* [angular12] AppComponent [/angular12] */
+    /* [angular13] AppComponent [/angular13] */
+    /* [angular14] AppComponent [/angular14] */
+    /* [angular15] AppComponent [/angular15] */
+    /* [angular16] AppComponent [/angular16] */
+    /* [angular17] AppComponent [/angular17] */
+    /* [angular18] AppComponent [/angular18] */
+    /* [angular19] AppComponent [/angular19] */
     /* [angular20] App [/angular20] */
+    /* [angular21] App [/angular21] */
   ]
 })
 export class AppModule { }

assets/app/stack/angular/modules/app/customization/custom-node/custom-node.component.ts

@@ -14,10 +14,15 @@ import { RefDirective, ImpureKeyvaluePipe } from 'rete-angular-plugin/19';
 import { CommonModule } from '@angular/common';
 import { RefDirective, ImpureKeyvaluePipe } from 'rete-angular-plugin/20';
 [/angular20] */
+/* [angular21]
+import { CommonModule } from '@angular/common';
+import { RefDirective, ImpureKeyvaluePipe } from 'rete-angular-plugin/21';
+[/angular21] */
 
 @Component({
   /* [angular19] imports: [CommonModule, RefDirective, ImpureKeyvaluePipe], [/angular19] */
   /* [angular20] imports: [CommonModule, RefDirective, ImpureKeyvaluePipe], [/angular20] */
+  /* [angular21] imports: [CommonModule, RefDirective, ImpureKeyvaluePipe], [/angular21] */
   templateUrl: "./custom-node.component.html",
   styleUrls: ["./custom-node.component.sass"],
   host: {

assets/app/templates/3d

@@ -7,7 +7,7 @@ import { ConnectionPlugin, Presets as ConnectionPresets } from 'rete-connection-
 /* [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] */
+/* [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] *//* [angular21] /21 [/angular21] */' [/angular-render] */
 /* [svelte-render] import { SveltePlugin, type SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin/* [svelte5] /5 [/svelte5] */' [/svelte-render] */
 /* [lit-render] import { LitPlugin, type LitArea2D, Presets as LitPresets } from '@retejs/lit-plugin' [/lit-render] */
 /* [dataflow] import { DataflowEngine, type DataflowNode } from 'rete-engine' [/dataflow] */

assets/app/templates/customization

@@ -9,7 +9,7 @@ import {
 /* [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-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] *//* [angular21] /21 [/angular21] */' [/stack-angular] */
 /* [stack-svelte] import { SveltePlugin, type SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin/* [svelte5] /5 [/svelte5] */' [/stack-svelte] */
 /* [stack-lit] import { LitPlugin, type LitArea2D, Presets as LitPresets } from '@retejs/lit-plugin' [/stack-lit] */
 /* [stack-react] import { CustomNode } from "../customization/CustomNode";

assets/app/templates/default

@@ -6,7 +6,7 @@ import { type Area2D, /* [import-area-extensions] AreaExtensions, [/import-area-
 /* [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] */
+/* [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] *//* [angular21] /21 [/angular21] */' [/angular-render] */
 /* [svelte-render] import { SveltePlugin, type SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin/* [svelte5] /5 [/svelte5] */' [/svelte-render] */
 /* [lit-render] import { LitPlugin, type LitArea2D, Presets as LitPresets } from '@retejs/lit-plugin' [/lit-render] */
 /* [dataflow] import { DataflowEngine, type DataflowNode } from 'rete-engine' [/dataflow] */

assets/app/templates/perf

@@ -5,7 +5,7 @@ import { /* [import-area-extensions] AreaExtensions, [/import-area-extensions] *
 /* [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] */
+/* [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] *//* [angular21] /21 [/angular21] */' [/angular-render] */
 /* [svelte-render] import { SveltePlugin, type SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin/* [svelte5] /5 [/svelte5] */' [/svelte-render] */
 /* [lit-render] import { LitPlugin, type LitArea2D, Presets as LitPresets } from '@retejs/lit-plugin' [/lit-render] */
 

assets/app/templates/scopes

@@ -6,7 +6,7 @@ import { type Area2D, /* [import-area-extensions] AreaExtensions, [/import-area-
 /* [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] */
+/* [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] *//* [angular21] /21 [/angular21] */' [/angular-render] */
 /* [svelte-render] import { SveltePlugin, type SvelteArea2D, Presets as SveltePresets } from 'rete-svelte-plugin/* [svelte5] /5 [/svelte5] */' [/svelte-render] */
 /* [lit-render] import { LitPlugin, type LitArea2D, Presets as LitPresets } from '@retejs/lit-plugin' [/lit-render] */
 import { ScopesPlugin, Presets as ScopesPresets } from "rete-scopes-plugin";

src/app/stack/angular/index.ts

@@ -17,7 +17,7 @@ export type {
 
 export class AngularBuilder implements AppBuilder {
   public name = 'Angular'
-  public versions: AngularVersion[] = [12, 13, 14, 15, 16, 17, 18, 19, 20]
+  public versions: AngularVersion[] = [12, 13, 14, 15, 16, 17, 18, 19, 20, 21]
   public foundation = 'angular' as const
 
   public async create(name: string, version: number) {
@@ -84,7 +84,7 @@ export class AngularBuilder implements AppBuilder {
   }
 
   getStaticPath(name: string, version?: number) {
-    if (version && [17, 18, 19, 20].includes(version)) return join('dist', name, 'browser')
+    if (version && [17, 18, 19, 20, 21].includes(version)) return join('dist', name, 'browser')
     return join('dist', name)
   }
 

src/app/stack/angular/types.ts

@@ -1,6 +1,6 @@
 import type { TSConfig } from '../../../shared/ts-config'
 
-export type AngularVersion = 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20
+export type AngularVersion = 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21
 
 export interface AngularTSConfig extends TSConfig {
   angularCompilerOptions: {