@cero-base/react 0.0.1 → 0.0.5

package/README.md

@@ -11,11 +11,14 @@ npm install @cero-base/react
 ## Setup
 
 ```jsx
-import { Cero, Room } from '@cero-base/react'
+import { Cero, Room, useClient } from '@cero-base/react'
 
 function App() {
+  const { db, ready, error } = useClient(client)
+
+  if (!ready) return null
   return (
-    <Cero value={db}>
+    <Cero db={db}>
       <Room id={roomId}>
         <Chat />
       </Room>
@@ -26,9 +29,17 @@ function App() {
 
 ## Hooks
 
+### useClient(client)
+
+Manages client lifecycle (ready/error). Pass a `Client` instance.
+
+```jsx
+const { db, ready, error } = useClient(client)
+```
+
 ### useCero()
 
-Access the db instance from context.
+Access the db/client instance from context.
 
 ```jsx
 const db = useCero()
@@ -42,12 +53,9 @@ Access the current Room from context.
 const room = useRoom()
 ```
 
-### useCollection(name, query?)
-
-Subscribe to a collection. Returns live data + CRUD methods.
+### useCollection(name, query?, opts?)
 
-- Local/private collections: uses `useCero()` context
-- Shared collections: requires `<Room>` provider
+Subscribe to a collection with CRUD methods.
 
 ```jsx
 const { data, put, del, get, sub } = useCollection('messages')
@@ -55,7 +63,7 @@ const { data, put, del, get, sub } = useCollection('messages')
 
 ### useRooms()
 
-List all rooms. Re-fetches on update events.
+Subscribe to room list.
 
 ```jsx
 const { data: rooms } = useRooms()
@@ -71,7 +79,7 @@ const { data: members } = useMembers()
 
 ### useProfile()
 
-Subscribe to identity profile. Returns profile data + setter.
+Subscribe to identity profile with setter.
 
 ```jsx
 const { data: profile, set } = useProfile()
@@ -84,6 +92,7 @@ await set({ name: 'Alice' })
 | --------------------- | ------------------------------------ |
 | `Cero`                | Context provider — wraps db instance |
 | `Room`                | Context provider — wraps room by id  |
+| `useClient(client)`   | Manage client lifecycle              |
 | `useCero()`           | Access db from context               |
 | `useRoom()`           | Access room from context             |
 | `useProfile()`        | Subscribe to profile                 |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cero-base/react",
-  "version": "0.0.1",
+  "version": "0.0.5",
   "description": "React hooks and providers for cero-base",
   "files": [
     "src",
@@ -18,8 +18,8 @@
     ".": "./src/index.js"
   },
   "dependencies": {
-    "@cero-base/core": "^0.0.1",
-    "@cero-base/rpc": "^0.0.1"
+    "@cero-base/core": "^0.0.5",
+    "@cero-base/rpc": "^0.0.5"
   },
   "devDependencies": {
     "@testing-library/react": "^16.0.0",

package/src/hooks/use-client.jsx

@@ -1,39 +1,21 @@
-import { useState, useEffect, useRef } from 'react'
-import { Client, getRpc } from '@cero-base/rpc'
+import { useState, useEffect } from 'react'
 
-export function useClient(setup, schema, spec) {
+export function useClient(client) {
   const [db, setDb] = useState(null)
   const [ready, setReady] = useState(false)
   const [error, setError] = useState(null)
-  const ref = useRef(null)
 
   useEffect(() => {
-    let client = null
+    client
+      .ready()
+      .then(() => {
+        setDb(client)
+        setReady(true)
+      })
+      .catch((err) => setError(err.message || String(err)))
 
-    try {
-      const ctx = setup()
-      ref.current = ctx
-      const rpc = getRpc(ctx.pipe, spec)
-      client = new Client(rpc, schema, spec)
-
-      client
-        .ready()
-        .then(() => {
-          setDb(client)
-          setReady(true)
-        })
-        .catch((err) => setError('RPC ready failed: ' + (err.message || String(err))))
-    } catch (err) {
-      setError('Client setup failed: ' + (err.message || String(err)))
-    }
-
-    return () => {
-      try {
-        if (client) client.close()
-        if (ref.current?.destroy) ref.current.destroy()
-      } catch {}
-    }
-  }, [])
+    return () => client.close()
+  }, [client])
 
   return { db, ready, error }
 }

package/src/hooks/use-query.js

@@ -3,46 +3,37 @@ import { store } from '@simplestack/store'
 import { useStoreValue } from '@simplestack/store/react'
 
 /**
- * useQuery — the primitive. Subscribes to a Readable stream, returns reactive data.
- *
- * All named hooks compose from this. Exported as escape hatch for custom subscriptions.
- *
- * Uses @simplestack/store as the reactive layer — signal-based, fine-grained updates.
- * The store persists between mounts (stale-while-revalidate for free).
- * Redundant updates are skipped via Object.is inside store.select().set().
+ * useQuery — subscribes to a Readable stream, returns reactive data.
  *
  * @param {Function} streamFn - Returns a Readable stream (from .sub())
  * @param {Array} deps - Dependency array (re-subscribes when changed)
  * @returns {{ data: any, busy: boolean, error: Error|null }}
  */
 export function useQuery(streamFn, deps) {
-  const s = useRef(null)
-  const ref = useRef(null)
-  if (s.current === null) {
-    s.current = store({ data: null, busy: true, error: null })
+  const state = useRef(null)
+  if (state.current === null) {
+    state.current = store({ data: null, busy: true, error: null })
   }
 
   useEffect(() => {
-    const st = s.current
+    const st = state.current
     st.select('busy').set(true)
 
     const stream = streamFn()
 
-    stream.on('data', (d) => {
-      if (d === ref.current) return // skip redundant updates
-      ref.current = d
-      st.select('data').set(d)
+    stream.on('data', (data) => {
+      st.select('data').set(data)
       st.select('busy').set(false)
       st.select('error').set(null)
     })
 
-    stream.on('error', (err) => {
-      st.select('error').set(err)
+    stream.on('error', (error) => {
+      st.select('error').set(error)
       st.select('busy').set(false)
     })
 
     return () => stream.destroy()
   }, deps) // eslint-disable-line react-hooks/exhaustive-deps
 
-  return useStoreValue(s.current)
+  return useStoreValue(state.current)
 }

package/src/ui/cero.jsx

@@ -1,19 +1,18 @@
 import { useState, useEffect } from 'react'
 import { CeroContext } from './context.js'
 
-export function Cero({ value, children }) {
-  const [ready, setReady] = useState(value.opened)
+export function Cero({ db, children }) {
+  const [ready, setReady] = useState(db.opened)
 
   useEffect(() => {
-    if (!value.opened)
-      value
-        .ready()
+    if (!db.opened)
+      db.ready()
         .then(() => setReady(true))
         .catch(console.error)
     else setReady(true)
-  }, [value])
+  }, [db])
 
   if (!ready) return null
 
-  return <CeroContext.Provider value={value}>{children}</CeroContext.Provider>
+  return <CeroContext.Provider value={db}>{children}</CeroContext.Provider>
 }