@koolbase/js 12.8.0 → 12.10.0

package/README.md

@@ -175,6 +175,33 @@ identical.
 
 ---
 
+## React
+
+`useCollection` and `useRecord` hold a collection or one record as React state,
+exactly as in `@koolbase/react-native`. They come from their own entry, so
+`@koolbase/js` itself never loads React; install `react` (18 or later) to use them.
+
+```tsx
+import { useCollection, useRecord } from '@koolbase/js/react';
+
+function Songs() {
+  const songs = useCollection('songs', { where: { genre: 'jazz' }, orderBy: 'title' });
+  if (songs.status === 'loading') return <p>Loading...</p>;
+  if (songs.status === 'error') return <button onClick={() => songs.refresh()}>Retry</button>;
+  return <ul>{songs.records.map((r) => <li key={r.id}>{String(r.data.title)}</li>)}</ul>;
+}
+
+function Song({ id }: { id: string }) {
+  const song = useRecord('songs', id);
+  if (song.status === 'notFound') return <p>No such song.</p>;
+  return song.record ? <h1>{String(song.record.data.title)}</h1> : null;
+}
+```
+
+Use them after `Koolbase.initialize()`. `useCollection` also offers `loadMore()`
+while `hasMore`; `useRecord`'s `notFound` covers a record that does not exist or
+that this user may not read.
+
 ## Offline
 
 Reads come from a local cache when the network is unavailable. `insert`,

package/dist/cjs/index.js

@@ -65,12 +65,18 @@ exports.Koolbase = {
             (0, core_1.setPlatform)(config.platform ?? (0, platform_js_2.browserPlatform)());
             _auth = new core_1.KoolbaseAuth(config);
             _db = new core_1.KoolbaseDatabase(config, () => _auth?.currentUser?.id ?? null, () => _auth?.validAccessToken() ?? Promise.resolve(null), async () => { await _auth?.clearStoredSession(); });
-            _storage = new core_1.KoolbaseStorage(config, () => _auth?.validAccessToken() ?? Promise.resolve(null), async () => { await _auth?.clearStoredSession(); });
+            _storage = new core_1.KoolbaseStorage(config, () => _auth?.validAccessToken() ?? Promise.resolve(null), async () => { await _auth?.clearStoredSession(); }, 
+            // Project identity for publicUrlFor, from the bootstrap payload; a
+            // missing one nudges a refresh (as Flutter's storage client).
+            () => _flags?.projectId() ?? '', () => { void _flags?.refresh(); });
             _fiscal = new core_1.KoolbaseFiscal(config, () => _auth?.validAccessToken() ?? Promise.resolve(null), async () => { await _auth?.clearStoredSession(); });
             _realtime = new core_1.KoolbaseRealtime(config, () => _auth?.validAccessToken() ?? Promise.resolve(null), () => _auth?.currentUser?.id ?? null);
             _functions = new core_1.KoolbaseFunctions(config, () => _auth?.validAccessToken() ?? Promise.resolve(null), async () => { await _auth?.clearStoredSession(); });
             const deviceId = await (0, core_1.getOrCreateDeviceId)();
             _flags = new core_1.KoolbaseFlags(config, deviceId);
+            // The bootstrap payload (flags, config, version policy, project identity),
+            // fetched in the background as Flutter's SDK does: never blocks startup.
+            void _flags.koolbaseFetch(config.appVersion ?? '0.0.0', 'web');
             // Opt-in: nothing is sent unless the app asks for it.
             if (config.analyticsEnabled === true) {
                 _analytics = new core_1.KoolbaseAnalytics(config, () => _auth?.currentUser?.id ?? null);

package/dist/cjs/react.d.ts

@@ -0,0 +1,5 @@
+export type { UseCollectionResult, UseRecordResult } from '@koolbase/core/react';
+/** A collection as React state: loading, loaded or error, with refresh and loadMore. Use it after Koolbase.initialize(). */
+export declare const useCollection: (collection: string, query?: import("@koolbase/core/dist/cjs").CollectionQuery) => import("@koolbase/core/react").UseCollectionResult;
+/** One record, by id, as React state: loading, loaded, notFound or error, with refresh. Use it after Koolbase.initialize(). */
+export declare const useRecord: (collection: string, id: string | null | undefined) => import("@koolbase/core/react").UseRecordResult;

package/dist/cjs/react.js

@@ -0,0 +1,13 @@
+"use strict";
+// @koolbase/js/react -- useCollection and useRecord for React in the browser.
+// The same implementation @koolbase/react-native exports (@koolbase/core's
+// React entry), bound to this package's Koolbase. A separate entry on purpose:
+// `import { Koolbase } from '@koolbase/js'` never loads React.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRecord = exports.useCollection = void 0;
+const react_1 = require("@koolbase/core/react");
+const index_js_1 = require("./index.js");
+/** A collection as React state: loading, loaded or error, with refresh and loadMore. Use it after Koolbase.initialize(). */
+exports.useCollection = (0, react_1.createUseCollection)(() => index_js_1.Koolbase.db);
+/** One record, by id, as React state: loading, loaded, notFound or error, with refresh. Use it after Koolbase.initialize(). */
+exports.useRecord = (0, react_1.createUseRecord)(() => index_js_1.Koolbase.db);

package/dist/esm/index.js

@@ -46,12 +46,18 @@ export const Koolbase = {
             setPlatform(config.platform ?? browserPlatform());
             _auth = new KoolbaseAuth(config);
             _db = new KoolbaseDatabase(config, () => _auth?.currentUser?.id ?? null, () => _auth?.validAccessToken() ?? Promise.resolve(null), async () => { await _auth?.clearStoredSession(); });
-            _storage = new KoolbaseStorage(config, () => _auth?.validAccessToken() ?? Promise.resolve(null), async () => { await _auth?.clearStoredSession(); });
+            _storage = new KoolbaseStorage(config, () => _auth?.validAccessToken() ?? Promise.resolve(null), async () => { await _auth?.clearStoredSession(); }, 
+            // Project identity for publicUrlFor, from the bootstrap payload; a
+            // missing one nudges a refresh (as Flutter's storage client).
+            () => _flags?.projectId() ?? '', () => { void _flags?.refresh(); });
             _fiscal = new KoolbaseFiscal(config, () => _auth?.validAccessToken() ?? Promise.resolve(null), async () => { await _auth?.clearStoredSession(); });
             _realtime = new KoolbaseRealtime(config, () => _auth?.validAccessToken() ?? Promise.resolve(null), () => _auth?.currentUser?.id ?? null);
             _functions = new KoolbaseFunctions(config, () => _auth?.validAccessToken() ?? Promise.resolve(null), async () => { await _auth?.clearStoredSession(); });
             const deviceId = await getOrCreateDeviceId();
             _flags = new KoolbaseFlags(config, deviceId);
+            // The bootstrap payload (flags, config, version policy, project identity),
+            // fetched in the background as Flutter's SDK does: never blocks startup.
+            void _flags.koolbaseFetch(config.appVersion ?? '0.0.0', 'web');
             // Opt-in: nothing is sent unless the app asks for it.
             if (config.analyticsEnabled === true) {
                 _analytics = new KoolbaseAnalytics(config, () => _auth?.currentUser?.id ?? null);

package/dist/esm/react.d.ts

@@ -0,0 +1,5 @@
+export type { UseCollectionResult, UseRecordResult } from '@koolbase/core/react';
+/** A collection as React state: loading, loaded or error, with refresh and loadMore. Use it after Koolbase.initialize(). */
+export declare const useCollection: (collection: string, query?: import("@koolbase/core").CollectionQuery) => import("@koolbase/core/react").UseCollectionResult;
+/** One record, by id, as React state: loading, loaded, notFound or error, with refresh. Use it after Koolbase.initialize(). */
+export declare const useRecord: (collection: string, id: string | null | undefined) => import("@koolbase/core/react").UseRecordResult;

package/dist/esm/react.js

@@ -0,0 +1,10 @@
+// @koolbase/js/react -- useCollection and useRecord for React in the browser.
+// The same implementation @koolbase/react-native exports (@koolbase/core's
+// React entry), bound to this package's Koolbase. A separate entry on purpose:
+// `import { Koolbase } from '@koolbase/js'` never loads React.
+import { createUseCollection, createUseRecord } from '@koolbase/core/react';
+import { Koolbase } from './index.js';
+/** A collection as React state: loading, loaded or error, with refresh and loadMore. Use it after Koolbase.initialize(). */
+export const useCollection = createUseCollection(() => Koolbase.db);
+/** One record, by id, as React state: loading, loaded, notFound or error, with refresh. Use it after Koolbase.initialize(). */
+export const useRecord = createUseRecord(() => Koolbase.db);

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@koolbase/js",
-  "version": "12.8.0",
-  "description": "Koolbase SDK for the browser — auth, database, storage, realtime, functions, flags and offline sync in one package.",
+  "version": "12.10.0",
+  "description": "Koolbase SDK for the browser \u2014 auth, database, storage, realtime, functions, flags and offline sync in one package.",
   "main": "./dist/cjs/index.js",
   "types": "./dist/esm/index.d.ts",
   "files": [
     "dist",
-    "CHANGELOG.md"
+    "CHANGELOG.md",
+    "react"
   ],
   "scripts": {
     "build": "node ../../scripts/build-package.js js"
@@ -25,7 +26,7 @@
     "url": "https://github.com/koolbase/koolbase-react-native"
   },
   "dependencies": {
-    "@koolbase/core": "12.8.0"
+    "@koolbase/core": "12.10.0"
   },
   "publishConfig": {
     "access": "public"
@@ -42,7 +43,25 @@
         "default": "./dist/cjs/index.js"
       }
     },
+    "./react": {
+      "import": {
+        "types": "./dist/esm/react.d.ts",
+        "default": "./dist/esm/react.js"
+      },
+      "require": {
+        "types": "./dist/cjs/react.d.ts",
+        "default": "./dist/cjs/react.js"
+      }
+    },
     "./package.json": "./package.json"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  }
 }

package/react/package.json

@@ -0,0 +1,7 @@
+{
+  "//": "For resolvers that ignore \"exports\" (TypeScript node10, older bundlers): the ./react entry.",
+  "main": "../dist/cjs/react.js",
+  "module": "../dist/esm/react.js",
+  "types": "../dist/cjs/react.d.ts",
+  "sideEffects": false
+}