diff --git a/apps/designer/app/canvas/features/wrapper-component/wrapper-component.tsx b/apps/designer/app/canvas/features/wrapper-component/wrapper-component.tsx index 0ee5cbca50..b8d463bb99 100644 --- a/apps/designer/app/canvas/features/wrapper-component/wrapper-component.tsx +++ b/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")); diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx index d39d3e6556..40924a8554 100644 --- a/apps/designer/app/designer/designer.tsx +++ b/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`); } diff --git a/apps/designer/app/designer/features/sidebar-left/panels/pages/settings.tsx b/apps/designer/app/designer/features/sidebar-left/panels/pages/settings.tsx index 5935c45c8b..424cbafaa4 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/pages/settings.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/pages/settings.tsx @@ -260,7 +260,7 @@ export const PageSettings = ({ const fetcher = useFetcher(); const [pages] = usePages(); - const page = pages && projectUtils.pages.findById(pages, pageId); + const page = pages && projectUtils.pages.findByIdOrPath(pages, pageId); const [unsavedValues, setUnsavedValues] = useState>({}); const [submittedValues, setSubmittedValues] = useState>({}); diff --git a/apps/designer/app/routes/rest/props.$projectId.ts b/apps/designer/app/routes/rest/props.$projectId.ts index 87c20ab869..1eee527dfd 100644 --- a/apps/designer/app/routes/rest/props.$projectId.ts +++ b/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`); diff --git a/apps/designer/app/routes/rest/tree.$projectId.ts b/apps/designer/app/routes/rest/tree.$projectId.ts index 1053e45334..6f7074be46 100644 --- a/apps/designer/app/routes/rest/tree.$projectId.ts +++ b/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`); diff --git a/apps/designer/app/routes/s/css.ts b/apps/designer/app/routes/s/css.ts index 9efd5284c3..73ea0bea29 100644 --- a/apps/designer/app/routes/s/css.ts +++ b/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) { diff --git a/apps/designer/app/shared/db/canvas.server.ts b/apps/designer/app/shared/db/canvas.server.ts index a38b3aafd2..dbbee484bb 100644 --- a/apps/designer/app/shared/db/canvas.server.ts +++ b/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 => { 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([ diff --git a/apps/designer/app/shared/router-utils/build-params.ts b/apps/designer/app/shared/router-utils/build-params.ts index 33f9c8f7b8..1b953fd18a 100644 --- a/apps/designer/app/shared/router-utils/build-params.ts +++ b/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, }; } }; diff --git a/packages/project/src/db/build.ts b/packages/project/src/db/build.ts index b87a67151d..46b0b4ca78 100644 --- a/packages/project/src/db/build.ts +++ b/packages/project/src/db/build.ts @@ -109,7 +109,7 @@ export const editPage = async ( data: Partial> ) => { 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`); } diff --git a/packages/project/src/shared/pages/find-by-id-or-path.test.ts b/packages/project/src/shared/pages/find-by-id-or-path.test.ts new file mode 100644 index 0000000000..b9fb4fa79e --- /dev/null +++ b/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]); + }); +}); diff --git a/packages/project/src/shared/pages/find-by-id-or-path.ts b/packages/project/src/shared/pages/find-by-id-or-path.ts new file mode 100644 index 0000000000..fdd27aa27f --- /dev/null +++ b/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 + ); +}; diff --git a/packages/project/src/shared/pages/find-by-id.ts b/packages/project/src/shared/pages/find-by-id.ts deleted file mode 100644 index 23d2ae152a..0000000000 --- a/packages/project/src/shared/pages/find-by-id.ts +++ /dev/null @@ -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); -}; diff --git a/packages/project/src/shared/pages/find-by-path.ts b/packages/project/src/shared/pages/find-by-path.ts deleted file mode 100644 index a286071248..0000000000 --- a/packages/project/src/shared/pages/find-by-path.ts +++ /dev/null @@ -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); -}; diff --git a/packages/project/src/shared/pages/index.ts b/packages/project/src/shared/pages/index.ts index d4526db190..f554ddda7a 100644 --- a/packages/project/src/shared/pages/index.ts +++ b/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";