@webstudio-is/react-sdk 0.76.0 → 0.78.0

package/lib/cjs/css/normalize.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var normalize_exports = {};
 __export(normalize_exports, {
@@ -23,6 +33,7 @@ __export(normalize_exports, {
   article: () => article,
   aside: () => aside,
   b: () => b,
+  blockquote: () => blockquote,
   body: () => body,
   button: () => button,
   code: () => code,
@@ -67,17 +78,25 @@ __export(normalize_exports, {
   ul: () => ul
 });
 module.exports = __toCommonJS(normalize_exports);
-var import_presets = require("./presets");
+var presets = __toESM(require("./presets"), 1);
 const boxSizing = {
   property: "boxSizing",
   value: { type: "keyword", value: "border-box" }
 };
-const baseStyle = [boxSizing, ...import_presets.borders, ...import_presets.outline];
+const baseStyle = [
+  boxSizing,
+  ...presets.borders,
+  ...presets.outline
+];
 const div = baseStyle;
 const address = baseStyle;
 const article = baseStyle;
 const aside = baseStyle;
-const figure = baseStyle;
+const blockquote = [
+  ...baseStyle,
+  ...presets.blockquote
+];
+const figure = [...baseStyle, ...presets.margins];
 const footer = baseStyle;
 const header = baseStyle;
 const main = baseStyle;
@@ -85,19 +104,19 @@ const nav = baseStyle;
 const section = baseStyle;
 const form = baseStyle;
 const label = baseStyle;
-const h1 = baseStyle;
-const h2 = baseStyle;
-const h3 = baseStyle;
-const h4 = baseStyle;
-const h5 = baseStyle;
-const h6 = baseStyle;
+const h1 = [...baseStyle, ...presets.h1];
+const h2 = [...baseStyle, ...presets.h2];
+const h3 = [...baseStyle, ...presets.h3];
+const h4 = [...baseStyle, ...presets.h4];
+const h5 = [...baseStyle, ...presets.h5];
+const h6 = [...baseStyle, ...presets.h6];
 const i = baseStyle;
 const img = baseStyle;
 const a = baseStyle;
 const li = baseStyle;
 const ul = baseStyle;
 const ol = baseStyle;
-const p = baseStyle;
+const p = [...baseStyle, ...presets.verticalMargins];
 const span = baseStyle;
 const html = [
   /* 1 */
@@ -116,7 +135,7 @@ const html = [
     value: { type: "unit", value: 4, unit: "number" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const body = [
   /* 1 */
@@ -153,7 +172,7 @@ const body = [
     value: { type: "unit", unit: "number", value: 1.2 }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const hr = [
   /* 1 */
@@ -167,7 +186,8 @@ const hr = [
     value: { type: "keyword", value: "inherit" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders,
+  ...presets.margins
 ];
 const b = [
   {
@@ -175,7 +195,7 @@ const b = [
     value: { type: "keyword", value: "700" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const strong = b;
 const code = [
@@ -193,7 +213,7 @@ const code = [
     value: { type: "unit", value: 1, unit: "em" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const kbd = code;
 const samp = code;
@@ -204,7 +224,7 @@ const small = [
     value: { type: "unit", value: 80, unit: "%" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const subSupBase = [
   {
@@ -224,7 +244,7 @@ const subSupBase = [
     value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const sub = [
   ...subSupBase,
@@ -246,7 +266,7 @@ const table = [
     property: "textIndent",
     value: { type: "unit", value: 0, unit: "number" }
   },
-  ...import_presets.borders,
+  ...presets.borders,
   /* 2 */
   {
     property: "borderTopColor",
@@ -298,7 +318,7 @@ const buttonBase = [
     value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const input = buttonBase;
 const optgroup = buttonBase;
@@ -329,7 +349,7 @@ const legend = [
     value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const progress = [
   {
@@ -337,7 +357,7 @@ const progress = [
     value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const summary = [
   {
@@ -345,5 +365,5 @@ const summary = [
     value: { type: "keyword", value: "list-item" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];

package/lib/cjs/css/presets.js

@@ -18,8 +18,17 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var presets_exports = {};
 __export(presets_exports, {
+  blockquote: () => blockquote,
   borders: () => borders,
-  outline: () => outline
+  h1: () => h1,
+  h2: () => h2,
+  h3: () => h3,
+  h4: () => h4,
+  h5: () => h5,
+  h6: () => h6,
+  margins: () => margins,
+  outline: () => outline,
+  verticalMargins: () => verticalMargins
 });
 module.exports = __toCommonJS(presets_exports);
 const borders = [
@@ -46,3 +55,104 @@ 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" }
+  }
+];

package/lib/cjs/expression.js

@@ -31,6 +31,7 @@ __export(expression_exports, {
   decodeDataSourceVariable: () => decodeDataSourceVariable,
   encodeDataSourceVariable: () => encodeDataSourceVariable,
   executeExpressions: () => executeExpressions,
+  generateExpressionsComputation: () => generateExpressionsComputation,
   validateExpression: () => validateExpression
 });
 module.exports = __toCommonJS(expression_exports);
@@ -133,12 +134,29 @@ const validateExpression = (code, transformIdentifier = (id) => id) => {
   const expression = (0, import_jsep.default)(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;
       }
@@ -146,35 +164,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$";

package/lib/cjs/index.js

@@ -25,6 +25,7 @@ __export(src_exports, {
   defaultStates: () => import_component_meta.defaultStates,
   encodeDataSourceVariable: () => import_expression.encodeDataSourceVariable,
   executeExpressions: () => import_expression.executeExpressions,
+  generateExpressionsComputation: () => import_expression.generateExpressionsComputation,
   getInstanceIdFromComponentProps: () => import_props.getInstanceIdFromComponentProps,
   stateCategories: () => import_component_meta.stateCategories,
   useInstanceProps: () => import_props.useInstanceProps,

package/lib/cjs/tree/root.js

@@ -26,47 +26,15 @@ var import_nanostores = require("nanostores");
 var import_create_elements_tree = require("./create-elements-tree");
 var import_webstudio_component = require("./webstudio-component");
 var import_props = require("../props");
-var import_expression = require("../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 = (0, import_expression.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 = (0, import_expression.executeExpressions)(variables, expressions);
-    for (const [name, value] of outputVariables) {
-      const id = (0, import_expression.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 = (0, import_react.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 = (0, import_nanostores.atom)(dataSourceVariables);
+    dataSourceVariablesStoreRef.current = (0, import_nanostores.atom)(/* @__PURE__ */ new Map());
   }
   const dataSourceVariablesStore = dataSourceVariablesStoreRef.current;
   const dataSourceValuesStoreRef = (0, import_react.useRef)(void 0);
@@ -74,7 +42,22 @@ const InstanceRoot = ({
     dataSourceValuesStoreRef.current = (0, import_nanostores.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;
       }
     );
   }

package/lib/css/normalize.js

@@ -1,14 +1,22 @@
-import { borders, outline } from "./presets";
+import * as presets from "./presets";
 const boxSizing = {
   property: "boxSizing",
   value: { type: "keyword", value: "border-box" }
 };
-const baseStyle = [boxSizing, ...borders, ...outline];
+const baseStyle = [
+  boxSizing,
+  ...presets.borders,
+  ...presets.outline
+];
 const div = baseStyle;
 const address = baseStyle;
 const article = baseStyle;
 const aside = baseStyle;
-const figure = baseStyle;
+const blockquote = [
+  ...baseStyle,
+  ...presets.blockquote
+];
+const figure = [...baseStyle, ...presets.margins];
 const footer = baseStyle;
 const header = baseStyle;
 const main = baseStyle;
@@ -16,19 +24,19 @@ const nav = baseStyle;
 const section = baseStyle;
 const form = baseStyle;
 const label = baseStyle;
-const h1 = baseStyle;
-const h2 = baseStyle;
-const h3 = baseStyle;
-const h4 = baseStyle;
-const h5 = baseStyle;
-const h6 = baseStyle;
+const h1 = [...baseStyle, ...presets.h1];
+const h2 = [...baseStyle, ...presets.h2];
+const h3 = [...baseStyle, ...presets.h3];
+const h4 = [...baseStyle, ...presets.h4];
+const h5 = [...baseStyle, ...presets.h5];
+const h6 = [...baseStyle, ...presets.h6];
 const i = baseStyle;
 const img = baseStyle;
 const a = baseStyle;
 const li = baseStyle;
 const ul = baseStyle;
 const ol = baseStyle;
-const p = baseStyle;
+const p = [...baseStyle, ...presets.verticalMargins];
 const span = baseStyle;
 const html = [
   /* 1 */
@@ -47,7 +55,7 @@ const html = [
     value: { type: "unit", value: 4, unit: "number" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const body = [
   /* 1 */
@@ -84,7 +92,7 @@ const body = [
     value: { type: "unit", unit: "number", value: 1.2 }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const hr = [
   /* 1 */
@@ -98,7 +106,8 @@ const hr = [
     value: { type: "keyword", value: "inherit" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders,
+  ...presets.margins
 ];
 const b = [
   {
@@ -106,7 +115,7 @@ const b = [
     value: { type: "keyword", value: "700" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const strong = b;
 const code = [
@@ -124,7 +133,7 @@ const code = [
     value: { type: "unit", value: 1, unit: "em" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const kbd = code;
 const samp = code;
@@ -135,7 +144,7 @@ const small = [
     value: { type: "unit", value: 80, unit: "%" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const subSupBase = [
   {
@@ -155,7 +164,7 @@ const subSupBase = [
     value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const sub = [
   ...subSupBase,
@@ -177,7 +186,7 @@ const table = [
     property: "textIndent",
     value: { type: "unit", value: 0, unit: "number" }
   },
-  ...borders,
+  ...presets.borders,
   /* 2 */
   {
     property: "borderTopColor",
@@ -229,7 +238,7 @@ const buttonBase = [
     value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const input = buttonBase;
 const optgroup = buttonBase;
@@ -260,7 +269,7 @@ const legend = [
     value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const progress = [
   {
@@ -268,7 +277,7 @@ const progress = [
     value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const summary = [
   {
@@ -276,7 +285,7 @@ const summary = [
     value: { type: "keyword", value: "list-item" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 export {
   a,
@@ -284,6 +293,7 @@ export {
   article,
   aside,
   b,
+  blockquote,
   body,
   button,
   code,