Loading...
+ case 'failure':
+ return (docProp)
+
+export const AppWithGlobalStore = () => {
+ const resetState = () => {
+ binder.update(() => ({
+ tag: 'initialized',
+ state: 'Hello, world!',
+ }))
+ }
+
+ return (
+
+
+
+
+
+ )
+}
+
+const State = () => {
+ const state = useSelection(binder, (state) => state)
+
+ switch (state.tag) {
+ case 'initialized':
+ return {state.state}
+ default:
+ return Unexpected state: {JSON.stringify(state)}
+ }
+}
+
+export const JsonState = () => {
+ const state = useSelection(binder, (state) => state)
+
+ return (
+
+ {JSON.stringify(state, null, 2)}
+
+ )
+}
diff --git a/examples/react-immer-yjs/src/assets/react.svg b/examples/react-immer-yjs/src/assets/react.svg
deleted file mode 100644
index 6c87de9..0000000
--- a/examples/react-immer-yjs/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/react-immer-yjs/src/examples.tsx b/examples/react-immer-yjs/src/examples.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/examples/react-immer-yjs/src/main.tsx b/examples/react-immer-yjs/src/main.tsx
index 9ee12b0..f8b02aa 100644
--- a/examples/react-immer-yjs/src/main.tsx
+++ b/examples/react-immer-yjs/src/main.tsx
@@ -1,7 +1,7 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
-import App from './App.tsx'
+import { App } from './App.tsx'
createRoot(document.getElementById('root')!).render(
diff --git a/packages/react-immer-yjs/README.md b/packages/immer-yjs-react/README.md
similarity index 100%
rename from packages/react-immer-yjs/README.md
rename to packages/immer-yjs-react/README.md
diff --git a/packages/immer-yjs-react/package.json b/packages/immer-yjs-react/package.json
new file mode 100644
index 0000000..456503f
--- /dev/null
+++ b/packages/immer-yjs-react/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "immer-yjs-react",
+ "main": "src/index.ts",
+ "scripts": {
+ "check:types": "tsc --noEmit"
+ },
+ "peerDependencies": {
+ "immer": "10.1.1",
+ "immer-yjs": "workspace:*",
+ "react": "^18.0.0 || ^19.0.0",
+ "yjs": "^13.0"
+ },
+ "devDependencies": {
+ "@types/react": "^19.0.8",
+ "immer": "9.0.21",
+ "immer-yjs": "workspace:*",
+ "react": "^19.0.0",
+ "typescript": "^5.7.3",
+ "yjs": "^13.6.18"
+ }
+}
diff --git a/packages/immer-yjs-react/src/index.ts b/packages/immer-yjs-react/src/index.ts
new file mode 100644
index 0000000..e195810
--- /dev/null
+++ b/packages/immer-yjs-react/src/index.ts
@@ -0,0 +1,24 @@
+import { bind, Binder, Snapshot } from 'immer-yjs'
+import { useCallback, useEffect, useSyncExternalStore } from 'react'
+import * as Y from 'yjs'
+
+export const useBinder = (source: Y.Map | Y.Array): Binder => {
+ const binder = bind(source)
+ useEffect(() => {
+ return binder.unbind
+ }, [])
+ return binder
+}
+
+export const createSelector =
+ (store: Binder) =>
+ (selector: (state: T) => Selection): Selection =>
+ useSelection(store, selector)
+
+export const useSelection = (
+ binder: Binder,
+ selector: (state: T) => Selection
+): Selection => {
+ const getSnapshot = useCallback(() => selector(binder.get()), [binder, selector])
+ return useSyncExternalStore(binder.subscribe, getSnapshot)
+}
diff --git a/packages/immer-yjs-react/tsconfig.json b/packages/immer-yjs-react/tsconfig.json
new file mode 100644
index 0000000..921bfa0
--- /dev/null
+++ b/packages/immer-yjs-react/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "include": [
+ "src"
+ ],
+ "exclude": [],
+ "compilerOptions": {
+ "target": "ES2020",
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ /* Linting */
+ "types": [],
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noUncheckedIndexedAccess": true,
+ "noFallthroughCasesInSwitch": true
+ }
+}
diff --git a/packages/react-immer-yjs/package.json b/packages/react-immer-yjs/package.json
deleted file mode 100644
index 34df7a3..0000000
--- a/packages/react-immer-yjs/package.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "name": "react-immer-yjs",
- "main": "src/index.ts",
- "dependencies": {
- "immer": "9.0.21",
- "immer-yjs": "workspace:*",
- "yjs": "^13.6.18"
- }
-}
diff --git a/packages/react-immer-yjs/src/examples.tsx b/packages/react-immer-yjs/src/examples.tsx
deleted file mode 100644
index 6ba6ddc..0000000
--- a/packages/react-immer-yjs/src/examples.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { bind, Snapshot } from 'immer-yjs'
-import * as Y from 'yjs'
-import { createUseSelector, Store, useSelector, useStore } from './index.ts'
-import { useContext, createContext } from 'react'
-
-/**
- * Shared
- */
-
-type AppState =
- | {
- tag: 'initialized'
- state: string
- }
- | {
- tag: 'loading'
- }
- | {
- tag: 'failure'
- message: string
- }
-
-/**
- * Example with global store
- */
-
-export const createGlobalStore = (source: Y.Map): Store => {
- const binder = bind(source)
- return { binder }
-}
-
-const globalDoc = new Y.Doc()
-const globalRootProp = globalDoc.getMap('state')
-const globalStore = createGlobalStore(globalRootProp)
-const useAppSelector = createUseSelector(globalStore)
-
-const AppWithGlobalStore = () => {
- const state = useAppSelector((state) => state)
- switch (state.tag) {
- case 'initialized':
- return {state.state}
- case 'loading':
- return Loading...
- case 'failure':
- return Failed to load :(
- }
-}
-
-/**
- * Example with context
- */
-
-const ConceptsStoreContext = createContext>({
- binder: bind(new Y.Map()),
-})
-
-const AppWithContext = () => {
- const doc = new Y.Doc()
- const rootProp = doc.getMap('state')
- const store = useStore(rootProp)
- return (
-
-
-
- )
-}
-
-const Child = () => {
- const store = useContext(ConceptsStoreContext)
- const state = useSelector(store, (state) => state)
- switch (state.tag) {
- case 'initialized':
- return {state.state}
- case 'loading':
- return Loading...
- case 'failure':
- return Failed to load :(
- }
-}
-
-export const Examples = () => {
- return (
-
-
Examples
-
AppWithGlobalStore
-
-
AppWithContext
-
-