https://github.com/chee/solid-automerge
fine-grained reactivity that's consistent across space and time.
https://github.com/chee/solid-automerge
automerge automerge-repo hooks primitives reactivity signals solid solid-js solidjs
Last synced: 2 months ago
JSON representation
fine-grained reactivity that's consistent across space and time.
- Host: GitHub
- URL: https://github.com/chee/solid-automerge
- Owner: chee
- License: mit
- Created: 2024-08-06T17:23:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-01T11:09:01.000Z (5 months ago)
- Last Synced: 2025-09-27T02:51:09.743Z (4 months ago)
- Topics: automerge, automerge-repo, hooks, primitives, reactivity, signals, solid, solid-js, solidjs
- Language: TypeScript
- Homepage: https://chee.github.io/solid-automerge/
- Size: 583 KB
- Stars: 12
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
> [!important]
> omg
> [!caution]
> This is now situated warm and cozy as part of the Automerge Repo monorepo:
>
> [@automerge/automerge-repo-solid-primitives](https://github.com/automerge/automerge-repo/tree/main/packages/automerge-repo-solid-primitives)
> [!tip]
> You can `pnpm add solid-automerge@npm:@automerge/automerge-repo-solid-primitives` and
> carry on like nothing happened.
> [!important]
> 🎉 omg 🎉
# Solid Automerge
Solid primitives for 
Automerge .
```sh
pnpm add solid-js @automerge/automerge-repo solid-automerge
```
## useDocument ✨
Get a fine-grained live view of an automerge document from its URL.
When the handle receives changes, it converts the incoming automerge patch ops
to precise solid store updates, giving you fine-grained reactivity that's
consistent across space and time.
Returns `[doc, handle]`.
```ts
useDocument(
() => AutomergeURL,
options?: {repo: Repo}
): [Doc, DocHandle]
```
```tsx
// example
const [url, setURL] = createSignal(props.url)
const [doc, handle] = useDocument(url, {repo})
const inc = () => handle()?.change(d => d.count++)
return {doc()?.count}
```
The `{repo}` option can be left out if you are using [RepoContext](#repocontext).
## createDocumentProjection
Get a fine-grained live view from a signal automerge `DocHandle`.
Underlying primitive for [`useDocument`](#usedocument-).
Works with [`useHandle`](#usehandle).
```ts
createDocumentProjection(() => AutomergeUrl): Doc
```
```tsx
// example
const handle = repo.find(url)
const doc = makeDocumentProjection<{items: {title: string}[]}>(handle)
// subscribes fine-grained to doc.items[1].title
return
{doc.items[1].title}
```
## makeDocumentProjection
Just like `createDocumentProjection`, but without a reactive input.
Underlying primitive for [`createDocumentProjection`](#createDocumentProjection).
```ts
makeDocumentProjection(handle: Handle): Doc
```
```tsx
// example
const handle = repo.find(url)
const doc = makeDocumentProjection<{items: {title: string}[]}>(handle)
// subscribes fine-grained to doc.items[1].title
return
{doc.items[1].title}
```
## useDocHandle
Get a [DocHandle](https://automerge.org/docs/repositories/dochandles/) from the
repo as a
[resource](https://docs.solidjs.com/reference/basic-reactivity/create-resource).
Perfect for handing to `createDocumentProjection`.
```ts
useDocHandle(
() => AnyDocumentId,
options?: {repo: Repo}
): Resource>
```
```tsx
const handle = useDocHandle(id, {repo})
// or
const handle = useDocHandle(id)
```
The `repo` option can be left out if you are using [RepoContext](#repocontext).
## context
If you prefer the context pattern for some reason, you can pass the repo higher
up in your app with `RepoContext`
### `RepoContext`
A convenience context for Automerge-Repo Solid apps. Optional: if you prefer you
can pass a repo as an option to `useDocHandle` and `useDocument`.
```tsx
```
### `useRepo`
Get the repo from the [context](#repocontext).
```ts
useRepo(): Repo
```
#### e.g.
```ts
const repo = useRepo()
```