common-frp-lit

typescript/package.json

@@ -36,6 +36,7 @@
         "./packages/example-module:build",
         "./packages/lookslike-prototype:build",
         "./packages/common-frp:build",
+        "./packages/common-frp-lit:build",
         "./common/data:build",
         "./common/io:build",
         "./common/module:build",
@@ -52,6 +53,7 @@
         "./packages/example-module:clean",
         "./packages/lookslike-prototype:clean",
         "./packages/common-frp:clean",
+        "./packages/common-frp-lit:clean",
         "./common/data:clean",
         "./common/io:clean",
         "./common/module:clean",

typescript/packages/common-frp-lit/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@commontools/common-frp-lit",
+  "author": "The Common Authors",
+  "version": "0.0.1",
+  "description": "common-frp integration for Lit",
+  "license": "MIT",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "wireit",
+    "clean": "wireit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/commontoolsinc/labs.git"
+  },
+  "bugs": {
+    "url": "https://github.com/commontoolsinc/labs/issues"
+  },
+  "homepage": "https://github.com/commontoolsinc/labs#readme",
+  "exports": "./lib/index.js",
+  "files": [
+    "./lib/index.js"
+  ],
+  "dependencies": {
+    "lit": "^3.1.4"
+  },
+  "devDependencies": {
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.13",
+    "wireit": "^0.14.4"
+  },
+  "wireit": {
+    "build": {
+      "dependencies": [
+        "../common-frp:build"
+      ],
+      "files": [
+        "./src/**/*"
+      ],
+      "output": [
+        "./lib/**/*"
+      ],
+      "command": "tsc --build -f"
+    },
+    "clean": {
+      "command": "rm -rf ./lib ./.wireit"
+    }
+  }
+}

typescript/packages/common-frp-lit/src/index.ts

@@ -0,0 +1,39 @@
+import { signal } from "@commontools/common-frp";
+import {directive} from 'lit/directive.js';
+import {AsyncDirective} from 'lit/async-directive.js';
+
+const {state, effect} = signal;
+
+class WatchDirective extends AsyncDirective {
+  #cancel: (() => void) | undefined = undefined;
+  #isWatching;
+
+  constructor(part: any) {
+    super(part);
+    this.#isWatching = state(true);
+  }
+
+  override render(signal: any) {
+    this.#cancel?.();
+    this.#cancel = effect([this.#isWatching, signal], (isWatching, value) => {
+      if (isWatching) {
+        this.setValue(value);
+      }
+    });
+    return signal.get();
+  }
+
+  protected override disconnected(): void {
+    this.#isWatching.send(false);
+  }
+
+  protected override reconnected(): void {
+    this.#isWatching.send(true);
+  }
+}
+
+/**
+ * Renders a signal and subscribes to it, updating the part when the signal
+ * changes.
+ */
+export const watch = directive(WatchDirective);

typescript/packages/common-frp-lit/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["es2022", "DOM"],
+    "outDir": "./lib",
+    "rootDir": "./src",
+    "strict": false,
+    "paths": {
+      "common:module/module@0.0.1": [
+        "../../node_modules/@commontools/module/lib/index.d.ts"
+      ],
+      "common:io/state@0.0.1": [
+        "../../node_modules/@commontools/io/lib/index.d.ts"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*",
+  ]
+}

typescript/packages/common-frp/src/example/basic.ts

@@ -11,7 +11,7 @@ const clicks = events(button, 'click')
 
 const clickCount = scan(clicks, (state, _) => state + 1, 0)
 
-effect(clickCount, x => {
+effect([clickCount], x => {
   button.textContent = `Clicks: ${x}`
   console.log(x)
 })

typescript/packages/common-frp/src/signal.ts

@@ -82,14 +82,90 @@ const sample = <T>(container: Gettable<T>) => container.get()
 export type Signal<T> = Gettable<T> & Updates<void> & Cancellable
 export type SignalSubject<T> = Gettable<T> & Updates<void> & Subject<T>
 
+export type Effect = {
+  <A>(
+    upstreams: [Signal<A>],
+    perform: (a: A) => void
+  ): Cancel
+
+  <A, B>(
+    upstreams: [Signal<A>, Signal<B>],
+    perform: (a: A, b: B) => void
+  ): Cancel
+
+  <A, B, C>(
+    upstreams: [Signal<A>, Signal<B>, Signal<C>],
+    perform: (a: A, b: B, c: C) => void
+  ): Cancel
+
+  <A, B, C, D>(
+    upstreams: [Signal<A>, Signal<B>, Signal<C>, Signal<D>],
+    perform: (a: A, b: B, c: C, d: D) => void
+  ): Cancel
+
+  <A, B, C, D, E>(
+    upstreams: [Signal<A>, Signal<B>, Signal<C>, Signal<D>, Signal<E>],
+    perform: (a: A, b: B, c: C, d: D, e: E) => void
+  ): Cancel
+
+  <A, B, C, D, E, F>(
+    upstreams: [
+      Signal<A>,
+      Signal<B>,
+      Signal<C>,
+      Signal<D>,
+      Signal<E>,
+      Signal<F>
+    ],
+    perform: (a: A, b: B, c: C, d: D, e: E, f: F) => void
+  ): Cancel
+
+  <A, B, C, D, E, F, G>(
+    upstreams: [
+      Signal<A>,
+      Signal<B>,
+      Signal<C>,
+      Signal<D>,
+      Signal<E>,
+      Signal<F>,
+      Signal<G>
+    ],
+    perform: (a: A, b: B, c: C, d: D, e: E, f: F, g: G) => void
+  ): Cancel
+
+  <A, B, C, D, E, F, G, H>(
+    upstreams: [
+      Signal<A>,
+      Signal<B>,
+      Signal<C>,
+      Signal<D>,
+      Signal<E>,
+      Signal<F>,
+      Signal<G>,
+      Signal<H>
+    ],
+    perform: (a: A, b: B, c: C, d: D, e: E, f: F, g: G, h: H) => void
+  ): Cancel
+
+  (
+    upstreams: Array<Signal<any>>,
+    perform: (...values: Array<any>) => void
+  ): Cancel
+}
+
 /** React to a signal, producing an effect any time it changes */
-export const effect = <T>(
-  signal: Signal<T>,
-  effect: Send<T>
+export const effect: Effect = (
+  upstreams: Array<Signal<any>>,
+  perform: (...values: Array<any>) => void
 ) => {
-  const job = () => effect(signal.get())
+  const job = () => perform(...upstreams.map(sample))
+  const schedule = () => withReads(job)
+
   job()
-  return signal[__updates__](() => withReads(job))
+
+  return combineCancels(
+    upstreams.map(signal => signal[__updates__](schedule))
+  )
 }
 
 export const state = <T>(initial: T) => {