jazz-tools 0.18.23 → 0.18.24

package/dist/tools/implementation/zodSchema/zodCo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"zodCo.d.ts","sourceRoot":"","sources":["../../../../src/tools/implementation/zodSchema/zodCo.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,qBAAqB,EACrB,gBAAgB,EAChB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,eAAe,EACf,KAAK,eAAe,EAWrB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,0BAA0B,EAC1B,2BAA2B,EAE5B,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EACL,cAAc,EAEf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,CAAC,EAAE,MAAM,kBAAkB,CAAC;AACrC,OAAO,EAEL,WAAW,EACZ,MAAM,8BAA8B,CAAC;AAiCtC,eAAO,MAAM,YAAY,GAAI,KAAK,SAAS,CAAC,CAAC,IAAI,CAAC,cAAc,SACvD,KAAK,KACX,WAAW,CAAC,KAAK,CAInB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,gBAAgB,GAAI,KAAK,SAAS,gBAAgB,UACtD,KAAK,KAQX,aAAa,CAAC,KAAK,CAGrB,CAAC;AAEF,eAAO,MAAM,cAAc,QAAO,WAGjC,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EACnC,CAAC,SAAS,qBAAqB,YAErB,CAAC,aACA,CAAC,KACX,cAAc,CAAC,CAAC,EAAE,CAAC,CAKrB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,qBAAqB,WAClD,CAAC,KACT,YAAY,CAAC,CAAC,CAGhB,CAAC;AAcF,eAAO,MAAM,gBAAgB,GAC3B,KAAK,SAAS,CAAC,CAAC,IAAI,CAAC,cAAc;UA/BnC,EAAE,IAAG,CAAC,UAAU;WACjB,EACC,IAAG,CAAC,YACH,CAAC,EAAE,IAAI,CAAC,UACN;iBAAiB,EAAG,IACzB,CAAE,YAAW,CAAC,EAAE,IAAI,CAAC,UAAU;WA4BtB,KAAK,GAAG,OAAO,CAAC,mBAAmB,CAAC,KAC1C,eAAe,CAAC,KAAK,CAQvB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,qBAAqB,WAClD,CAAC,KACT,YAAY,CAAC,CAAC,CAGhB,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAAO,gBAGtC,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAAO,eAGrC,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO,cAGpC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,OAAO,eAAe,CAAC;AAC3D,eAAO,MAAM,cAAc,QAAO,qBAEjC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,iBAAiB,UACnD,CAAC,KACR,gBAAgB,CAAC,CAAC,CAEpB,CAAC;AAEF,eAAO,MAAM,2BAA2B,GACtC,OAAO,SAAS,2BAA2B,iBAE5B,MAAM,WACZ,OAAO,KACf,0BAA0B,CAAC,OAAO,CAMpC,CAAC"}
+{"version":3,"file":"zodCo.d.ts","sourceRoot":"","sources":["../../../../src/tools/implementation/zodSchema/zodCo.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,qBAAqB,EACrB,gBAAgB,EAChB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,eAAe,EACf,KAAK,eAAe,EAWrB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,0BAA0B,EAC1B,2BAA2B,EAE5B,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EACL,cAAc,EAEf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,CAAC,EAAE,MAAM,kBAAkB,CAAC;AACrC,OAAO,EAEL,WAAW,EACZ,MAAM,8BAA8B,CAAC;AAiCtC,eAAO,MAAM,YAAY,GAAI,KAAK,SAAS,CAAC,CAAC,IAAI,CAAC,cAAc,SACvD,KAAK,KACX,WAAW,CAAC,KAAK,CAInB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,gBAAgB,GAAI,KAAK,SAAS,gBAAgB,UACtD,KAAK,KAQX,aAAa,CAAC,KAAK,CAGrB,CAAC;AAEF,eAAO,MAAM,cAAc,QAAO,WAGjC,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EACnC,CAAC,SAAS,qBAAqB,YAErB,CAAC,aACA,CAAC,KACX,cAAc,CAAC,CAAC,EAAE,CAAC,CAKrB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,qBAAqB,WAClD,CAAC,KACT,YAAY,CAAC,CAAC,CAGhB,CAAC;AAcF,eAAO,MAAM,gBAAgB,GAC3B,KAAK,SAAS,CAAC,CAAC,IAAI,CAAC,cAAc;UAhCpB,EAAG,IAAI,CAAC,UAAU;WACrB,EAAG,IAAI,CAAC,YAAY,CAClC,EACE,IAAC,CAAC,UAAU;iBAEd,EAAG,IAAI,CAAC,YAAY,CAAC,EAAG,IAAG,CACzB,UAAO;WA4BA,KAAK,GAAG,OAAO,CAAC,mBAAmB,CAAC,KAC1C,eAAe,CAAC,KAAK,CAQvB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,qBAAqB,WAClD,CAAC,KACT,YAAY,CAAC,CAAC,CAGhB,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAAO,gBAGtC,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAAO,eAGrC,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO,cAGpC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,OAAO,eAAe,CAAC;AAC3D,eAAO,MAAM,cAAc,QAAO,qBAEjC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,iBAAiB,UACnD,CAAC,KACR,gBAAgB,CAAC,CAAC,CAEpB,CAAC;AAEF,eAAO,MAAM,2BAA2B,GACtC,OAAO,SAAS,2BAA2B,iBAE5B,MAAM,WACZ,OAAO,KACf,0BAA0B,CAAC,OAAO,CAMpC,CAAC"}

package/package.json

@@ -187,7 +187,7 @@
   },
   "type": "module",
   "license": "MIT",
-  "version": "0.18.23",
+  "version": "0.18.24",
   "dependencies": {
     "@manuscripts/prosemirror-recreate-steps": "^0.1.4",
     "@scure/base": "1.2.1",
@@ -204,9 +204,9 @@
     "prosemirror-transform": "^1.9.0",
     "use-sync-external-store": "^1.5.0",
     "zod": "4.1.11",
-    "cojson": "0.18.23",
-    "cojson-storage-indexeddb": "0.18.23",
-    "cojson-transport-ws": "0.18.23"
+    "cojson-storage-indexeddb": "0.18.24",
+    "cojson": "0.18.24",
+    "cojson-transport-ws": "0.18.24"
   },
   "devDependencies": {
     "@scure/bip39": "^1.3.0",
@@ -302,6 +302,7 @@
     "format-and-lint": "biome check .",
     "format-and-lint:fix": "biome check . --write",
     "dev": "tsup --watch --dts",
+    "bench": "vitest bench --run --root ../../ --project jazz-tools",
     "test": "vitest --run --root ../../ --project jazz-tools",
     "test:watch": "vitest --watch --root ../../ --project jazz-tools",
     "types": "tsc --outDir dist",

package/src/react/hooks.tsx

@@ -53,4 +53,7 @@ export {
   useCoStateWithSelector,
   useAccountWithSelector,
   useSyncConnectionStatus,
+  useCoValueSubscription,
+  useAccountSubscription,
+  useSubscriptionSelector,
 } from "jazz-tools/react-core";

package/src/react/index.ts

@@ -10,8 +10,17 @@ export {
   useCoStateWithSelector,
   useAccountWithSelector,
   useSyncConnectionStatus,
+  useCoValueSubscription,
+  useAccountSubscription,
+  useSubscriptionSelector,
 } from "./hooks.js";
 
+export {
+  createCoValueSubscriptionContext,
+  createAccountSubscriptionContext,
+  type CoValueSubscription,
+} from "jazz-tools/react-core";
+
 export { createInviteLink, parseInviteLink } from "jazz-tools/browser";
 
 export * from "./auth/auth.js";

package/src/react-core/hooks.ts

@@ -13,7 +13,6 @@ import {
   AnyAccountSchema,
   CoValue,
   CoValueClassOrSchema,
-  Group,
   InboxSender,
   InstanceOfSchema,
   JazzContextManager,
@@ -27,6 +26,7 @@ import {
 } from "jazz-tools";
 import { JazzContext, JazzContextManagerContext } from "./provider.js";
 import { getCurrentAccountFromContextManager } from "./utils.js";
+import { CoValueSubscription } from "./types.js";
 
 export function useJazzContext<Acc extends Account>() {
   const value = useContext(JazzContext) as JazzContextType<Acc>;
@@ -82,7 +82,7 @@ export function useIsAuthenticated() {
   );
 }
 
-function useCoValueSubscription<
+export function useCoValueSubscription<
   S extends CoValueClassOrSchema,
   const R extends ResolveQuery<S>,
 >(
@@ -161,7 +161,7 @@ function useCoValueSubscription<
     });
   }, [Schema, id, contextManager, branchName, branchOwnerId]);
 
-  return subscription.subscription;
+  return subscription.subscription as CoValueSubscription<S, R>;
 }
 
 /**
@@ -476,7 +476,39 @@ export function useCoStateWithSelector<
   );
 }
 
-function useAccountSubscription<
+export function useSubscriptionSelector<
+  S extends CoValueClassOrSchema,
+  R extends ResolveQuery<S>,
+  TSelectorReturn = Loaded<S, R> | undefined | null,
+>(
+  subscription: CoValueSubscription<S, R>,
+  options?: {
+    select?: (value: Loaded<S, R> | undefined | null) => TSelectorReturn;
+    equalityFn?: (a: TSelectorReturn, b: TSelectorReturn) => boolean;
+  },
+) {
+  return useSyncExternalStoreWithSelector<
+    Loaded<S, R> | undefined | null,
+    TSelectorReturn
+  >(
+    React.useCallback(
+      (callback) => {
+        if (!subscription) {
+          return () => {};
+        }
+
+        return subscription.subscribe(callback);
+      },
+      [subscription],
+    ),
+    () => (subscription ? subscription.getCurrentValue() : null),
+    () => (subscription ? subscription.getCurrentValue() : null),
+    options?.select ?? ((value) => value as TSelectorReturn),
+    options?.equalityFn ?? Object.is,
+  );
+}
+
+export function useAccountSubscription<
   S extends AccountClass<Account> | AnyAccountSchema,
   const R extends ResolveQuery<S>,
 >(
@@ -547,7 +579,7 @@ function useAccountSubscription<
     });
   }, [Schema, contextManager, branchName, branchOwnerId]);
 
-  return subscription.subscription;
+  return subscription.subscription as CoValueSubscription<S, R>;
 }
 
 /**

package/src/react-core/index.ts

@@ -1,3 +1,5 @@
 export * from "./hooks.js";
+export * from "./subscription-provider.js";
 export * from "./provider.js";
 export * from "./auth/index.js";
+export type * from "./types.js";

package/src/react-core/subscription-provider.tsx

@@ -0,0 +1,144 @@
+import React from "react";
+import {
+  Account,
+  AccountClass,
+  AnyAccountSchema,
+  CoValueClassOrSchema,
+  Loaded,
+  ResolveQuery,
+  ResolveQueryStrict,
+} from "jazz-tools";
+import {
+  useAccountSubscription,
+  useCoValueSubscription,
+  useSubscriptionSelector,
+} from "./hooks.js";
+import type { CoValueSubscription } from "./types.js";
+
+export function createCoValueSubscriptionContext<
+  S extends CoValueClassOrSchema,
+  const R extends ResolveQuery<S> = true,
+>(schema: S, resolve?: ResolveQueryStrict<S, R>) {
+  const Context = React.createContext<CoValueSubscription<S, R>>(null);
+
+  return {
+    Provider: ({
+      id,
+      options,
+      loadingFallback,
+      unavailableFallback,
+      children,
+    }: React.PropsWithChildren<{
+      id: string | undefined | null;
+      options?: Omit<
+        Parameters<typeof useCoValueSubscription<S, R>>[2],
+        "resolve"
+      >;
+      loadingFallback?: React.ReactNode;
+      unavailableFallback?: React.ReactNode;
+    }>) => {
+      const subscription = useCoValueSubscription(schema, id, {
+        ...options,
+        resolve: resolve,
+      });
+
+      const loadState = useSubscriptionSelector(subscription, {
+        select: (value) => (!value ? value : true),
+      });
+
+      if (loadState === undefined) {
+        return loadingFallback ?? null;
+      }
+
+      if (loadState === null) {
+        return unavailableFallback ?? null;
+      }
+
+      return (
+        <Context.Provider value={subscription}>{children}</Context.Provider>
+      );
+    },
+    useSelector: <TSelectorReturn = Loaded<S, R>>(options?: {
+      select?: (value: Loaded<S, R>) => TSelectorReturn;
+      equalityFn?: (a: TSelectorReturn, b: TSelectorReturn) => boolean;
+    }) => {
+      const subscription = React.useContext(Context);
+
+      if (!subscription) {
+        throw new Error(
+          "useSelector must be used within a coValue subscription provider",
+        );
+      }
+
+      return useSubscriptionSelector<S, R, TSelectorReturn>(
+        subscription,
+        options as Parameters<
+          typeof useSubscriptionSelector<S, R, TSelectorReturn>
+        >[1],
+      );
+    },
+  };
+}
+
+export function createAccountSubscriptionContext<
+  A extends AccountClass<Account> | AnyAccountSchema,
+  const R extends ResolveQuery<A> = true,
+>(schema: A, resolve?: ResolveQueryStrict<A, R>) {
+  const Context = React.createContext<CoValueSubscription<A, R>>(null);
+
+  return {
+    Provider: ({
+      options,
+      loadingFallback,
+      unavailableFallback,
+      children,
+    }: React.PropsWithChildren<{
+      options?: Omit<
+        Parameters<typeof useAccountSubscription<A, R>>[1],
+        "resolve"
+      >;
+      loadingFallback?: React.ReactNode;
+      unavailableFallback?: React.ReactNode;
+    }>) => {
+      const subscription = useAccountSubscription(schema, {
+        ...options,
+        resolve: resolve,
+      });
+
+      const loadState = useSubscriptionSelector(subscription, {
+        select: (value) => (!value ? value : true),
+      });
+
+      if (loadState === undefined) {
+        return loadingFallback ?? null;
+      }
+
+      if (loadState === null) {
+        return unavailableFallback ?? null;
+      }
+
+      return (
+        <Context.Provider value={subscription}>{children}</Context.Provider>
+      );
+    },
+    useSelector: <TSelectorReturn = Loaded<A, R>>(options?: {
+      select?: (value: Loaded<A, R>) => TSelectorReturn;
+      equalityFn?: (a: TSelectorReturn, b: TSelectorReturn) => boolean;
+    }) => {
+      const subscription = React.useContext(Context);
+
+      if (!subscription) {
+        throw new Error(
+          "useSelector must be used within an account subscription provider",
+        );
+      }
+
+      return useSubscriptionSelector<A, R, TSelectorReturn>(
+        subscription,
+        options as Parameters<
+          typeof useSubscriptionSelector<A, R, TSelectorReturn>
+        >[1],
+      );
+    },
+  };
+}

package/src/react-core/tests/subscription.bench.tsx

@@ -0,0 +1,319 @@
+// @vitest-environment happy-dom
+
+import { cojsonInternals } from "cojson";
+import { co, z } from "jazz-tools";
+import { describe, bench } from "vitest";
+import {
+  useAccountSubscription,
+  useSubscriptionSelector,
+  useAccountWithSelector,
+  CoValueSubscription,
+} from "../index.js";
+import { createJazzTestAccount, setupJazzTestSync } from "../testing.js";
+import { render } from "./testUtils.js";
+
+cojsonInternals.setCoValueLoadingRetryDelay(300);
+
+await setupJazzTestSync();
+await createJazzTestAccount({
+  isCurrentActiveAccount: true,
+  creationProps: { name: "Hermes Puggington" },
+});
+
+const AccountSchema = co.account();
+
+const AccountName = () => {
+  const name = useAccountWithSelector(AccountSchema, {
+    resolve: {
+      profile: true,
+    },
+    select: (account) => account?.profile?.name,
+  });
+
+  if (!name) return null;
+
+  return <span>{name}</span>;
+};
+
+const AccountNameFromSubscription = ({
+  subscription,
+}: {
+  subscription: CoValueSubscription<typeof AccountSchema, { profile: true }>;
+}) => {
+  const name = useSubscriptionSelector(subscription, {
+    select: (account) => account?.profile?.name,
+  });
+
+  if (!name) return null;
+
+  return <span>{name}</span>;
+};
+
+const UseAccountWithSelector = () => {
+  return (
+    <div>
+      {Array.from({ length: 1000 }).map((_, i) => (
+        <AccountName key={i} />
+      ))}
+    </div>
+  );
+};
+
+const UseAccountSubscription = () => {
+  const subscription = useAccountSubscription(AccountSchema, {
+    resolve: {
+      profile: true,
+    },
+  });
+
+  return (
+    <div>
+      {Array.from({ length: 1000 }).map((_, i) => (
+        <AccountNameFromSubscription key={i} subscription={subscription} />
+      ))}
+    </div>
+  );
+};
+
+describe("1000 value loads", () => {
+  bench(
+    "useAccountSubscription + useSubscriptionSelector",
+    () => {
+      render(<UseAccountSubscription />);
+    },
+    { iterations: 50 },
+  );
+
+  bench(
+    "useAccountWithSelector",
+    () => {
+      render(<UseAccountWithSelector />);
+    },
+    { iterations: 50 },
+  );
+});
+
+describe("deeply resolved coMaps", async () => {
+  const Task = co.map({
+    title: z.string(),
+    get project() {
+      return Project;
+    },
+  });
+
+  const TaskList = co.list(Task);
+
+  const Project = co.map({
+    name: z.string(),
+    tasks: TaskList,
+    draftTasks: TaskList,
+    deletedTasks: TaskList,
+  });
+
+  const Organization = co.map({
+    name: z.string(),
+    projects: co.list(Project),
+  });
+
+  const AccountRoot = co.map({
+    organizations: co.list(Organization),
+  });
+
+  const AccountSchema = co
+    .account({
+      root: AccountRoot,
+      profile: co.profile(),
+    })
+    .withMigration(async (account) => {
+      if (!account.$jazz.has("root")) {
+        account.$jazz.set("root", {
+          organizations: [
+            {
+              name: "My organization",
+              projects: [
+                {
+                  name: "My project",
+                  tasks: [],
+                  draftTasks: [],
+                  deletedTasks: [],
+                },
+              ],
+            },
+          ],
+        });
+      }
+    });
+
+  const account = await createJazzTestAccount({
+    AccountSchema,
+    isCurrentActiveAccount: true,
+    creationProps: { name: "Hermes Puggington" },
+  });
+
+  const root = await account.root.$jazz.ensureLoaded({
+    resolve: {
+      organizations: {
+        $each: {
+          projects: {
+            $each: true,
+          },
+        },
+      },
+    },
+  });
+
+  const project = root.organizations[0]?.projects[0]!;
+
+  for (let i = 0; i < 250; i++) {
+    const taskList = (["tasks", "draftTasks", "deletedTasks"] as const)[i % 3]!;
+
+    project[taskList].$jazz.push({
+      title: `Task ${i}`,
+      project,
+    });
+  }
+
+  const SingleSubscriptionTasks = ({
+    subscription,
+    taskListType,
+  }: {
+    subscription: CoValueSubscription<
+      typeof AccountSchema,
+      {
+        root: {
+          organizations: {
+            $each: {
+              projects: {
+                $each: {
+                  tasks: { $each: { project: true } };
+                  draftTasks: { $each: { project: true } };
+                  deletedTasks: { $each: { project: true } };
+                };
+              };
+            };
+          };
+        };
+      }
+    >;
+    taskListType: "tasks" | "draftTasks" | "deletedTasks";
+  }) => {
+    const allProjectsTasks = useSubscriptionSelector(subscription, {
+      select: (account) => {
+        return account?.root.organizations.flatMap((org) =>
+          org?.projects.flatMap((project) =>
+            project?.[taskListType]?.flatMap((task) => task),
+          ),
+        );
+      },
+    });
+
+    return (
+      <div>
+        {allProjectsTasks?.map((task) => (
+          <div key={task?.$jazz.id}>{task?.title}</div>
+        ))}
+      </div>
+    );
+  };
+
+  const SingleSubscription = () => {
+    const subscription = useAccountSubscription(AccountSchema, {
+      resolve: {
+        root: {
+          organizations: {
+            $each: {
+              projects: {
+                $each: {
+                  tasks: { $each: { project: true } },
+                  draftTasks: { $each: { project: true } },
+                  deletedTasks: { $each: { project: true } },
+                },
+              },
+            },
+          },
+        },
+      },
+    });
+
+    return (
+      <div>
+        <SingleSubscriptionTasks
+          subscription={subscription}
+          taskListType="tasks"
+        />
+        <SingleSubscriptionTasks
+          subscription={subscription}
+          taskListType="draftTasks"
+        />
+        <SingleSubscriptionTasks
+          subscription={subscription}
+          taskListType="deletedTasks"
+        />
+      </div>
+    );
+  };
+
+  bench(
+    "useAccountSubscription + useSubscriptionSelector",
+    () => {
+      render(<SingleSubscription />);
+    },
+    { iterations: 200 },
+  );
+
+  const MultipleSubscriptionTasks = ({
+    taskListType,
+  }: {
+    taskListType: "tasks" | "draftTasks" | "deletedTasks";
+  }) => {
+    const subscription = useAccountWithSelector(AccountSchema, {
+      resolve: {
+        root: {
+          organizations: {
+            $each: {
+              projects: {
+                $each: {
+                  tasks: { $each: { project: true } },
+                  draftTasks: { $each: { project: true } },
+                  deletedTasks: { $each: { project: true } },
+                },
+              },
+            },
+          },
+        },
+      },
+      select: (account) =>
+        account?.root.organizations.flatMap((org) =>
+          org?.projects.flatMap((project) =>
+            project?.[taskListType]?.flatMap((task) => task),
+          ),
+        ),
+    });
+
+    return (
+      <div>
+        {subscription?.map((task) => (
+          <div key={task?.$jazz.id}>{task?.title}</div>
+        ))}
+      </div>
+    );
+  };
+
+  const MultipleSubscription = () => {
+    return (
+      <div>
+        <MultipleSubscriptionTasks taskListType="tasks" />
+        <MultipleSubscriptionTasks taskListType="draftTasks" />
+        <MultipleSubscriptionTasks taskListType="deletedTasks" />
+      </div>
+    );
+  };
+
+  bench(
+    "useAccountWithSelector",
+    () => {
+      render(<MultipleSubscription />);
+    },
+    { iterations: 200 },
+  );
+});