Implement clearer syntax for deep loading

examples/book-shelf/src/components/UserProfile.tsx

@@ -13,7 +13,9 @@ export default function UserProfile({ id }: { id: ID<JazzAccount> }) {
   const bookReviews = useCoState(
     ListOfBookReviews,
     user?.profile?._refs.bookReviews?.id,
-    [{}],
+    {
+      resolve: { each: true },
+    },
   );
 
   return (

examples/chat-rn-clerk/app/chat/[chatId].tsx

@@ -23,7 +23,7 @@ export default function Conversation() {
   const { me } = useAccount();
   const [chat, setChat] = useState<Chat>();
   const [message, setMessage] = useState("");
-  const loadedChat = useCoState(Chat, chat?.id, [{}]);
+  const loadedChat = useCoState(Chat, chat?.id, { resolve: { each: true } });
   const navigation = useNavigation();
 
   useEffect(() => {

examples/chat-rn/src/chat.tsx

@@ -21,7 +21,7 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
   const { me, logOut } = useAccount();
   const [chat, setChat] = useState<Chat>();
   const [message, setMessage] = useState("");
-  const loadedChat = useCoState(Chat, chat?.id, [{}]);
+  const loadedChat = useCoState(Chat, chat?.id, { resolve: { each: true } });
 
   useEffect(() => {
     navigation.setOptions({
@@ -52,7 +52,7 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
 
   const loadChat = async (chatId: ID<Chat>) => {
     try {
-      const chat = await Chat.load(chatId, me, []);
+      const chat = await Chat.load(chatId, me);
       setChat(chat);
     } catch (error) {
       console.log("Error loading chat", error);

examples/chat-vue/src/views/ChatView.vue

@@ -49,7 +49,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const chat = useCoState(Chat, props.chatId, [{}]);
+    const chat = useCoState(Chat, props.chatId, { resolve: { each: true } });
     const showNLastMessages = ref(30);
 
     const displayedMessages = computed(() => {

examples/chat/src/chatScreen.tsx

@@ -17,7 +17,7 @@ import {
 } from "./ui.tsx";
 
 export function ChatScreen(props: { chatID: ID<Chat> }) {
-  const chat = useCoState(Chat, props.chatID, [{}]);
+  const chat = useCoState(Chat, props.chatID, { resolve: { each: true } });
   const { me } = useAccount();
   const [showNLastMessages, setShowNLastMessages] = useState(30);
 

examples/music-player/src/3_HomePage.tsx

@@ -20,10 +20,7 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
    *  access rights to CoValues. We get it from the top-level provider `<WithJazz/>`.
    */
   const { me } = useAccount({
-    root: {
-      rootPlaylist: {},
-      playlists: [],
-    },
+    resolve: { root: { rootPlaylist: true, playlists: true } },
   });
 
   const navigate = useNavigate();
@@ -51,8 +48,9 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
 
   const params = useParams<{ playlistId: ID<Playlist> }>();
   const playlistId = params.playlistId ?? me?.root._refs.rootPlaylist.id;
+
   const playlist = useCoState(Playlist, playlistId, {
-    tracks: [],
+    resolve: { tracks: true },
   });
 
   const isRootPlaylist = !params.playlistId;

examples/music-player/src/6_InvitePage.tsx

@@ -8,9 +8,7 @@ export function InvitePage() {
   const navigate = useNavigate();
 
   const { me } = useAccount({
-    root: {
-      playlists: [],
-    },
+    resolve: { root: { playlists: true } },
   });
 
   useAcceptInvite({

examples/music-player/src/components/MusicTrackRow.tsx

@@ -29,9 +29,7 @@ export function MusicTrackRow({
   const track = useCoState(MusicTrack, trackId);
 
   const { me } = useAccount({
-    root: {
-      playlists: [{}],
-    },
+    resolve: { root: { playlists: { each: true } } },
   });
 
   const playlists = me?.root.playlists ?? [];

examples/music-player/src/components/PlayerControls.tsx

@@ -12,9 +12,7 @@ export function PlayerControls({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
   const isPlaying = playState.value === "play";
 
   const activePlaylist = useAccount({
-    root: {
-      activePlaylist: {},
-    },
+    resolve: { root: { activePlaylist: true } },
   }).me?.root.activePlaylist;
 
   useMediaEndListener(mediaPlayer.playNextTrack);
@@ -25,7 +23,7 @@ export function PlayerControls({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
   });
 
   const activeTrack = useCoState(MusicTrack, mediaPlayer.activeTrackId, {
-    waveform: {},
+    resolve: { waveform: true },
   });
 
   if (!activeTrack) return null;

examples/music-player/src/components/SidePanel.tsx

@@ -5,9 +5,7 @@ export function SidePanel() {
   const { playlistId } = useParams();
   const navigate = useNavigate();
   const { me } = useAccount({
-    root: {
-      playlists: [{}],
-    },
+    resolve: { root: { playlists: { each: true } } },
   });
 
   function handleAllTracksClick(evt: React.MouseEvent<HTMLAnchorElement>) {

examples/music-player/src/components/Waveform.tsx

@@ -8,7 +8,6 @@ export function Waveform(props: { track: MusicTrack; height: number }) {
   const waveformData = useCoState(
     MusicTrackWaveform,
     track._refs.waveform.id,
-    {},
   )?.data;
   const duration = track.duration;
 

examples/music-player/src/lib/useUploadExampleData.ts

@@ -7,7 +7,7 @@ import { uploadMusicTracks } from "../4_actions";
 
 export function useUploadExampleData() {
   const { me } = useAccount({
-    root: {},
+    resolve: { root: true },
   });
 
   const shouldUploadOnboardingData = me?.root?.exampleDataLoaded === false;

examples/onboarding/src/App.tsx

@@ -19,8 +19,10 @@ function ImportEmployee({
   const { employeeCoId } = useParams();
   const navigate = useNavigate();
 
-  const employees = useCoState(EmployeeCoList, employeeListCoId, [{}]);
-  const employee = useCoState(CoEmployee, employeeCoId as ID<CoEmployee>, {});
+  const employees = useCoState(EmployeeCoList, employeeListCoId, {
+    resolve: { each: true },
+  });
+  const employee = useCoState(CoEmployee, employeeCoId as ID<CoEmployee>);
 
   useEffect(() => {
     if (!employee || !employees) return;

examples/onboarding/src/pages/EmployeeList.tsx

@@ -10,7 +10,9 @@ export function EmployeeList({
 }: {
   employeeListCoId: ID<EmployeeCoList>;
 }) {
-  const employees = useCoState(EmployeeCoList, employeeListCoId, [{}]);
+  const employees = useCoState(EmployeeCoList, employeeListCoId, {
+    resolve: { each: true },
+  });
 
   if (!employees) {
     return <div>Loading...</div>;

examples/onboarding/src/pages/NewEmployee.tsx

@@ -22,7 +22,9 @@ export function NewEmployee({
   const navigate = useNavigate();
   const { me } = useAccount();
 
-  const employees = useCoState(EmployeeCoList, employeeListCoId, [{}]);
+  const employees = useCoState(EmployeeCoList, employeeListCoId, {
+    resolve: { each: true },
+  });
 
   const [employeeName, setEmployeeName] = useState<string>("");
 

examples/password-manager/src/3_vault.tsx

@@ -43,9 +43,11 @@ const VaultPage: React.FC = () => {
         (item): item is Exclude<typeof item, null> => !!item,
       ) || [],
   );
-  const folders = useCoState(FolderList, me.root?._refs.folders?.id, [
-    { items: [{}] },
-  ]);
+  const folders = useCoState(FolderList, me.root?._refs.folders?.id, {
+    resolve: {
+      each: { items: { each: true } },
+    },
+  });
 
   const [selectedFolder, setSelectedFolder] = useState<Folder | undefined>();
   const [isNewItemModalOpen, setIsNewItemModalOpen] = useState(false);

examples/password-manager/src/4_actions.ts

@@ -62,9 +62,7 @@ export async function addSharedFolder(
   const [sharedFolder, account] = await Promise.all([
     Folder.load(sharedFolderId, me, {}),
     PasswordManagerAccount.load(me.id, me, {
-      root: {
-        folders: [],
-      },
+      resolve: { root: { folders: true } },
     }),
   ]);
 

examples/reactions/src/ReactionsScreen.tsx

@@ -14,7 +14,7 @@ const reactionEmojiMap: {
 };
 
 export function ReactionsScreen(props: { id: ID<Reactions> }) {
-  const reactions = useCoState(Reactions, props.id, []);
+  const reactions = useCoState(Reactions, props.id);
 
   if (!reactions) return;
 

examples/todo-vue/src/views/HomeView.vue

@@ -4,15 +4,15 @@
       <div class="section-header">
         <h2>Folders</h2>
         <div class="new-folder">
-          <input 
-            v-model="newFolderName" 
-            placeholder="New folder name" 
+          <input
+            v-model="newFolderName"
+            placeholder="New folder name"
             class="input"
           />
           <button class="btn btn-primary" @click="createFolder">Create</button>
         </div>
       </div>
-      
+
       <div class="folder-list">
         <div
           v-for="folder in folders"
@@ -32,9 +32,9 @@
       <div class="section-header">
         <h2>{{ selectedFolder?.name }}</h2>
         <div class="new-todo">
-          <input 
-            v-model="newTodoTitle" 
-            placeholder="Add a new task" 
+          <input
+            v-model="newTodoTitle"
+            placeholder="Add a new task"
             class="input"
           />
           <button class="btn btn-primary" @click="createTodo">Add</button>
@@ -72,7 +72,9 @@ import { Folder, FolderList, ToDoItem, ToDoList } from "../schema";
 const { me } = useAccount();
 
 const computedFoldersId = computed(() => me.value?.root?.folders?.id);
-const folders = useCoState(FolderList, computedFoldersId, [{ items: [{}] }]);
+const folders = useCoState(FolderList, computedFoldersId, {
+  resolve: { each: { items: true } },
+});
 
 const selectedFolder = ref<Folder>();
 const newFolderName = ref("");

examples/todo/src/2_main.tsx

@@ -121,7 +121,7 @@ export default function App() {
 
 function HomeScreen() {
   const { me } = useAccount({
-    root: { projects: [{}] },
+    resolve: { root: { projects: { each: true } } },
   });
   const navigate = useNavigate();
 

packages/jazz-nodejs/src/test/startWorker.test.ts

@@ -67,7 +67,7 @@ describe("startWorker integration", () => {
 
     await map.waitForSync();
 
-    const mapOnWorker2 = await TestMap.load(map.id, worker2.worker, {});
+    const mapOnWorker2 = await TestMap.load(map.id, worker2.worker);
 
     expect(mapOnWorker2?.value).toBe("test");
 
@@ -92,7 +92,7 @@ describe("startWorker integration", () => {
 
     const worker2 = await setupWorker(worker1.syncServer);
 
-    const mapOnWorker2 = await TestMap.load(map.id, worker2.worker, {});
+    const mapOnWorker2 = await TestMap.load(map.id, worker2.worker);
 
     expect(mapOnWorker2?.value).toBe("test");