Rete Kit

Rete KitAngularVue.jsReact.jsVite.jsSvelteLitNext.jsNuxt

Метою цього інструменту є підвищення ефективності розробки плагінів або проектів із використанням цього фреймворку.

Він пропонує такі функції:

• Створення плагіна: скористайтеся цією функцією, щоб миттєво створити базову структуру плагіна, без необхідності налаштовування системи збірки, лінтера або тест-раннера
• Створення додатку: виберіть фреймворк для створення додатку, вкажіть версію та бажані функції та отримайте готовий до використання додаток, щоб розпочати процес розробки
• Масова збірка: виберіть копії репозиторіїв, що містять вихідний код плагінів, що розробляються, і цей інструмент почне їх збірку в режимі спостереження, а також синхронізує їхні залежності

Встановлення

npm i -g rete-kit

Створення додатоку

Режим опитувальника

rete-kit app

Або ви можете вказати параметри

rete-kit app --name <name> --stack <stack> --stack-version <version> --features <features> --deps-alias <deps-alias>

де

• <stack> параметр дозволяє обрати angular, vue, vue-vite, react, react-vite, svelte, lit-vite, vite, next або nuxt
• <features> - це список функцій редактора Rete.js, розділених комами.
• <deps-alias> - це файл JSON, який відображає залежності. За замовчуванням інсталюється остання версія з npmjs, але ви можете вказати іншу версію за допомогою формату name@version або шляху до архіву

Крім того, повторне виконання команди з тими самими параметрами name, stack і stack-version дає змогу застосовувати додаткові функції без необхідності повторного створення додатку.

Після завершення у вас буде директорія із додатком, який зазвичай можна запустити за допомогою команди npm run start (залежно від стеку). Відкриваючи додаток, ви можете вказати query параметр template в URL з такими значеннями:

• default: за замовчуванням, класичний граф із прикладом потоку даних
• perf: граф з великою кількістю вузлів, яку можна змінити за допомогою параметрів cols і rows
• customization: кастомні вузли та підключення, специфічні для кожного плагіна візуалізації
• 3d: cцена на основі three.js із інтегрованим редактором, що використовує rete-area-3d-plugin.

Наприклад, шаблон налаштування Angular доступний за адресою http://localhost:4200/?template=customization.

Створення плагіна

Ви можете легко створити плагін у своїй кодовій базі, наслідуючи приклад інших плагінів і розширивши Scope, без необхідності створювати його як окремий пакет.

Якщо ви хочете розробити плагін як окремий пакет, скористайтеся цією командою:

rete-kit plugin --name <plugin name>

де <plugin name> — це рядок, який буде перетворено в різні формати та використано в шаблонах, наприклад rete.config.ts та ім'я package.json.

Згенерований плагін містить усі необхідні конфігурації, що дозволяє негайно почати працювати з вихідним кодом.

Збірка залежностей для розробки

Розробка модулів, розділених на різні пакети, є складним процесом. На відміну від єдиної кодової бази, де система збірки може виявляти зміни в директорії та застосовувати hot reload, розробникам потрібно вручну налаштувати збірку кожної залежності, над якою вони працюють, і вставити зміни в проект.

По суті, npm link і bash скрипти можна використовувати для створення необхідних модулів у режимі спостереження. Однак npm link має певні обмеження, які можуть бути не відразу помітні. Ці обмеження можуть походити від спільних залежностей проекту та залежностей, над якими ми працюємо.

Команда rete-kit build була створена для вирішення таких проблем. Має два режими:

• збірка всіх залежностей проекту: вкажіть шлях вашого проекту. Інструмент сканує поточний каталог рекурсивно (до двох рівнів) на предмет репозиторіїв, які містять залежність rete. У режимі спостереження вони безпосередньо збираються в директорію node_modules, де вони використовуються

rete-kit build --for ./my-project

• виконання збірки певних директорій: вкажіть директорії, що містять вихідний код для залежностей, які мають бути включені під час процесу збірки, використовуючи опцію --folders. Подібно до першого режиму, отриману збірку буде вставлено в директорію node_modules цілі

rete-kit build --folders my-plugin-1,my-plugin-1,my-project

Зверніть увагу, що для повного використання функції hot reload вам потрібно вимкнути кеш для відповідних залежностей. Інакше будь-які внесені зміни не будуть застосовані на льоту. Щоб досягти цього в Webpack, ви можете вказати snapshot.managedPaths. Якщо проект усе ще не оновлюється, можливо, потрібно вручну очистити кеш скомпільованих модулів.