use page id for css route, cleanup

apps/designer/app/canvas/features/wrapper-component/wrapper-component.tsx

@@ -10,7 +10,6 @@ import {
 } from "@webstudio-is/react-sdk";
 import { useCssRules } from "@webstudio-is/css-engine";
 import { useTextEditingInstanceId } from "~/shared/nano-states";
-import "./wrapper-component-css";
 import { useSelectedElement } from "~/canvas/shared/nano-states";
 
 const TextEditor = lazy(() => import("../text-editor"));

apps/designer/app/designer/designer.tsx

@@ -284,7 +284,7 @@ export const Designer = ({
   );
 
   const page = useMemo(() => {
-    const page = projectUtils.pages.findById(pages, pageId);
+    const page = projectUtils.pages.findByIdOrPath(pages, pageId);
     if (page === undefined) {
       throw new Error(`Page with id ${pageId} not found`);
     }

apps/designer/app/designer/features/sidebar-left/panels/pages/settings.tsx

@@ -260,7 +260,7 @@ export const PageSettings = ({
   const fetcher = useFetcher<EditPageData>();
 
   const [pages] = usePages();
-  const page = pages && projectUtils.pages.findById(pages, pageId);
+  const page = pages && projectUtils.pages.findByIdOrPath(pages, pageId);
 
   const [unsavedValues, setUnsavedValues] = useState<Partial<FormPage>>({});
   const [submittedValues, setSubmittedValues] = useState<Partial<FormPage>>({});

apps/designer/app/routes/rest/props.$projectId.ts

@@ -26,7 +26,7 @@ export const loader: LoaderFunction = async ({
     const page =
       params.pageId === undefined
         ? prodBuild.pages.homePage
-        : utils.pages.findById(prodBuild.pages, params.pageId);
+        : utils.pages.findByIdOrPath(prodBuild.pages, params.pageId);
 
     if (page === undefined) {
       throw new Error(`Page ${params.pageId} not found`);

apps/designer/app/routes/rest/tree.$projectId.ts

@@ -26,7 +26,7 @@ export const loader: LoaderFunction = async ({
     const page =
       params.pageId === undefined
         ? prodBuild.pages.homePage
-        : utils.pages.findById(prodBuild.pages, params.pageId);
+        : utils.pages.findByIdOrPath(prodBuild.pages, params.pageId);
 
     if (page === undefined) {
       throw new Error(`Page ${params.pageId} not found`);

apps/designer/app/routes/s/css.ts

@@ -24,7 +24,7 @@ export const loader: ActionFunction = async ({ request, params }) => {
     const canvasData = await loadCanvasData(
       project,
       buildParams.mode === "published" ? "prod" : "dev",
-      params.pagePath // @todo use page id
+      buildParams.pageId
     );
 
     if (canvasData === undefined) {

apps/designer/app/shared/db/canvas.server.ts

@@ -8,7 +8,7 @@ export type CanvasData = Data & { buildId: Build["id"]; page: Page };
 export const loadCanvasData = async (
   project: Project,
   env: "dev" | "prod",
-  pagePath = ""
+  pageIdOrPath = ""
 ): Promise<CanvasData | undefined> => {
   const build =
     env === "dev"
@@ -19,10 +19,10 @@ export const loadCanvasData = async (
     throw new Error("The project is not published");
   }
 
-  const page = utils.pages.findByPath(build.pages, pagePath);
+  const page = utils.pages.findByIdOrPath(build.pages, pageIdOrPath);
 
   if (page === undefined) {
-    return;
+    throw new Error(`Page ${pageIdOrPath} not found`);
   }
 
   const [tree, props, breakpoints] = await Promise.all([

apps/designer/app/shared/router-utils/build-params.ts

@@ -62,17 +62,20 @@ export const getBuildParams = (
       projectId: string;
       mode: BuildMode;
       pathname: string;
+      pageId?: string;
     }
   | {
       projectDomain: string;
       mode: BuildMode;
       pathname: string;
+      pageId?: string;
     }
   | undefined => {
   const url = new URL(request.url);
 
   const requestHost = getRequestHost(request);
   const buildHost = new URL(getBuildOrigin(request, env)).host;
+  const pageId = url.searchParams.get("pageId");
 
   if (env.BUILD_REQUIRE_SUBDOMAIN !== "true") {
     const projectId = url.searchParams.get("projectId");
@@ -81,6 +84,7 @@ export const getBuildParams = (
         projectId,
         mode: getMode(url),
         pathname: url.pathname,
+        pageId,
       };
     }
   }
@@ -92,6 +96,7 @@ export const getBuildParams = (
       projectDomain,
       mode: getMode(url),
       pathname: url.pathname,
+      pageId,
     };
   }
 };

packages/project/src/db/build.ts

@@ -109,7 +109,7 @@ export const editPage = async (
   data: Partial<Omit<Page, "id" | "treeId">>
 ) => {
   return updatePages(buildId, async (currentPages) => {
-    const currentPage = pagesUtils.findById(currentPages, pageId);
+    const currentPage = pagesUtils.findByIdOrPath(currentPages, pageId);
     if (currentPage === undefined) {
       throw new Error(`Page with id "${pageId}" not found`);
     }
@@ -141,7 +141,7 @@ export const deletePage = async (buildId: Build["id"], pageId: Page["id"]) => {
       throw new Error("Cannot delete home page");
     }
 
-    const page = pagesUtils.findById(currentPages, pageId);
+    const page = pagesUtils.findByIdOrPath(currentPages, pageId);
     if (page === undefined) {
       throw new Error(`Page with id "${pageId}" not found`);
     }

packages/project/src/shared/pages/find-by-id-or-path.test.ts

@@ -0,0 +1,45 @@
+import { findByIdOrPath } from "./find-by-id-or-path";
+
+const pages = {
+  homePage: {
+    id: "home",
+    path: "/",
+    name: "Home",
+    title: "Home",
+    treeId: "tree-1",
+    meta: {},
+  },
+  pages: [
+    {
+      id: "page1",
+      path: "/page1",
+      name: "Page",
+      title: "Page",
+      treeId: "tree-1",
+      meta: {},
+    },
+  ],
+};
+
+describe("Find by id or path", () => {
+  test("home page by id", () => {
+    const page = findByIdOrPath(pages, "home");
+    expect(page).toEqual(pages.homePage);
+  });
+  test("home page by path /", () => {
+    const page = findByIdOrPath(pages, "/");
+    expect(page).toEqual(pages.homePage);
+  });
+  test("home page by empty path", () => {
+    const page = findByIdOrPath(pages, "");
+    expect(page).toEqual(pages.homePage);
+  });
+  test("find page by id", () => {
+    const page = findByIdOrPath(pages, "page1");
+    expect(page).toEqual(pages.pages[0]);
+  });
+  test("find page by path", () => {
+    const page = findByIdOrPath(pages, "/path1");
+    expect(page).toEqual(pages.pages[0]);
+  });
+});

packages/project/src/shared/pages/find-by-id-or-path.ts

@@ -0,0 +1,13 @@
+import { type Pages, type Page } from "../../db/types";
+
+export const findByIdOrPath = (
+  pages: Pages,
+  idOrPath: string
+): Page | undefined => {
+  if (idOrPath === "" || idOrPath === "/" || idOrPath === pages.homePage.id) {
+    return pages.homePage;
+  }
+  return pages.pages.find(
+    (page) => page.path === idOrPath || page.id === idOrPath
+  );
+};

packages/project/src/shared/pages/find-by-id.ts

@@ -1,8 +0,0 @@
-import { type Pages, type Page } from "../../db/types";
-
-export const findById = (pages: Pages, pageId: string): Page | undefined => {
-  if (pages.homePage.id === pageId) {
-    return pages.homePage;
-  }
-  return pages.pages.find((page) => page.id === pageId);
-};

packages/project/src/shared/pages/find-by-path.ts

@@ -1,11 +0,0 @@
-import { type Pages, type Page } from "../../db/types";
-
-export const findByPath = (
-  pages: Pages,
-  pagePath: string
-): Page | undefined => {
-  if (pagePath === "" || pagePath === "/") {
-    return pages.homePage;
-  }
-  return pages.pages.find((page) => page.path === pagePath);
-};

packages/project/src/shared/pages/index.ts

@@ -1,2 +1 @@
-export * from "./find-by-id";
-export * from "./find-by-path";
+export * from "./find-by-id-or-path";