@webstudio-is/react-sdk 0.128.0 → 0.129.0

package/lib/index.js

@@ -31,6 +31,8 @@ var generateRemixRoute = (pathname) => {
 var generateRemixParams = (pathname) => {
   const name = pathname.match(/:(?<name>\w+)\*$/)?.groups?.name;
   let generated = "";
+  generated += `type Params = Record<string, string | undefined>;
+`;
   generated += `export const getRemixParams = ({ ...params }: Params): Params => {
 `;
   if (name) {
@@ -1564,19 +1566,38 @@ var generateJsxChildren = ({
   }
   return generatedChildren;
 };
-var generatePageComponent = ({
+var generateWebstudioComponent = ({
   scope,
-  page,
+  name,
+  rootInstanceId,
+  parameters,
   instances,
   props,
   dataSources,
   indexesWithinAncestors,
   classesMap
 }) => {
-  const instance = instances.get(page.rootInstanceId);
+  const instance = instances.get(rootInstanceId);
   if (instance === void 0) {
     return "";
   }
+  let generatedProps = "";
+  if (parameters.length > 0) {
+    let generatedPropsValue = "{ ";
+    let generatedPropsType = "{ ";
+    for (const parameter of parameters) {
+      const dataSource = dataSources.get(parameter.value);
+      if (dataSource === void 0) {
+        continue;
+      }
+      const valueName = scope.getName(dataSource.id, dataSource.name);
+      generatedPropsValue += `${parameter.name}: ${valueName}, `;
+      generatedPropsType += `${parameter.name}: any; `;
+    }
+    generatedPropsValue += `}`;
+    generatedPropsType += `}`;
+    generatedProps = `${generatedPropsValue}: ${generatedPropsType}`;
+  }
   let generatedDataSources = "";
   for (const dataSource of dataSources.values()) {
     if (dataSource.type === "variable") {
@@ -1590,13 +1611,6 @@ var generatePageComponent = ({
       generatedDataSources += `let [${valueName}, ${setterName}] = useState<any>(${initialValueString})
 `;
     }
-    if (dataSource.type === "parameter") {
-      if (dataSource.id === page.pathVariableId) {
-        const valueName = scope.getName(dataSource.id, dataSource.name);
-        generatedDataSources += `let ${valueName} = _props.params
-`;
-      }
-    }
     if (dataSource.type === "resource") {
       const valueName = scope.getName(dataSource.id, dataSource.name);
       const resourceName = scope.getName(
@@ -1626,9 +1640,7 @@ var generatePageComponent = ({
     })
   });
   let generatedComponent = "";
-  generatedComponent += `type Params = Record<string, string | undefined>
-`;
-  generatedComponent += `const Page = (_props: { params: Params }) => {
+  generatedComponent += `const ${name} = (${generatedProps}) => {
 `;
   generatedComponent += `${generatedDataSources}`;
   generatedComponent += `return ${generatedJsx}`;
@@ -1768,11 +1780,11 @@ export {
   generateDataFromEmbedTemplate,
   generateJsxChildren,
   generateJsxElement,
-  generatePageComponent,
   generateRemixParams,
   generateRemixRoute,
   generateResourcesLoader,
   generateUtilsExport,
+  generateWebstudioComponent,
   getClosestInstance,
   getIndexWithinAncestorFromComponentProps,
   getIndexesWithinAncestors,

package/lib/types/component-generator.d.ts

@@ -1,4 +1,4 @@
-import type { Instances, Instance, Props, Scope, DataSources, Page } from "@webstudio-is/sdk";
+import type { Instances, Instance, Props, Scope, DataSources, Prop } from "@webstudio-is/sdk";
 import type { IndexesWithinAncestors } from "./instance-utils";
 export declare const generateJsxElement: ({ scope, instance, props, dataSources, indexesWithinAncestors, children, classesMap, }: {
     scope: Scope;
@@ -257,9 +257,13 @@ export declare const generateJsxChildren: ({ scope, children, instances, props,
     indexesWithinAncestors: IndexesWithinAncestors;
     classesMap?: Map<string, string[]> | undefined;
 }) => string;
-export declare const generatePageComponent: ({ scope, page, instances, props, dataSources, indexesWithinAncestors, classesMap, }: {
+export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId, parameters, instances, props, dataSources, indexesWithinAncestors, classesMap, }: {
     scope: Scope;
-    page: Page;
+    name: string;
+    rootInstanceId: Instance["id"];
+    parameters: Extract<Prop, {
+        type: "parameter";
+    }>[];
     instances: Map<string, {
         type: "instance";
         id: string;

package/lib/types/index.d.ts

@@ -13,5 +13,5 @@ export { validateExpression, encodeDataSourceVariable, decodeDataSourceVariable,
 export { getIndexesWithinAncestors } from "./instance-utils";
 export * from "./hook";
 export { generateUtilsExport } from "./generator";
-export { generatePageComponent, generateJsxElement, generateJsxChildren, } from "./component-generator";
+export { generateWebstudioComponent, generateJsxElement, generateJsxChildren, } from "./component-generator";
 export { generateResourcesLoader } from "./resources-generator";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.128.0",
+  "version": "0.129.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -33,11 +33,11 @@
     "jsep": "^1.3.8",
     "nanoid": "^5.0.1",
     "title-case": "^4.1.0",
-    "@webstudio-is/fonts": "0.128.0",
-    "@webstudio-is/css-engine": "0.128.0",
-    "@webstudio-is/icons": "^0.128.0",
-    "@webstudio-is/image": "0.128.0",
-    "@webstudio-is/sdk": "0.128.0"
+    "@webstudio-is/fonts": "0.129.0",
+    "@webstudio-is/css-engine": "0.129.0",
+    "@webstudio-is/icons": "^0.129.0",
+    "@webstudio-is/image": "0.129.0",
+    "@webstudio-is/sdk": "0.129.0"
   },
   "exports": {
     ".": {