@makeswift/runtime 0.5.5 → 0.6.0

package/dist/index.es.js

@@ -36,25 +36,26 @@ var __publicField = (obj, key, value) => {
 };
 var _c;
 import * as React from "react";
-import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useCallback, Component, useImperativeHandle, Suspense } from "react";
+import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useCallback, useImperativeHandle, Component, Suspense } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
 import dynamic from "next/dynamic";
-import { g as getPropControllerDescriptors, i as isElementReference, a as getElementSwatchIds, b as getFileIds, d as getTypographyIds, e as getTableIds, f as getPageIds, h as getElementChildren, j as createDocumentReference, M as MakeswiftComponentType, k as getBorderSwatchIds, l as isNonNullable, m as getBoxShadowsSwatchIds, n as getResponsiveColorSwatchIds, o as getComponentPropControllerDescriptors, p as getPropControllers, q as configureStore$1, r as getDocument, s as getElementId, t as getIsInBuilder, u as copyElementTree, v as getReactComponent } from "./constants.es.js";
+import { g as getPropControllerDescriptors, i as isElementReference, a as getElementSwatchIds, b as getFileIds, d as getTypographyIds, e as getTableIds, f as getPageIds, h as getElementChildren, j as createDocumentReference, M as MakeswiftComponentType, k as getBorderSwatchIds, l as isNonNullable, m as getBoxShadowsSwatchIds, n as getResponsiveColorSwatchIds, o as getComponentPropControllerDescriptors, p as getPropControllers, q as isPropControllersHandle, r as configureStore$1, s as getDocument, t as getElementId, u as getIsInBuilder, v as getIsPreview, w as copyElementTree, x as getReactComponent } from "./constants.es.js";
 import { A as ActionTypes, f as introspectedResourcesFulfilled, g as apiResourceFulfilled, t as typographiesFulfilled, h as registerComponentHandleEffect, j as mountComponentEffect, k as registerComponentEffect, l as registerReactComponentEffect } from "./actions.es.js";
 import { cache, cx } from "@emotion/css";
+import { serializeStyles } from "@emotion/serialize";
+import { registerStyles, insertStyles } from "@emotion/utils";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { T as Types, E as ElementID, B as Backgrounds, W as Width, h as ResponsiveIconRadioGroup, M as Margin, P as Padding, i as Border, j as BorderRadius, k as Shadows, G as GapY, l as GapX, m as ResponsiveSelect, n as ResponsiveNumber, o as Checkbox, p as Grid, q as TextInput, L as Link, r as ResponsiveColor, s as TextStyle, t as Images, N as Number$1, D as Date$1, F as Font, u as ResponsiveLength, v as TextArea, w as Table, x as TableFormFields, y as Image, z as ResponsiveOpacity, A as NavigationLinks, H as SocialLinks, J as RichText, V as Video, K as StyleControlProperty, O as ImageControlValueFormat, I as ImageControlType, C as ColorControlType, Q as BorderPropControllerFormat, U as ShadowsPropControllerFormat, X as BorderRadiusPropControllerFormat, Y as MarginPropControllerFormat, Z as PaddingPropControllerFormat, _ as WidthPropControllerFormat, S as SlotControlType, a as StyleControlType } from "./slot.es.js";
 import { S as SelectControlType, T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
 import { C as ComboboxControlType } from "./combobox.es.js";
 import { S as ShapeControlType, L as ListControlType, b as LinkControlType } from "./control.es.js";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
-import { KeyUtils } from "slate";
 import { createStore, applyMiddleware } from "redux";
 import thunk from "redux-thunk";
 import { A as APIResourceType } from "./types.es.js";
 import ColorHelper from "color";
 import scrollIntoView from "scroll-into-view-if-needed";
-import { g as getBox } from "./box-models.es.js";
+import { g as getBox, i as isMeasurable, m as measure } from "./box-models.es.js";
 import { findDOMNode } from "react-dom";
 import parse from "html-react-parser";
 import Head from "next/head";
@@ -621,7 +622,6 @@ class MakeswiftClient {
   async prefetch(element) {
     const introspectionData = await introspect(element, this, storeContextDefaultValue);
     await this.makeswiftApiClient.dispatch(fetchIntrospectedResources(introspectionData));
-    KeyUtils.resetGenerator();
     return getSerializedState(this.makeswiftApiClient.getState());
   }
   readSwatch(swatchId) {
@@ -1015,7 +1015,6 @@ if (originalUrl.searchParams.has(searchParamName)) {
 class Document$1 extends NextDocument {
   static async getInitialProps(ctx) {
     const initialProps = await NextDocument.getInitialProps(ctx);
-    KeyUtils.resetGenerator();
     const {
       extractCritical
     } = createEmotionServer(cache);
@@ -1049,7 +1048,7 @@ class Document$1 extends NextDocument {
     });
   }
 }
-const version = "0.5.5";
+const version = "0.6.0";
 function isErrorWithMessage(error) {
   return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
 }
@@ -2306,268 +2305,9 @@ function registerBuiltinComponents(runtime) {
     unregisterRootComponent();
     unregisterSocialLinksComponent();
     unregisterTextComponent();
-    unregisterTextComponent();
     unregisterVideoComponent();
   };
 }
-function murmur2(str) {
-  var h = 0;
-  var k, i = 0, len = str.length;
-  for (; len >= 4; ++i, len -= 4) {
-    k = str.charCodeAt(i) & 255 | (str.charCodeAt(++i) & 255) << 8 | (str.charCodeAt(++i) & 255) << 16 | (str.charCodeAt(++i) & 255) << 24;
-    k = (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16);
-    k ^= k >>> 24;
-    h = (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16) ^ (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-  }
-  switch (len) {
-    case 3:
-      h ^= (str.charCodeAt(i + 2) & 255) << 16;
-    case 2:
-      h ^= (str.charCodeAt(i + 1) & 255) << 8;
-    case 1:
-      h ^= str.charCodeAt(i) & 255;
-      h = (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-  }
-  h ^= h >>> 13;
-  h = (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-  return ((h ^ h >>> 15) >>> 0).toString(36);
-}
-var unitlessKeys = {
-  animationIterationCount: 1,
-  borderImageOutset: 1,
-  borderImageSlice: 1,
-  borderImageWidth: 1,
-  boxFlex: 1,
-  boxFlexGroup: 1,
-  boxOrdinalGroup: 1,
-  columnCount: 1,
-  columns: 1,
-  flex: 1,
-  flexGrow: 1,
-  flexPositive: 1,
-  flexShrink: 1,
-  flexNegative: 1,
-  flexOrder: 1,
-  gridRow: 1,
-  gridRowEnd: 1,
-  gridRowSpan: 1,
-  gridRowStart: 1,
-  gridColumn: 1,
-  gridColumnEnd: 1,
-  gridColumnSpan: 1,
-  gridColumnStart: 1,
-  msGridRow: 1,
-  msGridRowSpan: 1,
-  msGridColumn: 1,
-  msGridColumnSpan: 1,
-  fontWeight: 1,
-  lineHeight: 1,
-  opacity: 1,
-  order: 1,
-  orphans: 1,
-  tabSize: 1,
-  widows: 1,
-  zIndex: 1,
-  zoom: 1,
-  WebkitLineClamp: 1,
-  fillOpacity: 1,
-  floodOpacity: 1,
-  stopOpacity: 1,
-  strokeDasharray: 1,
-  strokeDashoffset: 1,
-  strokeMiterlimit: 1,
-  strokeOpacity: 1,
-  strokeWidth: 1
-};
-function memoize(fn) {
-  var cache2 = /* @__PURE__ */ Object.create(null);
-  return function(arg) {
-    if (cache2[arg] === void 0)
-      cache2[arg] = fn(arg);
-    return cache2[arg];
-  };
-}
-var hyphenateRegex = /[A-Z]|^ms/g;
-var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
-var isCustomProperty = function isCustomProperty2(property) {
-  return property.charCodeAt(1) === 45;
-};
-var isProcessableValue = function isProcessableValue2(value) {
-  return value != null && typeof value !== "boolean";
-};
-var processStyleName = /* @__PURE__ */ memoize(function(styleName) {
-  return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, "-$&").toLowerCase();
-});
-var processStyleValue = function processStyleValue2(key, value) {
-  switch (key) {
-    case "animation":
-    case "animationName": {
-      if (typeof value === "string") {
-        return value.replace(animationRegex, function(match, p1, p2) {
-          cursor = {
-            name: p1,
-            styles: p2,
-            next: cursor
-          };
-          return p1;
-        });
-      }
-    }
-  }
-  if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === "number" && value !== 0) {
-    return value + "px";
-  }
-  return value;
-};
-function handleInterpolation(mergedProps, registered, interpolation) {
-  if (interpolation == null) {
-    return "";
-  }
-  if (interpolation.__emotion_styles !== void 0) {
-    return interpolation;
-  }
-  switch (typeof interpolation) {
-    case "boolean": {
-      return "";
-    }
-    case "object": {
-      if (interpolation.anim === 1) {
-        cursor = {
-          name: interpolation.name,
-          styles: interpolation.styles,
-          next: cursor
-        };
-        return interpolation.name;
-      }
-      if (interpolation.styles !== void 0) {
-        var next = interpolation.next;
-        if (next !== void 0) {
-          while (next !== void 0) {
-            cursor = {
-              name: next.name,
-              styles: next.styles,
-              next: cursor
-            };
-            next = next.next;
-          }
-        }
-        var styles = interpolation.styles + ";";
-        return styles;
-      }
-      return createStringFromObject(mergedProps, registered, interpolation);
-    }
-    case "function": {
-      if (mergedProps !== void 0) {
-        var previousCursor = cursor;
-        var result = interpolation(mergedProps);
-        cursor = previousCursor;
-        return handleInterpolation(mergedProps, registered, result);
-      }
-      break;
-    }
-  }
-  if (registered == null) {
-    return interpolation;
-  }
-  var cached = registered[interpolation];
-  return cached !== void 0 ? cached : interpolation;
-}
-function createStringFromObject(mergedProps, registered, obj) {
-  var string = "";
-  if (Array.isArray(obj)) {
-    for (var i = 0; i < obj.length; i++) {
-      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
-    }
-  } else {
-    for (var _key in obj) {
-      var value = obj[_key];
-      if (typeof value !== "object") {
-        if (registered != null && registered[value] !== void 0) {
-          string += _key + "{" + registered[value] + "}";
-        } else if (isProcessableValue(value)) {
-          string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";";
-        }
-      } else {
-        if (_key === "NO_COMPONENT_SELECTOR" && false) {
-          throw new Error("Component selectors can only be used in conjunction with @emotion/babel-plugin.");
-        }
-        if (Array.isArray(value) && typeof value[0] === "string" && (registered == null || registered[value[0]] === void 0)) {
-          for (var _i = 0; _i < value.length; _i++) {
-            if (isProcessableValue(value[_i])) {
-              string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";";
-            }
-          }
-        } else {
-          var interpolated = handleInterpolation(mergedProps, registered, value);
-          switch (_key) {
-            case "animation":
-            case "animationName": {
-              string += processStyleName(_key) + ":" + interpolated + ";";
-              break;
-            }
-            default: {
-              string += _key + "{" + interpolated + "}";
-            }
-          }
-        }
-      }
-    }
-  }
-  return string;
-}
-var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
-var cursor;
-var serializeStyles = function serializeStyles2(args, registered, mergedProps) {
-  if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && args[0].styles !== void 0) {
-    return args[0];
-  }
-  var stringMode = true;
-  var styles = "";
-  cursor = void 0;
-  var strings = args[0];
-  if (strings == null || strings.raw === void 0) {
-    stringMode = false;
-    styles += handleInterpolation(mergedProps, registered, strings);
-  } else {
-    styles += strings[0];
-  }
-  for (var i = 1; i < args.length; i++) {
-    styles += handleInterpolation(mergedProps, registered, args[i]);
-    if (stringMode) {
-      styles += strings[i];
-    }
-  }
-  labelPattern.lastIndex = 0;
-  var identifierName = "";
-  var match;
-  while ((match = labelPattern.exec(styles)) !== null) {
-    identifierName += "-" + match[1];
-  }
-  var name = murmur2(styles) + identifierName;
-  return {
-    name,
-    styles,
-    next: cursor
-  };
-};
-var isBrowser = true;
-var registerStyles = function registerStyles2(cache2, serialized, isStringTag) {
-  var className = cache2.key + "-" + serialized.name;
-  if ((isStringTag === false || isBrowser === false) && cache2.registered[className] === void 0) {
-    cache2.registered[className] = serialized.styles;
-  }
-};
-var insertStyles = function insertStyles2(cache2, serialized, isStringTag) {
-  registerStyles(cache2, serialized, isStringTag);
-  var className = cache2.key + "-" + serialized.name;
-  if (cache2.inserted[serialized.name] === void 0) {
-    var current = serialized;
-    do {
-      cache2.insert(serialized === current ? "." + className : "", current, cache2.sheet, true);
-      current = current.next;
-    } while (current !== void 0);
-  }
-};
 const isServer = typeof window === "undefined";
 const useInsertionEffectSpecifier = "useInsertionEffect";
 const useInsertionEffect = (_c = React[useInsertionEffectSpecifier]) != null ? _c : React.useLayoutEffect;
@@ -3679,22 +3419,9 @@ function suppressWarningAndFindDomNode(instance) {
   return foundDomNode;
 }
 class FindDomNodeClassComponent extends Component {
-  componentDidMount() {
-    this.setInnerRef(suppressWarningAndFindDomNode(this));
-  }
-  componentDidUpdate() {
-    this.setInnerRef(suppressWarningAndFindDomNode(this));
-  }
-  setInnerRef(current) {
-    const {
-      innerRef
-    } = this.props;
-    if (innerRef == null)
-      return;
-    if (typeof innerRef === "function")
-      innerRef(current);
-    else
-      innerRef.current = current;
+  constructor(props) {
+    super(props);
+    this.props.innerRef.current = () => suppressWarningAndFindDomNode(this);
   }
   render() {
     return /* @__PURE__ */ jsx(Fragment, {
@@ -3703,10 +3430,39 @@ class FindDomNodeClassComponent extends Component {
   }
 }
 const FindDomNode = forwardRef(function FindDomNode2(props, ref) {
+  const findDomNodeRef = useRef(null);
+  useImperativeHandle(ref, () => () => {
+    var _a, _b;
+    return (_b = (_a = findDomNodeRef.current) == null ? void 0 : _a.call(findDomNodeRef)) != null ? _b : null;
+  }, []);
   return /* @__PURE__ */ jsx(FindDomNodeClassComponent, __spreadProps(__spreadValues({}, props), {
-    innerRef: ref
+    innerRef: findDomNodeRef
   }));
 });
+class ElementImperativeHandle {
+  constructor() {
+    __publicField(this, "getCurrent", () => null);
+    __publicField(this, "lastPropControllers", null);
+  }
+  callback(getCurrent) {
+    const current = this.getCurrent();
+    if (current === null)
+      this.setPropControllers(null);
+    else if (this.lastPropControllers !== null)
+      this.setPropControllers(this.lastPropControllers);
+    this.getCurrent = getCurrent;
+  }
+  getBoxModel() {
+    const current = this.getCurrent();
+    return isMeasurable(current) ? measure(current) : null;
+  }
+  setPropControllers(propControllers) {
+    const current = this.getCurrent();
+    if (isPropControllersHandle(current))
+      current.setPropControllers(propControllers);
+    this.lastPropControllers = propControllers;
+  }
+}
 const storeContextDefaultValue = configureStore$1();
 function createReactRuntime(store) {
   return {
@@ -3789,6 +3545,9 @@ function useDocument(documentKey) {
 function useIsInBuilder() {
   return useSelector((state) => getIsInBuilder(state));
 }
+function useIsPreview() {
+  return useSelector((state) => getIsPreview(state));
+}
 function useDispatch() {
   const store = useContext(StoreContext);
   return store.dispatch;
@@ -3810,26 +3569,20 @@ const ElementData = memo(forwardRef(function ElementData2({
   elementData
 }, ref) {
   const Component2 = useComponent(elementData.type);
-  const [handle, setHandle] = useState(null);
-  const [foundDomNode, setFoundDomNode] = useState(null);
-  useImperativeHandle(ref, () => handle != null ? handle : foundDomNode, [handle, foundDomNode]);
   suppressRefWarning(`\`ForwardRef(${ElementData2.name})\``);
   if (Component2 == null) {
     return /* @__PURE__ */ jsx(FallbackComponent, {
-      ref: setHandle,
+      ref,
       text: "Component not found"
     });
   }
   return /* @__PURE__ */ jsx(Suspense, {
-    children: /* @__PURE__ */ jsx(FindDomNode, {
-      ref: setFoundDomNode,
-      children: /* @__PURE__ */ jsx(PropsValue, {
-        element: elementData,
-        children: (props) => /* @__PURE__ */ createElement(Component2, __spreadProps(__spreadValues({}, props), {
-          key: elementData.key,
-          ref: setHandle
-        }))
-      })
+    children: /* @__PURE__ */ jsx(PropsValue, {
+      element: elementData,
+      children: (props) => /* @__PURE__ */ createElement(Component2, __spreadProps(__spreadValues({}, props), {
+        key: elementData.key,
+        ref
+      }))
     })
   });
 }));
@@ -3863,26 +3616,42 @@ const Element = memo(forwardRef(function Element2({
   const elementKey = element.key;
   const dispatch = useDispatch();
   const documentKey = useDocumentKey();
-  const [handle, setHandle] = useState(null);
+  const useFindDomNodeRef = useRef(true);
+  const imperativeHandleRef = useRef(new ElementImperativeHandle());
+  const findDomNodeCallbackRef = useCallback((current) => {
+    if (useFindDomNodeRef.current === true) {
+      imperativeHandleRef.current.callback(() => {
+        var _a;
+        return (_a = current == null ? void 0 : current()) != null ? _a : null;
+      });
+    }
+  }, []);
+  const elementCallbackRef = useCallback((current) => {
+    useFindDomNodeRef.current = false;
+    imperativeHandleRef.current.callback(() => current);
+  }, []);
   const isRegisterElementDisabled = useContext(DisableRegisterElement);
-  useImperativeHandle(ref, () => handle, [handle]);
+  useImperativeHandle(ref, () => imperativeHandleRef.current, []);
   useEffect(() => {
     if (documentKey == null || isRegisterElementDisabled)
       return;
-    return dispatch(registerComponentHandleEffect(documentKey, elementKey, handle));
-  }, [dispatch, documentKey, elementKey, handle, isRegisterElementDisabled]);
+    return dispatch(registerComponentHandleEffect(documentKey, elementKey, imperativeHandleRef.current));
+  }, [dispatch, documentKey, elementKey, isRegisterElementDisabled]);
   useEffect(() => {
     if (documentKey == null || isRegisterElementDisabled)
       return;
     return dispatch(mountComponentEffect(documentKey, elementKey));
   }, [dispatch, documentKey, elementKey, isRegisterElementDisabled]);
-  return isElementReference(element) ? /* @__PURE__ */ jsx(ElementReference, {
-    ref: setHandle,
-    elementReference: element
-  }, elementKey) : /* @__PURE__ */ jsx(ElementData, {
-    ref: setHandle,
-    elementData: element
-  }, elementKey);
+  return /* @__PURE__ */ jsx(FindDomNode, {
+    ref: findDomNodeCallbackRef,
+    children: isElementReference(element) ? /* @__PURE__ */ jsx(ElementReference, {
+      ref: elementCallbackRef,
+      elementReference: element
+    }, elementKey) : /* @__PURE__ */ jsx(ElementData, {
+      ref: elementCallbackRef,
+      elementData: element
+    }, elementKey)
+  });
 }));
 const Document = memo(forwardRef(function Document2({
   document: document2
@@ -3910,5 +3679,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-export { Makeswift as $, Alignments as A, useFile as B, Contrasts as C, DocumentReference as D, Element as E, DEVICES as F, findDeviceOverride as G, serializeStyles as H, insertStyles as I, useTypography as J, useSwatches as K, shallowMergeFallbacks as L, useFiles as M, usePagePathnameSlice as N, useElementId as O, PageProvider as P, deepEqual as Q, RuntimeProvider as R, Shapes as S, storeContextDefaultValue as T, StoreContext as U, MakeswiftProvider as V, MakeswiftClient as W, getStaticPaths as X, getStaticProps as Y, getServerSideProps as Z, Page as _, ReactRuntime as a, PreviewModeScript as a0, Document$1 as a1, MakeswiftApiHandler as a2, forwardNextDynamicRef as a3, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useBoxShadow as k, useResponsiveColor as l, useMediaQuery as m, Page$1 as n, useStyle as o, responsiveWidth as p, responsiveTextStyle as q, responsiveStyle as r, colorToString as s, Sizes as t, useIsInBuilder as u, useFormContext as v, responsiveGridItem as w, useTable as x, useMakeswiftClient as y, Provider as z };
+export { Makeswift as $, Alignments as A, useFile as B, Contrasts as C, DocumentReference as D, Element as E, DEVICES as F, findDeviceOverride as G, forwardNextDynamicRef as H, useIsPreview as I, useFiles as J, useSwatches as K, usePagePathnameSlice as L, useElementId as M, deepEqual as N, storeContextDefaultValue as O, PageProvider as P, StoreContext as Q, RuntimeProvider as R, Shapes as S, MakeswiftProvider as T, useTypography as U, shallowMergeFallbacks as V, MakeswiftClient as W, getStaticPaths as X, getStaticProps as Y, getServerSideProps as Z, Page as _, ReactRuntime as a, PreviewModeScript as a0, Document$1 as a1, MakeswiftApiHandler as a2, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useBoxShadow as k, useResponsiveColor as l, useMediaQuery as m, Page$1 as n, useStyle as o, responsiveWidth as p, responsiveTextStyle as q, responsiveStyle as r, colorToString as s, Sizes as t, useIsInBuilder as u, useFormContext as v, responsiveGridItem as w, useTable as x, useMakeswiftClient as y, Provider as z };
 //# sourceMappingURL=index.es.js.map