Migrate pages to id-keyed maps

Author: kof

apps/builder/app/builder/builder.tsx

@@ -58,7 +58,7 @@ import type { TokenPermissions } from "@webstudio-is/authorization-token";
 import { useToastErrors } from "~/shared/error/toast-error";
 import { initBuilderApi } from "~/shared/builder-api";
 import { updateWebstudioData } from "~/shared/instance-utils";
-import { migrateWebstudioDataMutable } from "~/shared/webstudio-data-migrator";
+import { migrateWebstudioDataMutable } from "@webstudio-is/sdk/migrations/webstudio-data";
 import { Loading, LoadingBackground } from "./shared/loading";
 import { mergeRefs } from "@react-aria/utils";
 import { CommandPanel } from "./features/command-panel";

apps/builder/app/builder/features/address-bar.stories.tsx

@@ -16,32 +16,43 @@ registerContainers();
 $dataSources.set(new Map());
 
 $pages.set({
-  folders: [
-    {
-      id: "rootId",
-      name: "",
-      slug: "",
-      children: ["homeId", "dynamicId"],
-    },
-  ],
-  homePage: {
-    id: "homeId",
-    path: "",
-    name: "",
-    title: "",
-    meta: {},
-    rootInstanceId: "",
-  },
-  pages: [
-    {
-      id: "dynamicId",
-      path: "/blog/:date/post/:slug",
-      name: "",
-      title: "",
-      meta: {},
-      rootInstanceId: "rootInstanceId",
-    },
-  ],
+  homePageId: "homeId",
+  rootFolderId: "rootId",
+  folders: new Map([
+    [
+      "rootId",
+      {
+        id: "rootId",
+        name: "",
+        slug: "",
+        children: ["homeId", "dynamicId"],
+      },
+    ],
+  ]),
+  pages: new Map([
+    [
+      "homeId",
+      {
+        id: "homeId",
+        path: "",
+        name: "",
+        title: "",
+        meta: {},
+        rootInstanceId: "",
+      },
+    ],
+    [
+      "dynamicId",
+      {
+        id: "dynamicId",
+        path: "/blog/:date/post/:slug",
+        name: "",
+        title: "",
+        meta: {},
+        rootInstanceId: "rootInstanceId",
+      },
+    ],
+  ]),
 });
 
 const SystemInspect = () => {

apps/builder/app/builder/features/command-panel/command-panel.stories.tsx

@@ -38,15 +38,15 @@ $breakpoints.set(
 );
 
 const pages = createDefaultPages({ rootInstanceId: "" });
-pages.pages.push({
+pages.pages.set("page2", {
   id: "page2",
   path: "",
   name: "Second Page",
   rootInstanceId: "",
   title: "",
   meta: {},
 });
-pages.pages.push({
+pages.pages.set("page3", {
   id: "page3",
   path: "",
   name: "Thrid Page",
@@ -55,7 +55,7 @@ pages.pages.push({
   meta: {},
 });
 $pages.set(pages);
-$selectedPageId.set(pages.homePage.id);
+$selectedPageId.set(pages.homePageId);
 
 export const CommandPanel: StoryFn = () => {
   useEffect(() => {

apps/builder/app/builder/features/command-panel/groups/pages-group.tsx

@@ -6,7 +6,7 @@ import {
   useSelectedAction,
 } from "@webstudio-is/design-system";
 import { computed } from "nanostores";
-import type { Page } from "@webstudio-is/sdk";
+import { getAllPages, type Page } from "@webstudio-is/sdk";
 import { $pages } from "~/shared/sync/data-stores";
 import { $editingPageId } from "~/shared/nano-states";
 import { $selectedPage } from "~/shared/nano-states";
@@ -28,7 +28,7 @@ export const $pageOptions = computed(
     }
     const pageOptions: PageOption[] = [];
     if (pages) {
-      for (const page of [pages.homePage, ...pages.pages]) {
+      for (const page of getAllPages(pages)) {
         if (page.id === selectedPage?.id) {
           continue;
         }

apps/builder/app/builder/features/command-panel/shared/instance-list.tsx

@@ -13,7 +13,7 @@ import {
   useSelectedAction,
   useCommandState,
 } from "@webstudio-is/design-system";
-import type { Instance } from "@webstudio-is/sdk";
+import { getPageById, type Instance } from "@webstudio-is/sdk";
 import { $instances, $pages } from "~/shared/sync/data-stores";
 import { getInstanceLabel } from "~/builder/shared/instance-label";
 import { buildInstancePath } from "~/shared/instance-utils";
@@ -61,7 +61,7 @@ export const InstanceList = ({
       instances,
       instanceId
     );
-    const page = pages.pages.find((p) => p.id === awareness.pageId);
+    const page = getPageById(pages, awareness.pageId);
     usedInInstances.push({
       label: getInstanceLabel(instance),
       id: instance.id,

apps/builder/app/builder/features/marketplace/templates.tsx

@@ -13,6 +13,7 @@ import {
 import { ChevronLeftIcon, ExternalLinkIcon } from "@webstudio-is/icons";
 import {
   elementComponent,
+  getAllPages,
   Instance,
   ROOT_FOLDER_ID,
   type Asset,
@@ -116,7 +117,7 @@ const getTemplatesDataByCategory = (
   if (data === undefined) {
     return new Map();
   }
-  const pages = [data.pages.homePage, ...data.pages.pages]
+  const pages = getAllPages(data.pages)
     .filter((page) => page.marketplace?.include)
     .map((page) => {
       // category can be empty string

apps/builder/app/builder/features/marketplace/utils.ts

@@ -1,6 +1,8 @@
 import {
   getStyleDeclKey,
+  migratePages,
   type Asset,
+  type SerializedPages,
   type WebstudioData,
 } from "@webstudio-is/sdk";
 import type { CompactBuild } from "@webstudio-is/project-build";
@@ -9,14 +11,17 @@ const getPair = <Item extends { id: string }>(item: Item) =>
   [item.id, item] as const;
 
 export const toWebstudioData = (
-  data: CompactBuild & { assets: Asset[] }
+  data: Omit<CompactBuild, "pages"> & {
+    assets: Asset[];
+    pages: SerializedPages;
+  }
 ): WebstudioData => ({
   assets: new Map(data.assets.map(getPair)),
   instances: new Map(data.instances.map(getPair)),
   dataSources: new Map(data.dataSources.map(getPair)),
   resources: new Map(data.resources.map(getPair)),
   props: new Map(data.props.map(getPair)),
-  pages: data.pages,
+  pages: migratePages(data.pages),
   breakpoints: new Map(data.breakpoints.map(getPair)),
   styleSources: new Map(data.styleSources.map(getPair)),
   styleSourceSelections: new Map(

apps/builder/app/builder/features/pages/folder-settings.tsx

@@ -21,6 +21,7 @@ import {
   Pages,
   ROOT_FOLDER_ID,
   findParentFolderByChildId,
+  getFolderById,
 } from "@webstudio-is/sdk";
 import { nanoid } from "nanoid";
 import { useCallback, useState, type FocusEventHandler } from "react";
@@ -82,16 +83,14 @@ const validateValues = (
   return errors;
 };
 
-const toFormValues = (
-  folderId: Folder["id"],
-  folders: Array<Folder>
-): Values => {
-  const folder = folders.find(({ id }) => id === folderId);
+const toFormValues = (folderId: Folder["id"], pages: Pages): Values => {
+  const { folders } = pages;
+  const folder = folders.get(folderId);
   const parentFolder = findParentFolderByChildId(folderId, folders);
   return {
     name: folder?.name ?? "",
     slug: folder?.slug ?? "",
-    parentFolderId: parentFolder?.id ?? ROOT_FOLDER_ID,
+    parentFolderId: parentFolder?.id ?? pages.rootFolderId,
   };
 };
 
@@ -211,6 +210,7 @@ export const NewFolderSettings = ({
 
   const [values, setValues] = useState<Values>({
     ...fieldDefaultValues,
+    parentFolderId: pages?.rootFolderId ?? fieldDefaultValues.parentFolderId,
     slug: nameToSlug(fieldDefaultValues.name),
   });
 
@@ -292,15 +292,15 @@ const createFolder = (folderId: Folder["id"], values: Values) => {
     if (pages === undefined) {
       return;
     }
-    pages.folders.push({
+    pages.folders.set(folderId, {
       id: folderId,
       name: values.name,
       slug: values.slug,
       children: [],
     } satisfies Folder);
-    const parentFolder = pages.folders.find(
-      ({ id }) => id === values.parentFolderId
-    );
+    const parentFolder =
+      getFolderById(pages, values.parentFolderId) ??
+      getFolderById(pages, pages.rootFolderId);
     parentFolder?.children.push(folderId);
   });
 };
@@ -310,8 +310,8 @@ const updateFolder = (folderId: Folder["id"], values: Partial<Values>) => {
     if (pages === undefined) {
       return;
     }
-    const folder = pages.folders.find((folder) => folder.id === folderId);
-    if (folder === undefined) {
+    const folder = getFolderById(pages, folderId);
+    if (folder === undefined || folderId === pages.rootFolderId) {
       return;
     }
     if (values.name !== undefined) {
@@ -321,11 +321,7 @@ const updateFolder = (folderId: Folder["id"], values: Partial<Values>) => {
       folder.slug = values.slug;
     }
     if (values.parentFolderId !== undefined) {
-      registerFolderChildMutable(
-        pages.folders,
-        folderId,
-        values.parentFolderId
-      );
+      registerFolderChildMutable(pages, folderId, values.parentFolderId);
     }
   });
 };
@@ -342,12 +338,13 @@ export const FolderSettings = ({
   folderId: string;
 }) => {
   const pages = useStore($pages);
-  const folder = pages?.folders.find(({ id }) => id === folderId);
+  const folder =
+    pages === undefined ? undefined : getFolderById(pages, folderId);
   const [unsavedValues, setUnsavedValues] = useState<Partial<Values>>({});
   const isDesignMode = useStore($isDesignMode);
 
   const values: Values = {
-    ...(pages ? toFormValues(folderId, pages.folders) : fieldDefaultValues),
+    ...(pages ? toFormValues(folderId, pages) : fieldDefaultValues),
     ...unsavedValues,
   };
 

apps/builder/app/builder/features/pages/page-settings.stories.tsx

@@ -9,7 +9,6 @@ import {
 } from "@webstudio-is/design-system";
 import { $assets, $project } from "~/shared/sync/data-stores";
 import { createDefaultPages } from "@webstudio-is/project-build";
-import { isRootFolder } from "@webstudio-is/sdk";
 
 export default {
   title: "Pages/Page Settings",
@@ -50,15 +49,15 @@ pages.meta = {
   faviconAssetId: "imageId",
   code: "code",
 };
-pages.pages.push({
+pages.pages.set("pageId", {
   id: "pageId",
   title: "Page title",
   path: "/page-path",
   name: "page-name",
   meta: {},
   rootInstanceId: "root-instance-id",
 });
-const rootFolder = pages.folders.find(isRootFolder);
+const rootFolder = pages.folders.get(pages.rootFolderId);
 rootFolder?.children.push("pageId");
 
 $pages.set(pages);