@instantdb/react - npm Package Compare versions

Comparing version 0.6.5 to 0.7.0

dist/index.d.ts

 /// <reference types="react" />
-import { tx, id, getLocalId, Config, transact, auth, Query, QueryResponse, InstantObject, Exactly, QueryState, AuthState, User } from "@instantdb/core";
+import { id, tx, Config, Query, QueryResponse, InstantObject, Exactly, AuthState, User, InstantClient, TransactionChunk, Auth, LifecycleSubscriptionState, QueryState, auth, transact, getLocalId } from "@instantdb/core";
 /**
@@ -10,23 +10,73 @@ *
  * @example
- *  init({appId: "my-app-id"})
- */
-declare function init(config: Config): import("@instantdb/core").ReactiveDB;
-/**
- * Use this to query your data!
+ *  const db = init({ appId: "my-app-id" })
  *
- * @see https://docs.instantdb.com/docs/instaql
+ * // You can also provide a a schema for type safety and editor autocomplete!
  *
- * @example
- *  // listen to all goals
- *  useQuery({ goals: {} })
+ *  type Schema = {
+ *    goals: {
+ *      title: string
+ *    }
+ *  }
  *
- *  // goals where the title is "Get Fit"
- *  useQuery({ goals: { $: { where: { title: "Get Fit" } } } })
+ *  const db = init<Schema>({ appId: "my-app-id" })
  *
- *  // all goals, _alongside_ their todos
- *  useQuery({ goals: { todos: {} } })
- *
- * Curious about the state of your query?
- * Just add a `debugRef` to any element and inspect it with debug mode! `(cmd|ctrl) + shift + O`
  */
+declare function init<Schema = {}>(config: Config): InstantReact<Schema>;
+declare class InstantReact<Schema = {}> {
+    auth: Auth;
+    _core: InstantClient<Schema>;
+    constructor(config: Config);
+    getLocalId: (name: string) => Promise<string>;
+    transact: (chunks: TransactionChunk | TransactionChunk[]) => void;
+    /**
+     * Use this to query your data!
+     *
+     * @see https://docs.instantdb.com/docs/instaql
+     *
+     * @example
+     *  // listen to all goals
+     *  db.useQuery({ goals: {} })
+     *
+     *  // goals where the title is "Get Fit"
+     *  db.useQuery({ goals: { $: { where: { title: "Get Fit" } } } })
+     *
+     *  // all goals, _alongside_ their todos
+     *  db.useQuery({ goals: { todos: {} } })
+     *
+     * Curious about the state of your query?
+     * Just add a `debugRef` to any element and inspect it with debug mode! `(cmd|ctrl) + shift + O`
+     */
+    useQuery: <Q extends Query>(_query: Exactly<Query, Q>) => {
+        debugRef: React.LegacyRef<any>;
+    } & LifecycleSubscriptionState<Q, Schema>;
+    /**
+     * Listen for the logged in state. This is useful
+     * for deciding when to show a login screen.
+     *
+     * Check out the docs for an example `Login` component too!
+     *
+     * @see https://docs.instantdb.com/docs/auth
+     * @example
+     *  function App() {
+     *    const { isLoading, user, error } = db.useAuth()
+     *    if (isLoading) {
+     *      return <div>Loading...</div>
+     *    }
+     *    if (error) {
+     *      return <div>Uh oh! {error.message}</div>
+     *    }
+     *    if (user) {
+     *      return <Main user={user} />
+     *    }
+     *    return <Login />
+     *  }
+     *
+     */
+    useAuth: () => AuthState;
+}
+export { init, id, tx, Config, Query, QueryResponse, InstantObject, User, AuthState, };
+/**
+ * @deprecated since 0.7.0, use db.useQuery instead.
+ * @see https://docs.instantdb.com/docs/instaql
+ */
 declare function useQuery<Q extends Query>(_query: Exactly<Query, Q>): {
@@ -36,26 +86,7 @@ debugRef: React.LegacyRef<any>;
 /**
- * Listen for the logged in state. This is useful
- * for deciding when to show a login screen.
- *
- * Check out the docs for an example `Login` component too!
- *
+ * @deprecated since 0.7.0, use db.useAuth instead.
  * @see https://docs.instantdb.com/docs/auth
- * @example
- *  function App() {
- *    const { isLoading, user, error } = useAuth()
- *    if (isLoading) {
- *      return <div>Loading...</div>
- *    }
- *    if (error) {
- *      return <div>Uh oh! {error.message}</div>
- *    }
- *    if (user) {
- *      return <Main user={user} />
- *    }
- *    return <Login />
- *  }
- *
  */
 declare function useAuth(): AuthState;
-export { Config, Query, QueryResponse, InstantObject, auth, id, tx, transact, getLocalId, useAuth, User, AuthState, useQuery, init, };
+export { useAuth, useQuery, auth, transact, getLocalId };
 //# sourceMappingURL=index.d.ts.map

dist/index.js

 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.init = exports.useQuery = exports.useAuth = exports.getLocalId = exports.transact = exports.tx = exports.id = exports.auth = void 0;
+exports.getLocalId = exports.transact = exports.auth = exports.useQuery = exports.useAuth = exports.tx = exports.id = exports.init = void 0;
 const core_1 = require("@instantdb/core");
+Object.defineProperty(exports, "id", { enumerable: true, get: function () { return core_1.id; } });
 Object.defineProperty(exports, "tx", { enumerable: true, get: function () { return core_1.tx; } });
-Object.defineProperty(exports, "id", { enumerable: true, get: function () { return core_1.id; } });
+Object.defineProperty(exports, "auth", { enumerable: true, get: function () { return core_1.auth; } });
+Object.defineProperty(exports, "transact", { enumerable: true, get: function () { return core_1.transact; } });
 Object.defineProperty(exports, "getLocalId", { enumerable: true, get: function () { return core_1.getLocalId; } });
-Object.defineProperty(exports, "transact", { enumerable: true, get: function () { return core_1.transact; } });
-Object.defineProperty(exports, "auth", { enumerable: true, get: function () { return core_1.auth; } });
 const react_1 = require("react");
+let singletonDb = null;
 const isBrowser = typeof window !== "undefined";
@@ -29,91 +30,110 @@ const isDev = typeof process !== "undefined" && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === "development";
  * @example
- *  init({appId: "my-app-id"})
- */
-function init(config) {
-    return (0, core_1.init)(config);
-}
-exports.init = init;
-/**
- * Use this to query your data!
+ *  const db = init({ appId: "my-app-id" })
  *
- * @see https://docs.instantdb.com/docs/instaql
+ * // You can also provide a a schema for type safety and editor autocomplete!
  *
- * @example
- *  // listen to all goals
- *  useQuery({ goals: {} })
- *
- *  // goals where the title is "Get Fit"
- *  useQuery({ goals: { $: { where: { title: "Get Fit" } } } })
- *
- *  // all goals, _alongside_ their todos
- *  useQuery({ goals: { todos: {} } })
- *
- * Curious about the state of your query?
- * Just add a `debugRef` to any element and inspect it with debug mode! `(cmd|ctrl) + shift + O`
- */
-function useQuery(_query) {
-    const query = (0, core_1.coerceQuery)(_query);
-    const db = (0, core_1.getDB)();
-    // (XXX): Don't set `isLoading` true if we already have data, would
-    // be better to immediately show loaded data
-    const [state, setState] = (0, react_1.useState)({
-        isLoading: true,
-        data: undefined,
-        error: undefined,
-    });
-    (0, react_1.useEffect)(() => {
-        setState({ isLoading: true, data: undefined, error: undefined });
-        const unsub = db.subscribeQuery(query, (resp) => {
-            setState(Object.assign({ isLoading: false }, resp));
-        });
-        return unsub;
-    }, [(0, core_1.weakHash)(query), db]);
-    const { debugRef } = useDebugRef({ query, state });
-    return Object.assign(Object.assign({}, state), { debugRef });
-}
-exports.useQuery = useQuery;
-/**
- * Listen for the logged in state. This is useful
- * for deciding when to show a login screen.
- *
- * Check out the docs for an example `Login` component too!
- *
- * @see https://docs.instantdb.com/docs/auth
- * @example
- *  function App() {
- *    const { isLoading, user, error } = useAuth()
- *    if (isLoading) {
- *      return <div>Loading...</div>
+ *  type Schema = {
+ *    goals: {
+ *      title: string
  *    }
- *    if (error) {
- *      return <div>Uh oh! {error.message}</div>
- *    }
- *    if (user) {
- *      return <Main user={user} />
- *    }
- *    return <Login />
  *  }
  *
+ *  const db = init<Schema>({ appId: "my-app-id" })
+ *
  */
-function useAuth() {
-    const db = (0, core_1.getDB)();
-    // (XXX): Don't set `isLoading` true if we already have data, would
-    // be better to immediately show loaded data
-    const [state, setState] = (0, react_1.useState)({
-        isLoading: true,
-        user: undefined,
-        error: undefined,
-    });
-    (0, react_1.useEffect)(() => {
-        const unsub = db.subscribeAuth((resp) => {
-            setState(Object.assign({ isLoading: false }, resp));
-        });
-        return unsub;
-    }, []);
-    return state;
+function init(config) {
+    return new InstantReact(config);
 }
-exports.useAuth = useAuth;
+exports.init = init;
+class InstantReact {
+    constructor(config) {
+        this.getLocalId = (name) => {
+            return this._core.getLocalId(name);
+        };
+        this.transact = (chunks) => {
+            return this._core.transact(chunks);
+        };
+        /**
+         * Use this to query your data!
+         *
+         * @see https://docs.instantdb.com/docs/instaql
+         *
+         * @example
+         *  // listen to all goals
+         *  db.useQuery({ goals: {} })
+         *
+         *  // goals where the title is "Get Fit"
+         *  db.useQuery({ goals: { $: { where: { title: "Get Fit" } } } })
+         *
+         *  // all goals, _alongside_ their todos
+         *  db.useQuery({ goals: { todos: {} } })
+         *
+         * Curious about the state of your query?
+         * Just add a `debugRef` to any element and inspect it with debug mode! `(cmd|ctrl) + shift + O`
+         */
+        this.useQuery = (_query) => {
+            const query = (0, core_1.coerceQuery)(_query);
+            // (XXX): Don't set `isLoading` true if we already have data, would
+            // be better to immediately show loaded data
+            const [state, setState] = (0, react_1.useState)({
+                isLoading: true,
+                data: undefined,
+                error: undefined,
+            });
+            (0, react_1.useEffect)(() => {
+                setState({ isLoading: true, data: undefined, error: undefined });
+                const unsub = this._core.subscribeQuery(query, (resp) => {
+                    setState(Object.assign({ isLoading: false }, resp));
+                });
+                return unsub;
+            }, [(0, core_1.weakHash)(query), this._core]);
+            const { debugRef } = useDebugRef({ query, state });
+            return Object.assign(Object.assign({}, state), { debugRef });
+        };
+        /**
+         * Listen for the logged in state. This is useful
+         * for deciding when to show a login screen.
+         *
+         * Check out the docs for an example `Login` component too!
+         *
+         * @see https://docs.instantdb.com/docs/auth
+         * @example
+         *  function App() {
+         *    const { isLoading, user, error } = db.useAuth()
+         *    if (isLoading) {
+         *      return <div>Loading...</div>
+         *    }
+         *    if (error) {
+         *      return <div>Uh oh! {error.message}</div>
+         *    }
+         *    if (user) {
+         *      return <Main user={user} />
+         *    }
+         *    return <Login />
+         *  }
+         *
+         */
+        this.useAuth = () => {
+            // (XXX): Don't set `isLoading` true if we already have data, would
+            // be better to immediately show loaded data
+            const [state, setState] = (0, react_1.useState)({
+                isLoading: true,
+                user: undefined,
+                error: undefined,
+            });
+            (0, react_1.useEffect)(() => {
+                const unsub = this._core._reactor.subscribeAuth((resp) => {
+                    setState(Object.assign({ isLoading: false }, resp));
+                });
+                return unsub;
+            }, []);
+            return state;
+        };
+        this._core = (0, core_1.init)(config);
+        this.auth = this._core.auth;
+    }
+}
 function useDebugRef({ query, state, }) {
     const debugRef = (0, react_1.useRef)();
-    const debugIdRef = (0, react_1.useRef)((0, core_1.id)());
+    const debugIdRef = (0, react_1.useRef)(Math.random() + "");
     const [debugMode, setDebugMode] = (0, react_1.useState)(false);
@@ -259,2 +279,50 @@ const [focused, setFocused] = (0, react_1.useState)(false);
 }
+// legacy code  below
+/**
+ * @deprecated since 0.7.0, use db.useQuery instead.
+ * @see https://docs.instantdb.com/docs/instaql
+ */
+function useQuery(_query) {
+    const query = (0, core_1.coerceQuery)(_query);
+    const db = (0, core_1.getDB)();
+    // (XXX): Don't set `isLoading` true if we already have data, would
+    // be better to immediately show loaded data
+    const [state, setState] = (0, react_1.useState)({
+        isLoading: true,
+        data: undefined,
+        error: undefined,
+    });
+    (0, react_1.useEffect)(() => {
+        setState({ isLoading: true, data: undefined, error: undefined });
+        const unsub = db.subscribeQuery(query, (resp) => {
+            setState(Object.assign({ isLoading: false }, resp));
+        });
+        return unsub;
+    }, [(0, core_1.weakHash)(query), db]);
+    const { debugRef } = useDebugRef({ query, state });
+    return Object.assign(Object.assign({}, state), { debugRef });
+}
+exports.useQuery = useQuery;
+/**
+ * @deprecated since 0.7.0, use db.useAuth instead.
+ * @see https://docs.instantdb.com/docs/auth
+ */
+function useAuth() {
+    const db = (0, core_1.getDB)();
+    // (XXX): Don't set `isLoading` true if we already have data, would
+    // be better to immediately show loaded data
+    const [state, setState] = (0, react_1.useState)({
+        isLoading: true,
+        user: undefined,
+        error: undefined,
+    });
+    (0, react_1.useEffect)(() => {
+        const unsub = db.subscribeAuth((resp) => {
+            setState(Object.assign({ isLoading: false }, resp));
+        });
+        return unsub;
+    }, []);
+    return state;
+}
+exports.useAuth = useAuth;
 //# sourceMappingURL=index.js.map

dist/module/index.d.ts

 /// <reference types="react" />
-import { tx, id, getLocalId, Config, transact, auth, Query, QueryResponse, InstantObject, Exactly, QueryState, AuthState, User } from "@instantdb/core";
+import { id, tx, Config, Query, QueryResponse, InstantObject, Exactly, AuthState, User, InstantClient, TransactionChunk, Auth, LifecycleSubscriptionState, QueryState, auth, transact, getLocalId } from "@instantdb/core";
 /**
@@ -10,23 +10,73 @@ *
  * @example
- *  init({appId: "my-app-id"})
- */
-declare function init(config: Config): import("@instantdb/core").ReactiveDB;
-/**
- * Use this to query your data!
+ *  const db = init({ appId: "my-app-id" })
  *
- * @see https://docs.instantdb.com/docs/instaql
+ * // You can also provide a a schema for type safety and editor autocomplete!
  *
- * @example
- *  // listen to all goals
- *  useQuery({ goals: {} })
+ *  type Schema = {
+ *    goals: {
+ *      title: string
+ *    }
+ *  }
  *
- *  // goals where the title is "Get Fit"
- *  useQuery({ goals: { $: { where: { title: "Get Fit" } } } })
+ *  const db = init<Schema>({ appId: "my-app-id" })
  *
- *  // all goals, _alongside_ their todos
- *  useQuery({ goals: { todos: {} } })
- *
- * Curious about the state of your query?
- * Just add a `debugRef` to any element and inspect it with debug mode! `(cmd|ctrl) + shift + O`
  */
+declare function init<Schema = {}>(config: Config): InstantReact<Schema>;
+declare class InstantReact<Schema = {}> {
+    auth: Auth;
+    _core: InstantClient<Schema>;
+    constructor(config: Config);
+    getLocalId: (name: string) => Promise<string>;
+    transact: (chunks: TransactionChunk | TransactionChunk[]) => void;
+    /**
+     * Use this to query your data!
+     *
+     * @see https://docs.instantdb.com/docs/instaql
+     *
+     * @example
+     *  // listen to all goals
+     *  db.useQuery({ goals: {} })
+     *
+     *  // goals where the title is "Get Fit"
+     *  db.useQuery({ goals: { $: { where: { title: "Get Fit" } } } })
+     *
+     *  // all goals, _alongside_ their todos
+     *  db.useQuery({ goals: { todos: {} } })
+     *
+     * Curious about the state of your query?
+     * Just add a `debugRef` to any element and inspect it with debug mode! `(cmd|ctrl) + shift + O`
+     */
+    useQuery: <Q extends Query>(_query: Exactly<Query, Q>) => {
+        debugRef: React.LegacyRef<any>;
+    } & LifecycleSubscriptionState<Q, Schema>;
+    /**
+     * Listen for the logged in state. This is useful
+     * for deciding when to show a login screen.
+     *
+     * Check out the docs for an example `Login` component too!
+     *
+     * @see https://docs.instantdb.com/docs/auth
+     * @example
+     *  function App() {
+     *    const { isLoading, user, error } = db.useAuth()
+     *    if (isLoading) {
+     *      return <div>Loading...</div>
+     *    }
+     *    if (error) {
+     *      return <div>Uh oh! {error.message}</div>
+     *    }
+     *    if (user) {
+     *      return <Main user={user} />
+     *    }
+     *    return <Login />
+     *  }
+     *
+     */
+    useAuth: () => AuthState;
+}
+export { init, id, tx, Config, Query, QueryResponse, InstantObject, User, AuthState, };
+/**
+ * @deprecated since 0.7.0, use db.useQuery instead.
+ * @see https://docs.instantdb.com/docs/instaql
+ */
 declare function useQuery<Q extends Query>(_query: Exactly<Query, Q>): {
@@ -36,26 +86,7 @@ debugRef: React.LegacyRef<any>;
 /**
- * Listen for the logged in state. This is useful
- * for deciding when to show a login screen.
- *
- * Check out the docs for an example `Login` component too!
- *
+ * @deprecated since 0.7.0, use db.useAuth instead.
  * @see https://docs.instantdb.com/docs/auth
- * @example
- *  function App() {
- *    const { isLoading, user, error } = useAuth()
- *    if (isLoading) {
- *      return <div>Loading...</div>
- *    }
- *    if (error) {
- *      return <div>Uh oh! {error.message}</div>
- *    }
- *    if (user) {
- *      return <Main user={user} />
- *    }
- *    return <Login />
- *  }
- *
  */
 declare function useAuth(): AuthState;
-export { Config, Query, QueryResponse, InstantObject, auth, id, tx, transact, getLocalId, useAuth, User, AuthState, useQuery, init, };
+export { useAuth, useQuery, auth, transact, getLocalId };
 //# sourceMappingURL=index.d.ts.map

dist/module/index.js

 var _a;
-import { getDB, weakHash, tx, id, init as initCore, getLocalId, transact, coerceQuery, auth, } from "@instantdb/core";
+import { init as initCore, id, tx, 
+// util
+weakHash, coerceQuery, 
+// deprecated
+getDB, auth, transact, getLocalId, } from "@instantdb/core";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
+let singletonDb = null;
 const isBrowser = typeof window !== "undefined";
@@ -21,88 +26,109 @@ const isDev = typeof process !== "undefined" && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === "development";
  * @example
- *  init({appId: "my-app-id"})
- */
-function init(config) {
-    return initCore(config);
-}
-/**
- * Use this to query your data!
+ *  const db = init({ appId: "my-app-id" })
  *
- * @see https://docs.instantdb.com/docs/instaql
+ * // You can also provide a a schema for type safety and editor autocomplete!
  *
- * @example
- *  // listen to all goals
- *  useQuery({ goals: {} })
- *
- *  // goals where the title is "Get Fit"
- *  useQuery({ goals: { $: { where: { title: "Get Fit" } } } })
- *
- *  // all goals, _alongside_ their todos
- *  useQuery({ goals: { todos: {} } })
- *
- * Curious about the state of your query?
- * Just add a `debugRef` to any element and inspect it with debug mode! `(cmd|ctrl) + shift + O`
- */
-function useQuery(_query) {
-    const query = coerceQuery(_query);
-    const db = getDB();
-    // (XXX): Don't set `isLoading` true if we already have data, would
-    // be better to immediately show loaded data
-    const [state, setState] = useState({
-        isLoading: true,
-        data: undefined,
-        error: undefined,
-    });
-    useEffect(() => {
-        setState({ isLoading: true, data: undefined, error: undefined });
-        const unsub = db.subscribeQuery(query, (resp) => {
-            setState(Object.assign({ isLoading: false }, resp));
-        });
-        return unsub;
-    }, [weakHash(query), db]);
-    const { debugRef } = useDebugRef({ query, state });
-    return Object.assign(Object.assign({}, state), { debugRef });
-}
-/**
- * Listen for the logged in state. This is useful
- * for deciding when to show a login screen.
- *
- * Check out the docs for an example `Login` component too!
- *
- * @see https://docs.instantdb.com/docs/auth
- * @example
- *  function App() {
- *    const { isLoading, user, error } = useAuth()
- *    if (isLoading) {
- *      return <div>Loading...</div>
+ *  type Schema = {
+ *    goals: {
+ *      title: string
  *    }
- *    if (error) {
- *      return <div>Uh oh! {error.message}</div>
- *    }
- *    if (user) {
- *      return <Main user={user} />
- *    }
- *    return <Login />
  *  }
  *
+ *  const db = init<Schema>({ appId: "my-app-id" })
+ *
  */
-function useAuth() {
-    const db = getDB();
-    // (XXX): Don't set `isLoading` true if we already have data, would
-    // be better to immediately show loaded data
-    const [state, setState] = useState({
-        isLoading: true,
-        user: undefined,
-        error: undefined,
-    });
-    useEffect(() => {
-        const unsub = db.subscribeAuth((resp) => {
-            setState(Object.assign({ isLoading: false }, resp));
-        });
-        return unsub;
-    }, []);
-    return state;
+function init(config) {
+    return new InstantReact(config);
 }
+class InstantReact {
+    constructor(config) {
+        this.getLocalId = (name) => {
+            return this._core.getLocalId(name);
+        };
+        this.transact = (chunks) => {
+            return this._core.transact(chunks);
+        };
+        /**
+         * Use this to query your data!
+         *
+         * @see https://docs.instantdb.com/docs/instaql
+         *
+         * @example
+         *  // listen to all goals
+         *  db.useQuery({ goals: {} })
+         *
+         *  // goals where the title is "Get Fit"
+         *  db.useQuery({ goals: { $: { where: { title: "Get Fit" } } } })
+         *
+         *  // all goals, _alongside_ their todos
+         *  db.useQuery({ goals: { todos: {} } })
+         *
+         * Curious about the state of your query?
+         * Just add a `debugRef` to any element and inspect it with debug mode! `(cmd|ctrl) + shift + O`
+         */
+        this.useQuery = (_query) => {
+            const query = coerceQuery(_query);
+            // (XXX): Don't set `isLoading` true if we already have data, would
+            // be better to immediately show loaded data
+            const [state, setState] = useState({
+                isLoading: true,
+                data: undefined,
+                error: undefined,
+            });
+            useEffect(() => {
+                setState({ isLoading: true, data: undefined, error: undefined });
+                const unsub = this._core.subscribeQuery(query, (resp) => {
+                    setState(Object.assign({ isLoading: false }, resp));
+                });
+                return unsub;
+            }, [weakHash(query), this._core]);
+            const { debugRef } = useDebugRef({ query, state });
+            return Object.assign(Object.assign({}, state), { debugRef });
+        };
+        /**
+         * Listen for the logged in state. This is useful
+         * for deciding when to show a login screen.
+         *
+         * Check out the docs for an example `Login` component too!
+         *
+         * @see https://docs.instantdb.com/docs/auth
+         * @example
+         *  function App() {
+         *    const { isLoading, user, error } = db.useAuth()
+         *    if (isLoading) {
+         *      return <div>Loading...</div>
+         *    }
+         *    if (error) {
+         *      return <div>Uh oh! {error.message}</div>
+         *    }
+         *    if (user) {
+         *      return <Main user={user} />
+         *    }
+         *    return <Login />
+         *  }
+         *
+         */
+        this.useAuth = () => {
+            // (XXX): Don't set `isLoading` true if we already have data, would
+            // be better to immediately show loaded data
+            const [state, setState] = useState({
+                isLoading: true,
+                user: undefined,
+                error: undefined,
+            });
+            useEffect(() => {
+                const unsub = this._core._reactor.subscribeAuth((resp) => {
+                    setState(Object.assign({ isLoading: false }, resp));
+                });
+                return unsub;
+            }, []);
+            return state;
+        };
+        this._core = initCore(config);
+        this.auth = this._core.auth;
+    }
+}
 function useDebugRef({ query, state, }) {
     const debugRef = useRef();
-    const debugIdRef = useRef(id());
+    const debugIdRef = useRef(Math.random() + "");
     const [debugMode, setDebugMode] = useState(false);
@@ -248,3 +274,50 @@ const [focused, setFocused] = useState(false);
 }
-export { auth, id, tx, transact, getLocalId, useAuth, useQuery, init, };
+export { init, id, tx, };
+// legacy code  below
+/**
+ * @deprecated since 0.7.0, use db.useQuery instead.
+ * @see https://docs.instantdb.com/docs/instaql
+ */
+function useQuery(_query) {
+    const query = coerceQuery(_query);
+    const db = getDB();
+    // (XXX): Don't set `isLoading` true if we already have data, would
+    // be better to immediately show loaded data
+    const [state, setState] = useState({
+        isLoading: true,
+        data: undefined,
+        error: undefined,
+    });
+    useEffect(() => {
+        setState({ isLoading: true, data: undefined, error: undefined });
+        const unsub = db.subscribeQuery(query, (resp) => {
+            setState(Object.assign({ isLoading: false }, resp));
+        });
+        return unsub;
+    }, [weakHash(query), db]);
+    const { debugRef } = useDebugRef({ query, state });
+    return Object.assign(Object.assign({}, state), { debugRef });
+}
+/**
+ * @deprecated since 0.7.0, use db.useAuth instead.
+ * @see https://docs.instantdb.com/docs/auth
+ */
+function useAuth() {
+    const db = getDB();
+    // (XXX): Don't set `isLoading` true if we already have data, would
+    // be better to immediately show loaded data
+    const [state, setState] = useState({
+        isLoading: true,
+        user: undefined,
+        error: undefined,
+    });
+    useEffect(() => {
+        const unsub = db.subscribeAuth((resp) => {
+            setState(Object.assign({ isLoading: false }, resp));
+        });
+        return unsub;
+    }, []);
+    return state;
+}
+export { useAuth, useQuery, auth, transact, getLocalId };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@instantdb/react",
-  "version": "0.6.5",
+  "version": "0.7.0",
   "description": "Instant DB for React",
@@ -32,4 +32,4 @@ "main": "dist/index.js",
   "dependencies": {
-    "@instantdb/core": "0.6.5"
+    "@instantdb/core": "0.7.0"
   }
 }

src/index.ts

 import {
-  getDB,
+  init as initCore,
+  id,
+  tx,
+
+  // util
   weakHash,
-  tx,
-  id,
-  init as initCore,
-  getLocalId,
+  coerceQuery,
+
+  // types
   Config,
-  transact,
-  coerceQuery,
-  auth,
   Query,
@@ -16,5 +16,15 @@ QueryResponse,
   Exactly,
-  QueryState,
   AuthState,
   User,
+  InstantClient,
+  TransactionChunk,
+  Auth,
+  LifecycleSubscriptionState,
+  QueryState,
+
+  // deprecated
+  getDB,
+  auth,
+  transact,
+  getLocalId,
 } from "@instantdb/core";
@@ -24,2 +34,4 @@
 
+let singletonDb: InstantReact | null = null;
+
 const isBrowser = typeof window !== "undefined";
@@ -47,90 +59,120 @@ const isDev =
  * @example
- *  init({appId: "my-app-id"})
- */
-function init(config: Config) {
-  return initCore(config);
-}
-
-/**
- * Use this to query your data!
+ *  const db = init({ appId: "my-app-id" })
  *
- * @see https://docs.instantdb.com/docs/instaql
+ * // You can also provide a a schema for type safety and editor autocomplete!
  *
- * @example
- *  // listen to all goals
- *  useQuery({ goals: {} })
+ *  type Schema = {
+ *    goals: {
+ *      title: string
+ *    }
+ *  }
  *
- *  // goals where the title is "Get Fit"
- *  useQuery({ goals: { $: { where: { title: "Get Fit" } } } })
+ *  const db = init<Schema>({ appId: "my-app-id" })
  *
- *  // all goals, _alongside_ their todos
- *  useQuery({ goals: { todos: {} } })
- *
- * Curious about the state of your query?
- * Just add a `debugRef` to any element and inspect it with debug mode! `(cmd|ctrl) + shift + O`
  */
-function useQuery<Q extends Query>(
-  _query: Exactly<Query, Q>,
-): { debugRef: React.LegacyRef<any> } & QueryState<Q> {
-  const query = coerceQuery(_query);
-  const db = getDB();
-  // (XXX): Don't set `isLoading` true if we already have data, would
-  // be better to immediately show loaded data
-  const [state, setState] = useState<QueryState<Q>>({
-    isLoading: true,
-    data: undefined,
-    error: undefined,
-  });
-  useEffect(() => {
-    setState({ isLoading: true, data: undefined, error: undefined });
-    const unsub = db.subscribeQuery(query, (resp: any) => {
-      setState({ isLoading: false, ...resp });
+function init<Schema = {}>(config: Config) {
+  return new InstantReact<Schema>(config);
+}
+
+class InstantReact<Schema = {}> {
+  public auth: Auth;
+  public _core: InstantClient<Schema>;
+
+  constructor(config: Config) {
+    this._core = initCore<Schema>(config);
+    this.auth = this._core.auth;
+  }
+
+  getLocalId = (name: string) => {
+    return this._core.getLocalId(name);
+  };
+
+  transact = (chunks: TransactionChunk | TransactionChunk[]) => {
+    return this._core.transact(chunks);
+  };
+
+  /**
+   * Use this to query your data!
+   *
+   * @see https://docs.instantdb.com/docs/instaql
+   *
+   * @example
+   *  // listen to all goals
+   *  db.useQuery({ goals: {} })
+   *
+   *  // goals where the title is "Get Fit"
+   *  db.useQuery({ goals: { $: { where: { title: "Get Fit" } } } })
+   *
+   *  // all goals, _alongside_ their todos
+   *  db.useQuery({ goals: { todos: {} } })
+   *
+   * Curious about the state of your query?
+   * Just add a `debugRef` to any element and inspect it with debug mode! `(cmd|ctrl) + shift + O`
+   */
+  useQuery = <Q extends Query>(
+    _query: Exactly<Query, Q>,
+  ): { debugRef: React.LegacyRef<any> } & LifecycleSubscriptionState<
+    Q,
+    Schema
+  > => {
+    const query = coerceQuery(_query);
+    // (XXX): Don't set `isLoading` true if we already have data, would
+    // be better to immediately show loaded data
+    const [state, setState] = useState<LifecycleSubscriptionState<Q, Schema>>({
+      isLoading: true,
+      data: undefined,
+      error: undefined,
     });
-    return unsub;
-  }, [weakHash(query), db]);
-  const { debugRef } = useDebugRef({ query, state });
+    useEffect(() => {
+      setState({ isLoading: true, data: undefined, error: undefined });
+      const unsub = this._core.subscribeQuery<Q>(query, (resp) => {
+        setState({ isLoading: false, ...resp });
+      });
+      return unsub;
+    }, [weakHash(query), this._core]);
+    const { debugRef } = useDebugRef({ query, state });
 
-  return { ...state, debugRef };
-}
+    return { ...state, debugRef };
+  };
 
-/**
- * Listen for the logged in state. This is useful
- * for deciding when to show a login screen.
- *
- * Check out the docs for an example `Login` component too!
- *
- * @see https://docs.instantdb.com/docs/auth
- * @example
- *  function App() {
- *    const { isLoading, user, error } = useAuth()
- *    if (isLoading) {
- *      return <div>Loading...</div>
- *    }
- *    if (error) {
- *      return <div>Uh oh! {error.message}</div>
- *    }
- *    if (user) {
- *      return <Main user={user} />
- *    }
- *    return <Login />
- *  }
- *
- */
-function useAuth(): AuthState {
-  const db = getDB();
-  // (XXX): Don't set `isLoading` true if we already have data, would
-  // be better to immediately show loaded data
-  const [state, setState] = useState({
-    isLoading: true,
-    user: undefined,
-    error: undefined,
-  });
-  useEffect(() => {
-    const unsub = db.subscribeAuth((resp: any) => {
-      setState({ isLoading: false, ...resp });
+  /**
+   * Listen for the logged in state. This is useful
+   * for deciding when to show a login screen.
+   *
+   * Check out the docs for an example `Login` component too!
+   *
+   * @see https://docs.instantdb.com/docs/auth
+   * @example
+   *  function App() {
+   *    const { isLoading, user, error } = db.useAuth()
+   *    if (isLoading) {
+   *      return <div>Loading...</div>
+   *    }
+   *    if (error) {
+   *      return <div>Uh oh! {error.message}</div>
+   *    }
+   *    if (user) {
+   *      return <Main user={user} />
+   *    }
+   *    return <Login />
+   *  }
+   *
+   */
+  useAuth = (): AuthState => {
+    // (XXX): Don't set `isLoading` true if we already have data, would
+    // be better to immediately show loaded data
+    const [state, setState] = useState({
+      isLoading: true,
+      user: undefined,
+      error: undefined,
     });
-    return unsub;
-  }, []);
+    useEffect(() => {
+      const unsub = this._core._reactor.subscribeAuth((resp: any) => {
+        setState({ isLoading: false, ...resp });
+      });
+      return unsub;
+    }, []);
 
-  return state;
+    return state;
+  };
 }
@@ -143,7 +185,7 @@
   query: object;
-  state: QueryState<any>;
+  state: LifecycleSubscriptionState<any, any>;
 }) {
   const debugRef = useRef<HTMLElement>();
 
-  const debugIdRef = useRef<string>(id());
+  const debugIdRef = useRef<string>(Math.random() + "");
   const [debugMode, setDebugMode] = useState(false);
@@ -212,3 +254,3 @@ const [focused, setFocused] = useState(false);
   query: object;
-  state: QueryState<any>;
+  state: LifecycleSubscriptionState<any, any>;
 }) {
@@ -317,2 +359,7 @@ const html = /*html*/ `
 export {
+  init,
+  id,
+  tx,
+
+  // types
   Config,
@@ -322,12 +369,59 @@ Query,
   InstantObject,
-  auth,
-  id,
-  tx,
-  transact,
-  getLocalId,
-  useAuth,
   User,
   AuthState,
-  useQuery,
-  init,
 };
+
+// legacy code  below
+
+/**
+ * @deprecated since 0.7.0, use db.useQuery instead.
+ * @see https://docs.instantdb.com/docs/instaql
+ */
+function useQuery<Q extends Query>(
+  _query: Exactly<Query, Q>,
+): { debugRef: React.LegacyRef<any> } & QueryState<Q> {
+  const query = coerceQuery(_query);
+  const db = getDB();
+  // (XXX): Don't set `isLoading` true if we already have data, would
+  // be better to immediately show loaded data
+  const [state, setState] = useState<QueryState<Q>>({
+    isLoading: true,
+    data: undefined,
+    error: undefined,
+  });
+  useEffect(() => {
+    setState({ isLoading: true, data: undefined, error: undefined });
+    const unsub = db.subscribeQuery(query, (resp: any) => {
+      setState({ isLoading: false, ...resp });
+    });
+    return unsub;
+  }, [weakHash(query), db]);
+  const { debugRef } = useDebugRef({ query, state });
+
+  return { ...state, debugRef };
+}
+
+/**
+ * @deprecated since 0.7.0, use db.useAuth instead.
+ * @see https://docs.instantdb.com/docs/auth
+ */
+function useAuth(): AuthState {
+  const db = getDB();
+  // (XXX): Don't set `isLoading` true if we already have data, would
+  // be better to immediately show loaded data
+  const [state, setState] = useState({
+    isLoading: true,
+    user: undefined,
+    error: undefined,
+  });
+  useEffect(() => {
+    const unsub = db.subscribeAuth((resp: any) => {
+      setState({ isLoading: false, ...resp });
+    });
+    return unsub;
+  }, []);
+
+  return state;
+}
+
+export { useAuth, useQuery, auth, transact, getLocalId };

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55501

increased by35.26%

Lines of code

1206

increased by30.52%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@instantdb/core@0.7.0(transitive)

• - Removed@instantdb/core@0.6.5(transitive)

• Updated@instantdb/core@0.7.0