@graffiti-garden/wrapper-vue 0.0.1

package/.github/workflows/main.yml

@@ -0,0 +1,49 @@
+name: Vite Build
+
+on:
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: "npm"
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build-demo
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload dist repository
+          path: "./demo/dist"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

package/demo/App.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useGraffiti, useGraffitiSession } from "../src/plugin";
+import { type GraffitiObject, type JSONSchema4 } from "@graffiti-garden/api";
+
+const graffiti = useGraffiti();
+const session = useGraffitiSession();
+
+const channels = ref(["graffiti-client-demo"]);
+
+const noteSchema = {
+    properties: {
+        value: {
+            properties: {
+                type: {
+                    enum: ["Note"],
+                    type: "string",
+                },
+                content: {
+                    type: "string",
+                },
+            },
+            required: ["type", "content"],
+        },
+    },
+} as const satisfies JSONSchema4;
+
+const posting = ref(false);
+const myNote = ref("");
+async function postNote() {
+    if (!myNote.value.length) return;
+    if (!session.value) {
+        alert("You are not logged in!");
+        return;
+    }
+    posting.value = true;
+    await graffiti.put<typeof noteSchema>(
+        {
+            channels: channels.value,
+            value: {
+                type: "Note",
+                content: myNote.value,
+            },
+        },
+        session.value,
+    );
+    myNote.value = "";
+    posting.value = false;
+}
+
+const editing = ref<string>("");
+const editText = ref<string>("");
+function startEditing(result: GraffitiObject<typeof noteSchema>) {
+    editing.value = graffiti.locationToUri(result);
+    editText.value = result.value.content;
+}
+
+const savingEdits = ref(false);
+async function saveEdits(result: GraffitiObject<typeof noteSchema>) {
+    if (!session.value) {
+        alert("You are not logged in!");
+        return;
+    }
+    savingEdits.value = true;
+    await graffiti.patch(
+        {
+            value: [{ op: "replace", path: "/content", value: editText.value }],
+        },
+        result,
+        session.value,
+    );
+    editText.value = "";
+    editing.value = "";
+    savingEdits.value = false;
+}
+</script>
+
+<template>
+    <h1>Graffiti Vue Wrapper Demo</h1>
+    <div v-if="session">
+        Logged in as: {{ session.actor }}
+        <button @click="graffiti.logout(session)">Log out</button>
+    </div>
+    <div v-else>
+        <button @click="graffiti.login()">Log in</button>
+    </div>
+    <GraffitiDiscover
+        :channels="channels"
+        :schema="noteSchema"
+        v-slot="{ results, poll, isPolling }"
+    >
+        <div class="controls">
+            <form @submit.prevent="postNote">
+                <label for="my-note">Note:</label>
+                <input
+                    type="text"
+                    id="my-note"
+                    name="my-note"
+                    v-model="myNote"
+                />
+                <input type="submit" value="Post" />
+                <span v-if="posting">Posting...</span>
+            </form>
+
+            <button @click="poll">Refresh</button>
+
+            Change the channel:
+            <input
+                type="text"
+                :value="channels[0]"
+                @input="
+                    (event) =>
+                        event.target &&
+                        'value' in event.target &&
+                        typeof event.target.value === 'string' &&
+                        (channels = [event.target.value])
+                "
+            />
+        </div>
+        <ul>
+            <li v-if="isPolling">Loading...</li>
+            <li
+                v-for="result in results.sort(
+                    (a, b) =>
+                        // Sort by lastModified, most recent first
+                        // lastModified are ISO strings
+                        new Date(b.lastModified).getTime() -
+                        new Date(a.lastModified).getTime(),
+                )"
+                class="post"
+            >
+                <div class="actor">
+                    {{ result.actor }}
+                </div>
+                <div class="timestamp">
+                    {{ result.lastModified.toLocaleString() }}
+                </div>
+
+                <div
+                    class="content"
+                    v-if="editing !== $graffiti.locationToUri(result)"
+                >
+                    {{ result.value.content }}
+                </div>
+                <form
+                    v-else
+                    @submit.prevent="saveEdits(result)"
+                    class="content"
+                >
+                    <input type="text" v-model="editText" />
+                    <input type="submit" value="Save" />
+                    <span v-if="savingEdits">Saving...</span>
+                </form>
+
+                <menu>
+                    <li>
+                        <a
+                            target="_blank"
+                            :href="$graffiti.locationToUri(result)"
+                        >
+                            🌐
+                        </a>
+                    </li>
+                    <li v-if="result.actor === session?.actor">
+                        <button @click="$graffiti.delete(result, session)">
+                            Delete
+                        </button>
+                    </li>
+                    <li v-if="result.actor === session?.actor">
+                        <button @click="startEditing(result)">Edit</button>
+                    </li>
+                </menu>
+            </li>
+        </ul>
+    </GraffitiDiscover>
+</template>
+
+<style>
+:root {
+    font-family: Arial, sans-serif;
+}
+
+.graffiti-session-manager {
+    border-radius: 0.5rem;
+}
+
+ul {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0;
+}
+
+.post {
+    list-style: none;
+    border: 1px solid #ccc;
+    border-radius: 0.5rem;
+    margin: 0;
+    padding: 1rem;
+
+    .actor {
+        font-size: 1rem;
+        font-weight: bold;
+    }
+
+    .timestamp {
+        font-size: 0.8rem;
+        color: #666;
+    }
+
+    .content {
+        margin: 1rem;
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    menu {
+        display: flex;
+        padding: 0;
+        gap: 1rem;
+
+        li {
+            list-style: none;
+        }
+
+        a {
+            text-decoration: none;
+            color: #000;
+        }
+    }
+}
+</style>

package/demo/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>Graffiti Vue.JS Client Demo</title>
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

package/demo/main.ts

@@ -0,0 +1,22 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import { GraffitiPlugin } from "../src/plugin";
+import { GraffitiPouchDB } from "@graffiti-garden/implementation-pouchdb";
+
+// Horrible, I know
+// this is just for testing
+const one = "Sandbank8803";
+const two = "hb#&6CQBx!ua%q";
+const three = "tracker.graffiti.garden";
+const four = "graffiti";
+
+createApp(App)
+  .use(GraffitiPlugin, {
+    useGraffiti: () =>
+      new GraffitiPouchDB({
+        pouchDBOptions: {
+          name: `https://${encodeURIComponent(one)}:${encodeURIComponent(two)}@${three}/${four}`,
+        },
+      }),
+  })
+  .mount("#app");

package/dist/plugin.js

@@ -0,0 +1,124 @@
+import { inject as b, ref as y, watch as j, onScopeDispose as L, toValue as h, defineComponent as R, toRef as G, renderSlot as $, unref as w } from "vue";
+const M = Symbol(), P = Symbol();
+function x() {
+  const o = b(M);
+  if (!o)
+    throw new Error("No Graffiti instance provided");
+  return o;
+}
+function K() {
+  const o = b(P);
+  if (!o)
+    throw new Error("No Graffiti session provided");
+  return o;
+}
+function N(o, f, t) {
+  const s = x(), n = K(), r = y([]), c = /* @__PURE__ */ new Map();
+  function d() {
+    r.value = Array.from(c.values()).reduce((e, u) => {
+      const { tombstone: l, value: _ } = u;
+      return l || e.push({ ...u, tombstone: l, value: _ }), e;
+    }, []);
+  }
+  function E(e) {
+    const u = s.objectToUri(e), l = c.get(u);
+    l && (l.lastModified > e.lastModified || l.lastModified === e.lastModified && !l.tombstone) || c.set(u, e);
+  }
+  const v = () => h(o), m = () => h(f), p = () => h(t) ?? (n == null ? void 0 : n.value);
+  let i;
+  async function D() {
+    i == null || i.return(), i = s.synchronize(
+      v(),
+      m(),
+      p()
+    );
+    for await (const e of i) {
+      if (e.error) {
+        console.error(e.error);
+        continue;
+      }
+      E(e.value), d();
+    }
+  }
+  const g = y(!1);
+  let a;
+  async function S() {
+    a == null || a.return(), g.value = !0;
+    try {
+      a = s.discover(
+        v(),
+        m(),
+        p()
+      );
+    } catch (e) {
+      console.error(e), d(), g.value = !1;
+      return;
+    }
+    for await (const e of a) {
+      if (e.error) {
+        console.error(e.error);
+        continue;
+      }
+      E(e.value), d();
+    }
+    g.value = !1;
+  }
+  return j(
+    [v, m, p],
+    () => {
+      c.clear(), d(), S(), D();
+    },
+    {
+      immediate: !0
+    }
+  ), L(() => i == null ? void 0 : i.return()), {
+    results: r,
+    poll: S,
+    isPolling: g
+  };
+}
+const V = /* @__PURE__ */ R({
+  __name: "Discover",
+  props: {
+    channels: {},
+    schema: {},
+    session: {}
+  },
+  setup(o) {
+    const f = o, { results: t, poll: s, isPolling: n } = N(
+      G(f, "channels"),
+      G(f, "schema"),
+      G(f, "session")
+    );
+    return (r, c) => $(r.$slots, "default", {
+      results: w(t),
+      poll: w(s),
+      isPolling: w(n)
+    });
+  }
+}), A = {
+  install(o, f) {
+    const t = f.useGraffiti(), s = y(void 0);
+    t.sessionEvents.addEventListener("login", (n) => {
+      const r = n.detail;
+      if (r.error) {
+        console.error("Error logging in:"), console.error(r.error);
+        return;
+      } else
+        s.value = r.session;
+    }), t.sessionEvents.addEventListener("logout", (n) => {
+      const r = n.detail;
+      r.error ? (console.error("Error logging out:"), console.error(r.error)) : s.value = void 0;
+    }), o.provide(M, t), o.provide(P, s), o.component("GraffitiDiscover", V), o.config.globalProperties.$graffiti = t, o.config.globalProperties.$graffitiSession = s;
+  }
+};
+export {
+  V as GraffitiDiscover,
+  A as GraffitiPlugin,
+  M as graffitiInjectKey,
+  P as graffitiSessionInjectKey,
+  x as useGraffiti,
+  N as useGraffitiDiscover,
+  K as useGraffitiSession
+};
+//# sourceMappingURL=plugin.js.map

package/dist/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sources":["../src/injections.ts","../src/composables.ts","../src/Discover.vue","../src/plugin.ts"],"sourcesContent":["import { inject } from \"vue\";\nimport type { InjectionKey, Ref } from \"vue\";\nimport type { Graffiti, GraffitiSession } from \"@graffiti-garden/api\";\n\nexport const graffitiInjectKey = Symbol() as InjectionKey<Graffiti>;\nexport const graffitiSessionInjectKey = Symbol() as InjectionKey<\n  Ref<GraffitiSession | undefined>\n>;\n\nexport function useGraffiti() {\n  const graffiti = inject(graffitiInjectKey);\n  if (!graffiti) {\n    throw new Error(\"No Graffiti instance provided\");\n  }\n  return graffiti;\n}\n\nexport function useGraffitiSession() {\n  const session = inject(graffitiSessionInjectKey);\n  if (!session) {\n    throw new Error(\"No Graffiti session provided\");\n  }\n  return session;\n}\n","import {\n  onScopeDispose,\n  ref,\n  toValue,\n  watch,\n  type MaybeRefOrGetter,\n} from \"vue\";\nimport type {\n  GraffitiObject,\n  GraffitiSession,\n  JSONSchema4,\n} from \"@graffiti-garden/api\";\nimport { useGraffiti, useGraffitiSession } from \"./injections\";\n\n/**\n * A reactive version of the [`Graffiti.discover`](https://api.graffiti.garden/classes/Graffiti.html#discover)\n * method.\n *\n * @returns An object containing\n * - `results`: a reactive array of Graffiti objects\n * - `poll`: a method to poll for new results\n * - `isPolling`: a boolean ref indicating if the poll is currently running\n */\nexport function useGraffitiDiscover<Schema extends JSONSchema4>(\n  /**\n   * A list of channels to discover objects from.\n   * It may be a Vue ref or getter.\n   */\n  channels: MaybeRefOrGetter<string[]>,\n  /**\n   * A [JSON Schema](https://json-schema.org/) object describing the schema\n   * of the objects to discover. All other objects will be filtered out\n   * and the output will be typed as `GraffitiObject<Schema>`.\n   */\n  schema: MaybeRefOrGetter<Schema>,\n  /**\n   * A Graffiti session object. If not provided, the\n   * global plugin session will be used.\n   */\n  session?: MaybeRefOrGetter<GraffitiSession>,\n) {\n  const graffiti = useGraffiti();\n  const sessionInjected = useGraffitiSession();\n\n  const results = ref<(GraffitiObject<Schema> & { tombstone: false })[]>([]);\n  const resultsRaw = new Map<string, GraffitiObject<Schema>>();\n  function flattenResults() {\n    results.value = Array.from(resultsRaw.values()).reduce<\n      (GraffitiObject<Schema> & { tombstone: false })[]\n    >((acc, o) => {\n      const { tombstone, value } = o;\n      if (!tombstone) {\n        acc.push({ ...o, tombstone, value });\n      }\n      return acc;\n    }, []);\n  }\n\n  function onValue(value: GraffitiObject<Schema>) {\n    const url = graffiti.objectToUri(value);\n    const existing = resultsRaw.get(url);\n    if (\n      existing &&\n      (existing.lastModified > value.lastModified ||\n        (existing.lastModified === value.lastModified && !existing.tombstone))\n    ) {\n      return;\n    }\n    resultsRaw.set(url, value);\n  }\n\n  const channelsGetter = () => toValue(channels);\n  const schemaGetter = () => toValue(schema);\n  const sessionGetter = () => toValue(session) ?? sessionInjected?.value;\n\n  let localIterator:\n    | ReturnType<typeof graffiti.synchronize<Schema>>\n    | undefined = undefined;\n  async function pollLocalModifications() {\n    localIterator?.return();\n    localIterator = graffiti.synchronize(\n      channelsGetter(),\n      schemaGetter(),\n      sessionGetter(),\n    );\n    for await (const value of localIterator) {\n      if (value.error) {\n        console.error(value.error);\n        continue;\n      }\n      onValue(value.value);\n      flattenResults();\n    }\n  }\n\n  const isPolling = ref(false);\n  let iterator: ReturnType<typeof graffiti.discover<Schema>> | undefined =\n    undefined;\n  async function poll() {\n    iterator?.return();\n    isPolling.value = true;\n\n    try {\n      iterator = graffiti.discover(\n        channelsGetter(),\n        schemaGetter(),\n        sessionGetter(),\n      );\n    } catch (e) {\n      console.error(e);\n      flattenResults();\n      isPolling.value = false;\n      return;\n    }\n\n    for await (const result of iterator) {\n      if (result.error) {\n        console.error(result.error);\n        continue;\n      }\n      onValue(result.value);\n      flattenResults();\n    }\n\n    isPolling.value = false;\n  }\n\n  watch(\n    [channelsGetter, schemaGetter, sessionGetter],\n    () => {\n      resultsRaw.clear();\n      flattenResults();\n      poll();\n      pollLocalModifications();\n    },\n\n    {\n      immediate: true,\n    },\n  );\n  onScopeDispose(() => localIterator?.return());\n\n  return {\n    results,\n    poll,\n    isPolling,\n  };\n}\n","<script setup lang=\"ts\" generic=\"Schema extends JSONSchema4\">\nimport { toRef } from \"vue\";\nimport type { GraffitiSession, JSONSchema4 } from \"@graffiti-garden/api\";\nimport { useGraffitiDiscover } from \"./composables\";\n\nconst props = defineProps<{\n    channels: string[];\n    schema: Schema;\n    session?: GraffitiSession;\n}>();\n\nconst { results, poll, isPolling } = useGraffitiDiscover<Schema>(\n    toRef(props, \"channels\"),\n    toRef(props, \"schema\"),\n    toRef(props, \"session\"),\n);\n</script>\n\n<template>\n    <slot :results=\"results\" :poll=\"poll\" :isPolling=\"isPolling\"></slot>\n</template>\n","import type { App, Plugin, Ref } from \"vue\";\nimport { ref } from \"vue\";\nimport Discover from \"./Discover.vue\";\nimport type {\n  GraffitiFactory,\n  Graffiti,\n  GraffitiSession,\n  GraffitiLoginEvent,\n  GraffitiLogoutEvent,\n} from \"@graffiti-garden/api\";\nimport { graffitiInjectKey, graffitiSessionInjectKey } from \"./injections\";\n\ndeclare module \"vue\" {\n  export interface ComponentCustomProperties {\n    $graffiti: Graffiti;\n    $graffitiSession: Ref<GraffitiSession | undefined>;\n  }\n\n  export interface GlobalComponents {\n    GraffitiDiscover: typeof Discover;\n  }\n}\n\nexport interface GraffitiPluginOptions {\n  useGraffiti: GraffitiFactory;\n}\n\nexport const GraffitiPlugin: Plugin<GraffitiPluginOptions> = {\n  install(app: App, options: GraffitiPluginOptions) {\n    const graffiti = options.useGraffiti();\n    const graffitiSession = ref<GraffitiSession | undefined>(undefined);\n    graffiti.sessionEvents.addEventListener(\"login\", (evt) => {\n      const detail = (evt as GraffitiLoginEvent).detail;\n      if (detail.error) {\n        console.error(\"Error logging in:\");\n        console.error(detail.error);\n        return;\n      } else {\n        graffitiSession.value = detail.session;\n      }\n    });\n    graffiti.sessionEvents.addEventListener(\"logout\", (evt) => {\n      const detail = (evt as GraffitiLogoutEvent).detail;\n      if (detail.error) {\n        console.error(\"Error logging out:\");\n        console.error(detail.error);\n      } else {\n        graffitiSession.value = undefined;\n      }\n    });\n\n    app.provide(graffitiInjectKey, graffiti);\n    app.provide(graffitiSessionInjectKey, graffitiSession);\n\n    app.component(\"GraffitiDiscover\", Discover);\n    app.config.globalProperties.$graffiti = graffiti;\n    app.config.globalProperties.$graffitiSession = graffitiSession;\n  },\n};\n\nexport * from \"./composables\";\nexport * from \"./injections\";\nexport { Discover as GraffitiDiscover };\n"],"names":["graffitiInjectKey","graffitiSessionInjectKey","useGraffiti","graffiti","inject","useGraffitiSession","session","useGraffitiDiscover","channels","schema","sessionInjected","results","ref","resultsRaw","flattenResults","acc","o","tombstone","value","onValue","url","existing","channelsGetter","toValue","schemaGetter","sessionGetter","localIterator","pollLocalModifications","isPolling","iterator","poll","result","watch","onScopeDispose","props","__props","toRef","GraffitiPlugin","app","options","graffitiSession","evt","detail","Discover"],"mappings":"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"}