@pravosleva/reactive-engine 1.0.3-beta → 1.2.2-beta

package/README.md

@@ -2,25 +2,62 @@
 A lightweight, type-safe reactive engine built with TypeScript, featuring Dependency Injection and seamless React integration.
 
 ## Instruction
-- 🇬🇧 [In English](https://github.com/garage-13/reactive-engine/blob/main/docs/en/guides/index.md)
-- 🇷🇺 [In Russian](https://github.com/garage-13/reactive-engine/blob/main/docs/guides/index.md)
+- 🇬🇧 [In English](https://pravosleva.pro/reactive-engine/en)
+- 🇷🇺 [In Russian](https://pravosleva.pro/reactive-engine)
 
-**See also https://pravosleva.pro/reactive-engine**
+
+## 🎯 What Problems This Library Solves
+
+When building large-scale React applications, developers constantly run into architectural bottlenecks imposed by built-in state tools. `@pravosleva/reactive-engine` is designed to elegantly solve the following pain points:
+
+1. **Unnecessary Over-Rendering:**
+> * *The Problem:* React Context API and traditional immutability-based stores (Redux/Zustand) force all components reading from that state slice to re-render whenever even a single deeply nested property changes.
+> * *The Solution:* Fine-grained reactivity. Components micro-subscribe only to the specific primitive signals they display. State mutations update strictly the necessary DOM nodes.
+
+2. **UI Tearing and Lags in React 18+:**
+> * *The Problem:* Under React Concurrent Mode, standard external state managers can lead to UI tearing, where different parts of the screen temporarily display asynchronous, mismatching data.
+> * *The Solution:* The `useReactiveValue` hook is built on top of native `useSyncExternalStore`. This ensures absolute cross-component synchronization, shielding your interface from glitches and tearing.
+
+3. **Expensive CPU Re-calculations:**
+> * *The Problem:* Heavy array filtration, sorting, or data analytics functions trigger re-evaluations on every parent re-render or whenever unrelated props shift.
+> * *The Solution:* Lazy `Computed` properties with O(1) computation caching. The logic evaluates *only* when its underlying dependency signals change.
+
+4. **Network Request Flooding (Race Conditions):**
+> * *The Problem:* A user rapidly clicking through catalog filters or pagination options spawns cascades of overlapping network requests. An older, slower request might resolve *after* a newer one, overwriting fresh data (Race Condition).
+> * *The Solution:* The `Resource` utility automatically orchestrates native `AbortController` instances. Whenever dependency signals change, the previous pending fetch request is instantly cancelled at the browser's system level.
+
+5. **Cascading UI Updates (Render Cascades):**
+> * *The Problem:* Updating 3–4 connected state parameters inside a single event handler prompts 3–4 sequential UI update ticks, clogging the Event Loop.
+> * *The Solution:* 100% out-of-the-box automatic batching. The engine bundles all consecutive synchronous and asynchronous modifications into a single microtask, triggering exactly 1 final unified re-render.
+
+6. **Memory Leaks in Dynamic Architectures:**
+> * *The Problem:* Dynamically instantiating computed properties (e.g., dynamically filtering an active tab) accumulates abandoned reactive effects in memory that continue to listen to global state updates forever.
+> * *The Solution:* Built-in memory cleanup and computation memoization inside the core engine. The library hooks automatically trigger `.destroy()` on component unmount, seamlessly purging dead reactive effects from RAM.
 
 ## 📦 Installation
 
 Install the package via your favorite package manager:
 
 ```bash
-npm install @pravosleva/reactive-engine
-# or
 yarn add @pravosleva/reactive-engine
-# or
-pnpm add @pravosleva/reactive-engine
 ```
 
+## `peerDependencies`
+
+```json
+{
+  "@angular/core": ">=16.0.0",
+  "react": "^18.0.0 || ^19.2.0",
+  "react-dom": "^18.0.0 || ^19.2.0",
+  "vue": ">=3.2.0"
+}
+```
+
+## React
+
 ```tsx
-import { AbstractService, ReactiveEngine } from '@pravosleva/reactive-engine'
+import { AbstractService } from '@pravosleva/reactive-engine'
+import { ReactiveEngine } from '@pravosleva/reactive-engine/react'
 
 class Logic extends AbstractService {
   public counter = this.engine.signal<number>(0, 'example-01:signal:counter');
@@ -48,30 +85,84 @@ export const Example001 = () => {
 }
 ```
 
-## 🎯 What Problems This Library Solves
+## Vue 3
 
-When building large-scale React applications, developers constantly run into architectural bottlenecks imposed by built-in state tools. `@pravosleva/reactive-engine` is designed to elegantly solve the following pain points:
+```vue
+<script setup lang="ts">
+import { AbstractService } from '@pravosleva/reactive-engine'
+import { ReactiveEngine as ReactiveEngine4Vue } from '@pravosleva/reactive-engine/vue'
 
-1. **Unnecessary Over-Rendering:**
-> * *The Problem:* React Context API and traditional immutability-based stores (Redux/Zustand) force all components reading from that state slice to re-render whenever even a single deeply nested property changes.
-> * *The Solution:* Fine-grained reactivity. Components micro-subscribe only to the specific primitive signals they display. State mutations update strictly the necessary DOM nodes.
+class CounterLogic extends AbstractService {
+  public counter = this.engine.signal<number>(0, 'vue-example:counter');
 
-2. **UI Tearing and Lags in React 18+:**
-> * *The Problem:* Under React Concurrent Mode, standard external state managers can lead to UI tearing, where different parts of the screen temporarily display asynchronous, mismatching data.
-> * *The Solution:* The `useReactiveValue` hook is built on top of native `useSyncExternalStore`. This ensures absolute cross-component synchronization, shielding your interface from glitches and tearing.
+  public inc = () => {
+    this.counter.value += 1
+  }
+}
 
-3. **Expensive CPU Re-calculations:**
-> * *The Problem:* Heavy array filtration, sorting, or data analytics functions trigger re-evaluations on every parent re-render or whenever unrelated props shift.
-> * *The Solution:* Lazy `Computed` properties with O(1) computation caching. The logic evaluates *only* when its underlying dependency signals change.
+const engine = new ReactiveEngine4Vue()
+const logic = engine.inject(CounterLogic)
+const counter = engine.use(logic.counter)
+</script>
 
-4. **Network Request Flooding (Race Conditions):**
-> * *The Problem:* A user rapidly clicking through catalog filters or pagination options spawns cascades of overlapping network requests. An older, slower request might resolve *after* a newer one, overwriting fresh data (Race Condition).
-> * *The Solution:* The `Resource` utility automatically orchestrates native `AbortController` instances. Whenever dependency signals change, the previous pending fetch request is instantly cancelled at the browser's system level.
+<template>
+  <div>
+    <div>Vue 3 Signal Example</div>
 
-5. **Cascading UI Updates (Render Cascades):**
-> * *The Problem:* Updating 3–4 connected state parameters inside a single event handler prompts 3–4 sequential UI update ticks, clogging the Event Loop.
-> * *The Solution:* 100% out-of-the-box automatic batching. The engine bundles all consecutive synchronous and asynchronous modifications into a single microtask, triggering exactly 1 final unified re-render.
+    <!-- Убираем .value, доверяем автоматическому развертыванию Vue -->
+    <code>{{ counter }}</code>
 
-6. **Memory Leaks in Dynamic Architectures:**
-> * *The Problem:* Dynamically instantiating computed properties (e.g., dynamically filtering an active tab) accumulates abandoned reactive effects in memory that continue to listen to global state updates forever.
-> * *The Solution:* Built-in memory cleanup and computation memoization inside the core engine. The library hooks automatically trigger `.destroy()` on component unmount, seamlessly purging dead reactive effects from RAM.
+    <div>
+      <button @click="logic.inc">
+        INC
+      </button>
+    </div>
+  </div>
+</template>
+```
+
+## Angular
+
+```ts
+import { Component } from '@angular/core'
+import { AbstractService } from '@pravosleva/reactive-engine'
+import { ReactiveEngine as ReactiveEngine4Angular } from '@pravosleva/reactive-engine/angular'
+
+// 1. Описываем изолированную бизнес-логику (Ядро/Сервис) — код 1-в-1 как в React/Vue
+class CounterLogic extends AbstractService {
+  public counter = this.engine.signal<number>(0, 'angular-example:counter');
+
+  public inc = () => {
+    this.counter.value += 1;
+  };
+}
+
+@Component({
+  selector: 'app-counter-example',
+  standalone: true,
+  // В шаблоне Angular Signals вызываются как функции: counter()
+  template: `
+    <div class="unit stack2">
+      <div class="absoluteUnitLabel">Angular 16+ Signal Example</div>
+      <code>{{ counter() }}</code>
+      <div class="catSection">
+        <button (click)="logic.inc()" class="btn neonBtn neonBtn--primary neonBtn--outlined">
+          INC (Angular)
+        </button>
+      </div>
+    </div>
+  `,
+  styleUrls: ['./ui.common.module.scss', './ui.button.module.scss'] // Ваши SCSS стили
+})
+export class AngularCounterComponent {
+  // 2. Инициализируем Angular-версию движка
+  private engine = new ReactiveEngine4Angular();
+
+  // 3. Внедряем сервис из DI-контейнера
+  public logic = this.engine.inject(CounterLogic);
+
+  // 4. Превращаем сигнал ядра в нативный Angular Signal через метод .use()
+  // Метод inject(DestroyRef) под капотом use() отработает корректно, так как мы находимся в фазе инициализации класса
+  public counter = this.engine.use(this.logic.counter);
+}
+```

package/dist/angular/ReactiveEngine4Angular.cjs

@@ -0,0 +1,2 @@
+const e=require("../core.cjs");let t=require("@angular/core");var n=class extends e.ReactiveEngine{use(e,n){let r=(0,t.signal)(e.value),i=e.subscribe(e=>{r.set(e)}),a=()=>{(0,t.inject)(t.DestroyRef).onDestroy(()=>{i()})};return n?.injector?(0,t.runInInjectionContext)(n.injector,a):a(),r.asReadonly()}};exports.ReactiveEngine4Angular=n;
+//# sourceMappingURL=ReactiveEngine4Angular.cjs.map

package/dist/angular/ReactiveEngine4Angular.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactiveEngine4Angular.cjs","names":[],"sources":["../../src/angular/ReactiveEngine4Angular.ts"],"sourcesContent":["import { signal, inject, DestroyRef, Injector, runInInjectionContext, type Signal } from '@angular/core';\nimport { ReactiveEngine as OriginalReactiveEngine, type CleanupFn } from '../core/core';\n\n// Описываем интерфейс опций для Angular-адаптера\nexport interface AngularUseOptions {\n  /**\n   * Кастомный инжектор Angular.\n   * Позволяет использовать .use() вне конструктора (например, в асинхронных функциях),\n   * если передать текущий Injector вручную.\n   */\n  injector?: Injector;\n}\n\nexport class ReactiveEngine4Angular extends OriginalReactiveEngine {\n  /**\n   * Использование реактивного значения в Angular компоненте или сервисе.\n   * Возвращает стандартный Angular Signal.\n   */\n  public use<T>(\n    item: { value: T; subscribe: (cb: (v: T) => void) => CleanupFn },\n    options?: AngularUseOptions\n  ): Signal<T> {\n    // 1. Создаем локальный Angular Signal со стартовым значением\n    const angularSignal = signal<T>(item.value);\n\n    // 2. Подписываемся на изменения сигнала вашего ядра\n    const unsubscribe = item.subscribe((newValue) => {\n      angularSignal.set(newValue); // Обновляем значение внутри Angular\n    });\n\n    // 3. Логика автоматической отписки через DestroyRef\n    const registerCleanup = () => {\n      const destroyRef = inject(DestroyRef);\n      destroyRef.onDestroy(() => {\n        unsubscribe();\n      });\n    };\n\n    // 4. Если пользователь явно передал кастомный инжектор — выполняем регистрацию внутри его контекста\n    if (options?.injector) {\n      runInInjectionContext(options.injector, registerCleanup);\n    } else {\n      // Иначе штатно выполняем в текущем контексте (вызовет ошибку NG0203, если контекст не валиден)\n      registerCleanup();\n    }\n\n    return angularSignal.asReadonly();\n  }\n}\n"],"mappings":"8DAaA,IAAa,EAAb,cAA4C,EAAA,cAAuB,CAKjE,IACE,EACA,EACW,CAEX,IAAM,GAAA,EAAA,EAAA,OAAA,CAA0B,EAAK,KAAK,EAGpC,EAAc,EAAK,UAAW,GAAa,CAC/C,EAAc,IAAI,CAAQ,CAC5B,CAAC,EAGK,MAAwB,EAE5B,EAAA,EAAA,OAAA,CAD0B,EAAA,UAC1B,CAAA,CAAW,cAAgB,CACzB,EAAY,CACd,CAAC,CACH,EAUA,OAPI,GAAS,UACX,EAAA,EAAA,sBAAA,CAAsB,EAAQ,SAAU,CAAe,EAGvD,EAAgB,EAGX,EAAc,WAAW,CAClC,CACF"}

package/dist/angular/ReactiveEngine4Angular.d.ts

@@ -0,0 +1,21 @@
+import { Injector, Signal } from '@angular/core';
+import { ReactiveEngine as OriginalReactiveEngine, CleanupFn } from '../core/core';
+export interface AngularUseOptions {
+    /**
+     * Кастомный инжектор Angular.
+     * Позволяет использовать .use() вне конструктора (например, в асинхронных функциях),
+     * если передать текущий Injector вручную.
+     */
+    injector?: Injector;
+}
+export declare class ReactiveEngine4Angular extends OriginalReactiveEngine {
+    /**
+     * Использование реактивного значения в Angular компоненте или сервисе.
+     * Возвращает стандартный Angular Signal.
+     */
+    use<T>(item: {
+        value: T;
+        subscribe: (cb: (v: T) => void) => CleanupFn;
+    }, options?: AngularUseOptions): Signal<T>;
+}
+//# sourceMappingURL=ReactiveEngine4Angular.d.ts.map

package/dist/angular/ReactiveEngine4Angular.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactiveEngine4Angular.d.ts","sourceRoot":"","sources":["../../src/angular/ReactiveEngine4Angular.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,QAAQ,EAAyB,KAAK,MAAM,EAAE,MAAM,eAAe,CAAC;AACzG,OAAO,EAAE,cAAc,IAAI,sBAAsB,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGxF,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,qBAAa,sBAAuB,SAAQ,sBAAsB;IAChE;;;OAGG;IACI,GAAG,CAAC,CAAC,EACV,IAAI,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,KAAK,SAAS,CAAA;KAAE,EAChE,OAAO,CAAC,EAAE,iBAAiB,GAC1B,MAAM,CAAC,CAAC,CAAC;CA2Bb"}

package/dist/angular/ReactiveEngine4Angular.mjs

@@ -0,0 +1,19 @@
+import { ReactiveEngine as e } from "../core.mjs";
+import { DestroyRef as t, inject as n, runInInjectionContext as r, signal as i } from "@angular/core";
+//#region src/angular/ReactiveEngine4Angular.ts
+var a = class extends e {
+	use(e, a) {
+		let o = i(e.value), s = e.subscribe((e) => {
+			o.set(e);
+		}), c = () => {
+			n(t).onDestroy(() => {
+				s();
+			});
+		};
+		return a?.injector ? r(a.injector, c) : c(), o.asReadonly();
+	}
+};
+//#endregion
+export { a as ReactiveEngine4Angular };
+
+//# sourceMappingURL=ReactiveEngine4Angular.mjs.map

package/dist/angular/ReactiveEngine4Angular.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactiveEngine4Angular.mjs","names":[],"sources":["../../src/angular/ReactiveEngine4Angular.ts"],"sourcesContent":["import { signal, inject, DestroyRef, Injector, runInInjectionContext, type Signal } from '@angular/core';\nimport { ReactiveEngine as OriginalReactiveEngine, type CleanupFn } from '../core/core';\n\n// Описываем интерфейс опций для Angular-адаптера\nexport interface AngularUseOptions {\n  /**\n   * Кастомный инжектор Angular.\n   * Позволяет использовать .use() вне конструктора (например, в асинхронных функциях),\n   * если передать текущий Injector вручную.\n   */\n  injector?: Injector;\n}\n\nexport class ReactiveEngine4Angular extends OriginalReactiveEngine {\n  /**\n   * Использование реактивного значения в Angular компоненте или сервисе.\n   * Возвращает стандартный Angular Signal.\n   */\n  public use<T>(\n    item: { value: T; subscribe: (cb: (v: T) => void) => CleanupFn },\n    options?: AngularUseOptions\n  ): Signal<T> {\n    // 1. Создаем локальный Angular Signal со стартовым значением\n    const angularSignal = signal<T>(item.value);\n\n    // 2. Подписываемся на изменения сигнала вашего ядра\n    const unsubscribe = item.subscribe((newValue) => {\n      angularSignal.set(newValue); // Обновляем значение внутри Angular\n    });\n\n    // 3. Логика автоматической отписки через DestroyRef\n    const registerCleanup = () => {\n      const destroyRef = inject(DestroyRef);\n      destroyRef.onDestroy(() => {\n        unsubscribe();\n      });\n    };\n\n    // 4. Если пользователь явно передал кастомный инжектор — выполняем регистрацию внутри его контекста\n    if (options?.injector) {\n      runInInjectionContext(options.injector, registerCleanup);\n    } else {\n      // Иначе штатно выполняем в текущем контексте (вызовет ошибку NG0203, если контекст не валиден)\n      registerCleanup();\n    }\n\n    return angularSignal.asReadonly();\n  }\n}\n"],"mappings":";;;AAaA,IAAa,IAAb,cAA4C,EAAuB;CAKjE,IACE,GACA,GACW;EAEX,IAAM,IAAgB,EAAU,EAAK,KAAK,GAGpC,IAAc,EAAK,WAAW,MAAa;GAC/C,EAAc,IAAI,CAAQ;EAC5B,CAAC,GAGK,UAAwB;GAE5B,EAD0B,CAC1B,CAAA,CAAW,gBAAgB;IACzB,EAAY;GACd,CAAC;EACH;EAUA,OAPI,GAAS,WACX,EAAsB,EAAQ,UAAU,CAAe,IAGvD,EAAgB,GAGX,EAAc,WAAW;CAClC;AACF"}

package/dist/angular/ReactiveEngine4Angular.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ReactiveEngine4Angular.test.d.ts.map

package/dist/angular/ReactiveEngine4Angular.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactiveEngine4Angular.test.d.ts","sourceRoot":"","sources":["../../src/angular/ReactiveEngine4Angular.test.ts"],"names":[],"mappings":""}

package/dist/angular/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ReactiveEngine4Angular.cjs");exports.ReactiveEngine=e.ReactiveEngine4Angular;

package/dist/angular/index.d.ts

@@ -0,0 +1,3 @@
+import { ReactiveEngine4Angular } from './ReactiveEngine4Angular';
+export { ReactiveEngine4Angular as ReactiveEngine };
+//# sourceMappingURL=index.d.ts.map

package/dist/angular/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/angular/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,sBAAsB,IAAI,cAAc,EAAE,CAAA"}

package/dist/angular/index.mjs

@@ -0,0 +1,2 @@
+import { ReactiveEngine4Angular as e } from "./ReactiveEngine4Angular.mjs";
+export { e as ReactiveEngine };

package/dist/react/ReactiveEngine4React.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ReactiveEngine4React.cjs","names":[],"sources":["../../src/react/ReactiveEngine4React.ts"],"sourcesContent":["import { useState as useStateFromReact, useEffect as useEffectFromReact } from 'react'\nimport { ReactiveEngine as OriginalReactiveEngine, CleanupFn } from '../core/core'\n\nexport class ReactiveEngine4React extends OriginalReactiveEngine {\n  // Описываем строгие типы для адаптеров React, чтобы не ломать встроенные типы React.\n  private reactAdapters: {\n    useState: typeof useStateFromReact;\n    useEffect: typeof useEffectFromReact;\n  } = {\n      useState: useStateFromReact,\n      useEffect: useEffectFromReact,\n    };\n\n  /**\n   * Установка адаптеров React.\n   * @function setReactAdapters\n   * @param {Function} useState - Функция useState из React.\n   * @param {Function} useEffect - Функция useEffect из React.\n   * @returns {void}\n   * @source\n   */\n  public setReactAdapters(\n    useState: typeof useStateFromReact,\n    useEffect: typeof useEffectFromReact\n  ): void {\n    this.reactAdapters = { useState, useEffect };\n  }\n\n  /**\n   * Использование реактивного значения в React компоненте.\n   * @template T\n   * @function use\n   * @param {{ value: T; subscribe: (cb: (v: T) => void) => CleanupFn }} item - Реактивный объект.\n   * @returns {T} - Значение реактивного объекта.\n   * @source\n   */\n  public use<T>(item: { value: T; subscribe: (cb: (v: T) => void) => CleanupFn }): T {\n    if (!this.reactAdapters) {\n      throw new Error(\"[React Error]: Адаптеры React не установлены. Вызовите engine.setReactAdapters(useState, useEffect).\");\n    }\n\n    // NOTE: (защита) проверяем, что нам передали объект сигнала\n    if (!item || typeof item.subscribe !== 'function') {\n      const errorMsg = `\n        [Reactive Error]: engine.use() получил некорректный объект!\n        Скорее всего, вы пытаетесь подписаться на свойство сервиса, которое не было инициализировано.\n        Проверьте, что в классе написано: public mySignal = this.engine.signal(...)\n      `;\n      console.error(errorMsg, { item });\n      throw new Error(errorMsg);\n    }\n    const [val, setVal] = this.reactAdapters.useState(item.value);\n\n    this.reactAdapters.useEffect(\n      () => {\n        return item.subscribe(setVal);\n      },\n      [item]\n    );\n\n    return val;\n  }\n}\n"],"mappings":"sDAGA,IAAa,EAAb,cAA0C,EAAA,cAAuB,CAE/D,cAGI,CACA,SAAU,EAAA,SACV,UAAW,EAAA,SACb,EAUF,iBACE,EACA,EACM,CACN,KAAK,cAAgB,CAAE,WAAU,WAAU,CAC7C,CAUA,IAAc,EAAqE,CACjF,GAAI,CAAC,KAAK,cACR,MAAU,MAAM,sGAAsG,EAIxH,GAAI,CAAC,GAAQ,OAAO,EAAK,WAAc,WAAY,CACjD,IAAM,EAAW;;;;QAMjB,MADA,QAAQ,MAAM,EAAU,CAAE,MAAK,CAAC,EACtB,MAAM,CAAQ,CAC1B,CACA,GAAM,CAAC,EAAK,GAAU,KAAK,cAAc,SAAS,EAAK,KAAK,EAS5D,OAPA,KAAK,cAAc,cAER,EAAK,UAAU,CAAM,EAE9B,CAAC,CAAI,CACP,EAEO,CACT,CACF"}
+{"version":3,"file":"ReactiveEngine4React.cjs","names":[],"sources":["../../src/react/ReactiveEngine4React.ts"],"sourcesContent":["import { useState as useStateFromReact, useEffect as useEffectFromReact } from 'react'\nimport { ReactiveEngine as OriginalReactiveEngine, CleanupFn } from '../core/core'\n\n/**\n * Класс адаптера для интеграции реактивного движка с React.\n * Наследует функциональность оригинального реактивного движка и предоставляет специализированные методы для работы с React.\n */\nexport class ReactiveEngine4React extends OriginalReactiveEngine {\n  // Описываем строгие типы для адаптеров React, чтобы не ломать встроенные типы React.\n  private reactAdapters: {\n    useState: typeof useStateFromReact;\n    useEffect: typeof useEffectFromReact;\n  } = {\n      useState: useStateFromReact,\n      useEffect: useEffectFromReact,\n    };\n\n  /**\n   * Установка адаптеров React.\n   * @function setReactAdapters\n   * @param {Function} useState - Функция useState из React.\n   * @param {Function} useEffect - Функция useEffect из React.\n   * @returns {void}\n   * @source\n   */\n  public setReactAdapters(\n    useState: typeof useStateFromReact,\n    useEffect: typeof useEffectFromReact\n  ): void {\n    this.reactAdapters = { useState, useEffect };\n  }\n\n  /**\n   * Использование реактивного значения в React компоненте.\n   * @template T\n   * @function use\n   * @param {{ value: T; subscribe: (cb: (v: T) => void) => CleanupFn }} item - Реактивный объект.\n   * @returns {T} - Значение реактивного объекта.\n   * @source\n   */\n  public use<T>(item: { value: T; subscribe: (cb: (v: T) => void) => CleanupFn }): T {\n    if (!this.reactAdapters) {\n      throw new Error(\"[React Error]: Адаптеры React не установлены. Вызовите engine.setReactAdapters(useState, useEffect).\");\n    }\n\n    // NOTE: (защита) проверяем, что нам передали объект сигнала\n    if (!item || typeof item.subscribe !== 'function') {\n      const errorMsg = `\n        [Reactive Error]: engine.use() получил некорректный объект!\n        Скорее всего, вы пытаетесь подписаться на свойство сервиса, которое не было инициализировано.\n        Проверьте, что в классе написано: public mySignal = this.engine.signal(...)\n      `;\n      console.error(errorMsg, { item });\n      throw new Error(errorMsg);\n    }\n    const [val, setVal] = this.reactAdapters.useState(item.value);\n\n    this.reactAdapters.useEffect(\n      () => {\n        return item.subscribe(setVal);\n      },\n      [item]\n    );\n\n    return val;\n  }\n}\n"],"mappings":"sDAOA,IAAa,EAAb,cAA0C,EAAA,cAAuB,CAE/D,cAGI,CACA,SAAU,EAAA,SACV,UAAW,EAAA,SACb,EAUF,iBACE,EACA,EACM,CACN,KAAK,cAAgB,CAAE,WAAU,WAAU,CAC7C,CAUA,IAAc,EAAqE,CACjF,GAAI,CAAC,KAAK,cACR,MAAU,MAAM,sGAAsG,EAIxH,GAAI,CAAC,GAAQ,OAAO,EAAK,WAAc,WAAY,CACjD,IAAM,EAAW;;;;QAMjB,MADA,QAAQ,MAAM,EAAU,CAAE,MAAK,CAAC,EACtB,MAAM,CAAQ,CAC1B,CACA,GAAM,CAAC,EAAK,GAAU,KAAK,cAAc,SAAS,EAAK,KAAK,EAS5D,OAPA,KAAK,cAAc,cAER,EAAK,UAAU,CAAM,EAE9B,CAAC,CAAI,CACP,EAEO,CACT,CACF"}

package/dist/react/ReactiveEngine4React.d.ts

@@ -1,5 +1,9 @@
 import { useState as useStateFromReact, useEffect as useEffectFromReact } from 'react';
 import { ReactiveEngine as OriginalReactiveEngine, CleanupFn } from '../core/core';
+/**
+ * Класс адаптера для интеграции реактивного движка с React.
+ * Наследует функциональность оригинального реактивного движка и предоставляет специализированные методы для работы с React.
+ */
 export declare class ReactiveEngine4React extends OriginalReactiveEngine {
     private reactAdapters;
     /**

package/dist/react/ReactiveEngine4React.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactiveEngine4React.d.ts","sourceRoot":"","sources":["../../src/react/ReactiveEngine4React.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,OAAO,CAAA;AACtF,OAAO,EAAE,cAAc,IAAI,sBAAsB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAElF,qBAAa,oBAAqB,SAAQ,sBAAsB;IAE9D,OAAO,CAAC,aAAa,CAMjB;IAEJ;;;;;;;OAOG;IACI,gBAAgB,CACrB,QAAQ,EAAE,OAAO,iBAAiB,EAClC,SAAS,EAAE,OAAO,kBAAkB,GACnC,IAAI;IAIP;;;;;;;OAOG;IACI,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,KAAK,SAAS,CAAA;KAAE,GAAG,CAAC;CA0BnF"}
+{"version":3,"file":"ReactiveEngine4React.d.ts","sourceRoot":"","sources":["../../src/react/ReactiveEngine4React.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,OAAO,CAAA;AACtF,OAAO,EAAE,cAAc,IAAI,sBAAsB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAElF;;;GAGG;AACH,qBAAa,oBAAqB,SAAQ,sBAAsB;IAE9D,OAAO,CAAC,aAAa,CAMjB;IAEJ;;;;;;;OAOG;IACI,gBAAgB,CACrB,QAAQ,EAAE,OAAO,iBAAiB,EAClC,SAAS,EAAE,OAAO,kBAAkB,GACnC,IAAI;IAIP;;;;;;;OAOG;IACI,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,KAAK,SAAS,CAAA;KAAE,GAAG,CAAC;CA0BnF"}

package/dist/react/ReactiveEngine4React.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ReactiveEngine4React.mjs","names":[],"sources":["../../src/react/ReactiveEngine4React.ts"],"sourcesContent":["import { useState as useStateFromReact, useEffect as useEffectFromReact } from 'react'\nimport { ReactiveEngine as OriginalReactiveEngine, CleanupFn } from '../core/core'\n\nexport class ReactiveEngine4React extends OriginalReactiveEngine {\n  // Описываем строгие типы для адаптеров React, чтобы не ломать встроенные типы React.\n  private reactAdapters: {\n    useState: typeof useStateFromReact;\n    useEffect: typeof useEffectFromReact;\n  } = {\n      useState: useStateFromReact,\n      useEffect: useEffectFromReact,\n    };\n\n  /**\n   * Установка адаптеров React.\n   * @function setReactAdapters\n   * @param {Function} useState - Функция useState из React.\n   * @param {Function} useEffect - Функция useEffect из React.\n   * @returns {void}\n   * @source\n   */\n  public setReactAdapters(\n    useState: typeof useStateFromReact,\n    useEffect: typeof useEffectFromReact\n  ): void {\n    this.reactAdapters = { useState, useEffect };\n  }\n\n  /**\n   * Использование реактивного значения в React компоненте.\n   * @template T\n   * @function use\n   * @param {{ value: T; subscribe: (cb: (v: T) => void) => CleanupFn }} item - Реактивный объект.\n   * @returns {T} - Значение реактивного объекта.\n   * @source\n   */\n  public use<T>(item: { value: T; subscribe: (cb: (v: T) => void) => CleanupFn }): T {\n    if (!this.reactAdapters) {\n      throw new Error(\"[React Error]: Адаптеры React не установлены. Вызовите engine.setReactAdapters(useState, useEffect).\");\n    }\n\n    // NOTE: (защита) проверяем, что нам передали объект сигнала\n    if (!item || typeof item.subscribe !== 'function') {\n      const errorMsg = `\n        [Reactive Error]: engine.use() получил некорректный объект!\n        Скорее всего, вы пытаетесь подписаться на свойство сервиса, которое не было инициализировано.\n        Проверьте, что в классе написано: public mySignal = this.engine.signal(...)\n      `;\n      console.error(errorMsg, { item });\n      throw new Error(errorMsg);\n    }\n    const [val, setVal] = this.reactAdapters.useState(item.value);\n\n    this.reactAdapters.useEffect(\n      () => {\n        return item.subscribe(setVal);\n      },\n      [item]\n    );\n\n    return val;\n  }\n}\n"],"mappings":";;;AAGA,IAAa,IAAb,cAA0C,EAAuB;CAE/D,gBAGI;EACU;EACC;CACb;CAUF,iBACE,GACA,GACM;EACN,KAAK,gBAAgB;GAAE;GAAU;EAAU;CAC7C;CAUA,IAAc,GAAqE;EACjF,IAAI,CAAC,KAAK,eACR,MAAU,MAAM,sGAAsG;EAIxH,IAAI,CAAC,KAAQ,OAAO,EAAK,aAAc,YAAY;GACjD,IAAM,IAAW;GAMjB,MADA,QAAQ,MAAM,GAAU,EAAE,QAAK,CAAC,GACtB,MAAM,CAAQ;EAC1B;EACA,IAAM,CAAC,GAAK,KAAU,KAAK,cAAc,SAAS,EAAK,KAAK;EAS5D,OAPA,KAAK,cAAc,gBAER,EAAK,UAAU,CAAM,GAE9B,CAAC,CAAI,CACP,GAEO;CACT;AACF"}
+{"version":3,"file":"ReactiveEngine4React.mjs","names":[],"sources":["../../src/react/ReactiveEngine4React.ts"],"sourcesContent":["import { useState as useStateFromReact, useEffect as useEffectFromReact } from 'react'\nimport { ReactiveEngine as OriginalReactiveEngine, CleanupFn } from '../core/core'\n\n/**\n * Класс адаптера для интеграции реактивного движка с React.\n * Наследует функциональность оригинального реактивного движка и предоставляет специализированные методы для работы с React.\n */\nexport class ReactiveEngine4React extends OriginalReactiveEngine {\n  // Описываем строгие типы для адаптеров React, чтобы не ломать встроенные типы React.\n  private reactAdapters: {\n    useState: typeof useStateFromReact;\n    useEffect: typeof useEffectFromReact;\n  } = {\n      useState: useStateFromReact,\n      useEffect: useEffectFromReact,\n    };\n\n  /**\n   * Установка адаптеров React.\n   * @function setReactAdapters\n   * @param {Function} useState - Функция useState из React.\n   * @param {Function} useEffect - Функция useEffect из React.\n   * @returns {void}\n   * @source\n   */\n  public setReactAdapters(\n    useState: typeof useStateFromReact,\n    useEffect: typeof useEffectFromReact\n  ): void {\n    this.reactAdapters = { useState, useEffect };\n  }\n\n  /**\n   * Использование реактивного значения в React компоненте.\n   * @template T\n   * @function use\n   * @param {{ value: T; subscribe: (cb: (v: T) => void) => CleanupFn }} item - Реактивный объект.\n   * @returns {T} - Значение реактивного объекта.\n   * @source\n   */\n  public use<T>(item: { value: T; subscribe: (cb: (v: T) => void) => CleanupFn }): T {\n    if (!this.reactAdapters) {\n      throw new Error(\"[React Error]: Адаптеры React не установлены. Вызовите engine.setReactAdapters(useState, useEffect).\");\n    }\n\n    // NOTE: (защита) проверяем, что нам передали объект сигнала\n    if (!item || typeof item.subscribe !== 'function') {\n      const errorMsg = `\n        [Reactive Error]: engine.use() получил некорректный объект!\n        Скорее всего, вы пытаетесь подписаться на свойство сервиса, которое не было инициализировано.\n        Проверьте, что в классе написано: public mySignal = this.engine.signal(...)\n      `;\n      console.error(errorMsg, { item });\n      throw new Error(errorMsg);\n    }\n    const [val, setVal] = this.reactAdapters.useState(item.value);\n\n    this.reactAdapters.useEffect(\n      () => {\n        return item.subscribe(setVal);\n      },\n      [item]\n    );\n\n    return val;\n  }\n}\n"],"mappings":";;;AAOA,IAAa,IAAb,cAA0C,EAAuB;CAE/D,gBAGI;EACU;EACC;CACb;CAUF,iBACE,GACA,GACM;EACN,KAAK,gBAAgB;GAAE;GAAU;EAAU;CAC7C;CAUA,IAAc,GAAqE;EACjF,IAAI,CAAC,KAAK,eACR,MAAU,MAAM,sGAAsG;EAIxH,IAAI,CAAC,KAAQ,OAAO,EAAK,aAAc,YAAY;GACjD,IAAM,IAAW;GAMjB,MADA,QAAQ,MAAM,GAAU,EAAE,QAAK,CAAC,GACtB,MAAM,CAAQ;EAC1B;EACA,IAAM,CAAC,GAAK,KAAU,KAAK,cAAc,SAAS,EAAK,KAAK;EAS5D,OAPA,KAAK,cAAc,gBAER,EAAK,UAAU,CAAM,GAE9B,CAAC,CAAI,CACP,GAEO;CACT;AACF"}

package/dist/vue/ReactiveEngine4Vue.cjs

@@ -0,0 +1,2 @@
+const e=require("../core.cjs");let t=require("vue");var n=class extends e.ReactiveEngine{use(e){let n=(0,t.shallowRef)(e.value),r=e.subscribe(e=>{n.value=e,(0,t.triggerRef)(n)});return(0,t.getCurrentInstance)()?(0,t.onUnmounted)(()=>{r()}):(0,t.getCurrentScope)()&&(0,t.onScopeDispose)(()=>{r()}),n}};exports.ReactiveEngine4Vue=n;
+//# sourceMappingURL=ReactiveEngine4Vue.cjs.map

package/dist/vue/ReactiveEngine4Vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactiveEngine4Vue.cjs","names":[],"sources":["../../src/vue/ReactiveEngine4Vue.ts"],"sourcesContent":["import { shallowRef, onUnmounted, getCurrentInstance, getCurrentScope, onScopeDispose, triggerRef, type ShallowRef } from 'vue'\nimport { ReactiveEngine as OriginalReactiveEngine, type CleanupFn } from '../core/core'\n\nexport class ReactiveEngine4Vue extends OriginalReactiveEngine {\n  /**\n   * Использование реактивного значения в Vue компоненте или EffectScope.\n   */\n  public use<T>(item: { value: T; subscribe: (cb: (v: T) => void) => CleanupFn }): ShallowRef<T> {\n    // Создаем локальную Vue-реактивную обертку со стартовым значением сигнала\n    const state = shallowRef(item.value)\n\n    // Подписываемся на изменения сигнала ядра\n    const unsubscribe = item.subscribe((newValue) => {\n      state.value = newValue // Обновляем Vue-реактивную переменную\n      triggerRef(state)      // 👈 ПРИНУДИТЕЛЬНО заставляем Vue перерисовать шаблон\n    })\n\n    // Проверяем наличие активного компонента ИЛИ active области видимости эффектов\n\n    // 1. Если мы находимся внутри жизненного цикла компонента Vue (setup)\n    if (getCurrentInstance()) {\n      // Автоматически отписываемся при размонтировании Vue-компонента\n      onUnmounted(() => {\n        unsubscribe()\n      })\n    }\n    // 2. Иначе, если мы находимся внутри изолированного EffectScope (например, в Pinia или в тестах)\n    else if (getCurrentScope()) {\n      onScopeDispose(() => {\n        unsubscribe()\n      })\n    }\n\n    return state\n  }\n}\n"],"mappings":"oDAGA,IAAa,EAAb,cAAwC,EAAA,cAAuB,CAI7D,IAAc,EAAiF,CAE7F,IAAM,GAAA,EAAA,EAAA,WAAA,CAAmB,EAAK,KAAK,EAG7B,EAAc,EAAK,UAAW,GAAa,CAC/C,EAAM,MAAQ,GACd,EAAA,EAAA,WAAA,CAAW,CAAK,CAClB,CAAC,EAkBD,OAbA,EAAA,EAAA,mBAAA,CAAuB,GAErB,EAAA,EAAA,YAAA,KAAkB,CAChB,EAAY,CACd,CAAC,GAGE,EAAA,EAAA,gBAAA,CAAoB,IACvB,EAAA,EAAA,eAAA,KAAqB,CACnB,EAAY,CACd,CAAC,EAGI,CACT,CACF"}

package/dist/vue/ReactiveEngine4Vue.d.ts

@@ -0,0 +1,12 @@
+import { ShallowRef } from 'vue';
+import { ReactiveEngine as OriginalReactiveEngine, CleanupFn } from '../core/core';
+export declare class ReactiveEngine4Vue extends OriginalReactiveEngine {
+    /**
+     * Использование реактивного значения в Vue компоненте или EffectScope.
+     */
+    use<T>(item: {
+        value: T;
+        subscribe: (cb: (v: T) => void) => CleanupFn;
+    }): ShallowRef<T>;
+}
+//# sourceMappingURL=ReactiveEngine4Vue.d.ts.map

package/dist/vue/ReactiveEngine4Vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactiveEngine4Vue.d.ts","sourceRoot":"","sources":["../../src/vue/ReactiveEngine4Vue.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4F,KAAK,UAAU,EAAE,MAAM,KAAK,CAAA;AAC/H,OAAO,EAAE,cAAc,IAAI,sBAAsB,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAA;AAEvF,qBAAa,kBAAmB,SAAQ,sBAAsB;IAC5D;;OAEG;IACI,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,KAAK,SAAS,CAAA;KAAE,GAAG,UAAU,CAAC,CAAC,CAAC;CA4B/F"}

package/dist/vue/ReactiveEngine4Vue.mjs

@@ -0,0 +1,19 @@
+import { ReactiveEngine as e } from "../core.mjs";
+import { getCurrentInstance as t, getCurrentScope as n, onScopeDispose as r, onUnmounted as i, shallowRef as a, triggerRef as o } from "vue";
+//#region src/vue/ReactiveEngine4Vue.ts
+var s = class extends e {
+	use(e) {
+		let s = a(e.value), c = e.subscribe((e) => {
+			s.value = e, o(s);
+		});
+		return t() ? i(() => {
+			c();
+		}) : n() && r(() => {
+			c();
+		}), s;
+	}
+};
+//#endregion
+export { s as ReactiveEngine4Vue };
+
+//# sourceMappingURL=ReactiveEngine4Vue.mjs.map

package/dist/vue/ReactiveEngine4Vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactiveEngine4Vue.mjs","names":[],"sources":["../../src/vue/ReactiveEngine4Vue.ts"],"sourcesContent":["import { shallowRef, onUnmounted, getCurrentInstance, getCurrentScope, onScopeDispose, triggerRef, type ShallowRef } from 'vue'\nimport { ReactiveEngine as OriginalReactiveEngine, type CleanupFn } from '../core/core'\n\nexport class ReactiveEngine4Vue extends OriginalReactiveEngine {\n  /**\n   * Использование реактивного значения в Vue компоненте или EffectScope.\n   */\n  public use<T>(item: { value: T; subscribe: (cb: (v: T) => void) => CleanupFn }): ShallowRef<T> {\n    // Создаем локальную Vue-реактивную обертку со стартовым значением сигнала\n    const state = shallowRef(item.value)\n\n    // Подписываемся на изменения сигнала ядра\n    const unsubscribe = item.subscribe((newValue) => {\n      state.value = newValue // Обновляем Vue-реактивную переменную\n      triggerRef(state)      // 👈 ПРИНУДИТЕЛЬНО заставляем Vue перерисовать шаблон\n    })\n\n    // Проверяем наличие активного компонента ИЛИ active области видимости эффектов\n\n    // 1. Если мы находимся внутри жизненного цикла компонента Vue (setup)\n    if (getCurrentInstance()) {\n      // Автоматически отписываемся при размонтировании Vue-компонента\n      onUnmounted(() => {\n        unsubscribe()\n      })\n    }\n    // 2. Иначе, если мы находимся внутри изолированного EffectScope (например, в Pinia или в тестах)\n    else if (getCurrentScope()) {\n      onScopeDispose(() => {\n        unsubscribe()\n      })\n    }\n\n    return state\n  }\n}\n"],"mappings":";;;AAGA,IAAa,IAAb,cAAwC,EAAuB;CAI7D,IAAc,GAAiF;EAE7F,IAAM,IAAQ,EAAW,EAAK,KAAK,GAG7B,IAAc,EAAK,WAAW,MAAa;GAE/C,AADA,EAAM,QAAQ,GACd,EAAW,CAAK;EAClB,CAAC;EAkBD,OAbI,EAAmB,IAErB,QAAkB;GAChB,EAAY;EACd,CAAC,IAGM,EAAgB,KACvB,QAAqB;GACnB,EAAY;EACd,CAAC,GAGI;CACT;AACF"}

package/dist/vue/ReactiveEngine4Vue.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ReactiveEngine4Vue.test.d.ts.map

package/dist/vue/ReactiveEngine4Vue.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactiveEngine4Vue.test.d.ts","sourceRoot":"","sources":["../../src/vue/ReactiveEngine4Vue.test.ts"],"names":[],"mappings":""}

package/dist/vue/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ReactiveEngine4Vue.cjs");exports.ReactiveEngine=e.ReactiveEngine4Vue;

package/dist/vue/index.d.ts

@@ -0,0 +1,2 @@
+export { ReactiveEngine4Vue as ReactiveEngine } from './ReactiveEngine4Vue';
+//# sourceMappingURL=index.d.ts.map

package/dist/vue/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/vue/index.mjs

@@ -0,0 +1,2 @@
+import { ReactiveEngine4Vue as e } from "./ReactiveEngine4Vue.mjs";
+export { e as ReactiveEngine };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pravosleva/reactive-engine",
-  "version": "1.0.3-beta",
+  "version": "1.2.2-beta",
   "engines": {
     "node": ">=22.20.0"
   },
@@ -34,6 +34,16 @@
       "import": "./dist/react/index.mjs",
       "require": "./dist/react/index.cjs"
     },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue/index.mjs",
+      "require": "./dist/vue/index.cjs"
+    },
+    "./angular": {
+      "types": "./dist/angular/index.d.ts",
+      "import": "./dist/angular/index.mjs",
+      "require": "./dist/angular/index.cjs"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -54,8 +64,10 @@
     "docs:preview": "vitepress preview docs"
   },
   "peerDependencies": {
+    "@angular/core": ">=16.0.0",
     "react": "^18.0.0 || ^19.2.0",
-    "react-dom": "^18.0.0 || ^19.2.0"
+    "react-dom": "^18.0.0 || ^19.2.0",
+    "vue": ">=3.2.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -63,9 +75,16 @@
     },
     "react-dom": {
       "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
     }
   },
   "devDependencies": {
+    "@angular/core": "^22.1.1",
     "@googlemaps/js-api-loader": "^2.1.1",
     "@googlemaps/markerclusterer": "^2.6.2",
     "@microsoft/api-extractor": "^7.58.9",
@@ -79,7 +98,10 @@
     "@types/react-dom": "^19.2.0",
     "@types/three": "^0.185.1",
     "@vitejs/plugin-react": "^5.0.4",
+    "@vitejs/plugin-vue": "^6.0.8",
     "@vitest/ui": "^4.1.10",
+    "@vue/language-core": "^3.3.9",
+    "@vue/test-utils": "^2.4.11",
     "@yandex/ymaps3-clusterer": "^0.0.12",
     "clsx": "^2.1.1",
     "eslint-plugin-import-x": "^4.17.1",