diff --git a/README.md b/README.md
index dfafb55..b3039f3 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,7 @@ Use [Preact signals](https://github.com/preactjs/signals) with the interface of
- [Preact & TypeScript](https://stackblitz.com/edit/vitejs-vite-hktyyf?file=src%2Fmain.tsx)
- [React](https://stackblitz.com/edit/vitejs-vite-zoh464?file=src%2Fmain.jsx)
- [React & TypeScript](https://stackblitz.com/edit/vitejs-vite-r2stgq?file=src%2Fmain.tsx)
+ - [Lit](https://stackblitz.com/edit/lit-and-deepsignal?file=src%2Fmy-element.js)
- Or on Codesandbox
- [Preact](https://codesandbox.io/s/deepsignal-demo-hv1i1p)
- [Preact & TypeScript](https://codesandbox.io/s/deepsignal-demo-typescript-os7ox0?file=/src/index.tsx)
@@ -74,7 +75,11 @@ If you are using `deepsignal` with Preact (`@preact/signals`), you should use th
```js
import { deepSignal } from "deepsignal";
-const state = deepSignal({});
+const state = deepSignal({
+ count: 0,
+});
+
+const Count = () =>
{state.$count}
;
```
### With React
@@ -83,18 +88,47 @@ const state = deepSignal({});
npm install deepsignal @preact/signals-react
```
-If you are using the library with React, you should use the `deepsignal/react` import. You also need to install `@preact/signals-react`.
+If you are using the library with React (`@preact/signals-react`), you should use the `deepsignal/react` import. You also need to install `@preact/signals-react`.
```js
import { deepSignal } from "deepsignal/react";
-const state = deepSignal({});
+const state = deepSignal({
+ count: 0,
+});
+
+const Count = () => {state.$count}
;
```
- If you want to use `deepSignal` outside of the components, please follow the [React integration guide of `@preact/signals-react`](https://github.com/preactjs/signals/blob/main/packages/react/README.md#react-integration) to choose one of the integration methods.
- For `useDeepSignal`, no integration is required.
-### Without Preact/React
+### With Lit
+
+Lit now [supports Preact Signals](https://lit.dev/blog/2023-10-10-lit-3.0/#preact-signals-integration), so you can also use `deepsignal` in Lit.
+
+```sh
+npm install deepsignal @lit-labs/preact-signals
+```
+
+If you are using the library just with Lit, you should use the `deepsignal/core` import. You also need to install `@lit-labs/preact-signals` and use its `SignalWatcher` function.
+
+```js
+import { SignalWatcher } from "@lit-labs/preact-signals";
+import { deepSignal } from "deepsignal/core";
+
+const state = deepSignal({
+ count: 0,
+});
+
+class Count extends SignalWatcher(LitElement) {
+ render() {
+ return html`${state.$count}
`;
+ }
+}
+```
+
+### Without Preact/React/Lit
```sh
npm install deepsignal @preact/signals-core
@@ -103,9 +137,16 @@ npm install deepsignal @preact/signals-core
If you are using the library just with `@preact/signals-core`, you should use the `deepsignal/core` import. You also need to install `@preact/signals-core`.
```js
+import { effect } from "@preact/signals-core";
import { deepSignal } from "deepsignal/core";
-const state = deepSignal({});
+const state = deepSignal({
+ count: 0,
+});
+
+effect(() => {
+ console.log(`Count: ${state.count}`);
+});
```
This is because the `deepsignal` import includes a dependency on `@preact/signals`, while the `deepsignal/core` import does not. This allows you to use deep signals with either `@preact/signals` or `@preact/signals-core`, depending on your needs. **Do not use both.**