Merge pull request #52 from retejs/support-angular-18

Support angular 18

Author: Ni55aN

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

@@ -11,6 +11,7 @@ import { CustomConnectionComponent } from "./customization/custom-connection/cus
 /* [angular15] import { ReteModule } from 'rete-angular-plugin/15'; [/angular15] */
 /* [angular16] import { ReteModule } from 'rete-angular-plugin/16'; [/angular16] */
 /* [angular17] import { ReteModule } from 'rete-angular-plugin/17'; [/angular17] */
+/* [angular18] import { ReteModule } from 'rete-angular-plugin/18'; [/angular18] */
 
 @NgModule({
   declarations: [

assets/app/templates/3d

@@ -6,7 +6,7 @@ import { ConnectionPlugin, Presets as ConnectionPresets } from 'rete-connection-
 /* [react-render] import { ReactPlugin, ReactArea2D, Presets as ReactPresets } from 'rete-react-plugin' [/react-render] */
 /* [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] */' [/angular-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] */
 /* [lit-render] import { LitPlugin, LitArea2D, Presets as LitPresets } from '@retejs/lit-plugin' [/lit-render] */
 /* [dataflow] import { DataflowEngine, DataflowNode } from 'rete-engine' [/dataflow] */
@@ -206,7 +206,7 @@ export async function createEditor(container: HTMLElement/* [stack-angular] , in
     } [/selectable] */
   }));[/reroute] */
   [/lit-render] */
-  
+
   /* [react-render] Area3DExtensions.forms.connection(reactRender) [/react-render] */
   /* [angular-render] Area3DExtensions.forms.connection(angularRender) [/angular-render] */
   /* [vue-render] Area3DExtensions.forms.connection(vueRender) [/vue-render] */

assets/app/templates/customization

@@ -8,7 +8,7 @@ import {
 /* [stack-react] import { ReactPlugin, ReactArea2D, Presets as ReactPresets } from 'rete-react-plugin' [/stack-react] */
 /* [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] */' [/stack-angular] */
+/* [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-lit] import { LitPlugin, LitArea2D, Presets as LitPresets } from '@retejs/lit-plugin' [/stack-lit] */
 /* [stack-react] import { CustomNode } from "../customization/CustomNode";

assets/app/templates/default

@@ -5,7 +5,7 @@ import { Area2D, /* [import-area-extensions] AreaExtensions, [/import-area-exten
 /* [react-render] import { ReactPlugin, ReactArea2D, Presets as ReactPresets } from 'rete-react-plugin' [/react-render] */
 /* [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] */' [/angular-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] */
 /* [lit-render] import { LitPlugin, LitArea2D, Presets as LitPresets } from '@retejs/lit-plugin' [/lit-render] */
 /* [dataflow] import { DataflowEngine, DataflowNode } from 'rete-engine' [/dataflow] */

assets/app/templates/perf

@@ -4,7 +4,7 @@ import { /* [import-area-extensions] AreaExtensions, [/import-area-extensions] *
 /* [react-render] import { ReactPlugin, ReactArea2D, Presets as ReactPresets } from 'rete-react-plugin' [/react-render] */
 /* [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] */' [/angular-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] */
 /* [lit-render] import { LitPlugin, LitArea2D, Presets as LitPresets } from '@retejs/lit-plugin' [/lit-render] */
 

assets/app/templates/scopes

@@ -5,7 +5,7 @@ import { Area2D, /* [import-area-extensions] AreaExtensions, [/import-area-exten
 /* [react-render] import { ReactPlugin, ReactArea2D, Presets as ReactPresets } from 'rete-react-plugin' [/react-render] */
 /* [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] */' [/angular-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] */
 /* [lit-render] import { LitPlugin, LitArea2D, Presets as LitPresets } from '@retejs/lit-plugin' [/lit-render] */
 import { ScopesPlugin, Presets as ScopesPresets } from "rete-scopes-plugin";

src/app/features.ts

@@ -1,4 +1,5 @@
 import { AppStack } from '.'
+import { AngularVersion } from './stack/angular'
 import { DefaultTemplateKey } from './template-builder'
 
 function ver(name: string, next: boolean) {
@@ -35,7 +36,7 @@ export class Angular implements Feature {
   templateKeys: DefaultTemplateKey[] = ['angular-render']
   requiredDependencies: string[] = []
 
-  constructor(version: 12 | 13 | 14 | 15 | 16 | 17 | null, next: boolean) {
+  constructor(version: AngularVersion | null, next: boolean) {
     if (version !== null) this.templateKeys.push(`angular${version}`)
 
     this.requiredDependencies.push(

src/app/index.ts

@@ -9,6 +9,7 @@ import {
   ReactBuilder, ReactViteBuilder, SvelteBuilder,
   ViteBuilder, VueBuilder, VueViteBuilder
 } from './stack'
+import { AngularVersion } from './stack/angular'
 import { DefaultTemplateKey, TemplateBuilder } from './template-builder'
 
 export const builders = {
@@ -61,7 +62,7 @@ export async function createApp({ name, stack, version, features, depsAlias, for
     new Features.Default(builder.foundation, next),
     new Features.Area3D(!(builder instanceof AngularBuilder && selectedVersion < 13), next),
     new Features.Angular(builder.foundation === 'angular'
-      ? selectedVersion as 12 | 13 | 14 | 15 | 16 | 17
+      ? selectedVersion as AngularVersion
       : null, next),
     new Features.React(builder.foundation === 'react'
       ? selectedVersion

src/app/stack/angular/index.ts

@@ -9,15 +9,17 @@ import { TemplateBuilder } from '../../template-builder'
 import { removeBudgets } from './budgets'
 import { installCompatibleTS } from './compatibility'
 
+export type AngularVersion = 12 | 13 | 14 | 15 | 16 | 17 | 18
+
 export class AngularBuilder implements AppBuilder {
   public name = 'Angular'
-  public versions = [12, 13, 14, 15, 16, 17]
+  public versions: AngularVersion[] = [12, 13, 14, 15, 16, 17, 18]
   public foundation = 'angular' as const
 
   public async create(name: string, version: number) {
     const options = ['--defaults']
 
-    if (version === 17) options.push('--no-standalone')
+    if ([17, 18].includes(version)) options.push('--no-standalone')
 
     await execa('npx', ['--package', `@angular/cli@${version}`, 'ng', 'new', name, ...options], { stdio: 'inherit' })
     await execa('npx', [
@@ -68,7 +70,7 @@ export class AngularBuilder implements AppBuilder {
   }
 
   getStaticPath(name: string, version?: number) {
-    if (version === 17) return join('dist', name, 'browser')
+    if (version && [17, 18].includes(version)) return join('dist', name, 'browser')
     return join('dist', name)
   }
 

src/app/template-builder.ts

@@ -4,11 +4,12 @@ import { join } from 'path'
 import prettier from 'prettier'
 
 import { assets as assetsRoot } from '../consts'
+import { AngularVersion } from './stack/angular'
 
 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${12 | 13 | 14 | 15 | 16 | 17}`
+  | `vue${2 | 3}` | 'angular-render' | `angular${AngularVersion}`
   | 'svelte-render' | `svelte${3 | 4}` | 'lit-render' | `lit${3}`
   | 'dataflow' | 'arrange' | 'sizes' | 'readonly' | 'order-nodes' | 'selectable'
   | 'context-menu' | 'import-area-extensions' | 'minimap' | 'reroute' | `stack-${string}`