@koolbase/js 12.9.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/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/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.9.0",
+  "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.9.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
+}