jazz-svelte 0.0.1

package/LICENSE.txt

@@ -0,0 +1,19 @@
+Copyright 2024, Garden Computing, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,21 @@
+# Jazz Svelte
+
+> Modern Svelte bindings for Jazz 🎵
+
+## ⚠️ Experimental Status
+
+<div align="center">
+
+```
+🐉 Here be dragons! 🐉
+```
+
+</div>
+
+### 🚧 Development Notice
+
+Greetings, brave explorer! 🌟 You've caught us in our early stages - this package is currently experimental and under active development.
+
+---
+
+> **Note**: You've been warned, but we're glad you're here! Let's build something amazing together. 🚀

package/dist/JazzProvider.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" generics="Acc extends Account">
+import { createJazzBrowserContext } from "jazz-browser";
+import type { AccountClass, AuthMethod } from "jazz-tools";
+import { Account } from "jazz-tools";
+import { type Snippet, setContext, untrack } from "svelte";
+import { JAZZ_CTX, type JazzContext } from "./jazz.svelte";
+
+type Props = {
+  children: Snippet;
+  auth: AuthMethod | "guest";
+  peer: `wss://${string}` | `ws://${string}`;
+  storage?: "indexedDB" | "singleTabOPFS";
+  schema?: AccountClass<Acc>;
+};
+
+let {
+  children,
+  auth,
+  peer,
+  storage,
+  schema = Account as unknown as AccountClass<Acc>,
+}: Props = $props();
+
+const ctx = $state<JazzContext<Acc>>({ current: undefined });
+setContext<JazzContext<Acc>>(JAZZ_CTX, ctx);
+let sessionCount = $state(0);
+
+$effect(() => {
+  schema;
+  auth;
+  peer;
+  storage;
+  sessionCount;
+  return untrack(() => {
+    if (!auth || !peer) return;
+
+    const promiseWithDoneCallback = createJazzBrowserContext<Acc>(
+      auth === "guest"
+        ? {
+            peer,
+            storage,
+          }
+        : {
+            AccountSchema: schema,
+            auth,
+            peer,
+            storage,
+          },
+    ).then((context) => {
+      ctx.current = {
+        ...context,
+        logOut: () => {
+          context.logOut();
+          ctx.current = undefined;
+          sessionCount = sessionCount + 1;
+        },
+      };
+      return context.done;
+    });
+    return () => {
+      void promiseWithDoneCallback.then((done) => done());
+    };
+  });
+});
+</script>
+
+{#if ctx.current}
+	{@render children?.()}
+{/if}

package/dist/JazzProvider.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { AccountClass, AuthMethod } from "jazz-tools";
+import { Account } from "jazz-tools";
+import { type Snippet } from "svelte";
+declare class __sveltets_Render<Acc extends Account> {
+    props(): {
+        children: Snippet;
+        auth: AuthMethod | "guest";
+        peer: `wss://${string}` | `ws://${string}`;
+        storage?: "indexedDB" | "singleTabOPFS";
+        schema?: AccountClass<Acc> | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Acc extends Account>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Acc>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Acc>['props']>, ReturnType<__sveltets_Render<Acc>['events']>, ReturnType<__sveltets_Render<Acc>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Acc>['bindings']>;
+    } & ReturnType<__sveltets_Render<Acc>['exports']>;
+    <Acc extends Account>(internal: unknown, props: ReturnType<__sveltets_Render<Acc>['props']> & {}): ReturnType<__sveltets_Render<Acc>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const JazzProvider: $$IsomorphicComponent;
+type JazzProvider<Acc extends Account> = InstanceType<typeof JazzProvider<Acc>>;
+export default JazzProvider;

package/dist/auth/PasskeyAuth.svelte.d.ts

@@ -0,0 +1,24 @@
+import { BrowserPasskeyAuth } from "jazz-browser";
+export type PasskeyAuthState = ({
+    state: "uninitialized";
+} | {
+    state: "loading";
+} | {
+    state: "ready";
+    logIn: () => void;
+    signUp: (username: string) => void;
+} | {
+    state: "signedIn";
+    logOut: () => void;
+}) & {
+    errors: string[];
+};
+export type PasskeyAuth = {
+    current?: BrowserPasskeyAuth;
+    state: PasskeyAuthState;
+};
+/** @category Auth Providers */
+export declare function usePasskeyAuth({ appName, appHostname, }: {
+    appName: string;
+    appHostname?: string;
+}): PasskeyAuth;

package/dist/auth/PasskeyAuth.svelte.js

@@ -0,0 +1,55 @@
+import { BrowserPasskeyAuth } from "jazz-browser";
+import { onMount } from "svelte";
+/** @category Auth Providers */
+export function usePasskeyAuth({ appName, appHostname, }) {
+    let instance = $state();
+    let state = $state({
+        state: "loading",
+        errors: [],
+    });
+    // Function to create a new auth instance
+    function createAuthInstance() {
+        instance = new BrowserPasskeyAuth({
+            onReady(next) {
+                state = {
+                    state: "ready",
+                    logIn: next.logIn,
+                    signUp: next.signUp,
+                    errors: [],
+                };
+            },
+            onSignedIn(next) {
+                state = {
+                    state: "signedIn",
+                    logOut: () => {
+                        // First set state to loading
+                        state = { state: "loading", errors: [] };
+                        // Then trigger logout
+                        next.logOut();
+                        // Create new instance to trigger onReady
+                        createAuthInstance();
+                    },
+                    errors: [],
+                };
+            },
+            onError(error) {
+                state = {
+                    ...state,
+                    errors: [...state.errors, error.toString()],
+                };
+            },
+        }, appName, appHostname);
+    }
+    // Initialize the auth instance on mount
+    onMount(() => {
+        createAuthInstance();
+    });
+    return {
+        get current() {
+            return instance;
+        },
+        get state() {
+            return state;
+        },
+    };
+}

package/dist/auth/PasskeyAuthBasicUI.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { type PasskeyAuthState } from 'jazz-svelte';
+
+  let { state: authState }: { state: PasskeyAuthState } = $props();
+
+  let name = $state('');
+
+  function signUp(e: Event) {
+    e.preventDefault();
+    if (!name.trim() || authState.state !== 'ready') return;
+    authState.signUp(name);
+  }
+
+  function logIn(e: Event) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (authState.state !== 'ready') return;
+    authState.logIn();
+  }
+</script>
+
+<div style="max-width: 18rem; display: flex; flex-direction: column; gap: 2rem;">
+  {#if authState.state === 'loading'}
+    <div>Loading...</div>
+  {:else if authState.state === 'ready'}
+    {#if authState.errors?.length > 0}
+      <div style="color: red;">
+        {#each authState.errors as error}
+          <div>{error}</div>
+        {/each}
+      </div>
+    {/if}
+    <form onsubmit={signUp}>
+      <input type="text" placeholder="Display name" bind:value={name} autocomplete="name" />
+      <input type="submit" value="Sign up" />
+    </form>
+    <button onclick={logIn}> Log in with existing account </button>
+  {/if}
+</div>
+
+<style>
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  button,
+  input[type='submit'] {
+    background: #000;
+    color: #fff;
+	padding: 6px 12px;
+    border: none;
+    border-radius: 6px;
+	min-height: 38px;
+    cursor: pointer;
+  }
+
+  input[type='text'] {
+    border: 2px solid #000;
+	padding: 6px 12px;
+    border-radius: 6px;
+	min-height: 24px;
+  }
+</style>

package/dist/auth/PasskeyAuthBasicUI.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    state: PasskeyAuthState;
+};
+import { type PasskeyAuthState } from 'jazz-svelte';
+declare const PasskeyAuthBasicUi: import("svelte").Component<$$ComponentProps, {}, "">;
+type PasskeyAuthBasicUi = ReturnType<typeof PasskeyAuthBasicUi>;
+export default PasskeyAuthBasicUi;

package/dist/auth/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./PasskeyAuth.svelte";
+export { default as PasskeyAuthBasicUI } from "./PasskeyAuthBasicUI.svelte";

package/dist/auth/index.js

@@ -0,0 +1,2 @@
+export * from "./PasskeyAuth.svelte";
+export { default as PasskeyAuthBasicUI } from "./PasskeyAuthBasicUI.svelte";

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import JazzProvider from "./JazzProvider.svelte";
+export { createJazzApp } from "./jazz.svelte.js";
+export { JazzProvider };
+export { createInviteLink, parseInviteLink } from "jazz-browser";
+export * from "./auth/index.js";

package/dist/index.js

@@ -0,0 +1,5 @@
+import JazzProvider from "./JazzProvider.svelte";
+export { createJazzApp } from "./jazz.svelte.js";
+export { JazzProvider };
+export { createInviteLink, parseInviteLink } from "jazz-browser";
+export * from "./auth/index.js";

package/dist/jazz.svelte.d.ts

@@ -0,0 +1,50 @@
+import { type BrowserContext, type BrowserGuestContext } from "jazz-browser";
+import type { AnonymousJazzAgent, CoValue, CoValueClass, DeeplyLoaded, DepthsIn, ID } from "jazz-tools";
+import { Account } from "jazz-tools";
+/**
+ * The key for the Jazz context.
+ */
+export declare const JAZZ_CTX: {};
+/**
+ * The Jazz context.
+ */
+export type JazzContext<Acc extends Account> = {
+    current?: BrowserContext<Acc> | BrowserGuestContext;
+};
+/**
+ * Get the current Jazz context.
+ * @returns The current Jazz context.
+ */
+export declare function getJazzContext<Acc extends Account>(): JazzContext<Acc>;
+/**
+ * Create a Jazz app.
+ * @returns The Jazz app.
+ */
+export declare function createJazzApp<Acc extends Account>(): {
+    useAccount: {
+        (): {
+            me: Acc | undefined;
+            logOut: () => void;
+        };
+        <D extends DepthsIn<Acc>>(depth: D): {
+            me: DeeplyLoaded<Acc, D> | undefined;
+            logOut: () => void;
+        };
+    };
+    useAccountOrGuest: {
+        (): {
+            me: Acc | AnonymousJazzAgent;
+        };
+        <D extends DepthsIn<Acc>>(depth: D): {
+            me: DeeplyLoaded<Acc, D> | undefined | AnonymousJazzAgent;
+        };
+    };
+    useCoState: <V extends CoValue, D extends DepthsIn<V> = []>(Schema: CoValueClass<V>, id: ID<V> | undefined, depth?: D) => {
+        current?: DeeplyLoaded<V, D>;
+    };
+    useAcceptInvite: <V extends CoValue>({ invitedObjectSchema, onAccept, forValueHint, }: {
+        invitedObjectSchema: CoValueClass<V>;
+        onAccept: (projectID: ID<V>) => void;
+        forValueHint?: string;
+    }) => void;
+};

package/dist/jazz.svelte.js

@@ -0,0 +1,154 @@
+import { consumeInviteLinkFromWindowLocation, } from "jazz-browser";
+import { Account, createCoValueObservable } from "jazz-tools";
+import { getContext, untrack } from "svelte";
+/**
+ * The key for the Jazz context.
+ */
+export const JAZZ_CTX = {};
+/**
+ * Get the current Jazz context.
+ * @returns The current Jazz context.
+ */
+export function getJazzContext() {
+    return getContext(JAZZ_CTX);
+}
+/**
+ * Create a Jazz app.
+ * @returns The Jazz app.
+ */
+export function createJazzApp() {
+    /**
+     * Use the current account with a optional depth.
+     * @param depth - The depth.
+     * @returns The current account.
+     */
+    function useAccount(depth) {
+        const ctx = getJazzContext();
+        if (!ctx?.current) {
+            throw new Error("useAccount must be used within a JazzProvider");
+        }
+        if (!("me" in ctx.current)) {
+            throw new Error("useAccount can't be used in a JazzProvider with auth === 'guest' - consider using useAccountOrGuest()");
+        }
+        const me = useCoState(ctx.current.me.constructor, ctx.current.me.id, depth);
+        return {
+            get me() {
+                if (!ctx.current || !("me" in ctx.current))
+                    return;
+                return depth === undefined ? me.current || ctx.current.me : me.current;
+            },
+            logOut() {
+                return ctx.current?.logOut();
+            },
+        };
+    }
+    /**
+     * Use the current account or guest with a optional depth.
+     * @param depth - The depth.
+     * @returns The current account or guest.
+     */
+    function useAccountOrGuest(depth) {
+        const ctx = getJazzContext();
+        if (!ctx?.current) {
+            throw new Error("useAccountOrGuest must be used within a JazzProvider");
+        }
+        const contextMe = "me" in ctx.current ? ctx.current.me : undefined;
+        const me = useCoState(contextMe?.constructor, contextMe?.id, depth);
+        // If the context has a me, return the account.
+        if ("me" in ctx.current) {
+            return {
+                get me() {
+                    return depth === undefined
+                        ? me.current || ctx.current?.me
+                        : me.current;
+                },
+            };
+        }
+        // If the context has no me, return the guest.
+        else {
+            return {
+                get me() {
+                    return ctx.current?.guest;
+                },
+            };
+        }
+    }
+    /**
+     * Use a CoValue with a optional depth.
+     * @param Schema - The CoValue schema.
+     * @param id - The CoValue id.
+     * @param depth - The depth.
+     * @returns The CoValue.
+     */
+    function useCoState(Schema, id, depth = []) {
+        const ctx = getJazzContext();
+        // Create state and a stable observable
+        let state = $state.raw(undefined);
+        const observable = $state.raw(createCoValueObservable());
+        // Effect to handle subscription
+        $effect(() => {
+            // Reset state when dependencies change
+            state = undefined;
+            // Get latest values
+            const currentCtx = ctx.current;
+            // Return early if no context or id, effectively cleaning up any previous subscription
+            if (!currentCtx || !id)
+                return;
+            // Setup subscription with current values
+            return observable.subscribe(Schema, id, "me" in currentCtx ? currentCtx.me : currentCtx.guest, depth, () => {
+                // Get current value from our stable observable
+                state = observable.getCurrentValue();
+            });
+        });
+        return {
+            get current() {
+                return state;
+            },
+        };
+    }
+    /**
+     * Use the accept invite hook.
+     * @param invitedObjectSchema - The invited object schema.
+     * @param onAccept - Function to call when the invite is accepted.
+     * @param forValueHint - Hint for the value.
+     * @returns The accept invite hook.
+     */
+    function useAcceptInvite({ invitedObjectSchema, onAccept, forValueHint, }) {
+        const ctx = getJazzContext();
+        const _onAccept = onAccept;
+        if (!ctx.current) {
+            throw new Error("useAcceptInvite must be used within a JazzProvider");
+        }
+        if (!("me" in ctx.current)) {
+            throw new Error("useAcceptInvite can't be used in a JazzProvider with auth === 'guest'.");
+        }
+        // Subscribe to the onAccept function.
+        $effect(() => {
+            _onAccept;
+            // Subscribe to the onAccept function.
+            untrack(() => {
+                // If there is no context, return.
+                if (!ctx.current)
+                    return;
+                // Consume the invite link from the window location.
+                const result = consumeInviteLinkFromWindowLocation({
+                    as: ctx.current.me,
+                    invitedObjectSchema,
+                    forValueHint,
+                });
+                // If the result is valid, call the onAccept function.
+                result
+                    .then((result) => result && _onAccept(result?.valueID))
+                    .catch((e) => {
+                    console.error("Failed to accept invite", e);
+                });
+            });
+        });
+    }
+    return {
+        useAccount,
+        useAccountOrGuest,
+        useCoState,
+        useAcceptInvite,
+    };
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "jazz-svelte",
+  "version": "0.0.1",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@types/eslint": "^9.6.0",
+    "eslint": "^9.7.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.36.0",
+    "globals": "^15.0.0",
+    "prettier": "^3.3.2",
+    "prettier-plugin-svelte": "^3.2.6",
+    "publint": "^0.2.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.0.11"
+  },
+  "dependencies": {
+    "jazz-browser": "0.8.34",
+    "jazz-tools": "0.8.34"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint ."
+  }
+}