Release

changeset for the cursor fix

.changeset/config.json

@@ -9,6 +9,8 @@
             "jazz-tools",
             "jazz-browser",
             "jazz-browser-media-images",
+            "jazz-browser-auth-clerk",
+            "jazz-react-auth-clerk",
             "jazz-react",
             "jazz-nodejs",
             "jazz-run",
@@ -20,5 +22,8 @@
     "access": "public",
     "baseBranch": "main",
     "updateInternalDependencies": "patch",
-    "ignore": []
+    "ignore": [],
+    "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+        "onlyUpdatePeerDependentsWhenOutOfRange": true
+    }
 }

.github/workflows/build-and-deploy.yaml

@@ -1,89 +0,0 @@
-name: Build and Deploy
-
-on:
-  push:
-    branches: [ "main" ]
-
-jobs:
-  build-examples:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        example: ["chat", "pets", "todo", "inspector"]
-        # example: ["twit", "chat", "counter-js-auth0", "pets", "twit", "file-drop", "inspector"]
-
-    steps:
-    - uses: actions/checkout@v3
-      with:
-        submodules: true
-
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
-
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-        cache: 'pnpm'
-
-    - name: Set up Docker Buildx
-      uses: docker/setup-buildx-action@v2
-
-    - name: Login to GitHub Container Registry
-      uses: docker/login-action@v2
-      with:
-        registry: ghcr.io
-        username: gardencmp
-        password: ${{ secrets.GITHUB_TOKEN }}
-
-    - name: Pnpm Build
-      run: |
-        pnpm install
-        pnpm turbo build;
-      working-directory: ./examples/${{ matrix.example }}
-
-    - name: Docker Build & Push
-      uses: docker/build-push-action@v4
-      with:
-        context: ./examples/${{ matrix.example }}
-        push: true
-        tags: ghcr.io/gardencmp/${{github.event.repository.name}}-example-${{ matrix.example }}:${{github.head_ref || github.ref_name}}-${{github.sha}}-${{github.run_number}}-${{github.run_attempt}}
-        cache-from: type=gha
-        cache-to: type=gha,mode=max
-
-  deploy-examples:
-    runs-on: ubuntu-latest
-    needs: build-examples
-    strategy:
-      matrix:
-        example: ["chat", "pets", "todo", "inspector"]
-        # example: ["twit", "chat", "counter-js-auth0", "pets", "twit", "file-drop", "inspector"]
-
-    steps:
-    - uses: actions/checkout@v3
-      with:
-        submodules: true
-    - uses: gacts/install-nomad@v1
-    - name: Tailscale
-      uses: tailscale/github-action@v1
-      with:
-        authkey: ${{ secrets.TAILSCALE_AUTHKEY }}
-
-    - name: Deploy on Nomad
-      run: |
-        if [ "${{github.ref_name}}" == "main" ]; then
-          export BRANCH_SUFFIX="";
-          export BRANCH_SUBDOMAIN="";
-        else
-          export BRANCH_SUFFIX=-${{github.head_ref || github.ref_name}};
-          export BRANCH_SUBDOMAIN=${{github.head_ref || github.ref_name}}.;
-        fi
-
-        export DOCKER_USER=gardencmp;
-        export DOCKER_PASSWORD=${{ secrets.DOCKER_PULL_PAT }};
-        export DOCKER_TAG=ghcr.io/gardencmp/${{github.event.repository.name}}-example-${{ matrix.example }}:${{github.head_ref || github.ref_name}}-${{github.sha}}-${{github.run_number}}-${{github.run_attempt}};
-
-        envsubst '${DOCKER_USER} ${DOCKER_PASSWORD} ${DOCKER_TAG} ${BRANCH_SUFFIX} ${BRANCH_SUBDOMAIN}' < job-template.nomad > job-instance.nomad;
-        cat job-instance.nomad;
-        NOMAD_ADDR=${{ secrets.NOMAD_ADDR }} nomad job run job-instance.nomad;
-      working-directory: ./examples/${{ matrix.example }}

.github/workflows/build-examples.yaml

@@ -0,0 +1,58 @@
+name: Build Examples
+
+on:
+  push:
+    branches: [ "main" ]
+
+jobs:
+  build-examples:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        example: [
+          "chat",
+          "chat-clerk",
+          "inspector",
+          "music-player",
+          "password-manager",
+          "pets",
+          "todo",
+        ]
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        submodules: true
+
+    - name: Enable corepack
+      run: corepack enable
+
+    - name: Install Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version-file: '.node-version'
+        cache: 'pnpm'
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - uses: actions/cache@v3
+      name: Setup pnpm cache
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+
+    - name: Pnpm Build
+      run: |
+        pnpm install
+        pnpm turbo build;
+      working-directory: ./examples/${{ matrix.example }}

.github/workflows/monorepo-linting.yml

@@ -0,0 +1,21 @@
+name: Monorepo linting
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  monorepo-linting:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.node-version'
+
+      - name: Run sherif
+        run: npx sherif@1.0.0

.github/workflows/playwright.yml

@@ -0,0 +1,64 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        project: ["e2e/BinaryCoStream", "e2e/CoValues", "examples/pets"]
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: true
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.node-version'
+          cache: 'pnpm'
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Pnpm Build
+        run: pnpm turbo build;
+        working-directory: ./${{ matrix.project }}
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+        working-directory: ./${{ matrix.project }}
+
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
+        working-directory: ./${{ matrix.project }}
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: ${{ hashFiles(format('{0}/package.json', matrix.project)) }}-playwright-report
+          path: ./${{ matrix.project }}/playwright-report/
+          retention-days: 30

.github/workflows/unit-test.yml

@@ -0,0 +1,47 @@
+name: Unit Tests
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+  push:
+    branches:
+      - 'main'
+
+jobs:
+  unit-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.node-version'
+          cache: 'pnpm'
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Pnpm Build
+        run: pnpm turbo build;
+
+      - name: Unit Tests
+        run: pnpm test

.gitignore

@@ -3,4 +3,5 @@ yarn-error.log
 lerna-debug.log
 docsTmp
 .DS_Store
-.turbo
+.turbo
+coverage

.node-version

@@ -0,0 +1 @@
+20

e2e/BinaryCoStream/.gitignore

@@ -23,5 +23,8 @@ dist-ssr
 *.sln
 *.sw?
 
-.env
+sync-db/
-TwitAllTwitsCreatorCredentials.json
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/BinaryCoStream/CHANGELOG.md

@@ -0,0 +1,17 @@
+# @jazz-e2e/binarycostream
+
+## 0.0.83
+
+### Patch Changes
+
+- Updated dependencies [a075f90]
+  - jazz-tools@0.8.2
+  - jazz-react@0.8.2
+
+## 0.0.82
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.8.1
+  - jazz-react@0.8.1

e2e/BinaryCoStream/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/jazz-logo.png" />
+    <link rel="stylesheet" href="/src/index.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jazz BinaryCoStream Tests</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/app.tsx"></script>
+  </body>
+</html>

e2e/BinaryCoStream/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@jazz-e2e/binarycostream",
+  "private": true,
+  "version": "0.0.83",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui"
+  },
+  "lint-staged": {
+    "*.{js,jsx,mdx,json}": "prettier --write"
+  },
+  "dependencies": {
+    "cojson": "workspace:0.8.0",
+    "hash-slash": "workspace:0.2.0",
+    "is-ci": "^3.0.1",
+    "jazz-react": "workspace:0.8.2",
+    "jazz-tools": "workspace:0.8.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.46.1",
+    "@types/node": "^22.5.1",
+    "@types/react": "^18.2.19",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
+  }
+}

e2e/BinaryCoStream/playwright.config.ts

@@ -0,0 +1,49 @@
+import { defineConfig, devices } from "@playwright/test";
+import isCI from "is-ci";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: "./tests",
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: isCI,
+    /* Retry on CI only */
+    retries: isCI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: isCI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: "html",
+
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        baseURL: isCI ? "http://localhost:4173/" : "http://localhost:5173",
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: "on-first-retry",
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: "chromium",
+            use: { ...devices["Desktop Chrome"] },
+        },
+    ],
+
+    /* Run your local dev server before starting the tests */
+    webServer: isCI ? {
+        command: "pnpm preview",
+        url: "http://localhost:4173/",
+    } : undefined,
+});

e2e/BinaryCoStream/src/DownloaderPeer.tsx

@@ -0,0 +1,42 @@
+import { Account, BinaryCoStream, ID } from "jazz-tools";
+import { useEffect } from "react";
+import { useAccount, useCoState } from "./jazz";
+import { UploadedFile } from "./schema";
+import { waitForCoValue } from "./lib/waitForCoValue";
+
+async function getUploadedFile(
+  me: Account,
+  uploadedFileId: ID<UploadedFile>) {
+  const uploadedFile = await waitForCoValue(UploadedFile, uploadedFileId, me, Boolean, {})
+
+  uploadedFile.coMapDownloaded = true;
+
+  await BinaryCoStream.loadAsBlob(uploadedFile._refs.file.id, me);
+
+  return uploadedFile;
+}
+
+export function DownloaderPeer(props: { testCoMapId: ID<UploadedFile> }) {
+  const account = useAccount();
+  const testCoMap = useCoState(UploadedFile, props.testCoMapId, {});
+
+  useEffect(() => {
+    getUploadedFile(account.me, props.testCoMapId).then(value => {
+      value.syncCompleted = true;
+    });
+  }, []);
+
+  return (
+    <>
+      <h1>Downloader Peer</h1>
+      <div>Fetching: {props.testCoMapId}</div>
+      <div data-testid="result">
+        Covalue: {Boolean(testCoMap?.id) ? "Downloaded" : "Not Downloaded"}
+      </div>
+      <div data-testid="result">
+        File:{" "}
+        {Boolean(testCoMap?.syncCompleted) ? "Downloaded" : "Not Downloaded"}
+      </div>
+    </>
+  );
+}

e2e/BinaryCoStream/src/UploaderPeer.tsx

@@ -0,0 +1,86 @@
+import { ID } from "jazz-tools";
+import { useEffect, useState } from "react";
+import { useAccount, useCoState } from "./jazz";
+import { createCredentiallessIframe } from "./lib/createCredentiallessIframe";
+import { generateTestFile } from "./lib/generateTestFile";
+import { getDownloaderPeerUrl } from "./lib/getDownloaderPeerUrl";
+import { UploadedFile } from "./schema";
+import { waitForCoValue } from "./lib/waitForCoValue";
+import { getDefaultFileSize, getIsAutoUpload } from "./lib/searchParams";
+import { BytesRadioGroup } from "./lib/BytesRadioGroup";
+
+export function UploaderPeer() {
+  const account = useAccount();
+  const [uploadedFileId, setUploadedFileId] = useState<
+    ID<UploadedFile> | undefined
+  >(undefined);
+  const [syncDuration, setSyncDuration] = useState<number | null>(null);
+  const [bytes, setBytes] = useState(getDefaultFileSize);
+
+  const testFile = useCoState(UploadedFile, uploadedFileId, {});
+
+  async function uploadTestFile() {
+    if (!account) return;
+
+    // Mark the sync start
+    performance.mark("sync-start");
+
+    const file = await generateTestFile(account.me, bytes);
+
+    // Create a credential-less iframe to spawn the downloader peer
+    const iframe = createCredentiallessIframe(getDownloaderPeerUrl(file));
+    document.body.appendChild(iframe);
+
+    setSyncDuration(null);
+    setUploadedFileId(file.id);
+
+    // The downloader peer will set the syncCompleted to true when the download is complete.
+    // We use this to measure the sync duration.
+    await waitForCoValue(
+      UploadedFile,
+      file.id,
+      account.me,
+      (value) => value.syncCompleted,
+      {}
+    );
+
+    iframe.remove();
+
+    // Calculate the sync duration
+    performance.mark("sync-end");
+    const measure = performance.measure("sync", "sync-start", "sync-end");
+    setSyncDuration(measure.duration);
+  }
+
+  useEffect(() => {
+    if (getIsAutoUpload()) {
+      uploadTestFile();
+    }
+  }, []);
+
+  return (
+    <>
+      <BytesRadioGroup selectedValue={bytes} onChange={setBytes} />
+
+      <button onClick={uploadTestFile}>Upload Test File</button>
+      {uploadedFileId && <div>{uploadedFileId}</div>}
+      {syncDuration && (
+        <div data-testid="sync-duration">
+          Sync Duration: {syncDuration.toFixed(2)}ms
+        </div>
+      )}
+      {uploadedFileId && (
+        <div data-testid="result">
+          Sync Completed: {String(Boolean(syncDuration))}
+        </div>
+      )}
+      {testFile?.coMapDownloaded && (
+        <div data-testid="co-map-downloaded">
+          CoMap synced!
+        </div>
+      )}
+    </>
+  );
+}
+
+

e2e/BinaryCoStream/src/app.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { DownloaderPeer } from "./DownloaderPeer";
+import { UploaderPeer } from "./UploaderPeer";
+import { getValueId } from "./lib/searchParams";
+import { AuthAndJazz } from "./jazz";
+
+function Main() {
+  const valueId = getValueId();
+
+  if (valueId) {
+    return <DownloaderPeer testCoMapId={valueId} />;
+  }
+
+  return <UploaderPeer />;
+}
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+      <AuthAndJazz>
+          <Main />
+      </AuthAndJazz>
+  </React.StrictMode>,
+);

e2e/BinaryCoStream/src/jazz.tsx

@@ -0,0 +1,28 @@
+import { createJazzReactApp } from "jazz-react";
+import { getValueId } from "./lib/searchParams";
+import { ephemeralCredentialsAuth } from "jazz-tools";
+import { useState } from "react";
+
+const key = getValueId()
+  ? `downloader-e2e@jazz.tools`
+  : `uploader-e2e@jazz.tools`;
+
+const localSync = new URLSearchParams(location.search).has("localSync");
+
+const Jazz = createJazzReactApp();
+
+export const { useAccount, useCoState } = Jazz;
+
+export function AuthAndJazz({ children }: { children: React.ReactNode }) {
+  const [ephemeralAuth] = useState(ephemeralCredentialsAuth())
+
+  return (
+    <Jazz.Provider auth={ephemeralAuth} peer={
+      localSync
+        ? `ws://localhost:4200?key=${key}`
+        : `wss://mesh.jazz.tools/?key=${key}`
+    }>
+      {children}
+    </Jazz.Provider>
+  );
+}

e2e/BinaryCoStream/src/lib/BytesRadioGroup.tsx

@@ -0,0 +1,67 @@
+export function BytesRadioGroup(props: {
+  selectedValue: number;
+  onChange: (value: number) => void;
+}) {
+  return (
+    <p>
+    <BytesRadioInput
+      label="1KB"
+      value={1e3}
+      selectedValue={props.selectedValue}
+      onChange={props.onChange} />
+    <BytesRadioInput
+      label="10KB"
+      value={1e4}
+      selectedValue={props.selectedValue}
+      onChange={props.onChange} />
+      <BytesRadioInput
+        label="100KB"
+        value={1e5}
+        selectedValue={props.selectedValue}
+        onChange={props.onChange} />
+      <BytesRadioInput
+        label="150KB"
+        value={1e5 + 5e4}
+        selectedValue={props.selectedValue}
+        onChange={props.onChange} />
+      <BytesRadioInput
+        label="200KB"
+        value={2e6}
+        selectedValue={props.selectedValue}
+        onChange={props.onChange} />
+      <BytesRadioInput
+        label="500KB"
+        value={5e6}
+        selectedValue={props.selectedValue}
+        onChange={props.onChange} />
+      <BytesRadioInput
+        label="1MB"
+        value={1e6}
+        selectedValue={props.selectedValue}
+        onChange={props.onChange} />
+      <BytesRadioInput
+        label="10MB"
+        value={1e7}
+        selectedValue={props.selectedValue}
+        onChange={props.onChange} />
+    </p>
+  );
+}
+function BytesRadioInput(props: {
+  label: string;
+  value: number;
+  selectedValue: number;
+  onChange: (value: number) => void;
+}) {
+  return (
+    <label>
+      <input
+        type="radio"
+        name="bytes"
+        value={props.value}
+        checked={props.value === props.selectedValue}
+        onChange={() => props.onChange(props.value)} />
+      {props.label}
+    </label>
+  );
+}

e2e/BinaryCoStream/src/lib/createCredentiallessIframe.ts

@@ -0,0 +1,21 @@
+/**
+ * Creates a credentialess iframe that can be used to test the sync
+ * in an isolated environment. (no storage sharing)
+ *
+ * see: https://developer.mozilla.org/en-US/docs/Web/Security/IFrame_credentialless
+ */
+export function createCredentiallessIframe(url: string) {
+  const iframe = document.createElement("iframe");
+  // @ts-ignore
+  iframe.credentialless = true;
+  iframe.src = url;
+  iframe.style.width = "300px";
+  iframe.style.height = "300px";
+  iframe.style.border = "1px solid black";
+  iframe.style.position = "absolute";
+  iframe.style.top = "0";
+  iframe.style.right = "0";
+  iframe.setAttribute("data-testid", "downloader-peer");
+
+  return iframe;
+}

e2e/BinaryCoStream/src/lib/generateTestFile.ts

@@ -0,0 +1,27 @@
+import { Account, Group, BinaryCoStream } from "jazz-tools";
+import { UploadedFile } from "../schema";
+
+export async function generateTestFile(me: Account, bytes: number) {
+  const group = Group.create({ owner: me });
+  group.addMember("everyone", "writer");
+
+  const ownership = { owner: group };
+  const testFile = UploadedFile.create(
+    {
+      file: await BinaryCoStream.createFromBlob(
+        new Blob(['1'.repeat(bytes)], { type: 'image/png' }),
+        ownership
+      ),
+      syncCompleted: false,
+      coMapDownloaded: false,
+    },
+    ownership
+  );
+
+  const url = new URL(window.location.href);
+
+  url.searchParams.set("valueId", testFile.id);
+
+  return testFile;
+}
+

e2e/BinaryCoStream/src/lib/getDownloaderPeerUrl.ts

@@ -0,0 +1,8 @@
+import { UploadedFile } from "src/schema";
+
+
+export function getDownloaderPeerUrl(value: UploadedFile) {
+  const url = new URL(window.location.href);
+  url.searchParams.set("valueId", value.id);
+  return url.toString();
+}

e2e/BinaryCoStream/src/lib/searchParams.ts

@@ -0,0 +1,14 @@
+import { ID } from "jazz-tools";
+import { UploadedFile } from "../schema";
+
+export function getValueId() {
+    return new URLSearchParams(location.search).get("valueId") as ID<UploadedFile> | undefined ?? undefined;
+}
+
+export function getIsAutoUpload() {
+    return new URLSearchParams(location.search).has("auto");
+}
+
+export function getDefaultFileSize() {
+    return parseInt(new URLSearchParams(location.search).get("fileSize") ?? 1e3.toString());
+}

e2e/BinaryCoStream/src/lib/waitForCoValue.ts

@@ -0,0 +1,39 @@
+import {
+  Account,
+  CoValue,
+  CoValueClass,
+  DepthsIn,
+  ID,
+  subscribeToCoValue,
+} from "jazz-tools";
+
+export function waitForCoValue<T extends CoValue>(
+  coMap: CoValueClass<T>,
+  valueId: ID<T>,
+  account: Account,
+  predicate: (value: T) => boolean,
+  depth: DepthsIn<T>
+) {
+  return new Promise<T>((resolve) => {
+    function subscribe() {
+      const unsubscribe = subscribeToCoValue(
+        coMap,
+        valueId,
+        account,
+        depth,
+        (value) => {
+          if (predicate(value)) {
+            resolve(value);
+            unsubscribe();
+          }
+        },
+        () => {
+          unsubscribe();
+          setTimeout(subscribe, 100);
+        }
+      );
+    }
+
+    subscribe();
+  });
+}

e2e/BinaryCoStream/src/schema.tsx

@@ -0,0 +1,7 @@
+import { BinaryCoStream, co, CoMap } from "jazz-tools";
+
+export class UploadedFile extends CoMap {
+  file = co.ref(BinaryCoStream);
+  syncCompleted = co.boolean;
+  coMapDownloaded = co.boolean;
+}

e2e/BinaryCoStream/tests/sync.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from "@playwright/test";
+import { setTimeout } from "node:timers/promises";
+
+test.describe("BinaryCoStream - Sync", () => {
+  test("should sync a file between the two peers", async ({ page }) => {
+    await page.goto("/");
+
+    await page.getByRole("button", { name: "Upload Test File" }).click();
+
+    await page.getByTestId("sync-duration").waitFor();
+
+    await expect(page.getByTestId("result")).toHaveText("Sync Completed: true");
+  });
+
+  test("should handle reconnections", async ({ page, browser }) => {
+    const context = browser.contexts()[0];
+    await page.goto("/?fileSize=" + 1e6); // 1MB file
+
+    await page.getByRole("button", { name: "Upload Test File" }).click();
+
+    // Wait for the coMapDonwloaded signal to ensure that the iframe is loaded
+    await page.getByTestId("co-map-downloaded").waitFor();
+
+    await context.setOffline(true);
+
+    // Wait for the ping system to detect the offline state
+    await setTimeout(10000);
+
+    await context.setOffline(false);
+
+    // Wait for the sync to complete
+    await page.getByTestId("sync-duration").waitFor();
+
+    await expect(page.getByTestId("result")).toHaveText("Sync Completed: true");
+  });
+});

e2e/BinaryCoStream/tsconfig.json

@@ -19,11 +19,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
+    "baseUrl": "."
-    "paths": {
-      "@/*": ["./src/*"]
-    }
   },
   "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
 }

e2e/BinaryCoStream/vite.config.ts

@@ -1,15 +1,9 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
-import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
   build: {
     minify: false
   }

e2e/CoValues/.gitignore

@@ -22,3 +22,9 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+sync-db/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/CoValues/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @jazz-e2e/covalues
+
+## 0.0.82
+
+### Patch Changes
+
+- Updated dependencies [a075f90]
+  - jazz-tools@0.8.2
+  - jazz-react@0.8.2

e2e/CoValues/index.html

@@ -3,11 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/jazz-logo.png" />
+    <link rel="stylesheet" href="/src/index.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Jazz File Drop Example</title>
+    <title>Jazz CoValues tests</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/2_main.tsx"></script>
+    <script type="module" src="/src/app.tsx"></script>
   </body>
 </html>

e2e/CoValues/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@jazz-e2e/covalues",
+  "private": true,
+  "version": "0.0.82",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui"
+  },
+  "lint-staged": {
+    "*.{js,jsx,mdx,json}": "prettier --write"
+  },
+  "dependencies": {
+    "cojson": "workspace:*",
+    "hash-slash": "workspace:*",
+    "is-ci": "^3.0.1",
+    "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.16.0",
+    "react-router-dom": "^6.16.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.46.1",
+    "@types/node": "^22.5.1",
+    "@types/react": "^18.2.19",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "jstat": "^1.9.6",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
+  }
+}

e2e/CoValues/playwright.config.ts

@@ -0,0 +1,49 @@
+import { defineConfig, devices } from "@playwright/test";
+import isCI from "is-ci";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: "./tests",
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: isCI,
+    /* Retry on CI only */
+    retries: isCI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: isCI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: "html",
+
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        baseURL: isCI ? "http://localhost:4173/" : "http://localhost:5173",
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: "on-first-retry",
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: "chromium",
+            use: { ...devices["Desktop Chrome"] },
+        },
+    ],
+
+    /* Run your local dev server before starting the tests */
+    webServer: isCI ? {
+        command: "pnpm preview",
+        url: "http://localhost:4173/",
+    } : undefined,
+});

e2e/CoValues/src/app.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { AuthAndJazz } from "./jazz";
+import { TestInput } from "./pages/TestInput";
+import { RouterProvider, createHashRouter } from "react-router-dom";
+
+const router = createHashRouter([
+  {
+      path: "/",
+      element: <TestInput />,
+  },
+  {
+      path: "/test-input",
+      element: <TestInput />,
+  },
+]);
+
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+      <AuthAndJazz>
+          <RouterProvider router={router} />
+      </AuthAndJazz>
+  </React.StrictMode>,
+);

e2e/CoValues/src/jazz.tsx

@@ -0,0 +1,25 @@
+import { createJazzReactApp } from "jazz-react";
+import { ephemeralCredentialsAuth } from "jazz-tools";
+import { useState } from "react";
+
+const key = `test-comap@jazz.tools`;
+
+const localSync = new URLSearchParams(location.search).has("localSync");
+
+const Jazz = createJazzReactApp();
+
+export const { useAccount, useCoState } = Jazz;
+
+export function AuthAndJazz({ children }: { children: React.ReactNode }) {
+  const [ephemeralAuth] = useState(ephemeralCredentialsAuth())
+
+  return (
+    <Jazz.Provider auth={ephemeralAuth} peer={
+      localSync
+        ? `ws://localhost:4200?key=${key}`
+        : `wss://mesh.jazz.tools/?key=${key}`
+    }>
+      {children}
+    </Jazz.Provider>
+  );
+}

e2e/CoValues/src/pages/TestInput.tsx

@@ -0,0 +1,35 @@
+import { co, CoMap, Group, ID } from "jazz-tools";
+import { useAccount, useCoState } from "../jazz";
+import { useEffect, useState } from "react";
+
+export class InputTestCoMap extends CoMap {
+  title = co.string;
+}
+
+export function TestInput() {
+  const [id, setId] = useState<ID<InputTestCoMap> | undefined>(undefined);
+  const coMap = useCoState(InputTestCoMap, id);
+  const { me } = useAccount();
+
+  useEffect(() => {
+    if (!me || id) return;
+
+    const group = Group.create({ owner: me });
+
+    group.addMember("everyone", "writer");
+
+    setId(InputTestCoMap.create({ title: "" }, { owner: group }).id);
+  }, [me]);
+
+  if (!coMap) return null;
+
+  return (
+    <input
+      value={coMap?.title ?? ""}
+      onChange={(e) => {
+        if (!coMap) return;
+        coMap.title = e.target.value;
+      }}
+    />
+  );
+}

e2e/CoValues/tests/TestInput.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("CoMap - TestInput", () => {
+  test("should keep the cursor position when typing", async ({ page }) => {
+    await page.goto("/test-input");
+
+    await page.getByRole("textbox").fill("xx");
+    await page.getByRole('textbox').press('ArrowLeft');
+    await page.getByRole("textbox").press("y");
+    await page.getByRole("textbox").press("y");
+
+    await expect(page.getByRole('textbox')).toHaveValue("xyyx");
+  });
+});

e2e/CoValues/tsconfig.json

@@ -19,11 +19,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
+    "baseUrl": "."
-    "paths": {
-      "@/*": ["./src/*"]
-    }
   },
   "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
 }

e2e/CoValues/vite.config.ts

@@ -1,15 +1,9 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
-import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
   build: {
     minify: false
   }

examples/chat-clerk/.env

@@ -0,0 +1 @@
+VITE_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ

examples/chat-clerk/.eslintrc.cjs

@@ -0,0 +1,13 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {},
+};

examples/chat-clerk/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+sync-db/

examples/chat-clerk/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "printWidth": 80
+}

examples/chat-clerk/CHANGELOG.md

@@ -0,0 +1,895 @@
+# jazz-example-chat
+
+## 0.0.82
+
+### Patch Changes
+
+- Updated dependencies [a075f90]
+  - jazz-tools@0.8.2
+  - jazz-react@0.8.2
+  - jazz-react-auth-clerk@0.8.2
+
+## 0.0.81
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.8.1
+  - jazz-react@0.8.1
+  - jazz-react-auth-clerk@0.8.1
+
+## 0.0.82
+
+### Patch Changes
+
+- Updated dependencies [6a147c2]
+- Updated dependencies [ad40b88]
+- Updated dependencies [23369dc]
+- Updated dependencies [c2b62a0]
+- Updated dependencies [1a979b6]
+- Updated dependencies [bcec3be]
+- Updated dependencies [6ce2051]
+  - cojson@0.8.0
+  - jazz-tools@0.8.0
+  - jazz-react@0.8.0
+
+## 0.0.82-guest-auth.6
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.35-guest-auth.6
+  - jazz-tools@0.7.35-guest-auth.6
+
+## 0.0.82
+
+### Patch Changes
+
+- Updated dependencies [49a8b54]
+- Updated dependencies [35bbcd9]
+- Updated dependencies [6f80282]
+- Updated dependencies [35bbcd9]
+- Updated dependencies [cac2ec9]
+- Updated dependencies [f350e90]
+  - jazz-tools@0.7.35
+  - cojson@0.7.35
+  - jazz-react@0.7.35
+
+## 0.0.81
+
+### Patch Changes
+
+- Updated dependencies [5d91f9f]
+- Updated dependencies [5094e6d]
+- Updated dependencies [b09589b]
+- Updated dependencies [2c3a40c]
+- Updated dependencies [4e16575]
+- Updated dependencies [ea882ab]
+  - cojson@0.7.34
+  - jazz-react@0.7.34
+  - jazz-tools@0.7.34
+
+## 0.0.81-neverthrow.6
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.8
+  - jazz-react@0.7.34-neverthrow.8
+  - jazz-tools@0.7.34-neverthrow.8
+
+## 0.0.81-neverthrow.5
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.7
+  - jazz-react@0.7.34-neverthrow.7
+  - jazz-tools@0.7.34-neverthrow.7
+
+## 0.0.81-neverthrow.4
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.4
+  - jazz-react@0.7.34-neverthrow.4
+  - jazz-tools@0.7.34-neverthrow.4
+
+## 0.0.81-neverthrow.3
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.3
+  - jazz-react@0.7.34-neverthrow.3
+  - jazz-tools@0.7.34-neverthrow.3
+
+## 0.0.81-neverthrow.2
+
+### Patch Changes
+
+- jazz-react@0.7.34-neverthrow.2
+
+## 0.0.81-neverthrow.1
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.1
+  - jazz-react@0.7.34-neverthrow.1
+  - jazz-tools@0.7.34-neverthrow.1
+
+## 0.0.81-neverthrow.0
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.34-neverthrow.0
+  - jazz-react@0.7.34-neverthrow.0
+  - jazz-tools@0.7.34-neverthrow.0
+
+## 0.0.80
+
+### Patch Changes
+
+- Updated dependencies [b297c93]
+- Updated dependencies [3bf5127]
+- Updated dependencies [a8b74ff]
+- Updated dependencies [db53161]
+  - cojson@0.7.33
+  - jazz-react@0.7.33
+  - jazz-tools@0.7.33
+
+## 0.0.80-hotfixes.5
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.33-hotfixes.5
+  - jazz-react@0.7.33-hotfixes.5
+  - jazz-tools@0.7.33-hotfixes.5
+
+## 0.0.80-hotfixes.4
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.33-hotfixes.4
+  - jazz-react@0.7.33-hotfixes.4
+  - jazz-tools@0.7.33-hotfixes.4
+
+## 0.0.80-hotfixes.3
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.33-hotfixes.3
+  - jazz-react@0.7.33-hotfixes.3
+  - jazz-tools@0.7.33-hotfixes.3
+
+## 0.0.80-hotfixes.2
+
+### Patch Changes
+
+- jazz-react@0.7.33-hotfixes.2
+
+## 0.0.80-hotfixes.1
+
+### Patch Changes
+
+- jazz-react@0.7.33-hotfixes.1
+
+## 0.0.80-hotfixes.0
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.33-hotfixes.0
+  - jazz-react@0.7.33-hotfixes.0
+  - jazz-tools@0.7.33-hotfixes.0
+
+## 0.0.79
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.32
+  - jazz-react@0.7.32
+
+## 0.0.78
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.31
+  - jazz-react@0.7.31
+  - jazz-tools@0.7.31
+
+## 0.0.77
+
+### Patch Changes
+
+- jazz-react@0.7.30
+
+## 0.0.76
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.29
+  - jazz-react@0.7.29
+  - jazz-tools@0.7.29
+
+## 0.0.75
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.28
+  - jazz-react@0.7.28
+  - jazz-tools@0.7.28
+
+## 0.0.74
+
+### Patch Changes
+
+- jazz-react@0.7.27
+
+## 0.0.73
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.26
+  - jazz-react@0.7.26
+  - jazz-tools@0.7.26
+
+## 0.0.72
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.25
+  - jazz-react@0.7.25
+
+## 0.0.71
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.24
+  - jazz-react@0.7.24
+
+## 0.0.70
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.23
+  - jazz-react@0.7.23
+  - jazz-tools@0.7.23
+
+## 0.0.69
+
+### Patch Changes
+
+- jazz-react@0.7.22
+
+## 0.0.68
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.21
+  - jazz-react@0.7.21
+
+## 0.0.67
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.20
+  - jazz-react@0.7.20
+
+## 0.0.66
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.19
+  - jazz-react@0.7.19
+
+## 0.0.65
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.18
+  - jazz-react@0.7.18
+  - jazz-tools@0.7.18
+
+## 0.0.64
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.17
+  - jazz-react@0.7.17
+  - jazz-tools@0.7.17
+
+## 0.0.63
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.16
+  - jazz-react@0.7.16
+
+## 0.0.62
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.15
+
+## 0.0.61
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.14
+  - jazz-tools@0.7.14
+  - jazz-react@0.7.14
+
+## 0.0.60
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.13
+  - jazz-react@0.7.13
+
+## 0.0.59
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.12
+  - jazz-react@0.7.12
+
+## 0.0.58
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.11
+  - jazz-react@0.7.11
+  - jazz-tools@0.7.11
+
+## 0.0.57
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.10
+  - jazz-react@0.7.10
+  - jazz-tools@0.7.10
+
+## 0.0.56
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.9
+  - jazz-react@0.7.9
+  - jazz-tools@0.7.9
+
+## 0.0.55
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.8
+  - jazz-react@0.7.8
+
+## 0.0.54
+
+### Patch Changes
+
+- Updated dependencies [9fdc91c]
+  - jazz-react@0.7.7
+
+## 0.0.53
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.6
+  - jazz-react@0.7.6
+
+## 0.0.52
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.5
+
+## 0.0.51
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.4
+
+## 0.0.50
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.3
+  - jazz-react@0.7.3
+
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.2
+
+## 0.0.48
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.1
+  - jazz-react@0.7.1
+
+## 0.0.47
+
+### Patch Changes
+
+- Updated dependencies [8636319]
+- Updated dependencies [1a35307]
+- Updated dependencies [8636319]
+- Updated dependencies [1a35307]
+- Updated dependencies [96c494f]
+- Updated dependencies [59c18c3]
+- Updated dependencies [19f52b7]
+- Updated dependencies [8636319]
+- Updated dependencies [1a35307]
+- Updated dependencies [d8fe2b1]
+- Updated dependencies [19004b4]
+- Updated dependencies [a78f168]
+- Updated dependencies [1200aae]
+- Updated dependencies [60d5ca2]
+- Updated dependencies [52675c9]
+- Updated dependencies [129e2c1]
+- Updated dependencies [6d49e9b]
+- Updated dependencies [1cfa279]
+- Updated dependencies [704af7d]
+- Updated dependencies [e97f730]
+- Updated dependencies [1a35307]
+- Updated dependencies [460478f]
+- Updated dependencies [6b0418f]
+- Updated dependencies [e299c3e]
+- Updated dependencies [ed5643a]
+- Updated dependencies [bde684f]
+- Updated dependencies [bf0f8ec]
+- Updated dependencies [c4151fc]
+- Updated dependencies [63374cc]
+- Updated dependencies [8636319]
+- Updated dependencies [01ac646]
+- Updated dependencies [a5e68a4]
+- Updated dependencies [8636319]
+- Updated dependencies [952982e]
+- Updated dependencies [1a35307]
+- Updated dependencies [5fa277c]
+- Updated dependencies [60d5ca2]
+- Updated dependencies [21771c4]
+- Updated dependencies [77c2b56]
+- Updated dependencies [63374cc]
+- Updated dependencies [d2e03ff]
+- Updated dependencies [354bdcd]
+- Updated dependencies [ece35b3]
+- Updated dependencies [60d5ca2]
+- Updated dependencies [69ac514]
+- Updated dependencies [f8a5c46]
+- Updated dependencies [f0f6f1b]
+- Updated dependencies [e5eed5b]
+- Updated dependencies [1a44f87]
+- Updated dependencies [627d895]
+- Updated dependencies [1200aae]
+- Updated dependencies [63374cc]
+- Updated dependencies [ece35b3]
+- Updated dependencies [38d4410]
+- Updated dependencies [85d2b62]
+- Updated dependencies [fd86c11]
+- Updated dependencies [52675c9]
+  - jazz-tools@0.7.0
+  - cojson@0.7.0
+  - jazz-react@0.7.0
+  - hash-slash@0.2.0
+
+## 0.0.47-alpha.42
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.42
+  - cojson@0.7.0-alpha.42
+  - jazz-react@0.7.0-alpha.42
+
+## 0.0.47-alpha.41
+
+### Patch Changes
+
+- jazz-tools@0.7.0-alpha.41
+- jazz-react@0.7.0-alpha.41
+
+## 0.0.47-alpha.40
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.40
+
+## 0.0.47-alpha.39
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.0-alpha.39
+  - jazz-react@0.7.0-alpha.39
+  - jazz-tools@0.7.0-alpha.39
+
+## 0.0.47-alpha.38
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.38
+  - jazz-react@0.7.0-alpha.38
+  - cojson@0.7.0-alpha.38
+
+## 0.0.47-alpha.37
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.37
+  - cojson@0.7.0-alpha.37
+  - jazz-tools@0.7.0-alpha.37
+
+## 0.0.47-alpha.36
+
+### Patch Changes
+
+- Updated dependencies [1a35307]
+- Updated dependencies [1a35307]
+- Updated dependencies [1a35307]
+- Updated dependencies [1a35307]
+- Updated dependencies [6b0418f]
+- Updated dependencies [1a35307]
+  - cojson@0.7.0-alpha.36
+  - jazz-tools@0.7.0-alpha.36
+  - jazz-react@0.7.0-alpha.36
+
+## 0.0.47-alpha.35
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - cojson@0.7.0-alpha.35
+  - jazz-tools@0.7.0-alpha.35
+  - jazz-react@0.7.0-alpha.35
+
+## 0.0.47-alpha.34
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.34
+  - jazz-react@0.7.0-alpha.34
+
+## 0.0.47-alpha.33
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.33
+
+## 0.0.47-alpha.32
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - hash-slash@0.2.0-alpha.3
+  - jazz-tools@0.7.0-alpha.32
+  - jazz-react@0.7.0-alpha.32
+
+## 0.0.47-alpha.31
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.31
+  - jazz-react@0.7.0-alpha.31
+
+## 0.0.47-alpha.30
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.30
+  - jazz-react@0.7.0-alpha.30
+
+## 0.0.47-alpha.29
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.29
+  - cojson@0.7.0-alpha.29
+  - jazz-react@0.7.0-alpha.29
+
+## 0.0.47-alpha.28
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.28
+  - cojson@0.7.0-alpha.28
+  - jazz-react@0.7.0-alpha.28
+
+## 0.0.47-alpha.27
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.27
+  - cojson@0.7.0-alpha.27
+  - jazz-react@0.7.0-alpha.27
+
+## 0.0.47-alpha.26
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.26
+  - jazz-react@0.7.0-alpha.26
+
+## 0.0.47-alpha.25
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.25
+  - jazz-react@0.7.0-alpha.25
+
+## 0.0.47-alpha.24
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.24
+  - cojson@0.7.0-alpha.24
+  - jazz-react@0.7.0-alpha.24
+
+## 0.0.47-alpha.23
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.23
+  - jazz-react@0.7.0-alpha.23
+
+## 0.0.47-alpha.22
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.22
+  - jazz-react@0.7.0-alpha.22
+
+## 0.0.47-alpha.21
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.21
+  - jazz-tools@0.7.0-alpha.21
+
+## 0.0.47-alpha.20
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.20
+  - jazz-tools@0.7.0-alpha.20
+
+## 0.0.47-alpha.19
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.19
+  - jazz-react@0.7.0-alpha.19
+
+## 0.0.47-alpha.18
+
+### Patch Changes
+
+- jazz-react@0.7.0-alpha.18
+
+## 0.0.47-alpha.17
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.17
+  - jazz-react@0.7.0-alpha.17
+
+## 0.0.47-alpha.16
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.16
+  - jazz-react@0.7.0-alpha.16
+
+## 0.0.47-alpha.15
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.15
+  - jazz-react@0.7.0-alpha.15
+
+## 0.0.47-alpha.14
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.14
+  - jazz-react@0.7.0-alpha.14
+
+## 0.0.47-alpha.13
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.13
+  - jazz-react@0.7.0-alpha.13
+
+## 0.0.47-alpha.12
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.12
+  - jazz-tools@0.7.0-alpha.12
+
+## 0.0.47-alpha.11
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.11
+  - jazz-tools@0.7.0-alpha.11
+  - cojson@0.7.0-alpha.11
+
+## 0.0.47-alpha.10
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.10
+  - jazz-tools@0.7.0-alpha.10
+  - cojson@0.7.0-alpha.10
+
+## 0.0.47-alpha.9
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.9
+  - jazz-tools@0.7.0-alpha.9
+
+## 0.0.47-alpha.8
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.8
+  - jazz-tools@0.7.0-alpha.8
+
+## 0.0.47-alpha.7
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.7
+  - jazz-tools@0.7.0-alpha.7
+  - cojson@0.7.0-alpha.7
+
+## 0.0.47-alpha.6
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.6
+  - jazz-tools@0.7.0-alpha.6
+
+## 0.0.47-alpha.5
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.5
+  - jazz-tools@0.7.0-alpha.5
+  - cojson@0.7.0-alpha.5
+
+## 0.0.47-alpha.4
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.4
+  - jazz-react@0.7.0-alpha.4
+
+## 0.0.47-alpha.3
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.3
+  - jazz-react@0.7.0-alpha.3
+
+## 0.0.47-alpha.2
+
+### Patch Changes
+
+- Updated dependencies
+  - hash-slash@0.2.0-alpha.2
+  - jazz-react@0.7.0-alpha.2
+  - jazz-tools@0.7.0-alpha.2
+
+## 0.0.47-alpha.1
+
+### Patch Changes
+
+- Updated dependencies
+  - hash-slash@0.2.0-alpha.1
+  - jazz-react@0.7.0-alpha.1
+  - jazz-tools@0.7.0-alpha.1
+  - cojson@0.7.0-alpha.1
+
+## 0.0.47-alpha.0
+
+### Patch Changes
+
+- Updated dependencies
+  - hash-slash@0.2.0-alpha.0
+  - jazz-react@0.7.0-alpha.0
+  - jazz-tools@0.7.0-alpha.0
+  - cojson@0.7.0-alpha.0
+
+## 0.0.46
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.5.0
+  - jazz-react-auth-local@0.4.16

examples/chat-clerk/README.md

@@ -1,19 +1,20 @@
-# Jazz File Drop Example
+# Jazz Chat Example (with Clerk auth)
 
-Live version: https://example-file-drop.jazz.tools
+<!-- Live version: [https://chat-clerk.jazz.tools](https://chat-clerk.jazz.tools) -->
 
 ## Installing & running the example locally
 
 (this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
 
 Start by checking out `jazz`
+
 ```bash
 git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/file-drop
+cd jazz/examples/chat-clerk
 pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/file-drop # or any other directory
+mkdir -p ~/jazz-examples/chat-clerk # or any other directory
-tar -xf /tmp/jazz-example-file-drop-* --strip-components 1 -C ~/jazz-examples/file-drop
+tar -xf /tmp/jazz-example-chat-* --strip-components 1 -C ~/jazz-examples/chat-clerk
-cd ~/jazz-examples/file-drop
+cd ~/jazz-examples/chat-clerk
 ```
 
 This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
@@ -34,9 +35,8 @@ pnpm dev
 
 If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
 
-
 ## Configuration: sync server
 
 By default, the example app uses [Jazz Global Mesh](https://jazz.tools/mesh) (`wss://sync.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx cojson-simple-sync`
+You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/chat-clerk/package.json

@@ -1,26 +1,34 @@
 {
-  "name": "jazz-example-chat-passphrase",
+  "name": "jazz-example-chat-clerk",
   "private": true,
-  "version": "0.0.48-alpha.0",
+  "version": "0.0.82",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "echo 'chat example is codegolfed'",
     "preview": "vite preview"
   },
+  "lint-staged": {
+    "*.{ts,tsx}": "eslint --fix",
+    "*.{js,jsx,mdx,json}": "prettier --write"
+  },
   "dependencies": {
+    "@clerk/clerk-react": "^5.4.1",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.4",
-    "@scure/bip39": "^1.2.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:*",
+    "cojson": "workspace:0.8.0",
-    "hash-slash": "workspace:*",
+    "hash-slash": "workspace:0.2.0",
-    "jazz-react": "workspace:*",
+    "jazz-react": "workspace:0.8.2",
+    "jazz-react-auth-clerk": "workspace:0.8.2",
+    "jazz-tools": "workspace:0.8.2",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
+    "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.16.0",
     "react-router-dom": "^6.16.0",
@@ -31,19 +39,18 @@
   },
   "devDependencies": {
     "@types/qrcode": "^1.5.1",
-    "@types/react": "^18.2.15",
+    "@types/react": "^18.2.19",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/parser": "^6.2.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.45.0",
+    "eslint": "^8.46.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.27",
-    "react": "^18.2.0",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.0.2",
+    "typescript": "^5.3.3",
-    "vite": "^4.4.5"
+    "vite": "^5.0.10"
   }
 }

examples/chat-clerk/postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

examples/chat-clerk/src/app.tsx

@@ -0,0 +1,30 @@
+import { Group, ID } from "jazz-tools";
+import { useIframeHashRouter } from "hash-slash";
+import { useAccount } from "./main.tsx";
+import { Chat } from "./schema.ts";
+import { ChatScreen } from "./chatScreen.tsx";
+import { AppContainer, TopBar } from "./ui.tsx";
+
+export function App() {
+  const { me, logOut } = useAccount();
+
+  const createChat = () => {
+    if (!me) return;
+    const group = Group.create({ owner: me });
+    group.addMember("everyone", "writer");
+    const chat = Chat.create([], { owner: group });
+    location.hash = "/chat/" + chat.id;
+  };
+
+  return (
+    <AppContainer>
+      <TopBar>
+        {me?.profile?.name} · <button onClick={logOut}>Log out</button>
+      </TopBar>
+      {useIframeHashRouter().route({
+        "/": () => createChat() as never,
+        "/chat/:id": id => <ChatScreen chatID={id as ID<Chat>} />,
+      })}
+    </AppContainer>
+  );
+}

examples/chat-clerk/src/chatScreen.tsx

@@ -0,0 +1,43 @@
+import { ID } from "jazz-tools";
+import { Chat, Message } from "./schema.ts";
+import { useCoState } from "./main.tsx";
+import {
+  BubbleBody,
+  BubbleContainer,
+  BubbleInfo,
+  ChatContainer,
+  ChatInput,
+  EmptyChatMessage,
+} from "./ui.tsx";
+
+export function ChatScreen(props: { chatID: ID<Chat> }) {
+  const chat = useCoState(Chat, props.chatID, [{}]);
+
+  return chat ? (
+    <ChatContainer>
+      {chat.length > 0 ? (
+        chat.map(msg => <ChatBubble msg={msg} key={msg.id} />)
+      ) : (
+        <EmptyChatMessage />
+      )}
+      <ChatInput
+        onSubmit={text => {
+          chat.push(Message.create({ text }, { owner: chat._owner }));
+        }}
+      />
+    </ChatContainer>
+  ) : (
+    <div>Loading...</div>
+  );
+}
+
+function ChatBubble(props: { msg: Message }) {
+  const lastEdit = props.msg._edits.text;
+
+  return (
+    <BubbleContainer fromMe={lastEdit.by?.isMe}>
+      <BubbleBody>{props.msg.text}</BubbleBody>
+      <BubbleInfo by={lastEdit.by?.profile?.name} madeAt={lastEdit.madeAt} />
+    </BubbleContainer>
+  );
+}

examples/chat-clerk/src/index.css

@@ -75,4 +75,4 @@
     margin: 0;
     padding: 0;
   }
-}
+}

examples/chat-clerk/src/main.tsx

@@ -0,0 +1,46 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { createJazzReactApp } from "jazz-react";
+import { App } from "./app.tsx";
+
+import { ClerkProvider, SignInButton, useClerk } from "@clerk/clerk-react";
+import { useJazzClerkAuth } from "jazz-react-auth-clerk";
+
+const Jazz = createJazzReactApp();
+export const { useAccount, useCoState } = Jazz;
+
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const clerk = useClerk();
+  const [auth, state] = useJazzClerkAuth(clerk);
+
+  return (
+    <>
+      {state.errors.map(error => (
+        <div key={error}>{error}</div>
+      ))}
+      {auth ? (
+        <Jazz.Provider
+          auth={auth}
+          peer="wss://mesh.jazz.tools/?key=chat-example-jazz-clerk@gcmp.io"
+        >
+          {children}
+        </Jazz.Provider>
+      ) : (
+        <SignInButton />
+      )}
+    </>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ClerkProvider
+      publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
+      afterSignOutUrl="/"
+    >
+      <JazzAndAuth>
+        <App />
+      </JazzAndAuth>
+    </ClerkProvider>
+  </StrictMode>
+);

examples/chat-clerk/src/schema.ts

@@ -0,0 +1,7 @@
+import { CoMap, CoList, co } from "jazz-tools";
+
+export class Message extends CoMap {
+  text = co.string;
+}
+
+export class Chat extends CoList.Of(co.ref(Message)) {}

examples/chat-clerk/src/ui.tsx

@@ -0,0 +1,63 @@
+export function AppContainer(props: { children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white">
+      {props.children}
+    </div>
+  );
+}
+
+export function TopBar(props: { children: React.ReactNode }) {
+  return (
+    <div className="mb-5 px-2 py-1 text-sm self-end">{props.children}</div>
+  );
+}
+
+export function ChatContainer(props: { children: React.ReactNode }) {
+  return (
+    <div className="w-full max-w-xl h-full flex flex-col items-stretch">
+      {props.children}
+    </div>
+  );
+}
+
+export function EmptyChatMessage() {
+  return <div className="m-auto text-sm">(Empty chat)</div>;
+}
+
+export function BubbleContainer(props: {
+  children: React.ReactNode;
+  fromMe: boolean | undefined;
+}) {
+  const align = props.fromMe ? "items-end" : "items-start";
+  return <div className={`${align} flex flex-col`}>{props.children}</div>;
+}
+
+export function BubbleBody(props: { children: React.ReactNode }) {
+  return (
+    <div className="rounded-xl bg-stone-100 dark:bg-stone-700 dark:text-white py-2 px-4 mt-2 min-w-[5rem]">
+      {props.children}
+    </div>
+  );
+}
+
+export function BubbleInfo(props: { by: string | undefined; madeAt: Date }) {
+  return (
+    <div className="text-xs text-neutral-500 ml-2">
+      {props.by} {props.madeAt.toLocaleTimeString()}
+    </div>
+  );
+}
+
+export function ChatInput(props: { onSubmit: (text: string) => void }) {
+  return (
+    <input
+      className="rounded p-2 border mt-auto dark:bg-black dark:text-white border-stone-300 dark:border-stone-700"
+      placeholder="Type a message and press Enter"
+      onKeyDown={({ key, currentTarget: input }) => {
+        if (key !== "Enter" || !input.value) return;
+        props.onSubmit(input.value);
+        input.value = "";
+      }}
+    />
+  );
+}

examples/chat-clerk/tailwind.config.js

@@ -1,11 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{ts,tsx}',
+    "./pages/**/*.{ts,tsx}",
-    './components/**/*.{ts,tsx}',
+    "./components/**/*.{ts,tsx}",
-    './app/**/*.{ts,tsx}',
+    "./app/**/*.{ts,tsx}",
-    './src/**/*.{ts,tsx}',
+    "./src/**/*.{ts,tsx}",
-	],
+  ],
   theme: {
     container: {
       center: true,
@@ -72,4 +72,4 @@ module.exports = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
+};

examples/chat-clerk/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import react from '@vitejs/plugin-react-swc'
+import react from "@vitejs/plugin-react-swc";
 import path from "path";
 
 // https://vitejs.dev/config/
@@ -11,6 +11,6 @@ export default defineConfig({
     },
   },
   build: {
-    minify: false
+    minify: false,
-  }
+  },
-})
+});

examples/chat/.eslintrc.cjs

@@ -2,12 +2,12 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
+    "eslint:recommended",
-    'plugin:@typescript-eslint/recommended',
+    "plugin:@typescript-eslint/recommended",
-    'plugin:react-hooks/recommended',
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
-  parser: '@typescript-eslint/parser',
+  parser: "@typescript-eslint/parser",
-  plugins: ['react-refresh'],
+  plugins: ["react-refresh"],
   rules: {},
-}
+};

examples/chat/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+sync-db/

examples/chat/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "printWidth": 80
+}

examples/chat/CHANGELOG.md

@@ -1,5 +1,58 @@
 # jazz-example-chat
 
+## 0.0.84
+
+### Patch Changes
+
+- Updated dependencies [a075f90]
+  - jazz-tools@0.8.2
+  - jazz-react@0.8.2
+
+## 0.0.83
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.8.1
+  - jazz-react@0.8.1
+
+## 0.0.82
+
+### Patch Changes
+
+- Updated dependencies [6a147c2]
+- Updated dependencies [ad40b88]
+- Updated dependencies [23369dc]
+- Updated dependencies [c2b62a0]
+- Updated dependencies [1a979b6]
+- Updated dependencies [bcec3be]
+- Updated dependencies [6ce2051]
+  - cojson@0.8.0
+  - jazz-tools@0.8.0
+  - jazz-react@0.8.0
+
+## 0.0.82-guest-auth.6
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.35-guest-auth.6
+  - jazz-tools@0.7.35-guest-auth.6
+
+## 0.0.82
+
+### Patch Changes
+
+- Updated dependencies [49a8b54]
+- Updated dependencies [35bbcd9]
+- Updated dependencies [6f80282]
+- Updated dependencies [35bbcd9]
+- Updated dependencies [cac2ec9]
+- Updated dependencies [f350e90]
+  - jazz-tools@0.7.35
+  - cojson@0.7.35
+  - jazz-react@0.7.35
+
 ## 0.0.81
 
 ### Patch Changes

examples/chat/README.md

@@ -39,4 +39,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 By default, the example app uses [Jazz Global Mesh](https://jazz.tools/mesh) (`wss://sync.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?sync=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).
+You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.81",
+  "version": "0.0.84",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,13 +18,12 @@
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.4",
-    "@types/qrcode": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "hash-slash": "workspace:*",
+    "cojson": "workspace:0.8.0",
-    "jazz-tools": "workspace:*",
+    "hash-slash": "workspace:0.2.0",
-    "jazz-react": "workspace:*",
+    "jazz-react": "workspace:0.8.2",
-    "cojson": "workspace:*",
+    "jazz-tools": "workspace:0.8.2",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
@@ -37,18 +36,19 @@
     "uniqolor": "^1.1.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
+    "@types/qrcode": "^1.5.1",
+    "@types/react": "^18.2.19",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/parser": "^6.2.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.45.0",
+    "eslint": "^8.46.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.0.2",
+    "typescript": "^5.3.3",
     "vite": "^5.0.10"
   }
 }

examples/chat/postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

examples/chat/src/app.tsx

@@ -1,43 +1,30 @@
-import { CoMap, CoList, co, Group, ID } from "jazz-tools";
+import { Group, ID } from "jazz-tools";
-import { createJazzReactContext, DemoAuth } from "jazz-react";
-import { createRoot } from "react-dom/client";
 import { useIframeHashRouter } from "hash-slash";
+import { useAccount } from "./main.tsx";
+import { Chat } from "./schema.ts";
 import { ChatScreen } from "./chatScreen.tsx";
-import { StrictMode } from "react";
+import { AppContainer, TopBar } from "./ui.tsx";
 
-export class Message extends CoMap {
+export function App() {
-  text = co.string;
-}
-
-export class Chat extends CoList.Of(co.ref(Message)) {}
-
-const Jazz = createJazzReactContext({
-  auth: DemoAuth({ appName: "Jazz Chat" }),
-  peer: `wss://mesh.jazz.tools/?key=you@example.com`
-});
-export const { useAccount, useCoState } = Jazz;
-
-
-function App() {
   const { me, logOut } = useAccount();
 
   const createChat = () => {
+    if (!me) return;
     const group = Group.create({ owner: me });
     group.addMember("everyone", "writer");
     const chat = Chat.create([], { owner: group });
     location.hash = "/chat/" + chat.id;
   };
 
-  return <div className="flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white">
+  return (
-    <div className="rounded mb-5 px-2 py-1 text-sm self-end">
+    <AppContainer>
-      {me.profile?.name} · <button onClick={logOut}>Log Out</button>
+      <TopBar>
-    </div>
+        <p>{me?.profile?.name}</p> · <button onClick={logOut}>Log out</button>
-    {useIframeHashRouter().route({
+      </TopBar>
-      '/': () => createChat() as never,
+      {useIframeHashRouter().route({
-      '/chat/:id': (id) => <ChatScreen chatID={id as ID<Chat>} />
+        "/": () => createChat() as never,
-    })}
+        "/chat/:id": id => <ChatScreen chatID={id as ID<Chat>} />,
-  </div>;
+      })}
+    </AppContainer>
+  );
 }
-
-createRoot(document.getElementById("root")!)
-  .render(<StrictMode><Jazz.Provider><App/></Jazz.Provider></StrictMode>);

examples/chat/src/chatScreen.tsx

@@ -1,42 +1,45 @@
-import { ID } from 'jazz-tools';
+import { ID } from "jazz-tools";
-import { Chat, Message, useCoState } from './app.tsx';
+import { Chat, Message } from "./schema.ts";
+import { useCoState } from "./main.tsx";
+import {
+  BubbleBody,
+  BubbleContainer,
+  BubbleInfo,
+  ChatBody,
+  ChatInput,
+  EmptyChatMessage,
+} from "./ui.tsx";
 
 export function ChatScreen(props: { chatID: ID<Chat> }) {
   const chat = useCoState(Chat, props.chatID, [{}]);
 
-  return chat ? <div className='w-full max-w-xl h-full flex flex-col items-stretch'>
+  return chat ? (
-    {chat.length > 0
+    <>
-      ? chat.map((msg) => <ChatBubble msg={msg} key={msg.id} />)
+      <ChatBody>
-      : <div className='m-auto text-sm'>(Empty chat)</div>}
+        {chat.length > 0 ? (
-    <ChatInput onSubmit={(text) => {
+          chat.map(msg => <ChatBubble msg={msg} key={msg.id} />)
-      chat.push(
+        ) : (
-        Message.create({ text }, { owner: chat._owner })
+          <EmptyChatMessage />
-      );
+        )}
-    }} />
+      </ChatBody>
-  </div> : <div>Loading...</div>;
+      <ChatInput
+        onSubmit={text => {
+          chat.push(Message.create({ text }, { owner: chat._owner }));
+        }}
+      />
+    </>
+  ) : (
+    <div>Loading...</div>
+  );
 }
 
 function ChatBubble(props: { msg: Message }) {
   const lastEdit = props.msg._edits.text;
-  const align = lastEdit.by?.isMe ? 'items-end' : 'items-start';
 
-  return <div className={`${align} flex flex-col`}>
+  return (
-    <div className='rounded-xl bg-stone-100 dark:bg-stone-700 dark:text-white py-2 px-4 mt-2 min-w-[5rem]'>
+    <BubbleContainer fromMe={lastEdit.by?.isMe}>
-      { props.msg.text }
+      <BubbleBody>{props.msg.text}</BubbleBody>
-    </div>
+      <BubbleInfo by={lastEdit.by?.profile?.name} madeAt={lastEdit.madeAt} />
-    <div className='text-xs text-neutral-500 ml-2'>
+    </BubbleContainer>
-      { lastEdit.by?.profile?.name }{' '}
+  );
-      { lastEdit.madeAt?.toLocaleTimeString() }
-    </div>
-  </div>;
-}
-
-function ChatInput(props: { onSubmit: (text: string) => void }) {
-  return <input className='rounded p-2 border mt-auto dark:bg-black dark:text-white border-stone-300 dark:border-stone-700'
-    placeholder='Type a message and press Enter'
-    onKeyDown={({ key, currentTarget: input }) => {
-      if (key !== 'Enter' || !input.value) return;
-      props.onSubmit(input.value);
-      input.value = '';
-    }} />;
 }

examples/chat/src/index.css

@@ -75,4 +75,4 @@
     margin: 0;
     padding: 0;
   }
-}
+}

examples/chat/src/main.tsx

@@ -0,0 +1,31 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { createJazzReactApp, DemoAuthBasicUI, useDemoAuth } from "jazz-react";
+import { App } from "./app.tsx";
+
+const Jazz = createJazzReactApp();
+export const { useAccount, useCoState } = Jazz;
+
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const [auth, state] = useDemoAuth();
+
+  return (
+    <>
+      <Jazz.Provider
+        auth={auth}
+        peer="wss://mesh.jazz.tools/?key=chat-example-jazz@gcmp.io"
+      >
+        {children}
+      </Jazz.Provider>
+      {state.state !== "signedIn" && <DemoAuthBasicUI appName="Jazz Chat" state={state} />}
+    </>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <JazzAndAuth>
+      <App />
+    </JazzAndAuth>
+  </StrictMode>
+);

examples/chat/src/schema.ts

@@ -0,0 +1,7 @@
+import { CoMap, CoList, co } from "jazz-tools";
+
+export class Message extends CoMap {
+  text = co.string;
+}
+
+export class Chat extends CoList.Of(co.ref(Message)) {}

examples/chat/src/ui.tsx

@@ -0,0 +1,67 @@
+export function AppContainer(props: { children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col justify-between w-screen h-screen bg-stone-50 dark:bg-black dark:text-white">
+      {props.children}
+    </div>
+  );
+}
+
+export function TopBar(props: { children: React.ReactNode }) {
+  return (
+    <div className="p-3 bg-white w-full flex justify-end gap-1 text-xs border-b dark:bg-transparent dark:border-stone-800">
+      {props.children}
+    </div>
+  );
+}
+
+export function ChatBody(props: { children: React.ReactNode }) {
+  return (
+    <div className="flex-1 overflow-y-auto">
+      {props.children}
+    </div>
+  );
+}
+
+export function EmptyChatMessage() {
+  return <div className="h-full text-base text-stone-500 flex items-center justify-center px-3 md:text-xl">Start a conversation below.</div>;
+}
+
+export function BubbleContainer(props: {
+  children: React.ReactNode;
+  fromMe: boolean | undefined;
+}) {
+  const align = props.fromMe ? "items-end" : "items-start";
+  return <div className={`${align} flex flex-col m-2`}>{props.children}</div>;
+}
+
+export function BubbleBody(props: { children: React.ReactNode }) {
+  return (
+    <div className="rounded-2xl text-sm bg-white dark:bg-stone-700 dark:text-white py-1 px-3 shadow-sm">
+      {props.children}
+    </div>
+  );
+}
+
+export function BubbleInfo(props: { by: string | undefined; madeAt: Date }) {
+  return (
+    <div className="text-xs text-neutral-500 mt-1.5">
+      {props.by} · {props.madeAt.toLocaleTimeString()}
+    </div>
+  );
+}
+
+export function ChatInput(props: { onSubmit: (text: string) => void }) {
+  return (
+    <div className="p-3 bg-white border-t shadow-2xl mt-auto dark:bg-transparent dark:border-stone-800">
+      <input
+        className="rounded-full py-2 px-4 text-sm border block w-full dark:bg-black dark:text-white dark:border-stone-700"
+        placeholder="Type a message and press Enter"
+        onKeyDown={({ key, currentTarget: input }) => {
+          if (key !== "Enter" || !input.value) return;
+          props.onSubmit(input.value);
+          input.value = "";
+        }}
+      />
+    </div>
+  );
+}

examples/chat/tailwind.config.js

@@ -1,11 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{ts,tsx}',
+    "./pages/**/*.{ts,tsx}",
-    './components/**/*.{ts,tsx}',
+    "./components/**/*.{ts,tsx}",
-    './app/**/*.{ts,tsx}',
+    "./app/**/*.{ts,tsx}",
-    './src/**/*.{ts,tsx}',
+    "./src/**/*.{ts,tsx}",
-	],
+  ],
   theme: {
     container: {
       center: true,
@@ -72,4 +72,4 @@ module.exports = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
+};

examples/chat/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import react from '@vitejs/plugin-react-swc'
+import react from "@vitejs/plugin-react-swc";
 import path from "path";
 
 // https://vitejs.dev/config/
@@ -11,6 +11,6 @@ export default defineConfig({
     },
   },
   build: {
-    minify: false
+    minify: false,
-  }
+  },
-})
+});

examples/inspector/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+sync-db/

examples/inspector/CHANGELOG.md

@@ -1,4 +1,23 @@
-# jazz-example-chat
+# jazz-example-inspector
+
+## 0.0.60
+
+### Patch Changes
+
+- Updated dependencies [6a147c2]
+- Updated dependencies [ad40b88]
+  - cojson@0.8.0
+  - cojson-transport-ws@0.8.0
+
+## 0.0.60
+
+### Patch Changes
+
+- 63daf6a: fix(inspector): subscribe to latent covalues instead of loading them immediately
+- Updated dependencies [35bbcd9]
+- Updated dependencies [f350e90]
+  - cojson@0.7.35
+  - cojson-transport-ws@0.7.35
 
 ## 0.0.59
 

examples/inspector/README.md

@@ -1,42 +1,7 @@
-# Jazz Chat Example
+# Jazz Inspector
 
-Live version: https://example-chat.jazz.tools
+Live address: https://inspector.jazz.tools
 
-## Installing & running the example locally
+Use this to visually inspect a Jazz account or other CoValue.
 
-(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
+For now, you can get your account credentials from the `jazz-logged-in-secret` local-storage key from within your Jazz app.
-
-Start by checking out `jazz`
-```bash
-git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/chat
-pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/chat # or any other directory
-tar -xf /tmp/jazz-example-chat-* --strip-components 1 -C ~/jazz-examples/chat
-cd ~/jazz-examples/chat
-```
-
-This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
-
-Install dependencies:
-
-```bash
-pnpm install
-```
-
-Start the dev server:
-
-```bash
-pnpm dev
-```
-
-## Questions / problems / feedback
-
-If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
-
-
-## Configuration: sync server
-
-By default, the example app uses [Jazz Global Mesh](https://jazz.tools/mesh) (`wss://sync.jazz.tools`) - so cross-device use, invites and collaboration should just work.
-
-You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?sync=ws://localhost:4200`), or by setting the `sync` parameter of the `<WithJazz>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector",
   "private": true,
-  "version": "0.0.59",
+  "version": "0.0.60",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,12 +13,11 @@
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.4",
-    "@types/qrcode": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "hash-slash": "workspace:*",
+    "cojson": "workspace:0.8.0",
-    "cojson": "workspace:*",
+    "cojson-transport-ws": "workspace:0.8.0",
-    "cojson-transport-ws": "workspace:*",
+    "hash-slash": "workspace:0.2.0",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
@@ -31,18 +30,19 @@
     "uniqolor": "^1.1.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
+    "@types/qrcode": "^1.5.1",
+    "@types/react": "^18.2.19",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/parser": "^6.2.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.45.0",
+    "eslint": "^8.46.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.0.2",
+    "typescript": "^5.3.3",
     "vite": "^5.0.10"
   }
 }

examples/inspector/src/viewer/new-app.tsx

@@ -5,8 +5,7 @@ import {
     RawCoValue,
     RawAccount,
     AgentSecret,
-    AccountID,
+    RawAccountID,
-    cojsonInternals,
     WasmCrypto,
 } from "cojson";
 import { createWebSocketPeer } from "cojson-transport-ws";
@@ -69,7 +68,7 @@ export default function CoJsonViewerApp() {
             const node = await LocalNode.withLoadedAccount({
                 accountID: currentAccount.id,
                 accountSecret: currentAccount.secret,
-                sessionID: cojsonInternals.newRandomSessionID(
+                sessionID: crypto.newRandomSessionID(
                     currentAccount.id,
                 ),
                 peersToLoadFrom: [wsPeer],
@@ -82,7 +81,7 @@ export default function CoJsonViewerApp() {
         });
     }, [currentAccount, goToIndex]);
 
-    const addAccount = (id: AccountID, secret: AgentSecret) => {
+    const addAccount = (id: RawAccountID, secret: AgentSecret) => {
         const newAccount = { id, secret };
         setAccounts([...accounts, newAccount]);
         setCurrentAccount(newAccount);
@@ -238,14 +237,14 @@ function AccountSwitcher({
 function AddAccountForm({
     addAccount,
 }: {
-    addAccount: (id: AccountID, secret: AgentSecret) => void;
+    addAccount: (id: RawAccountID, secret: AgentSecret) => void;
 }) {
     const [id, setId] = useState("");
     const [secret, setSecret] = useState("");
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
-        addAccount(id as AccountID, secret as AgentSecret);
+        addAccount(id as RawAccountID, secret as AgentSecret);
         setId("");
         setSecret("");
     };

examples/inspector/src/viewer/use-resolve-covalue.ts

@@ -104,6 +104,54 @@ export async function resolveCoValue(
     };
 }
 
+function subscribeToCoValue(
+    coValueId: CoID<RawCoValue>,
+    node: LocalNode,
+    callback: (result: Awaited<ReturnType<typeof resolveCoValue>>) => void,
+) {
+    return node.subscribe(coValueId, (value) => {
+        if (value === "unavailable") {
+            callback({
+                value: undefined,
+                snapshot: "unavailable",
+                type: null,
+                extendedType: undefined,
+            });
+        } else {
+            const snapshot = value.toJSON() as JSONObject;
+            const type = value.type as CoJsonType;
+            let extendedType: ExtendedCoJsonType | undefined;
+
+            if (type === "comap") {
+                if (isBrowserImage(snapshot)) {
+                    extendedType = "image";
+                } else if (isAccount(snapshot)) {
+                    extendedType = "account";
+                } else if (isGroup(snapshot)) {
+                    extendedType = "group";
+                } else {
+                    const children = Object.values(snapshot).slice(0, 10);
+                    if (
+                        children.every(
+                            (c) => typeof c === "string" && c.startsWith("co_"),
+                        ) &&
+                        children.length > 3
+                    ) {
+                        extendedType = "record";
+                    }
+                }
+            }
+
+            callback({
+                value,
+                snapshot,
+                type,
+                extendedType,
+            });
+        }
+    });
+}
+
 export function useResolvedCoValue(
     coValueId: CoID<RawCoValue>,
     node: LocalNode,
@@ -112,7 +160,17 @@ export function useResolvedCoValue(
         useState<Awaited<ReturnType<typeof resolveCoValue>>>();
 
     useEffect(() => {
-        resolveCoValue(coValueId, node).then(setResult);
+        let isMounted = true;
+        const unsubscribe = subscribeToCoValue(coValueId, node, (newResult) => {
+            if (isMounted) {
+                setResult(newResult);
+            }
+        });
+
+        return () => {
+            isMounted = false;
+            unsubscribe();
+        };
     }, [coValueId, node]);
 
     return (
@@ -134,18 +192,30 @@ export function useResolvedCoValues(
     >([]);
 
     useEffect(() => {
-        console.log("RETECHING", coValueIds);
+        let isMounted = true;
-        const fetchResults = async () => {
+        const unsubscribes: (() => void)[] = [];
-            if (coValueIds.length === 0) return;
+
-            const resolvedValues = await Promise.all(
+        coValueIds.forEach((coValueId, index) => {
-                coValueIds.map((coValueId) => resolveCoValue(coValueId, node)),
+            const unsubscribe = subscribeToCoValue(
+                coValueId,
+                node,
+                (newResult) => {
+                    if (isMounted) {
+                        setResults((prevResults) => {
+                            const newResults = [...prevResults];
+                            newResults[index] = newResult;
+                            return newResults;
+                        });
+                    }
+                },
             );
+            unsubscribes.push(unsubscribe);
+        });
 
-            console.log({ resolvedValues });
+        return () => {
-            setResults(resolvedValues);
+            isMounted = false;
+            unsubscribes.forEach((unsubscribe) => unsubscribe());
         };
-
-        fetchResults();
     }, [coValueIds, node]);
 
     return results;

examples/music-player/.eslintrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
+    'prettier'
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',

examples/music-player/.prettierrc.js

@@ -0,0 +1,9 @@
+/** @type {import("prettier").Config} */
+const config = {
+    trailingComma: "all",
+    tabWidth: 4,
+    semi: true,
+    singleQuote: false,
+};
+
+export default config;

examples/music-player/CHANGELOG.md

@@ -0,0 +1,50 @@
+# jazz-example-musicplayer
+
+## 0.0.5
+
+### Patch Changes
+
+-   Updated dependencies [a075f90]
+    -   jazz-tools@0.8.2
+    -   jazz-react@0.8.2
+
+## 0.0.4
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-tools@0.8.1
+    -   jazz-react@0.8.1
+
+## 0.0.3
+
+### Patch Changes
+
+-   Updated dependencies [ad40b88]
+-   Updated dependencies [23369dc]
+-   Updated dependencies [c2b62a0]
+-   Updated dependencies [1a979b6]
+-   Updated dependencies [bcec3be]
+-   Updated dependencies [6ce2051]
+    -   jazz-tools@0.8.0
+    -   jazz-react@0.8.0
+
+## 0.0.3-guest-auth.0
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.35-guest-auth.6
+    -   jazz-tools@0.7.35-guest-auth.6
+
+## 0.0.2
+
+### Patch Changes
+
+-   Updated dependencies [49a8b54]
+-   Updated dependencies [6f80282]
+-   Updated dependencies [35bbcd9]
+-   Updated dependencies [cac2ec9]
+-   Updated dependencies [f350e90]
+    -   jazz-tools@0.7.35
+    -   jazz-react@0.7.35

examples/music-player/README.md

@@ -1,19 +1,20 @@
-# Jazz Twit Example
+# Jazz Music Player Example
 
-Live version: https://twit.jazz.tools
+Live version: https://music-demo.jazz.tools
 
 ## Installing & running the example locally
 
 (this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
 
 Start by checking out `jazz`
+
 ```bash
 git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/twit
+cd jazz/examples/musicPlayer
 pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/twit # or any other directory
+mkdir -p ~/jazz-examples/musicPlayer # or any other directory
-tar -xf /tmp/jazz-example-twit-* --strip-components 1 -C ~/jazz-examples/twit
+tar -xf /tmp/jazz-example-musicPlayer-* --strip-components 1 -C ~/jazz-examples/musicPlayer
-cd ~/jazz-examples/twit
+cd ~/jazz-examples/musicPlayer
 ```
 
 This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
@@ -34,9 +35,8 @@ pnpm dev
 
 If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
 
-
 ## Configuration: sync server
 
 By default, the example app uses [Jazz Global Mesh](https://jazz.tools/mesh) (`wss://sync.jazz.tools`) - so cross-device use, invites and collaboration should just work.
 
-You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?sync=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).
+You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/music-player/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/jazz-logo.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Jazz - Music Player example</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/2_main.tsx"></script>
+    </body>
+</html>

examples/music-player/job-template.nomad

@@ -1,4 +1,4 @@
-job "twit$BRANCH_SUFFIX" {
+job "example-musicPlayer$BRANCH_SUFFIX" {
   region     = "global"
   datacenters = ["*"]
 
@@ -41,7 +41,7 @@ job "twit$BRANCH_SUFFIX" {
 
       service {
         tags = ["public"]
-        name = "twit$BRANCH_SUFFIX"
+        name = "example-pets$BRANCH_SUFFIX"
         port = "http"
         provider = "consul"
       }

examples/music-player/package.json

@@ -0,0 +1,44 @@
+{
+    "name": "jazz-example-music-player",
+    "private": true,
+    "version": "0.0.5",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "format": "prettier --write './src/**/*.{ts,tsx}'",
+        "preview": "vite preview"
+    },
+    "lint-staged": {
+        "*.{ts,tsx}": "eslint --fix",
+        "*.{js,jsx,mdx,json}": "prettier --write"
+    },
+    "dependencies": {
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.0.0",
+        "jazz-react": "workspace:0.8.2",
+        "jazz-tools": "workspace:0.8.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-router": "^6.16.0",
+        "react-router-dom": "^6.16.0",
+        "tailwind-merge": "^1.14.0",
+        "tailwindcss-animate": "^1.0.7"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.19",
+        "@types/react-dom": "^18.2.7",
+        "@typescript-eslint/eslint-plugin": "^6.2.1",
+        "@typescript-eslint/parser": "^6.2.1",
+        "@vitejs/plugin-react-swc": "^3.3.2",
+        "autoprefixer": "^10.4.14",
+        "eslint": "^8.46.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.3",
+        "postcss": "^8.4.27",
+        "tailwindcss": "^3.3.3",
+        "typescript": "^5.3.3",
+        "vite": "^5.0.10"
+    }
+}

examples/music-player/src/1_schema.ts

@@ -0,0 +1,124 @@
+import {
+    CoMap,
+    CoList,
+    BinaryCoStream,
+    co,
+    Profile,
+    Account,
+} from "jazz-tools";
+
+/** Walkthrough: Defining the data model with CoJSON
+ *
+ *  Here, we define our main data model of tasks, lists of tasks and projects
+ *  using CoJSON's collaborative map and list types, CoMap & CoList.
+ *
+ *  CoMap values and CoLists items can contain:
+ *  - arbitrary immutable JSON
+ *  - other CoValues
+ **/
+
+export class MusicTrack extends CoMap {
+    /**
+     *  Attributes are defined as class properties
+     *  and you can get the types from the `co` module
+     *  here we are defining the title and duration for our music track
+     *
+     *  Tip: try to follow the co.string defintion to discover the other available primitives!
+     */
+    title = co.string;
+    duration = co.number;
+
+    /**
+     * With `co.ref` you can define relations between your coValues.
+     *
+     * Attributes are required by default unless you mark them as optional.
+     */
+    sourceTrack = co.optional.ref(MusicTrack);
+
+    /**
+     * In Jazz you can files using BinaryCoStream.
+     *
+     * As for any other coValue the music files we put inside BinaryCoStream
+     * is available offline and end-to-end encrypted 😉
+     */
+    file = co.ref(BinaryCoStream);
+    waveform = co.ref(MusicTrackWaveform);
+}
+
+export class MusicTrackWaveform extends CoMap {
+    data = co.json<number[]>();
+}
+
+/**
+ * CoList is the collaborative version of Array
+ *
+ * They are strongly typed and accept only the type you define here
+ * as "CoList.Of" argument
+ */
+export class ListOfTracks extends CoList.Of(co.ref(MusicTrack)) {}
+
+export class Playlist extends CoMap {
+    title = co.string;
+    tracks = co.ref(ListOfTracks);
+}
+
+export class ListOfPlaylists extends CoList.Of(co.ref(Playlist)) {}
+
+/** The account root is an app-specific per-user private `CoMap`
+ *  where you can store top-level objects for that user */
+export class MusicaAccountRoot extends CoMap {
+    // The root playlist works as container for the tracks that
+    // the user has uploaded
+    rootPlaylist = co.ref(Playlist);
+    // Here we store the list of playlists that the user has created
+    // or that has been invited to
+    playlists = co.ref(ListOfPlaylists);
+    // We store the active track and playlist as coValue here
+    // so when the user reloads the page can see the last played
+    // track and playlist
+    // You can also add the position in time if you want make it possible
+    // to resume the song
+    activeTrack = co.optional.ref(MusicTrack);
+    activePlaylist = co.ref(Playlist);
+
+    exampleDataLoaded = co.optional.boolean;
+}
+
+export class MusicaAccount extends Account {
+    profile = co.ref(Profile);
+    root = co.ref(MusicaAccountRoot);
+
+    /** 
+     *  The account migration is run on account creation and on every log-in.
+     *  You can use it to set up the account root and any other initial CoValues you need.
+     */
+    async migrate(creationProps?: { name: string }) {
+        super.migrate(creationProps);
+
+        if (!this._refs.root) {
+            const ownership = { owner: this };
+
+            const tracks = ListOfTracks.create([], ownership);
+            const rootPlaylist = Playlist.create(
+                {
+                    tracks,
+                    title: "",
+                },
+                ownership,
+            );
+
+            this.root = MusicaAccountRoot.create(
+                {
+                    rootPlaylist,
+                    playlists: ListOfPlaylists.create([], ownership),
+                    activeTrack: null,
+                    activePlaylist: rootPlaylist,
+                    exampleDataLoaded: false,
+                },
+                ownership,
+            );
+        }
+    }
+}
+
+/** Walkthrough: Continue with ./2_main.tsx */

examples/music-player/src/2_main.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { createHashRouter, RouterProvider } from "react-router-dom";
+import { useMediaPlayer } from "./4_useMediaPlayer";
+import { HomePage } from "./5_HomePage";
+import { createNewPlaylist, uploadMusicTracks } from "./3_actions";
+import { PlaylistPage } from "./6_PlaylistPage";
+import { InvitePage } from "./7_InvitePage";
+import { Button } from "./basicComponents/Button";
+import { FileUploadButton } from "./basicComponents/FileUploadButton";
+import { PlayerControls } from "./components/PlayerControls";
+import "./index.css";
+
+import { MusicaAccount } from "@/1_schema";
+import { createJazzReactApp, DemoAuthBasicUI, useDemoAuth } from "jazz-react";
+import { useUploadExampleData } from "./lib/useUploadExampleData";
+
+/**
+ * Walkthrough: The top-level provider `<Jazz.Provider/>`
+ *
+ * This shows how to use the top-level provider `<Jazz.Provider/>`,
+ * which provides the rest of the app with a controlled account (used through `useAccount` later).
+ * Here we use `DemoAuth` which is great for prototyping you app without wasting time on figuring out
+ * the best way to do auth.
+ *
+ * `<Jazz.Provider/>` also runs our account migration
+ */
+const Jazz = createJazzReactApp({
+    AccountSchema: MusicaAccount
+});
+
+export const { useAccount, useCoState, useAcceptInvite } = Jazz;
+
+function Main() {
+    const mediaPlayer = useMediaPlayer();
+
+    useUploadExampleData();
+
+    /**
+     * `me` represents the current user account, which will determine
+     *  access rights to CoValues. We get it from the top-level provider `<WithJazz/>`.
+     */
+    const { me } = useAccount();
+
+    async function handleFileLoad(files: FileList) {
+        if (!me) return;
+
+        /**
+         * Follow this function definition to see how we update
+         * values in Jazz and manage files!
+         */
+        /** Walkthrough: Continue with ./3_actions.ts */
+        await uploadMusicTracks(me, files);
+    }
+
+    async function handleCreatePlaylist() {
+        if (!me) return;
+
+        const playlist = await createNewPlaylist(me);
+
+        router.navigate(`/playlist/${playlist.id}`);
+    }
+
+    const router = createHashRouter([
+        {
+            path: "/",
+            element: <HomePage mediaPlayer={mediaPlayer} />,
+        },
+        {
+            path: "/playlist/:playlistId",
+            element: <PlaylistPage mediaPlayer={mediaPlayer} />,
+        },
+        {
+            path: "/invite/*",
+            element: <InvitePage />,
+        },
+    ]);
+
+    return (
+        <>
+            <div className="flex items-center bg-gray-300">
+                <img src="jazz-logo.png" className="px-3 h-[20px]" />
+                <div className="text-nowrap">Jazz music player</div>
+                <div className="flex w-full gap-1 justify-end">
+                    <FileUploadButton onFileLoad={handleFileLoad}>
+                        Add file
+                    </FileUploadButton>
+                    <Button onClick={handleCreatePlaylist}>
+                        Create new playlist
+                    </Button>
+                </div>
+            </div>
+            <RouterProvider router={router} />
+            <PlayerControls mediaPlayer={mediaPlayer} />
+        </>
+    );
+}
+
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+    const [auth, state] = useDemoAuth();
+
+    return (
+        <>
+            <Jazz.Provider auth={auth} peer="wss://mesh.jazz.tools/?key=music-player-example-jazz@gcmp.io">
+                {children}
+            </Jazz.Provider>
+            <DemoAuthBasicUI appName="Jazz Music Player" state={state} />
+        </>
+    );
+}
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+    <React.StrictMode>
+        <JazzAndAuth>
+            <Main />
+        </JazzAndAuth>
+    </React.StrictMode>,
+);

examples/music-player/src/3_actions.ts

@@ -0,0 +1,128 @@
+import { getAudioFileData } from "@/lib/audio/getAudioFileData";
+import { BinaryCoStream, Group } from "jazz-tools";
+import {
+    ListOfTracks,
+    MusicaAccount,
+    MusicTrack,
+    MusicTrackWaveform,
+    Playlist,
+} from "./1_schema";
+
+/**
+ * Walkthrough: Actions
+ *
+ * With Jazz is very simple to update the state, you
+ * just mutate the values and we take care of triggering
+ * the updates and sync  and persist the values you change.
+ *
+ * We have grouped the complex updates here in an actions file
+ * just to keep them separated from the components.
+ *
+ * Jazz is very unopinionated in this sense and you can adopt the
+ * pattern that best fits your app.
+ */
+
+export async function uploadMusicTracks(
+    account: MusicaAccount,
+    files: Iterable<File>,
+) {
+    // The ownership object defines the user that owns the created coValues
+    // by setting the ownership with "account" we configure the coValues to be private
+    const ownership = {
+        owner: account,
+    };
+
+    for (const file of files) {
+        const data = await getAudioFileData(file);
+
+        // We transform the file blob into a BinaryCoStream
+        // making it a collaborative value that is encrypted, easy
+        // to share across devices and users and available offline!
+        const binaryCoStream = await BinaryCoStream.createFromBlob(
+            file,
+            ownership,
+        );
+
+        const musicTrack = MusicTrack.create(
+            {
+                file: binaryCoStream,
+                duration: data.duration,
+                waveform: MusicTrackWaveform.create(
+                    { data: data.waveform },
+                    ownership,
+                ),
+                title: file.name,
+            },
+            ownership,
+        );
+
+        // The newly created musicTrack can be associated to the
+        // user track list using a simple push call
+        account.root?.rootPlaylist?.tracks?.push(musicTrack);
+    }
+}
+
+export async function createNewPlaylist(account: MusicaAccount) {
+    // Since playlists are meant to be shared we associate them
+    // to a group which will contain the keys required to get
+    // access to the "owned" values
+    const playlistGroup = Group.create({ owner: account });
+
+    const ownership = { owner: playlistGroup };
+
+    const playlist = Playlist.create(
+        {
+            title: "New Playlist",
+            tracks: ListOfTracks.create([], ownership),
+        },
+        ownership,
+    );
+
+    // Again, we associate the new playlist to the
+    // user by pushing it into the playlists CoList
+    account.root?.playlists?.push(playlist);
+
+    return playlist;
+}
+
+export async function addTrackToPlaylist(
+    playlist: Playlist,
+    track: MusicTrack,
+    account: MusicaAccount | undefined,
+) {
+    if (!account) return;
+
+    /**
+     * Since musicTracks are created as private values (see uploadMusicTracks)
+     * to make them shareable as part of the playlist we are cloning them
+     * and setting the playlist group as owner of the clone
+     *
+     * In the future it will be possible to "inherit" the parent group so you
+     * won't need to clone values to have this kind of sharing granularity
+     */
+    const ownership = { owner: playlist._owner };
+    const blob = await BinaryCoStream.loadAsBlob(track._refs.file.id, account);
+    const waveform = await MusicTrackWaveform.load(
+        track._refs.waveform.id,
+        account,
+        {},
+    );
+
+    if (!blob || !waveform) return;
+
+    const trackClone = MusicTrack.create(
+        {
+            file: await BinaryCoStream.createFromBlob(blob, ownership),
+            duration: track.duration,
+            waveform: MusicTrackWaveform.create(
+                { data: waveform.data },
+                ownership,
+            ),
+            title: track.title,
+            sourceTrack: track,
+        },
+        ownership,
+    );
+
+    playlist.tracks?.push(trackClone);
+}