@mmstack/primitives 20.4.1 → 20.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +39 -0
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -19,6 +19,7 @@ This library provides the following primitives:
19
19
  - `throttled` - Creates a writable signal whose value updates are rate-limited.
20
20
  - `mutable` - A signal variant allowing in-place mutations while triggering updates.
21
21
  - `stored` - Creates a signal synchronized with persistent storage (e.g., localStorage).
22
+ - `piped` – Creates a signal with a chainable & typesafe `.pipe(...)` method, which returns a pipable computed.
22
23
  - `withHistory` - Enhances a signal with a complete undo/redo history stack.
23
24
  - `mapArray` - Maps a reactive array efficently into an array of stable derivations.
24
25
  - `toWritable` - Converts a read-only signal to writable using custom write logic.
@@ -211,6 +212,44 @@ export class ThemeSelectorComponent {
211
212
  }
212
213
  ```
213
214
 
215
+ ### piped
216
+
217
+ Adds a chainable .pipe(...) method to signals, allowing you to compose pure, synchronous transforms into reactive pipelines. Each .pipe(...) call returns a computed signal that is itself pipeable, so you can keep chaining.
218
+
219
+ ```typescript
220
+ import { Component, effect } from '@angular/core';
221
+ import { piped, pipeable } from '@mmstack/primitives';
222
+
223
+ @Component({
224
+ selector: 'app-pipeable',
225
+ template: `<button (click)="increment()">Increment</button>`,
226
+ })
227
+ export class PipeableComponent {
228
+ count = piped(1);
229
+
230
+ // Create a derived pipeline
231
+ label = this.count.pipe(
232
+ (n) => n * 2, // number -> number
233
+ (n) => `#${n}`, // number -> string
234
+ );
235
+
236
+ constructor() {
237
+ effect(() => {
238
+ console.log('Label:', this.label()); // e.g., "#2"
239
+ });
240
+ }
241
+
242
+ increment() {
243
+ this.count.update((n) => n + 1);
244
+ }
245
+ }
246
+
247
+ // You can also transform existing signals into pipable versions
248
+ const example = pipeable(computed(() => 1)); // PipeableSignal<number> (a readonly signal + pipe)
249
+ const example2 = pipeable(signal(1)); // PipeableSignal<number, WritableSignal<number>> (a writable signal + pipe)
250
+ const example3 = pipeable(mutable({ name: 'john' })); // This returns a pipeable mutable signal (you get the point :) )
251
+ ```
252
+
214
253
  ### mapArray
215
254
 
216
255
  Reactive map helper that stabilizes a source array Signal by length. It provides stability by giving the mapping function a stable Signal<T> for each item based on its index. Sub signals are not re-created, rather they propagate value updates through. This is particularly useful for rendering lists (@for) as it minimizes DOM changes when array items change identity but represent the same conceptual entity.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mmstack/primitives",
3
- "version": "20.4.1",
3
+ "version": "20.4.2",
4
4
  "keywords": [
5
5
  "angular",
6
6
  "signals",