@automerge/automerge-repo-svelte-store 0.0.1

package/README.md

@@ -0,0 +1,52 @@
+# Svelte store for Automerge Repo
+
+## Example Usage
+
+For a working example, see the [Svelte counter demo](../automerge-repo-demo-counter-svelte/).
+
+`App.svelte`
+
+```svelte
+<script lang="ts">
+  import { Repo } from "@automerge/automerge-repo"
+  import Counter from './lib/Counter.svelte'
+  import { setContextRepo } from "@automerge/automerge-repo-svelte-store"
+
+  const repo = new Repo({ /* repo config */ })
+
+  // Make the `Repo` available to child components (via Svelte's `setContext`).
+  setContextRepo(repo)
+
+  const docId = repo.create()
+</script>
+
+<main>
+  <div class="card">
+    <Counter {docId}/>
+  </div>
+</main>
+```
+
+`Counter.svelte`
+
+```svelte
+<script lang="ts">
+  import type { DocumentId } from "@automerge/automerge-repo"
+  import { document } from "@automerge/automerge-repo-svelte-store"
+
+  export let docId: DocumentId
+
+  // `document` calls `getContextRepo` internally to access the closest `Repo`.
+  const doc = document<{count?: number}>(docId)
+  const increment = () => {
+    doc.change((d) => d.count = (d.count || 0) + 1)
+  }
+</script>
+
+<button on:click={increment}>
+  count is {$doc?.count || 0}
+</button>
+```
+
+## Contributers
+Originally written by Dylan MacKenzie ([@ecstatic-morse](https://github.com/ecstatic-morse)).

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import type { Doc, ChangeFn } from "@automerge/automerge";
+import { Repo, DocumentId } from "@automerge/automerge-repo";
+export declare function getContextRepo(): Repo;
+export declare function setContextRepo(repo: Repo): void;
+export declare function document<T>(documentId: DocumentId): {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<Doc<T>>, invalidate?: (value?: Doc<T>) => void) => import("svelte/store").Unsubscriber;
+    change: (fn: ChangeFn<T>) => void;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAGzD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAyB,MAAM,2BAA2B,CAAA;AAInF,wBAAgB,cAAc,IAAI,IAAI,CAErC;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,QAExC;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU;;iBAWjC,SAAS,CAAC,CAAC;EAI3B"}

package/dist/index.js

@@ -0,0 +1,24 @@
+import { setContext, getContext } from "svelte";
+import { writable } from "svelte/store";
+const ContextRepoKey = Symbol("svelte-context-automerge-repo");
+export function getContextRepo() {
+    return getContext(ContextRepoKey);
+}
+export function setContextRepo(repo) {
+    setContext(ContextRepoKey, repo);
+}
+export function document(documentId) {
+    const repo = getContextRepo();
+    const handle = repo.find(documentId);
+    const { set, subscribe } = writable(null, () => {
+        const onPatch = (h) => set(h.after);
+        handle.addListener("patch", onPatch);
+        return () => handle.removeListener("patch", onPatch);
+    });
+    return {
+        subscribe,
+        change: (fn) => {
+            handle.change(fn);
+        },
+    };
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@automerge/automerge-repo-svelte-store",
+  "version": "0.0.1",
+  "description": "A Svelte store containing your automerge documentsj",
+  "repository": "https://github.com/pvh/automerge-repo",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc",
+    "watch": "npm-watch"
+  },
+  "dependencies": {
+    "@automerge/automerge-repo": "^0.0.1",
+    "svelte": "^3.0.0"
+  },
+  "watch": {
+    "build": {
+      "patterns": "./src/**/*",
+      "extensions": [
+        ".ts"
+      ]
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "e572f26ae416140b025c3ba557d9f781abbdada1"
+}

package/src/index.ts

@@ -0,0 +1,31 @@
+import type { Doc, ChangeFn } from "@automerge/automerge"
+import { setContext, getContext } from "svelte"
+import { writable } from "svelte/store"
+import { Repo, DocumentId, DocHandlePatchPayload } from "@automerge/automerge-repo"
+
+const ContextRepoKey = Symbol("svelte-context-automerge-repo")
+
+export function getContextRepo(): Repo {
+  return getContext<Repo>(ContextRepoKey)
+}
+
+export function setContextRepo(repo: Repo) {
+  setContext(ContextRepoKey, repo)
+}
+
+export function document<T>(documentId: DocumentId) {
+  const repo = getContextRepo()
+  const handle = repo.find<T>(documentId)
+  const { set, subscribe } = writable<Doc<T>>(null, () => {
+    const onPatch = (h: DocHandlePatchPayload<T>) => set(h.after)
+    handle.addListener("patch", onPatch)
+    return () => handle.removeListener("patch", onPatch)
+  })
+
+  return {
+    subscribe,
+    change: (fn: ChangeFn<T>) => {
+      handle.change(fn)
+    },
+  }
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "react",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": false,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts"]
+}