@webstudio-is/react-sdk 0.50.0 → 0.52.0

package/lib/cjs/css/normalize.js

@@ -0,0 +1,358 @@
+"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 normalize_exports = {};
+__export(normalize_exports, {
+  a: () => a,
+  address: () => address,
+  article: () => article,
+  aside: () => aside,
+  b: () => b,
+  body: () => body,
+  button: () => button,
+  code: () => code,
+  div: () => div,
+  figure: () => figure,
+  footer: () => footer,
+  form: () => form,
+  h1: () => h1,
+  h2: () => h2,
+  h3: () => h3,
+  h4: () => h4,
+  h5: () => h5,
+  h6: () => h6,
+  header: () => header,
+  hr: () => hr,
+  html: () => html,
+  i: () => i,
+  img: () => img,
+  input: () => input,
+  kbd: () => kbd,
+  legend: () => legend,
+  li: () => li,
+  main: () => main,
+  nav: () => nav,
+  ol: () => ol,
+  optgroup: () => optgroup,
+  p: () => p,
+  pre: () => pre,
+  progress: () => progress,
+  samp: () => samp,
+  section: () => section,
+  select: () => select,
+  small: () => small,
+  span: () => span,
+  strong: () => strong,
+  sub: () => sub,
+  summary: () => summary,
+  sup: () => sup,
+  table: () => table,
+  textarea: () => textarea,
+  ul: () => ul
+});
+module.exports = __toCommonJS(normalize_exports);
+var import_presets = require("./presets");
+const boxSizing = {
+  type: "keyword",
+  value: "border-box"
+};
+const baseStyle = {
+  boxSizing,
+  ...import_presets.borders
+};
+const div = baseStyle;
+const address = baseStyle;
+const article = baseStyle;
+const aside = baseStyle;
+const figure = baseStyle;
+const footer = baseStyle;
+const header = baseStyle;
+const main = baseStyle;
+const nav = baseStyle;
+const section = baseStyle;
+const form = baseStyle;
+const h1 = baseStyle;
+const h2 = baseStyle;
+const h3 = baseStyle;
+const h4 = baseStyle;
+const h5 = baseStyle;
+const h6 = baseStyle;
+const i = baseStyle;
+const img = baseStyle;
+const a = baseStyle;
+const li = baseStyle;
+const ul = baseStyle;
+const ol = baseStyle;
+const p = baseStyle;
+const span = baseStyle;
+const html = {
+  /* 1 */
+  lineHeight: {
+    type: "unit",
+    value: 1.15,
+    unit: "number"
+  },
+  /* 2 */
+  textSizeAdjust: {
+    type: "unit",
+    value: 100,
+    unit: "%"
+  },
+  /* 3 */
+  tabSize: {
+    type: "unit",
+    value: 4,
+    unit: "number"
+  },
+  boxSizing,
+  ...import_presets.borders
+};
+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"
+  },
+  /* 2 */
+  fontFamily: {
+    type: "keyword",
+    value: `system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`
+  },
+  boxSizing,
+  ...import_presets.borders
+};
+const hr = {
+  /* 1 */
+  height: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  /* 2 */
+  color: { type: "keyword", value: "inherit" },
+  boxSizing,
+  ...import_presets.borders
+};
+const b = {
+  fontWeight: {
+    type: "keyword",
+    value: "bolder"
+  },
+  boxSizing,
+  ...import_presets.borders
+};
+const strong = b;
+const code = {
+  /* 1 */
+  fontFamily: {
+    type: "keyword",
+    value: `ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace`
+  },
+  /* 2 */
+  fontSize: {
+    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: "%"
+  },
+  boxSizing,
+  ...import_presets.borders
+};
+const subSupBase = {
+  fontSize: {
+    type: "unit",
+    value: 75,
+    unit: "%"
+  },
+  lineHeight: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  position: {
+    type: "keyword",
+    value: "relative"
+  },
+  verticalAlign: {
+    type: "keyword",
+    value: "baseline"
+  },
+  boxSizing,
+  ...import_presets.borders
+};
+const sub = {
+  ...subSupBase,
+  bottom: {
+    type: "unit",
+    value: -0.25,
+    unit: "em"
+  }
+};
+const sup = {
+  ...subSupBase,
+  top: {
+    type: "unit",
+    value: -0.5,
+    unit: "em"
+  }
+};
+const table = {
+  /* 1 */
+  textIndent: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  ...import_presets.borders,
+  /* 2 */
+  borderTopColor: {
+    type: "keyword",
+    value: "inherit"
+  },
+  borderRightColor: {
+    type: "keyword",
+    value: "inherit"
+  },
+  borderBottomColor: {
+    type: "keyword",
+    value: "inherit"
+  },
+  borderLeftColor: {
+    type: "keyword",
+    value: "inherit"
+  },
+  boxSizing
+};
+const buttonBase = {
+  /* 1 */
+  fontFamily: {
+    type: "keyword",
+    value: "inherit"
+  },
+  fontSize: {
+    type: "unit",
+    value: 100,
+    unit: "%"
+  },
+  lineHeight: {
+    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"
+  },
+  boxSizing,
+  ...import_presets.borders
+};
+const input = buttonBase;
+const optgroup = buttonBase;
+const textarea = buttonBase;
+const button = {
+  ...buttonBase,
+  textTransform: {
+    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"
+  },
+  boxSizing,
+  ...import_presets.borders
+};
+const progress = {
+  verticalAlign: {
+    type: "keyword",
+    value: "baseline"
+  },
+  boxSizing,
+  ...import_presets.borders
+};
+const summary = {
+  display: {
+    type: "keyword",
+    value: "list-item"
+  },
+  boxSizing,
+  ...import_presets.borders
+};

package/lib/cjs/css/presets.js

@@ -0,0 +1,61 @@
+"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 presets_exports = {};
+__export(presets_exports, {
+  borders: () => borders
+});
+module.exports = __toCommonJS(presets_exports);
+const borders = {
+  borderTopColor: {
+    type: "keyword",
+    value: "currentColor"
+  },
+  borderRightColor: {
+    type: "keyword",
+    value: "currentColor"
+  },
+  borderBottomColor: {
+    type: "keyword",
+    value: "currentColor"
+  },
+  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"
+  }
+};

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

@@ -0,0 +1,62 @@
+"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 style_rules_exports = {};
+__export(style_rules_exports, {
+  getStyleRules: () => getStyleRules
+});
+module.exports = __toCommonJS(style_rules_exports);
+const getStyleRules = (styles, styleSourceSelections) => {
+  if (styles === void 0 || styleSourceSelections === void 0) {
+    return [];
+  }
+  const stylesByStyleSourceId = /* @__PURE__ */ new Map();
+  for (const styleDecl of styles.values()) {
+    const { styleSourceId } = styleDecl;
+    let styleSourceStyles = stylesByStyleSourceId.get(styleSourceId);
+    if (styleSourceStyles === void 0) {
+      styleSourceStyles = [];
+      stylesByStyleSourceId.set(styleSourceId, styleSourceStyles);
+    }
+    styleSourceStyles.push(styleDecl);
+  }
+  const styleRules = [];
+  for (const { instanceId, values } of styleSourceSelections.values()) {
+    const styleRuleByBreakpointId = /* @__PURE__ */ new Map();
+    for (const styleSourceId of values) {
+      const styleSourceStyles = stylesByStyleSourceId.get(styleSourceId);
+      if (styleSourceStyles === void 0) {
+        continue;
+      }
+      for (const { breakpointId, property, value } of styleSourceStyles) {
+        let styleRule = styleRuleByBreakpointId.get(breakpointId);
+        if (styleRule === void 0) {
+          styleRule = {
+            instanceId,
+            breakpointId,
+            style: {}
+          };
+          styleRuleByBreakpointId.set(breakpointId, styleRule);
+        }
+        styleRule.style[property] = value;
+      }
+    }
+    styleRules.push(...styleRuleByBreakpointId.values());
+  }
+  return styleRules;
+};

package/lib/cjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/lib/cjs/{props.cjs → props.js}

@@ -18,15 +18,19 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var props_exports = {};
 __export(props_exports, {
+  getInstanceIdFromComponentProps: () => getInstanceIdFromComponentProps,
   getPropsByInstanceId: () => getPropsByInstanceId,
+  resolveUrlProp: () => resolveUrlProp,
   useInstanceProps: () => useInstanceProps,
-  usePropAsset: () => usePropAsset
+  usePropAsset: () => usePropAsset,
+  usePropUrl: () => usePropUrl
 });
 module.exports = __toCommonJS(props_exports);
 var import_react = require("react");
 var import_nanostores = require("nanostores");
 var import_react2 = require("@nanostores/react");
 var import_context = require("./context");
+var import_webstudio_component = require("./tree/webstudio-component");
 const getPropsByInstanceId = (props) => {
   const propsByInstanceId = /* @__PURE__ */ new Map();
   for (const prop of props.values()) {
@@ -61,7 +65,7 @@ const usePropAsset = (instanceId, name) => {
       (propsByInstanceId, assets) => {
         const instanceProps = propsByInstanceId.get(instanceId);
         if (instanceProps === void 0) {
-          return void 0;
+          return;
         }
         for (const prop of instanceProps) {
           if (prop.type === "asset" && prop.name === name) {
@@ -75,3 +79,40 @@ const usePropAsset = (instanceId, name) => {
   const asset = (0, import_react2.useStore)(assetStore);
   return asset;
 };
+const resolveUrlProp = (instanceId, name, propsByInstanceId, pages) => {
+  const instanceProps = propsByInstanceId.get(instanceId);
+  if (instanceProps === void 0) {
+    return;
+  }
+  for (const prop of instanceProps) {
+    if (prop.name !== name) {
+      continue;
+    }
+    if (prop.type === "page") {
+      return pages.get(prop.value);
+    }
+    if (prop.type === "string") {
+      for (const page of pages.values()) {
+        if (page.path === prop.value) {
+          return page;
+        }
+      }
+      return prop.value;
+    }
+    return;
+  }
+};
+const usePropUrl = (instanceId, name) => {
+  const { propsByInstanceIdStore, pagesStore } = (0, import_react.useContext)(import_context.ReactSdkContext);
+  const pageStore = (0, import_react.useMemo)(
+    () => (0, import_nanostores.computed)(
+      [propsByInstanceIdStore, pagesStore],
+      (propsByInstanceId, pages) => resolveUrlProp(instanceId, name, propsByInstanceId, pages)
+    ),
+    [propsByInstanceIdStore, pagesStore, instanceId, name]
+  );
+  return (0, import_react2.useStore)(pageStore);
+};
+const getInstanceIdFromComponentProps = (props) => {
+  return props[import_webstudio_component.idAttribute];
+};

package/lib/cjs/pubsub/{create.cjs → create.js}

@@ -1,9 +1,7 @@
 "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)
@@ -17,30 +15,23 @@ 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 create_exports = {};
 __export(create_exports, {
   createPubsub: () => createPubsub
 });
 module.exports = __toCommonJS(create_exports);
-var import_mitt = __toESM(require("mitt"), 1);
+var import_nanoevents = require("nanoevents");
 var import_react = require("react");
+var import_raf_queue = require("./raf-queue");
 const createPubsub = () => {
-  const emitter = (0, import_mitt.default)();
+  const emitter = (0, import_nanoevents.createNanoEvents)();
   if (typeof window === "object") {
     window.addEventListener(
       "message",
       (event) => {
         if (typeof event.data?.type === "string") {
-          emitter.emit(event.data.type, event.data.payload);
+          (0, import_raf_queue.batchUpdate)(() => emitter.emit(event.data.type, event.data.payload));
         }
       },
       false
@@ -77,31 +68,11 @@ const createPubsub = () => {
      */
     useSubscribe(type, onAction) {
       (0, import_react.useEffect)(() => {
-        emitter.on(type, onAction);
-        return () => {
-          emitter.off(type, onAction);
-        };
+        return emitter.on(type, onAction);
       }, [type, onAction]);
     },
-    useSubscribeAll(onAction) {
-      (0, import_react.useEffect)(() => {
-        emitter.on("*", onAction);
-        return () => {
-          emitter.off("*", onAction);
-        };
-      }, [onAction]);
-    },
     subscribe(type, onAction) {
-      emitter.on(type, onAction);
-      return () => {
-        emitter.off(type, onAction);
-      };
-    },
-    subscribeAll(onAction) {
-      emitter.on("*", onAction);
-      return () => {
-        emitter.off("*", onAction);
-      };
+      return emitter.on(type, onAction);
     }
   };
 };

package/lib/cjs/pubsub/raf-queue.js

@@ -0,0 +1,45 @@
+"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 raf_queue_exports = {};
+__export(raf_queue_exports, {
+  batchUpdate: () => batchUpdate
+});
+module.exports = __toCommonJS(raf_queue_exports);
+var import_react_dom = require("react-dom");
+let handle;
+let updateQueue = [];
+const processUpdates = (updates) => {
+  (0, import_react_dom.unstable_batchedUpdates)(() => {
+    for (const update of updates) {
+      update();
+    }
+  });
+};
+const batchUpdate = (update) => {
+  updateQueue.push(update);
+  if (handle !== void 0) {
+    return;
+  }
+  handle = requestAnimationFrame(() => {
+    const updates = updateQueue;
+    updateQueue = [];
+    handle = void 0;
+    processUpdates(updates);
+  });
+};

package/lib/cjs/tree/{create-elements-tree.cjs → create-elements-tree.js}

@@ -31,6 +31,7 @@ const createElementsTree = ({
   instance,
   propsByInstanceIdStore,
   assetsStore,
+  pagesStore,
   Component,
   getComponent
 }) => {
@@ -55,7 +56,13 @@ const createElementsTree = ({
     ],
     getComponent
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.ReactSdkContext.Provider, { value: { propsByInstanceIdStore, assetsStore }, children: root });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_context.ReactSdkContext.Provider,
+    {
+      value: { propsByInstanceIdStore, assetsStore, pagesStore },
+      children: root
+    }
+  );
 };
 const createInstanceChildrenElements = ({
   instanceSelector,

package/lib/cjs/tree/{root.cjs → root.js}

@@ -75,6 +75,7 @@ const InstanceRoot = ({
       (0, import_props.getPropsByInstanceId)(new Map(data.build.props))
     ),
     assetsStore: (0, import_nanostores.atom)(new Map(data.assets.map((asset) => [asset.id, asset]))),
+    pagesStore: (0, import_nanostores.atom)(new Map(data.pages.map((page) => [page.id, page]))),
     Component: Component ?? import_webstudio_component.WebstudioComponent,
     getComponent
   });