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.

fixtures/webstudio-custom-template/app/__generated__/[script-test]._index.server.tsx

@@ -1,4 +1,4 @@
-type Params = Record<string, string | undefined>;
-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<string, unknown>;
 };

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<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -68,7 +69,7 @@ export const getPageMeta = ({
   };
 };
 
-const Page = ({}: { params: any }) => {
+const Page = ({}: { system: any }) => {
   return (
     <Body
       data-ws-id="LW98_-srDnnagkR10lsk4"

fixtures/webstudio-custom-template/app/__generated__/[world]._index.server.tsx

@@ -1,4 +1,4 @@
-type Params = Record<string, string | undefined>;
-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<string, unknown>;
 };

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<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -65,7 +66,7 @@ export const getPageMeta = ({
   };
 };
 
-const Page = ({}: { params: any }) => {
+const Page = ({}: { system: any }) => {
   return (
     <Body data-ws-id="jDb2FuSK2-azIZxkH5XNv" data-ws-component="Body">
       <Heading data-ws-id="D7kQxgXxrjei-MS_KzUa2" data-ws-component="Heading">

fixtures/webstudio-custom-template/app/__generated__/_index.server.tsx

@@ -1,4 +1,4 @@
-type Params = Record<string, string | undefined>;
-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<string, unknown>;
 };

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<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -92,7 +93,7 @@ export const getPageMeta = ({
   };
 };
 
-const Page = ({}: { params: any }) => {
+const Page = ({}: { system: any }) => {
   return (
     <Body
       data-ws-id="ibXgMoi9_ipHx1gVrvii0"

fixtures/webstudio-custom-template/app/routes/[script-test]._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<typeof loader>();
+  const { system, resources } = useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -326,7 +330,7 @@ const Outlet = () => {
         resources,
       }}
     >
-      <Page params={params} />
+      <Page system={system} />
     </ReactSdkContext.Provider>
   );
 };

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<typeof loader>();
+  const { system, resources } = useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -326,7 +330,7 @@ const Outlet = () => {
         resources,
       }}
     >
-      <Page params={params} />
+      <Page system={system} />
     </ReactSdkContext.Provider>
   );
 };

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<typeof loader>();
+  const { system, resources } = useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -326,7 +330,7 @@ const Outlet = () => {
         resources,
       }}
     >
-      <Page params={params} />
+      <Page system={system} />
     </ReactSdkContext.Provider>
   );
 };

fixtures/webstudio-remix-netlify-edge-functions/app/__generated__/_index.server.tsx

@@ -1,4 +1,4 @@
-type Params = Record<string, string | undefined>;
-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<string, unknown>;
 };

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<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -52,7 +53,7 @@ export const getPageMeta = ({
   };
 };
 
-const Page = ({}: { params: any }) => {
+const Page = ({}: { system: any }) => {
   return (
     <Body
       data-ws-id="MMimeobf_zi4ZkRGXapju"

fixtures/webstudio-remix-netlify-edge-functions/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<typeof loader>();
+  const { system, resources } = useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -326,7 +330,7 @@ const Outlet = () => {
         resources,
       }}
     >
-      <Page params={params} />
+      <Page system={system} />
     </ReactSdkContext.Provider>
   );
 };

fixtures/webstudio-remix-netlify-functions/app/__generated__/_index.server.tsx

@@ -1,4 +1,4 @@
-type Params = Record<string, string | undefined>;
-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<string, unknown>;
 };

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<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -52,7 +53,7 @@ export const getPageMeta = ({
   };
 };
 
-const Page = ({}: { params: any }) => {
+const Page = ({}: { system: any }) => {
   return (
     <Body
       data-ws-id="MMimeobf_zi4ZkRGXapju"

fixtures/webstudio-remix-netlify-functions/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<typeof loader>();
+  const { system, resources } = useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -326,7 +330,7 @@ const Outlet = () => {
         resources,
       }}
     >
-      <Page params={params} />
+      <Page system={system} />
     </ReactSdkContext.Provider>
   );
 };

fixtures/webstudio-remix-vercel/app/__generated__/[_route_with_symbols_]._index.server.tsx

@@ -1,4 +1,4 @@
-type Params = Record<string, string | undefined>;
-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<string, unknown>;
 };

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<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -87,7 +88,7 @@ export const getPageMeta = ({
   };
 };
 
-const Page = ({}: { params: any }) => {
+const Page = ({}: { system: any }) => {
   return (
     <Body data-ws-id="EDEfpMPRqDejthtwkH7ws" data-ws-component="Body">
       <Image

fixtures/webstudio-remix-vercel/app/__generated__/[form]._index.server.tsx

@@ -1,4 +1,4 @@
-type Params = Record<string, string | undefined>;
-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<string, unknown>;
 };

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<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -96,7 +97,7 @@ export const getPageMeta = ({
   };
 };
 
-const Page = ({}: { params: any }) => {
+const Page = ({}: { system: any }) => {
   let [formState, set$formState] = useState<any>("initial");
   let [formState_1, set$formState_1] = useState<any>("initial");
   return (

fixtures/webstudio-remix-vercel/app/__generated__/[heading-with-id]._index.server.tsx

@@ -1,4 +1,4 @@
-type Params = Record<string, string | undefined>;
-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<string, unknown>;
 };

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<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -87,7 +88,7 @@ export const getPageMeta = ({
   };
 };
 
-const Page = ({}: { params: any }) => {
+const Page = ({}: { system: any }) => {
   return (
     <Body data-ws-id="O-ljaGZQ0iRNTlEshMkgE" data-ws-component="Body">
       <Heading

fixtures/webstudio-remix-vercel/app/__generated__/[nested].[nested-page]._index.server.tsx

@@ -1,4 +1,4 @@
-type Params = Record<string, string | undefined>;
-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<string, unknown>;
 };

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<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -87,7 +88,7 @@ export const getPageMeta = ({
   };
 };
 
-const Page = ({}: { params: any }) => {
+const Page = ({}: { system: any }) => {
   return (
     <Body data-ws-id="L0ZXd5F9xk9Rsl9ORzIkJ" data-ws-component="Body">
       <Heading data-ws-id="VFPjLwt6Caq4l9PPJSiyI" data-ws-component="Heading">

fixtures/webstudio-remix-vercel/app/__generated__/[radix]._index.server.tsx

@@ -1,4 +1,4 @@
-type Params = Record<string, string | undefined>;
-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<string, unknown>;
 };

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<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -99,7 +100,7 @@ export const getPageMeta = ({
   };
 };
 
-const Page = ({}: { params: any }) => {
+const Page = ({}: { system: any }) => {
   let [accordionValue, set$accordionValue] = useState<any>("0");
   return (
     <Body data-ws-id="uKWGyE9JY3cPwY-xI9vk6" data-ws-component="Body">

fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.server.tsx

@@ -1,6 +1,5 @@
-import { loadResource } from "@webstudio-is/sdk";
-type Params = Record<string, string | undefined>;
-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",

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<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -90,7 +91,7 @@ export const getPageMeta = ({
   };
 };
 
-const Page = ({}: { params: any }) => {
+const Page = ({}: { system: any }) => {
   let list = useResource("list_1");
   return (
     <Body data-ws-id="AWY2qZfpbykoiWELeJhse" data-ws-component="Body">

fixtures/webstudio-remix-vercel/app/__generated__/_index.server.tsx

@@ -1,4 +1,4 @@
-type Params = Record<string, string | undefined>;
-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<string, unknown>;
 };

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<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -102,7 +103,7 @@ export const getPageMeta = ({
   };
 };
 
-const Page = ({}: { params: any }) => {
+const Page = ({}: { system: any }) => {
   return (
     <Body
       data-ws-id="On9cvWCxr5rdZtY9O1Bv0"

fixtures/webstudio-remix-vercel/app/routes/[_route_with_symbols_]._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<typeof loader>();
+  const { system, resources } = useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -326,7 +330,7 @@ const Outlet = () => {
         resources,
       }}
     >
-      <Page params={params} />
+      <Page system={system} />
     </ReactSdkContext.Provider>
   );
 };

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<typeof loader>();
+  const { system, resources } = useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -326,7 +330,7 @@ const Outlet = () => {
         resources,
       }}
     >
-      <Page params={params} />
+      <Page system={system} />
     </ReactSdkContext.Provider>
   );
 };

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<typeof loader>();
+  const { system, resources } = useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -326,7 +330,7 @@ const Outlet = () => {
         resources,
       }}
     >
-      <Page params={params} />
+      <Page system={system} />
     </ReactSdkContext.Provider>
   );
 };

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<typeof loader>();
+  const { system, resources } = useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -326,7 +330,7 @@ const Outlet = () => {
         resources,
       }}
     >
-      <Page params={params} />
+      <Page system={system} />
     </ReactSdkContext.Provider>
   );
 };

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<typeof loader>();
+  const { system, resources } = useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -326,7 +330,7 @@ const Outlet = () => {
         resources,
       }}
     >
-      <Page params={params} />
+      <Page system={system} />
     </ReactSdkContext.Provider>
   );
 };

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<typeof loader>();
+  const { system, resources } = useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -326,7 +330,7 @@ const Outlet = () => {
         resources,
       }}
     >
-      <Page params={params} />
+      <Page system={system} />
     </ReactSdkContext.Provider>
   );
 };

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<typeof loader>();
+  const { system, resources } = useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -326,7 +330,7 @@ const Outlet = () => {
         resources,
       }}
     >
-      <Page params={params} />
+      <Page system={system} />
     </ReactSdkContext.Provider>
   );
 };

packages/cli/__generated__/_index.server.tsx

@@ -1,5 +1,6 @@
-type Params = Record<string, string | undefined>;
-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<string, unknown>;
 };

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<string, any>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -30,7 +30,7 @@ export const getPageMeta = ({}: {
   };
 };
 
-const Page = (_props: { params: any }) => {
+const Page = (_props: { system: any }) => {
   return <></>;
 };
 

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}

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<typeof loader>();
+  const { system, resources } = useLoaderData<typeof loader>();
   return (
     <ReactSdkContext.Provider
       value={{
@@ -326,7 +330,7 @@ const Outlet = () => {
         resources,
       }}
     >
-      <Page params={params} />
+      <Page system={system} />
     </ReactSdkContext.Provider>
   );
 };

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 <Body
     data-ws-id="body"
     data-ws-component="Body"
-    data-slug={params_1?.slug} />
+    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<any>("initial")
 return <Body
 data-ws-id="body"

packages/react-sdk/src/page-meta-generator.test.ts

@@ -21,10 +21,10 @@ test("generate minimal static page meta factory", () => {
     })
   ).toMatchInlineSnapshot(`
 "export const getPageMeta = ({
-  params,
+  system,
   resources,
 }: {
-  params: Record<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -71,10 +71,10 @@ test("generate complete static page meta factory", () => {
     })
   ).toMatchInlineSnapshot(`
 "export const getPageMeta = ({
-  params,
+  system,
   resources,
 }: {
-  params: Record<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -120,10 +120,10 @@ test("generate asset url instead of id", () => {
     })
   ).toMatchInlineSnapshot(`
 "export const getPageMeta = ({
-  params,
+  system,
   resources,
 }: {
-  params: Record<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -164,10 +164,10 @@ test("generate custom meta ignoring empty property name", () => {
     })
   ).toMatchInlineSnapshot(`
 "export const getPageMeta = ({
-  params,
+  system,
   resources,
 }: {
-  params: Record<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   return {
@@ -215,10 +215,10 @@ test("generate page meta factory with variables", () => {
     })
   ).toMatchInlineSnapshot(`
 "export const getPageMeta = ({
-  params,
+  system,
   resources,
 }: {
-  params: Record<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): 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<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): 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<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): 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<string, undefined | string>;
+  system: System;
   resources: Record<string, any>;
 }): PageMeta => {
   let UsedName = ""

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<string, undefined | string>;\n`;
+  generated += `  system: System;\n`;
   generated += `  resources: Record<string, any>;\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;
     }

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<string, string | undefined>
-      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<string, string | undefined>
-      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<string, string | undefined>
-      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<string, string | undefined>
-      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<string, unknown>
       }
@@ -227,8 +224,8 @@ test("prevent generating unused variables", () => {
       resources: new Map(),
     })
   ).toMatchInlineSnapshot(`
-"type Params = Record<string, string | undefined>
-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<string, unknown>
 }
@@ -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<string, string | undefined>
-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<string, unknown>
 }

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<string, string | undefined>\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`;

packages/sdk/src/schema/pages.ts

@@ -1,5 +1,10 @@
 import { z } from "zod";
 
+export type System = {
+  params: Record<string, string | undefined>;
+  search: Record<string, string | undefined>;
+};
+
 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;