From 373cedd4ca69b68e47b9d0a6ba7060d9cc3de236 Mon Sep 17 00:00:00 2001 From: Gordon Brander Date: Fri, 7 Jun 2024 20:34:15 -0700 Subject: [PATCH] Add counter example for watch directive --- typescript/packages/common-frp-lit/index.html | 11 ++++++++++ .../packages/common-frp-lit/package.json | 3 ++- .../src/example/counter-example.ts | 22 +++++++++++++++++++ .../packages/common-frp-lit/src/index.ts | 11 +++------- 4 files changed, 38 insertions(+), 9 deletions(-) create mode 100644 typescript/packages/common-frp-lit/index.html create mode 100644 typescript/packages/common-frp-lit/src/example/counter-example.ts diff --git a/typescript/packages/common-frp-lit/index.html b/typescript/packages/common-frp-lit/index.html new file mode 100644 index 000000000..2d720da30 --- /dev/null +++ b/typescript/packages/common-frp-lit/index.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/typescript/packages/common-frp-lit/package.json b/typescript/packages/common-frp-lit/package.json index 69122cd11..e61f57062 100644 --- a/typescript/packages/common-frp-lit/package.json +++ b/typescript/packages/common-frp-lit/package.json @@ -8,7 +8,8 @@ "type": "module", "scripts": { "build": "wireit", - "clean": "wireit" + "clean": "wireit", + "dev": "vite" }, "repository": { "type": "git", diff --git a/typescript/packages/common-frp-lit/src/example/counter-example.ts b/typescript/packages/common-frp-lit/src/example/counter-example.ts new file mode 100644 index 000000000..096c30d85 --- /dev/null +++ b/typescript/packages/common-frp-lit/src/example/counter-example.ts @@ -0,0 +1,22 @@ +import { LitElement } from "lit"; +import { html } from "lit-html"; +import { signal, config } from "@commontools/common-frp"; +import { watch } from "../index.js"; +import { customElement } from "lit/decorators.js"; + +config.debug = true; + +const {state} = signal; + +const count = state(0); + +@customElement('counter-example') +export class BasicExample extends LitElement { + override render() { + return html` + count.send(count.get() + 1)}> + Count: ${watch(count)} + + `; + } +} \ No newline at end of file diff --git a/typescript/packages/common-frp-lit/src/index.ts b/typescript/packages/common-frp-lit/src/index.ts index 37e1de386..ddc9ac6fd 100644 --- a/typescript/packages/common-frp-lit/src/index.ts +++ b/typescript/packages/common-frp-lit/src/index.ts @@ -1,17 +1,12 @@ import { signal } from "@commontools/common-frp"; -import {directive} from 'lit/directive.js'; -import {AsyncDirective} from 'lit/async-directive.js'; +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); - } + #isWatching = state(true); override render(signal: any) { this.#cancel?.();