@evolu/react 8.2.1 → 9.0.0-preview.0

package/README.md

@@ -12,4 +12,4 @@ The Evolu community is on [GitHub Discussions](https://github.com/evoluhq/evolu/
 
 To chat with other community members, you can join the [Evolu Discord](https://discord.gg/2J8yyyyxtZ).
 
-[![Twitter URL](https://img.shields.io/twitter/url/https/x.com/evoluhq.svg?style=social&label=Follow%20%40evoluhq)](https://x.com/evoluhq)
+[![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/evoluhq.svg?style=social&label=Follow%20%40evoluhq)](https://twitter.com/evoluhq)

package/dist/EvoluContext.d.ts

@@ -0,0 +1,3 @@
+import { Evolu } from "@evolu/common/evolu";
+export declare const EvoluContext: import("react").Context<Evolu<any> | null>;
+//# sourceMappingURL=EvoluContext.d.ts.map

package/dist/EvoluContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvoluContext.d.ts","sourceRoot":"","sources":["../src/EvoluContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAG5C,eAAO,MAAM,YAAY,4CAAyC,CAAC"}

package/dist/EvoluContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const EvoluContext = createContext(null);

package/dist/EvoluProvider.d.ts

@@ -0,0 +1,7 @@
+import { Evolu } from "@evolu/common/evolu";
+import { ReactNode } from "react";
+export declare const EvoluProvider: ({ children, value, }: {
+    readonly children?: ReactNode | undefined;
+    readonly value: Evolu<any>;
+}) => React.ReactElement;
+//# sourceMappingURL=EvoluProvider.d.ts.map

package/dist/EvoluProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvoluProvider.d.ts","sourceRoot":"","sources":["../src/EvoluProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,eAAO,MAAM,aAAa,GAAI,sBAG3B;IACD,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;CAC5B,KAAG,KAAK,CAAC,YAAqE,CAAC"}

package/dist/EvoluProvider.js

@@ -0,0 +1,4 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EvoluContext } from "./EvoluContext.js";
+export const EvoluProvider = ({ children, value, }) => _jsx(EvoluContext, { value: value, children: children });

package/dist/createUseEvolu.d.ts

@@ -0,0 +1,13 @@
+import { Evolu, EvoluSchema } from "@evolu/common";
+/**
+ * Creates a typed React Hook returning an instance of {@link Evolu}.
+ *
+ * ### Example
+ *
+ * ```ts
+ * const useEvolu = createUseEvolu(evolu);
+ * const { insert, update } = useEvolu();
+ * ```
+ */
+export declare const createUseEvolu: <S extends EvoluSchema>(evolu: Evolu<S>) => (() => Evolu<S>);
+//# sourceMappingURL=createUseEvolu.d.ts.map

package/dist/createUseEvolu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createUseEvolu.d.ts","sourceRoot":"","sources":["../src/createUseEvolu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGnD;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,EAElD,OAAO,KAAK,CAAC,CAAC,CAAC,KACd,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAA+B,CAAC"}

package/dist/createUseEvolu.js

@@ -0,0 +1,14 @@
+import { useEvolu } from "./useEvolu.js";
+/**
+ * Creates a typed React Hook returning an instance of {@link Evolu}.
+ *
+ * ### Example
+ *
+ * ```ts
+ * const useEvolu = createUseEvolu(evolu);
+ * const { insert, update } = useEvolu();
+ * ```
+ */
+export const createUseEvolu = (
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+evolu) => useEvolu;

package/dist/index.d.ts

@@ -1,34 +1,11 @@
-export * from "@evolu/common/public";
-export declare const 
-/**
- * Create Evolu from the database schema.
- *
- * Tables with a name prefixed with `_` are local-only, which means they are
- * never synced. It's useful for device-specific or temporal data.
- *
- * @example
- *   import * as S from "@effect/schema/Schema";
- *   import * as E from "@evolu/react";
- *
- *   const TodoId = E.id("Todo");
- *   type TodoId = typeof TodoId.Type;
- *
- *   const TodoTable = E.table({
- *     id: TodoId,
- *     title: E.NonEmptyString1000,
- *   });
- *   type TodoTable = typeof TodoTable.Type;
- *
- *   const Database = E.database({
- *     todo: TodoTable,
- *
- *     // Prefix `_` makes the table local-only (it will not sync)
- *     _todo: TodoTable,
- *   });
- *   type Database = typeof Database.Type;
- *
- *   const evolu = E.createEvolu(Database);
- */
-createEvolu: <T extends import("@evolu/common").EvoluSchema, I>(schema: import("@effect/schema/Schema").Schema<T, I>, config?: Partial<import("@evolu/common").EvoluConfig<T>>) => import("@evolu/common").Evolu<T>;
-export * from "@evolu/common-react";
+export * from "./createUseEvolu.js";
+export * from "./EvoluContext.js";
+export * from "./EvoluProvider.js";
+export * from "./useAppOwner.js";
+export * from "./useEvolu.js";
+export * from "./useEvoluError.js";
+export * from "./useQueries.js";
+export * from "./useQuery.js";
+export * from "./useQuerySubscription.js";
+export * from "./useSyncState.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,cAAc,sBAAsB,CAAC;AASrC,eAAO;AACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,WAAW,wMAC8D,CAAC;AAE5E,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC"}

package/dist/index.js

@@ -1,42 +1,10 @@
-import { EvoluFactory, FlushSync } from "@evolu/common";
-import { EvoluFactoryWeb } from "@evolu/common-web";
-import * as Effect from "effect/Effect";
-import * as Layer from "effect/Layer";
-import { flushSync } from "react-dom";
-export * from "@evolu/common/public";
-const EvoluFactoryWebReact = EvoluFactoryWeb.pipe(Layer.provide(Layer.succeed(FlushSync, flushSync)));
-// JSDoc doesn't support destructured parameters, so we must copy-paste
-// createEvolu docs from `evolu-common/src/Evolu.ts`.
-// https://github.com/microsoft/TypeScript/issues/11859
-export const { 
-/**
- * Create Evolu from the database schema.
- *
- * Tables with a name prefixed with `_` are local-only, which means they are
- * never synced. It's useful for device-specific or temporal data.
- *
- * @example
- *   import * as S from "@effect/schema/Schema";
- *   import * as E from "@evolu/react";
- *
- *   const TodoId = E.id("Todo");
- *   type TodoId = typeof TodoId.Type;
- *
- *   const TodoTable = E.table({
- *     id: TodoId,
- *     title: E.NonEmptyString1000,
- *   });
- *   type TodoTable = typeof TodoTable.Type;
- *
- *   const Database = E.database({
- *     todo: TodoTable,
- *
- *     // Prefix `_` makes the table local-only (it will not sync)
- *     _todo: TodoTable,
- *   });
- *   type Database = typeof Database.Type;
- *
- *   const evolu = E.createEvolu(Database);
- */
-createEvolu, } = EvoluFactory.pipe(Effect.provide(EvoluFactoryWebReact), Effect.runSync);
-export * from "@evolu/common-react";
+export * from "./createUseEvolu.js";
+export * from "./EvoluContext.js";
+export * from "./EvoluProvider.js";
+export * from "./useAppOwner.js";
+export * from "./useEvolu.js";
+export * from "./useEvoluError.js";
+export * from "./useQueries.js";
+export * from "./useQuery.js";
+export * from "./useQuerySubscription.js";
+export * from "./useSyncState.js";

package/dist/useAppOwner.d.ts

@@ -0,0 +1,4 @@
+import { AppOwner } from "@evolu/common";
+/** Subscribe to {@link AppOwner} changes. */
+export declare const useAppOwner: () => AppOwner | null;
+//# sourceMappingURL=useAppOwner.d.ts.map

package/dist/useAppOwner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAppOwner.d.ts","sourceRoot":"","sources":["../src/useAppOwner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAa,MAAM,eAAe,CAAC;AAIpD,6CAA6C;AAC7C,eAAO,MAAM,WAAW,QAAO,QAAQ,GAAG,IAOzC,CAAC"}

package/dist/useAppOwner.js

@@ -0,0 +1,8 @@
+import { constNull } from "@evolu/common";
+import { useSyncExternalStore } from "react";
+import { useEvolu } from "./useEvolu.js";
+/** Subscribe to {@link AppOwner} changes. */
+export const useAppOwner = () => {
+    const evolu = useEvolu();
+    return useSyncExternalStore(evolu.subscribeAppOwner, evolu.getAppOwner, constNull);
+};

package/dist/useEvolu.d.ts

@@ -0,0 +1,9 @@
+import { Evolu } from "@evolu/common/evolu";
+/**
+ * React Hook returning a generic instance of {@link Evolu}.
+ *
+ * This is intended for internal usage. Applications should use
+ * {@link createUseEvolu}, which provides a correctly typed instance.
+ */
+export declare const useEvolu: () => Evolu;
+//# sourceMappingURL=useEvolu.d.ts.map

package/dist/useEvolu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEvolu.d.ts","sourceRoot":"","sources":["../src/useEvolu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAK5C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,QAAO,KAQ3B,CAAC"}

package/dist/useEvolu.js

@@ -0,0 +1,15 @@
+import { useContext } from "react";
+import { EvoluContext } from "./EvoluContext.js";
+/**
+ * React Hook returning a generic instance of {@link Evolu}.
+ *
+ * This is intended for internal usage. Applications should use
+ * {@link createUseEvolu}, which provides a correctly typed instance.
+ */
+export const useEvolu = () => {
+    const evolu = useContext(EvoluContext);
+    if (evolu == null) {
+        throw new Error("Could not find Evolu context value. Ensure the component is wrapped in an <EvoluProvider>.");
+    }
+    return evolu;
+};

package/dist/useEvoluError.d.ts

@@ -0,0 +1,4 @@
+import { EvoluError } from "@evolu/common";
+/** Subscribe to {@link EvoluError} changes. */
+export declare const useEvoluError: () => EvoluError | null;
+//# sourceMappingURL=useEvoluError.d.ts.map

package/dist/useEvoluError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEvoluError.d.ts","sourceRoot":"","sources":["../src/useEvoluError.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,eAAe,CAAC;AAItD,+CAA+C;AAC/C,eAAO,MAAM,aAAa,QAAO,UAAU,GAAG,IAG7C,CAAC"}

package/dist/useEvoluError.js

@@ -0,0 +1,8 @@
+import { constNull } from "@evolu/common";
+import { useSyncExternalStore } from "react";
+import { useEvolu } from "./useEvolu.js";
+/** Subscribe to {@link EvoluError} changes. */
+export const useEvoluError = () => {
+    const evolu = useEvolu();
+    return useSyncExternalStore(evolu.subscribeError, evolu.getError, constNull);
+};

package/dist/useQueries.d.ts

@@ -0,0 +1,9 @@
+import { Queries, QueriesToQueryRows, QueriesToQueryRowsPromises, Row } from "@evolu/common/evolu";
+/** The same as {@link useQuery}, but for many queries. */
+export declare const useQueries: <R extends Row, Q extends Queries<R>, OQ extends Queries<R>>(queries: [...Q], options?: Partial<{
+    /** Queries that should be only loaded, not subscribed to. */
+    readonly once: [...OQ];
+    /** Reuse existing promises instead of loading so query will not suspense. */
+    readonly promises: [...QueriesToQueryRowsPromises<Q>, ...QueriesToQueryRowsPromises<OQ>];
+}>) => [...QueriesToQueryRows<Q>, ...QueriesToQueryRows<OQ>];
+//# sourceMappingURL=useQueries.d.ts.map

package/dist/useQueries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQueries.d.ts","sourceRoot":"","sources":["../src/useQueries.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,kBAAkB,EAClB,0BAA0B,EAC1B,GAAG,EACJ,MAAM,qBAAqB,CAAC;AAO7B,0DAA0D;AAC1D,eAAO,MAAM,UAAU,GACrB,CAAC,SAAS,GAAG,EACb,CAAC,SAAS,OAAO,CAAC,CAAC,CAAC,EACpB,EAAE,SAAS,OAAO,CAAC,CAAC,CAAC,EAErB,SAAS,CAAC,GAAG,CAAC,CAAC,EACf,UAAS,OAAO,CAAC;IACf,6DAA6D;IAC7D,QAAQ,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;IAEvB,6EAA6E;IAC7E,QAAQ,CAAC,QAAQ,EAAE,CACjB,GAAG,0BAA0B,CAAC,CAAC,CAAC,EAChC,GAAG,0BAA0B,CAAC,EAAE,CAAC,CAClC,CAAC;CACH,CAAM,KACN,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,EAAE,GAAG,kBAAkB,CAAC,EAAE,CAAC,CAgBtD,CAAC"}

package/dist/useQueries.js

@@ -0,0 +1,25 @@
+import { use, useRef } from "react";
+import { useEvolu } from "./useEvolu.js";
+import { useQuerySubscription } from "./useQuerySubscription.js";
+import { useWasSSR } from "./useWasSSR.js";
+/** The same as {@link useQuery}, but for many queries. */
+export const useQueries = (queries, options = {}) => {
+    const evolu = useEvolu();
+    const once = useRef(options).current.once;
+    const allQueries = once ? queries.concat(once) : queries;
+    const wasSSR = useWasSSR();
+    if (wasSSR) {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        if (!options.promises)
+            evolu.loadQueries(allQueries);
+    }
+    else {
+        if (options.promises)
+            options.promises.map(use);
+        else
+            evolu.loadQueries(allQueries).map(use);
+    }
+    return allQueries.map((query, i) => 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useQuerySubscription(query, { once: i > queries.length - 1 }));
+};

package/dist/useQuery.d.ts

@@ -0,0 +1,37 @@
+import { Query, QueryRows, Row } from "@evolu/common/evolu";
+/**
+ * Load and subscribe to the Query, and return an object with `rows` and `row`
+ * properties that are automatically updated when data changes.
+ *
+ * Note that {@link useQuery} uses React Suspense. It means every usage of
+ * {@link useQuery} blocks rendering until loading is completed. To avoid loading
+ * waterfall with more queries, use {@link useQueries}.
+ *
+ * ### Example
+ *
+ * ```ts
+ * // Get all rows.
+ * const rows = useQuery(allTodos);
+ *
+ * // Get the first row (it can be null).
+ * const row = useQuery(todoById(1));
+ *
+ * // Get all rows, but without subscribing to changes.
+ * const rows = useQuery(allTodos, { once: true });
+ *
+ * // Prefetch rows.
+ * const allTodos = evolu.createQuery((db) =>
+ *   db.selectFrom("todo").selectAll(),
+ * );
+ * const allTodosPromise = evolu.loadQuery(allTodos);
+ * // Use prefetched rows.
+ * const rows = useQuery(allTodos, { promise: allTodosPromise });
+ * ```
+ */
+export declare const useQuery: <R extends Row>(query: Query<R>, options?: Partial<{
+    /** Without subscribing to changes. */
+    readonly once: boolean;
+    /** Reuse existing promise instead of loading so query will not suspense. */
+    readonly promise: Promise<QueryRows<R>>;
+}>) => QueryRows<R>;
+//# sourceMappingURL=useQuery.d.ts.map

package/dist/useQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuery.d.ts","sourceRoot":"","sources":["../src/useQuery.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAO5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,GAAG,EACpC,OAAO,KAAK,CAAC,CAAC,CAAC,EACf,UAAS,OAAO,CAAC;IACf,sCAAsC;IACtC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IAEvB,4EAA4E;IAC5E,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;CACzC,CAAM,KACN,SAAS,CAAC,CAAC,CASb,CAAC"}

package/dist/useQuery.js

@@ -0,0 +1,45 @@
+import { use } from "react";
+import { useEvolu } from "./useEvolu.js";
+import { useQuerySubscription } from "./useQuerySubscription.js";
+import { useWasSSR } from "./useWasSSR.js";
+/**
+ * Load and subscribe to the Query, and return an object with `rows` and `row`
+ * properties that are automatically updated when data changes.
+ *
+ * Note that {@link useQuery} uses React Suspense. It means every usage of
+ * {@link useQuery} blocks rendering until loading is completed. To avoid loading
+ * waterfall with more queries, use {@link useQueries}.
+ *
+ * ### Example
+ *
+ * ```ts
+ * // Get all rows.
+ * const rows = useQuery(allTodos);
+ *
+ * // Get the first row (it can be null).
+ * const row = useQuery(todoById(1));
+ *
+ * // Get all rows, but without subscribing to changes.
+ * const rows = useQuery(allTodos, { once: true });
+ *
+ * // Prefetch rows.
+ * const allTodos = evolu.createQuery((db) =>
+ *   db.selectFrom("todo").selectAll(),
+ * );
+ * const allTodosPromise = evolu.loadQuery(allTodos);
+ * // Use prefetched rows.
+ * const rows = useQuery(allTodos, { promise: allTodosPromise });
+ * ```
+ */
+export const useQuery = (query, options = {}) => {
+    const evolu = useEvolu();
+    const wasSSR = useWasSSR();
+    if (wasSSR) {
+        if (!options.promise)
+            void evolu.loadQuery(query);
+    }
+    else {
+        use(options.promise ?? evolu.loadQuery(query));
+    }
+    return useQuerySubscription(query, options);
+};

package/dist/useQuerySubscription.d.ts

@@ -0,0 +1,10 @@
+import { Query, QueryRows, Row } from "@evolu/common/evolu";
+/** Subscribe to {@link Query} {@link QueryRows} changes. */
+export declare const useQuerySubscription: <R extends Row>(query: Query<R>, options?: Partial<{
+    /**
+     * Only subscribe and get the current value once. Subscribed query will not
+     * invoke React Suspense after a mutation.
+     */
+    readonly once: boolean;
+}>) => QueryRows<R>;
+//# sourceMappingURL=useQuerySubscription.d.ts.map

package/dist/useQuerySubscription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuerySubscription.d.ts","sourceRoot":"","sources":["../src/useQuerySubscription.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAa,MAAM,qBAAqB,CAAC;AAIvE,4DAA4D;AAC5D,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAS,GAAG,EAChD,OAAO,KAAK,CAAC,CAAC,CAAC,EACf,UAAS,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;CACxB,CAAM,KACN,SAAS,CAAC,CAAC,CAsBb,CAAC"}

package/dist/useQuerySubscription.js

@@ -0,0 +1,18 @@
+import { constVoid } from "@evolu/common";
+import { emptyRows } from "@evolu/common/evolu";
+import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import { useEvolu } from "./useEvolu.js";
+/** Subscribe to {@link Query} {@link QueryRows} changes. */
+export const useQuerySubscription = (query, options = {}) => {
+    const evolu = useEvolu();
+    // useRef to not break "rules-of-hooks"
+    const { once } = useRef(options).current;
+    if (once) {
+        /* eslint-disable react-hooks/rules-of-hooks */
+        useEffect(
+        // No useSyncExternalStore, no unnecessary updates.
+        () => evolu.subscribeQuery(query)(constVoid), [evolu, query]);
+        return evolu.getQueryRows(query);
+    }
+    return useSyncExternalStore(useMemo(() => evolu.subscribeQuery(query), [evolu, query]), useMemo(() => () => evolu.getQueryRows(query), [evolu, query]), () => emptyRows);
+};

package/dist/useSyncState.d.ts

@@ -0,0 +1,4 @@
+import { SyncState } from "@evolu/common/evolu";
+/** Subscribe to {@link SyncState} changes. */
+export declare const useSyncState: () => SyncState;
+//# sourceMappingURL=useSyncState.d.ts.map

package/dist/useSyncState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSyncState.d.ts","sourceRoot":"","sources":["../src/useSyncState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoB,MAAM,qBAAqB,CAAC;AAIlE,8CAA8C;AAC9C,eAAO,MAAM,YAAY,QAAO,SAO/B,CAAC"}

package/dist/useSyncState.js

@@ -0,0 +1,8 @@
+import { initialSyncState } from "@evolu/common/evolu";
+import { useSyncExternalStore } from "react";
+import { useEvolu } from "./useEvolu.js";
+/** Subscribe to {@link SyncState} changes. */
+export const useSyncState = () => {
+    const evolu = useEvolu();
+    return useSyncExternalStore(evolu.subscribeSyncState, evolu.getSyncState, () => initialSyncState);
+};

package/dist/useWasSSR.d.ts

@@ -0,0 +1,6 @@
+/**
+ * "Unlike the typeof window hack, this ensures that the server and hydration
+ * sees the same thing."
+ */
+export declare const useWasSSR: () => boolean;
+//# sourceMappingURL=useWasSSR.d.ts.map

package/dist/useWasSSR.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWasSSR.d.ts","sourceRoot":"","sources":["../src/useWasSSR.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,eAAO,MAAM,SAAS,QAAO,OAO5B,CAAC"}

package/dist/useWasSSR.js

@@ -0,0 +1,11 @@
+import { useRef, useSyncExternalStore } from "react";
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const emptySubscribe = () => () => { };
+/**
+ * "Unlike the typeof window hack, this ensures that the server and hydration
+ * sees the same thing."
+ */
+export const useWasSSR = () => {
+    const ref = useRef(false);
+    return useSyncExternalStore(emptySubscribe, () => ref.current, () => (ref.current = true));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evolu/react",
-  "version": "8.2.1",
+  "version": "9.0.0-preview.0",
   "description": "Evolu for React",
   "keywords": [
     "evolu",
@@ -20,7 +20,8 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "browser": "./dist/index.js"
+      "browser": "./dist/index.js",
+      "react-native": "./dist/index.js"
     }
   },
   "files": [
@@ -29,35 +30,28 @@
     "README.md"
   ],
   "devDependencies": {
-    "@types/react-dom": "~18.3.0",
-    "eslint": "^8.57.0",
-    "react-dom": "^18.3.1",
-    "typescript": "^5.4.5",
-    "vitest": "^2.0.0",
-    "@evolu/common": "5.4.5",
-    "@evolu/common-react": "8.1.1",
-    "@evolu/common-web": "8.2.2",
-    "@evolu/tsconfig": "0.0.2",
-    "eslint-config-evolu": "1.0.0"
+    "@types/react-dom": "^19.1.6",
+    "react": "^19.1.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.2",
+    "@evolu/common": "6.0.0-preview.0",
+    "@evolu/tsconfig": "0.0.2"
   },
   "peerDependencies": {
-    "@evolu/common": "^5.4.5",
-    "@evolu/common-react": "^8.1.1",
-    "@evolu/common-web": "^8.2.2",
-    "react-dom": "^18.2.0"
+    "@evolu/common": "^6.0.0-preview.0",
+    "react": "^19.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=22.0.0"
   },
   "sideEffects": [],
   "scripts": {
     "dev": "tsc --watch",
-    "build": "rm -rf dist && tsc",
-    "lint": "eslint src --ext .ts,.tsx",
-    "clean": "rm -rf .turbo node_modules dist",
+    "build": "shx rm -rf dist && tsc",
+    "clean": "shx rm -rf .turbo node_modules dist",
     "format": "prettier --write \"src/*.{ts,tsx,md}\""
   }
 }

package/src/EvoluContext.ts

@@ -0,0 +1,4 @@
+import { Evolu } from "@evolu/common/evolu";
+import { createContext } from "react";
+
+export const EvoluContext = createContext<Evolu<any> | null>(null);

package/src/EvoluProvider.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { Evolu } from "@evolu/common/evolu";
+import { ReactNode } from "react";
+import { EvoluContext } from "./EvoluContext.js";
+
+export const EvoluProvider = ({
+  children,
+  value,
+}: {
+  readonly children?: ReactNode | undefined;
+  readonly value: Evolu<any>;
+}): React.ReactElement => <EvoluContext value={value}>{children}</EvoluContext>;

package/src/createUseEvolu.ts

@@ -0,0 +1,17 @@
+import { Evolu, EvoluSchema } from "@evolu/common";
+import { useEvolu } from "./useEvolu.js";
+
+/**
+ * Creates a typed React Hook returning an instance of {@link Evolu}.
+ *
+ * ### Example
+ *
+ * ```ts
+ * const useEvolu = createUseEvolu(evolu);
+ * const { insert, update } = useEvolu();
+ * ```
+ */
+export const createUseEvolu = <S extends EvoluSchema>(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  evolu: Evolu<S>,
+): (() => Evolu<S>) => useEvolu as () => Evolu<S>;

package/src/index.ts

@@ -1,49 +1,10 @@
-import { EvoluFactory, FlushSync } from "@evolu/common";
-import { EvoluFactoryWeb } from "@evolu/common-web";
-import * as Effect from "effect/Effect";
-import * as Layer from "effect/Layer";
-import { flushSync } from "react-dom";
-
-export * from "@evolu/common/public";
-
-const EvoluFactoryWebReact = EvoluFactoryWeb.pipe(
-  Layer.provide(Layer.succeed(FlushSync, flushSync)),
-);
-
-// JSDoc doesn't support destructured parameters, so we must copy-paste
-// createEvolu docs from `evolu-common/src/Evolu.ts`.
-// https://github.com/microsoft/TypeScript/issues/11859
-export const {
-  /**
-   * Create Evolu from the database schema.
-   *
-   * Tables with a name prefixed with `_` are local-only, which means they are
-   * never synced. It's useful for device-specific or temporal data.
-   *
-   * @example
-   *   import * as S from "@effect/schema/Schema";
-   *   import * as E from "@evolu/react";
-   *
-   *   const TodoId = E.id("Todo");
-   *   type TodoId = typeof TodoId.Type;
-   *
-   *   const TodoTable = E.table({
-   *     id: TodoId,
-   *     title: E.NonEmptyString1000,
-   *   });
-   *   type TodoTable = typeof TodoTable.Type;
-   *
-   *   const Database = E.database({
-   *     todo: TodoTable,
-   *
-   *     // Prefix `_` makes the table local-only (it will not sync)
-   *     _todo: TodoTable,
-   *   });
-   *   type Database = typeof Database.Type;
-   *
-   *   const evolu = E.createEvolu(Database);
-   */
-  createEvolu,
-} = EvoluFactory.pipe(Effect.provide(EvoluFactoryWebReact), Effect.runSync);
-
-export * from "@evolu/common-react";
+export * from "./createUseEvolu.js";
+export * from "./EvoluContext.js";
+export * from "./EvoluProvider.js";
+export * from "./useAppOwner.js";
+export * from "./useEvolu.js";
+export * from "./useEvoluError.js";
+export * from "./useQueries.js";
+export * from "./useQuery.js";
+export * from "./useQuerySubscription.js";
+export * from "./useSyncState.js";

package/src/useAppOwner.ts

@@ -0,0 +1,13 @@
+import { AppOwner, constNull } from "@evolu/common";
+import { useSyncExternalStore } from "react";
+import { useEvolu } from "./useEvolu.js";
+
+/** Subscribe to {@link AppOwner} changes. */
+export const useAppOwner = (): AppOwner | null => {
+  const evolu = useEvolu();
+  return useSyncExternalStore(
+    evolu.subscribeAppOwner,
+    evolu.getAppOwner,
+    constNull,
+  );
+};

package/src/useEvolu.ts

@@ -0,0 +1,20 @@
+import { Evolu } from "@evolu/common/evolu";
+import { useContext } from "react";
+import { EvoluContext } from "./EvoluContext.js";
+import type { createUseEvolu } from "./createUseEvolu.js";
+
+/**
+ * React Hook returning a generic instance of {@link Evolu}.
+ *
+ * This is intended for internal usage. Applications should use
+ * {@link createUseEvolu}, which provides a correctly typed instance.
+ */
+export const useEvolu = (): Evolu => {
+  const evolu = useContext(EvoluContext);
+  if (evolu == null) {
+    throw new Error(
+      "Could not find Evolu context value. Ensure the component is wrapped in an <EvoluProvider>.",
+    );
+  }
+  return evolu as Evolu;
+};

package/src/useEvoluError.ts

@@ -0,0 +1,9 @@
+import { constNull, EvoluError } from "@evolu/common";
+import { useSyncExternalStore } from "react";
+import { useEvolu } from "./useEvolu.js";
+
+/** Subscribe to {@link EvoluError} changes. */
+export const useEvoluError = (): EvoluError | null => {
+  const evolu = useEvolu();
+  return useSyncExternalStore(evolu.subscribeError, evolu.getError, constNull);
+};

package/src/useQueries.ts

@@ -0,0 +1,46 @@
+import {
+  Queries,
+  QueriesToQueryRows,
+  QueriesToQueryRowsPromises,
+  Row,
+} from "@evolu/common/evolu";
+import { use, useRef } from "react";
+import { useEvolu } from "./useEvolu.js";
+import type { useQuery } from "./useQuery.js";
+import { useQuerySubscription } from "./useQuerySubscription.js";
+import { useWasSSR } from "./useWasSSR.js";
+
+/** The same as {@link useQuery}, but for many queries. */
+export const useQueries = <
+  R extends Row,
+  Q extends Queries<R>,
+  OQ extends Queries<R>,
+>(
+  queries: [...Q],
+  options: Partial<{
+    /** Queries that should be only loaded, not subscribed to. */
+    readonly once: [...OQ];
+
+    /** Reuse existing promises instead of loading so query will not suspense. */
+    readonly promises: [
+      ...QueriesToQueryRowsPromises<Q>,
+      ...QueriesToQueryRowsPromises<OQ>,
+    ];
+  }> = {},
+): [...QueriesToQueryRows<Q>, ...QueriesToQueryRows<OQ>] => {
+  const evolu = useEvolu();
+  const once = useRef(options).current.once;
+  const allQueries = once ? queries.concat(once) : queries;
+  const wasSSR = useWasSSR();
+  if (wasSSR) {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    if (!options.promises) evolu.loadQueries(allQueries);
+  } else {
+    if (options.promises) options.promises.map(use);
+    else evolu.loadQueries(allQueries).map(use);
+  }
+  return allQueries.map((query, i) =>
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useQuerySubscription(query, { once: i > queries.length - 1 }),
+  ) as never;
+};

package/src/useQuery.ts

@@ -0,0 +1,55 @@
+import { Query, QueryRows, Row } from "@evolu/common/evolu";
+import { use } from "react";
+import { useEvolu } from "./useEvolu.js";
+import type { useQueries } from "./useQueries.js";
+import { useQuerySubscription } from "./useQuerySubscription.js";
+import { useWasSSR } from "./useWasSSR.js";
+
+/**
+ * Load and subscribe to the Query, and return an object with `rows` and `row`
+ * properties that are automatically updated when data changes.
+ *
+ * Note that {@link useQuery} uses React Suspense. It means every usage of
+ * {@link useQuery} blocks rendering until loading is completed. To avoid loading
+ * waterfall with more queries, use {@link useQueries}.
+ *
+ * ### Example
+ *
+ * ```ts
+ * // Get all rows.
+ * const rows = useQuery(allTodos);
+ *
+ * // Get the first row (it can be null).
+ * const row = useQuery(todoById(1));
+ *
+ * // Get all rows, but without subscribing to changes.
+ * const rows = useQuery(allTodos, { once: true });
+ *
+ * // Prefetch rows.
+ * const allTodos = evolu.createQuery((db) =>
+ *   db.selectFrom("todo").selectAll(),
+ * );
+ * const allTodosPromise = evolu.loadQuery(allTodos);
+ * // Use prefetched rows.
+ * const rows = useQuery(allTodos, { promise: allTodosPromise });
+ * ```
+ */
+export const useQuery = <R extends Row>(
+  query: Query<R>,
+  options: Partial<{
+    /** Without subscribing to changes. */
+    readonly once: boolean;
+
+    /** Reuse existing promise instead of loading so query will not suspense. */
+    readonly promise: Promise<QueryRows<R>>;
+  }> = {},
+): QueryRows<R> => {
+  const evolu = useEvolu();
+  const wasSSR = useWasSSR();
+  if (wasSSR) {
+    if (!options.promise) void evolu.loadQuery(query);
+  } else {
+    use(options.promise ?? evolu.loadQuery(query));
+  }
+  return useQuerySubscription(query, options);
+};

package/src/useQuerySubscription.ts

@@ -0,0 +1,38 @@
+import { constVoid } from "@evolu/common";
+import { Query, QueryRows, Row, emptyRows } from "@evolu/common/evolu";
+import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import { useEvolu } from "./useEvolu.js";
+
+/** Subscribe to {@link Query} {@link QueryRows} changes. */
+export const useQuerySubscription = <R extends Row>(
+  query: Query<R>,
+  options: Partial<{
+    /**
+     * Only subscribe and get the current value once. Subscribed query will not
+     * invoke React Suspense after a mutation.
+     */
+    readonly once: boolean;
+  }> = {},
+): QueryRows<R> => {
+  const evolu = useEvolu();
+
+  // useRef to not break "rules-of-hooks"
+  const { once } = useRef(options).current;
+
+  if (once) {
+    /* eslint-disable react-hooks/rules-of-hooks */
+    useEffect(
+      // No useSyncExternalStore, no unnecessary updates.
+      () => evolu.subscribeQuery(query)(constVoid),
+      [evolu, query],
+    );
+    return evolu.getQueryRows(query);
+  }
+
+  return useSyncExternalStore(
+    useMemo(() => evolu.subscribeQuery(query), [evolu, query]),
+    useMemo(() => () => evolu.getQueryRows(query), [evolu, query]),
+    () => emptyRows as QueryRows<R>,
+    /* eslint-enable react-hooks/rules-of-hooks */
+  );
+};

package/src/useSyncState.ts

@@ -0,0 +1,13 @@
+import { SyncState, initialSyncState } from "@evolu/common/evolu";
+import { useSyncExternalStore } from "react";
+import { useEvolu } from "./useEvolu.js";
+
+/** Subscribe to {@link SyncState} changes. */
+export const useSyncState = (): SyncState => {
+  const evolu = useEvolu();
+  return useSyncExternalStore(
+    evolu.subscribeSyncState,
+    evolu.getSyncState,
+    () => initialSyncState,
+  );
+};

package/src/useWasSSR.ts

@@ -0,0 +1,17 @@
+import { useRef, useSyncExternalStore } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const emptySubscribe = () => () => {};
+
+/**
+ * "Unlike the typeof window hack, this ensures that the server and hydration
+ * sees the same thing."
+ */
+export const useWasSSR = (): boolean => {
+  const ref = useRef(false);
+  return useSyncExternalStore(
+    emptySubscribe,
+    () => ref.current,
+    () => (ref.current = true),
+  );
+};