@zveltio/react 3.0.0-beta.4 → 3.0.0-beta.68

package/README.md

@@ -12,14 +12,16 @@ bun add @zveltio/react @zveltio/sdk
 
 ## Setup
 
-Wrap your app with `ZveltioProvider`:
+Create a client and wrap your app with `ZveltioProvider`:
 
 ```tsx
-import { ZveltioProvider } from '@zveltio/react';
+import { ZveltioProvider, createZveltioClient } from '@zveltio/react';
+
+const client = createZveltioClient({ baseUrl: 'https://your-engine.example.com' });
 
 export default function App() {
   return (
-    <ZveltioProvider url="https://your-engine.example.com">
+    <ZveltioProvider client={client}>
       <YourApp />
     </ZveltioProvider>
   );
@@ -34,17 +36,20 @@ export default function App() {
 import { useCollection, useRecord } from '@zveltio/react';
 
 function ProductList() {
-  const { data, loading, error, refresh } = useCollection('products', {
+  const { data, loading, error, refetch } = useCollection('products', {
     filter: { status: 'active' },
-    sort: '-createdAt',
+    sort: 'created_at',
+    order: 'desc',
     limit: 20,
   });
 
   if (loading) return <Spinner />;
-  return data.map((p) => <ProductCard key={p.id} product={p} />);
+  if (error) return <p>{error.message}</p>;
+  return (data ?? []).map((p) => <ProductCard key={p.id} product={p} />);
 }
 
 function ProductDetail({ id }: { id: string }) {
+  // Re-fetches when `id` changes.
   const { data: product } = useRecord('products', id);
   return <div>{product?.name}</div>;
 }
@@ -55,26 +60,39 @@ function ProductDetail({ id }: { id: string }) {
 ```tsx
 import { useRealtime } from '@zveltio/react';
 
-function LiveFeed() {
-  const event = useRealtime('orders');
-  // event: { action: 'create'|'update'|'delete', record: {...} } | null
-  return <div>Last event: {event?.action}</div>;
+function LiveOrders() {
+  const [orders, setOrders] = useState([]);
+
+  useRealtime(
+    'https://your-engine.example.com',
+    'orders',
+    'insert', // 'insert' | 'update' | 'delete', or null for every event
+    (event) => setOrders((prev) => [event.data, ...prev]),
+  );
+
+  return <OrderList orders={orders} />;
 }
 ```
 
-### Offline Sync
+The socket authenticates with the session cookie, so the engine must be same-site
+with your app (or behind the same reverse proxy).
+
+### Offline sync
 
 ```tsx
 import { useSyncCollection, useSyncStatus } from '@zveltio/react';
 
 function OfflineProducts() {
-  const { records, pending, conflicts } = useSyncCollection('products');
-  const { isOnline } = useSyncStatus();
+  const { data } = useSyncCollection('products', {
+    realtimeUrl: 'https://your-engine.example.com',
+    syncInterval: 30_000,
+  });
+  const { status, pendingCount } = useSyncStatus();
 
   return (
     <>
-      {!isOnline && <Banner>Offline — syncing when reconnected</Banner>}
-      {records.map((p) => (
+      {status === 'offline' && <Banner>Offline — {pendingCount} changes waiting</Banner>}
+      {(data ?? []).map((p) => (
         <div key={p.id} style={{ opacity: p._syncStatus === 'pending' ? 0.6 : 1 }}>
           {p.name}
         </div>
@@ -84,37 +102,42 @@ function OfflineProducts() {
 }
 ```
 
+Pass a `SyncManager` to `useSyncStatus(syncManager)` to see its pending queue;
+without one it reports only the browser's online state.
+
 ### Auth
 
 ```tsx
 import { useAuth } from '@zveltio/react';
 
 function Header() {
-  const { user, signIn, signOut, loading } = useAuth();
+  const { data, loading, login, logout } = useAuth();
 
   if (loading) return null;
-  if (!user) return <button onClick={() => signIn({ email, password })}>Sign In</button>;
+  if (!data?.user) return <button onClick={() => login(email, password)}>Sign In</button>;
   return (
     <div>
-      {user.email} <button onClick={signOut}>Sign Out</button>
+      {data.user.email} <button onClick={logout}>Sign Out</button>
     </div>
   );
 }
 ```
 
+`signup(email, password, name)` is returned alongside `login` and `logout`.
+
 ### Storage
 
 ```tsx
 import { useStorage } from '@zveltio/react';
 
-function FileUpload() {
-  const { upload, uploading, progress } = useStorage();
+function FileUpload({ folderId }: { folderId?: string }) {
+  const { upload, uploading, error } = useStorage();
 
   const handleFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
-      const url = await upload(file);
-      console.log('Uploaded:', url);
+      const stored = await upload(file, folderId);
+      console.log('Uploaded:', stored.url);
     }
   };
 
@@ -122,6 +145,9 @@ function FileUpload() {
 }
 ```
 
+`list(folderId?)` and `remove(fileId)` are returned as well. The folder argument is a
+folder **id**; omit it for the root.
+
 ## Links
 
 - [Documentation](https://zveltio.com/docs)

package/dist/context.d.ts

@@ -4,6 +4,6 @@ export interface ZveltioProviderProps {
     client: ZveltioClient;
     children: React.ReactNode;
 }
-export declare function ZveltioProvider({ client, children }: ZveltioProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ZveltioProvider({ client, children }: ZveltioProviderProps): React.JSX.Element;
 export declare function useZveltioClient(): ZveltioClient;
 //# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAIlD,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAEzE;AAED,wBAAgB,gBAAgB,IAAI,aAAa,CAMhD"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAIlD,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,oBAAoB,qBAEzE;AAED,wBAAgB,gBAAgB,IAAI,aAAa,CAMhD"}

package/dist/hooks/useCollection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCollection.d.ts","sourceRoot":"","sources":["../../src/hooks/useCollection.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEvE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,wBAAgB,aAAa,CAAC,CAAC,GAAG,GAAG,EACnC,cAAc,EAAE,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,UAAU,CAAC,CAAC,EAAE,CAAC,GAAG;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAuB3C"}
+{"version":3,"file":"useCollection.d.ts","sourceRoot":"","sources":["../../src/hooks/useCollection.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEvE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,wBAAgB,aAAa,CAAC,CAAC,GAAG,GAAG,EACnC,cAAc,EAAE,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,UAAU,CAAC,CAAC,EAAE,CAAC,GAAG;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAuB3C"}

package/dist/hooks/useCollection.js

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { fetchCollection } from '@zveltio/sdk';
 import { useZveltioClient } from '../context.js';
+// biome-ignore lint/suspicious/noExplicitAny: legacy any; tracked in hardening plan item H-01
 export function useCollection(collectionName, options) {
     const client = useZveltioClient();
     const [data, setData] = useState(null);

package/dist/hooks/useRealtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRealtime.d.ts","sourceRoot":"","sources":["../../src/hooks/useRealtime.ts"],"names":[],"mappings":"AAGA,wBAAgB,WAAW,CACzB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,EACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,GAC5B,IAAI,CAwBN"}
+{"version":3,"file":"useRealtime.d.ts","sourceRoot":"","sources":["../../src/hooks/useRealtime.ts"],"names":[],"mappings":"AAGA,wBAAgB,WAAW,CACzB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,EAEpB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,GAC5B,IAAI,CAyBN"}

package/dist/hooks/useRealtime.js

@@ -1,6 +1,8 @@
 import { useEffect, useRef } from 'react';
 import { ZveltioRealtime } from '@zveltio/sdk';
-export function useRealtime(baseUrl, collection, event, callback) {
+export function useRealtime(baseUrl, collection, event, 
+// biome-ignore lint/suspicious/noExplicitAny: legacy any; tracked in hardening plan item H-01
+callback) {
     const realtimeRef = useRef(null);
     const callbackRef = useRef(callback);
     callbackRef.current = callback;
@@ -10,6 +12,7 @@ export function useRealtime(baseUrl, collection, event, callback) {
         const realtime = new ZveltioRealtime(baseUrl);
         realtimeRef.current = realtime;
         realtime.connect();
+        // biome-ignore lint/suspicious/noExplicitAny: legacy any; tracked in hardening plan item H-01
         const unsub = realtime.subscribe(collection, (data) => {
             if (!event || data.event === event) {
                 callbackRef.current(data);

package/dist/hooks/useRecord.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRecord.d.ts","sourceRoot":"","sources":["../../src/hooks/useRecord.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,wBAAgB,SAAS,CAAC,CAAC,GAAG,GAAG,EAC/B,cAAc,EAAE,MAAM,EACtB,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC5B,UAAU,CAAC,CAAC,CAAC,GAAG;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CA4BzC"}
+{"version":3,"file":"useRecord.d.ts","sourceRoot":"","sources":["../../src/hooks/useRecord.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,wBAAgB,SAAS,CAAC,CAAC,GAAG,GAAG,EAC/B,cAAc,EAAE,MAAM,EACtB,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC5B,UAAU,CAAC,CAAC,CAAC,GAAG;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CA4BzC"}

package/dist/hooks/useRecord.js

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { fetchRecord } from '@zveltio/sdk';
 import { useZveltioClient } from '../context.js';
+// biome-ignore lint/suspicious/noExplicitAny: legacy any; tracked in hardening plan item H-01
 export function useRecord(collectionName, id) {
     const client = useZveltioClient();
     const [data, setData] = useState(null);

package/dist/hooks/useSyncCollection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSyncCollection.d.ts","sourceRoot":"","sources":["../../src/hooks/useSyncCollection.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,MAAM,WAAW,wBAAwB;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,GAAG,EACvC,cAAc,EAAE,MAAM,EACtB,OAAO,CAAC,EAAE,wBAAwB,GACjC,UAAU,CAAC,CAAC,EAAE,CAAC,CAkCjB"}
+{"version":3,"file":"useSyncCollection.d.ts","sourceRoot":"","sources":["../../src/hooks/useSyncCollection.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,MAAM,WAAW,wBAAwB;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAGD,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,GAAG,EACvC,cAAc,EAAE,MAAM,EACtB,OAAO,CAAC,EAAE,wBAAwB,GACjC,UAAU,CAAC,CAAC,EAAE,CAAC,CAuCjB"}

package/dist/hooks/useSyncCollection.js

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { SyncManager } from '@zveltio/sdk';
 import { useZveltioClient } from '../context.js';
+// biome-ignore lint/suspicious/noExplicitAny: legacy any; tracked in hardening plan item H-01
 export function useSyncCollection(collectionName, options) {
     const client = useZveltioClient();
     const [data, setData] = useState(null);
@@ -12,23 +13,30 @@ export function useSyncCollection(collectionName, options) {
             syncInterval: options?.syncInterval,
         });
         syncRef.current = sync;
+        let unsub;
+        let cancelled = false;
         sync
             .start(options?.realtimeUrl)
             .then(() => {
-            const unsub = sync.collection(collectionName).subscribe((records) => {
+            if (cancelled)
+                return;
+            unsub = sync.collection(collectionName).subscribe((records) => {
                 setData(records);
                 setLoading(false);
             });
-            return unsub;
         })
             .catch((err) => {
+            if (cancelled)
+                return;
             setError(err instanceof Error ? err : new Error(String(err)));
             setLoading(false);
         });
         return () => {
+            cancelled = true;
+            unsub?.();
             sync.stop();
             syncRef.current = null;
         };
-    }, [client, collectionName]);
+    }, [client, collectionName, options?.realtimeUrl, options?.syncInterval]);
     return { data, loading, error };
 }

package/dist/hooks/useSyncStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSyncStatus.d.ts","sourceRoot":"","sources":["../../src/hooks/useSyncStatus.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,wBAAgB,aAAa,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,cAAc,SAAO,GAAG,UAAU,CA+C1F"}
+{"version":3,"file":"useSyncStatus.d.ts","sourceRoot":"","sources":["../../src/hooks/useSyncStatus.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,wBAAgB,aAAa,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,cAAc,SAAO,GAAG,UAAU,CA8C1F"}

package/dist/hooks/useSyncStatus.js

@@ -1,7 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useZveltioClient } from '../context.js';
 export function useSyncStatus(syncManager, pollIntervalMs = 2000) {
-    const client = useZveltioClient();
     const [status, setStatus] = useState({
         status: 'online',
         pendingCount: 0,

package/dist/types.d.ts

@@ -1,11 +1,4 @@
-export interface CollectionOptions {
-    filter?: Record<string, any>;
-    sort?: string;
-    order?: 'asc' | 'desc';
-    limit?: number;
-    page?: number;
-    search?: string;
-}
+export type { CollectionOptions } from '@zveltio/sdk';
 export interface HookResult<T> {
     data: T | null;
     loading: boolean;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,YAAY,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,YAAY,EAAE,MAAM,CAAC;CACtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zveltio/react",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.68",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -15,20 +15,21 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc -p tsconfig.build.json",
     "dev": "tsc --watch",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "bun test"
   },
   "dependencies": {
-    "@zveltio/sdk": "3.0.0-beta.4"
+    "@zveltio/sdk": "3.0.0-beta.68"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^18.3.31",
+    "@types/react-dom": "^18.3.7",
     "typescript": "^5.4.0"
   },
   "repository": {