Add common-frp-lit

Introduces watch async directive to watch a common-frp signal within an
HTML template.

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,37 @@
+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 {
+  #isWatching
+
+  constructor(part: any) {
+    super(part);
+    this.#isWatching = state(true);
+  }
+
+  override render(signal: any) {
+    effect(this.#isWatching, isWatching => {
+      if (isWatching) {
+        this.setValue(signal.get());
+      }
+    });
+    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/**/*",
+  ]
+}