@webstudio-is/react-sdk 0.75.0 → 0.77.0

package/lib/expression.js

@@ -0,0 +1,183 @@
+import jsep from "jsep";
+const generateCode = (node, failOnForbidden, transformIdentifier) => {
+  if (node.type === "Identifier") {
+    return transformIdentifier(node.name);
+  }
+  if (node.type === "MemberExpression") {
+    if (failOnForbidden) {
+      const object2 = generateCode(
+        node.object,
+        false,
+        transformIdentifier
+      );
+      const property2 = generateCode(
+        node.property,
+        false,
+        transformIdentifier
+      );
+      throw Error(`Cannot access "${property2}" of "${object2}"`);
+    }
+    const object = generateCode(
+      node.object,
+      failOnForbidden,
+      transformIdentifier
+    );
+    const property = generateCode(
+      node.property,
+      failOnForbidden,
+      transformIdentifier
+    );
+    return `${object}.${property}`;
+  }
+  if (node.type === "Literal") {
+    return node.raw;
+  }
+  if (node.type === "UnaryExpression") {
+    const arg = generateCode(
+      node.argument,
+      failOnForbidden,
+      transformIdentifier
+    );
+    return `${node.operator}${arg}`;
+  }
+  if (node.type === "BinaryExpression") {
+    const left = generateCode(
+      node.left,
+      failOnForbidden,
+      transformIdentifier
+    );
+    const right = generateCode(
+      node.right,
+      failOnForbidden,
+      transformIdentifier
+    );
+    return `${left} ${node.operator} ${right}`;
+  }
+  if (node.type === "ArrayExpression") {
+    const elements = node.elements.map(
+      (element) => generateCode(element, failOnForbidden, transformIdentifier)
+    );
+    return `[${elements.join(", ")}]`;
+  }
+  if (node.type === "CallExpression") {
+    if (failOnForbidden) {
+      const callee2 = generateCode(
+        node.callee,
+        false,
+        transformIdentifier
+      );
+      throw Error(`Cannot call "${callee2}"`);
+    }
+    const callee = generateCode(
+      node.callee,
+      failOnForbidden,
+      transformIdentifier
+    );
+    const args = node.arguments.map(
+      (arg) => generateCode(arg, failOnForbidden, transformIdentifier)
+    );
+    return `${callee}(${args.join(", ")})`;
+  }
+  if (node.type === "ThisExpression") {
+    if (failOnForbidden) {
+      throw Error(`"this" is not supported`);
+    }
+    return "this";
+  }
+  if (node.type === "ConditionalExpression") {
+    throw Error("Ternary operator is not supported");
+  }
+  if (node.type === "Compound") {
+    throw Error("Cannot use multiple expressions");
+  }
+  node;
+  return "";
+};
+const validateExpression = (code, transformIdentifier = (id) => id) => {
+  const expression = jsep(code);
+  return generateCode(expression, true, transformIdentifier);
+};
+const sortTopologically = (list, depsById, explored = /* @__PURE__ */ new Set(), sorted = []) => {
+  for (const id of list) {
+    if (explored.has(id)) {
+      continue;
+    }
+    explored.add(id);
+    const deps = depsById.get(id);
+    if (deps) {
+      sortTopologically(deps, depsById, explored, sorted);
+    }
+    sorted.push(id);
+  }
+  return sorted;
+};
+const generateExpressionsComputation = (variables, expressions) => {
+  const depsById = /* @__PURE__ */ new Map();
+  for (const [id, code] of expressions) {
+    const deps = /* @__PURE__ */ new Set();
+    validateExpression(code, (identifier) => {
+      if (variables.has(identifier)) {
+        return identifier;
+      }
+      if (expressions.has(identifier)) {
+        deps.add(identifier);
+        return identifier;
+      }
+      throw Error(`Unknown dependency "${identifier}"`);
+    });
+    depsById.set(id, deps);
+  }
+  const sortedExpressions = sortTopologically(
+    new Set(expressions.keys()),
+    depsById
+  );
+  let generatedCode = "";
+  for (const id of variables) {
+    generatedCode += `const ${id} = _variables.get('${id}');
+`;
+  }
+  for (const id of sortedExpressions) {
+    const code = expressions.get(id);
+    if (code === void 0) {
+      continue;
+    }
+    generatedCode += `const ${id} = (${code});
+`;
+  }
+  generatedCode += `return new Map([
+`;
+  for (const id of sortedExpressions) {
+    generatedCode += `  ['${id}', ${id}],
+`;
+  }
+  generatedCode += `]);`;
+  return generatedCode;
+};
+const executeExpressions = (variables, expressions) => {
+  const generatedCode = generateExpressionsComputation(
+    new Set(variables.keys()),
+    expressions
+  );
+  const executeFn = new Function("_variables", generatedCode);
+  const values = executeFn(variables);
+  return values;
+};
+const dataSourceVariablePrefix = "$ws$dataSource$";
+const encodeDataSourceVariable = (id) => {
+  const encoded = id.replaceAll("-", "__DASH__");
+  return `${dataSourceVariablePrefix}${encoded}`;
+};
+const decodeDataSourceVariable = (name) => {
+  if (name.startsWith(dataSourceVariablePrefix)) {
+    const encoded = name.slice(dataSourceVariablePrefix.length);
+    return encoded.replaceAll("__DASH__", "-");
+  }
+  return;
+};
+export {
+  decodeDataSourceVariable,
+  encodeDataSourceVariable,
+  executeExpressions,
+  generateExpressionsComputation,
+  validateExpression
+};

package/lib/index.js

@@ -10,17 +10,31 @@ import {
 } from "./components/component-meta";
 export * from "./embed-template";
 import {
+  useInstanceProps,
   usePropUrl,
   usePropAsset,
   getInstanceIdFromComponentProps
 } from "./props";
 import { ReactSdkContext } from "./context";
+import {
+  validateExpression,
+  generateExpressionsComputation,
+  executeExpressions,
+  encodeDataSourceVariable,
+  decodeDataSourceVariable
+} from "./expression";
 export {
   ReactSdkContext,
   componentCategories,
+  decodeDataSourceVariable,
   defaultStates,
+  encodeDataSourceVariable,
+  executeExpressions,
+  generateExpressionsComputation,
   getInstanceIdFromComponentProps,
   stateCategories,
+  useInstanceProps,
   usePropAsset,
-  usePropUrl
+  usePropUrl,
+  validateExpression
 };

package/lib/props.js

@@ -16,17 +16,35 @@ const getPropsByInstanceId = (props) => {
   return propsByInstanceId;
 };
 const useInstanceProps = (instanceId) => {
-  const { propsByInstanceIdStore } = useContext(ReactSdkContext);
-  const propsByInstanceId = useStore(propsByInstanceIdStore);
-  const instanceProps = propsByInstanceId.get(instanceId);
-  const instancePropsObject = {};
-  if (instanceProps) {
-    for (const prop of instanceProps) {
-      if (prop.type !== "asset" && prop.type !== "page") {
-        instancePropsObject[prop.name] = prop.value;
+  const { propsByInstanceIdStore, dataSourceValuesStore } = useContext(ReactSdkContext);
+  const instancePropsObjectStore = useMemo(() => {
+    return computed(
+      [propsByInstanceIdStore, dataSourceValuesStore],
+      (propsByInstanceId, dataSourceValues) => {
+        const instancePropsObject2 = {};
+        const instanceProps = propsByInstanceId.get(instanceId);
+        if (instanceProps === void 0) {
+          return instancePropsObject2;
+        }
+        for (const prop of instanceProps) {
+          if (prop.type === "asset" || prop.type === "page") {
+            continue;
+          }
+          if (prop.type === "dataSource") {
+            const dataSourceId = prop.value;
+            const value = dataSourceValues.get(dataSourceId);
+            if (value !== void 0) {
+              instancePropsObject2[prop.name] = value;
+            }
+            continue;
+          }
+          instancePropsObject2[prop.name] = prop.value;
+        }
+        return instancePropsObject2;
       }
-    }
-  }
+    );
+  }, [propsByInstanceIdStore, dataSourceValuesStore, instanceId]);
+  const instancePropsObject = useStore(instancePropsObjectStore);
   return instancePropsObject;
 };
 const usePropAsset = (instanceId, name) => {

package/lib/tree/create-elements-tree.js

@@ -11,6 +11,8 @@ const createElementsTree = ({
   propsByInstanceIdStore,
   assetsStore,
   pagesStore,
+  dataSourceValuesStore,
+  onDataSourceUpdate,
   Component,
   components
 }) => {
@@ -46,9 +48,20 @@ const createElementsTree = ({
         propsByInstanceIdStore,
         assetsStore,
         pagesStore,
+        dataSourceValuesStore,
         renderer,
         imageBaseUrl,
-        assetBaseUrl
+        assetBaseUrl,
+        setDataSourceValue: (instanceId, propName, value) => {
+          const propsByInstanceId = propsByInstanceIdStore.get();
+          const props = propsByInstanceId.get(instanceId);
+          const prop = props?.find((prop2) => prop2.name === propName);
+          if (prop?.type !== "dataSource") {
+            throw Error(`${propName} is not data source`);
+          }
+          const dataSourceId = prop.value;
+          onDataSourceUpdate(dataSourceId, value);
+        }
       },
       children: root
     }

package/lib/tree/root.js

@@ -1,12 +1,47 @@
-import { atom } from "nanostores";
+import { useRef } from "react";
+import {
+  atom,
+  computed
+} from "nanostores";
 import { createElementsTree } from "./create-elements-tree";
 import { WebstudioComponent } from "./webstudio-component";
 import { getPropsByInstanceId } from "../props";
 const InstanceRoot = ({
   data,
+  computeExpressions,
   Component,
   components
 }) => {
+  const dataSourceVariablesStoreRef = useRef(void 0);
+  if (dataSourceVariablesStoreRef.current === void 0) {
+    dataSourceVariablesStoreRef.current = atom(/* @__PURE__ */ new Map());
+  }
+  const dataSourceVariablesStore = dataSourceVariablesStoreRef.current;
+  const dataSourceValuesStoreRef = useRef(void 0);
+  if (dataSourceValuesStoreRef.current === void 0) {
+    dataSourceValuesStoreRef.current = computed(
+      dataSourceVariablesStore,
+      (dataSourceVariables) => {
+        const dataSourceValues = /* @__PURE__ */ new Map();
+        for (const [dataSourceId, dataSource] of data.build.dataSources) {
+          if (dataSource.type === "variable") {
+            const value = dataSourceVariables.get(dataSourceId) ?? dataSource.value.value;
+            dataSourceValues.set(dataSourceId, value);
+          }
+        }
+        try {
+          const result = computeExpressions(dataSourceValues);
+          for (const [id, value] of result) {
+            dataSourceValues.set(id, value);
+          }
+        } catch (error) {
+          console.error(error);
+        }
+        return dataSourceValues;
+      }
+    );
+  }
+  const dataSourceValuesStore = dataSourceValuesStoreRef.current;
   return createElementsTree({
     imageBaseUrl: data.params?.imageBaseUrl ?? "/",
     assetBaseUrl: data.params?.assetBaseUrl ?? "/",
@@ -17,6 +52,12 @@ const InstanceRoot = ({
     ),
     assetsStore: atom(new Map(data.assets.map((asset) => [asset.id, asset]))),
     pagesStore: atom(new Map(data.pages.map((page) => [page.id, page]))),
+    dataSourceValuesStore,
+    onDataSourceUpdate: (dataSourceId, value) => {
+      const dataSourceVariables = new Map(dataSourceVariablesStore.get());
+      dataSourceVariables.set(dataSourceId, value);
+      dataSourceVariablesStore.set(dataSourceVariables);
+    },
     Component: Component ?? WebstudioComponent,
     components
   });

package/lib/tree/webstudio-component.js

@@ -23,13 +23,18 @@ const WebstudioComponent = ({
   components,
   ...rest
 }) => {
-  const instanceProps = useInstanceProps(instance.id);
+  const { [showAttribute]: show = true, ...instanceProps } = useInstanceProps(
+    instance.id
+  );
   const props = {
     ...instanceProps,
     ...rest,
     [idAttribute]: instance.id,
     [componentAttribute]: instance.component
   };
+  if (show === false) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
   const Component = components.get(instance.component);
   if (Component === void 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
@@ -38,11 +43,13 @@ const WebstudioComponent = ({
 };
 const idAttribute = "data-ws-id";
 const componentAttribute = "data-ws-component";
+const showAttribute = "data-ws-show";
 const collapsedAttribute = "data-ws-collapsed";
 export {
   WebstudioComponent,
   collapsedAttribute,
   componentAttribute,
   idAttribute,
-  renderWebstudioComponentChildren
+  renderWebstudioComponentChildren,
+  showAttribute
 };

package/lib/types/components/component-meta.d.ts

@@ -694,7 +694,14 @@ declare const WsComponentMeta: z.ZodObject<{
                 type: "unparsed";
                 value: string;
                 hidden?: boolean | undefined;
+            } | {
+                type: "rgb";
+                alpha: number;
+                r: number;
+                g: number;
+                b: number;
             })[];
+            hidden?: boolean | undefined;
         } | {
             type: "layers";
             value: ({
@@ -734,7 +741,14 @@ declare const WsComponentMeta: z.ZodObject<{
                     type: "unparsed";
                     value: string;
                     hidden?: boolean | undefined;
+                } | {
+                    type: "rgb";
+                    alpha: number;
+                    r: number;
+                    g: number;
+                    b: number;
                 })[];
+                hidden?: boolean | undefined;
             })[];
         } | {
             type: "var";
@@ -782,7 +796,14 @@ declare const WsComponentMeta: z.ZodObject<{
                     type: "unparsed";
                     value: string;
                     hidden?: boolean | undefined;
+                } | {
+                    type: "rgb";
+                    alpha: number;
+                    r: number;
+                    g: number;
+                    b: number;
                 })[];
+                hidden?: boolean | undefined;
             } | {
                 type: "layers";
                 value: ({
@@ -822,7 +843,14 @@ declare const WsComponentMeta: z.ZodObject<{
                         type: "unparsed";
                         value: string;
                         hidden?: boolean | undefined;
+                    } | {
+                        type: "rgb";
+                        alpha: number;
+                        r: number;
+                        g: number;
+                        b: number;
                     })[];
+                    hidden?: boolean | undefined;
                 })[];
             })[];
         };
@@ -878,7 +906,14 @@ declare const WsComponentMeta: z.ZodObject<{
                 type: "unparsed";
                 value: string;
                 hidden?: boolean | undefined;
+            } | {
+                type: "rgb";
+                alpha: number;
+                r: number;
+                g: number;
+                b: number;
             })[];
+            hidden?: boolean | undefined;
         } | {
             type: "layers";
             value: ({
@@ -918,7 +953,14 @@ declare const WsComponentMeta: z.ZodObject<{
                     type: "unparsed";
                     value: string;
                     hidden?: boolean | undefined;
+                } | {
+                    type: "rgb";
+                    alpha: number;
+                    r: number;
+                    g: number;
+                    b: number;
                 })[];
+                hidden?: boolean | undefined;
             })[];
         } | {
             type: "var";
@@ -966,7 +1008,14 @@ declare const WsComponentMeta: z.ZodObject<{
                     type: "unparsed";
                     value: string;
                     hidden?: boolean | undefined;
+                } | {
+                    type: "rgb";
+                    alpha: number;
+                    r: number;
+                    g: number;
+                    b: number;
                 })[];
+                hidden?: boolean | undefined;
             } | {
                 type: "layers";
                 value: ({
@@ -1006,7 +1055,14 @@ declare const WsComponentMeta: z.ZodObject<{
                         type: "unparsed";
                         value: string;
                         hidden?: boolean | undefined;
+                    } | {
+                        type: "rgb";
+                        alpha: number;
+                        r: number;
+                        g: number;
+                        b: number;
                     })[];
+                    hidden?: boolean | undefined;
                 })[];
             })[];
         };
@@ -1096,7 +1152,14 @@ declare const WsComponentMeta: z.ZodObject<{
                 type: "unparsed";
                 value: string;
                 hidden?: boolean | undefined;
+            } | {
+                type: "rgb";
+                alpha: number;
+                r: number;
+                g: number;
+                b: number;
             })[];
+            hidden?: boolean | undefined;
         } | {
             type: "layers";
             value: ({
@@ -1136,7 +1199,14 @@ declare const WsComponentMeta: z.ZodObject<{
                     type: "unparsed";
                     value: string;
                     hidden?: boolean | undefined;
+                } | {
+                    type: "rgb";
+                    alpha: number;
+                    r: number;
+                    g: number;
+                    b: number;
                 })[];
+                hidden?: boolean | undefined;
             })[];
         } | {
             type: "var";
@@ -1184,7 +1254,14 @@ declare const WsComponentMeta: z.ZodObject<{
                     type: "unparsed";
                     value: string;
                     hidden?: boolean | undefined;
+                } | {
+                    type: "rgb";
+                    alpha: number;
+                    r: number;
+                    g: number;
+                    b: number;
                 })[];
+                hidden?: boolean | undefined;
             } | {
                 type: "layers";
                 value: ({
@@ -1224,7 +1301,14 @@ declare const WsComponentMeta: z.ZodObject<{
                         type: "unparsed";
                         value: string;
                         hidden?: boolean | undefined;
+                    } | {
+                        type: "rgb";
+                        alpha: number;
+                        r: number;
+                        g: number;
+                        b: number;
                     })[];
+                    hidden?: boolean | undefined;
                 })[];
             })[];
         };
@@ -1300,7 +1384,14 @@ declare const WsComponentMeta: z.ZodObject<{
                 type: "unparsed";
                 value: string;
                 hidden?: boolean | undefined;
+            } | {
+                type: "rgb";
+                alpha: number;
+                r: number;
+                g: number;
+                b: number;
             })[];
+            hidden?: boolean | undefined;
         } | {
             type: "layers";
             value: ({
@@ -1340,7 +1431,14 @@ declare const WsComponentMeta: z.ZodObject<{
                     type: "unparsed";
                     value: string;
                     hidden?: boolean | undefined;
+                } | {
+                    type: "rgb";
+                    alpha: number;
+                    r: number;
+                    g: number;
+                    b: number;
                 })[];
+                hidden?: boolean | undefined;
             })[];
         } | {
             type: "var";
@@ -1388,7 +1486,14 @@ declare const WsComponentMeta: z.ZodObject<{
                     type: "unparsed";
                     value: string;
                     hidden?: boolean | undefined;
+                } | {
+                    type: "rgb";
+                    alpha: number;
+                    r: number;
+                    g: number;
+                    b: number;
                 })[];
+                hidden?: boolean | undefined;
             } | {
                 type: "layers";
                 value: ({
@@ -1428,7 +1533,14 @@ declare const WsComponentMeta: z.ZodObject<{
                         type: "unparsed";
                         value: string;
                         hidden?: boolean | undefined;
+                    } | {
+                        type: "rgb";
+                        alpha: number;
+                        r: number;
+                        g: number;
+                        b: number;
                     })[];
+                    hidden?: boolean | undefined;
                 })[];
             })[];
         };

package/lib/types/context.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { type ReadableAtom } from "nanostores";
 import type { Assets } from "@webstudio-is/asset-uploader";
+import type { DataSource, Instance, Prop } from "@webstudio-is/project-build";
 import type { Pages, PropsByInstanceId } from "./props";
 export type Params = {
     renderer?: "canvas" | "preview";
@@ -32,4 +33,6 @@ export declare const ReactSdkContext: import("react").Context<Params & {
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;
+    dataSourceValuesStore: ReadableAtom<Map<DataSource["id"], unknown>>;
+    setDataSourceValue: (instanceId: Instance["id"], prop: Prop["name"], value: unknown) => void;
 }>;