@makeswift/runtime 0.13.0 → 0.14.0

package/dist/cjs/state/modules/read-write-documents.js

@@ -0,0 +1,90 @@
+"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 read_write_documents_exports = {};
+__export(read_write_documents_exports, {
+  getDocument: () => getDocument,
+  getInitialState: () => getInitialState,
+  isElementReference: () => import_read_only_documents.isElementReference,
+  reducer: () => reducer
+});
+module.exports = __toCommonJS(read_write_documents_exports);
+var import_immutable = require("immutable");
+var ReadOnlyDocuments = __toESM(require("./read-only-documents"));
+var import_actions = require("../actions");
+var import_read_only_documents = require("./read-only-documents");
+function apply(data, operation) {
+  let applied = data;
+  operation.forEach((component) => {
+    if (component.ld != null)
+      applied = (0, import_immutable.removeIn)(applied, component.p);
+    if (component.od != null)
+      applied = (0, import_immutable.removeIn)(applied, component.p);
+    if (component.li != null)
+      applied = (0, import_immutable.setIn)(applied, component.p, component.li);
+    if (component.oi != null)
+      applied = (0, import_immutable.setIn)(applied, component.p, component.oi);
+  });
+  return applied;
+}
+function getInitialState({
+  rootElements
+} = {}) {
+  return ReadOnlyDocuments.getInitialState({ rootElements });
+}
+function getReadOnlyDocumentsStateSlice(state) {
+  return state;
+}
+function getDocument(state, documentKey) {
+  return ReadOnlyDocuments.getDocument(getReadOnlyDocumentsStateSlice(state), documentKey);
+}
+function reducer(state = getInitialState(), action) {
+  const nextState = ReadOnlyDocuments.reducer(state, action);
+  switch (action.type) {
+    case import_actions.ActionTypes.CHANGE_DOCUMENT: {
+      const currentRootElement = getDocument(nextState, action.payload.documentKey)?.rootElement;
+      if (currentRootElement == null)
+        return nextState;
+      const nextRootElement = apply(currentRootElement, action.payload.operation);
+      return currentRootElement === nextRootElement ? nextState : new Map(nextState).set(
+        action.payload.documentKey,
+        ReadOnlyDocuments.createDocument(action.payload.documentKey, nextRootElement)
+      );
+    }
+    default:
+      return nextState;
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getDocument,
+  getInitialState,
+  isElementReference,
+  reducer
+});
+//# sourceMappingURL=read-write-documents.js.map

package/dist/cjs/state/modules/read-write-documents.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/state/modules/read-write-documents.ts"],"sourcesContent":["import { Operation } from 'ot-json0'\nimport { removeIn, setIn } from 'immutable'\n\nimport * as ReadOnlyDocuments from './read-only-documents'\nimport { Action, ActionTypes } from '../actions'\n\nexport type { Document, Element, ElementData, ElementReference } from './read-only-documents'\nexport { isElementReference } from './read-only-documents'\nexport type { Operation }\n\nfunction apply(data: ReadOnlyDocuments.Element, operation: Operation): ReadOnlyDocuments.Element {\n  let applied = data\n\n  operation.forEach(component => {\n    // @ts-expect-error: `ld` isn't in all possible values of `component`\n    if (component.ld != null) applied = removeIn(applied, component.p)\n\n    // @ts-expect-error: `od` isn't in all possible values of `component`\n    if (component.od != null) applied = removeIn(applied, component.p)\n\n    // @ts-expect-error: `li` isn't in all possible values of `component`\n    if (component.li != null) applied = setIn(applied, component.p, component.li)\n\n    // @ts-expect-error: `oi` isn't in all possible values of `component`\n    if (component.oi != null) applied = setIn(applied, component.p, component.oi)\n  })\n\n  return applied\n}\n\nexport type State = ReadOnlyDocuments.State\n\nexport function getInitialState({\n  rootElements,\n}: {\n  rootElements?: Map<string, ReadOnlyDocuments.Element>\n} = {}): State {\n  return ReadOnlyDocuments.getInitialState({ rootElements })\n}\n\nfunction getReadOnlyDocumentsStateSlice(state: State): ReadOnlyDocuments.State {\n  return state\n}\n\nexport function getDocument(state: State, documentKey: string): ReadOnlyDocuments.Document | null {\n  return ReadOnlyDocuments.getDocument(getReadOnlyDocumentsStateSlice(state), documentKey)\n}\n\nexport function reducer(state: State = getInitialState(), action: Action): State {\n  const nextState = ReadOnlyDocuments.reducer(state, action)\n\n  switch (action.type) {\n    case ActionTypes.CHANGE_DOCUMENT: {\n      const currentRootElement = getDocument(nextState, action.payload.documentKey)?.rootElement\n\n      if (currentRootElement == null) return nextState\n\n      const nextRootElement = apply(currentRootElement, action.payload.operation)\n\n      return currentRootElement === nextRootElement\n        ? nextState\n        : new Map(nextState).set(\n            action.payload.documentKey,\n            ReadOnlyDocuments.createDocument(action.payload.documentKey, nextRootElement),\n          )\n    }\n\n    default:\n      return nextState\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAAgC;AAEhC,wBAAmC;AACnC,qBAAoC;AAGpC,iCAAmC;AAGnC,SAAS,MAAM,MAAiC,WAAiD;AAC/F,MAAI,UAAU;AAEd,YAAU,QAAQ,eAAa;AAE7B,QAAI,UAAU,MAAM;AAAM,oBAAU,2BAAS,SAAS,UAAU,CAAC;AAGjE,QAAI,UAAU,MAAM;AAAM,oBAAU,2BAAS,SAAS,UAAU,CAAC;AAGjE,QAAI,UAAU,MAAM;AAAM,oBAAU,wBAAM,SAAS,UAAU,GAAG,UAAU,EAAE;AAG5E,QAAI,UAAU,MAAM;AAAM,oBAAU,wBAAM,SAAS,UAAU,GAAG,UAAU,EAAE;AAAA,EAC9E,CAAC;AAED,SAAO;AACT;AAIO,SAAS,gBAAgB;AAAA,EAC9B;AACF,IAEI,CAAC,GAAU;AACb,SAAO,kBAAkB,gBAAgB,EAAE,aAAa,CAAC;AAC3D;AAEA,SAAS,+BAA+B,OAAuC;AAC7E,SAAO;AACT;AAEO,SAAS,YAAY,OAAc,aAAwD;AAChG,SAAO,kBAAkB,YAAY,+BAA+B,KAAK,GAAG,WAAW;AACzF;AAEO,SAAS,QAAQ,QAAe,gBAAgB,GAAG,QAAuB;AAC/E,QAAM,YAAY,kBAAkB,QAAQ,OAAO,MAAM;AAEzD,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK,2BAAY,iBAAiB;AAChC,YAAM,qBAAqB,YAAY,WAAW,OAAO,QAAQ,WAAW,GAAG;AAE/E,UAAI,sBAAsB;AAAM,eAAO;AAEvC,YAAM,kBAAkB,MAAM,oBAAoB,OAAO,QAAQ,SAAS;AAE1E,aAAO,uBAAuB,kBAC1B,YACA,IAAI,IAAI,SAAS,EAAE;AAAA,QACjB,OAAO,QAAQ;AAAA,QACf,kBAAkB,eAAe,OAAO,QAAQ,aAAa,eAAe;AAAA,MAC9E;AAAA,IACN;AAAA,IAEA;AACE,aAAO;AAAA,EACX;AACF;","names":[]}

package/dist/cjs/state/react-builder-preview.js

@@ -0,0 +1,560 @@
+"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 react_builder_preview_exports = {};
+__export(react_builder_preview_exports, {
+  configureStore: () => configureStore,
+  createBox: () => import_box_models.createBox,
+  getBox: () => import_box_models.getBox,
+  initialize: () => initialize,
+  messageChannelMiddleware: () => messageChannelMiddleware,
+  parse: () => import_box_models.parse,
+  propControllerHandlesMiddleware: () => propControllerHandlesMiddleware,
+  reducer: () => reducer,
+  startMeasuringElements: () => startMeasuringElements
+});
+module.exports = __toCommonJS(react_builder_preview_exports);
+var import_redux = require("redux");
+var import_redux_thunk = __toESM(require("redux-thunk"));
+var import_router = __toESM(require("next/router"));
+var import_deepEqual = __toESM(require("../utils/deepEqual"));
+var Documents = __toESM(require("./modules/read-write-documents"));
+var ReactComponents = __toESM(require("./modules/react-components"));
+var BoxModels = __toESM(require("./modules/box-models"));
+var ComponentsMeta = __toESM(require("./modules/components-meta"));
+var PropControllers = __toESM(require("./modules/prop-controllers"));
+var PropControllerHandles = __toESM(require("./modules/prop-controller-handles"));
+var IsInBuilder = __toESM(require("./modules/is-in-builder"));
+var IsPreview = __toESM(require("./modules/is-preview"));
+var BuilderEditMode = __toESM(require("./modules/builder-edit-mode"));
+var Pointer = __toESM(require("./modules/pointer"));
+var ElementImperativeHandles = __toESM(require("./modules/element-imperative-handles"));
+var Breakpoints = __toESM(require("./modules/breakpoints"));
+var ReactPage = __toESM(require("./react-page"));
+var import_actions = require("./actions");
+var import_actions2 = require("./actions");
+var import_instances = require("../prop-controllers/instances");
+var import_builder = require("../builder");
+var import_box_models = require("./modules/box-models");
+const reducer = (0, import_redux.combineReducers)({
+  documents: Documents.reducer,
+  reactComponents: ReactComponents.reducer,
+  boxModels: BoxModels.reducer,
+  componentsMeta: ComponentsMeta.reducer,
+  propControllers: PropControllers.reducer,
+  propControllerHandles: PropControllerHandles.reducer,
+  isInBuilder: IsInBuilder.reducer,
+  isPreview: IsPreview.reducer,
+  builderEditMode: BuilderEditMode.reducer,
+  pointer: Pointer.reducer,
+  elementImperativeHandles: ElementImperativeHandles.reducer,
+  breakpoints: Breakpoints.reducer
+});
+function getBoxModelsStateSlice(state) {
+  return state.boxModels;
+}
+function getMeasurables(state) {
+  return BoxModels.getMeasurables(getBoxModelsStateSlice(state));
+}
+function getBoxModels(state) {
+  return BoxModels.getBoxModels(getBoxModelsStateSlice(state));
+}
+function getBoxModel(state, documentKey, elementKey) {
+  return BoxModels.getBoxModel(getBoxModelsStateSlice(state), documentKey, elementKey);
+}
+function getComponentsMetaStateSlice(state) {
+  return state.componentsMeta;
+}
+function getComponentsMeta(state) {
+  return ComponentsMeta.getComponentsMeta(getComponentsMetaStateSlice(state));
+}
+function getPropControllersStateSlice(state) {
+  return state.propControllers;
+}
+function getComponentPropControllerDescriptors(state, componentType) {
+  return PropControllers.getComponentPropControllerDescriptors(
+    getPropControllersStateSlice(state),
+    componentType
+  );
+}
+function getPropControllerHandlesStateSlice(state) {
+  return state.propControllerHandles;
+}
+function getPointer(state) {
+  return Pointer.getPointer(state.pointer);
+}
+function getElementImperativeHandles(state) {
+  return ElementImperativeHandles.getElementImperativeHandles(state.elementImperativeHandles);
+}
+function getElementImperativeHandlesContainingElement(state, element) {
+  const elementImperativeHandles = getElementImperativeHandles(state);
+  const filteredElementImperativeHandles = /* @__PURE__ */ new Map();
+  for (const [documentKey, byElementKey] of elementImperativeHandles) {
+    const filteredByElementKey = /* @__PURE__ */ new Map();
+    for (const [elementKey, elementImperativeHandle] of byElementKey) {
+      const handleElement = elementImperativeHandle.getDomNode();
+      if (handleElement?.contains(element)) {
+        filteredByElementKey.set(elementKey, elementImperativeHandle);
+      }
+    }
+    if (filteredByElementKey.size > 0) {
+      filteredElementImperativeHandles.set(documentKey, filteredByElementKey);
+    }
+  }
+  return filteredElementImperativeHandles;
+}
+function measureElements() {
+  return (dispatch, getState) => {
+    const measurables = getMeasurables(getState());
+    const currentBoxModels = getBoxModels(getState());
+    const measuredBoxModels = /* @__PURE__ */ new Map();
+    measurables.forEach((documentMeasurables, documentKey) => {
+      const measuredDocumentBoxModels = /* @__PURE__ */ new Map();
+      documentMeasurables.forEach((measurable, elementKey) => {
+        const boxModel = BoxModels.measure(measurable);
+        if (boxModel != null)
+          measuredDocumentBoxModels.set(elementKey, boxModel);
+      });
+      if (measuredDocumentBoxModels.size > 0) {
+        measuredBoxModels.set(documentKey, measuredDocumentBoxModels);
+      }
+    });
+    const changedBoxModels = /* @__PURE__ */ new Map();
+    currentBoxModels.forEach((currentDocumentBoxModels, documentKey) => {
+      const changedDocumentBoxModels = /* @__PURE__ */ new Map();
+      currentDocumentBoxModels.forEach((_boxModel, elementKey) => {
+        if (!measuredBoxModels.get(documentKey)?.has(elementKey)) {
+          changedDocumentBoxModels.set(elementKey, null);
+        }
+        if (changedDocumentBoxModels.size > 0) {
+          changedBoxModels.set(documentKey, changedDocumentBoxModels);
+        }
+      });
+    });
+    measuredBoxModels.forEach((measuredDocumentBoxModels, documentKey) => {
+      const changedDocumentBoxModels = /* @__PURE__ */ new Map();
+      measuredDocumentBoxModels.forEach((measuredBoxModel, elementKey) => {
+        const currentBoxModel = getBoxModel(getState(), documentKey, elementKey);
+        if (currentBoxModel == null || !(0, import_deepEqual.default)(currentBoxModel, measuredBoxModel)) {
+          changedDocumentBoxModels.set(elementKey, measuredBoxModel);
+        }
+      });
+      if (changedDocumentBoxModels.size > 0) {
+        changedBoxModels.set(documentKey, changedDocumentBoxModels);
+      }
+    });
+    if (changedBoxModels.size > 0)
+      dispatch((0, import_actions.changeElementBoxModels)(changedBoxModels));
+  };
+}
+function startMeasuringElements() {
+  return (dispatch) => {
+    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    return () => {
+      cancelAnimationFrame(animationFrameHandle);
+    };
+    function handleAnimationFrameRequest() {
+      dispatch(measureElements());
+      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    }
+  };
+}
+function getElementSize(element) {
+  return {
+    offsetWidth: element.offsetWidth,
+    offsetHeight: element.offsetHeight,
+    clientWidth: element.clientWidth,
+    clientHeight: element.clientHeight,
+    scrollWidth: element.scrollWidth,
+    scrollHeight: element.scrollHeight,
+    scrollTop: element.scrollTop,
+    scrollLeft: element.scrollLeft
+  };
+}
+function lockDocumentScroll() {
+  return (dispatch) => {
+    const lastDocumentOverflow = window.document.documentElement.style.overflow;
+    window.document.documentElement.style.overflow = "hidden";
+    window.document.documentElement.addEventListener("wheel", handleWheelEvent);
+    return () => {
+      window.document.documentElement.style.overflow = lastDocumentOverflow;
+      window.document.documentElement.removeEventListener("wheel", handleWheelEvent);
+    };
+    function handleWheelEvent({ deltaX, deltaY }) {
+      dispatch((0, import_actions.handleWheel)({ deltaX, deltaY }));
+    }
+  };
+}
+function startHandlingPointerMoveEvent() {
+  return (dispatch) => {
+    window.document.documentElement.addEventListener("pointermove", handlePointerMoveEvent);
+    return () => {
+      window.document.documentElement.removeEventListener("pointermove", handlePointerMoveEvent);
+    };
+    function handlePointerMoveEvent({ clientX, clientY }) {
+      dispatch((0, import_actions.handlePointerMove)({ clientX, clientY }));
+    }
+  };
+}
+function startHandlingFocusEvents() {
+  return (_dispatch, getState) => {
+    window.addEventListener("focusin", handleFocusIn);
+    window.addEventListener("focusout", handleFocusOut);
+    return () => {
+      window.removeEventListener("focusin", handleFocusIn);
+      window.removeEventListener("focusout", handleFocusOut);
+    };
+    function handleFocusIn(event) {
+      if (ReactPage.getBuilderEditMode(getState()) === BuilderEditMode.BuilderEditMode.INTERACT) {
+        return;
+      }
+      if (!(event.target instanceof window.HTMLElement) || !event.target.isContentEditable) {
+        window.parent.focus();
+      }
+    }
+    function handleFocusOut(event) {
+      if (ReactPage.getBuilderEditMode(getState()) === BuilderEditMode.BuilderEditMode.INTERACT) {
+        return;
+      }
+      if (!(event.relatedTarget instanceof window.HTMLElement) || !event.relatedTarget.isContentEditable) {
+        window.parent.focus();
+      }
+    }
+  };
+}
+function startMeasuringDocumentElement() {
+  return (dispatch) => {
+    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    let lastSize;
+    return () => {
+      cancelAnimationFrame(animationFrameHandle);
+    };
+    function handleAnimationFrameRequest() {
+      const nextSize = getElementSize(window.document.documentElement);
+      if (!(0, import_deepEqual.default)(lastSize, nextSize)) {
+        lastSize = nextSize;
+        dispatch((0, import_actions.changeDocumentElementSize)(nextSize));
+      }
+      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+    }
+  };
+}
+function elementKeysFromElementFromPoint(elementFromPoint) {
+  return (_dispatch, getState) => {
+    if (elementFromPoint == null)
+      return null;
+    const elementImperativeHandles = getElementImperativeHandlesContainingElement(
+      getState(),
+      elementFromPoint
+    );
+    const acendingDepthDocumentKeys = ReactPage.getDocumentKeysSortedByDepth(getState());
+    const descendingDepthDocumentKeys = acendingDepthDocumentKeys.slice().reverse();
+    let currentElement = elementFromPoint;
+    let keys = null;
+    while (currentElement != null) {
+      for (const documentKey of descendingDepthDocumentKeys) {
+        const byElementKey = elementImperativeHandles.get(documentKey);
+        if (byElementKey == null)
+          continue;
+        for (const [elementKey, elementImperativeHandle] of byElementKey) {
+          if (elementImperativeHandle.getDomNode() === currentElement) {
+            return { documentKey, elementKey };
+          }
+        }
+      }
+      currentElement = currentElement.parentElement;
+    }
+    return keys;
+  };
+}
+function startPollingElementFromPoint() {
+  return (dispatch, getState) => {
+    let lastElementFromPoint = null;
+    let animationFrameRequestId = requestAnimationFrame(handleAnimationFrameRequest);
+    return () => {
+      cancelAnimationFrame(animationFrameRequestId);
+    };
+    function handleAnimationFrameRequest() {
+      const pointer = getPointer(getState());
+      const elementFromPoint = pointer == null ? null : document.elementFromPoint(pointer.x, pointer.y);
+      if (elementFromPoint !== lastElementFromPoint) {
+        lastElementFromPoint = elementFromPoint;
+        const keys = dispatch(elementKeysFromElementFromPoint(elementFromPoint));
+        dispatch((0, import_actions.elementFromPointChange)(keys));
+      }
+      animationFrameRequestId = requestAnimationFrame(handleAnimationFrameRequest);
+    }
+  };
+}
+function initialize() {
+  return (dispatch) => {
+    const stopMeasuringElements = dispatch(startMeasuringElements());
+    const stopMeasuringDocumentElement = dispatch(startMeasuringDocumentElement());
+    const stopHandlingFocusEvent = dispatch(startHandlingFocusEvents());
+    const unlockDocumentScroll = dispatch(lockDocumentScroll());
+    const stopHandlingPointerMoveEvent = dispatch(startHandlingPointerMoveEvent());
+    const stopPollingElementFromPoint = dispatch(startPollingElementFromPoint());
+    dispatch((0, import_actions.setIsInBuilder)(true));
+    return () => {
+      stopMeasuringElements();
+      stopMeasuringDocumentElement();
+      stopHandlingFocusEvent();
+      unlockDocumentScroll();
+      stopHandlingPointerMoveEvent();
+      stopPollingElementFromPoint();
+      dispatch((0, import_actions.setIsInBuilder)(false));
+    };
+  };
+}
+function measureBoxModelsMiddleware() {
+  return ({ dispatch }) => (next) => {
+    return (action) => {
+      switch (action.type) {
+        case import_actions2.ActionTypes.REGISTER_COMPONENT_HANDLE: {
+          if (BoxModels.isMeasurable(action.payload.componentHandle)) {
+            dispatch(
+              (0, import_actions.registerMeasurable)(
+                action.payload.documentKey,
+                action.payload.elementKey,
+                action.payload.componentHandle
+              )
+            );
+          }
+          break;
+        }
+        case import_actions2.ActionTypes.UNREGISTER_COMPONENT_HANDLE:
+          dispatch((0, import_actions.unregisterMeasurable)(action.payload.documentKey, action.payload.elementKey));
+          break;
+      }
+      return next(action);
+    };
+  };
+}
+function messageChannelMiddleware(client) {
+  return ({ dispatch, getState }) => (next) => {
+    let cleanUp = () => {
+    };
+    if (typeof window === "undefined")
+      return cleanUp;
+    const messageChannel = new window.MessageChannel();
+    window.parent.postMessage(messageChannel.port2, "*", [messageChannel.port2]);
+    messageChannel.port1.onmessage = (event) => dispatch(event.data);
+    const state = getState();
+    const registeredComponentsMeta = getComponentsMeta(state);
+    registeredComponentsMeta.forEach((componentMeta, componentType) => {
+      const propControllerDescriptors = getComponentPropControllerDescriptors(
+        state,
+        componentType
+      );
+      if (propControllerDescriptors != null) {
+        const [serializedControls, transferables] = (0, import_builder.serializeControls)(propControllerDescriptors);
+        messageChannel.port1.postMessage(
+          (0, import_actions.registerBuilderComponent)(componentType, componentMeta, serializedControls),
+          transferables
+        );
+      }
+    });
+    const breakpoints = ReactPage.getBreakpoints(state);
+    messageChannel.port1.postMessage((0, import_actions.setBreakpoints)(breakpoints));
+    const routerLocale = import_router.default.locale;
+    if (routerLocale != null) {
+      messageChannel.port1.postMessage((0, import_actions.setLocale)(new Intl.Locale(routerLocale)));
+    }
+    import_router.default.events.on("routeChangeStart", () => {
+      messageChannel.port1.postMessage((0, import_actions.changePathnameStart)());
+    });
+    import_router.default.events.on("routeChangeComplete", () => {
+      messageChannel.port1.postMessage((0, import_actions.changePathnameComplete)());
+    });
+    return (action) => {
+      switch (action.type) {
+        case import_actions2.ActionTypes.CHANGE_ELEMENT_BOX_MODELS:
+        case import_actions2.ActionTypes.MOUNT_COMPONENT:
+        case import_actions2.ActionTypes.UNMOUNT_COMPONENT:
+        case import_actions2.ActionTypes.CHANGE_DOCUMENT_ELEMENT_SIZE:
+        case import_actions2.ActionTypes.MESSAGE_BUILDER_PROP_CONTROLLER:
+        case import_actions2.ActionTypes.HANDLE_WHEEL:
+        case import_actions2.ActionTypes.HANDLE_POINTER_MOVE:
+        case import_actions2.ActionTypes.ELEMENT_FROM_POINT_CHANGE:
+          messageChannel.port1.postMessage(action);
+          break;
+        case import_actions2.ActionTypes.REGISTER_COMPONENT: {
+          const { type, meta, propControllerDescriptors } = action.payload;
+          const [serializedControls, transferables] = (0, import_builder.serializeControls)(propControllerDescriptors);
+          messageChannel.port1.postMessage(
+            (0, import_actions.registerBuilderComponent)(type, meta, serializedControls),
+            transferables
+          );
+          break;
+        }
+        case import_actions2.ActionTypes.UNREGISTER_COMPONENT:
+          messageChannel.port1.postMessage((0, import_actions.unregisterBuilderComponent)(action.payload.type));
+          break;
+        case import_actions2.ActionTypes.CHANGE_DOCUMENT_ELEMENT_SCROLL_TOP:
+          window.document.documentElement.scrollTop = action.payload.scrollTop;
+          break;
+        case import_actions2.ActionTypes.SCROLL_DOCUMENT_ELEMENT:
+          window.document.documentElement.scrollTop += action.payload.scrollTopDelta;
+          break;
+        case import_actions2.ActionTypes.SET_BUILDER_EDIT_MODE:
+          messageChannel.port1.postMessage(action);
+          window.getSelection()?.removeAllRanges();
+          break;
+        case import_actions2.ActionTypes.SET_LOCALE: {
+          const { pathname: currentPathname, query } = import_router.default;
+          const pathname = (action.payload.pathname ?? currentPathname).replace(/^\//, "/");
+          import_router.default.replace({ pathname, query }, void 0, { locale: action.payload.locale });
+          break;
+        }
+        case import_actions2.ActionTypes.CHANGE_PATHNAME: {
+          const pathname = action.payload.pathname.replace(/^\//, "/");
+          const currentPathname = import_router.default.asPath.replace(/^\//, "/");
+          if (pathname !== currentPathname)
+            import_router.default.push(pathname);
+          break;
+        }
+        case import_actions2.ActionTypes.SET_LOCALIZED_RESOURCE_ID: {
+          client.setLocalizedResourceId(action.payload);
+          break;
+        }
+        case import_actions2.ActionTypes.INIT:
+          cleanUp = dispatch(initialize());
+          break;
+        case import_actions2.ActionTypes.CLEAN_UP:
+          cleanUp();
+          break;
+      }
+      return next(action);
+    };
+  };
+}
+function createAndRegisterPropControllers(documentKey, elementKey) {
+  return (dispatch, getState) => {
+    const descriptors = ReactPage.getElementPropControllerDescriptors(
+      getState(),
+      documentKey,
+      elementKey
+    );
+    if (descriptors == null)
+      return null;
+    const propControllers = Object.entries(descriptors).reduce((acc, [propName, descriptor]) => {
+      const propController = (0, import_instances.createPropController)(
+        descriptor,
+        (message) => dispatch((0, import_actions.messageBuilderPropController)(documentKey, elementKey, propName, message))
+      );
+      return { ...acc, [propName]: propController };
+    }, {});
+    dispatch((0, import_actions.registerPropControllers)(documentKey, elementKey, propControllers));
+    return propControllers;
+  };
+}
+function propControllerHandlesMiddleware() {
+  return ({ dispatch, getState }) => (next) => {
+    return (action) => {
+      switch (action.type) {
+        case import_actions2.ActionTypes.REGISTER_COMPONENT_HANDLE: {
+          const { documentKey, elementKey, componentHandle } = action.payload;
+          const element = ReactPage.getElement(getState(), documentKey, elementKey);
+          const propControllers = dispatch(
+            createAndRegisterPropControllers(documentKey, elementKey)
+          );
+          if (element != null && !ReactPage.isElementReference(element) && PropControllerHandles.isPropControllersHandle(componentHandle)) {
+            dispatch((0, import_actions.registerPropControllersHandle)(documentKey, elementKey, componentHandle));
+            componentHandle.setPropControllers(propControllers);
+          }
+          break;
+        }
+        case import_actions2.ActionTypes.UNREGISTER_COMPONENT_HANDLE: {
+          const { documentKey, elementKey } = action.payload;
+          const handle = PropControllerHandles.getPropControllersHandle(
+            getPropControllerHandlesStateSlice(getState()),
+            documentKey,
+            elementKey
+          );
+          handle?.setPropControllers(null);
+          dispatch((0, import_actions.unregisterPropControllers)(documentKey, elementKey));
+          break;
+        }
+        case import_actions2.ActionTypes.MESSAGE_HOST_PROP_CONTROLLER: {
+          const propController = PropControllerHandles.getPropController(
+            getPropControllerHandlesStateSlice(getState()),
+            action.payload.documentKey,
+            action.payload.elementKey,
+            action.payload.propName
+          );
+          if (propController)
+            propController.recv(action.payload.message);
+        }
+      }
+      return next(action);
+    };
+  };
+}
+function makeswiftApiClientSyncMiddleware(client) {
+  return () => (next) => {
+    return (action) => {
+      client.makeswiftApiClient.dispatch(action);
+      return next(action);
+    };
+  };
+}
+function configureStore({
+  rootElements,
+  preloadedState,
+  client
+}) {
+  const initialState = {
+    ...preloadedState,
+    documents: Documents.getInitialState({ rootElements }),
+    isPreview: IsPreview.getInitialState(true)
+  };
+  return (0, import_redux.createStore)(
+    reducer,
+    initialState,
+    (0, import_redux.applyMiddleware)(
+      import_redux_thunk.default,
+      measureBoxModelsMiddleware(),
+      messageChannelMiddleware(client),
+      propControllerHandlesMiddleware(),
+      makeswiftApiClientSyncMiddleware(client)
+    )
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  configureStore,
+  createBox,
+  getBox,
+  initialize,
+  messageChannelMiddleware,
+  parse,
+  propControllerHandlesMiddleware,
+  reducer,
+  startMeasuringElements
+});
+//# sourceMappingURL=react-builder-preview.js.map