@makeswift/runtime 0.4.2 → 0.5.1

package/dist/index.cjs.js

@@ -38,20 +38,20 @@ var __publicField = (obj, key, value) => {
 var _c;
 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 dynamic = require("next/dynamic");
-var slate = require("slate");
+var css = require("@emotion/css");
+var jsxRuntime = require("react/jsx-runtime");
 var slot = require("./slot.cjs.js");
+var textInput = require("./text-input.cjs.js");
+var combobox = require("./combobox.cjs.js");
 var control = require("./control.cjs.js");
+var shim = require("use-sync-external-store/shim");
+var slate = require("slate");
 var redux = require("redux");
 var thunk = require("redux-thunk");
 var types = require("./types.cjs.js");
-var jsxRuntime = require("react/jsx-runtime");
-var css = require("@emotion/css");
-var textInput = require("./text-input.cjs.js");
-var combobox = require("./combobox.cjs.js");
-var shim = require("use-sync-external-store/shim");
 var ColorHelper = require("color");
 var scrollIntoView = require("scroll-into-view-if-needed");
 var boxModels = require("./box-models.cjs.js");
@@ -682,17 +682,17 @@ class MakeswiftClient {
     return getAPIResource(this.makeswiftApiClient.getState(), types.APIResourceType.Snippet, snippetId);
   }
 }
-const Context$2 = React.createContext(new MakeswiftClient({
+const Context$1 = React.createContext(new MakeswiftClient({
   uri: "https://api.makeswift.com/graphql"
 }));
 function useMakeswiftClient() {
-  return React.useContext(Context$2);
+  return React.useContext(Context$1);
 }
 function MakeswiftProvider({
   client,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Context$2.Provider, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Context$1.Provider, {
     value: client,
     children
   });
@@ -964,10 +964,10 @@ Received "${apiKey}" instead.`);
     const json = await response.json();
     return json;
   }
-  async createSnapshot(document2) {
+  async createSnapshot(document2, preview) {
     const client = new MakeswiftClient({ uri: new URL("graphql", this.apiOrigin).href });
     const cacheData = await client.prefetch(document2.data);
-    return { document: document2, apiOrigin: this.apiOrigin.href, cacheData };
+    return { document: document2, apiOrigin: this.apiOrigin.href, cacheData, preview };
   }
   async getPageSnapshotByPageId(pageId, { preview = false } = {}) {
     const searchParams = new URLSearchParams({ preview: String(preview) });
@@ -978,7 +978,7 @@ Received "${apiKey}" instead.`);
       throw new Error(`Failed to get snapshot with error: "${response.statusText}"`);
     }
     const document2 = await response.json();
-    return await this.createSnapshot(document2);
+    return await this.createSnapshot(document2, preview);
   }
   async getPageSnapshot(path, { preview } = {}) {
     const [page] = await this.getPages({ path });
@@ -1085,7 +1085,7 @@ class Document$1 extends NextDocument__default["default"] {
     });
   }
 }
-const version = "0.4.2";
+const version = "0.5.1";
 function isErrorWithMessage(error) {
   return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
 }
@@ -1103,7 +1103,7 @@ function MakeswiftApiHandler(apiKey, { appOrigin = "https://app.makeswift.com",
 Received "${apiKey}" instead.`);
   }
   return async function makeswiftApiHandler(req, res) {
-    var _a, _b;
+    var _a;
     await new Promise((resolve2, reject) => {
       cors(req, res, (err) => {
         if (err instanceof Error)
@@ -1135,7 +1135,7 @@ Read more about dynamic catch-all routes here: https://nextjs.org/docs/routing/d
         if (typeof req.query.path !== "string") {
           return res.status(400).json({ message: "Bad Request" });
         }
-        const revalidate = (_a = res.revalidate) != null ? _a : res.unstable_revalidate;
+        const revalidate = res.revalidate;
         if (typeof revalidate !== "function") {
           const message = `Cannot revalidate path "${req.query.path}" because \`revalidate\` function does not exist in API handler response. Please update to Next.js v12.2.0 or higher for support for on-demand revalidation.
 Read more here: https://nextjs.org/blog/next-12-2#on-demand-incremental-static-regeneration-stable`;
@@ -1182,7 +1182,7 @@ Read more here: https://nextjs.org/blog/next-12-2#on-demand-incremental-static-r
         }));
       }
       case "fonts": {
-        const fonts = (_b = await (getFonts == null ? void 0 : getFonts())) != null ? _b : [];
+        const fonts = (_a = await (getFonts == null ? void 0 : getFonts())) != null ? _a : [];
         return res.json(fonts);
       }
       case "element-tree": {
@@ -1329,6 +1329,7 @@ const Page = React.memo(({
   return /* @__PURE__ */ jsxRuntime.jsx(RuntimeProvider, {
     client,
     rootElements: /* @__PURE__ */ new Map([[snapshot.document.id, snapshot.document.data]]),
+    preview: snapshot.preview,
     children: /* @__PURE__ */ jsxRuntime.jsx(Page$1, {
       document: snapshot.document
     })
@@ -1885,11 +1886,11 @@ const Contrasts = Object.freeze({
   LIGHT: "light",
   DARK: "dark"
 });
-const Context$1 = React.createContext({});
+const Context = React.createContext({});
 function useFormContext() {
-  return React.useContext(Context$1);
+  return React.useContext(Context);
 }
-const { Provider } = Context$1;
+const { Provider } = Context;
 function registerComponent$6(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic__default["default"](() => patch(Promise.resolve().then(function() {
     return require("./Form.cjs.js");
@@ -2880,8 +2881,35 @@ function useResponsiveColor(color) {
     return swatch == null ? null : __spreadProps(__spreadValues({}, rest), { value: { swatch, alpha } });
   }).filter(reactPage.isNonNullable);
 }
-const isSSR = typeof window === "undefined" || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
-const useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
+const DEVICE_QUERIES = DEVICES.map((device) => ({
+  id: device.id,
+  query: getDeviceMediaQuery(device).replace("@media", "")
+}));
+function subscribe(notify) {
+  const cleanUpFns = DEVICE_QUERIES.map((q) => {
+    const mediaQueryList = window.matchMedia(q.query);
+    mediaQueryList.addEventListener("change", notify);
+    return () => mediaQueryList.removeEventListener("change", notify);
+  });
+  return () => cleanUpFns.forEach((fn) => fn());
+}
+function useMediaQuery(responsiveValue) {
+  const getServerSnapshot = () => {
+    var _a;
+    return (_a = findDeviceOverride(responsiveValue, DEVICES[0].id)) == null ? void 0 : _a.value;
+  };
+  function getSnapshot() {
+    var _a;
+    const deviceId = DEVICE_QUERIES.reduce((matchedDevice, deviceQueries) => {
+      if (window.matchMedia(deviceQueries.query).matches) {
+        return deviceQueries.id;
+      }
+      return matchedDevice;
+    }, DEVICE_QUERIES[0].id);
+    return (_a = findDeviceOverride(responsiveValue, deviceId)) == null ? void 0 : _a.value;
+  }
+  return shim.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
 const getIndexes = (spans, index) => {
   const flattened = spans.reduce((a, s) => a.concat(s), []);
   if (index < 0 || index > flattened.length)
@@ -3787,49 +3815,20 @@ function createReactRuntime(store) {
 }
 const ReactRuntime = createReactRuntime(storeContextDefaultValue);
 registerBuiltinComponents(ReactRuntime);
-const Context = React.createContext(storeContextDefaultValue);
-function RuntimeProvider({
-  client,
-  children,
-  rootElements
-}) {
-  const [store, setStore] = React.useState(() => {
-    const store2 = reactPage.configureStore({
-      preloadedState: storeContextDefaultValue.getState(),
-      rootElements
-    });
-    return store2;
-  });
-  React.useEffect(() => {
-    var _a;
-    const unregisterDocuments = Array.from((_a = rootElements == null ? void 0 : rootElements.entries()) != null ? _a : []).map(([documentKey, rootElement]) => store.dispatch(actions.registerDocumentEffect(reactPage.createDocument(documentKey, rootElement))));
-    return () => {
-      unregisterDocuments.forEach((unregisterDocument) => {
-        unregisterDocument();
-      });
-    };
-  }, [store, rootElements]);
-  React.useEffect(() => {
-    const isInBuilder = window.parent !== window;
-    if (isInBuilder)
-      setReactBuilderPreviewStore();
-    async function setReactBuilderPreviewStore() {
-      const ReactBuilderPreview = await Promise.resolve().then(function() {
-        return require("./react-builder-preview.cjs.js");
-      });
-      setStore((store2) => ReactBuilderPreview.configureStore({
-        preloadedState: store2.getState(),
-        client
-      }));
-    }
-  }, [client]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, {
-    value: store,
-    children: /* @__PURE__ */ jsxRuntime.jsx(MakeswiftProvider, {
-      client,
-      children
-    })
-  });
+const StoreContext = React.createContext(storeContextDefaultValue);
+const PreviewProvider = dynamic__default["default"](() => Promise.resolve().then(function() {
+  return require("./PreviewProvider.cjs.js");
+}));
+const LiveProvider = dynamic__default["default"](() => Promise.resolve().then(function() {
+  return require("./LiveProvider.cjs.js");
+}));
+function RuntimeProvider(_j) {
+  var _k = _j, {
+    preview
+  } = _k, props = __objRest(_k, [
+    "preview"
+  ]);
+  return preview ? /* @__PURE__ */ jsxRuntime.jsx(PreviewProvider, __spreadValues({}, props)) : /* @__PURE__ */ jsxRuntime.jsx(LiveProvider, __spreadValues({}, props));
 }
 const PageContext = React.createContext(null);
 function usePageIdOrNull() {
@@ -3855,7 +3854,7 @@ function useDocumentKey() {
   return React.useContext(DocumentContext);
 }
 function useStore() {
-  return React.useContext(Context);
+  return React.useContext(StoreContext);
 }
 function useSelector(selector) {
   const store = useStore();
@@ -3875,7 +3874,7 @@ function useIsInBuilder() {
   return useSelector((state) => reactPage.getIsInBuilder(state));
 }
 function useDispatch() {
-  const store = React.useContext(Context);
+  const store = React.useContext(StoreContext);
   return store.dispatch;
 }
 const originalError = console.error;
@@ -4012,6 +4011,7 @@ exports.Makeswift = Makeswift;
 exports.MakeswiftApiHandler = MakeswiftApiHandler;
 exports.MakeswiftClient = MakeswiftClient;
 exports.MakeswiftComponentType = MakeswiftComponentType;
+exports.MakeswiftProvider = MakeswiftProvider;
 exports.Page = Page$1;
 exports.Page$1 = Page;
 exports.PageProvider = PageProvider;
@@ -4021,11 +4021,11 @@ exports.ReactRuntime = ReactRuntime;
 exports.RuntimeProvider = RuntimeProvider;
 exports.Shapes = Shapes;
 exports.Sizes = Sizes;
+exports.StoreContext = StoreContext;
 exports.colorToString = colorToString;
 exports.deepEqual = deepEqual;
 exports.findDeviceOverride = findDeviceOverride;
 exports.forwardNextDynamicRef = forwardNextDynamicRef;
-exports.getDeviceMediaQuery = getDeviceMediaQuery;
 exports.getServerSideProps = getServerSideProps;
 exports.getStaticPaths = getStaticPaths;
 exports.getStaticProps = getStaticProps;
@@ -4036,6 +4036,7 @@ exports.responsiveTextStyle = responsiveTextStyle;
 exports.responsiveWidth = responsiveWidth;
 exports.serializeStyles = serializeStyles;
 exports.shallowMergeFallbacks = shallowMergeFallbacks;
+exports.storeContextDefaultValue = storeContextDefaultValue;
 exports.useBorder = useBorder;
 exports.useBoxShadow = useBoxShadow;
 exports.useElementId = useElementId;
@@ -4043,8 +4044,8 @@ exports.useFile = useFile;
 exports.useFiles = useFiles;
 exports.useFormContext = useFormContext;
 exports.useIsInBuilder = useIsInBuilder;
-exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useMakeswiftClient = useMakeswiftClient;
+exports.useMediaQuery = useMediaQuery;
 exports.usePageId = usePageId;
 exports.usePagePathnameSlice = usePagePathnameSlice;
 exports.useResponsiveColor = useResponsiveColor;