@jscutlery/rx-computed 0.1.0

package/README.md

@@ -0,0 +1,82 @@
+# `@jscutlery/rx-computed`
+
+# Installation
+
+```sh
+yarn add @jscutlery/rx-computed
+
+# or
+
+npm install @jscutlery/rx-computed
+```
+
+# `rxComputed`
+
+## Usage
+```typescript
+import { rxComputed } from '@jscutlery/rx-computed';
+
+@Component({
+  ...
+  template: `
+    <mc-keywords-input (keywordsChange)="keywords.set($event)"/>
+    <mc-sort-input (sortChange)="sort.set($event)"/>
+    <mc-recipes-list [recipes]="recipes()"/>
+  `
+})
+class MyCmp {
+  keywords = signal<string | undefined>(undefined);
+  sort = signal<'asc' | 'desc'>('desc');
+
+  recipes = rxComputed(() => repo.getRecipes(keywords(), sort()), {initialValue: []});
+}
+```
+
+## Motivation
+
+Synchronously computed signals in Angular are relatively straight forward.  However, when dealing with an asynchronous source of data like an `Observable`, there is no primitive to derive a signal from it.
+
+There are two common ways of dealing with this:
+
+1. Using `@angular/core/rxjs-interop` which requires us to explicitly define the dependencies of the computed signal:
+
+```typescript
+// Signals
+const keywords = signal(...);
+const sort = signal(...);
+
+// Signals => RxJS
+const recipes$ = combineLatest({
+  keywords: toObservable(keywords),
+  sort: toObservable(sort)
+}).pipe(
+  switchMap(({ keywords, sort }) => repo.getRecipes(keywords, sort))
+);
+
+// RxJS => Signals
+const recipes = toSignal(recipes$, []);
+```
+
+2. Using `effet` explicitly _(which is not the recommended way of using it, cf. https://angular.io/guide/signals#when-not-to-use-effects)_:
+
+```typescript
+const keywords = signal(...);
+const sort = signal(...);
+
+const recipes = signal(...);
+
+effect((onCleanup) => {
+  const sub = repo.getRecipes(keywords(), sort())
+    .subscribe(_recipes => recipes.set(_recipes));
+
+  onCleanup(() => sub.unsubscribe());
+});
+```
+
+## FAQ
+
+### What about errors?
+
+Cf. [Managing RxJS Traffic with Signals and Suspensify](https://marmicode.io/blog/managing-rxjs-traffic-with-signals)
+
+Cf. [@jscutlery/operators#suspensify](../operators/README.md#suspensify)

package/esm2022/index.mjs

@@ -0,0 +1,2 @@
+export { rxComputed } from './lib/rx-computed';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wYWNrYWdlcy9yeC1jb21wdXRlZC9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLG1CQUFtQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgcnhDb21wdXRlZCB9IGZyb20gJy4vbGliL3J4LWNvbXB1dGVkJzsiXX0=

package/esm2022/jscutlery-rx-computed.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoianNjdXRsZXJ5LXJ4LWNvbXB1dGVkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcGFja2FnZXMvcngtY29tcHV0ZWQvc3JjL2pzY3V0bGVyeS1yeC1jb21wdXRlZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==

package/esm2022/lib/rx-computed.mjs

@@ -0,0 +1,22 @@
+import { computed, effect, signal } from '@angular/core';
+import { pending, suspensify } from '@jscutlery/operators';
+export function rxComputed(fn, { initialValue } = {}) {
+    const sig = signal(pending);
+    effect((onCleanup) => {
+        const sub = fn()
+            .pipe(suspensify())
+            .subscribe((value) => sig.set(value));
+        onCleanup(() => sub.unsubscribe());
+    }, { allowSignalWrites: true });
+    return computed(() => {
+        const suspense = sig();
+        if (suspense.hasError) {
+            throw suspense.error;
+        }
+        if (suspense.hasValue) {
+            return suspense.value;
+        }
+        return initialValue;
+    });
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicngtY29tcHV0ZWQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9yeC1jb21wdXRlZC9zcmMvbGliL3J4LWNvbXB1dGVkLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUNqRSxPQUFPLEVBQUUsT0FBTyxFQUFZLFVBQVUsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBR3JFLE1BQU0sVUFBVSxVQUFVLENBQ3hCLEVBQXVCLEVBQ3ZCLEVBQUUsWUFBWSxLQUF1QyxFQUFFO0lBRXZELE1BQU0sR0FBRyxHQUFHLE1BQU0sQ0FBOEIsT0FBTyxDQUFDLENBQUM7SUFFekQsTUFBTSxDQUNKLENBQUMsU0FBUyxFQUFFLEVBQUU7UUFDWixNQUFNLEdBQUcsR0FBRyxFQUFFLEVBQUU7YUFDYixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7YUFDbEIsU0FBUyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7UUFDeEMsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLEdBQUcsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxDQUFDO0lBQ3JDLENBQUMsRUFDRCxFQUFFLGlCQUFpQixFQUFFLElBQUksRUFBRSxDQUM1QixDQUFDO0lBRUYsT0FBTyxRQUFRLENBQUMsR0FBRyxFQUFFO1FBQ25CLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDO1FBQ3ZCLElBQUksUUFBUSxDQUFDLFFBQVEsRUFBRTtZQUNyQixNQUFNLFFBQVEsQ0FBQyxLQUFLLENBQUM7U0FDdEI7UUFFRCxJQUFJLFFBQVEsQ0FBQyxRQUFRLEVBQUU7WUFDckIsT0FBTyxRQUFRLENBQUMsS0FBSyxDQUFDO1NBQ3ZCO1FBRUQsT0FBTyxZQUE2QixDQUFDO0lBQ3ZDLENBQUMsQ0FBQyxDQUFDO0FBQ0wsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNvbXB1dGVkLCBlZmZlY3QsIHNpZ25hbCwgU2lnbmFsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBwZW5kaW5nLCBTdXNwZW5zZSwgc3VzcGVuc2lmeSB9IGZyb20gJ0Bqc2N1dGxlcnkvb3BlcmF0b3JzJztcbmltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcblxuZXhwb3J0IGZ1bmN0aW9uIHJ4Q29tcHV0ZWQ8VCwgSU5JVElBTF9WQUxVRSA9IFQgfCBudWxsIHwgdW5kZWZpbmVkPihcbiAgZm46ICgpID0+IE9ic2VydmFibGU8VD4sXG4gIHsgaW5pdGlhbFZhbHVlIH06IHsgaW5pdGlhbFZhbHVlPzogSU5JVElBTF9WQUxVRSB9ID0ge31cbik6IFNpZ25hbDxUIHwgSU5JVElBTF9WQUxVRT4ge1xuICBjb25zdCBzaWcgPSBzaWduYWw8U3VzcGVuc2U8VCB8IElOSVRJQUxfVkFMVUU+PihwZW5kaW5nKTtcblxuICBlZmZlY3QoXG4gICAgKG9uQ2xlYW51cCkgPT4ge1xuICAgICAgY29uc3Qgc3ViID0gZm4oKVxuICAgICAgICAucGlwZShzdXNwZW5zaWZ5KCkpXG4gICAgICAgIC5zdWJzY3JpYmUoKHZhbHVlKSA9PiBzaWcuc2V0KHZhbHVlKSk7XG4gICAgICBvbkNsZWFudXAoKCkgPT4gc3ViLnVuc3Vic2NyaWJlKCkpO1xuICAgIH0sXG4gICAgeyBhbGxvd1NpZ25hbFdyaXRlczogdHJ1ZSB9XG4gICk7XG5cbiAgcmV0dXJuIGNvbXB1dGVkKCgpID0+IHtcbiAgICBjb25zdCBzdXNwZW5zZSA9IHNpZygpO1xuICAgIGlmIChzdXNwZW5zZS5oYXNFcnJvcikge1xuICAgICAgdGhyb3cgc3VzcGVuc2UuZXJyb3I7XG4gICAgfVxuXG4gICAgaWYgKHN1c3BlbnNlLmhhc1ZhbHVlKSB7XG4gICAgICByZXR1cm4gc3VzcGVuc2UudmFsdWU7XG4gICAgfVxuXG4gICAgcmV0dXJuIGluaXRpYWxWYWx1ZSBhcyBJTklUSUFMX1ZBTFVFO1xuICB9KTtcbn0iXX0=

package/fesm2022/jscutlery-rx-computed.mjs

@@ -0,0 +1,29 @@
+import { signal, effect, computed } from '@angular/core';
+import { pending, suspensify } from '@jscutlery/operators';
+
+function rxComputed(fn, { initialValue } = {}) {
+    const sig = signal(pending);
+    effect((onCleanup) => {
+        const sub = fn()
+            .pipe(suspensify())
+            .subscribe((value) => sig.set(value));
+        onCleanup(() => sub.unsubscribe());
+    }, { allowSignalWrites: true });
+    return computed(() => {
+        const suspense = sig();
+        if (suspense.hasError) {
+            throw suspense.error;
+        }
+        if (suspense.hasValue) {
+            return suspense.value;
+        }
+        return initialValue;
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { rxComputed };
+//# sourceMappingURL=jscutlery-rx-computed.mjs.map

package/fesm2022/jscutlery-rx-computed.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"jscutlery-rx-computed.mjs","sources":["../../../../packages/rx-computed/src/lib/rx-computed.ts","../../../../packages/rx-computed/src/jscutlery-rx-computed.ts"],"sourcesContent":["import { computed, effect, signal, Signal } from '@angular/core';\nimport { pending, Suspense, suspensify } from '@jscutlery/operators';\nimport { Observable } from 'rxjs';\n\nexport function rxComputed<T, INITIAL_VALUE = T | null | undefined>(\n  fn: () => Observable<T>,\n  { initialValue }: { initialValue?: INITIAL_VALUE } = {}\n): Signal<T | INITIAL_VALUE> {\n  const sig = signal<Suspense<T | INITIAL_VALUE>>(pending);\n\n  effect(\n    (onCleanup) => {\n      const sub = fn()\n        .pipe(suspensify())\n        .subscribe((value) => sig.set(value));\n      onCleanup(() => sub.unsubscribe());\n    },\n    { allowSignalWrites: true }\n  );\n\n  return computed(() => {\n    const suspense = sig();\n    if (suspense.hasError) {\n      throw suspense.error;\n    }\n\n    if (suspense.hasValue) {\n      return suspense.value;\n    }\n\n    return initialValue as INITIAL_VALUE;\n  });\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAIM,SAAU,UAAU,CACxB,EAAuB,EACvB,EAAE,YAAY,KAAuC,EAAE,EAAA;AAEvD,IAAA,MAAM,GAAG,GAAG,MAAM,CAA8B,OAAO,CAAC,CAAC;AAEzD,IAAA,MAAM,CACJ,CAAC,SAAS,KAAI;QACZ,MAAM,GAAG,GAAG,EAAE,EAAE;aACb,IAAI,CAAC,UAAU,EAAE,CAAC;AAClB,aAAA,SAAS,CAAC,CAAC,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;QACxC,SAAS,CAAC,MAAM,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;AACrC,KAAC,EACD,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAC5B,CAAC;IAEF,OAAO,QAAQ,CAAC,MAAK;AACnB,QAAA,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC;QACvB,IAAI,QAAQ,CAAC,QAAQ,EAAE;YACrB,MAAM,QAAQ,CAAC,KAAK,CAAC;AACtB,SAAA;QAED,IAAI,QAAQ,CAAC,QAAQ,EAAE;YACrB,OAAO,QAAQ,CAAC,KAAK,CAAC;AACvB,SAAA;AAED,QAAA,OAAO,YAA6B,CAAC;AACvC,KAAC,CAAC,CAAC;AACL;;AChCA;;AAEG;;;;"}

package/index.d.ts

@@ -0,0 +1 @@
+export { rxComputed } from './lib/rx-computed';

package/lib/rx-computed.d.ts

@@ -0,0 +1,5 @@
+import { Signal } from '@angular/core';
+import { Observable } from 'rxjs';
+export declare function rxComputed<T, INITIAL_VALUE = T | null | undefined>(fn: () => Observable<T>, { initialValue }?: {
+    initialValue?: INITIAL_VALUE;
+}): Signal<T | INITIAL_VALUE>;

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@jscutlery/rx-computed",
+  "version": "0.1.0",
+  "peerDependencies": {
+    "@angular/common": "^16.0.0",
+    "@angular/core": "^16.0.0",
+    "rxjs": "7.8.1",
+    "@jscutlery/operators": "2.1.2"
+  },
+  "dependencies": {
+    "tslib": "^2.4.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/jscutlery-rx-computed.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/jscutlery-rx-computed.mjs",
+      "esm": "./esm2022/jscutlery-rx-computed.mjs",
+      "default": "./fesm2022/jscutlery-rx-computed.mjs"
+    }
+  }
+}