@makeswift/runtime 0.9.0 → 0.9.1

package/dist/index.cjs.js

@@ -35,15 +35,11 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var _e;
 var React = require("react");
 var withSelector = require("use-sync-external-store/shim/with-selector");
 var dynamic = require("next/dynamic");
 var reactPage = require("./react-page.cjs.js");
 var actions = require("./actions.cjs.js");
-var css = require("@emotion/css");
-var serialize = require("@emotion/serialize");
-var utils = require("@emotion/utils");
 var jsxRuntime = require("react/jsx-runtime");
 var textInput = require("./text-input.cjs.js");
 var combobox = require("./combobox.cjs.js");
@@ -55,8 +51,12 @@ var shim = require("use-sync-external-store/shim");
 var redux = require("redux");
 var thunk = require("redux-thunk");
 var types = require("./types.cjs.js");
+var deepEqual = require("./deepEqual.cjs.js");
 var boxModels = require("./box-models.cjs.js");
 var ColorHelper = require("color");
+var css = require("@emotion/css");
+require("@emotion/serialize");
+require("@emotion/utils");
 var scrollIntoView = require("scroll-into-view-if-needed");
 var reactDom = require("react-dom");
 var parse = require("html-react-parser");
@@ -106,43 +106,6 @@ var createEmotionServer__default = /* @__PURE__ */ _interopDefaultLegacy(createE
 var NextDocument__default = /* @__PURE__ */ _interopDefaultLegacy(NextDocument);
 var Cors__default = /* @__PURE__ */ _interopDefaultLegacy(Cors);
 var ipsum__default = /* @__PURE__ */ _interopDefaultLegacy(ipsum);
-function is(x, y) {
-  if (x === y)
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  return x !== x && y !== y;
-}
-const { hasOwnProperty: hasOwnProperty$1 } = Object.prototype;
-const shallowEqual = (a, b) => {
-  if (is(a, b))
-    return true;
-  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
-    return false;
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length)
-    return false;
-  for (let i = 0; i < keysA.length; i += 1) {
-    if (!hasOwnProperty$1.call(b, keysA[i]) || !is(a[keysA[i]], b[keysA[i]]))
-      return false;
-  }
-  return true;
-};
-const { hasOwnProperty } = Object.prototype;
-const deepEqual = (a, b) => {
-  if (shallowEqual(a, b))
-    return true;
-  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
-    return false;
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length)
-    return false;
-  for (let i = 0; i < keysA.length; i += 1) {
-    if (!hasOwnProperty.call(b, keysA[i]) || !deepEqual(a[keysA[i]], b[keysA[i]]))
-      return false;
-  }
-  return true;
-};
 const SCRIPT_TAG = "script";
 function BodySnippet({
   code,
@@ -220,7 +183,7 @@ function reducer$1(state = getInitialState(), action) {
     }
     case actions.ActionTypes.CHANGE_API_RESOURCE: {
       const existingApiResource = getAPIResource$1(state, action.payload.resource.__typename, action.payload.resource.id);
-      if (deepEqual(existingApiResource, action.payload.resource))
+      if (deepEqual.deepEqual(existingApiResource, action.payload.resource))
         return state;
       return new Map(state).set(action.payload.resource.__typename, new Map(state.get(action.payload.resource.__typename)).set(action.payload.resource.id, action.payload.resource));
     }
@@ -611,7 +574,7 @@ function Page$1({
       return;
     const oldSnippets = snippets.map(filterUsedSnippetProperties);
     const newSnippets = cachedPage.snippets.map(filterUsedSnippetProperties);
-    if (deepEqual(newSnippets, oldSnippets))
+    if (deepEqual.deepEqual(newSnippets, oldSnippets))
       return;
     setSnippets(cachedPage.snippets);
   }, [cachedPage]);
@@ -1185,7 +1148,7 @@ async function fonts(_req, res, { getFonts } = {}) {
   const fonts2 = (_a = await (getFonts == null ? void 0 : getFonts())) != null ? _a : [];
   return res.json(fonts2);
 }
-const version = "0.9.0";
+const version = "0.9.1";
 async function handler(req, res, { apiKey, unstable_siteVersions }) {
   if (req.query.secret !== apiKey) {
     return res.status(401).json({ message: "Unauthorized" });
@@ -2483,19 +2446,6 @@ function registerBuiltinComponents(runtime) {
     unregisterVideoComponent();
   };
 }
-const isServer = typeof window === "undefined";
-const useInsertionEffectSpecifier = "useInsertionEffect";
-const useInsertionEffect = (_e = React__namespace[useInsertionEffectSpecifier]) != null ? _e : React__namespace.useLayoutEffect;
-function useStyle(style) {
-  const serialized = serialize.serializeStyles([style], css.cache.registered);
-  utils.registerStyles(css.cache, serialized, false);
-  useInsertionEffect(() => {
-    utils.insertStyles(css.cache, serialized, false);
-  });
-  if (isServer)
-    utils.insertStyles(css.cache, serialized, false);
-  return `${css.cache.key}-${serialized.name}`;
-}
 var _path;
 function _extends() {
   _extends = Object.assign || function(target) {
@@ -2528,7 +2478,7 @@ const FallbackComponent = React.forwardRef(function FallbackComponent2({
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     ref,
-    className: useStyle({
+    className: reactPage.useStyle({
       width: "100%",
       height: 54,
       backgroundColor: "#fcedf2",
@@ -2639,8 +2589,8 @@ function useTable(tableId) {
   }, [client, tableId]);
   return table;
 }
-function mapSideColor(swatches, _f) {
-  var _g = _f, { color } = _g, restOfSide = __objRest(_g, ["color"]);
+function mapSideColor(swatches, _e) {
+  var _f = _e, { color } = _f, restOfSide = __objRest(_f, ["color"]);
   return __spreadProps(__spreadValues({}, restOfSide), {
     color: color && {
       alpha: color.alpha,
@@ -2958,7 +2908,7 @@ const defaultPadding = {
   paddingBottom: 0,
   paddingLeft: 0
 };
-function useStyleControlCssObject(style, controlDefinition) {
+function useStyleControlCssObject$1(style, controlDefinition) {
   const { properties } = controlDefinition.config;
   return __spreadValues(__spreadValues({}, properties.includes(reactPage.StyleControlProperty.Width) && {
     maxWidth: "100%"
@@ -2970,14 +2920,14 @@ function useStyleControlCssObject(style, controlDefinition) {
     style == null ? void 0 : style.borderRadius,
     style == null ? void 0 : style.textStyle
   ], ([width, margin, padding, border, borderRadius, textStyle]) => {
-    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(reactPage.StyleControlProperty.Width) && {
       width: (_a = widthToString(width)) != null ? _a : "100%"
     }), properties.includes(reactPage.StyleControlProperty.Margin) && marginPropertyDataToStyle(margin != null ? margin : defaultMargin, defaultMargin)), properties.includes(reactPage.StyleControlProperty.Padding) && paddingPropertyDataToStyle(padding != null ? padding : defaultPadding, defaultPadding)), properties.includes(reactPage.StyleControlProperty.Border) && {
       borderTop: (_b = borderSideToString2(border == null ? void 0 : border.borderTop)) != null ? _b : "0 solid black",
       borderRight: (_c = borderSideToString2(border == null ? void 0 : border.borderRight)) != null ? _c : "0 solid black",
       borderBottom: (_d = borderSideToString2(border == null ? void 0 : border.borderBottom)) != null ? _d : "0 solid black",
-      borderLeft: (_e2 = borderSideToString2(border == null ? void 0 : border.borderLeft)) != null ? _e2 : "0 solid black"
+      borderLeft: (_e = borderSideToString2(border == null ? void 0 : border.borderLeft)) != null ? _e : "0 solid black"
     }), properties.includes(reactPage.StyleControlProperty.BorderRadius) && {
       borderTopLeftRadius: (_f = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopLeftRadius)) != null ? _f : 0,
       borderTopRightRadius: (_g = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopRightRadius)) != null ? _g : 0,
@@ -3009,9 +2959,9 @@ function useStyleControlCssObject(style, controlDefinition) {
   }
 }
 function useFormattedStyle(styleControlData, controlDefinition, control) {
-  const style = useStyleControlCssObject(styleControlData, controlDefinition);
+  const style = useStyleControlCssObject$1(styleControlData, controlDefinition);
   const guid = React.useId().replaceAll(":", "");
-  const styleClassName = useStyle(style);
+  const styleClassName = reactPage.useStyle(style);
   const classNames = `${styleClassName} ${guid}`;
   React.useEffect(() => {
     let currentBoxModel = null;
@@ -3020,7 +2970,7 @@ function useFormattedStyle(styleControlData, controlDefinition, control) {
         return;
       const element = document.querySelector(`.${guid}`);
       const measuredBoxModel = element == null ? null : boxModels.getBox(element);
-      if (!deepEqual(currentBoxModel, measuredBoxModel)) {
+      if (!deepEqual.deepEqual(currentBoxModel, measuredBoxModel)) {
         currentBoxModel = measuredBoxModel;
         control.changeBoxModel(currentBoxModel);
       }
@@ -3191,10 +3141,11 @@ const EditableText = forwardNextDynamicRef((patch) => dynamic__default["default"
 const ReadOnlyText = forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
   return require("./ReadOnlyTextV2.cjs.js");
 }))));
-function useRichTextV2(data, control) {
+function useRichTextV2(data, definition, control) {
   const isPreview = useIsPreview();
   return isPreview ? /* @__PURE__ */ jsxRuntime.jsx(EditableText, {
     text: data,
+    definition,
     control
   }) : /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyText, {
     text: data,
@@ -3226,7 +3177,7 @@ function pollBoxModel({
   let currentBoxModel = null;
   const handleAnimationFrameRequest = () => {
     const measuredBoxModel = boxModels.getBox(element);
-    if (!deepEqual(currentBoxModel, measuredBoxModel)) {
+    if (!deepEqual.deepEqual(currentBoxModel, measuredBoxModel)) {
       currentBoxModel = measuredBoxModel;
       onBoxModelChange(currentBoxModel);
     }
@@ -3256,13 +3207,13 @@ function useSlot(data, control) {
     }, element.key))
   });
 }
-function Slot(_h) {
-  var _i = _h, {
+function Slot(_g) {
+  var _h = _g, {
     as,
     control,
     children,
     className
-  } = _i, restOfProps = __objRest(_i, [
+  } = _h, restOfProps = __objRest(_h, [
     "as",
     "control",
     "children",
@@ -3270,7 +3221,7 @@ function Slot(_h) {
   ]);
   const As = as != null ? as : "div";
   const [element, setElement] = React.useState(null);
-  const baseClassName = useStyle({
+  const baseClassName = reactPage.useStyle({
     display: "flex",
     flexWrap: "wrap",
     width: "100%"
@@ -3291,15 +3242,15 @@ function Slot(_h) {
 }
 Slot.Placeholder = SlotPlaceholder;
 Slot.Item = SlotItem;
-function SlotItem(_j) {
-  var _k = _j, {
+function SlotItem(_i) {
+  var _j = _i, {
     as,
     control,
     grid,
     index,
     children,
     className
-  } = _k, restOfProps = __objRest(_k, [
+  } = _j, restOfProps = __objRest(_j, [
     "as",
     "control",
     "grid",
@@ -3309,7 +3260,7 @@ function SlotItem(_j) {
   ]);
   const As = as != null ? as : "div";
   const [element, setElement] = React.useState(null);
-  const baseClassName = useStyle(__spreadValues({
+  const baseClassName = reactPage.useStyle(__spreadValues({
     display: "flex"
   }, useResponsiveStyle([grid], ([{
     count = 12,
@@ -3353,7 +3304,7 @@ function SlotPlaceholder({
   }, [element, control]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ref: setElement,
-    className: useStyle({
+    className: reactPage.useStyle({
       width: "100%",
       background: "rgba(161, 168, 194, 0.18)",
       height: "80px"
@@ -3362,7 +3313,7 @@ function SlotPlaceholder({
       xmlns: "http://www.w3.org/2000/svg",
       width: "100%",
       height: "100%",
-      className: useStyle({
+      className: reactPage.useStyle({
         overflow: "visible",
         padding: 8
       }),
@@ -3381,6 +3332,20 @@ function SlotPlaceholder({
     })
   });
 }
+function useStyleControlCssObject(styleControlData, controlDefinition) {
+  var _a;
+  const breakpoints = useBreakpoints();
+  return __spreadValues(__spreadValues({}, controlDefinition.config.getStyle((_a = state_breakpoints.findBreakpointOverride(breakpoints, styleControlData, state_breakpoints.getBaseBreakpoint(breakpoints).id)) == null ? void 0 : _a.value)), breakpoints.reduce((styles, breakpoint) => {
+    var _a2;
+    return __spreadProps(__spreadValues({}, styles), {
+      [state_breakpoints.getBreakpointMediaQuery(breakpoint)]: controlDefinition.config.getStyle((_a2 = state_breakpoints.findBreakpointOverride(breakpoints, styleControlData, breakpoint.id)) == null ? void 0 : _a2.value)
+    });
+  }, {}));
+}
+function useFormattedStyleV2(styleControlData, controlDefinition) {
+  const styles = useStyleControlCssObject(styleControlData, controlDefinition);
+  return reactPage.useStyle(styles);
+}
 function useTextAreaValue(data, definition) {
   return data != null ? data : definition.config.defaultValue;
 }
@@ -3477,7 +3442,7 @@ function ControlValue({
     case reactPage.RichTextV2ControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useRichTextV2,
-        parameters: [data, control],
+        parameters: [data, definition, control],
         children: (value) => children(value)
       }, definition.type);
     case reactPage.StyleControlType:
@@ -3486,29 +3451,35 @@ function ControlValue({
         parameters: [data, definition, control],
         children: (value) => children(value)
       }, definition.type);
+    case reactPage.StyleV2ControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useFormattedStyleV2,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
     default:
       return children(data);
   }
 }
 function useWidthStyle(value, descriptor) {
-  return useStyle(useResponsiveWidth(value, descriptor.options.defaultValue));
+  return reactPage.useStyle(useResponsiveWidth(value, descriptor.options.defaultValue));
 }
 function usePaddingStyle(value) {
-  return useStyle(useResponsivePadding(value));
+  return reactPage.useStyle(useResponsivePadding(value));
 }
 function useMarginStyle(value) {
-  return useStyle(useResponsiveMargin(value));
+  return reactPage.useStyle(useResponsiveMargin(value));
 }
 function useBorderRadiusStyle(value) {
-  return useStyle(useResponsiveBorderRadius(value));
+  return reactPage.useStyle(useResponsiveBorderRadius(value));
 }
 function useShadowsStyle(value) {
   const shadowValue = useBoxShadow(value);
-  return useStyle(useResponsiveShadow(shadowValue != null ? shadowValue : void 0));
+  return reactPage.useStyle(useResponsiveShadow(shadowValue != null ? shadowValue : void 0));
 }
 function useBorderStyle(value) {
   const borderData = useBorder(value);
-  return useStyle(useResponsiveBorder(borderData != null ? borderData : void 0));
+  return reactPage.useStyle(useResponsiveBorder(borderData != null ? borderData : void 0));
 }
 function PropsValue({
   element,
@@ -3538,6 +3509,7 @@ function PropsValue({
       case reactPage.ShapeControlType:
       case reactPage.ListControlType:
       case reactPage.LinkControlType:
+      case reactPage.StyleV2ControlType:
         return /* @__PURE__ */ jsxRuntime.jsx(ControlValue, {
           definition: descriptor,
           data: props[propName],
@@ -3570,7 +3542,7 @@ function PropsValue({
         const control = (_c = propControllers == null ? void 0 : propControllers[propName]) != null ? _c : null;
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useRichTextV2,
-          parameters: [props[propName], control],
+          parameters: [props[propName], descriptor, control],
           children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
             [propName]: value
           }))
@@ -3831,10 +3803,10 @@ const PreviewProvider = dynamic__default["default"](() => Promise.resolve().then
 const LiveProvider = dynamic__default["default"](() => Promise.resolve().then(function() {
   return require("./LiveProvider.cjs.js");
 }));
-function RuntimeProvider(_l) {
-  var _m = _l, {
+function RuntimeProvider(_k) {
+  var _l = _k, {
     preview
-  } = _m, props = __objRest(_m, [
+  } = _l, props = __objRest(_l, [
     "preview"
   ]);
   return preview ? /* @__PURE__ */ jsxRuntime.jsx(PreviewProvider, __spreadValues({}, props)) : /* @__PURE__ */ jsxRuntime.jsx(LiveProvider, __spreadValues({}, props));
@@ -4037,6 +4009,7 @@ const DocumentReference = React.memo(React.forwardRef(function DocumentReference
 }));
 exports.Alignments = Alignments;
 exports.Contrasts = Contrasts;
+exports.ControlValue = ControlValue;
 exports.DEFAULT_BOX_ANIMATE_DELAY = DEFAULT_BOX_ANIMATE_DELAY;
 exports.DEFAULT_BOX_ANIMATE_DURATION = DEFAULT_BOX_ANIMATE_DURATION;
 exports.DEFAULT_BOX_ANIMATE_TYPE = DEFAULT_BOX_ANIMATE_TYPE;
@@ -4062,7 +4035,6 @@ exports.Shapes = Shapes;
 exports.Sizes = Sizes;
 exports.StoreContext = StoreContext;
 exports.colorToString = colorToString;
-exports.deepEqual = deepEqual;
 exports.forwardNextDynamicRef = forwardNextDynamicRef;
 exports.getServerSideProps = getServerSideProps;
 exports.getStaticPaths = getStaticPaths;
@@ -4086,7 +4058,6 @@ exports.useResponsiveGridItem = useResponsiveGridItem;
 exports.useResponsiveStyle = useResponsiveStyle;
 exports.useResponsiveTextStyle = useResponsiveTextStyle;
 exports.useResponsiveWidth = useResponsiveWidth;
-exports.useStyle = useStyle;
 exports.useSwatches = useSwatches;
 exports.useTable = useTable;
 exports.useTypography = useTypography;