@webstudio-is/react-sdk 0.74.0 → 0.76.0

package/src/expression.test.ts

@@ -0,0 +1,122 @@
+import { expect, test } from "@jest/globals";
+import {
+  decodeDataSourceVariable,
+  encodeDataSourceVariable,
+  executeExpressions,
+  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("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 other 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(/exp2 is not defined/);
+});
+
+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,183 @@
+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);
+};
+
+export const executeExpressions = (
+  variables: Map<string, unknown>,
+  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) || expressions.has(identifier)) {
+        deps.add(identifier);
+        return identifier;
+      }
+      throw Error(`Unknown dependency "${identifier}"`);
+    });
+    depsById.set(id, deps);
+  }
+
+  // sort topologically
+  const sortedExpressions = Array.from(expressions.keys()).sort(
+    (left, right) => {
+      if (depsById.get(left)?.has(right)) {
+        return 1;
+      }
+      if (depsById.get(right)?.has(left)) {
+        return -1;
+      }
+      return 0;
+    }
+  );
+
+  // execute chain of expressions
+  let header = "";
+  for (const [id, value] of variables) {
+    header += `const ${id} = ${JSON.stringify(value)};\n`;
+  }
+
+  const values = new Map<string, unknown>();
+
+  for (const id of sortedExpressions) {
+    const code = expressions.get(id);
+    if (code === undefined) {
+      continue;
+    }
+    const executeFn = new Function(`${header}\nreturn (${code});`);
+    const value = executeFn();
+    header += `const ${id} = ${JSON.stringify(value)};\n`;
+    values.set(id, value);
+  }
+
+  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,15 @@ export {
 } from "./components/component-meta";
 export * from "./embed-template";
 export {
+  useInstanceProps,
   usePropUrl,
   usePropAsset,
   getInstanceIdFromComponentProps,
 } from "./props";
 export { type Params, ReactSdkContext } from "./context";
+export {
+  validateExpression,
+  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}

package/src/tree/root.ts

@@ -1,12 +1,56 @@
-import type { ComponentProps } from "react";
-import { atom } from "nanostores";
-import type { Build, Page } from "@webstudio-is/project-build";
+import { useRef, type ComponentProps } from "react";
+import {
+  atom,
+  computed,
+  type ReadableAtom,
+  type WritableAtom,
+} from "nanostores";
+import { type Build, type Page, DataSource } from "@webstudio-is/project-build";
 import type { Asset } from "@webstudio-is/asset-uploader";
 import { createElementsTree } from "./create-elements-tree";
 import { WebstudioComponent } from "./webstudio-component";
 import { getPropsByInstanceId } from "../props";
 import type { Components } from "../components/components-utils";
 import type { Params } from "../context";
+import {
+  executeExpressions,
+  encodeDataSourceVariable,
+  decodeDataSourceVariable,
+} from "../expression";
+
+const computeExpressions = (
+  dataSources: [DataSource["id"], DataSource][],
+  dataSourceValues: Map<DataSource["id"], unknown>
+) => {
+  const outputValues = new Map<DataSource["id"], unknown>();
+  const variables = new Map<string, unknown>();
+  const expressions = new Map<string, string>();
+  for (const [dataSourceId, dataSource] of dataSources) {
+    const name = encodeDataSourceVariable(dataSourceId);
+    if (dataSource.type === "variable") {
+      const value =
+        dataSourceValues.get(dataSourceId) ?? dataSource.value.value;
+      variables.set(name, value);
+      outputValues.set(dataSourceId, value);
+    }
+    if (dataSource.type === "expression") {
+      expressions.set(name, dataSource.code);
+    }
+  }
+  try {
+    const outputVariables = executeExpressions(variables, expressions);
+    for (const [name, value] of outputVariables) {
+      const id = decodeDataSourceVariable(name);
+      if (id !== undefined) {
+        outputValues.set(id, value);
+      }
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }
+  return outputValues;
+};
 
 export type Data = {
   page: Page;
@@ -17,7 +61,7 @@ export type Data = {
 };
 
 export type RootPropsData = Omit<Data, "build"> & {
-  build: Pick<Data["build"], "instances" | "props">;
+  build: Pick<Data["build"], "instances" | "props" | "dataSources">;
 };
 
 type RootProps = {
@@ -31,6 +75,33 @@ export const InstanceRoot = ({
   Component,
   components,
 }: RootProps): JSX.Element | null => {
+  const dataSourceVariablesStoreRef = useRef<
+    undefined | WritableAtom<Map<DataSource["id"], unknown>>
+  >(undefined);
+  // initialize store with default data source values
+  if (dataSourceVariablesStoreRef.current === undefined) {
+    const dataSourceVariables = new Map<DataSource["id"], unknown>();
+    for (const [dataSourceId, dataSource] of data.build.dataSources) {
+      dataSourceVariables.set(dataSourceId, dataSource);
+    }
+    dataSourceVariablesStoreRef.current = atom(dataSourceVariables);
+  }
+  const dataSourceVariablesStore = dataSourceVariablesStoreRef.current;
+
+  const dataSourceValuesStoreRef = useRef<
+    undefined | ReadableAtom<Map<DataSource["id"], unknown>>
+  >(undefined);
+  // initialize store with default data source values
+  if (dataSourceValuesStoreRef.current === undefined) {
+    dataSourceValuesStoreRef.current = computed(
+      dataSourceVariablesStore,
+      (dataSourceVariables) => {
+        return computeExpressions(data.build.dataSources, dataSourceVariables);
+      }
+    );
+  }
+  const dataSourceValuesStore = dataSourceValuesStoreRef.current;
+
   return createElementsTree({
     imageBaseUrl: data.params?.imageBaseUrl ?? "/",
     assetBaseUrl: data.params?.assetBaseUrl ?? "/",
@@ -41,6 +112,12 @@ export 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/src/tree/webstudio-component.tsx

@@ -40,13 +40,18 @@ export const WebstudioComponent = ({
   components,
   ...rest
 }: WebstudioComponentProps) => {
-  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 <></>;
+  }
   const Component = components.get(instance.component);
   if (Component === undefined) {
     return <></>;
@@ -60,4 +65,5 @@ export const WebstudioComponent = ({
 
 export const idAttribute = "data-ws-id";
 export const componentAttribute = "data-ws-component";
+export const showAttribute = "data-ws-show";
 export const collapsedAttribute = "data-ws-collapsed";