Release

React Native Support

.changeset/config.json

@@ -12,6 +12,7 @@
             "jazz-browser-auth-clerk",
             "jazz-react-auth-clerk",
             "jazz-react",
+            "jazz-react-native",
             "jazz-nodejs",
             "jazz-run",
             "cojson-transport-ws",

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

@@ -1,106 +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
-
-    - 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: 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/playwright.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        project: ["e2e/BinaryCoStream", "examples/pets"]
+        project: ["e2e/BinaryCoStream", "e2e/CoValues", "examples/pets"]
 
     steps:
       - uses: actions/checkout@v3

.npmrc

@@ -0,0 +1 @@
+node-linker=hoisted

.prettierrc.js

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

e2e/BinaryCoStream/CHANGELOG.md

@@ -0,0 +1,26 @@
+# @jazz-e2e/binarycostream
+
+## 0.0.84
+
+### Patch Changes
+
+-   Updated dependencies
+    -   cojson@0.8.3
+    -   jazz-react@0.8.3
+    -   jazz-tools@0.8.3
+
+## 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

@@ -5,7 +5,7 @@
     <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 Chat Example</title>
+    <title>Jazz BinaryCoStream Tests</title>
   </head>
   <body>
     <div id="root"></div>

e2e/BinaryCoStream/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jazz-e2e/binarycostream",
   "private": true,
-  "version": "0.0.81",
+  "version": "0.0.84",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -14,11 +14,11 @@
     "*.{js,jsx,mdx,json}": "prettier --write"
   },
   "dependencies": {
-    "cojson": "workspace:0.7.35-guest-auth.5",
+    "cojson": "workspace:0.8.3",
     "hash-slash": "workspace:0.2.0",
     "is-ci": "^3.0.1",
-    "jazz-react": "workspace:0.7.35-guest-auth.6",
-    "jazz-tools": "workspace:0.7.35-guest-auth.6",
+    "jazz-react": "workspace:0.8.3",
+    "jazz-tools": "workspace:0.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

e2e/CoValues/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+sync-db/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/CoValues/CHANGELOG.md

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

e2e/CoValues/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 CoValues tests</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <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.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:*",
+    "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

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": "."
+  },
+  "include": ["src"],
+}

e2e/CoValues/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    minify: false
+  }
+})

examples/chat-clerk/.eslintrc.cjs

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

@@ -1,88 +1,203 @@
 # jazz-example-chat
 
-## 0.0.80
+## 0.0.83
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.8.3
+  - jazz-react@0.8.3
+  - jazz-react-auth-clerk@0.8.3
+  - jazz-tools@0.8.3
+
+## 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
 
-- bcec3be: Implement Clerk auth method + example
 - Updated dependencies [6a147c2]
 - Updated dependencies [ad40b88]
 - Updated dependencies [23369dc]
 - Updated dependencies [c2b62a0]
-- Updated dependencies [bcec3be]
 - Updated dependencies [1a979b6]
 - Updated dependencies [bcec3be]
 - Updated dependencies [6ce2051]
   - cojson@0.8.0
   - jazz-tools@0.8.0
   - jazz-react@0.8.0
-  - jazz-react-auth-clerk@0.8.0
 
-## 0.0.80-guest-auth.6
+## 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
-  - jazz-react-auth-clerk@0.7.35-guest-auth.6
 
-## 0.0.80-guest-auth.5
+## 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.35-guest-auth.5
-  - jazz-react@0.7.35-guest-auth.5
-  - jazz-react-auth-clerk@0.7.35-guest-auth.5
-  - jazz-tools@0.7.35-guest-auth.5
+  - cojson@0.7.34-neverthrow.8
+  - jazz-react@0.7.34-neverthrow.8
+  - jazz-tools@0.7.34-neverthrow.8
 
-## 0.0.80-guest-auth.4
+## 0.0.81-neverthrow.5
 
 ### Patch Changes
 
 - Updated dependencies
-  - jazz-react@0.7.35-guest-auth.4
-  - jazz-tools@0.7.35-guest-auth.4
-  - jazz-react-auth-clerk@0.7.35-guest-auth.4
+  - cojson@0.7.34-neverthrow.7
+  - jazz-react@0.7.34-neverthrow.7
+  - jazz-tools@0.7.34-neverthrow.7
 
-## 0.0.80-guest-auth.3
+## 0.0.81-neverthrow.4
 
 ### Patch Changes
 
 - Updated dependencies
-  - jazz-react@0.7.35-guest-auth.3
-  - jazz-tools@0.7.35-guest-auth.3
-  - jazz-react-auth-clerk@0.7.33-guest-auth.3
+  - cojson@0.7.34-neverthrow.4
+  - jazz-react@0.7.34-neverthrow.4
+  - jazz-tools@0.7.34-neverthrow.4
 
-## 0.0.80-unique.2
+## 0.0.81-neverthrow.3
 
 ### Patch Changes
 
 - Updated dependencies
-  - jazz-tools@0.7.35-unique.2
-  - cojson@0.7.35-unique.2
-  - jazz-react@0.7.35-unique.2
-  - jazz-react-auth-clerk@0.7.33-unique.2
+  - cojson@0.7.34-neverthrow.3
+  - jazz-react@0.7.34-neverthrow.3
+  - jazz-tools@0.7.34-neverthrow.3
 
-## 0.0.80-new-auth.1
+## 0.0.81-neverthrow.2
+
+### Patch Changes
+
+- jazz-react@0.7.34-neverthrow.2
+
+## 0.0.81-neverthrow.1
 
 ### Patch Changes
 
 - Updated dependencies
-  - jazz-react@0.7.35-new-auth.1
-  - jazz-react-auth-clerk@0.7.33-new-auth.1
+  - cojson@0.7.34-neverthrow.1
+  - jazz-react@0.7.34-neverthrow.1
+  - jazz-tools@0.7.34-neverthrow.1
 
-## 0.0.80-new-auth.0
+## 0.0.81-neverthrow.0
 
 ### Patch Changes
 
-- Implement Clerk auth method + example
 - 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
-  - jazz-react-auth-clerk@0.7.33-new-auth.0
-  - jazz-react@0.7.35-new-auth.0
-  - jazz-tools@0.7.35-new-auth.0
+  - 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
 

examples/chat-clerk/README.md

@@ -1,19 +1,20 @@
-# Jazz Chat Example
+# Jazz Chat Example (with Clerk auth)
 
-Live version: https://example-chat.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/chat
+cd jazz/examples/chat-clerk
 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
+mkdir -p ~/jazz-examples/chat-clerk # or any other directory
+tar -xf /tmp/jazz-example-chat-* --strip-components 1 -C ~/jazz-examples/chat-clerk
+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` 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-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat-clerk",
   "private": true,
-  "version": "0.0.80",
+  "version": "0.0.83",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -21,11 +21,11 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.0",
+    "cojson": "workspace:0.8.3",
     "hash-slash": "workspace:0.2.0",
-    "jazz-react": "workspace:0.8.0",
-    "jazz-react-auth-clerk": "workspace:0.8.0",
-    "jazz-tools": "workspace:0.8.0",
+    "jazz-react": "workspace:0.8.3",
+    "jazz-react-auth-clerk": "workspace:0.8.3",
+    "jazz-tools": "workspace:0.8.3",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
@@ -49,7 +49,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.3.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.10"
   }

examples/chat-clerk/postcss.config.js

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

examples/chat-clerk/src/app.tsx

@@ -1,85 +1,30 @@
-import { CoMap, CoList, co, Group, ID } from "jazz-tools";
-import { createJazzReactApp } from "jazz-react";
-import { useJazzClerkAuth } from "jazz-react-auth-clerk";
-import { createRoot } from "react-dom/client";
+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 { StrictMode } from "react";
+import { AppContainer, TopBar } from "./ui.tsx";
 
-import {
-    ClerkProvider,
-    SignInButton,
-    useAuth,
-    useClerk,
-} from "@clerk/clerk-react";
+export function App() {
+  const { me, logOut } = useAccount();
 
-export class Message extends CoMap {
-    text = co.string;
+  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>
+  );
 }
-
-export class Chat extends CoList.Of(co.ref(Message)) {}
-
-const Jazz = createJazzReactApp();
-export const { useAccount, useCoState } = Jazz;
-
-function AuthAndJazz({ 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 />
-            )}
-        </>
-    );
-}
-
-function App() {
-    const { signOut } = useAuth();
-    const { me } = 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">
-            <div className="rounded mb-5 px-2 py-1 text-sm self-end">
-                {me?.profile?.name} ·{" "}
-                <button onClick={() => signOut()}>Log Out</button>
-            </div>
-            {useIframeHashRouter().route({
-                "/": () => createChat() as never,
-                "/chat/:id": (id) => <ChatScreen chatID={id as ID<Chat>} />,
-            })}
-        </div>
-    );
-}
-
-createRoot(document.getElementById("root")!).render(
-    <StrictMode>
-        <ClerkProvider
-            publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
-            afterSignOutUrl="/"
-        >
-            <AuthAndJazz>
-                <App />
-            </AuthAndJazz>
-        </ClerkProvider>
-    </StrictMode>
-);

examples/chat-clerk/src/chatScreen.tsx

@@ -1,42 +1,43 @@
-import { ID } from 'jazz-tools';
-import { Chat, Message, useCoState } from './app.tsx';
+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 ? <div className='w-full max-w-xl h-full flex flex-col items-stretch'>
-    {chat.length > 0
-      ? chat.map((msg) => <ChatBubble msg={msg} key={msg.id} />)
-      : <div className='m-auto text-sm'>(Empty chat)</div>}
-    <ChatInput onSubmit={(text) => {
-      chat.push(
-        Message.create({ text }, { owner: chat._owner })
-      );
-    }} />
-  </div> : <div>Loading...</div>;
+  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;
-  const align = lastEdit.by?.isMe ? 'items-end' : 'items-start';
 
-  return <div className={`${align} flex flex-col`}>
-    <div className='rounded-xl bg-stone-100 dark:bg-stone-700 dark:text-white py-2 px-4 mt-2 min-w-[5rem]'>
-      { props.msg.text }
-    </div>
-    <div className='text-xs text-neutral-500 ml-2'>
-      { 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 = '';
-    }} />;
+  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}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-	],
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{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 react from '@vitejs/plugin-react-swc'
+import { defineConfig } from "vite";
+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-rn/.gitignore

@@ -0,0 +1,38 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+ios
+android

examples/chat-rn/CHANGELOG.md

@@ -0,0 +1,9 @@
+# chat-rn
+
+## 1.0.1
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react-native@0.8.3
+    -   jazz-tools@0.8.3

examples/chat-rn/app.json

@@ -0,0 +1,46 @@
+{
+  "expo": {
+    "name": "jazz-chat-rn",
+    "scheme": "jazz-chat-rn",
+    "slug": "jazz-chat-rn",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.jazz.chatrn"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.jazz.chatrn"
+    },
+    "plugins": [
+      [
+        "expo-build-properties",
+        {
+          "ios": {
+            "newArchEnabled": true
+          },
+          "android": {
+            "newArchEnabled": true
+          }
+        }
+      ]
+    ],
+    "extra": {
+      "eas": {
+        "projectId": "e0e61872-1906-4c84-b9d8-9be77355cad0"
+      }
+    },
+    "owner": "paxx"
+  }
+}

examples/chat-rn/babel.config.js

@@ -0,0 +1,10 @@
+module.exports = function (api) {
+    api.cache(true);
+    return {
+        presets: ["babel-preset-expo"],
+        plugins: [
+            "nativewind/babel",
+            "@babel/plugin-transform-class-static-block",
+        ],
+    };
+};

examples/chat-rn/eas.json

@@ -0,0 +1,27 @@
+{
+    "cli": {
+        "version": ">= 12.5.1",
+        "appVersionSource": "remote"
+    },
+    "build": {
+        "development": {
+            "developmentClient": true,
+            "distribution": "internal"
+        },
+        "ios-simulator": {
+            "extends": "development",
+            "ios": {
+                "simulator": true
+            }
+        },
+        "preview": {
+            "distribution": "internal"
+        },
+        "production": {
+            "autoIncrement": true
+        }
+    },
+    "submit": {
+        "production": {}
+    }
+}

examples/chat-rn/index.js

@@ -0,0 +1,5 @@
+import "./polyfills";
+import { registerRootComponent } from "expo";
+import App from "./src/App";
+
+registerRootComponent(App);

examples/chat-rn/metro.config.js

@@ -0,0 +1,29 @@
+// Learn more https://docs.expo.dev/guides/monorepos
+const { getDefaultConfig } = require("expo/metro-config");
+const { FileStore } = require("metro-cache");
+const path = require("path");
+
+const projectRoot = __dirname;
+const workspaceRoot = path.resolve(projectRoot, "../..");
+
+const config = getDefaultConfig(projectRoot);
+
+// Since we are using pnpm, we have to setup the monorepo manually for Metro
+// #1 - Watch all files in the monorepo
+config.watchFolders = [workspaceRoot];
+// #2 - Try resolving with project modules first, then workspace modules
+config.resolver.nodeModulesPaths = [
+    path.resolve(projectRoot, "node_modules"),
+    path.resolve(workspaceRoot, "node_modules"),
+];
+config.resolver.sourceExts = ["js", "json", "ts", "tsx"];
+config.resolver.unstable_enablePackageExports = true;
+
+// Use turborepo to restore the cache when possible
+config.cacheStores = [
+    new FileStore({
+        root: path.join(projectRoot, "node_modules", ".cache", "metro"),
+    }),
+];
+
+module.exports = config;

examples/chat-rn/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

examples/chat-rn/package.json

@@ -0,0 +1,49 @@
+{
+    "name": "chat-rn",
+    "version": "1.0.1",
+    "main": "index.js",
+    "scripts": {
+        "start": "expo start",
+        "android": "expo run:android",
+        "ios": "expo run:ios",
+        "web": "expo start --web"
+    },
+    "dependencies": {
+        "@azure/core-asynciterator-polyfill": "^1.0.2",
+        "@react-native-community/netinfo": "^11.3.1",
+        "@react-navigation/native": "^6.1.18",
+        "@react-navigation/native-stack": "^6.11.0",
+        "base-64": "^1.0.0",
+        "clsx": "^2.0.0",
+        "expo": "~51.0.36",
+        "expo-build-properties": "~0.12.5",
+        "expo-clipboard": "~6.0.3",
+        "expo-constants": "~16.0.2",
+        "expo-crypto": "~13.0.2",
+        "expo-dev-client": "~4.0.27",
+        "expo-linking": "~6.3.1",
+        "expo-status-bar": "~1.12.1",
+        "jazz-react-native": "workspace:*",
+        "jazz-tools": "workspace:*",
+        "nativewind": "^2.0.11",
+        "react": "^18.2.0",
+        "react-native": "~0.74.5",
+        "react-native-fetch-api": "^3.0.0",
+        "react-native-get-random-values": "^1.11.0",
+        "react-native-mmkv": "3.0.1",
+        "react-native-polyfill-globals": "^3.1.0",
+        "react-native-safe-area-context": "4.10.5",
+        "react-native-screens": "3.31.1",
+        "react-native-url-polyfill": "^2.0.0",
+        "text-encoding": "^0.7.0",
+        "web-streams-polyfill": "^3.2.1"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.20.0",
+        "@babel/plugin-transform-class-static-block": "^7.24.7",
+        "@types/react": "^18.2.19",
+        "tailwindcss": "3.3.2",
+        "typescript": "^5.3.3"
+    },
+    "private": true
+}

examples/chat-rn/polyfills.js

@@ -0,0 +1,6 @@
+import "react-native-polyfill-globals/auto";
+import "@azure/core-asynciterator-polyfill";
+import { ReadableStream } from "web-streams-polyfill/ponyfill/es6";
+import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";
+
+polyfillGlobal("ReadableStream", () => ReadableStream);

examples/chat-rn/src/App.tsx

@@ -0,0 +1,78 @@
+import React, { StrictMode, useEffect, useState } from "react";
+import {
+    NavigationContainer,
+    useNavigationContainerRef,
+} from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import * as Linking from "expo-linking";
+import HandleInviteScreen from "./invite";
+
+import { useDemoAuth, DemoAuthBasicUI } from "jazz-react-native";
+import ChatScreen from "./chat";
+import { Jazz } from "./jazz";
+
+const Stack = createNativeStackNavigator();
+
+const prefix = Linking.createURL("/");
+
+const linking = {
+    prefixes: [prefix],
+    config: {
+        screens: {
+            HandleInviteScreen: {
+                path: "router/invite/:valueHint?/:valueID/:inviteSecret",
+            },
+        },
+    },
+};
+
+function App() {
+    const [auth, state] = useDemoAuth();
+    const [initialRoute, setInitialRoute] = useState<
+        "ChatScreen" | "HandleInviteScreen"
+    >("ChatScreen");
+    const navigationRef = useNavigationContainerRef();
+
+    useEffect(() => {
+        Linking.getInitialURL().then((url) => {
+            if (url) {
+                if (url && url.includes("invite")) {
+                    setInitialRoute("HandleInviteScreen");
+                }
+            }
+        });
+    }, []);
+
+    if (!auth) {
+        return null;
+    }
+
+    return (
+        <StrictMode>
+            <Jazz.Provider
+                auth={auth}
+                peer="wss://mesh.jazz.tools/?key=chat-rn-example-jazz@gcmp.io"
+                storage={undefined}
+            >
+                <NavigationContainer linking={linking} ref={navigationRef}>
+                    <Stack.Navigator initialRouteName={initialRoute}>
+                        <Stack.Screen
+                            options={{ title: "Jazz Chat" }}
+                            name="ChatScreen"
+                            component={ChatScreen}
+                        />
+                        <Stack.Screen
+                            name="HandleInviteScreen"
+                            component={HandleInviteScreen}
+                        />
+                    </Stack.Navigator>
+                </NavigationContainer>
+            </Jazz.Provider>
+            {state.state !== "signedIn" ? (
+                <DemoAuthBasicUI appName="Jazz Chat" state={state} />
+            ) : null}
+        </StrictMode>
+    );
+}
+
+export default App;

examples/chat-rn/src/chat.tsx

@@ -0,0 +1,208 @@
+import { useEffect, useState } from "react";
+import React, {
+    Button,
+    FlatList,
+    KeyboardAvoidingView,
+    SafeAreaView,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    View,
+    Alert,
+} from "react-native";
+import { Group, ID } from "jazz-tools";
+import clsx from "clsx";
+import * as Clipboard from "expo-clipboard";
+
+import { Chat, Message } from "./schema";
+import { useAccount, useCoState } from "./jazz";
+
+export default function ChatScreen({ navigation }: { navigation: any }) {
+    const { me, logOut } = useAccount();
+    const [chat, setChat] = useState<Chat>();
+    const [message, setMessage] = useState("");
+    const loadedChat = useCoState(Chat, chat?.id, [{}]);
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        navigation.setOptions({
+            headerRight: () => <Button onPress={logOut} title="Logout" />,
+            headerLeft: () =>
+                chat ? (
+                    <Button
+                        onPress={() => {
+                            if (chat?.id) {
+                                Clipboard.setStringAsync(
+                                    `https://chat.jazz.tools/#/chat/${chat.id}`,
+                                );
+                                Alert.alert(
+                                    "Copied to clipboard",
+                                    `Chat ID: ${chat.id}`,
+                                );
+                            }
+                        }}
+                        title="Share"
+                    />
+                ) : null,
+        });
+    }, [navigation, chat]);
+
+    const createChat = () => {
+        const group = Group.create({ owner: me });
+        group.addMember("everyone", "writer");
+        const chat = Chat.create([], { owner: group });
+        setChat(chat);
+    };
+
+    const loadChat = async (chatId: ID<Chat>) => {
+        try {
+            const chat = await Chat.load(chatId, me, []);
+            setChat(chat);
+        } catch (error) {
+            console.log("Error loading chat", error);
+            Alert.alert("Error", `Error loading chat: ${error}`);
+        }
+    };
+
+    const joinChat = () => {
+        Alert.prompt(
+            "Join Chat",
+            "Enter the Chat ID (example: co_zBGEHYvRfGuT2YSBraY3njGjnde)",
+            [
+                {
+                    text: "Cancel",
+                    style: "cancel",
+                },
+                {
+                    text: "Join",
+                    onPress: (chatId) => {
+                        if (chatId) {
+                            loadChat(chatId as ID<Chat>);
+                        } else {
+                            Alert.alert("Error", "Chat ID cannot be empty.");
+                        }
+                    },
+                },
+            ],
+            "plain-text",
+        );
+    };
+
+    const sendMessage = () => {
+        if (!chat) return;
+        if (message.trim()) {
+            chat.push(
+                Message.create({ text: message }, { owner: chat._owner }),
+            );
+            setMessage("");
+        }
+    };
+
+    const renderMessageItem = ({ item }: { item: Message }) => {
+        const isMe = item._edits.text.by?.isMe;
+        return (
+            <View
+                className={clsx(
+                    `rounded-lg p-1 px-1.5 max-w-[80%] `,
+
+                    isMe
+                        ? `bg-gray-200 self-end text-right`
+                        : `bg-gray-300 self-start `,
+                )}
+            >
+                {!isMe ? (
+                    <Text
+                        className={clsx(
+                            `text-xs text-gray-500`,
+                            isMe ? "text-right" : "text-left",
+                        )}
+                    >
+                        {item._edits.text.by?.profile?.name}
+                    </Text>
+                ) : null}
+                <View
+                    className={clsx(
+                        "flex relative items-end justify-between",
+                        isMe ? "flex-row" : "flex-row",
+                    )}
+                >
+                    <Text className={clsx(`text-black text-md max-w-[85%]`)}>
+                        {item.text}
+                    </Text>
+                    <Text
+                        className={clsx(
+                            "text-[10px] text-gray-500 text-right ml-2",
+                            !isMe ? "mt-2" : "mt-1",
+                        )}
+                    >
+                        {item._edits.text.madeAt.getHours()}:
+                        {item._edits.text.madeAt.getMinutes()}
+                    </Text>
+                </View>
+            </View>
+        );
+    };
+
+    return (
+        <View className="flex flex-col h-full">
+            {!chat ? (
+                <View className="flex flex-col h-full items-center justify-center">
+                    <TouchableOpacity
+                        onPress={createChat}
+                        className="bg-blue-500 p-4 rounded-md"
+                    >
+                        <Text className="text-white font-semibold">
+                            Start new chat
+                        </Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                        onPress={joinChat}
+                        className="bg-green-500 p-4 rounded-md mt-4"
+                    >
+                        <Text className="text-white font-semibold">
+                            Join chat
+                        </Text>
+                    </TouchableOpacity>
+                </View>
+            ) : (
+                <>
+                    <FlatList
+                        contentContainerStyle={{
+                            flexGrow: 1,
+                            flex: 1,
+                            gap: 6,
+                            padding: 8,
+                        }}
+                        className="flex"
+                        data={loadedChat}
+                        keyExtractor={(item) => item.id}
+                        renderItem={renderMessageItem}
+                    />
+
+                    <KeyboardAvoidingView
+                        keyboardVerticalOffset={110}
+                        behavior="padding"
+                        className="p-3 bg-white border-t border-gray-300"
+                    >
+                        <SafeAreaView className="flex flex-row items-center gap-2">
+                            <TextInput
+                                className="rounded-full h-8 py-0 px-2  border border-gray-200 block flex-1"
+                                value={message}
+                                onChangeText={setMessage}
+                                placeholder="Type a message..."
+                                textAlignVertical="center"
+                                onSubmitEditing={sendMessage}
+                            />
+                            <TouchableOpacity
+                                onPress={sendMessage}
+                                className="bg-gray-300 text-white rounded-full h-8 w-8 items-center justify-center"
+                            >
+                                <Text>↑</Text>
+                            </TouchableOpacity>
+                        </SafeAreaView>
+                    </KeyboardAvoidingView>
+                </>
+            )}
+        </View>
+    );
+}

examples/chat-rn/src/invite.tsx

@@ -0,0 +1,24 @@
+import React, { Text } from "react-native";
+import { useAcceptInvite } from "./jazz";
+import { Chat } from "./schema";
+
+type ChatScreenParams = {
+    valueHint?: string;
+    valueID?: string;
+    inviteSecret?: string;
+};
+
+export default function HandleInviteScreen({
+    navigation,
+}: {
+    navigation: any;
+}) {
+    useAcceptInvite({
+        invitedObjectSchema: Chat,
+        onAccept: async (chatId) => {
+            navigation.navigate("ChatScreen", { chatId });
+        },
+    });
+
+    return <Text>Accepting invite...</Text>;
+}

examples/chat-rn/src/jazz.tsx

@@ -0,0 +1,8 @@
+import { createJazzRNApp } from "jazz-react-native";
+import { MMKVStorage } from "./mmkv-storage";
+import { Account } from "jazz-tools";
+
+const nativeStorage = new MMKVStorage();
+
+export const Jazz = createJazzRNApp({ nativeStorage });
+export const { useAccount, useCoState, useAcceptInvite } = Jazz;

examples/chat-rn/src/mmkv-storage.ts

@@ -0,0 +1,25 @@
+import { MMKV } from "react-native-mmkv";
+import type { NativeStorage } from "jazz-react-native";
+
+const storage = new MMKV();
+
+export class MMKVStorage implements NativeStorage {
+    get(key: string): Promise<string | undefined> {
+        return Promise.resolve(storage.getString(key));
+    }
+
+    set(key: string, value: string): Promise<void> {
+        storage.set(key, value);
+        return Promise.resolve();
+    }
+
+    delete(key: string): Promise<void> {
+        storage.delete(key);
+        return Promise.resolve();
+    }
+
+    clearAll(): Promise<void> {
+        storage.clearAll();
+        return Promise.resolve();
+    }
+}

examples/chat-rn/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-rn/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        "./app/**/*.{js,jsx,ts,tsx}",
+        "./components/**/*.{js,jsx,ts,tsx}",
+        "./src/**/*.{js,jsx,ts,tsx}",
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};

examples/chat-rn/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "moduleResolution": "bundler"
+  },
+  "exclude": [
+    "src/tests"
+  ]
+}

examples/chat/.eslintrc.cjs

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

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,30 @@
 # jazz-example-chat
 
+## 0.0.85
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.8.3
+  - jazz-react@0.8.3
+  - jazz-tools@0.8.3
+
+## 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

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.82",
+  "version": "0.0.85",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -20,10 +20,10 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.0",
+    "cojson": "workspace:0.8.3",
     "hash-slash": "workspace:0.2.0",
-    "jazz-react": "workspace:0.8.0",
-    "jazz-tools": "workspace:0.8.0",
+    "jazz-react": "workspace:0.8.3",
+    "jazz-tools": "workspace:0.8.3",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
@@ -47,7 +47,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.3.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,65 +1,30 @@
-import { CoMap, CoList, co, Group, ID } from "jazz-tools";
-import { createJazzReactApp, DemoAuthBasicUI, useDemoAuth } from "jazz-react";
-import { createRoot } from "react-dom/client";
+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 { StrictMode } from "react";
+import { AppContainer, TopBar } from "./ui.tsx";
 
-export class Message extends CoMap {
-    text = co.string;
+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>
+        <p>{me?.profile?.name}</p> · <button onClick={logOut}>Log out</button>
+      </TopBar>
+      {useIframeHashRouter().route({
+        "/": () => createChat() as never,
+        "/chat/:id": id => <ChatScreen chatID={id as ID<Chat>} />,
+      })}
+    </AppContainer>
+  );
 }
-
-export class Chat extends CoList.Of(co.ref(Message)) {}
-
-const Jazz = createJazzReactApp();
-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">
-            <div className="rounded mb-5 px-2 py-1 text-sm self-end">
-                {me?.profile?.name} ·{" "}
-                <button onClick={logOut}>Log Out</button>
-            </div>
-            {useIframeHashRouter().route({
-                "/": () => createChat() as never,
-                "/chat/:id": (id) => <ChatScreen chatID={id as ID<Chat>} />,
-            })}
-        </div>
-    );
-}
-
-function AuthAndJazz({ children }: { children: React.ReactNode }) {
-    const [auth, state] = useDemoAuth();
-
-    return (
-        <Jazz.Provider
-            auth={auth}
-            peer="wss://mesh.jazz.tools/?key=chat-example-jazz@gcmp.io"
-        >
-            {state.state === "signedIn" ? (
-                children
-            ) : (
-                <DemoAuthBasicUI appName="Jazz Chat" state={state} />
-            )}
-        </Jazz.Provider>
-    );
-}
-
-createRoot(document.getElementById("root")!).render(
-    <StrictMode>
-        <AuthAndJazz>
-            <App />
-        </AuthAndJazz>
-    </StrictMode>
-);

examples/chat/src/chatScreen.tsx

@@ -1,42 +1,45 @@
-import { ID } from 'jazz-tools';
-import { Chat, Message, useCoState } from './app.tsx';
+import { ID } from "jazz-tools";
+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'>
-    {chat.length > 0
-      ? chat.map((msg) => <ChatBubble msg={msg} key={msg.id} />)
-      : <div className='m-auto text-sm'>(Empty chat)</div>}
-    <ChatInput onSubmit={(text) => {
-      chat.push(
-        Message.create({ text }, { owner: chat._owner })
-      );
-    }} />
-  </div> : <div>Loading...</div>;
+  return chat ? (
+    <>
+      <ChatBody>
+        {chat.length > 0 ? (
+          chat.map(msg => <ChatBubble msg={msg} key={msg.id} />)
+        ) : (
+          <EmptyChatMessage />
+        )}
+      </ChatBody>
+      <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`}>
-    <div className='rounded-xl bg-stone-100 dark:bg-stone-700 dark:text-white py-2 px-4 mt-2 min-w-[5rem]'>
-      { props.msg.text }
-    </div>
-    <div className='text-xs text-neutral-500 ml-2'>
-      { 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 = '';
-    }} />;
+  return (
+    <BubbleContainer fromMe={lastEdit.by?.isMe}>
+      <BubbleBody>{props.msg.text}</BubbleBody>
+      <BubbleInfo by={lastEdit.by?.profile?.name} madeAt={lastEdit.madeAt} />
+    </BubbleContainer>
+  );
 }

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}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-	],
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{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 react from '@vitejs/plugin-react-swc'
+import { defineConfig } from "vite";
+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/CHANGELOG.md

@@ -1,243 +1,251 @@
 # jazz-example-inspector
 
-## 0.0.60
+## 0.0.61
 
 ### Patch Changes
 
-- Updated dependencies [6a147c2]
-- Updated dependencies [ad40b88]
-  - cojson@0.8.0
-  - cojson-transport-ws@0.8.0
+-   Updated dependencies
+    -   cojson@0.8.3
+    -   cojson-transport-ws@0.8.3
 
 ## 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
+-   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
 
 ### Patch Changes
 
-- Updated dependencies [5d91f9f]
-- Updated dependencies [5094e6d]
-- Updated dependencies [b09589b]
-- Updated dependencies [2c3a40c]
-- Updated dependencies [406ab9b]
-- Updated dependencies [4e16575]
-- Updated dependencies [ea882ab]
-  - cojson@0.7.34
-  - cojson-transport-ws@0.7.34
+-   Updated dependencies [5d91f9f]
+-   Updated dependencies [5094e6d]
+-   Updated dependencies [b09589b]
+-   Updated dependencies [2c3a40c]
+-   Updated dependencies [406ab9b]
+-   Updated dependencies [4e16575]
+-   Updated dependencies [ea882ab]
+    -   cojson@0.7.34
+    -   cojson-transport-ws@0.7.34
 
 ## 0.0.59-neverthrow.6
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.34-neverthrow.8
-  - cojson-transport-ws@0.7.34-neverthrow.8
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.8
+    -   cojson-transport-ws@0.7.34-neverthrow.8
 
 ## 0.0.59-neverthrow.5
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.34-neverthrow.7
-  - cojson-transport-ws@0.7.34-neverthrow.7
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.7
+    -   cojson-transport-ws@0.7.34-neverthrow.7
 
 ## 0.0.59-neverthrow.4
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.34-neverthrow.4
-  - cojson-transport-ws@0.7.34-neverthrow.4
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.4
+    -   cojson-transport-ws@0.7.34-neverthrow.4
 
 ## 0.0.59-neverthrow.3
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.34-neverthrow.3
-  - cojson-transport-ws@0.7.34-neverthrow.3
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.3
+    -   cojson-transport-ws@0.7.34-neverthrow.3
 
 ## 0.0.59-neverthrow.2
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson-transport-ws@0.7.34-neverthrow.2
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.34-neverthrow.2
 
 ## 0.0.59-neverthrow.1
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.34-neverthrow.1
-  - cojson-transport-ws@0.7.34-neverthrow.1
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.1
+    -   cojson-transport-ws@0.7.34-neverthrow.1
 
 ## 0.0.59-neverthrow.0
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.34-neverthrow.0
-  - cojson-transport-ws@0.7.34-neverthrow.0
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.0
+    -   cojson-transport-ws@0.7.34-neverthrow.0
 
 ## 0.0.58
 
 ### Patch Changes
 
-- Updated dependencies [fdde8db]
-- Updated dependencies [b297c93]
-- Updated dependencies [07fe2b9]
-- Updated dependencies [3bf5127]
-- Updated dependencies [a8b74ff]
-- Updated dependencies [db53161]
-  - cojson-transport-ws@0.7.33
-  - cojson@0.7.33
+-   Updated dependencies [fdde8db]
+-   Updated dependencies [b297c93]
+-   Updated dependencies [07fe2b9]
+-   Updated dependencies [3bf5127]
+-   Updated dependencies [a8b74ff]
+-   Updated dependencies [db53161]
+    -   cojson-transport-ws@0.7.33
+    -   cojson@0.7.33
 
 ## 0.0.58-hotfixes.5
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.33-hotfixes.5
-  - cojson-transport-ws@0.7.33-hotfixes.5
+-   Updated dependencies
+    -   cojson@0.7.33-hotfixes.5
+    -   cojson-transport-ws@0.7.33-hotfixes.5
 
 ## 0.0.58-hotfixes.4
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.33-hotfixes.4
-  - cojson-transport-ws@0.7.33-hotfixes.4
+-   Updated dependencies
+    -   cojson@0.7.33-hotfixes.4
+    -   cojson-transport-ws@0.7.33-hotfixes.4
 
 ## 0.0.58-hotfixes.3
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson-transport-ws@0.7.33-hotfixes.3
-  - cojson@0.7.33-hotfixes.3
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.33-hotfixes.3
+    -   cojson@0.7.33-hotfixes.3
 
 ## 0.0.58-hotfixes.2
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson-transport-ws@0.7.33-hotfixes.2
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.33-hotfixes.2
 
 ## 0.0.58-hotfixes.1
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson-transport-ws@0.7.33-hotfixes.1
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.33-hotfixes.1
 
 ## 0.0.58-hotfixes.0
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.33-hotfixes.0
-  - cojson-transport-ws@0.7.33-hotfixes.0
+-   Updated dependencies
+    -   cojson@0.7.33-hotfixes.0
+    -   cojson-transport-ws@0.7.33-hotfixes.0
 
 ## 0.0.57
 
 ### Patch Changes
 
-- Updated dependencies
-- Updated dependencies
-  - cojson-transport-ws@0.7.31
-  - cojson@0.7.31
+-   Updated dependencies
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.31
+    -   cojson@0.7.31
 
 ## 0.0.56
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson-transport-ws@0.7.30
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.30
 
 ## 0.0.55
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.29
-  - cojson-transport-ws@0.7.29
+-   Updated dependencies
+    -   cojson@0.7.29
+    -   cojson-transport-ws@0.7.29
 
 ## 0.0.54
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.28
-  - cojson-transport-ws@0.7.28
+-   Updated dependencies
+    -   cojson@0.7.28
+    -   cojson-transport-ws@0.7.28
 
 ## 0.0.53
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson-transport-ws@0.7.27
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.27
 
 ## 0.0.52
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.26
-  - cojson-transport-ws@0.7.26
+-   Updated dependencies
+    -   cojson@0.7.26
+    -   cojson-transport-ws@0.7.26
 
 ## 0.0.51
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.23
-  - cojson-transport-ws@0.7.23
+-   Updated dependencies
+    -   cojson@0.7.23
+    -   cojson-transport-ws@0.7.23
 
 ## 0.0.50
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson-transport-ws@0.7.22
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.22
 
 ## 0.0.49
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.18
-  - cojson-transport-ws@0.7.18
+-   Updated dependencies
+    -   cojson@0.7.18
+    -   cojson-transport-ws@0.7.18
 
 ## 0.0.48
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.7.17
-  - cojson-transport-ws@0.7.17
+-   Updated dependencies
+    -   cojson@0.7.17
+    -   cojson-transport-ws@0.7.17
 
 ## 0.0.47
 
 ### Patch Changes
 
-- Updated dependencies
-  - cojson@0.6.7
-  - jazz-react@0.5.5
-  - jazz-react-auth-local@0.4.18
+-   Updated dependencies
+    -   cojson@0.6.7
+    -   jazz-react@0.5.5
+    -   jazz-react-auth-local@0.4.18
 
 ## 0.0.46
 
 ### Patch Changes
 
-- Updated dependencies
-  - jazz-react@0.5.0
-  - jazz-react-auth-local@0.4.16
+-   Updated dependencies
+    -   jazz-react@0.5.0
+    -   jazz-react-auth-local@0.4.16

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector",
   "private": true,
-  "version": "0.0.60",
+  "version": "0.0.61",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -15,8 +15,8 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.0",
-    "cojson-transport-ws": "workspace:0.8.0",
+    "cojson": "workspace:0.8.3",
+    "cojson-transport-ws": "workspace:0.8.3",
     "hash-slash": "workspace:0.2.0",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
@@ -41,7 +41,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.3.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.10"
   }

examples/inspector/src/viewer/co-stream-view.tsx

@@ -5,16 +5,16 @@ import {
     RawCoStream,
     RawCoValue,
 } from "cojson";
-import { JsonObject, JsonValue } from "cojson/src/jsonValue";
+import { JsonObject, JsonValue } from "cojson/src/jsonValue.ts";
 import { PageInfo } from "./types";
-import { base64URLtoBytes } from "cojson/src/base64url";
+import { base64URLtoBytes } from "cojson/src/base64url.ts";
 import { useEffect, useState } from "react";
 import { ArrowDownToLine } from "lucide-react";
 import {
     BinaryStreamItem,
     BinaryStreamStart,
     CoStreamItem,
-} from "cojson/src/coValues/coStream";
+} from "cojson/src/coValues/coStream.ts";
 import { AccountOrGroupPreview } from "./value-renderer";
 
 // typeguard for BinaryStreamStart

examples/inspector/src/viewer/grid-view.tsx

@@ -1,5 +1,5 @@
 import { CoID, LocalNode, RawCoValue } from "cojson";
-import { JsonObject } from "cojson/src/jsonValue";
+import { JsonObject } from "cojson/src/jsonValue.ts";
 import { CoMapPreview, ValueRenderer } from "./value-renderer";
 import clsx from "clsx";
 import { PageInfo, isCoId } from "./types";

examples/inspector/src/viewer/table-viewer.tsx

@@ -1,5 +1,5 @@
 import { CoID, LocalNode, RawCoValue } from "cojson";
-import { JsonObject } from "cojson/src/jsonValue";
+import { JsonObject } from "cojson/src/jsonValue.ts";
 import { PageInfo } from "./types";
 import { useMemo, useState } from "react";
 import { ValueRenderer } from "./value-renderer";

examples/music-player/CHANGELOG.md

@@ -1,5 +1,28 @@
 # jazz-example-musicplayer
 
+## 0.0.6
+
+### Patch Changes
+
+-   jazz-react@0.8.3
+-   jazz-tools@0.8.3
+
+## 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

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
     "name": "jazz-example-music-player",
     "private": true,
-    "version": "0.0.3",
+    "version": "0.0.6",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -17,8 +17,8 @@
     "dependencies": {
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
-        "jazz-react": "workspace:0.8.0",
-        "jazz-tools": "workspace:0.8.0",
+        "jazz-react": "workspace:0.8.3",
+        "jazz-tools": "workspace:0.8.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router": "^6.16.0",
@@ -37,7 +37,7 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.3",
         "postcss": "^8.4.27",
-        "tailwindcss": "^3.3.3",
+        "tailwindcss": "3.3.2",
         "typescript": "^5.3.3",
         "vite": "^5.0.10"
     }

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { createHashRouter, RouterProvider } from "react-router-dom";
@@ -25,8 +26,9 @@ import { useUploadExampleData } from "./lib/useUploadExampleData";
  *
  * `<Jazz.Provider/>` also runs our account migration
  */
+
 const Jazz = createJazzReactApp({
-    AccountSchema: MusicaAccount
+    AccountSchema: MusicaAccount,
 });
 
 export const { useAccount, useCoState, useAcceptInvite } = Jazz;
@@ -96,20 +98,26 @@ function Main() {
     );
 }
 
-function AuthAndJazz({ children }: { children: React.ReactNode }) {
+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">
-            {state.state === "signedIn" ? children : <DemoAuthBasicUI appName="Jazz Music Player" state={state} />}
-        </Jazz.Provider>
+        <>
+            <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>
-        <AuthAndJazz>
+        <JazzAndAuth>
             <Main />
-        </AuthAndJazz>
+        </JazzAndAuth>
     </React.StrictMode>,
 );