sep2 · johannes-lindgren · Jul 20, 2024 · Jan 23, 2025 · Jan 23, 2025 · Jan 23, 2025
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -30,7 +30,6 @@ jobs:
             - name: Build
               if: always()
               run: yarn build
-#        TODO test build output: https://github.com/sep2/immer-yjs/issues/18
-#      - name: Test Build Output
-#        if: always()
-#        run: yarn workspace test-app test
+            - name: Test Build Output
+              if: always()
+              run: yarn workspace immer-yjs-react-example build
diff --git a/examples/immer-yjs-react/.gitignore b/examples/immer-yjs-react/.gitignore
@@ -0,0 +1,24 @@
+# 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?
diff --git a/examples/immer-yjs-react/README.md b/examples/immer-yjs-react/README.md
@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+    languageOptions: {
+        // other options...
+        parserOptions: {
+            project: ['./tsconfig.node.json', './tsconfig.app.json'],
+            tsconfigRootDir: import.meta.dirname,
+        },
+    },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+    // Set the react version
+    settings: { react: { version: '18.3' } },
+    plugins: {
+        // Add the react plugin
+        react,
+    },
+    rules: {
+        // other rules...
+        // Enable its recommended rules
+        ...react.configs.recommended.rules,
+        ...react.configs['jsx-runtime'].rules,
+    },
+})
+```
diff --git a/examples/immer-yjs-react/eslint.config.js b/examples/immer-yjs-react/eslint.config.js
@@ -0,0 +1,25 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+    { ignores: ['dist'] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ['**/*.{ts,tsx}'],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+        plugins: {
+            'react-hooks': reactHooks,
+            'react-refresh': reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+        },
+    }
+)
diff --git a/examples/immer-yjs-react/index.html b/examples/immer-yjs-react/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite + React + TS</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>
diff --git a/examples/immer-yjs-react/package.json b/examples/immer-yjs-react/package.json
@@ -0,0 +1,35 @@
+{
+    "name": "immer-yjs-react-example",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc -b && vite build",
+        "lint": "eslint .",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "immer": "^10.1.1",
+        "immer-yjs": "workspace:*",
+        "pure-parse": "^0.0.0-beta.7",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-scan": "^0.1.0",
+        "y-webrtc": "^10.3.0",
+        "yjs": "^13.6.23"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.17.0",
+        "@types/react": "^18.3.18",
+        "@types/react-dom": "^18.3.5",
+        "@vitejs/plugin-react": "^4.3.4",
+        "eslint": "^9.17.0",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-react-refresh": "^0.4.16",
+        "globals": "^15.14.0",
+        "typescript": "^5.7.3",
+        "typescript-eslint": "^8.18.2",
+        "vite": "^6.0.5"
+    }
+}
diff --git a/examples/immer-yjs-react/src/App.css b/examples/immer-yjs-react/src/App.css
@@ -0,0 +1,21 @@
+#root {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.stack {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: stretch;
+    gap: 10px;
+}
+
+.row-stack
diff --git a/examples/immer-yjs-react/src/App.tsx b/examples/immer-yjs-react/src/App.tsx
@@ -0,0 +1,26 @@
+import { DemoApp } from './DemoApp'
+import { useScan } from 'react-scan'
+import './App.css'
+import { DemoApp2 } from './DemoApp2'
+
+export const App = () => {
+    useScan()
+
+    return (
+        <div className="stack">
+            <h2>immer-yjs React Example</h2>
+            <div className="stack">
+                <h3>State from context</h3>
+                <DemoApp />
+            </div>
+            <hr />
+
+            <h2>With Provider</h2>
+            <p>This example uses WebrtcProvider</p>
+            <div className="stack">
+                <h3>State from context</h3>
+                <DemoApp2 />
+            </div>
+        </div>
+    )
+}
diff --git a/examples/immer-yjs-react/src/AppState.ts b/examples/immer-yjs-react/src/AppState.ts
@@ -0,0 +1,22 @@
+import { isNumber, isString, object, objectGuard, parseNumber, parseString, withDefault } from 'pure-parse'
+
+export type AppState = {
+    count: number
+    text: string
+}
+
+export const parseAppState = withDefault(
+    object<AppState>({
+        count: parseNumber,
+        text: parseString,
+    }),
+    {
+        count: 0,
+        text: '',
+    }
+)
+
+export const isAppState = objectGuard<AppState>({
+    count: isNumber,
+    text: isString,
+})
diff --git a/examples/immer-yjs-react/src/DemoApp.tsx b/examples/immer-yjs-react/src/DemoApp.tsx
@@ -0,0 +1,110 @@
+import { bind, Binder, Snapshot } from 'immer-yjs'
+import * as Y from 'yjs'
+import { useSelection } from './immer-yjs-react'
+import { createContext, FunctionComponent, memo, useContext } from 'react'
+import { AppState, isAppState, parseAppState } from './AppState'
+import { JsonView } from './JsonView'
+
+/**
+ * Example with context
+ */
+
+const getMap = (doc: Y.Doc, key: string) => doc.getMap(key)
+
+export type BinderContext =
+    | {
+          tag: 'initialized'
+          binder: Binder<Snapshot>
+      }
+    | {
+          tag: 'loading'
+      }
+    | {
+          tag: 'failure'
+      }
+    | {
+          tag: 'contextMissing'
+      }
+
+const BinderContext = createContext<BinderContext>({
+    tag: 'initialized',
+    binder: bind(getMap(new Y.Doc(), 'state')),
+})
+
+export const DemoApp = () => {
+    const { binder } = useContext(BinderContext)
+    const isInitialized = useSelection(binder, (state) => isAppState(state))
+
+    return (
+        <div className="stack">
+            {isInitialized ? <InitializedView /> : <UninitializedView />}
+            <JsonState />
+        </div>
+    )
+}
+
+const UninitializedView: FunctionComponent = memo(() => {
+    const { binder } = useContext(BinderContext)
+
+    const handleInitialize = () =>
+        binder.update(
+            () =>
+                ({
+                    count: 0,
+                    text: '',
+                }) satisfies AppState
+        )
+
+    return <button onClick={handleInitialize}>Initialize</button>
+})
+
+const InitializedView: FunctionComponent = memo(() => {
+    return (
+        <div className="stack">
+            <CounterView />
+            <TextView />
+        </div>
+    )
+})
+
+const CounterView: FunctionComponent = memo(() => {
+    const { binder } = useContext(BinderContext)
+    const count = useSelection(binder, (state) => parseAppState(state).value.count)
+    const increment = () => {
+        binder.update((state) => {
+            if (!isAppState(state)) {
+                // If for—whatever reason—the state does not conform to the expected schema, we cannot update
+                return
+            }
+            state.count++
+        })
+    }
+    return (
+        <div>
+            <button onClick={increment}>Increment</button>
+            <code>{count}</code>
+        </div>
+    )
+})
+
+const TextView: FunctionComponent = memo(() => {
+    const { binder } = useContext(BinderContext)
+    const text = useSelection(binder, (state) => parseAppState(state).value.text)
+    const updateText = (text: string) => {
+        binder.update((state) => {
+            if (!isAppState(state)) {
+                // If for—whatever reason—the state does not conform to the expected schema, we cannot update
+                return
+            }
+            state.text = text
+        })
+    }
+    return <input type="text" value={text} onChange={(e) => updateText(e.target.value)} />
+})
+
+export const JsonState = () => {
+    const { binder } = useContext(BinderContext)
+    const state = useSelection(binder, (state) => state)
+
+    return <JsonView value={state} />
+}