@webstudio-is/react-sdk 0.127.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) {
@@ -802,82 +804,6 @@ var generateExpression = ({
     }
   });
 };
-var generateDataSources = ({
-  scope,
-  typed = false,
-  dataSources,
-  props
-}) => {
-  const variables = /* @__PURE__ */ new Map();
-  let body = "";
-  const output = /* @__PURE__ */ new Map();
-  for (const dataSource of dataSources.values()) {
-    if (dataSource.type === "variable") {
-      const valueName = scope.getName(dataSource.id, dataSource.name);
-      const setterName = scope.getName(
-        `set$${dataSource.id}`,
-        `set$${dataSource.name}`
-      );
-      const initialValue = dataSource.value.value;
-      output.set(dataSource.id, valueName);
-      variables.set(dataSource.id, { valueName, setterName, initialValue });
-    }
-  }
-  for (const prop of props.values()) {
-    if (prop.type === "action") {
-      const name = scope.getName(prop.id, prop.name);
-      output.set(prop.id, name);
-      const setters = /* @__PURE__ */ new Set();
-      let args = [];
-      let newCode = "";
-      for (const value of prop.value) {
-        args = value.args;
-        newCode += validateExpression(value.code, {
-          optional: true,
-          effectful: true,
-          transformIdentifier: (identifier, assignee) => {
-            if (args?.includes(identifier)) {
-              return identifier;
-            }
-            const depId = decodeDataSourceVariable(identifier);
-            const dep = depId ? dataSources.get(depId) : void 0;
-            if (dep) {
-              const name2 = scope.getName(dep.id, dep.name);
-              if (assignee) {
-                setters.add(dep.id);
-              }
-              return name2;
-            }
-            console.error(`Unknown dependency "${identifier}"`);
-            return identifier;
-          }
-        });
-        newCode += `
-`;
-      }
-      if (typed) {
-        args = args.map((arg) => `${arg}: any`);
-      }
-      body += `let ${name} = (${args.join(", ")}) => {
-`;
-      body += newCode;
-      for (const dataSourceId of setters.values()) {
-        const variable = variables.get(dataSourceId);
-        if (variable) {
-          body += `${variable.setterName}(${variable.valueName})
-`;
-        }
-      }
-      body += `}
-`;
-    }
-  }
-  return {
-    variables,
-    body,
-    output
-  };
-};
 
 // src/embed-template.ts
 var EmbedTemplateText = z2.object({
@@ -1399,6 +1325,58 @@ var generateUtilsExport = (siteData) => {
 
 // src/component-generator.ts
 import { parseComponentName } from "@webstudio-is/sdk";
+var generateAction = ({
+  scope,
+  prop,
+  dataSources
+}) => {
+  const setters = /* @__PURE__ */ new Set();
+  let args = [];
+  let assignersCode = "";
+  for (const value of prop.value) {
+    args = value.args;
+    assignersCode += validateExpression(value.code, {
+      optional: true,
+      effectful: true,
+      transformIdentifier: (identifier, assignee) => {
+        if (args?.includes(identifier)) {
+          return identifier;
+        }
+        const depId = decodeDataSourceVariable(identifier);
+        const dep = depId ? dataSources.get(depId) : void 0;
+        if (dep) {
+          if (assignee) {
+            setters.add(dep);
+          }
+          const valueName = scope.getName(dep.id, dep.name);
+          return valueName;
+        }
+        console.error(`Unknown dependency "${identifier}"`);
+        return identifier;
+      }
+    });
+    assignersCode += `
+`;
+  }
+  let settersCode = "";
+  for (const dataSource of setters) {
+    const valueName = scope.getName(dataSource.id, dataSource.name);
+    const setterName = scope.getName(
+      `set$${dataSource.id}`,
+      `set$${dataSource.name}`
+    );
+    settersCode += `${setterName}(${valueName})
+`;
+  }
+  const argsList = args.map((arg) => `${arg}: any`).join(", ");
+  let generated = "";
+  generated += `(${argsList}) => {
+`;
+  generated += assignersCode;
+  generated += settersCode;
+  generated += `}`;
+  return generated;
+};
 var generatePropValue = ({
   scope,
   prop,
@@ -1425,7 +1403,7 @@ var generatePropValue = ({
     });
   }
   if (prop.type === "action") {
-    return scope.getName(prop.id, prop.name);
+    return generateAction({ scope, prop, dataSources });
   }
   prop;
 };
@@ -1588,25 +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 "";
   }
-  const { body: dataSourcesBody } = generateDataSources({
-    typed: true,
-    scope,
-    dataSources,
-    props
-  });
+  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") {
@@ -1620,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(
@@ -1638,7 +1622,6 @@ var generatePageComponent = ({
 `;
     }
   }
-  generatedDataSources += dataSourcesBody;
   const generatedJsx = generateJsxElement({
     scope,
     instance,
@@ -1657,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}`;
@@ -1797,14 +1778,13 @@ export {
   encodeDataSourceVariable,
   generateCss,
   generateDataFromEmbedTemplate,
-  generateDataSources,
   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/expression.d.ts

@@ -1,4 +1,4 @@
-import type { DataSources, Props, Scope } from "@webstudio-is/sdk";
+import type { DataSources, Scope } from "@webstudio-is/sdk";
 type TransformIdentifier = (id: string, assignee: boolean) => string;
 export declare const validateExpression: (code: string, options?: {
     /**
@@ -51,131 +51,4 @@ export declare const generateExpression: ({ expression, dataSources, scope, }: {
     }>;
     scope: Scope;
 }) => string;
-type VariableName = string;
-export declare const generateDataSources: ({ scope, typed, dataSources, props, }: {
-    scope: Scope;
-    typed?: boolean | undefined;
-    dataSources: Map<string, {
-        value: {
-            value: number;
-            type: "number";
-        } | {
-            value: string;
-            type: "string";
-        } | {
-            value: boolean;
-            type: "boolean";
-        } | {
-            value: string[];
-            type: "string[]";
-        } | {
-            type: "json";
-            value?: unknown;
-        };
-        type: "variable";
-        name: string;
-        id: string;
-        scopeInstanceId?: string | undefined;
-    } | {
-        type: "parameter";
-        name: string;
-        id: string;
-        scopeInstanceId?: string | undefined;
-    } | {
-        type: "resource";
-        name: string;
-        id: string;
-        resourceId: string;
-        scopeInstanceId?: string | undefined;
-    }>;
-    props: Map<string, {
-        value: number;
-        type: "number";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "string";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: boolean;
-        type: "boolean";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        type: "json";
-        name: string;
-        id: string;
-        instanceId: string;
-        value?: unknown;
-        required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "asset";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: (string | {
-            instanceId: string;
-            pageId: string;
-        }) & (string | {
-            instanceId: string;
-            pageId: string;
-        } | undefined);
-        type: "page";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: string[];
-        type: "string[]";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "parameter";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: string;
-        type: "expression";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    } | {
-        value: {
-            code: string;
-            type: "execute";
-            args: string[];
-        }[];
-        type: "action";
-        name: string;
-        id: string;
-        instanceId: string;
-        required?: boolean | undefined;
-    }>;
-}) => {
-    variables: Map<string, {
-        valueName: VariableName;
-        setterName: VariableName;
-        initialValue: unknown;
-    }>;
-    body: string;
-    output: Map<string, string>;
-};
 export {};

package/lib/types/index.d.ts

@@ -9,9 +9,9 @@ export { type WsComponentPropsMeta, type ComponentState, type PresetStyle, WsCom
 export * from "./embed-template";
 export * from "./props";
 export * from "./context";
-export { validateExpression, encodeDataSourceVariable, decodeDataSourceVariable, generateDataSources, } from "./expression";
+export { validateExpression, encodeDataSourceVariable, decodeDataSourceVariable, } from "./expression";
 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.127.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/css-engine": "0.127.0",
-    "@webstudio-is/fonts": "0.127.0",
-    "@webstudio-is/image": "0.127.0",
-    "@webstudio-is/sdk": "0.127.0",
-    "@webstudio-is/icons": "^0.127.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": {
     ".": {