Jazz 0.15.0 - Moving everything inside jazz-tools

One of the pain points that our adopters have been facing while maintaining Jazz apps is keeping the different package versions aligned.

This becomes especially hard when using a monorepo setup for multi-platform apps.

To address this problem, we have decided to move all the bindings into a single package and export the different bindings using export paths.

#Overview:

So far, when building a Jazz app you would need to use multiple packages.

Now everything is inside jazz-tools:

import { co, z } from "jazz-tools";
import { useCoState } from "jazz-react"; 
import { useCoState } from "jazz-tools/react"; 

export const TodoItem = co.map({
  name: z.string(),
});

export function TodoComponent({
  todoId
}: {
  todoId: string;
}) {
  const todo = useCoState(TodoItem, todoId);

  return (
    <input type="text" value={todo.name} onChange={(e) => (todo.name = e.target.value)} />
  );
}

#Major breaking changes

• A single package for everything: jazz-tools now exports all the bindings using export paths
• Support for Vue is discontinued: maintaining multiple framework bindings is hard and we have decided to focus our efforts on the most used frameworks in our community

#A single package for all

All our stable packages that were depending on jazz-tools are now part of the jazz-tools package:

• jazz-react -> jazz-tools/react
• jazz-react-native -> jazz-tools/react-native
• jazz-expo -> jazz-tools/expo
• jazz-svelte -> jazz-tools/svelte
• jazz-nodejs -> jazz-tools/worker
• jazz-react-auth-clerk -> jazz-tools/react
• jazz-expo/auth/clerk -> jazz-tools/expo
• jazz-browser -> jazz-tools/browser
• jazz-browser-media-images -> jazz-tools/browser-media-images
• jazz-react-native-media-images -> jazz-tools/react-native-media-images
• jazz-inspector -> jazz-tools/inspector
• jazz-inspector-element -> jazz-tools/inspector/register-custom-element
• jazz-prosemirror -> jazz-tools/prosemirror
• jazz-tiptap -> jazz-tools/tiptap

This means that now you can remove all these packages and keep only jazz-tools.

To reduce the probability of importing an API from the wrong entry, we have also done some renaming:

• JazzProvider becomes:
  • JazzReactProvider in jazz-tools/react
  • JazzSvelteProvider in jazz-tools/svelte
  • JazzReactNativeProvider in jazz-tools/react-native
  • JazzExpoProvider in jazz-tools/expo
• Clerk bindings are now exported directly from the framework entries and renamed as:
  • import { JazzReactProviderWithClerk } from "jazz-tools/react"
  • import { JazzExpoProviderWithClerk } from "jazz-tools/expo"
• We have added the Native suffix to the platform-specific hooks when imported from the react-native or expo entries:
  • useAcceptInvite -> useAcceptInviteNative
  • useProgressiveImg -> useProgressiveImgNative
  • ProgressiveImg -> ProgressiveImgNative
• useAcceptInvite becomes new InviteListener in Svelte

We have not renamed APIs like useCoState or useAccount because their implementation is cross-platform.

When experimenting with VSCode, we've noticed that usually the import path suggested is jazz-tools/react-core, which is the same as importing from jazz-tools/react or the specific framework entry.