@webstudio-is/react-sdk 0.75.0 → 0.77.0

package/src/embed-template.ts

@@ -8,9 +8,11 @@ import {
   StyleSourcesList,
   StylesList,
   Breakpoint,
+  DataSource,
 } from "@webstudio-is/project-build";
 import { StyleValue, type StyleProperty } from "@webstudio-is/css-data";
 import type { Simplify } from "type-fest";
+import { encodeDataSourceVariable, validateExpression } from "./expression";
 
 const EmbedTemplateText = z.object({
   type: z.literal("text"),
@@ -19,25 +21,41 @@ const EmbedTemplateText = z.object({
 
 type EmbedTemplateText = z.infer<typeof EmbedTemplateText>;
 
+const DataSourceRef = z.union([
+  z.object({
+    type: z.literal("variable"),
+    name: z.string(),
+  }),
+  z.object({
+    type: z.literal("expression"),
+    name: z.string(),
+    code: z.string(),
+  }),
+]);
+
 const EmbedTemplateProp = z.union([
   z.object({
     type: z.literal("number"),
     name: z.string(),
+    dataSourceRef: z.optional(DataSourceRef),
     value: z.number(),
   }),
   z.object({
     type: z.literal("string"),
     name: z.string(),
+    dataSourceRef: z.optional(DataSourceRef),
     value: z.string(),
   }),
   z.object({
     type: z.literal("boolean"),
     name: z.string(),
+    dataSourceRef: z.optional(DataSourceRef),
     value: z.boolean(),
   }),
   z.object({
     type: z.literal("string[]"),
     name: z.string(),
+    dataSourceRef: z.optional(DataSourceRef),
     value: z.array(z.string()),
   }),
 ]);
@@ -91,6 +109,7 @@ const createInstancesFromTemplate = (
   treeTemplate: WsEmbedTemplate,
   instances: InstancesList,
   props: PropsList,
+  dataSourceByRef: Map<string, DataSource>,
   styleSourceSelections: StyleSourceSelectionsList,
   styleSources: StyleSourcesList,
   styles: StylesList,
@@ -104,10 +123,45 @@ const createInstancesFromTemplate = (
       // populate props
       if (item.props) {
         for (const prop of item.props) {
+          const propId = nanoid();
+          if (prop.dataSourceRef === undefined) {
+            props.push({ id: propId, instanceId, ...prop });
+            continue;
+          }
+          let dataSource = dataSourceByRef.get(prop.dataSourceRef.name);
+          if (dataSource === undefined) {
+            const id = nanoid();
+            const { name: propName, dataSourceRef, ...rest } = prop;
+            if (dataSourceRef.type === "variable") {
+              dataSource = {
+                type: "variable",
+                id,
+                // the first instance where data source is appeared in becomes its scope
+                scopeInstanceId: instanceId,
+                name: dataSourceRef.name,
+                value: rest,
+              };
+              dataSourceByRef.set(dataSourceRef.name, dataSource);
+            } else if (dataSourceRef.type === "expression") {
+              dataSource = {
+                type: "expression",
+                id,
+                scopeInstanceId: instanceId,
+                name: dataSourceRef.name,
+                code: dataSourceRef.code,
+              };
+              dataSourceByRef.set(dataSourceRef.name, dataSource);
+            } else {
+              dataSourceRef satisfies never;
+              continue;
+            }
+          }
           props.push({
-            id: nanoid(),
+            id: propId,
             instanceId,
-            ...prop,
+            type: "dataSource",
+            name: prop.name,
+            value: dataSource.id,
           });
         }
       }
@@ -148,6 +202,7 @@ const createInstancesFromTemplate = (
         item.children,
         instances,
         props,
+        dataSourceByRef,
         styleSourceSelections,
         styleSources,
         styles,
@@ -175,6 +230,7 @@ export const generateDataFromEmbedTemplate = (
 ) => {
   const instances: InstancesList = [];
   const props: PropsList = [];
+  const dataSourceByRef = new Map<string, DataSource>();
   const styleSourceSelections: StyleSourceSelectionsList = [];
   const styleSources: StyleSourcesList = [];
   const styles: StylesList = [];
@@ -183,15 +239,30 @@ export const generateDataFromEmbedTemplate = (
     treeTemplate,
     instances,
     props,
+    dataSourceByRef,
     styleSourceSelections,
     styleSources,
     styles,
     defaultBreakpointId
   );
+
+  // replace all references with variable names
+  const dataSources: DataSource[] = [];
+  for (const dataSource of dataSourceByRef.values()) {
+    if (dataSource.type === "expression") {
+      dataSource.code = validateExpression(dataSource.code, (ref) => {
+        const id = dataSourceByRef.get(ref)?.id ?? ref;
+        return encodeDataSourceVariable(id);
+      });
+    }
+    dataSources.push(dataSource);
+  }
+
   return {
     children,
     instances,
     props,
+    dataSources,
     styleSourceSelections,
     styleSources,
     styles,

package/src/expression.test.ts

@@ -0,0 +1,147 @@
+import { expect, test } from "@jest/globals";
+import {
+  decodeDataSourceVariable,
+  encodeDataSourceVariable,
+  executeExpressions,
+  generateExpressionsComputation,
+  validateExpression,
+} from "./expression";
+
+test("allow literals and array expressions", () => {
+  expect(
+    validateExpression(`["", '', 0, true, false, null, undefined]`)
+  ).toEqual(`["", '', 0, true, false, null, undefined]`);
+});
+
+test("allow unary and binary expressions", () => {
+  expect(validateExpression(`[-1, 1 + 1]`)).toEqual(`[-1, 1 + 1]`);
+});
+
+test("forbid member expressions", () => {
+  expect(() => {
+    validateExpression("var1 + obj.param");
+  }).toThrowError(/Cannot access "param" of "obj"/);
+});
+
+test("forbid this expressions", () => {
+  expect(() => {
+    validateExpression("var1 + this");
+  }).toThrowError(/"this" is not supported/);
+});
+
+test("forbid call expressions", () => {
+  expect(() => {
+    validateExpression("var1 + fn1()");
+  }).toThrowError(/Cannot call "fn1"/);
+  expect(() => {
+    validateExpression("var1 + this.fn1()");
+  }).toThrowError(/Cannot call "this.fn1"/);
+});
+
+test("forbid ternary", () => {
+  expect(() => {
+    validateExpression("var1 ? var2 : var3");
+  }).toThrowError(/Ternary operator is not supported/);
+});
+
+test("forbid multiple expressions", () => {
+  expect(() => {
+    validateExpression("a b");
+  }).toThrowError(/Cannot use multiple expressions/);
+  expect(() => {
+    validateExpression("a, b");
+  }).toThrowError(/Cannot use multiple expressions/);
+  expect(() => {
+    validateExpression("a; b");
+  }).toThrowError(/Cannot use multiple expressions/);
+});
+
+test("transform identifiers", () => {
+  expect(validateExpression(`a + b`, (id) => `$ws$${id}`)).toEqual(
+    `$ws$a + $ws$b`
+  );
+});
+
+test("generate expressions computation", () => {
+  const variables = new Set(["var0"]);
+  const expressions = new Map([
+    ["exp3", "exp2 + exp1"],
+    ["exp1", "var0"],
+    ["exp2", "exp1"],
+    ["exp4", "exp2"],
+  ]);
+  expect(generateExpressionsComputation(variables, expressions))
+    .toMatchInlineSnapshot(`
+    "const var0 = _variables.get('var0');
+    const exp1 = (var0);
+    const exp2 = (exp1);
+    const exp3 = (exp2 + exp1);
+    const exp4 = (exp2);
+    return new Map([
+      ['exp1', exp1],
+      ['exp2', exp2],
+      ['exp3', exp3],
+      ['exp4', exp4],
+    ]);"
+  `);
+});
+
+test("execute expression", () => {
+  const variables = new Map();
+  const expressions = new Map([["exp1", "1 + 1"]]);
+  expect(executeExpressions(variables, expressions)).toEqual(
+    new Map([["exp1", 2]])
+  );
+});
+
+test("execute expression dependent on variables", () => {
+  const variables = new Map([["var1", 5]]);
+  const expressions = new Map([["exp1", "var1 + 1"]]);
+  expect(executeExpressions(variables, expressions)).toEqual(
+    new Map([["exp1", 6]])
+  );
+});
+
+test("execute expression dependent on another expressions", () => {
+  const variables = new Map([["var1", 3]]);
+  const expressions = new Map([
+    ["exp1", "exp0 + 1"],
+    ["exp0", "var1 + 2"],
+  ]);
+  expect(executeExpressions(variables, expressions)).toEqual(
+    new Map([
+      ["exp1", 6],
+      ["exp0", 5],
+    ])
+  );
+});
+
+test("forbid circular expressions", () => {
+  const variables = new Map([["var1", 3]]);
+  const expressions = new Map([
+    ["exp0", "exp2 + 1"],
+    ["exp1", "exp0 + 2"],
+    ["exp2", "exp1 + 3"],
+  ]);
+  expect(() => {
+    executeExpressions(variables, expressions);
+  }).toThrowError(/Cannot access 'exp0' before initialization/);
+});
+
+test("make sure dependency exists", () => {
+  const variables = new Map();
+  const expressions = new Map([["exp1", "var1 + 1"]]);
+  expect(() => {
+    executeExpressions(variables, expressions);
+  }).toThrowError(/Unknown dependency "var1"/);
+});
+
+test("encode/decode variable names", () => {
+  expect(encodeDataSourceVariable("my--id")).toEqual(
+    "$ws$dataSource$my__DASH____DASH__id"
+  );
+  expect(decodeDataSourceVariable(encodeDataSourceVariable("my--id"))).toEqual(
+    "my--id"
+  );
+  expect(decodeDataSourceVariable("myVarName")).toEqual(undefined);
+});

package/src/expression.ts

@@ -0,0 +1,217 @@
+import jsep from "jsep";
+
+type TransformIdentifier = (id: string) => string;
+
+type Node = jsep.CoreExpression;
+
+const generateCode = (
+  node: Node,
+  failOnForbidden: boolean,
+  transformIdentifier: TransformIdentifier
+): string => {
+  if (node.type === "Identifier") {
+    return transformIdentifier(node.name);
+  }
+  if (node.type === "MemberExpression") {
+    if (failOnForbidden) {
+      const object = generateCode(
+        node.object as Node,
+        false,
+        transformIdentifier
+      );
+      const property = generateCode(
+        node.property as Node,
+        false,
+        transformIdentifier
+      );
+      throw Error(`Cannot access "${property}" of "${object}"`);
+    }
+    const object = generateCode(
+      node.object as Node,
+      failOnForbidden,
+      transformIdentifier
+    );
+    const property = generateCode(
+      node.property as Node,
+      failOnForbidden,
+      transformIdentifier
+    );
+    return `${object}.${property}`;
+  }
+  if (node.type === "Literal") {
+    return node.raw;
+  }
+  if (node.type === "UnaryExpression") {
+    const arg = generateCode(
+      node.argument as Node,
+      failOnForbidden,
+      transformIdentifier
+    );
+    return `${node.operator}${arg}`;
+  }
+  if (node.type === "BinaryExpression") {
+    const left = generateCode(
+      node.left as Node,
+      failOnForbidden,
+      transformIdentifier
+    );
+    const right = generateCode(
+      node.right as Node,
+      failOnForbidden,
+      transformIdentifier
+    );
+    return `${left} ${node.operator} ${right}`;
+  }
+  if (node.type === "ArrayExpression") {
+    const elements = node.elements.map((element) =>
+      generateCode(element as Node, failOnForbidden, transformIdentifier)
+    );
+    return `[${elements.join(", ")}]`;
+  }
+  if (node.type === "CallExpression") {
+    if (failOnForbidden) {
+      const callee = generateCode(
+        node.callee as Node,
+        false,
+        transformIdentifier
+      );
+      throw Error(`Cannot call "${callee}"`);
+    }
+    const callee = generateCode(
+      node.callee as Node,
+      failOnForbidden,
+      transformIdentifier
+    );
+    const args = node.arguments.map((arg) =>
+      generateCode(arg as Node, 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 satisfies never;
+  return "";
+};
+
+export const validateExpression = (
+  code: string,
+  transformIdentifier: TransformIdentifier = (id) => id
+) => {
+  const expression = jsep(code) as Node;
+  return generateCode(expression, true, transformIdentifier);
+};
+
+const sortTopologically = (
+  list: Set<string>,
+  depsById: Map<string, Set<string>>,
+  explored = new Set<string>(),
+  sorted: string[] = []
+) => {
+  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;
+};
+
+/**
+ * Generates a function body expecting map as _variables argument
+ * and outputing map of results
+ */
+export const generateExpressionsComputation = (
+  variables: Set<string>,
+  expressions: Map<string, string>
+) => {
+  const depsById = new Map<string, Set<string>>();
+  for (const [id, code] of expressions) {
+    const deps = new Set<string>();
+    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
+  );
+
+  // generate code computing all expressions
+  let generatedCode = "";
+
+  for (const id of variables) {
+    generatedCode += `const ${id} = _variables.get('${id}');\n`;
+  }
+
+  for (const id of sortedExpressions) {
+    const code = expressions.get(id);
+    if (code === undefined) {
+      continue;
+    }
+    generatedCode += `const ${id} = (${code});\n`;
+  }
+
+  generatedCode += `return new Map([\n`;
+  for (const id of sortedExpressions) {
+    generatedCode += `  ['${id}', ${id}],\n`;
+  }
+  generatedCode += `]);`;
+
+  return generatedCode;
+};
+
+export const executeExpressions = (
+  variables: Map<string, unknown>,
+  expressions: Map<string, string>
+) => {
+  const generatedCode = generateExpressionsComputation(
+    new Set(variables.keys()),
+    expressions
+  );
+  const executeFn = new Function("_variables", generatedCode);
+  const values = executeFn(variables) as Map<string, unknown>;
+  return values;
+};
+
+const dataSourceVariablePrefix = "$ws$dataSource$";
+
+// data source id is generated with nanoid which has "-" in alphabeta
+// here "-" is encoded with "__DASH__' in variable name
+// https://github.com/ai/nanoid/blob/047686abad8f15aff05f3a2eeedb7c98b6847392/url-alphabet/index.js
+
+export const encodeDataSourceVariable = (id: string) => {
+  const encoded = id.replaceAll("-", "__DASH__");
+  return `${dataSourceVariablePrefix}${encoded}`;
+};
+
+export const decodeDataSourceVariable = (name: string) => {
+  if (name.startsWith(dataSourceVariablePrefix)) {
+    const encoded = name.slice(dataSourceVariablePrefix.length);
+    return encoded.replaceAll("__DASH__", "-");
+  }
+  return;
+};

package/src/index.ts

@@ -14,8 +14,16 @@ export {
 } from "./components/component-meta";
 export * from "./embed-template";
 export {
+  useInstanceProps,
   usePropUrl,
   usePropAsset,
   getInstanceIdFromComponentProps,
 } from "./props";
 export { type Params, ReactSdkContext } from "./context";
+export {
+  validateExpression,
+  generateExpressionsComputation,
+  executeExpressions,
+  encodeDataSourceVariable,
+  decodeDataSourceVariable,
+} from "./expression";

package/src/props.ts

@@ -26,17 +26,36 @@ export const getPropsByInstanceId = (props: Props) => {
 // this utility is be used only for preview with static props
 // so there is no need to use computed to optimize rerenders
 export const useInstanceProps = (instanceId: Instance["id"]) => {
-  const { propsByInstanceIdStore } = useContext(ReactSdkContext);
-  const propsByInstanceId = useStore(propsByInstanceIdStore);
-  const instanceProps = propsByInstanceId.get(instanceId);
-  const instancePropsObject: Record<Prop["name"], Prop["value"]> = {};
-  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 instancePropsObject: Record<Prop["name"], unknown> = {};
+        const instanceProps = propsByInstanceId.get(instanceId);
+        if (instanceProps === undefined) {
+          return instancePropsObject;
+        }
+        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 !== undefined) {
+              instancePropsObject[prop.name] = value;
+            }
+            continue;
+          }
+          instancePropsObject[prop.name] = prop.value;
+        }
+        return instancePropsObject;
       }
-    }
-  }
+    );
+  }, [propsByInstanceIdStore, dataSourceValuesStore, instanceId]);
+  const instancePropsObject = useStore(instancePropsObjectStore);
   return instancePropsObject;
 };
 

package/src/tree/create-elements-tree.tsx

@@ -2,7 +2,11 @@ import { type ComponentProps, Fragment } from "react";
 import type { ReadableAtom } from "nanostores";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
 import type { Assets } from "@webstudio-is/asset-uploader";
-import type { Instance, Instances } from "@webstudio-is/project-build";
+import type {
+  DataSource,
+  Instance,
+  Instances,
+} from "@webstudio-is/project-build";
 import type { Components } from "../components/components-utils";
 import { ReactSdkContext, type Params } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
@@ -19,6 +23,8 @@ export const createElementsTree = ({
   propsByInstanceIdStore,
   assetsStore,
   pagesStore,
+  dataSourceValuesStore,
+  onDataSourceUpdate,
   Component,
   components,
 }: Params & {
@@ -27,6 +33,8 @@ export const createElementsTree = ({
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
   pagesStore: ReadableAtom<Pages>;
+  dataSourceValuesStore: ReadableAtom<Map<DataSource["id"], unknown>>;
+  onDataSourceUpdate: (dataSourceId: DataSource["id"], value: unknown) => void;
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   components: Components;
 }) => {
@@ -62,9 +70,20 @@ export const createElementsTree = ({
         propsByInstanceIdStore,
         assetsStore,
         pagesStore,
+        dataSourceValuesStore,
         renderer,
         imageBaseUrl,
         assetBaseUrl,
+        setDataSourceValue: (instanceId, propName, value) => {
+          const propsByInstanceId = propsByInstanceIdStore.get();
+          const props = propsByInstanceId.get(instanceId);
+          const prop = props?.find((prop) => prop.name === propName);
+          if (prop?.type !== "dataSource") {
+            throw Error(`${propName} is not data source`);
+          }
+          const dataSourceId = prop.value;
+          onDataSourceUpdate(dataSourceId, value);
+        },
       }}
     >
       {root}