@webstudio-is/react-sdk 0.75.0 → 0.77.0

package/lib/cjs/context.js

@@ -28,5 +28,9 @@ const ReactSdkContext = (0, import_react.createContext)({
   assetBaseUrl: "/",
   propsByInstanceIdStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
   assetsStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
-  pagesStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map())
+  pagesStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
+  dataSourceValuesStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
+  setDataSourceValue: () => {
+    throw Error("React SDK setDataSourceValue is not implemented");
+  }
 });

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 */
@@ -141,11 +160,19 @@ const body = [
     property: "fontFamily",
     value: {
       type: "keyword",
-      value: `system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`
+      value: "Arial, sans-serif"
     }
   },
+  {
+    property: "fontSize",
+    value: { type: "unit", unit: "px", value: 16 }
+  },
+  {
+    property: "lineHeight",
+    value: { type: "unit", unit: "number", value: 1.2 }
+  },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const hr = [
   /* 1 */
@@ -159,7 +186,8 @@ const hr = [
     value: { type: "keyword", value: "inherit" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders,
+  ...presets.margins
 ];
 const b = [
   {
@@ -167,7 +195,7 @@ const b = [
     value: { type: "keyword", value: "700" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const strong = b;
 const code = [
@@ -185,7 +213,7 @@ const code = [
     value: { type: "unit", value: 1, unit: "em" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const kbd = code;
 const samp = code;
@@ -196,7 +224,7 @@ const small = [
     value: { type: "unit", value: 80, unit: "%" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const subSupBase = [
   {
@@ -216,7 +244,7 @@ const subSupBase = [
     value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const sub = [
   ...subSupBase,
@@ -238,7 +266,7 @@ const table = [
     property: "textIndent",
     value: { type: "unit", value: 0, unit: "number" }
   },
-  ...import_presets.borders,
+  ...presets.borders,
   /* 2 */
   {
     property: "borderTopColor",
@@ -290,7 +318,7 @@ const buttonBase = [
     value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const input = buttonBase;
 const optgroup = buttonBase;
@@ -321,7 +349,7 @@ const legend = [
     value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const progress = [
   {
@@ -329,7 +357,7 @@ const progress = [
     value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
-  ...import_presets.borders
+  ...presets.borders
 ];
 const summary = [
   {
@@ -337,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/embed-template.js

@@ -27,29 +27,45 @@ module.exports = __toCommonJS(embed_template_exports);
 var import_zod = require("zod");
 var import_nanoid = require("nanoid");
 var import_css_data = require("@webstudio-is/css-data");
+var import_expression = require("./expression");
 const EmbedTemplateText = import_zod.z.object({
   type: import_zod.z.literal("text"),
   value: import_zod.z.string()
 });
+const DataSourceRef = import_zod.z.union([
+  import_zod.z.object({
+    type: import_zod.z.literal("variable"),
+    name: import_zod.z.string()
+  }),
+  import_zod.z.object({
+    type: import_zod.z.literal("expression"),
+    name: import_zod.z.string(),
+    code: import_zod.z.string()
+  })
+]);
 const EmbedTemplateProp = import_zod.z.union([
   import_zod.z.object({
     type: import_zod.z.literal("number"),
     name: import_zod.z.string(),
+    dataSourceRef: import_zod.z.optional(DataSourceRef),
     value: import_zod.z.number()
   }),
   import_zod.z.object({
     type: import_zod.z.literal("string"),
     name: import_zod.z.string(),
+    dataSourceRef: import_zod.z.optional(DataSourceRef),
     value: import_zod.z.string()
   }),
   import_zod.z.object({
     type: import_zod.z.literal("boolean"),
     name: import_zod.z.string(),
+    dataSourceRef: import_zod.z.optional(DataSourceRef),
     value: import_zod.z.boolean()
   }),
   import_zod.z.object({
     type: import_zod.z.literal("string[]"),
     name: import_zod.z.string(),
+    dataSourceRef: import_zod.z.optional(DataSourceRef),
     value: import_zod.z.array(import_zod.z.string())
   })
 ]);
@@ -73,17 +89,52 @@ const EmbedTemplateInstance = import_zod.z.lazy(
 const WsEmbedTemplate = import_zod.z.lazy(
   () => import_zod.z.array(import_zod.z.union([EmbedTemplateInstance, EmbedTemplateText]))
 );
-const createInstancesFromTemplate = (treeTemplate, instances, props, styleSourceSelections, styleSources, styles, defaultBreakpointId) => {
+const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByRef, styleSourceSelections, styleSources, styles, defaultBreakpointId) => {
   const parentChildren = [];
   for (const item of treeTemplate) {
     if (item.type === "instance") {
       const instanceId = (0, import_nanoid.nanoid)();
       if (item.props) {
         for (const prop of item.props) {
+          const propId = (0, import_nanoid.nanoid)();
+          if (prop.dataSourceRef === void 0) {
+            props.push({ id: propId, instanceId, ...prop });
+            continue;
+          }
+          let dataSource = dataSourceByRef.get(prop.dataSourceRef.name);
+          if (dataSource === void 0) {
+            const id = (0, import_nanoid.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;
+              continue;
+            }
+          }
           props.push({
-            id: (0, import_nanoid.nanoid)(),
+            id: propId,
             instanceId,
-            ...prop
+            type: "dataSource",
+            name: prop.name,
+            value: dataSource.id
           });
         }
       }
@@ -119,6 +170,7 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, styleSource
         item.children,
         instances,
         props,
+        dataSourceByRef,
         styleSourceSelections,
         styleSources,
         styles,
@@ -141,6 +193,7 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, styleSource
 const generateDataFromEmbedTemplate = (treeTemplate, defaultBreakpointId) => {
   const instances = [];
   const props = [];
+  const dataSourceByRef = /* @__PURE__ */ new Map();
   const styleSourceSelections = [];
   const styleSources = [];
   const styles = [];
@@ -148,15 +201,27 @@ const generateDataFromEmbedTemplate = (treeTemplate, defaultBreakpointId) => {
     treeTemplate,
     instances,
     props,
+    dataSourceByRef,
     styleSourceSelections,
     styleSources,
     styles,
     defaultBreakpointId
   );
+  const dataSources = [];
+  for (const dataSource of dataSourceByRef.values()) {
+    if (dataSource.type === "expression") {
+      dataSource.code = (0, import_expression.validateExpression)(dataSource.code, (ref) => {
+        const id = dataSourceByRef.get(ref)?.id ?? ref;
+        return (0, import_expression.encodeDataSourceVariable)(id);
+      });
+    }
+    dataSources.push(dataSource);
+  }
   return {
     children,
     instances,
     props,
+    dataSources,
     styleSourceSelections,
     styleSources,
     styles

package/lib/cjs/expression.js

@@ -0,0 +1,213 @@
+"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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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 expression_exports = {};
+__export(expression_exports, {
+  decodeDataSourceVariable: () => decodeDataSourceVariable,
+  encodeDataSourceVariable: () => encodeDataSourceVariable,
+  executeExpressions: () => executeExpressions,
+  generateExpressionsComputation: () => generateExpressionsComputation,
+  validateExpression: () => validateExpression
+});
+module.exports = __toCommonJS(expression_exports);
+var import_jsep = __toESM(require("jsep"), 1);
+const generateCode = (node, failOnForbidden, transformIdentifier) => {
+  if (node.type === "Identifier") {
+    return transformIdentifier(node.name);
+  }
+  if (node.type === "MemberExpression") {
+    if (failOnForbidden) {
+      const object2 = generateCode(
+        node.object,
+        false,
+        transformIdentifier
+      );
+      const property2 = generateCode(
+        node.property,
+        false,
+        transformIdentifier
+      );
+      throw Error(`Cannot access "${property2}" of "${object2}"`);
+    }
+    const object = generateCode(
+      node.object,
+      failOnForbidden,
+      transformIdentifier
+    );
+    const property = generateCode(
+      node.property,
+      failOnForbidden,
+      transformIdentifier
+    );
+    return `${object}.${property}`;
+  }
+  if (node.type === "Literal") {
+    return node.raw;
+  }
+  if (node.type === "UnaryExpression") {
+    const arg = generateCode(
+      node.argument,
+      failOnForbidden,
+      transformIdentifier
+    );
+    return `${node.operator}${arg}`;
+  }
+  if (node.type === "BinaryExpression") {
+    const left = generateCode(
+      node.left,
+      failOnForbidden,
+      transformIdentifier
+    );
+    const right = generateCode(
+      node.right,
+      failOnForbidden,
+      transformIdentifier
+    );
+    return `${left} ${node.operator} ${right}`;
+  }
+  if (node.type === "ArrayExpression") {
+    const elements = node.elements.map(
+      (element) => generateCode(element, failOnForbidden, transformIdentifier)
+    );
+    return `[${elements.join(", ")}]`;
+  }
+  if (node.type === "CallExpression") {
+    if (failOnForbidden) {
+      const callee2 = generateCode(
+        node.callee,
+        false,
+        transformIdentifier
+      );
+      throw Error(`Cannot call "${callee2}"`);
+    }
+    const callee = generateCode(
+      node.callee,
+      failOnForbidden,
+      transformIdentifier
+    );
+    const args = node.arguments.map(
+      (arg) => generateCode(arg, 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;
+  return "";
+};
+const validateExpression = (code, transformIdentifier = (id) => id) => {
+  const expression = (0, import_jsep.default)(code);
+  return generateCode(expression, true, transformIdentifier);
+};
+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)) {
+        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
+  );
+  let generatedCode = "";
+  for (const id of variables) {
+    generatedCode += `const ${id} = _variables.get('${id}');
+`;
+  }
+  for (const id of sortedExpressions) {
+    const code = expressions.get(id);
+    if (code === void 0) {
+      continue;
+    }
+    generatedCode += `const ${id} = (${code});
+`;
+  }
+  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$";
+const encodeDataSourceVariable = (id) => {
+  const encoded = id.replaceAll("-", "__DASH__");
+  return `${dataSourceVariablePrefix}${encoded}`;
+};
+const decodeDataSourceVariable = (name) => {
+  if (name.startsWith(dataSourceVariablePrefix)) {
+    const encoded = name.slice(dataSourceVariablePrefix.length);
+    return encoded.replaceAll("__DASH__", "-");
+  }
+  return;
+};