@webstudio-is/react-sdk 0.60.0 → 0.61.0

package/lib/cjs/css/normalize.js

@@ -68,13 +68,10 @@ __export(normalize_exports, {
 module.exports = __toCommonJS(normalize_exports);
 var import_presets = require("./presets");
 const boxSizing = {
-  type: "keyword",
-  value: "border-box"
-};
-const baseStyle = {
-  boxSizing,
-  ...import_presets.borders
+  property: "boxSizing",
+  value: { type: "keyword", value: "border-box" }
 };
+const baseStyle = [boxSizing, ...import_presets.borders];
 const div = baseStyle;
 const address = baseStyle;
 const article = baseStyle;
@@ -100,259 +97,243 @@ const ul = baseStyle;
 const ol = baseStyle;
 const p = baseStyle;
 const span = baseStyle;
-const html = {
+const html = [
   /* 1 */
-  lineHeight: {
-    type: "unit",
-    value: 1.15,
-    unit: "number"
+  {
+    property: "lineHeight",
+    value: { type: "unit", value: 1.15, unit: "number" }
   },
   /* 2 */
-  textSizeAdjust: {
-    type: "unit",
-    value: 100,
-    unit: "%"
+  {
+    property: "textSizeAdjust",
+    value: { type: "unit", value: 100, unit: "%" }
   },
   /* 3 */
-  tabSize: {
-    type: "unit",
-    value: 4,
-    unit: "number"
+  {
+    property: "tabSize",
+    value: { type: "unit", value: 4, unit: "number" }
   },
   boxSizing,
   ...import_presets.borders
-};
-const body = {
+];
+const body = [
   /* 1 */
-  marginTop: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginRight: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginBottom: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginLeft: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "marginTop",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginRight",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginLeft",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   /* 2 */
-  fontFamily: {
-    type: "keyword",
-    value: `system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`
+  {
+    property: "fontFamily",
+    value: {
+      type: "keyword",
+      value: `system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`
+    }
   },
   boxSizing,
   ...import_presets.borders
-};
-const hr = {
+];
+const hr = [
   /* 1 */
-  height: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "height",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   /* 2 */
-  color: { type: "keyword", value: "inherit" },
+  {
+    property: "color",
+    value: { type: "keyword", value: "inherit" }
+  },
   boxSizing,
   ...import_presets.borders
-};
-const b = {
-  fontWeight: {
-    type: "keyword",
-    value: "bolder"
+];
+const b = [
+  {
+    property: "fontWeight",
+    value: { type: "keyword", value: "700" }
   },
   boxSizing,
   ...import_presets.borders
-};
+];
 const strong = b;
-const code = {
+const code = [
   /* 1 */
-  fontFamily: {
-    type: "keyword",
-    value: `ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace`
+  {
+    property: "fontFamily",
+    value: {
+      type: "keyword",
+      value: `ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace`
+    }
   },
   /* 2 */
-  fontSize: {
-    type: "unit",
-    value: 1,
-    unit: "em"
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 1, unit: "em" }
   },
   boxSizing,
   ...import_presets.borders
-};
+];
 const kbd = code;
 const samp = code;
 const pre = code;
-const small = {
-  fontSize: {
-    type: "unit",
-    value: 80,
-    unit: "%"
+const small = [
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 80, unit: "%" }
   },
   boxSizing,
   ...import_presets.borders
-};
-const subSupBase = {
-  fontSize: {
-    type: "unit",
-    value: 75,
-    unit: "%"
+];
+const subSupBase = [
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 75, unit: "%" }
   },
-  lineHeight: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "lineHeight",
+    value: { type: "unit", value: 0, unit: "number" }
   },
-  position: {
-    type: "keyword",
-    value: "relative"
+  {
+    property: "position",
+    value: { type: "keyword", value: "relative" }
   },
-  verticalAlign: {
-    type: "keyword",
-    value: "baseline"
+  {
+    property: "verticalAlign",
+    value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
   ...import_presets.borders
-};
-const sub = {
+];
+const sub = [
   ...subSupBase,
-  bottom: {
-    type: "unit",
-    value: -0.25,
-    unit: "em"
+  {
+    property: "bottom",
+    value: { type: "unit", value: -0.25, unit: "em" }
   }
-};
-const sup = {
+];
+const sup = [
   ...subSupBase,
-  top: {
-    type: "unit",
-    value: -0.5,
-    unit: "em"
+  {
+    property: "top",
+    value: { type: "unit", value: -0.5, unit: "em" }
   }
-};
-const table = {
+];
+const table = [
   /* 1 */
-  textIndent: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "textIndent",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   ...import_presets.borders,
   /* 2 */
-  borderTopColor: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "borderTopColor",
+    value: { type: "keyword", value: "inherit" }
   },
-  borderRightColor: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "borderRightColor",
+    value: { type: "keyword", value: "inherit" }
   },
-  borderBottomColor: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "borderBottomColor",
+    value: { type: "keyword", value: "inherit" }
   },
-  borderLeftColor: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "borderLeftColor",
+    value: { type: "keyword", value: "inherit" }
   },
   boxSizing
-};
-const buttonBase = {
+];
+const buttonBase = [
   /* 1 */
-  fontFamily: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "fontFamily",
+    value: { type: "keyword", value: "inherit" }
   },
-  fontSize: {
-    type: "unit",
-    value: 100,
-    unit: "%"
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 100, unit: "%" }
   },
-  lineHeight: {
-    type: "unit",
-    value: 1.15,
-    unit: "number"
+  {
+    property: "lineHeight",
+    value: { type: "unit", value: 1.15, unit: "number" }
   },
   /* 2 */
-  marginTop: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginRight: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginBottom: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginLeft: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "marginTop",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginRight",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginLeft",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
   ...import_presets.borders
-};
+];
 const input = buttonBase;
 const optgroup = buttonBase;
 const textarea = buttonBase;
-const button = {
+const button = [
   ...buttonBase,
-  textTransform: {
-    type: "keyword",
-    value: "none"
+  {
+    property: "textTransform",
+    value: { type: "keyword", value: "none" }
   }
-};
+];
 const select = button;
-const legend = {
-  paddingTop: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  paddingRight: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  paddingBottom: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  paddingLeft: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+const legend = [
+  {
+    property: "paddingTop",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "paddingRight",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "paddingBottom",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "paddingLeft",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
   ...import_presets.borders
-};
-const progress = {
-  verticalAlign: {
-    type: "keyword",
-    value: "baseline"
+];
+const progress = [
+  {
+    property: "verticalAlign",
+    value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
   ...import_presets.borders
-};
-const summary = {
-  display: {
-    type: "keyword",
-    value: "list-item"
+];
+const summary = [
+  {
+    property: "display",
+    value: { type: "keyword", value: "list-item" }
   },
   boxSizing,
   ...import_presets.borders
-};
+];

package/lib/cjs/css/presets.js

@@ -21,41 +21,21 @@ __export(presets_exports, {
   borders: () => borders
 });
 module.exports = __toCommonJS(presets_exports);
-const borders = {
-  borderTopColor: {
-    type: "keyword",
-    value: "currentColor"
+const borders = [
+  {
+    property: "borderTopWidth",
+    value: { type: "unit", value: 1, unit: "px" }
   },
-  borderRightColor: {
-    type: "keyword",
-    value: "currentColor"
+  {
+    property: "borderRightWidth",
+    value: { type: "unit", value: 1, unit: "px" }
   },
-  borderBottomColor: {
-    type: "keyword",
-    value: "currentColor"
+  {
+    property: "borderBottomWidth",
+    value: { type: "unit", value: 1, unit: "px" }
   },
-  borderLeftColor: {
-    type: "keyword",
-    value: "currentColor"
-  },
-  borderTopWidth: {
-    type: "unit",
-    value: 1,
-    unit: "px"
-  },
-  borderRightWidth: {
-    type: "unit",
-    value: 1,
-    unit: "px"
-  },
-  borderBottomWidth: {
-    type: "unit",
-    value: 1,
-    unit: "px"
-  },
-  borderLeftWidth: {
-    type: "unit",
-    value: 1,
-    unit: "px"
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", value: 1, unit: "px" }
   }
-};
+];

package/lib/cjs/css/style-rules.js

@@ -18,9 +18,11 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var style_rules_exports = {};
 __export(style_rules_exports, {
+  getPresetStyleRules: () => getPresetStyleRules,
   getStyleRules: () => getStyleRules
 });
 module.exports = __toCommonJS(style_rules_exports);
+var import_tree = require("../tree");
 const getStyleRules = (styles, styleSourceSelections) => {
   if (styles === void 0 || styleSourceSelections === void 0) {
     return [];
@@ -67,3 +69,18 @@ const getStyleRules = (styles, styleSourceSelections) => {
   }
   return styleRules;
 };
+const getPresetStyleRules = (component, presetStyle) => {
+  const presetStyleRules = /* @__PURE__ */ new Map();
+  for (const [tag, styles] of Object.entries(presetStyle)) {
+    for (const styleDecl of styles) {
+      const selector = `${tag}:where([${import_tree.componentAttribute}=${component}])${styleDecl.state ?? ""}`;
+      let rule = presetStyleRules.get(selector);
+      if (rule === void 0) {
+        rule = {};
+        presetStyleRules.set(selector, rule);
+      }
+      rule[styleDecl.property] = styleDecl.value;
+    }
+  }
+  return presetStyleRules;
+};

package/lib/cjs/embed-template.js

@@ -0,0 +1,160 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var embed_template_exports = {};
+__export(embed_template_exports, {
+  EmbedTemplateInstance: () => EmbedTemplateInstance,
+  EmbedTemplateStyleDecl: () => EmbedTemplateStyleDecl,
+  WsEmbedTemplate: () => WsEmbedTemplate,
+  generateDataFromEmbedTemplate: () => generateDataFromEmbedTemplate
+});
+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");
+const EmbedTemplateText = import_zod.z.object({
+  type: import_zod.z.literal("text"),
+  value: 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(),
+    value: import_zod.z.number()
+  }),
+  import_zod.z.object({
+    type: import_zod.z.literal("string"),
+    name: import_zod.z.string(),
+    value: import_zod.z.string()
+  }),
+  import_zod.z.object({
+    type: import_zod.z.literal("boolean"),
+    name: import_zod.z.string(),
+    value: import_zod.z.boolean()
+  }),
+  import_zod.z.object({
+    type: import_zod.z.literal("string[]"),
+    name: import_zod.z.string(),
+    value: import_zod.z.array(import_zod.z.string())
+  })
+]);
+const EmbedTemplateStyleDecl = import_zod.z.object({
+  state: import_zod.z.optional(import_zod.z.string()),
+  property: import_zod.z.string(),
+  value: import_css_data.StyleValue
+});
+const EmbedTemplateInstance = import_zod.z.lazy(
+  () => import_zod.z.object({
+    type: import_zod.z.literal("instance"),
+    component: import_zod.z.string(),
+    props: import_zod.z.optional(import_zod.z.array(EmbedTemplateProp)),
+    styles: import_zod.z.optional(import_zod.z.array(EmbedTemplateStyleDecl)),
+    children: WsEmbedTemplate
+  })
+);
+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 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) {
+          props.push({
+            id: (0, import_nanoid.nanoid)(),
+            instanceId,
+            ...prop
+          });
+        }
+      }
+      if (item.styles) {
+        const styleSourceId = (0, import_nanoid.nanoid)();
+        styleSources.push({
+          type: "local",
+          id: styleSourceId
+        });
+        styleSourceSelections.push({
+          instanceId,
+          values: [styleSourceId]
+        });
+        for (const styleDecl of item.styles) {
+          styles.push({
+            breakpointId: defaultBreakpointId,
+            styleSourceId,
+            state: styleDecl.state,
+            property: styleDecl.property,
+            value: styleDecl.value
+          });
+        }
+      }
+      const instance = {
+        type: "instance",
+        id: instanceId,
+        component: item.component,
+        children: []
+      };
+      instances.push(instance);
+      instance.children = createInstancesFromTemplate(
+        item.children,
+        instances,
+        props,
+        styleSourceSelections,
+        styleSources,
+        styles,
+        defaultBreakpointId
+      );
+      parentChildren.push({
+        type: "id",
+        value: instanceId
+      });
+    }
+    if (item.type === "text") {
+      parentChildren.push({
+        type: "text",
+        value: item.value
+      });
+    }
+  }
+  return parentChildren;
+};
+const generateDataFromEmbedTemplate = (treeTemplate, defaultBreakpointId) => {
+  const instances = [];
+  const props = [];
+  const styleSourceSelections = [];
+  const styleSources = [];
+  const styles = [];
+  const children = createInstancesFromTemplate(
+    treeTemplate,
+    instances,
+    props,
+    styleSourceSelections,
+    styleSources,
+    styles,
+    defaultBreakpointId
+  );
+  return {
+    children,
+    instances,
+    props,
+    styleSourceSelections,
+    styleSources,
+    styles
+  };
+};

package/lib/cjs/index.js

@@ -34,3 +34,4 @@ __reExport(src_exports, require("./components/components"), module.exports);
 __reExport(src_exports, require("./components/components-utils"), module.exports);
 var import_custom_components = require("./app/custom-components");
 var import_component_meta = require("./components/component-meta");
+__reExport(src_exports, require("./embed-template"), module.exports);