jazz-tools 0.17.13 → 0.18.0

package/src/media/utils.ts

@@ -6,7 +6,7 @@ export function highestResAvailable(
   wantedWidth: number,
   wantedHeight: number,
 ): { width: number; height: number; image: FileStream } | null {
-  const availableSizes: [number, number, string][] = image._raw
+  const availableSizes: [number, number, string][] = image.$jazz.raw
     .keys()
     .filter((key) => /^\d+x\d+$/.test(key))
     .map((key) => {
@@ -29,7 +29,9 @@ export function highestResAvailable(
       return {
         size,
         match: sizesMatchWanted(size[0], size[1], wantedWidth, wantedHeight),
-        isLoaded: isLoaded(image._raw.get(size[2]) as CoID<any> | undefined),
+        isLoaded: isLoaded(
+          image.$jazz.raw.get(size[2]) as CoID<any> | undefined,
+        ),
       };
     })
     .sort((a, b) => a.match - b.match);
@@ -102,7 +104,7 @@ function isLoaded(id: CoID<any> | null | undefined): boolean {
     return false;
   }
 
-  return !!Account.getMe()._raw.core.node.getLoaded(id);
+  return !!Account.getMe().$jazz.localNode.getLoaded(id);
 }
 
 export async function loadImage(
@@ -131,7 +133,7 @@ export async function loadImage(
     return null;
   }
 
-  const loadedOriginal = await FileStream.load(imageOrId.original.id);
+  const loadedOriginal = await FileStream.load(imageOrId.original.$jazz.id);
 
   if (!loadedOriginal) {
     console.warn("Unable to find the original image");
@@ -150,6 +152,7 @@ export async function loadImageBySize(
   wantedWidth: number,
   wantedHeight: number,
 ): Promise<{ width: number; height: number; image: FileStream } | null> {
+  // @ts-expect-error The resolved type for CoMap does not include catchall properties
   const image: ImageDefinition | null =
     typeof imageOrId === "string"
       ? await ImageDefinition.load(imageOrId)
@@ -163,7 +166,7 @@ export async function loadImageBySize(
     return loadImage(imageOrId);
   }
 
-  const availableSizes: [number, number, string][] = image._raw
+  const availableSizes: [number, number, string][] = image.$jazz.raw
     .keys()
     .filter((key) => /^\d+x\d+$/.test(key))
     .map((key) => {
@@ -189,7 +192,7 @@ export async function loadImageBySize(
   // image[bestTarget.size[2]] returns undefined if FileStream hasn't loaded yet.
   // Since we only need the file's ID to fetch it later, we check the raw _refs
   // which contain only the linked covalue's ID.
-  const file = image._refs[bestTarget.size[2]];
+  const file = image.$jazz.refs[bestTarget.size[2]];
 
   if (!file) {
     return null;

package/src/prosemirror/lib/plugin.ts

@@ -57,7 +57,7 @@ export function createJazzPlugin(
       setView(editorView);
 
       if (coRichText) {
-        coRichText.subscribe(handleCoRichTextChange);
+        coRichText.$jazz.subscribe(handleCoRichTextChange);
       }
 
       return {

package/src/prosemirror/lib/sync.ts

@@ -109,7 +109,7 @@ export function createSyncHandlers(coRichText: CoRichText | undefined) {
       const str = proseMirrorToHtml(tr.doc);
       localChange = true;
       try {
-        coRichText.applyDiff(str);
+        coRichText.$jazz.applyDiff(str);
       } finally {
         localChange = false;
       }

package/src/prosemirror/tests/plugin.test.ts

@@ -64,7 +64,7 @@ describe("createJazzPlugin", () => {
     const { coRichText, view } = await setupTest();
 
     // Update CoRichText content
-    coRichText.applyDiff("<p>Updated content</p>");
+    coRichText.$jazz.applyDiff("<p>Updated content</p>");
 
     // Wait for the next tick to allow the update to propagate
     await new Promise((resolve) => setTimeout(resolve, 0));
@@ -135,7 +135,7 @@ describe("createJazzPlugin", () => {
     expect(view.state.selection.to).toBe(5);
 
     // Update CoRichText content
-    coRichText.applyDiff("<p>Hello world</p>");
+    coRichText.$jazz.applyDiff("<p>Hello world</p>");
 
     await new Promise((resolve) => setTimeout(resolve, 0));
 
@@ -153,7 +153,7 @@ describe("createJazzPlugin", () => {
     await new Promise((resolve) => setTimeout(resolve, 0));
 
     // Update CoRichText content
-    coRichText.applyDiff(
+    coRichText.$jazz.applyDiff(
       "<ol><li><p>A <strong>hu</strong><em><strong>man</strong></em>.</p></li></ol>",
     );
 
@@ -171,7 +171,7 @@ describe("createJazzPlugin", () => {
     );
 
     // Update CoRichText content
-    coRichText.applyDiff("<p>A human💪</p>");
+    coRichText.$jazz.applyDiff("<p>A human💪</p>");
 
     // Wait for the next tick to allow the update to propagate
     await new Promise((resolve) => setTimeout(resolve, 0));

package/src/react/media/image.tsx

@@ -149,7 +149,7 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
     );
 
     if (!bestImage) return image.placeholderDataURL;
-    if (lastBestImage.current?.[0] === bestImage.image.id)
+    if (lastBestImage.current?.[0] === bestImage.image.$jazz.id)
       return lastBestImage.current?.[1];
 
     const blob = bestImage.image.toBlob();
@@ -157,7 +157,7 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
     if (blob) {
       const url = URL.createObjectURL(blob);
       revokeObjectURL(lastBestImage.current?.[1]);
-      lastBestImage.current = [bestImage.image.id, url];
+      lastBestImage.current = [bestImage.image.$jazz.id, url];
       return url;
     }
 

package/src/react/tests/media/image.test.tsx

@@ -27,7 +27,7 @@ describe("Image", async () => {
     });
 
     it("should render an empty image if the image is not loaded yet", async () => {
-      const original = FileStream.create({ owner: account._owner });
+      const original = FileStream.create({ owner: account });
       original.start({ mimeType: "image/jpeg" });
       // Don't end original, so it has no chunks
 
@@ -42,7 +42,7 @@ describe("Image", async () => {
         },
       );
 
-      const { container } = render(<Image imageId={im.id} alt="test" />, {
+      const { container } = render(<Image imageId={im.$jazz.id} alt="test" />, {
         account,
       });
 
@@ -58,7 +58,7 @@ describe("Image", async () => {
       const placeholderDataUrl =
         "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=";
 
-      const original = FileStream.create({ owner: account._owner });
+      const original = FileStream.create({ owner: account });
       original.start({ mimeType: "image/jpeg" });
       // Don't end original, so it has no chunks
 
@@ -74,7 +74,7 @@ describe("Image", async () => {
         },
       );
 
-      const { container } = render(<Image imageId={im.id} alt="test" />, {
+      const { container } = render(<Image imageId={im.$jazz.id} alt="test" />, {
         account,
       });
 
@@ -104,7 +104,7 @@ describe("Image", async () => {
         },
       );
 
-      render(<Image imageId={im.id} alt="test-loading" />, { account });
+      render(<Image imageId={im.$jazz.id} alt="test-loading" />, { account });
 
       await waitFor(() => {
         expect(
@@ -129,7 +129,7 @@ describe("Image", async () => {
         },
       );
 
-      const { container } = render(<Image imageId={im.id} alt="test" />, {
+      const { container } = render(<Image imageId={im.$jazz.id} alt="test" />, {
         account,
       });
 
@@ -152,7 +152,12 @@ describe("Image", async () => {
       );
 
       const { container } = render(
-        <Image imageId={im.id} alt="test" width="original" height="original" />,
+        <Image
+          imageId={im.$jazz.id}
+          alt="test"
+          width="original"
+          height="original"
+        />,
         {
           account,
         },
@@ -177,7 +182,12 @@ describe("Image", async () => {
       );
 
       const { container } = render(
-        <Image imageId={im.id} alt="test" width="original" height={300} />,
+        <Image
+          imageId={im.$jazz.id}
+          alt="test"
+          width="original"
+          height={300}
+        />,
         {
           account,
         },
@@ -202,7 +212,7 @@ describe("Image", async () => {
       );
 
       const { container } = render(
-        <Image imageId={im.id} alt="test" width={50} />,
+        <Image imageId={im.$jazz.id} alt="test" width={50} />,
         { account },
       );
 
@@ -225,7 +235,7 @@ describe("Image", async () => {
       );
 
       const { container } = render(
-        <Image imageId={im.id} alt="test" height={50} />,
+        <Image imageId={im.$jazz.id} alt="test" height={50} />,
         { account },
       );
 
@@ -248,7 +258,7 @@ describe("Image", async () => {
       );
 
       const { container } = render(
-        <Image imageId={im.id} alt="test" className="test-class" />,
+        <Image imageId={im.$jazz.id} alt="test" className="test-class" />,
         { account },
       );
 
@@ -282,11 +292,11 @@ describe("Image", async () => {
         },
       );
 
-      im["500x500"] = original;
-      im["256x256"] = await createDummyFileStream(256, account);
+      im.$jazz.set("500x500", original);
+      im.$jazz.set("256x256", await createDummyFileStream(256, account));
 
       const { container } = render(
-        <Image imageId={im.id} alt="test-progressive" width={300} />,
+        <Image imageId={im.$jazz.id} alt="test-progressive" width={300} />,
         { account },
       );
 
@@ -322,11 +332,11 @@ describe("Image", async () => {
         },
       );
 
-      im["1920x1080"] = original;
-      im["256x256"] = await createDummyFileStream(256, account);
+      im.$jazz.set("1920x1080", original);
+      im.$jazz.set("256x256", await createDummyFileStream(256, account));
 
       const { container } = render(
-        <Image imageId={im.id} alt="test-progressive" width={1024} />,
+        <Image imageId={im.$jazz.id} alt="test-progressive" width={1024} />,
         { account },
       );
 
@@ -339,7 +349,7 @@ describe("Image", async () => {
       expect(createObjectURLSpy).toHaveBeenCalledTimes(1);
 
       // Load higher resolution image
-      im["1024x1024"] = await createDummyFileStream(1024, account);
+      im.$jazz.set("1024x1024", await createDummyFileStream(1024, account));
 
       await waitFor(() => {
         expect((container.querySelector("img") as HTMLImageElement).src).toBe(
@@ -375,12 +385,12 @@ describe("Image", async () => {
         },
       );
 
-      im["100x100"] = original;
-      im["256x256"] = await createDummyFileStream(256, account);
-      im["1024x1024"] = await createDummyFileStream(1024, account);
+      im.$jazz.set("100x100", original);
+      im.$jazz.set("256x256", await createDummyFileStream(256, account));
+      im.$jazz.set("1024x1024", await createDummyFileStream(1024, account));
 
       const { container } = render(
-        <Image imageId={im.id} alt="test-progressive" width={256} />,
+        <Image imageId={im.$jazz.id} alt="test-progressive" width={256} />,
         { account },
       );
 
@@ -415,11 +425,11 @@ describe("Image", async () => {
         },
       );
 
-      im["100x100"] = original;
-      im["256x256"] = await createDummyFileStream(256, account);
+      im.$jazz.set("100x100", original);
+      im.$jazz.set("256x256", await createDummyFileStream(256, account));
 
       const { container } = render(
-        <Image imageId={im.id} alt="test-progressive" width={100} />,
+        <Image imageId={im.$jazz.id} alt="test-progressive" width={100} />,
         { account },
       );
 
@@ -453,11 +463,16 @@ describe("Image", async () => {
           owner: account,
         },
       );
-      im["256x256"] = original;
-      im["1024x1024"] = await createDummyFileStream(1024, account);
+      im.$jazz.set("256x256", original);
+      im.$jazz.set("1024x1024", await createDummyFileStream(1024, account));
 
       const { container, rerender } = render(
-        <Image imageId={im.id} alt="test-dynamic" width={256} height={256} />,
+        <Image
+          imageId={im.$jazz.id}
+          alt="test-dynamic"
+          width={256}
+          height={256}
+        />,
         { account },
       );
 
@@ -470,7 +485,12 @@ describe("Image", async () => {
       expect(createObjectURLSpy).toHaveBeenCalledTimes(1);
 
       rerender(
-        <Image imageId={im.id} alt="test-dynamic" width={1024} height={1024} />,
+        <Image
+          imageId={im.$jazz.id}
+          alt="test-dynamic"
+          width={1024}
+          height={1024}
+        />,
       );
 
       // After prop change, should load 1024x1024
@@ -499,7 +519,7 @@ describe("Image", async () => {
       const ref = { current: null as HTMLImageElement | null };
 
       const { container } = render(
-        <Image imageId={im.id} alt="test" ref={ref} />,
+        <Image imageId={im.$jazz.id} alt="test" ref={ref} />,
         { account },
       );
 
@@ -523,7 +543,7 @@ describe("Image", async () => {
       );
 
       const { container } = render(
-        <Image imageId={im.id} alt="test" loading="lazy" />,
+        <Image imageId={im.$jazz.id} alt="test" loading="lazy" />,
         { account },
       );
 
@@ -554,7 +574,7 @@ describe("Image", async () => {
       );
 
       const { container } = render(
-        <Image imageId={im.id} alt="test" loading="lazy" />,
+        <Image imageId={im.$jazz.id} alt="test" loading="lazy" />,
         { account },
       );
 

package/src/react-core/hooks.ts

@@ -24,6 +24,7 @@ import {
 } from "jazz-tools";
 import { JazzContext, JazzContextManagerContext } from "./provider.js";
 import { getCurrentAccountFromContextManager } from "./utils.js";
+import { TypeSym } from "../tools/internal.js";
 
 export function useJazzContext<Acc extends Account>() {
   const value = useContext(JazzContext) as JazzContextType<Acc>;
@@ -274,7 +275,7 @@ function useAccountSubscription<
   const createSubscription = () => {
     const agent = getCurrentAccountFromContextManager(contextManager);
 
-    if (agent._type === "Anonymous") {
+    if (agent[TypeSym] === "Anonymous") {
       return {
         subscription: null,
         contextManager,
@@ -286,10 +287,15 @@ function useAccountSubscription<
     const resolve: any = options?.resolve ?? true;
 
     const node = contextManager.getCurrentValue()!.node;
-    const subscription = new SubscriptionScope<any>(node, resolve, agent.id, {
-      ref: coValueClassFromCoValueClassOrSchema(Schema),
-      optional: true,
-    });
+    const subscription = new SubscriptionScope<any>(
+      node,
+      resolve,
+      agent.$jazz.id,
+      {
+        ref: coValueClassFromCoValueClassOrSchema(Schema),
+        optional: true,
+      },
+    );
 
     return {
       subscription,

package/src/react-core/tests/useAccount.test.ts

@@ -37,11 +37,8 @@ describe("useAccount", () => {
         profile: co.profile(),
       })
       .withMigration((account, creationProps) => {
-        if (!account._refs.root) {
-          account.root = AccountRoot.create(
-            { value: "123" },
-            { owner: account },
-          );
+        if (!account.$jazz.refs.root) {
+          account.$jazz.set("root", { value: "123" });
         }
       });
 
@@ -79,13 +76,13 @@ describe("useAccount", () => {
         const account = useAccount();
 
         if (account.me) {
-          if (!accounts.includes(account.me.id)) {
-            accounts.push(account.me.id);
+          if (!accounts.includes(account.me.$jazz.id)) {
+            accounts.push(account.me.$jazz.id);
           }
 
           updates.push({
             isAuthenticated,
-            accountIndex: accounts.indexOf(account.me.id),
+            accountIndex: accounts.indexOf(account.me.$jazz.id),
           });
         }
 
@@ -100,14 +97,14 @@ describe("useAccount", () => {
     expect(result.current?.isAuthenticated).toBe(true);
     expect(result.current?.account?.me).toBeDefined();
 
-    const id = result.current?.account?.me?.id;
+    const id = result.current?.account?.me?.$jazz.id;
 
     await act(async () => {
       await result.current?.account?.logOut();
     });
 
     expect(result.current?.isAuthenticated).toBe(false);
-    expect(result.current?.account?.me?.id).not.toBe(id);
+    expect(result.current?.account?.me?.$jazz.id).not.toBe(id);
 
     expect(updates).toMatchInlineSnapshot(`
       [
@@ -141,13 +138,13 @@ describe("useAccount", () => {
         const contextManager = useJazzContextManager();
 
         if (account.me) {
-          if (!accounts.includes(account.me.id)) {
-            accounts.push(account.me.id);
+          if (!accounts.includes(account.me.$jazz.id)) {
+            accounts.push(account.me.$jazz.id);
           }
 
           updates.push({
             isAuthenticated,
-            accountIndex: accounts.indexOf(account.me.id),
+            accountIndex: accounts.indexOf(account.me.$jazz.id),
           });
         }
 
@@ -162,18 +159,18 @@ describe("useAccount", () => {
     expect(result.current?.isAuthenticated).toBe(false);
     expect(result.current?.account?.me).toBeDefined();
 
-    const id = result.current?.account?.me?.id;
+    const id = result.current?.account?.me?.$jazz.id;
 
     await act(async () => {
       await result.current?.contextManager?.authenticate({
-        accountID: accountToAuthenticate.id,
+        accountID: accountToAuthenticate.$jazz.id,
         accountSecret:
-          accountToAuthenticate._raw.core.node.getCurrentAgent().agentSecret,
+          accountToAuthenticate.$jazz.localNode.getCurrentAgent().agentSecret,
       });
     });
 
     expect(result.current?.isAuthenticated).toBe(true);
-    expect(result.current?.account?.me?.id).not.toBe(id);
+    expect(result.current?.account?.me?.$jazz.id).not.toBe(id);
 
     expect(updates).toMatchInlineSnapshot(`
       [
@@ -200,11 +197,8 @@ describe("useAccount", () => {
         profile: co.profile(),
       })
       .withMigration((account, creationProps) => {
-        if (!account._refs.root) {
-          account.root = AccountRoot.create(
-            { value: "123" },
-            { owner: account },
-          );
+        if (!account.$jazz.refs.root) {
+          account.$jazz.set("root", { value: "123" });
         }
       });
 

package/src/react-core/tests/useCoState.test.ts

@@ -40,7 +40,7 @@ describe("useCoState", () => {
       value: "123",
     });
 
-    const { result } = renderHook(() => useCoState(TestMap, map.id, {}), {
+    const { result } = renderHook(() => useCoState(TestMap, map.$jazz.id, {}), {
       account,
     });
 
@@ -80,14 +80,14 @@ describe("useCoState", () => {
       value: "123",
     });
 
-    const { result } = renderHook(() => useCoState(TestMap, map.id, {}), {
+    const { result } = renderHook(() => useCoState(TestMap, map.$jazz.id, {}), {
       account,
     });
 
     expect(result.current?.value).toBe("123");
 
     act(() => {
-      map.value = "456";
+      map.$jazz.set("value", "456");
     });
 
     expect(result.current?.value).toBe("456");
@@ -116,7 +116,7 @@ describe("useCoState", () => {
 
     const { result } = renderHook(
       () =>
-        useCoState(TestMap, map.id, {
+        useCoState(TestMap, map.$jazz.id, {
           resolve: {
             nested: true,
           },
@@ -151,7 +151,7 @@ describe("useCoState", () => {
       }),
     });
 
-    const { result } = renderHook(() => useCoState(TestMap, map.id, {}), {
+    const { result } = renderHook(() => useCoState(TestMap, map.$jazz.id, {}), {
       account,
     });
 
@@ -172,11 +172,11 @@ describe("useCoState", () => {
       isCurrentActiveAccount: true,
     });
 
-    for (const peer of account._raw.core.node.syncManager.getClientPeers()) {
+    for (const peer of account.$jazz.localNode.syncManager.getClientPeers()) {
       peer.gracefulShutdown();
     }
 
-    const { result } = renderHook(() => useCoState(TestMap, map.id), {
+    const { result } = renderHook(() => useCoState(TestMap, map.$jazz.id), {
       account,
     });
 
@@ -205,7 +205,7 @@ describe("useCoState", () => {
       isCurrentActiveAccount: true,
     });
 
-    const { result } = renderHook(() => useCoState(TestMap, map.id), {
+    const { result } = renderHook(() => useCoState(TestMap, map.$jazz.id), {
       account,
     });
 
@@ -237,7 +237,7 @@ describe("useCoState", () => {
       isCurrentActiveAccount: true,
     });
 
-    const { result } = renderHook(() => useCoState(TestMap, map.id), {
+    const { result } = renderHook(() => useCoState(TestMap, map.$jazz.id), {
       account,
     });
 
@@ -268,7 +268,7 @@ describe("useCoState", () => {
       isCurrentActiveAccount: true,
     });
 
-    const { result } = renderHook(() => useCoState(TestMap, map.id), {
+    const { result } = renderHook(() => useCoState(TestMap, map.$jazz.id), {
       account,
     });
 
@@ -307,11 +307,11 @@ describe("useCoState", () => {
       isCurrentActiveAccount: true,
     });
 
-    await account.waitForAllCoValuesSync();
+    await account.$jazz.waitForAllCoValuesSync();
 
     group.addMember(account, "reader");
 
-    const { result } = renderHook(() => useCoState(TestMap, map.id), {
+    const { result } = renderHook(() => useCoState(TestMap, map.$jazz.id), {
       account,
     });
 
@@ -371,7 +371,7 @@ describe("useCoState", () => {
 
     const { result } = renderHook(
       () =>
-        useCoState(TestMap, map.id, {
+        useCoState(TestMap, map.$jazz.id, {
           resolve: {
             nested: true,
           },
@@ -403,7 +403,7 @@ describe("useCoState", () => {
     });
 
     const { result } = renderHook(() =>
-      useCoState(TestMap, map.id as ID<CoValue>),
+      useCoState(TestMap, map.$jazz.id as ID<CoValue>),
     );
     expectTypeOf(result).toEqualTypeOf<{
       current: Loaded<typeof TestMap> | null | undefined;
@@ -422,7 +422,7 @@ describe("useCoState", () => {
     const { result, rerender } = renderHook(
       (props) => useCoState(TestMap, props.id),
       {
-        initialProps: { id: map.id } as { id: ID<CoValue> | undefined },
+        initialProps: { id: map.$jazz.id } as { id: ID<CoValue> | undefined },
       },
     );
 
@@ -457,7 +457,7 @@ describe("useCoState", () => {
     renderHook(
       () => {
         renderCount++;
-        useCoState(TestList, list.id, { resolve: { $each: true } });
+        useCoState(TestList, list.$jazz.id, { resolve: { $each: true } });
       },
       {
         account,
@@ -487,7 +487,7 @@ describe("useCoState", () => {
       },
     });
 
-    const janeOnJohn = await Account.load(jane.id, {
+    const janeOnJohn = await Account.load(jane.$jazz.id, {
       loadAs: john,
     });
 
@@ -504,7 +504,7 @@ describe("useCoState", () => {
     );
 
     const { result } = renderHook(
-      () => useCoState(Dog, dog.id)?._owner.castAs(Group).members,
+      () => useCoState(Dog, dog.$jazz.id)?.$jazz.owner.members,
       {
         account: john,
       },
@@ -542,7 +542,7 @@ describe("useCoState", () => {
     const renderings: boolean[] = [];
 
     renderHook(() => {
-      const data = useCoState(Thread, thread.id, {
+      const data = useCoState(Thread, thread.$jazz.id, {
         resolve: {
           messages: {
             $each: {