@webstudio-is/react-sdk 0.76.0 → 0.78.0

package/lib/css/presets.js

@@ -22,7 +22,117 @@ const outline = [
     value: { type: "unit", value: 1, unit: "px" }
   }
 ];
+const margins = [
+  {
+    property: "marginTop",
+    value: { type: "unit", value: 0, unit: "px" }
+  },
+  {
+    property: "marginRight",
+    value: { type: "unit", value: 0, unit: "px" }
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", value: 0, unit: "px" }
+  },
+  {
+    property: "marginLeft",
+    value: { type: "unit", value: 0, unit: "px" }
+  }
+];
+const verticalMargins = [
+  {
+    property: "marginTop",
+    value: { type: "unit", value: 0, unit: "px" }
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", value: 0, unit: "px" }
+  }
+];
+const blockquote = [
+  ...margins,
+  {
+    property: "paddingTop",
+    value: { type: "unit", value: 10, unit: "px" }
+  },
+  {
+    property: "paddingBottom",
+    value: { type: "unit", value: 10, unit: "px" }
+  },
+  {
+    property: "paddingLeft",
+    value: { type: "unit", value: 20, unit: "px" }
+  },
+  {
+    property: "paddingRight",
+    value: { type: "unit", value: 20, unit: "px" }
+  },
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", value: 5, unit: "px" }
+  },
+  {
+    property: "borderLeftStyle",
+    value: { type: "keyword", value: "solid" }
+  },
+  {
+    property: "borderLeftColor",
+    value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
+  }
+];
+const h1 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 38, unit: "px" }
+  }
+];
+const h2 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 32, unit: "px" }
+  }
+];
+const h3 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 24, unit: "px" }
+  }
+];
+const h4 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 18, unit: "px" }
+  }
+];
+const h5 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 14, unit: "px" }
+  }
+];
+const h6 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 12, unit: "px" }
+  }
+];
 export {
+  blockquote,
   borders,
-  outline
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  margins,
+  outline,
+  verticalMargins
 };

package/lib/expression.js

@@ -97,12 +97,29 @@ const validateExpression = (code, transformIdentifier = (id) => id) => {
   const expression = jsep(code);
   return generateCode(expression, true, transformIdentifier);
 };
-const executeExpressions = (variables, expressions) => {
+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) || expressions.has(identifier)) {
+      if (variables.has(identifier)) {
+        return identifier;
+      }
+      if (expressions.has(identifier)) {
         deps.add(identifier);
         return identifier;
       }
@@ -110,35 +127,39 @@ const executeExpressions = (variables, expressions) => {
     });
     depsById.set(id, deps);
   }
-  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
   );
-  let header = "";
-  for (const [id, value] of variables) {
-    header += `const ${id} = ${JSON.stringify(value)};
+  let generatedCode = "";
+  for (const id of variables) {
+    generatedCode += `const ${id} = _variables.get('${id}');
 `;
   }
-  const values = /* @__PURE__ */ new Map();
   for (const id of sortedExpressions) {
     const code = expressions.get(id);
     if (code === void 0) {
       continue;
     }
-    const executeFn = new Function(`${header}
-return (${code});`);
-    const value = executeFn();
-    header += `const ${id} = ${JSON.stringify(value)};
+    generatedCode += `const ${id} = (${code});
 `;
-    values.set(id, value);
   }
+  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$";
@@ -157,5 +178,6 @@ export {
   decodeDataSourceVariable,
   encodeDataSourceVariable,
   executeExpressions,
+  generateExpressionsComputation,
   validateExpression
 };

package/lib/index.js

@@ -18,6 +18,7 @@ import {
 import { ReactSdkContext } from "./context";
 import {
   validateExpression,
+  generateExpressionsComputation,
   executeExpressions,
   encodeDataSourceVariable,
   decodeDataSourceVariable
@@ -29,6 +30,7 @@ export {
   defaultStates,
   encodeDataSourceVariable,
   executeExpressions,
+  generateExpressionsComputation,
   getInstanceIdFromComponentProps,
   stateCategories,
   useInstanceProps,

package/lib/tree/root.js

@@ -6,51 +6,15 @@ import {
 import { createElementsTree } from "./create-elements-tree";
 import { WebstudioComponent } from "./webstudio-component";
 import { getPropsByInstanceId } from "../props";
-import {
-  executeExpressions,
-  encodeDataSourceVariable,
-  decodeDataSourceVariable
-} from "../expression";
-const computeExpressions = (dataSources, dataSourceValues) => {
-  const outputValues = /* @__PURE__ */ new Map();
-  const variables = /* @__PURE__ */ new Map();
-  const expressions = /* @__PURE__ */ new Map();
-  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 !== void 0) {
-        outputValues.set(id, value);
-      }
-    }
-  } catch (error) {
-    console.error(error);
-  }
-  return outputValues;
-};
 const InstanceRoot = ({
   data,
+  computeExpressions,
   Component,
   components
 }) => {
   const dataSourceVariablesStoreRef = useRef(void 0);
   if (dataSourceVariablesStoreRef.current === void 0) {
-    const dataSourceVariables = /* @__PURE__ */ new Map();
-    for (const [dataSourceId, dataSource] of data.build.dataSources) {
-      dataSourceVariables.set(dataSourceId, dataSource);
-    }
-    dataSourceVariablesStoreRef.current = atom(dataSourceVariables);
+    dataSourceVariablesStoreRef.current = atom(/* @__PURE__ */ new Map());
   }
   const dataSourceVariablesStore = dataSourceVariablesStoreRef.current;
   const dataSourceValuesStoreRef = useRef(void 0);
@@ -58,7 +22,22 @@ const InstanceRoot = ({
     dataSourceValuesStoreRef.current = computed(
       dataSourceVariablesStore,
       (dataSourceVariables) => {
-        return computeExpressions(data.build.dataSources, 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;
       }
     );
   }