docs: improve code examples

examples/appwrite/package.json

@@ -19,6 +19,7 @@
  "react-dom": "18.2.0",
  "signaldb": "0.8.9",
  "signaldb-plugin-maverickjs": "1.0.1",
+ "signaldb-react": "^1.0.1",
  "typescript": "5.4.3"
  },
  "devDependencies": {

examples/appwrite/src/containers/App/List.tsx

@@ -1,33 +1,23 @@
-import { useEffect, useState } from 'react'
-import { effect } from '@maverick-js/signals'
-import type { Collection } from 'signaldb'
+import Todos from '../../models/Todos'
+import useReactivity from '../../utils/useReactivity'
 
-interface Props {
- collection: Collection<{ id: string, text: string, completed: boolean }>,
-}
-
-const List: React.FC<Props> = ({ collection }) => {
- const [items, setItems] = useState<{ id: string, text: string, completed: boolean }[]>([])
- useEffect(() => {
- effect(() => {
- setItems(collection.find({}, {
- sort: { completed: 1, text: 1 },
- }).fetch())
- })
- }, [collection])
+const List: React.FC = () => {
+ const items = useReactivity(() => Todos.find({}, {
+ sort: { completed: 1, text: 1 },
+ }).fetch(), [])
  return (
  <ul>
  {items.map(item => (
  <li key={item.id} className={item.completed ? 'completed' : ''}>
  <input
  type="checkbox"
  checked={item.completed}
- onChange={() => collection.updateOne({ id: item.id }, {
+ onChange={() => Todos.updateOne({ id: item.id }, {
  $set: { completed: !item.completed },
  })}
  />
  <p>{item.text}</p>
- <button onClick={() => collection.removeOne({ id: item.id })}>x</button>
+ <button onClick={() => Todos.removeOne({ id: item.id })}>x</button>
  </li>
  ))}
  {items.length === 0 && <li className="empty">Empty</li>}

examples/appwrite/src/containers/App/index.tsx

@@ -1,10 +1,9 @@
-import { useMemo, useState } from 'react'
-import setupCollection from '../../system/setupCollection'
+import { useState } from 'react'
+import Todos from '../../models/Todos'
 import List from './List'
 
 const App: React.FC = () => {
  const [text, setText] = useState('')
- const collection = useMemo(() => typeof window !== 'undefined' && setupCollection(), [])
  return (
  <>
  <input
@@ -14,16 +13,16 @@ const App: React.FC = () => {
  onChange={e => setText(e.target.value)}
  onKeyDown={(e) => {
  if (e.key === 'Enter') {
- if (text === '' || !collection) return
- collection.insert({
+ if (text === '') return
+ Todos.insert({
  text,
  completed: false,
  })
  setText('')
  }
  }}
  />
- {collection && <List collection={collection} />}
+ <List />
  </>
  )
 }

examples/appwrite/src/models/Todos.ts

@@ -0,0 +1,19 @@
+import { Collection } from 'signaldb'
+import maverickjsReactivityAdapter from 'signaldb-plugin-maverickjs'
+import createAppwritePersistenceAdapter from '../utils/createAppwritePersistenceAdapter'
+
+const Todos = new Collection<{ id: string, text: string, completed: boolean }>({
+ memory: [],
+ reactivity: maverickjsReactivityAdapter,
+ persistence: createAppwritePersistenceAdapter<{
+ id: string,
+ text: string,
+ completed: boolean,
+ }, string>('todos'),
+})
+Todos.on('persistence.error', (error) => {
+ // eslint-disable-next-line no-console
+ console.error('persistence.error', error)
+})
+
+export default Todos

examples/appwrite/src/utils/useReactivity.ts

@@ -0,0 +1,6 @@
+import { effect } from '@maverick-js/signals'
+import { createUseReactivityHook } from 'signaldb-react'
+
+const useReactivity = createUseReactivityHook(effect)
+
+export default useReactivity

examples/firebase/package.json

@@ -19,6 +19,7 @@
  "react-dom": "18.2.0",
  "signaldb": "0.8.9",
  "signaldb-plugin-maverickjs": "1.0.1",
+ "signaldb-react": "^1.0.1",
  "typescript": "5.4.3"
  },
  "devDependencies": {

examples/firebase/src/containers/App/List.tsx

@@ -1,33 +1,23 @@
-import { useEffect, useState } from 'react'
-import { effect } from '@maverick-js/signals'
-import type { Collection } from 'signaldb'
+import Todos from '../../models/Todos'
+import useReactivity from '../../utils/useReactivity'
 
-interface Props {
- collection: Collection<{ id: string, text: string, completed: boolean }>,
-}
-
-const List: React.FC<Props> = ({ collection }) => {
- const [items, setItems] = useState<{ id: string, text: string, completed: boolean }[]>([])
- useEffect(() => {
- effect(() => {
- setItems(collection.find({}, {
- sort: { completed: 1, text: 1 },
- }).fetch())
- })
- }, [collection])
+const List: React.FC = () => {
+ const items = useReactivity(() => Todos.find({}, {
+ sort: { completed: 1, text: 1 },
+ }).fetch(), [])
  return (
  <ul>
  {items.map(item => (
  <li key={item.id} className={item.completed ? 'completed' : ''}>
  <input
  type="checkbox"
  checked={item.completed}
- onChange={() => collection.updateOne({ id: item.id }, {
+ onChange={() => Todos.updateOne({ id: item.id }, {
  $set: { completed: !item.completed },
  })}
  />
  <p>{item.text}</p>
- <button onClick={() => collection.removeOne({ id: item.id })}>x</button>
+ <button onClick={() => Todos.removeOne({ id: item.id })}>x</button>
  </li>
  ))}
  {items.length === 0 && <li className="empty">Empty</li>}

examples/firebase/src/containers/App/index.tsx

@@ -1,10 +1,9 @@
-import { useMemo, useState } from 'react'
-import setupCollection from '../../system/setupCollection'
+import { useState } from 'react'
+import Todos from '../../models/Todos'
 import List from './List'
 
 const App: React.FC = () => {
  const [text, setText] = useState('')
- const collection = useMemo(() => typeof window !== 'undefined' && setupCollection(), [])
  return (
  <>
  <input
@@ -14,16 +13,16 @@ const App: React.FC = () => {
  onChange={e => setText(e.target.value)}
  onKeyDown={(e) => {
  if (e.key === 'Enter') {
- if (text === '' || !collection) return
- collection.insert({
+ if (text === '') return
+ Todos.insert({
  text,
  completed: false,
  })
  setText('')
  }
  }}
  />
- {collection && <List collection={collection} />}
+ <List />
  </>
  )
 }

examples/firebase/src/models/Todos.ts

@@ -0,0 +1,19 @@
+import { Collection } from 'signaldb'
+import maverickjsReactivityAdapter from 'signaldb-plugin-maverickjs'
+import createFirebasePersistenceAdapter from '../utils/createFirebasePersistenceAdapter'
+
+const Todos = new Collection<{ id: string, text: string, completed: boolean }>({
+ memory: [],
+ reactivity: maverickjsReactivityAdapter,
+ persistence: createFirebasePersistenceAdapter<{
+ id: string,
+ text: string,
+ completed: boolean,
+ }, string>('todos'),
+})
+Todos.on('persistence.error', (error) => {
+ // eslint-disable-next-line no-console
+ console.error('persistence.error', error)
+})
+
+export default Todos

examples/firebase/src/utils/useReactivity.ts

@@ -0,0 +1,6 @@
+import { effect } from '@maverick-js/signals'
+import { createUseReactivityHook } from 'signaldb-react'
+
+const useReactivity = createUseReactivityHook(effect)
+
+export default useReactivity

examples/rxdb/package.json

@@ -20,6 +20,7 @@
  "rxjs": "7.8.1",
  "signaldb": "0.8.9",
  "signaldb-plugin-maverickjs": "1.0.1",
+ "signaldb-react": "^1.0.1",
  "typescript": "5.4.3"
  },
  "devDependencies": {

examples/rxdb/src/containers/App/List.tsx

@@ -1,33 +1,23 @@
-import { useEffect, useState } from 'react'
-import { effect } from '@maverick-js/signals'
-import type { Collection } from 'signaldb'
+import Todos from '../../models/Todos'
+import useReactivity from '../../utils/useReactivity'
 
-interface Props {
- collection: Collection<{ id: string, text: string, completed: boolean }>,
-}
-
-const List: React.FC<Props> = ({ collection }) => {
- const [items, setItems] = useState<{ id: string, text: string, completed: boolean }[]>([])
- useEffect(() => {
- effect(() => {
- setItems(collection.find({}, {
- sort: { completed: 1, text: 1 },
- }).fetch())
- })
- }, [collection])
+const List: React.FC = () => {
+ const items = useReactivity(() => Todos.find({}, {
+ sort: { completed: 1, text: 1 },
+ }).fetch(), [])
  return (
  <ul>
  {items.map(item => (
  <li key={item.id} className={item.completed ? 'completed' : ''}>
  <input
  type="checkbox"
  checked={item.completed}
- onChange={() => collection.updateOne({ id: item.id }, {
+ onChange={() => Todos.updateOne({ id: item.id }, {
  $set: { completed: !item.completed },
  })}
  />
  <p>{item.text}</p>
- <button onClick={() => collection.removeOne({ id: item.id })}>x</button>
+ <button onClick={() => Todos.removeOne({ id: item.id })}>x</button>
  </li>
  ))}
  {items.length === 0 && <li className="empty">Empty</li>}

examples/rxdb/src/containers/App/index.tsx

@@ -1,10 +1,9 @@
-import { useMemo, useState } from 'react'
-import setupCollection from '../../system/setupCollection'
+import { useState } from 'react'
+import Todos from '../../models/Todos'
 import List from './List'
 
 const App: React.FC = () => {
  const [text, setText] = useState('')
- const collection = useMemo(() => typeof window !== 'undefined' && setupCollection(), [])
  return (
  <>
  <input
@@ -14,16 +13,16 @@ const App: React.FC = () => {
  onChange={e => setText(e.target.value)}
  onKeyDown={(e) => {
  if (e.key === 'Enter') {
- if (text === '' || !collection) return
- collection.insert({
+ if (text === '') return
+ Todos.insert({
  text,
  completed: false,
  })
  setText('')
  }
  }}
  />
- {collection && <List collection={collection} />}
+ <List />
  </>
  )
 }