@rplx/angular 0.2.0

package/README.md

@@ -0,0 +1,78 @@
+# @rplx/angular
+
+Angular bindings for Ripple state management library using Angular Signals.
+
+## Installation
+
+```bash
+npm install @rplx/angular @rplx/core
+```
+
+## Usage
+
+### 1. Setup Store Provider
+
+In your `main.ts` or module:
+
+```typescript
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideRippleStore } from '@rplx/angular';
+import { createStore } from '@rplx/core';
+import { AppComponent } from './app.component';
+
+const store = createStore<AppState>({
+  initialState: { /* ... */ }
+});
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideRippleStore(store)
+  ]
+});
+```
+
+### 2. Use in Components
+
+```typescript
+import { Component, computed } from '@angular/core';
+import { injectStoreState, injectDispatch } from '@rplx/angular';
+
+@Component({
+  selector: 'app-counter',
+  template: `
+    <div>
+      <p>Count: {{ count() }}</p>
+      <button (click)="increment()">Increment</button>
+    </div>
+  `
+})
+export class CounterComponent {
+  private dispatch = injectDispatch();
+  private state = injectStoreState<AppState>();
+  
+  count = computed(() => this.state().counter.count);
+  
+  increment() {
+    this.dispatch('counter/increment');
+  }
+}
+```
+
+## API
+
+### `provideRippleStore<State>(store: StoreAPI<State>)`
+
+Provider function to configure the Ripple store for dependency injection. The store should be created using `createStore()` from `@rplx/core`.
+
+### `injectStoreState<State>()`
+
+Returns a signal containing the current store state.
+
+### `injectDispatch()`
+
+Returns the dispatch function to send events to the store.
+
+### `RippleStoreService<State>`
+
+The underlying service that wraps the store. You can inject this directly if needed.
+

package/dist/index.d.mts

@@ -0,0 +1,93 @@
+import { Signal, Provider, InjectionToken } from '@angular/core';
+import { StoreAPI } from '@rplx/core';
+
+/**
+ * Service that wraps a Ripple Store and exposes state as an Angular Signal
+ * Note: This class is not decorated with @Injectable() because it's provided
+ * via an InjectionToken using a factory function, which avoids JIT compilation.
+ */
+declare class RippleStoreService<State, Cofx = {}> {
+    private store;
+    private _state;
+    private unsubscribe?;
+    constructor(store: StoreAPI<State, Cofx>);
+    /**
+     * Get the current state as a Signal
+     */
+    get state(): Signal<State>;
+    /**
+     * Dispatch an event to the store
+     */
+    dispatch<Payload = any>(eventKey: string, payload?: Payload): Promise<void>;
+    /**
+     * Get the underlying store instance
+     */
+    getStore(): StoreAPI<State, Cofx>;
+    /**
+     * Cleanup: unsubscribe from state changes
+     */
+    ngOnDestroy(): void;
+}
+
+/**
+ * Injection token for RippleStoreService
+ */
+declare const RIPPLE_STORE_SERVICE: InjectionToken<RippleStoreService<any, {}>>;
+/**
+ * Provider function to configure Ripple store for dependency injection
+ *
+ * @param store The Ripple Store instance (created with createStore())
+ * @returns Provider configuration
+ */
+declare function provideRippleStore<State, Cofx = {}>(store: StoreAPI<State, Cofx>): Provider;
+
+/**
+ * Injection function to get the store state as a Signal
+ *
+ * @returns Signal containing the current store state
+ */
+declare function injectStoreState<State>(): Signal<State>;
+
+/**
+ * Injection function to get the dispatch function
+ *
+ * @returns Dispatch function to send events to the store
+ */
+declare function injectDispatch<State = any>(): <Payload = any>(eventKey: string, payload?: Payload) => Promise<void>;
+
+/**
+ * Injection function to subscribe to a Ripple subscription and get the value as a Signal
+ *
+ * This leverages the core subscription system which provides:
+ * - Shared computation across components (same subscription key+params share computation)
+ * - Dependency graphs (subscriptions can depend on other subscriptions)
+ * - Memoization and caching (only recomputes when dependencies change)
+ * - Selective updates (components only update when their subscribed values change)
+ *
+ * @param subscriptionKey The subscription key to subscribe to
+ * @param params Optional parameters for the subscription
+ * @returns Signal containing the subscription value
+ *
+ * @example
+ * ```typescript
+ * // Simple subscription without params
+ * const count = injectSubscription<number>('counter/count');
+ *
+ * // Subscription with params
+ * const todo = injectSubscription<Todo | undefined, [string]>('todos/byId', todoId);
+ *
+ * // Use in template
+ * <div>{{ count() }}</div>
+ * ```
+ */
+declare function injectSubscription<Result, Params extends any[] = []>(subscriptionKey: string, ...params: Params): Signal<Result>;
+
+/**
+ * Injection function to get the store instance directly
+ * Use this when you need direct access to the store API (e.g., for query, registerTraceCallback, etc.)
+ *
+ * @returns The underlying store instance
+ */
+declare function injectStore<State = any, Cofx = {}>(): StoreAPI<State, Cofx>;
+
+export { RIPPLE_STORE_SERVICE, RippleStoreService, injectDispatch, injectStore, injectStoreState, injectSubscription, provideRippleStore };

package/dist/index.d.ts

@@ -0,0 +1,93 @@
+import { Signal, Provider, InjectionToken } from '@angular/core';
+import { StoreAPI } from '@rplx/core';
+
+/**
+ * Service that wraps a Ripple Store and exposes state as an Angular Signal
+ * Note: This class is not decorated with @Injectable() because it's provided
+ * via an InjectionToken using a factory function, which avoids JIT compilation.
+ */
+declare class RippleStoreService<State, Cofx = {}> {
+    private store;
+    private _state;
+    private unsubscribe?;
+    constructor(store: StoreAPI<State, Cofx>);
+    /**
+     * Get the current state as a Signal
+     */
+    get state(): Signal<State>;
+    /**
+     * Dispatch an event to the store
+     */
+    dispatch<Payload = any>(eventKey: string, payload?: Payload): Promise<void>;
+    /**
+     * Get the underlying store instance
+     */
+    getStore(): StoreAPI<State, Cofx>;
+    /**
+     * Cleanup: unsubscribe from state changes
+     */
+    ngOnDestroy(): void;
+}
+
+/**
+ * Injection token for RippleStoreService
+ */
+declare const RIPPLE_STORE_SERVICE: InjectionToken<RippleStoreService<any, {}>>;
+/**
+ * Provider function to configure Ripple store for dependency injection
+ *
+ * @param store The Ripple Store instance (created with createStore())
+ * @returns Provider configuration
+ */
+declare function provideRippleStore<State, Cofx = {}>(store: StoreAPI<State, Cofx>): Provider;
+
+/**
+ * Injection function to get the store state as a Signal
+ *
+ * @returns Signal containing the current store state
+ */
+declare function injectStoreState<State>(): Signal<State>;
+
+/**
+ * Injection function to get the dispatch function
+ *
+ * @returns Dispatch function to send events to the store
+ */
+declare function injectDispatch<State = any>(): <Payload = any>(eventKey: string, payload?: Payload) => Promise<void>;
+
+/**
+ * Injection function to subscribe to a Ripple subscription and get the value as a Signal
+ *
+ * This leverages the core subscription system which provides:
+ * - Shared computation across components (same subscription key+params share computation)
+ * - Dependency graphs (subscriptions can depend on other subscriptions)
+ * - Memoization and caching (only recomputes when dependencies change)
+ * - Selective updates (components only update when their subscribed values change)
+ *
+ * @param subscriptionKey The subscription key to subscribe to
+ * @param params Optional parameters for the subscription
+ * @returns Signal containing the subscription value
+ *
+ * @example
+ * ```typescript
+ * // Simple subscription without params
+ * const count = injectSubscription<number>('counter/count');
+ *
+ * // Subscription with params
+ * const todo = injectSubscription<Todo | undefined, [string]>('todos/byId', todoId);
+ *
+ * // Use in template
+ * <div>{{ count() }}</div>
+ * ```
+ */
+declare function injectSubscription<Result, Params extends any[] = []>(subscriptionKey: string, ...params: Params): Signal<Result>;
+
+/**
+ * Injection function to get the store instance directly
+ * Use this when you need direct access to the store API (e.g., for query, registerTraceCallback, etc.)
+ *
+ * @returns The underlying store instance
+ */
+declare function injectStore<State = any, Cofx = {}>(): StoreAPI<State, Cofx>;
+
+export { RIPPLE_STORE_SERVICE, RippleStoreService, injectDispatch, injectStore, injectStoreState, injectSubscription, provideRippleStore };

package/dist/index.js

@@ -0,0 +1,148 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  RIPPLE_STORE_SERVICE: () => RIPPLE_STORE_SERVICE,
+  injectDispatch: () => injectDispatch,
+  injectStore: () => injectStore,
+  injectStoreState: () => injectStoreState,
+  injectSubscription: () => injectSubscription,
+  provideRippleStore: () => provideRippleStore
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provideRippleStore.ts
+var import_core2 = require("@angular/core");
+
+// src/RippleStoreService.ts
+var import_core = require("@angular/core");
+var RippleStoreService = class {
+  constructor(store) {
+    this.store = store;
+    this._state = (0, import_core.signal)(this.store.getState());
+    const subscriptionKey = "__ripple_angular_state_tracker__";
+    try {
+      this.store.registerSubscription(subscriptionKey, {
+        compute: (state) => state
+      });
+    } catch (error) {
+    }
+    this.unsubscribe = this.store.subscribe(
+      subscriptionKey,
+      [],
+      (newState) => {
+        this._state.set(newState);
+      }
+    );
+  }
+  _state;
+  unsubscribe;
+  /**
+   * Get the current state as a Signal
+   */
+  get state() {
+    return this._state.asReadonly();
+  }
+  /**
+   * Dispatch an event to the store
+   */
+  dispatch(eventKey, payload) {
+    return this.store.dispatch(eventKey, payload);
+  }
+  /**
+   * Get the underlying store instance
+   */
+  getStore() {
+    return this.store;
+  }
+  /**
+   * Cleanup: unsubscribe from state changes
+   */
+  ngOnDestroy() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
+  }
+};
+
+// src/provideRippleStore.ts
+var RIPPLE_STORE_SERVICE = new import_core2.InjectionToken("RippleStoreService");
+function provideRippleStore(store) {
+  return {
+    provide: RIPPLE_STORE_SERVICE,
+    useFactory: () => new RippleStoreService(store)
+  };
+}
+
+// src/injectStoreState.ts
+var import_core3 = require("@angular/core");
+function injectStoreState() {
+  const storeService = (0, import_core3.inject)(RIPPLE_STORE_SERVICE);
+  return storeService.state;
+}
+
+// src/injectDispatch.ts
+var import_core4 = require("@angular/core");
+function injectDispatch() {
+  const storeService = (0, import_core4.inject)(RIPPLE_STORE_SERVICE);
+  return (eventKey, payload) => storeService.dispatch(eventKey, payload);
+}
+
+// src/injectSubscription.ts
+var import_core5 = require("@angular/core");
+function injectSubscription(subscriptionKey, ...params) {
+  const storeService = (0, import_core5.inject)(RIPPLE_STORE_SERVICE);
+  const store = storeService.getStore();
+  const destroyRef = (0, import_core5.inject)(import_core5.DestroyRef);
+  const ngZone = (0, import_core5.inject)(import_core5.NgZone);
+  const subscriptionSignal = (0, import_core5.signal)(
+    store.query(subscriptionKey, params)
+  );
+  const unsubscribe = store.subscribe(
+    subscriptionKey,
+    params,
+    (result) => {
+      ngZone.run(() => {
+        subscriptionSignal.set(result);
+      });
+    }
+  );
+  destroyRef.onDestroy(() => {
+    unsubscribe();
+  });
+  return subscriptionSignal.asReadonly();
+}
+
+// src/injectStore.ts
+var import_core6 = require("@angular/core");
+function injectStore() {
+  const storeService = (0, import_core6.inject)(RIPPLE_STORE_SERVICE);
+  return storeService.getStore();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RIPPLE_STORE_SERVICE,
+  injectDispatch,
+  injectStore,
+  injectStoreState,
+  injectSubscription,
+  provideRippleStore
+});

package/dist/index.mjs

@@ -0,0 +1,116 @@
+// src/provideRippleStore.ts
+import { InjectionToken } from "@angular/core";
+
+// src/RippleStoreService.ts
+import { signal } from "@angular/core";
+var RippleStoreService = class {
+  constructor(store) {
+    this.store = store;
+    this._state = signal(this.store.getState());
+    const subscriptionKey = "__ripple_angular_state_tracker__";
+    try {
+      this.store.registerSubscription(subscriptionKey, {
+        compute: (state) => state
+      });
+    } catch (error) {
+    }
+    this.unsubscribe = this.store.subscribe(
+      subscriptionKey,
+      [],
+      (newState) => {
+        this._state.set(newState);
+      }
+    );
+  }
+  _state;
+  unsubscribe;
+  /**
+   * Get the current state as a Signal
+   */
+  get state() {
+    return this._state.asReadonly();
+  }
+  /**
+   * Dispatch an event to the store
+   */
+  dispatch(eventKey, payload) {
+    return this.store.dispatch(eventKey, payload);
+  }
+  /**
+   * Get the underlying store instance
+   */
+  getStore() {
+    return this.store;
+  }
+  /**
+   * Cleanup: unsubscribe from state changes
+   */
+  ngOnDestroy() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
+  }
+};
+
+// src/provideRippleStore.ts
+var RIPPLE_STORE_SERVICE = new InjectionToken("RippleStoreService");
+function provideRippleStore(store) {
+  return {
+    provide: RIPPLE_STORE_SERVICE,
+    useFactory: () => new RippleStoreService(store)
+  };
+}
+
+// src/injectStoreState.ts
+import { inject } from "@angular/core";
+function injectStoreState() {
+  const storeService = inject(RIPPLE_STORE_SERVICE);
+  return storeService.state;
+}
+
+// src/injectDispatch.ts
+import { inject as inject2 } from "@angular/core";
+function injectDispatch() {
+  const storeService = inject2(RIPPLE_STORE_SERVICE);
+  return (eventKey, payload) => storeService.dispatch(eventKey, payload);
+}
+
+// src/injectSubscription.ts
+import { inject as inject3, signal as signal2, DestroyRef, NgZone } from "@angular/core";
+function injectSubscription(subscriptionKey, ...params) {
+  const storeService = inject3(RIPPLE_STORE_SERVICE);
+  const store = storeService.getStore();
+  const destroyRef = inject3(DestroyRef);
+  const ngZone = inject3(NgZone);
+  const subscriptionSignal = signal2(
+    store.query(subscriptionKey, params)
+  );
+  const unsubscribe = store.subscribe(
+    subscriptionKey,
+    params,
+    (result) => {
+      ngZone.run(() => {
+        subscriptionSignal.set(result);
+      });
+    }
+  );
+  destroyRef.onDestroy(() => {
+    unsubscribe();
+  });
+  return subscriptionSignal.asReadonly();
+}
+
+// src/injectStore.ts
+import { inject as inject4 } from "@angular/core";
+function injectStore() {
+  const storeService = inject4(RIPPLE_STORE_SERVICE);
+  return storeService.getStore();
+}
+export {
+  RIPPLE_STORE_SERVICE,
+  injectDispatch,
+  injectStore,
+  injectStoreState,
+  injectSubscription,
+  provideRippleStore
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@rplx/angular",
+  "version": "0.2.0",
+  "description": "Angular bindings for Ripple state management",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=16.0.0"
+  },
+  "dependencies": {
+    "@rplx/core": "^0.2.0"
+  },
+  "devDependencies": {
+    "@angular/core": "^17.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.2.2"
+  },
+  "keywords": [
+    "state-management",
+    "angular",
+    "signals",
+    "re-frame",
+    "ripple"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/anonymeye/ripple.git",
+    "directory": "packages/ripple-angular"
+  },
+  "bugs": {
+    "url": "https://github.com/anonymeye/ripple/issues"
+  },
+  "homepage": "https://github.com/anonymeye/ripple#readme",
+  "publishConfig": {
+    "access": "public"
+  }
+}