@webstudio-is/react-sdk 0.76.0 → 0.77.0

package/src/expression.ts

@@ -111,15 +111,42 @@ export const validateExpression = (
   return generateCode(expression, true, transformIdentifier);
 };
 
-export const executeExpressions = (
-  variables: Map<string, unknown>,
+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) || expressions.has(identifier)) {
+      if (variables.has(identifier)) {
+        return identifier;
+      }
+      if (expressions.has(identifier)) {
         deps.add(identifier);
         return identifier;
       }
@@ -128,38 +155,45 @@ export const executeExpressions = (
     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;
-    }
+  const sortedExpressions = sortTopologically(
+    new Set(expressions.keys()),
+    depsById
   );
 
-  // execute chain of expressions
-  let header = "";
-  for (const [id, value] of variables) {
-    header += `const ${id} = ${JSON.stringify(value)};\n`;
-  }
+  // generate code computing all expressions
+  let generatedCode = "";
 
-  const values = new Map<string, unknown>();
+  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;
     }
-    const executeFn = new Function(`${header}\nreturn (${code});`);
-    const value = executeFn();
-    header += `const ${id} = ${JSON.stringify(value)};\n`;
-    values.set(id, value);
+    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;
 };
 

package/src/index.ts

@@ -22,6 +22,7 @@ export {
 export { type Params, ReactSdkContext } from "./context";
 export {
   validateExpression,
+  generateExpressionsComputation,
   executeExpressions,
   encodeDataSourceVariable,
   decodeDataSourceVariable,

package/src/tree/root.ts

@@ -12,45 +12,6 @@ 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;
@@ -64,39 +25,58 @@ export type RootPropsData = Omit<Data, "build"> & {
   build: Pick<Data["build"], "instances" | "props" | "dataSources">;
 };
 
+type DataSourceValues = Map<DataSource["id"], unknown>;
+
 type RootProps = {
   data: RootPropsData;
+  computeExpressions: (values: DataSourceValues) => DataSourceValues;
   Component?: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   components: Components;
 };
 
 export const InstanceRoot = ({
   data,
+  computeExpressions,
   Component,
   components,
 }: RootProps): JSX.Element | null => {
   const dataSourceVariablesStoreRef = useRef<
-    undefined | WritableAtom<Map<DataSource["id"], unknown>>
+    undefined | WritableAtom<DataSourceValues>
   >(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);
+    dataSourceVariablesStoreRef.current = atom(new Map());
   }
   const dataSourceVariablesStore = dataSourceVariablesStoreRef.current;
 
   const dataSourceValuesStoreRef = useRef<
-    undefined | ReadableAtom<Map<DataSource["id"], unknown>>
+    undefined | ReadableAtom<DataSourceValues>
   >(undefined);
-  // initialize store with default data source values
   if (dataSourceValuesStoreRef.current === undefined) {
     dataSourceValuesStoreRef.current = computed(
       dataSourceVariablesStore,
       (dataSourceVariables) => {
-        return computeExpressions(data.build.dataSources, dataSourceVariables);
+        // set vriables with defaults
+        const dataSourceValues: DataSourceValues = 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);
+          }
+        }
+
+        // set expression values
+        try {
+          const result = computeExpressions(dataSourceValues);
+          for (const [id, value] of result) {
+            dataSourceValues.set(id, value);
+          }
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error(error);
+        }
+
+        return dataSourceValues;
       }
     );
   }