From 28bfcb49b39efcf81527231911a6deaf70ea38c5 Mon Sep 17 00:00:00 2001 From: Ni55aN Date: Fri, 9 Jan 2026 13:36:17 +0000 Subject: [PATCH] feat(docs): update to support angular 21 --- content/en/docs/03.concepts/6.integration.md | 2 +- .../docs/04.guides/02.renderers/3.angular.md | 29 +++++-------------- content/en/docs/19.quality-assurance.md | 2 +- content/uk/docs/03.concepts/6.integration.md | 2 +- .../docs/04.guides/02.renderers/3.angular.md | 29 +++++-------------- content/uk/docs/19.quality-assurance.md | 2 +- 6 files changed, 18 insertions(+), 48 deletions(-) diff --git a/content/en/docs/03.concepts/6.integration.md b/content/en/docs/03.concepts/6.integration.md index 52bd3882..4692f2f5 100644 --- a/content/en/docs/03.concepts/6.integration.md +++ b/content/en/docs/03.concepts/6.integration.md @@ -28,7 +28,7 @@ By default, you can use the classic preset that has built-in components for: - some controls (numeric or text input fields) ```ts -import { AngularPlugin, AngularArea2D, Presets as AngularPresets } from 'rete-angular-plugin/20' +import { AngularPlugin, AngularArea2D, Presets as AngularPresets } from 'rete-angular-plugin/21' const angular = new AngularPlugin>({ injector }) diff --git a/content/en/docs/04.guides/02.renderers/3.angular.md b/content/en/docs/04.guides/02.renderers/3.angular.md index e80ab7e5..5b9cb135 100644 --- a/content/en/docs/04.guides/02.renderers/3.angular.md +++ b/content/en/docs/04.guides/02.renderers/3.angular.md @@ -22,29 +22,29 @@ This guide is an extension of the [Basic](/docs/guides/basic) guide and provides This plugin offers a classic preset that comes with visual components for nodes, connections, sockets, and input controls. -Compatible with Angular 12, 13, 14, 15, 16, 17, 18, 19 and 20 +Compatible with Angular 12, 13, 14, 15, 16, 17, 18, 19, 20 and 21 -This plugin is **exclusively** designed for Angular applications as it requires an `Injector` instance, unlike other render plugins. Additionally, the plugin supports Standalone mode in integration starting from Angular 19, with enhanced features in Angular 20. +This plugin is **exclusively** designed for Angular applications as it requires an `Injector` instance, unlike other render plugins. Additionally, the plugin supports Standalone mode in integration starting from Angular 19, with enhanced features in Angular 20 and 21. ## Install dependencies {#install-dependencies} :kit ```bash -npm i rete-angular-plugin rete-render-utils @angular/elements@20 +npm i rete-angular-plugin rete-render-utils @angular/elements@21 ``` **Please note**: this plugin relies on `@angular/elements`, which is based on Web Components. However, Web Components have a limitation - they [cannot be unregistered](https://github.com/WICG/webcomponents/issues/754). This limitation may result in the reuse of the initial Angular component instead of creating a new one when a node with the same identifier is added, potentially leading to the use of outdated data within a custom node, such as data from an injected service. ## Plugin connection {#connect-plugin} -This is an example of integration in **Angular 20**, but you can specify a different version (12, 13, 14, 15, 16, 17, 18, 19 or 20) in the import that matches the version of your application. +This is an example of integration in **Angular 21**, but you can specify a different version (12, 13, 14, 15, 16, 17, 18, 19, 20 or 21) in the import that matches the version of your application. These versions have been compiled with Ivy. ```ts import { AreaPlugin } from "rete-area-plugin"; -import { AngularPlugin, Presets, AngularArea2D } from "rete-angular-plugin/20"; +import { AngularPlugin, Presets, AngularArea2D } from "rete-angular-plugin/21"; type AreaExtra = AngularArea2D; @@ -86,7 +86,7 @@ node.addControl('my-control', new ClassicPreset.InputControl("number", { If you want to add different types of controls, you can return the necessary component in the `control` handler of `customize` property. ```tsx -import { ControlComponent } from "rete-angular-plugin/20"; +import { ControlComponent } from "rete-angular-plugin/21"; import { MyButtonComponent } from './my-button.component' render.addPreset(Presets.classic.setup({ @@ -154,7 +154,7 @@ The implementation of `CustomNodeComponent` is available in the **custom-node.co You can add an extra condition to apply this component only to specific nodes. ```ts -import { NodeComponent } from "rete-angular-plugin/20"; +import { NodeComponent } from "rete-angular-plugin/21"; render.addPreset(Presets.classic.setup({ customize: { @@ -218,21 +218,6 @@ In order to customize the context menu for this rendering plugin, one can overri } ``` -## Angular 20 Features {#angular-20-features} - -Angular 20 brings several improvements that enhance the integration with Rete.js: - -- **Enhanced Standalone Components**: Improved support for standalone components makes integration more streamlined -- **Better Tree-shaking**: Optimized bundle sizes for applications using rete-angular-plugin -- **Improved Type Safety**: Enhanced TypeScript support for better development experience -- **Performance Optimizations**: Better change detection and rendering performance - -To take advantage of these features, make sure to use the version-specific import: - -```ts -import { AngularPlugin, Presets, AngularArea2D } from "rete-angular-plugin/20"; -``` - ## Other presets {#other-presets} - [context menu](/docs/guides/context-menu) diff --git a/content/en/docs/19.quality-assurance.md b/content/en/docs/19.quality-assurance.md index f1ad1bd1..68484786 100644 --- a/content/en/docs/19.quality-assurance.md +++ b/content/en/docs/19.quality-assurance.md @@ -2,7 +2,7 @@ description: Learn about our quality assurance practices, including unit and E2E testing. We rely on Playwright for comprehensive testing from the user's perspective keywords: qa,quality assurance,unit testing,e2e testing,playwright stacks: [ - { name: "Angular", versions: [20,19,18,17,16,15,14,13,12] }, + { name: "Angular", versions: [21,20,19,18,17,16,15,14,13,12] }, { name: "Svelte", versions: [5,4,3] }, { name: "Vue.js", versions: [3,2] }, { name: "React.js", versions: [19,18,17,16], warnings: [{ browser: 'Chromium,Firefox,WebKit', version: 16, text: 'Known issue with movement' }] }, diff --git a/content/uk/docs/03.concepts/6.integration.md b/content/uk/docs/03.concepts/6.integration.md index 733ab14b..627b0476 100644 --- a/content/uk/docs/03.concepts/6.integration.md +++ b/content/uk/docs/03.concepts/6.integration.md @@ -28,7 +28,7 @@ keywords: інтеграція,ui,рендерінг,react.js,vue.js,angular,sve - деяких елементів керування (поля введення чисел або тексту) ```ts -import { AngularPlugin, AngularArea2D, Presets as AngularPresets } from 'rete-angular-plugin/20' +import { AngularPlugin, AngularArea2D, Presets as AngularPresets } from 'rete-angular-plugin/21' const angular = new AngularPlugin>({ injector }) diff --git a/content/uk/docs/04.guides/02.renderers/3.angular.md b/content/uk/docs/04.guides/02.renderers/3.angular.md index 07222345..6dfc9138 100644 --- a/content/uk/docs/04.guides/02.renderers/3.angular.md +++ b/content/uk/docs/04.guides/02.renderers/3.angular.md @@ -22,29 +22,29 @@ keywords: angular,рендерінг Цей плагін пропонує класичний пресет, який містить візуальні компоненти для вузлів, з’єднань, сокетів і елементів керування введенням. -Сумісний з Angular 12, 13, 14, 15, 16, 17, 18, 19 та 20 +Сумісний з Angular 12, 13, 14, 15, 16, 17, 18, 19, 20 та 21 -Цей плагін розроблено **ексклюзивно** для додатків Angular, оскільки для нього потрібен екземпляр `Injector`, на відміну від інших плагінів візуалізації. Окрім цього, плагін підтримує Standalone режим в інтеграції починаючи з Angular 19, з покращеними функціями в Angular 20. +Цей плагін розроблено **ексклюзивно** для додатків Angular, оскільки для нього потрібен екземпляр `Injector`, на відміну від інших плагінів візуалізації. Окрім цього, плагін підтримує Standalone режим в інтеграції починаючи з Angular 19, з покращеними функціями в Angular 20 та 21. ## Встановити залежності {#install-dependencies} :kit ```bash -npm i rete-angular-plugin rete-render-utils @angular/elements@20 +npm i rete-angular-plugin rete-render-utils @angular/elements@21 ``` **Зверніть увагу**: цей плагін покладається на `@angular/elements`, який базується на Веб компонентах. Однак Веб компоненти мають обмеження — їх [реєстрацію не можна скасувати](https://github.com/WICG/webcomponents/issues/754). Це обмеження може призвести до повторного використання початкового компонента Angular замість створення нового, коли додається вузол із тим самим ідентифікатором, що потенційно може призвести до використання застарілих даних у кастомному вузлі, таких як дані з ін'єктованого сервісу. ## Підключення планіга {#connect-plugin} -Це приклад інтеграції в **Angular 20**, але ви можете вказати іншу версію (12, 13, 14, 15, 16, 17, 18, 19 або 20) в імпорті, яка відповідає версії вашого додатку. +Це приклад інтеграції в **Angular 21**, але ви можете вказати іншу версію (12, 13, 14, 15, 16, 17, 18, 19, 20 або 21) в імпорті, яка відповідає версії вашого додатку. Ці версії були скомпільовані за допомогою Ivy. ```ts import { AreaPlugin } from "rete-area-plugin"; -import { AngularPlugin, Presets, AngularArea2D } from "rete-angular-plugin/20"; +import { AngularPlugin, Presets, AngularArea2D } from "rete-angular-plugin/21"; type AreaExtra = AngularArea2D; @@ -86,7 +86,7 @@ node.addControl('my-control', new ClassicPreset.InputControl("number", { Якщо ви хочете додати різні типи контролів, ви можете повернути необхідний функціональний компонент в обробнику `control` властивості `customize`. ```tsx -import { ControlComponent } from "rete-angular-plugin/20"; +import { ControlComponent } from "rete-angular-plugin/21"; import { MyButtonComponent } from './my-button.component' render.addPreset(Presets.classic.setup({ @@ -154,7 +154,7 @@ render.addPreset(Presets.classic.setup({ Ви можете додати додаткову умову для застосування цього компонента лише до певних вузлів. ```ts -import { NodeComponent } from "rete-angular-plugin/20"; +import { NodeComponent } from "rete-angular-plugin/21"; render.addPreset(Presets.classic.setup({ customize: { @@ -225,18 +225,3 @@ render.addPreset(Presets.classic.setup({ - [зміна маршруту](/uk/docs/guides/reroute) Перегляньте повний результат на сторінці прикладу [Кастомізація для Angular](/uk/examples/customization/angular). - -## Функції Angular 20 {#angular-20-features} - -Angular 20 пропонує кілька покращень, які підвищують інтеграцію з Rete.js: - -- **Покращені Standalone Components**: Поліпшена підтримка окремих компонентів робить інтеграцію більш ефективною -- **Краще Tree-shaking**: Оптимізовані розміри бандлів для додатків, що використовують rete-angular-plugin -- **Покращена Type Safety**: Розширена підтримка TypeScript для кращого досвіду розробки -- **Оптимізації продуктивності**: Краще виявлення змін та продуктивність рендерингу - -Щоб скористатися цими функціями, переконайтеся, що використовуєте імпорт для конкретної версії: - -```ts -import { AngularPlugin, Presets, AngularArea2D } from "rete-angular-plugin/20"; -``` diff --git a/content/uk/docs/19.quality-assurance.md b/content/uk/docs/19.quality-assurance.md index 4ed5261e..a686efed 100644 --- a/content/uk/docs/19.quality-assurance.md +++ b/content/uk/docs/19.quality-assurance.md @@ -2,7 +2,7 @@ description: Дізнайтеся про наші методи забезпечення якості, включаючи юніт тестування та тестування E2E. Ми покладаємося на Playwright для комплексного тестування з точки зору користувача keywords: qa,забезпечення якості,юніт тестування,e2e тестування,playwright stacks: [ - { name: "Angular", versions: [20,19,18,17,16,15,14,13,12] }, + { name: "Angular", versions: [21,20,19,18,17,16,15,14,13,12] }, { name: "Svelte", versions: [5,4,3] }, { name: "Vue.js", versions: [3,2] }, { name: "React.js", versions: [19,18,17,16], warnings: [{ browser: 'Chromium,Firefox,WebKit', version: 16, text: 'Відома проблема з переміщенням' }] },