From e17f1e082ae0774aebf2cef159d3cea8422a8aab Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Thu, 14 Mar 2024 00:09:44 +0700 Subject: [PATCH] experimental: support system variable in compiler (#3009) Ref https://github.com/webstudio-is/webstudio/issues/2903 Here switched to system variable in resources, page meta and component generator. Removed legacy path params variable from schema. --- .../[script-test]._index.server.tsx | 4 +- .../__generated__/[script-test]._index.tsx | 7 +-- .../__generated__/[world]._index.server.tsx | 4 +- .../app/__generated__/[world]._index.tsx | 7 +-- .../app/__generated__/_index.server.tsx | 4 +- .../app/__generated__/_index.tsx | 7 +-- .../app/routes/[script-test]._index.tsx | 14 +++-- .../app/routes/[world]._index.tsx | 14 +++-- .../app/routes/_index.tsx | 14 +++-- .../app/__generated__/_index.server.tsx | 4 +- .../app/__generated__/_index.tsx | 7 +-- .../app/routes/_index.tsx | 14 +++-- .../app/__generated__/_index.server.tsx | 4 +- .../app/__generated__/_index.tsx | 7 +-- .../app/routes/_index.tsx | 14 +++-- .../[_route_with_symbols_]._index.server.tsx | 4 +- .../[_route_with_symbols_]._index.tsx | 7 +-- .../__generated__/[form]._index.server.tsx | 4 +- .../app/__generated__/[form]._index.tsx | 7 +-- .../[heading-with-id]._index.server.tsx | 4 +- .../[heading-with-id]._index.tsx | 7 +-- .../[nested].[nested-page]._index.server.tsx | 4 +- .../[nested].[nested-page]._index.tsx | 7 +-- .../__generated__/[radix]._index.server.tsx | 4 +- .../app/__generated__/[radix]._index.tsx | 7 +-- .../[resources]._index.server.tsx | 5 +- .../app/__generated__/[resources]._index.tsx | 7 +-- .../app/__generated__/_index.server.tsx | 4 +- .../app/__generated__/_index.tsx | 7 +-- .../routes/[_route_with_symbols_]._index.tsx | 14 +++-- .../app/routes/[form]._index.tsx | 14 +++-- .../app/routes/[heading-with-id]._index.tsx | 14 +++-- .../routes/[nested].[nested-page]._index.tsx | 14 +++-- .../app/routes/[radix]._index.tsx | 14 +++-- .../app/routes/[resources]._index.tsx | 14 +++-- .../app/routes/_index.tsx | 14 +++-- packages/cli/__generated__/_index.server.tsx | 5 +- packages/cli/__generated__/_index.tsx | 6 +-- packages/cli/src/prebuild.ts | 21 +++----- .../defaults/__templates__/route-template.tsx | 14 +++-- .../react-sdk/src/component-generator.test.ts | 26 +++++----- .../react-sdk/src/page-meta-generator.test.ts | 52 +++++++++---------- packages/react-sdk/src/page-meta-generator.ts | 10 ++-- .../react-sdk/src/resources-generator.test.ts | 49 ++++++++--------- packages/react-sdk/src/resources-generator.ts | 13 ++--- packages/sdk/src/schema/pages.ts | 6 ++- 46 files changed, 278 insertions(+), 225 deletions(-) diff --git a/fixtures/webstudio-custom-template/app/__generated__/[script-test]._index.server.tsx b/fixtures/webstudio-custom-template/app/__generated__/[script-test]._index.server.tsx index 05e605bec5..456e8c8599 100644 --- a/fixtures/webstudio-custom-template/app/__generated__/[script-test]._index.server.tsx +++ b/fixtures/webstudio-custom-template/app/__generated__/[script-test]._index.server.tsx @@ -1,4 +1,4 @@ -type Params = Record; -export const loadResources = async (_props: { params: Params }) => { +import { loadResource, type System } from "@webstudio-is/sdk"; +export const loadResources = async (_props: { system: System }) => { return {} as Record; }; diff --git a/fixtures/webstudio-custom-template/app/__generated__/[script-test]._index.tsx b/fixtures/webstudio-custom-template/app/__generated__/[script-test]._index.tsx index 9a2014ab8f..b36172ec0f 100644 --- a/fixtures/webstudio-custom-template/app/__generated__/[script-test]._index.tsx +++ b/fixtures/webstudio-custom-template/app/__generated__/[script-test]._index.tsx @@ -7,6 +7,7 @@ import type { FontAsset, ImageAsset, ProjectMeta, + System, } from "@webstudio-is/sdk"; import { useResource } from "@webstudio-is/react-sdk"; import type { PageMeta } from "@webstudio-is/react-sdk"; @@ -49,10 +50,10 @@ export const user: { email: string | null } | undefined = { export const projectId = "0d856812-61d8-4014-a20a-82e01c0eb8ee"; export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -68,7 +69,7 @@ export const getPageMeta = ({ }; }; -const Page = ({}: { params: any }) => { +const Page = ({}: { system: any }) => { return ( ; -export const loadResources = async (_props: { params: Params }) => { +import { loadResource, type System } from "@webstudio-is/sdk"; +export const loadResources = async (_props: { system: System }) => { return {} as Record; }; diff --git a/fixtures/webstudio-custom-template/app/__generated__/[world]._index.tsx b/fixtures/webstudio-custom-template/app/__generated__/[world]._index.tsx index 61a32a8a92..d02059e30d 100644 --- a/fixtures/webstudio-custom-template/app/__generated__/[world]._index.tsx +++ b/fixtures/webstudio-custom-template/app/__generated__/[world]._index.tsx @@ -7,6 +7,7 @@ import type { FontAsset, ImageAsset, ProjectMeta, + System, } from "@webstudio-is/sdk"; import { useResource } from "@webstudio-is/react-sdk"; import type { PageMeta } from "@webstudio-is/react-sdk"; @@ -46,10 +47,10 @@ export const user: { email: string | null } | undefined = { export const projectId = "0d856812-61d8-4014-a20a-82e01c0eb8ee"; export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -65,7 +66,7 @@ export const getPageMeta = ({ }; }; -const Page = ({}: { params: any }) => { +const Page = ({}: { system: any }) => { return ( diff --git a/fixtures/webstudio-custom-template/app/__generated__/_index.server.tsx b/fixtures/webstudio-custom-template/app/__generated__/_index.server.tsx index 05e605bec5..456e8c8599 100644 --- a/fixtures/webstudio-custom-template/app/__generated__/_index.server.tsx +++ b/fixtures/webstudio-custom-template/app/__generated__/_index.server.tsx @@ -1,4 +1,4 @@ -type Params = Record; -export const loadResources = async (_props: { params: Params }) => { +import { loadResource, type System } from "@webstudio-is/sdk"; +export const loadResources = async (_props: { system: System }) => { return {} as Record; }; diff --git a/fixtures/webstudio-custom-template/app/__generated__/_index.tsx b/fixtures/webstudio-custom-template/app/__generated__/_index.tsx index 3b98fa6c01..dbb914a6e0 100644 --- a/fixtures/webstudio-custom-template/app/__generated__/_index.tsx +++ b/fixtures/webstudio-custom-template/app/__generated__/_index.tsx @@ -7,6 +7,7 @@ import type { FontAsset, ImageAsset, ProjectMeta, + System, } from "@webstudio-is/sdk"; import { useResource } from "@webstudio-is/react-sdk"; import type { PageMeta } from "@webstudio-is/react-sdk"; @@ -73,10 +74,10 @@ export const user: { email: string | null } | undefined = { export const projectId = "0d856812-61d8-4014-a20a-82e01c0eb8ee"; export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -92,7 +93,7 @@ export const getPageMeta = ({ }; }; -const Page = ({}: { params: any }) => { +const Page = ({}: { system: any }) => { return ( { const params = getRemixParams(arg.params); - const resources = await loadResources({ params }); - const pageMeta = getPageMeta({ params, resources }); + const system = { + params, + search: {}, + }; + const resources = await loadResources({ system }); + const pageMeta = getPageMeta({ system, resources }); if (pageMeta.redirect) { const status = @@ -63,7 +67,7 @@ export const loader = async (arg: LoaderArgs) => { host, url: url.href, excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH, - params, + system, resources, pageMeta, }, @@ -316,7 +320,7 @@ export const action = async ({ request, context }: ActionArgs) => { }; const Outlet = () => { - const { params, resources } = useLoaderData(); + const { system, resources } = useLoaderData(); return ( { resources, }} > - + ); }; diff --git a/fixtures/webstudio-custom-template/app/routes/[world]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[world]._index.tsx index e9ab64282b..71396cf0a6 100644 --- a/fixtures/webstudio-custom-template/app/routes/[world]._index.tsx +++ b/fixtures/webstudio-custom-template/app/routes/[world]._index.tsx @@ -35,8 +35,12 @@ export type PageData = { export const loader = async (arg: LoaderArgs) => { const params = getRemixParams(arg.params); - const resources = await loadResources({ params }); - const pageMeta = getPageMeta({ params, resources }); + const system = { + params, + search: {}, + }; + const resources = await loadResources({ system }); + const pageMeta = getPageMeta({ system, resources }); if (pageMeta.redirect) { const status = @@ -63,7 +67,7 @@ export const loader = async (arg: LoaderArgs) => { host, url: url.href, excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH, - params, + system, resources, pageMeta, }, @@ -316,7 +320,7 @@ export const action = async ({ request, context }: ActionArgs) => { }; const Outlet = () => { - const { params, resources } = useLoaderData(); + const { system, resources } = useLoaderData(); return ( { resources, }} > - + ); }; diff --git a/fixtures/webstudio-custom-template/app/routes/_index.tsx b/fixtures/webstudio-custom-template/app/routes/_index.tsx index 74004fecf9..e0e6041985 100644 --- a/fixtures/webstudio-custom-template/app/routes/_index.tsx +++ b/fixtures/webstudio-custom-template/app/routes/_index.tsx @@ -35,8 +35,12 @@ export type PageData = { export const loader = async (arg: LoaderArgs) => { const params = getRemixParams(arg.params); - const resources = await loadResources({ params }); - const pageMeta = getPageMeta({ params, resources }); + const system = { + params, + search: {}, + }; + const resources = await loadResources({ system }); + const pageMeta = getPageMeta({ system, resources }); if (pageMeta.redirect) { const status = @@ -63,7 +67,7 @@ export const loader = async (arg: LoaderArgs) => { host, url: url.href, excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH, - params, + system, resources, pageMeta, }, @@ -316,7 +320,7 @@ export const action = async ({ request, context }: ActionArgs) => { }; const Outlet = () => { - const { params, resources } = useLoaderData(); + const { system, resources } = useLoaderData(); return ( { resources, }} > - + ); }; diff --git a/fixtures/webstudio-remix-netlify-edge-functions/app/__generated__/_index.server.tsx b/fixtures/webstudio-remix-netlify-edge-functions/app/__generated__/_index.server.tsx index 05e605bec5..456e8c8599 100644 --- a/fixtures/webstudio-remix-netlify-edge-functions/app/__generated__/_index.server.tsx +++ b/fixtures/webstudio-remix-netlify-edge-functions/app/__generated__/_index.server.tsx @@ -1,4 +1,4 @@ -type Params = Record; -export const loadResources = async (_props: { params: Params }) => { +import { loadResource, type System } from "@webstudio-is/sdk"; +export const loadResources = async (_props: { system: System }) => { return {} as Record; }; diff --git a/fixtures/webstudio-remix-netlify-edge-functions/app/__generated__/_index.tsx b/fixtures/webstudio-remix-netlify-edge-functions/app/__generated__/_index.tsx index c6564f33a5..a30b6c0135 100644 --- a/fixtures/webstudio-remix-netlify-edge-functions/app/__generated__/_index.tsx +++ b/fixtures/webstudio-remix-netlify-edge-functions/app/__generated__/_index.tsx @@ -7,6 +7,7 @@ import type { FontAsset, ImageAsset, ProjectMeta, + System, } from "@webstudio-is/sdk"; import { useResource } from "@webstudio-is/react-sdk"; import type { PageMeta } from "@webstudio-is/react-sdk"; @@ -33,10 +34,10 @@ export const user: { email: string | null } | undefined = { export const projectId = "d845c167-ea07-4875-b08d-83e97c09dcce"; export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -52,7 +53,7 @@ export const getPageMeta = ({ }; }; -const Page = ({}: { params: any }) => { +const Page = ({}: { system: any }) => { return ( { const params = getRemixParams(arg.params); - const resources = await loadResources({ params }); - const pageMeta = getPageMeta({ params, resources }); + const system = { + params, + search: {}, + }; + const resources = await loadResources({ system }); + const pageMeta = getPageMeta({ system, resources }); if (pageMeta.redirect) { const status = @@ -63,7 +67,7 @@ export const loader = async (arg: LoaderArgs) => { host, url: url.href, excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH, - params, + system, resources, pageMeta, }, @@ -316,7 +320,7 @@ export const action = async ({ request, context }: ActionArgs) => { }; const Outlet = () => { - const { params, resources } = useLoaderData(); + const { system, resources } = useLoaderData(); return ( { resources, }} > - + ); }; diff --git a/fixtures/webstudio-remix-netlify-functions/app/__generated__/_index.server.tsx b/fixtures/webstudio-remix-netlify-functions/app/__generated__/_index.server.tsx index 05e605bec5..456e8c8599 100644 --- a/fixtures/webstudio-remix-netlify-functions/app/__generated__/_index.server.tsx +++ b/fixtures/webstudio-remix-netlify-functions/app/__generated__/_index.server.tsx @@ -1,4 +1,4 @@ -type Params = Record; -export const loadResources = async (_props: { params: Params }) => { +import { loadResource, type System } from "@webstudio-is/sdk"; +export const loadResources = async (_props: { system: System }) => { return {} as Record; }; diff --git a/fixtures/webstudio-remix-netlify-functions/app/__generated__/_index.tsx b/fixtures/webstudio-remix-netlify-functions/app/__generated__/_index.tsx index c6564f33a5..a30b6c0135 100644 --- a/fixtures/webstudio-remix-netlify-functions/app/__generated__/_index.tsx +++ b/fixtures/webstudio-remix-netlify-functions/app/__generated__/_index.tsx @@ -7,6 +7,7 @@ import type { FontAsset, ImageAsset, ProjectMeta, + System, } from "@webstudio-is/sdk"; import { useResource } from "@webstudio-is/react-sdk"; import type { PageMeta } from "@webstudio-is/react-sdk"; @@ -33,10 +34,10 @@ export const user: { email: string | null } | undefined = { export const projectId = "d845c167-ea07-4875-b08d-83e97c09dcce"; export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -52,7 +53,7 @@ export const getPageMeta = ({ }; }; -const Page = ({}: { params: any }) => { +const Page = ({}: { system: any }) => { return ( { const params = getRemixParams(arg.params); - const resources = await loadResources({ params }); - const pageMeta = getPageMeta({ params, resources }); + const system = { + params, + search: {}, + }; + const resources = await loadResources({ system }); + const pageMeta = getPageMeta({ system, resources }); if (pageMeta.redirect) { const status = @@ -63,7 +67,7 @@ export const loader = async (arg: LoaderArgs) => { host, url: url.href, excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH, - params, + system, resources, pageMeta, }, @@ -316,7 +320,7 @@ export const action = async ({ request, context }: ActionArgs) => { }; const Outlet = () => { - const { params, resources } = useLoaderData(); + const { system, resources } = useLoaderData(); return ( { resources, }} > - + ); }; diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.server.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.server.tsx index 05e605bec5..456e8c8599 100644 --- a/fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.server.tsx +++ b/fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.server.tsx @@ -1,4 +1,4 @@ -type Params = Record; -export const loadResources = async (_props: { params: Params }) => { +import { loadResource, type System } from "@webstudio-is/sdk"; +export const loadResources = async (_props: { system: System }) => { return {} as Record; }; diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.tsx index a2d7d57d5d..bb8d7cf6e4 100644 --- a/fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.tsx +++ b/fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.tsx @@ -7,6 +7,7 @@ import type { FontAsset, ImageAsset, ProjectMeta, + System, } from "@webstudio-is/sdk"; import { useResource } from "@webstudio-is/react-sdk"; import type { PageMeta } from "@webstudio-is/react-sdk"; @@ -68,10 +69,10 @@ export const user: { email: string | null } | undefined = { export const projectId = "cddc1d44-af37-4cb6-a430-d300cf6f932d"; export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -87,7 +88,7 @@ export const getPageMeta = ({ }; }; -const Page = ({}: { params: any }) => { +const Page = ({}: { system: any }) => { return ( ; -export const loadResources = async (_props: { params: Params }) => { +import { loadResource, type System } from "@webstudio-is/sdk"; +export const loadResources = async (_props: { system: System }) => { return {} as Record; }; diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[form]._index.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[form]._index.tsx index fbe7494037..5f4d7d20cd 100644 --- a/fixtures/webstudio-remix-vercel/app/__generated__/[form]._index.tsx +++ b/fixtures/webstudio-remix-vercel/app/__generated__/[form]._index.tsx @@ -7,6 +7,7 @@ import type { FontAsset, ImageAsset, ProjectMeta, + System, } from "@webstudio-is/sdk"; import { useResource } from "@webstudio-is/react-sdk"; import type { PageMeta } from "@webstudio-is/react-sdk"; @@ -77,10 +78,10 @@ export const user: { email: string | null } | undefined = { export const projectId = "cddc1d44-af37-4cb6-a430-d300cf6f932d"; export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -96,7 +97,7 @@ export const getPageMeta = ({ }; }; -const Page = ({}: { params: any }) => { +const Page = ({}: { system: any }) => { let [formState, set$formState] = useState("initial"); let [formState_1, set$formState_1] = useState("initial"); return ( diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.server.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.server.tsx index 05e605bec5..456e8c8599 100644 --- a/fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.server.tsx +++ b/fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.server.tsx @@ -1,4 +1,4 @@ -type Params = Record; -export const loadResources = async (_props: { params: Params }) => { +import { loadResource, type System } from "@webstudio-is/sdk"; +export const loadResources = async (_props: { system: System }) => { return {} as Record; }; diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.tsx index 5d86f95067..85909ee231 100644 --- a/fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.tsx +++ b/fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.tsx @@ -7,6 +7,7 @@ import type { FontAsset, ImageAsset, ProjectMeta, + System, } from "@webstudio-is/sdk"; import { useResource } from "@webstudio-is/react-sdk"; import type { PageMeta } from "@webstudio-is/react-sdk"; @@ -68,10 +69,10 @@ export const user: { email: string | null } | undefined = { export const projectId = "cddc1d44-af37-4cb6-a430-d300cf6f932d"; export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -87,7 +88,7 @@ export const getPageMeta = ({ }; }; -const Page = ({}: { params: any }) => { +const Page = ({}: { system: any }) => { return ( ; -export const loadResources = async (_props: { params: Params }) => { +import { loadResource, type System } from "@webstudio-is/sdk"; +export const loadResources = async (_props: { system: System }) => { return {} as Record; }; diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[nested].[nested-page]._index.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[nested].[nested-page]._index.tsx index ed26c19587..f6462c10f0 100644 --- a/fixtures/webstudio-remix-vercel/app/__generated__/[nested].[nested-page]._index.tsx +++ b/fixtures/webstudio-remix-vercel/app/__generated__/[nested].[nested-page]._index.tsx @@ -7,6 +7,7 @@ import type { FontAsset, ImageAsset, ProjectMeta, + System, } from "@webstudio-is/sdk"; import { useResource } from "@webstudio-is/react-sdk"; import type { PageMeta } from "@webstudio-is/react-sdk"; @@ -68,10 +69,10 @@ export const user: { email: string | null } | undefined = { export const projectId = "cddc1d44-af37-4cb6-a430-d300cf6f932d"; export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -87,7 +88,7 @@ export const getPageMeta = ({ }; }; -const Page = ({}: { params: any }) => { +const Page = ({}: { system: any }) => { return ( diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.server.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.server.tsx index 05e605bec5..456e8c8599 100644 --- a/fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.server.tsx +++ b/fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.server.tsx @@ -1,4 +1,4 @@ -type Params = Record; -export const loadResources = async (_props: { params: Params }) => { +import { loadResource, type System } from "@webstudio-is/sdk"; +export const loadResources = async (_props: { system: System }) => { return {} as Record; }; diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.tsx index 596e91a951..e28186830f 100644 --- a/fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.tsx +++ b/fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.tsx @@ -7,6 +7,7 @@ import type { FontAsset, ImageAsset, ProjectMeta, + System, } from "@webstudio-is/sdk"; import { useResource } from "@webstudio-is/react-sdk"; import type { PageMeta } from "@webstudio-is/react-sdk"; @@ -79,10 +80,10 @@ export const user: { email: string | null } | undefined = { export const projectId = "cddc1d44-af37-4cb6-a430-d300cf6f932d"; export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -99,7 +100,7 @@ export const getPageMeta = ({ }; }; -const Page = ({}: { params: any }) => { +const Page = ({}: { system: any }) => { let [accordionValue, set$accordionValue] = useState("0"); return ( diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.server.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.server.tsx index 51103cf0d3..b8800a64ee 100644 --- a/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.server.tsx +++ b/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.server.tsx @@ -1,6 +1,5 @@ -import { loadResource } from "@webstudio-is/sdk"; -type Params = Record; -export const loadResources = async (_props: { params: Params }) => { +import { loadResource, type System } from "@webstudio-is/sdk"; +export const loadResources = async (_props: { system: System }) => { const [list_1] = await Promise.all([ loadResource({ id: "1vX6SQdaCjJN6MvJlG_cQ", diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.tsx index d1d03aa7a0..1102d81ae1 100644 --- a/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.tsx +++ b/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.tsx @@ -7,6 +7,7 @@ import type { FontAsset, ImageAsset, ProjectMeta, + System, } from "@webstudio-is/sdk"; import { useResource } from "@webstudio-is/react-sdk"; import type { PageMeta } from "@webstudio-is/react-sdk"; @@ -71,10 +72,10 @@ export const user: { email: string | null } | undefined = { export const projectId = "cddc1d44-af37-4cb6-a430-d300cf6f932d"; export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -90,7 +91,7 @@ export const getPageMeta = ({ }; }; -const Page = ({}: { params: any }) => { +const Page = ({}: { system: any }) => { let list = useResource("list_1"); return ( diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/_index.server.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/_index.server.tsx index 05e605bec5..456e8c8599 100644 --- a/fixtures/webstudio-remix-vercel/app/__generated__/_index.server.tsx +++ b/fixtures/webstudio-remix-vercel/app/__generated__/_index.server.tsx @@ -1,4 +1,4 @@ -type Params = Record; -export const loadResources = async (_props: { params: Params }) => { +import { loadResource, type System } from "@webstudio-is/sdk"; +export const loadResources = async (_props: { system: System }) => { return {} as Record; }; diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/_index.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/_index.tsx index d18c61ca35..a52c6c5665 100644 --- a/fixtures/webstudio-remix-vercel/app/__generated__/_index.tsx +++ b/fixtures/webstudio-remix-vercel/app/__generated__/_index.tsx @@ -7,6 +7,7 @@ import type { FontAsset, ImageAsset, ProjectMeta, + System, } from "@webstudio-is/sdk"; import { useResource } from "@webstudio-is/react-sdk"; import type { PageMeta } from "@webstudio-is/react-sdk"; @@ -77,10 +78,10 @@ export const user: { email: string | null } | undefined = { export const projectId = "cddc1d44-af37-4cb6-a430-d300cf6f932d"; export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -102,7 +103,7 @@ export const getPageMeta = ({ }; }; -const Page = ({}: { params: any }) => { +const Page = ({}: { system: any }) => { return ( { const params = getRemixParams(arg.params); - const resources = await loadResources({ params }); - const pageMeta = getPageMeta({ params, resources }); + const system = { + params, + search: {}, + }; + const resources = await loadResources({ system }); + const pageMeta = getPageMeta({ system, resources }); if (pageMeta.redirect) { const status = @@ -63,7 +67,7 @@ export const loader = async (arg: LoaderArgs) => { host, url: url.href, excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH, - params, + system, resources, pageMeta, }, @@ -316,7 +320,7 @@ export const action = async ({ request, context }: ActionArgs) => { }; const Outlet = () => { - const { params, resources } = useLoaderData(); + const { system, resources } = useLoaderData(); return ( { resources, }} > - + ); }; diff --git a/fixtures/webstudio-remix-vercel/app/routes/[form]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[form]._index.tsx index bc45ac2a62..61216b8a32 100644 --- a/fixtures/webstudio-remix-vercel/app/routes/[form]._index.tsx +++ b/fixtures/webstudio-remix-vercel/app/routes/[form]._index.tsx @@ -35,8 +35,12 @@ export type PageData = { export const loader = async (arg: LoaderArgs) => { const params = getRemixParams(arg.params); - const resources = await loadResources({ params }); - const pageMeta = getPageMeta({ params, resources }); + const system = { + params, + search: {}, + }; + const resources = await loadResources({ system }); + const pageMeta = getPageMeta({ system, resources }); if (pageMeta.redirect) { const status = @@ -63,7 +67,7 @@ export const loader = async (arg: LoaderArgs) => { host, url: url.href, excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH, - params, + system, resources, pageMeta, }, @@ -316,7 +320,7 @@ export const action = async ({ request, context }: ActionArgs) => { }; const Outlet = () => { - const { params, resources } = useLoaderData(); + const { system, resources } = useLoaderData(); return ( { resources, }} > - + ); }; diff --git a/fixtures/webstudio-remix-vercel/app/routes/[heading-with-id]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[heading-with-id]._index.tsx index 5bc492e29e..66e1362a56 100644 --- a/fixtures/webstudio-remix-vercel/app/routes/[heading-with-id]._index.tsx +++ b/fixtures/webstudio-remix-vercel/app/routes/[heading-with-id]._index.tsx @@ -35,8 +35,12 @@ export type PageData = { export const loader = async (arg: LoaderArgs) => { const params = getRemixParams(arg.params); - const resources = await loadResources({ params }); - const pageMeta = getPageMeta({ params, resources }); + const system = { + params, + search: {}, + }; + const resources = await loadResources({ system }); + const pageMeta = getPageMeta({ system, resources }); if (pageMeta.redirect) { const status = @@ -63,7 +67,7 @@ export const loader = async (arg: LoaderArgs) => { host, url: url.href, excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH, - params, + system, resources, pageMeta, }, @@ -316,7 +320,7 @@ export const action = async ({ request, context }: ActionArgs) => { }; const Outlet = () => { - const { params, resources } = useLoaderData(); + const { system, resources } = useLoaderData(); return ( { resources, }} > - + ); }; diff --git a/fixtures/webstudio-remix-vercel/app/routes/[nested].[nested-page]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[nested].[nested-page]._index.tsx index 21c102b8ed..9917dac5a0 100644 --- a/fixtures/webstudio-remix-vercel/app/routes/[nested].[nested-page]._index.tsx +++ b/fixtures/webstudio-remix-vercel/app/routes/[nested].[nested-page]._index.tsx @@ -35,8 +35,12 @@ export type PageData = { export const loader = async (arg: LoaderArgs) => { const params = getRemixParams(arg.params); - const resources = await loadResources({ params }); - const pageMeta = getPageMeta({ params, resources }); + const system = { + params, + search: {}, + }; + const resources = await loadResources({ system }); + const pageMeta = getPageMeta({ system, resources }); if (pageMeta.redirect) { const status = @@ -63,7 +67,7 @@ export const loader = async (arg: LoaderArgs) => { host, url: url.href, excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH, - params, + system, resources, pageMeta, }, @@ -316,7 +320,7 @@ export const action = async ({ request, context }: ActionArgs) => { }; const Outlet = () => { - const { params, resources } = useLoaderData(); + const { system, resources } = useLoaderData(); return ( { resources, }} > - + ); }; diff --git a/fixtures/webstudio-remix-vercel/app/routes/[radix]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[radix]._index.tsx index 0af13347ff..4b02f7b1ea 100644 --- a/fixtures/webstudio-remix-vercel/app/routes/[radix]._index.tsx +++ b/fixtures/webstudio-remix-vercel/app/routes/[radix]._index.tsx @@ -35,8 +35,12 @@ export type PageData = { export const loader = async (arg: LoaderArgs) => { const params = getRemixParams(arg.params); - const resources = await loadResources({ params }); - const pageMeta = getPageMeta({ params, resources }); + const system = { + params, + search: {}, + }; + const resources = await loadResources({ system }); + const pageMeta = getPageMeta({ system, resources }); if (pageMeta.redirect) { const status = @@ -63,7 +67,7 @@ export const loader = async (arg: LoaderArgs) => { host, url: url.href, excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH, - params, + system, resources, pageMeta, }, @@ -316,7 +320,7 @@ export const action = async ({ request, context }: ActionArgs) => { }; const Outlet = () => { - const { params, resources } = useLoaderData(); + const { system, resources } = useLoaderData(); return ( { resources, }} > - + ); }; diff --git a/fixtures/webstudio-remix-vercel/app/routes/[resources]._index.tsx b/fixtures/webstudio-remix-vercel/app/routes/[resources]._index.tsx index 074f6af39e..afd52345e7 100644 --- a/fixtures/webstudio-remix-vercel/app/routes/[resources]._index.tsx +++ b/fixtures/webstudio-remix-vercel/app/routes/[resources]._index.tsx @@ -35,8 +35,12 @@ export type PageData = { export const loader = async (arg: LoaderArgs) => { const params = getRemixParams(arg.params); - const resources = await loadResources({ params }); - const pageMeta = getPageMeta({ params, resources }); + const system = { + params, + search: {}, + }; + const resources = await loadResources({ system }); + const pageMeta = getPageMeta({ system, resources }); if (pageMeta.redirect) { const status = @@ -63,7 +67,7 @@ export const loader = async (arg: LoaderArgs) => { host, url: url.href, excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH, - params, + system, resources, pageMeta, }, @@ -316,7 +320,7 @@ export const action = async ({ request, context }: ActionArgs) => { }; const Outlet = () => { - const { params, resources } = useLoaderData(); + const { system, resources } = useLoaderData(); return ( { resources, }} > - + ); }; diff --git a/fixtures/webstudio-remix-vercel/app/routes/_index.tsx b/fixtures/webstudio-remix-vercel/app/routes/_index.tsx index 74004fecf9..e0e6041985 100644 --- a/fixtures/webstudio-remix-vercel/app/routes/_index.tsx +++ b/fixtures/webstudio-remix-vercel/app/routes/_index.tsx @@ -35,8 +35,12 @@ export type PageData = { export const loader = async (arg: LoaderArgs) => { const params = getRemixParams(arg.params); - const resources = await loadResources({ params }); - const pageMeta = getPageMeta({ params, resources }); + const system = { + params, + search: {}, + }; + const resources = await loadResources({ system }); + const pageMeta = getPageMeta({ system, resources }); if (pageMeta.redirect) { const status = @@ -63,7 +67,7 @@ export const loader = async (arg: LoaderArgs) => { host, url: url.href, excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH, - params, + system, resources, pageMeta, }, @@ -316,7 +320,7 @@ export const action = async ({ request, context }: ActionArgs) => { }; const Outlet = () => { - const { params, resources } = useLoaderData(); + const { system, resources } = useLoaderData(); return ( { resources, }} > - + ); }; diff --git a/packages/cli/__generated__/_index.server.tsx b/packages/cli/__generated__/_index.server.tsx index 7603eccb9c..e9b9795862 100644 --- a/packages/cli/__generated__/_index.server.tsx +++ b/packages/cli/__generated__/_index.server.tsx @@ -1,5 +1,6 @@ -type Params = Record; -export const loadResources = async (_props: { params: Params }) => { +import type { System } from "@webstudio-is/sdk"; + +export const loadResources = async (_props: { system: System }) => { const [] = await Promise.all([]); return {} as Record; }; diff --git a/packages/cli/__generated__/_index.tsx b/packages/cli/__generated__/_index.tsx index 036a5aa714..e2eafb154d 100644 --- a/packages/cli/__generated__/_index.tsx +++ b/packages/cli/__generated__/_index.tsx @@ -1,7 +1,7 @@ /** * The only intent of this file is to support typings inside ../templates/route-template for easier development. **/ -import type { ImageAsset, FontAsset } from "@webstudio-is/sdk"; +import type { ImageAsset, FontAsset, System } from "@webstudio-is/sdk"; import type { PageData } from "../templates/defaults/__templates__/route-template"; import type { PageMeta } from "@webstudio-is/react-sdk"; @@ -21,7 +21,7 @@ export const user: { email: string | null } | undefined = { export const projectId = "project-id"; export const getPageMeta = ({}: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -30,7 +30,7 @@ export const getPageMeta = ({}: { }; }; -const Page = (_props: { params: any }) => { +const Page = (_props: { system: any }) => { return <>; }; diff --git a/packages/cli/src/prebuild.ts b/packages/cli/src/prebuild.ts index 03131b6a21..09e8e596c8 100644 --- a/packages/cli/src/prebuild.ts +++ b/packages/cli/src/prebuild.ts @@ -519,6 +519,8 @@ export const prebuild = async (options: { "createPageMeta", "PageData", "Asset", + "ProjectMeta", + "System", "fontAssets", "pageData", "user", @@ -582,28 +584,17 @@ export const prebuild = async (options: { const dataSources = new Map(pageData.build.dataSources); const resources = new Map(pageData.build.resources); const utilsExport = generateUtilsExport({ props }); - // generate new Page Params variable if does not exist - // to allow always passing it from route template - const pathParamsDataSourceId = - pageData.page.pathParamsDataSourceId ?? "pathParamsDataSourceId"; - if (pageData.page.pathParamsDataSourceId === undefined) { - dataSources.set(pathParamsDataSourceId, { - id: pathParamsDataSourceId, - name: "Path Params", - type: "parameter", - }); - } const pageComponent = generateWebstudioComponent({ scope, name: "Page", rootInstanceId, parameters: [ { - id: `params`, + id: `system`, instanceId: "", - name: "params", + name: "system", type: "parameter", - value: pathParamsDataSourceId, + value: pageData.page.systemDataSourceId ?? "", }, ], instances, @@ -620,7 +611,7 @@ export const prebuild = async (options: { const pageExports = `/* eslint-disable */ /* This is a auto generated file for building the project */ \n import { Fragment, useState } from "react"; -import type { Asset, FontAsset, ImageAsset, ProjectMeta } from "@webstudio-is/sdk"; +import type { Asset, FontAsset, ImageAsset, ProjectMeta, System } from "@webstudio-is/sdk"; import { useResource } from "@webstudio-is/react-sdk"; import type { PageMeta } from "@webstudio-is/react-sdk"; ${componentImports} diff --git a/packages/cli/templates/defaults/__templates__/route-template.tsx b/packages/cli/templates/defaults/__templates__/route-template.tsx index 864c89b5d7..9e6a2d8537 100644 --- a/packages/cli/templates/defaults/__templates__/route-template.tsx +++ b/packages/cli/templates/defaults/__templates__/route-template.tsx @@ -35,8 +35,12 @@ export type PageData = { export const loader = async (arg: LoaderArgs) => { const params = getRemixParams(arg.params); - const resources = await loadResources({ params }); - const pageMeta = getPageMeta({ params, resources }); + const system = { + params, + search: {}, + }; + const resources = await loadResources({ system }); + const pageMeta = getPageMeta({ system, resources }); if (pageMeta.redirect) { const status = @@ -63,7 +67,7 @@ export const loader = async (arg: LoaderArgs) => { host, url: url.href, excludeFromSearch: arg.context.EXCLUDE_FROM_SEARCH, - params, + system, resources, pageMeta, }, @@ -316,7 +320,7 @@ export const action = async ({ request, context }: ActionArgs) => { }; const Outlet = () => { - const { params, resources } = useLoaderData(); + const { system, resources } = useLoaderData(); return ( { resources, }} > - + ); }; diff --git a/packages/react-sdk/src/component-generator.test.ts b/packages/react-sdk/src/component-generator.test.ts index f4663d9cfe..e158363369 100644 --- a/packages/react-sdk/src/component-generator.test.ts +++ b/packages/react-sdk/src/component-generator.test.ts @@ -768,29 +768,29 @@ test("avoid generating collection parameter variable as state", () => { ); }); -test("generate params variable when present", () => { +test("generate system variable when present", () => { expect( generateWebstudioComponent({ classesMap: new Map(), - scope: createScope(["params"]), + scope: createScope(["system"]), name: "Page", rootInstanceId: "body", parameters: [ { - id: "pathParamsPropId", + id: "pathSystemPropId", type: "parameter", instanceId: "", - name: "params", - value: "pathParamsId", + name: "system", + value: "systemId", }, ], instances: new Map([createInstancePair("body", "Body", [])]), dataSources: new Map([ createDataSourcePair({ - id: "pathParamsId", + id: "systemId", scopeInstanceId: "body", type: "parameter", - name: "params", + name: "system", }), ]), props: new Map([ @@ -799,18 +799,18 @@ test("generate params variable when present", () => { instanceId: "body", name: "data-slug", type: "expression", - value: "$ws$dataSource$pathParamsId.slug", + value: "$ws$dataSource$systemId.params.slug", }), ]), indexesWithinAncestors: new Map(), }) ).toEqual( clear(` - const Page = ({ params: params_1, }: { params: any; }) => { + const Page = ({ system: system_1, }: { system: any; }) => { return + data-slug={system_1?.params?.slug} /> } `) ); @@ -883,10 +883,10 @@ test("avoid generating unused variables", () => { rootInstanceId: "body", parameters: [ { - id: "pathParamsPropId", + id: "systemPropId", type: "parameter", instanceId: "", - name: "params", + name: "system", value: "unusedParameterId", }, ], @@ -933,7 +933,7 @@ test("avoid generating unused variables", () => { indexesWithinAncestors: new Map(), }) ).toMatchInlineSnapshot(` -"const Page = ({ }: { params: any; }) => { +"const Page = ({ }: { system: any; }) => { let [UsedVariableName, set$UsedVariableName] = useState("initial") return { }) ).toMatchInlineSnapshot(` "export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -71,10 +71,10 @@ test("generate complete static page meta factory", () => { }) ).toMatchInlineSnapshot(` "export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -120,10 +120,10 @@ test("generate asset url instead of id", () => { }) ).toMatchInlineSnapshot(` "export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -164,10 +164,10 @@ test("generate custom meta ignoring empty property name", () => { }) ).toMatchInlineSnapshot(` "export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { return { @@ -215,10 +215,10 @@ test("generate page meta factory with variables", () => { }) ).toMatchInlineSnapshot(` "export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { let VariableName = "" @@ -239,7 +239,7 @@ test("generate page meta factory with variables", () => { `); }); -test("generate page meta factory with path params", () => { +test("generate page meta factory with system", () => { expect( generatePageMeta({ globalScope: createScope(), @@ -248,30 +248,30 @@ test("generate page meta factory with path params", () => { name: "", path: "", rootInstanceId: "", - title: `$ws$dataSource$pathParamsId.slug`, + title: `$ws$dataSource$systemId.params.slug`, meta: {}, - pathParamsDataSourceId: "pathParamsId", + systemDataSourceId: "systemId", }, dataSources: toMap([ { - id: "pathParamsId", + id: "systemId", scopeInstanceId: "body", - name: "Path Params", + name: "system", type: "parameter", }, ]), }) ).toMatchInlineSnapshot(` "export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { - let PathParams = params + let system_1 = system return { - title: PathParams?.slug, + title: system_1?.params?.slug, description: undefined, excludePageFromSearch: undefined, language: undefined, @@ -311,10 +311,10 @@ test("generate page meta factory with resources", () => { }) ).toMatchInlineSnapshot(` "export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { let CmsPage = resources.CmsPage @@ -344,7 +344,7 @@ test("generate page meta factory without unused variables", () => { name: "", path: "", rootInstanceId: "", - pathParamsDataSourceId: "unusedPathParamsId", + systemDataSourceId: "unusedSystemId", title: `$ws$dataSource$usedVariableId`, meta: {}, }, @@ -364,9 +364,9 @@ test("generate page meta factory without unused variables", () => { value: { type: "string", value: "" }, }, { - id: "unusedPathParamsId", + id: "unusedSystemId", scopeInstanceId: "body", - name: "Unused Path Params", + name: "Unused System", type: "parameter", }, { @@ -380,10 +380,10 @@ test("generate page meta factory without unused variables", () => { }) ).toMatchInlineSnapshot(` "export const getPageMeta = ({ - params, + system, resources, }: { - params: Record; + system: System; resources: Record; }): PageMeta => { let UsedName = "" diff --git a/packages/react-sdk/src/page-meta-generator.ts b/packages/react-sdk/src/page-meta-generator.ts index 7aac7a9853..f29254fdac 100644 --- a/packages/react-sdk/src/page-meta-generator.ts +++ b/packages/react-sdk/src/page-meta-generator.ts @@ -29,7 +29,7 @@ export const generatePageMeta = ({ dataSources: DataSources; }) => { // reserve parameter names passed to generated function - const localScope = createScope(["params", "resources"]); + const localScope = createScope(["system", "resources"]); const usedDataSources: DataSources = new Map(); const titleExpression = generateExpression({ expression: page.title, @@ -97,10 +97,10 @@ export const generatePageMeta = ({ customExpression += ` ]`; let generated = ""; generated += `export const getPageMeta = ({\n`; - generated += ` params,\n`; + generated += ` system,\n`; generated += ` resources,\n`; generated += `}: {\n`; - generated += ` params: Record;\n`; + generated += ` system: System;\n`; generated += ` resources: Record;\n`; generated += `}): PageMeta => {\n`; for (const dataSource of usedDataSources.values()) { @@ -111,9 +111,9 @@ export const generatePageMeta = ({ continue; } if (dataSource.type === "parameter") { - if (dataSource.id === page.pathParamsDataSourceId) { + if (dataSource.id === page.systemDataSourceId) { const valueName = localScope.getName(dataSource.id, dataSource.name); - generated += ` let ${valueName} = params\n`; + generated += ` let ${valueName} = system\n`; } continue; } diff --git a/packages/react-sdk/src/resources-generator.test.ts b/packages/react-sdk/src/resources-generator.test.ts index 5749c921c6..8eabacf901 100644 --- a/packages/react-sdk/src/resources-generator.test.ts +++ b/packages/react-sdk/src/resources-generator.test.ts @@ -36,9 +36,8 @@ test("generate resources loader", () => { }) ).toEqual( clear(` - import { loadResource } from "@webstudio-is/sdk"; - type Params = Record - export const loadResources = async (_props: { params: Params }) => { + import { loadResource, type System } from "@webstudio-is/sdk"; + export const loadResources = async (_props: { system: System }) => { const [ variableName, ] = await Promise.all([ @@ -67,7 +66,7 @@ test("generate variable and use in resources loader", () => { scope: createScope(), page: { rootInstanceId: "body", - pathParamsDataSourceId: "variableParamsId", + systemDataSourceId: "variableSystemId", } as Page, dataSources: toMap([ { @@ -103,9 +102,8 @@ test("generate variable and use in resources loader", () => { }) ).toEqual( clear(` - import { loadResource } from "@webstudio-is/sdk"; - type Params = Record - export const loadResources = async (_props: { params: Params }) => { + import { loadResource, type System } from "@webstudio-is/sdk"; + export const loadResources = async (_props: { system: System }) => { let AccessToken = "my-token" const [ variableName, @@ -129,13 +127,13 @@ test("generate variable and use in resources loader", () => { ); }); -test("generate path params variable and use in resources loader", () => { +test("generate system variable and use in resources loader", () => { expect( generateResourcesLoader({ scope: createScope(), page: { rootInstanceId: "body", - pathParamsDataSourceId: "variableParamsId", + systemDataSourceId: "variableSystemId", } as Page, dataSources: toMap([ { @@ -146,9 +144,9 @@ test("generate path params variable and use in resources loader", () => { resourceId: "resourceId", }, { - id: "variableParamsId", + id: "variableSystemId", scopeInstanceId: "body", - name: "Path Params", + name: "system", type: "parameter", }, ]), @@ -156,7 +154,7 @@ test("generate path params variable and use in resources loader", () => { { id: "resourceId", name: "resourceName", - url: `"https://my-json.com/" + $ws$dataSource$variableParamsId.slug`, + url: `"https://my-json.com/" + $ws$dataSource$variableSystemId.params.slug`, method: "post", headers: [{ name: "Content-Type", value: `"application/json"` }], body: `{ body: true }`, @@ -165,17 +163,16 @@ test("generate path params variable and use in resources loader", () => { }) ).toEqual( clear(` - import { loadResource } from "@webstudio-is/sdk"; - type Params = Record - export const loadResources = async (_props: { params: Params }) => { - const PathParams = _props.params + import { loadResource, type System } from "@webstudio-is/sdk"; + export const loadResources = async (_props: { system: System }) => { + const system = _props.system const [ variableName, ] = await Promise.all([ loadResource({ id: "resourceId", name: "resourceName", - url: "https://my-json.com/" + PathParams?.slug, + url: "https://my-json.com/" + system?.params?.slug, method: "post", headers: [ { name: "Content-Type", value: "application/json" }, @@ -201,8 +198,8 @@ test("generate empty resources loader", () => { }) ).toEqual( clear(` - type Params = Record - export const loadResources = async (_props: { params: Params }) => { + import { loadResource, type System } from "@webstudio-is/sdk"; + export const loadResources = async (_props: { system: System }) => { return { } as Record } @@ -227,8 +224,8 @@ test("prevent generating unused variables", () => { resources: new Map(), }) ).toMatchInlineSnapshot(` -"type Params = Record -export const loadResources = async (_props: { params: Params }) => { +"import { loadResource, type System } from "@webstudio-is/sdk"; +export const loadResources = async (_props: { system: System }) => { return { } as Record } @@ -236,27 +233,27 @@ return { `); }); -test("prevent generating unused path params variable", () => { +test("prevent generating unused system variable", () => { expect( generateResourcesLoader({ scope: createScope(), page: { rootInstanceId: "body", - pathParamsDataSourceId: "variableParamsId", + systemDataSourceId: "variableParamsId", } as Page, dataSources: toMap([ { id: "variableParamsId", scopeInstanceId: "body", - name: "Unused Path Params", + name: "Unused System", type: "parameter", }, ]), resources: new Map(), }) ).toMatchInlineSnapshot(` -"type Params = Record -export const loadResources = async (_props: { params: Params }) => { +"import { loadResource, type System } from "@webstudio-is/sdk"; +export const loadResources = async (_props: { system: System }) => { return { } as Record } diff --git a/packages/react-sdk/src/resources-generator.ts b/packages/react-sdk/src/resources-generator.ts index 7a14ef96fe..3e41dc5860 100644 --- a/packages/react-sdk/src/resources-generator.ts +++ b/packages/react-sdk/src/resources-generator.ts @@ -73,21 +73,18 @@ export const generateResourcesLoader = ({ } if (dataSource.type === "parameter") { - // support only page path params parameter - if (dataSource.id !== page.pathParamsDataSourceId) { + // support only page system parameter + if (dataSource.id !== page.systemDataSourceId) { continue; } const name = scope.getName(dataSource.id, dataSource.name); - generatedVariables += `const ${name} = _props.params\n`; + generatedVariables += `const ${name} = _props.system\n`; } } let generated = ""; - if (hasResources) { - generated += `import { loadResource } from "@webstudio-is/sdk";\n`; - } - generated += `type Params = Record\n`; - generated += `export const loadResources = async (_props: { params: Params }) => {\n`; + generated += `import { loadResource, type System } from "@webstudio-is/sdk";\n`; + generated += `export const loadResources = async (_props: { system: System }) => {\n`; generated += generatedVariables; if (hasResources) { generated += `const [\n`; diff --git a/packages/sdk/src/schema/pages.ts b/packages/sdk/src/schema/pages.ts index 91ce994d50..00894a62f4 100644 --- a/packages/sdk/src/schema/pages.ts +++ b/packages/sdk/src/schema/pages.ts @@ -1,5 +1,10 @@ import { z } from "zod"; +export type System = { + params: Record; + search: Record; +}; + const MIN_TITLE_LENGTH = 2; const PageId = z.string(); @@ -59,7 +64,6 @@ const commonPageFields = { .optional(), }), rootInstanceId: z.string(), - pathParamsDataSourceId: z.optional(z.string()), // @todo make required after releasing migration systemDataSourceId: z.optional(z.string()), } as const;