@makeswift/runtime 0.6.5 → 0.6.7

package/dist/index.es.js

@@ -40,7 +40,7 @@ import { useEffect, createContext, useContext, useState, useMemo, useRef, Childr
 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 isPropControllersHandle, p as getComponentPropControllerDescriptors, q as getPropControllers, r as configureStore$1, s as getDocument, t as getElementId, u as getIsPreview, v as getIsInBuilder, w as copyElementTree, x as getReactComponent, y as getBuilderEditMode } from "./constants.es.js";
-import { A as ActionTypes, g as introspectedResourcesFulfilled, h as apiResourceFulfilled, t as typographiesFulfilled, j as registerComponentHandleEffect, k as mountComponentEffect, l as registerComponentEffect, n as registerReactComponentEffect } from "./actions.es.js";
+import { A as ActionTypes, h as introspectedResourcesFulfilled, j as apiResourceFulfilled, t as typographiesFulfilled, k as registerComponentHandleEffect, l as mountComponentEffect, n as registerComponentEffect, o as registerReactComponentEffect } from "./actions.es.js";
 import { cache, cx } from "@emotion/css";
 import { serializeStyles } from "@emotion/serialize";
 import { registerStyles, insertStyles } from "@emotion/utils";
@@ -119,6 +119,7 @@ async function introspect(element, client, store) {
   const tableIds = /* @__PURE__ */ new Set();
   const pageIds = /* @__PURE__ */ new Set();
   const remaining = [element];
+  const seen = /* @__PURE__ */ new Set();
   let current;
   while (current = remaining.pop()) {
     let getResourcesFromElementDescriptors = function(elementDescriptors2, props) {
@@ -130,7 +131,12 @@ async function introspect(element, client, store) {
         getTypographyIds(descriptor, props[propName]).forEach((typographyId) => typographyIds.add(typographyId));
         getTableIds(descriptor, props[propName]).forEach((tableId) => tableIds.add(tableId));
         getPageIds(descriptor, props[propName]).forEach((pageId) => pageIds.add(pageId));
-        getElementChildren(descriptor, props[propName]).forEach((child) => remaining.push(child));
+        getElementChildren(descriptor, props[propName]).forEach((child) => {
+          if (!seen.has(child.key)) {
+            seen.add(child.key);
+            remaining.push(child);
+          }
+        });
         if (descriptor.type === ShapeControlType) {
           const prop = props[propName];
           if (prop == null)
@@ -230,6 +236,16 @@ const deepEqual = (a, b) => {
   }
   return true;
 };
+function getSnapshotResourcesFromSerializedState(serializedState) {
+  const resources = {
+    swatches: serializedState.Swatch.filter((_) => true),
+    typographies: serializedState.Typography.filter((_) => true),
+    files: serializedState.File.filter((_) => true),
+    pagePathnameSlices: serializedState.PagePathnameSlice.filter((_) => true),
+    globalElements: serializedState.GlobalElement.filter((_) => true)
+  };
+  return resources;
+}
 function getInitialState(serializedState = {
   Swatch: [],
   File: [],
@@ -916,159 +932,6 @@ function Page$1({
     }, snippet.id))]
   });
 }
-function unstable_Page$1({
-  pageData
-}) {
-  var _a;
-  const isInBuilder = useIsInBuilder();
-  const [snippets, setSnippets] = useState(pageData.snapshot.resources.snippets);
-  const cachedPage = useCachedPage(isInBuilder ? pageData.pageId : null);
-  useEffect(() => {
-    if (cachedPage == null)
-      return;
-    const oldSnippets = snippets.map(filterUsedSnippetProperties);
-    const newSnippets = cachedPage.snippets.map(filterUsedSnippetProperties);
-    if (deepEqual(newSnippets, oldSnippets))
-      return;
-    setSnippets(cachedPage.snippets);
-  }, [cachedPage]);
-  const site = useCachedSite(isInBuilder ? pageData.siteId : null);
-  const favicon = (_a = pageData.snapshot.resources.meta.favicon) != null ? _a : defaultFavicon;
-  const {
-    title,
-    description,
-    keywords,
-    socialImage
-  } = pageData.snapshot.resources.meta;
-  const {
-    canonicalUrl,
-    isIndexingBlocked
-  } = pageData.snapshot.resources.seo;
-  const fontFamilyParamValue = useMemo(() => {
-    if (site == null) {
-      return pageData.snapshot.resources.fonts.map(({
-        family,
-        variants
-      }) => {
-        return `${family.replace(/ /g, "+")}:${variants.join()}`;
-      }).join("|");
-    }
-    return site.googleFonts.edges.filter((edge) => edge != null).map(({
-      activeVariants,
-      node: {
-        family,
-        variants
-      }
-    }) => {
-      const activeVariantSpecifiers = variants.filter((variant) => activeVariants.some((activeVariant) => activeVariant.specifier === variant.specifier)).map((variant) => variant.specifier).join();
-      return `${family.replace(/ /g, "+")}:${activeVariantSpecifiers}`;
-    }).join("|");
-  }, [site, pageData.snapshot.resources.fonts]);
-  const filteredSnippets = useMemo(() => snippets.filter((snippet) => isInBuilder ? snippet.builderEnabled : snippet.liveEnabled), [snippets, isInBuilder]);
-  const headSnippets = useMemo(() => filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Head), [filteredSnippets]);
-  const previousHeadSnippets = useRef(null);
-  useEffect(() => {
-    var _a2;
-    const headSnippetsToCleanUp = ((_a2 = previousHeadSnippets.current) != null ? _a2 : []).filter((previousSnippet) => previousSnippet.cleanup != null).filter((previousSnippet) => !headSnippets.some((snippet) => previousSnippet.id === snippet.id));
-    headSnippetsToCleanUp.forEach((snippetToCleanUp) => {
-      if (snippetToCleanUp.cleanup == null)
-        return;
-      const cleanUp = new Function(snippetToCleanUp.cleanup);
-      try {
-        cleanUp();
-      } catch {
-      }
-    });
-    previousHeadSnippets.current = headSnippets;
-  }, [headSnippets]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsxs(Head, {
-      children: [/* @__PURE__ */ jsx("style", {
-        children: `
-            html {
-              font-family: sans-serif;
-            }
-            div#__next {
-              overflow: hidden;
-            }
-          `
-      }), /* @__PURE__ */ jsx("link", {
-        rel: "icon",
-        type: favicon.mimetype,
-        href: favicon.publicUrl
-      }), canonicalUrl && /* @__PURE__ */ jsx("link", {
-        rel: "canonical",
-        href: canonicalUrl
-      }), isIndexingBlocked && /* @__PURE__ */ jsx("meta", {
-        name: "robots",
-        content: "noindex"
-      }), title && /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx("title", {
-          children: title
-        }), /* @__PURE__ */ jsx("meta", {
-          property: "og:title",
-          content: title
-        }), /* @__PURE__ */ jsx("meta", {
-          name: "twitter:title",
-          content: title
-        }), /* @__PURE__ */ jsx("meta", {
-          itemProp: "name",
-          content: title
-        })]
-      }), description && /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx("meta", {
-          name: "description",
-          content: description
-        }), /* @__PURE__ */ jsx("meta", {
-          property: "og:description",
-          content: description
-        }), /* @__PURE__ */ jsx("meta", {
-          name: "twitter:description",
-          content: description
-        }), /* @__PURE__ */ jsx("meta", {
-          itemProp: "description",
-          content: description
-        })]
-      }), keywords && /* @__PURE__ */ jsx("meta", {
-        name: "keywords",
-        content: keywords
-      }), socialImage && /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx("meta", {
-          property: "og:image",
-          content: socialImage.publicUrl
-        }), /* @__PURE__ */ jsx("meta", {
-          property: "og:image:type",
-          content: socialImage.mimetype
-        }), /* @__PURE__ */ jsx("meta", {
-          name: "twitter:image",
-          content: socialImage.publicUrl
-        }), /* @__PURE__ */ jsx("meta", {
-          name: "twitter:card",
-          content: "summary_large_image"
-        }), /* @__PURE__ */ jsx("meta", {
-          itemProp: "image",
-          content: socialImage.publicUrl
-        })]
-      }), fontFamilyParamValue !== "" && /* @__PURE__ */ jsx(Fragment, {
-        children: /* @__PURE__ */ jsx("link", {
-          rel: "stylesheet",
-          href: `https://fonts.googleapis.com/css?family=${fontFamilyParamValue}&display=swap`
-        })
-      }), headSnippets.map(snippetToElement).map((children) => Children.map(children, (child) => {
-        if (typeof child === "string")
-          return child;
-        if (VALID_HEAD_ELEMENT_TYPES.includes(child.type))
-          return child;
-        return null;
-      }))]
-    }), /* @__PURE__ */ jsx(DocumentReference, {
-      documentReference: createDocumentReference(pageData.pageId)
-    }), filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Body).map((snippet) => /* @__PURE__ */ jsx(BodySnippet, {
-      code: snippet.code,
-      cleanup: snippet.cleanup
-    }, snippet.id))]
-  });
-}
 function useCachedPage(pageId) {
   const client = useMakeswiftClient();
   const getSnapshot = () => pageId == null ? null : client.readPage(pageId);
@@ -1081,7 +944,21 @@ function useCachedSite(siteId) {
   const site = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
   return site;
 }
-const version = "0.6.5";
+const version = "0.6.7";
+function normalizeToMakeswiftResources(partialResources) {
+  const resources = {
+    swatches: (partialResources == null ? void 0 : partialResources.swatches) || [],
+    typographies: (partialResources == null ? void 0 : partialResources.typographies) || [],
+    files: (partialResources == null ? void 0 : partialResources.files) || [],
+    pagePathnameSlices: (partialResources == null ? void 0 : partialResources.pagePathnameSlices) || [],
+    globalElements: (partialResources == null ? void 0 : partialResources.globalElements) || [],
+    snippets: (partialResources == null ? void 0 : partialResources.snippets) || [],
+    fonts: (partialResources == null ? void 0 : partialResources.fonts) || [],
+    pageMetadata: (partialResources == null ? void 0 : partialResources.pageMetadata) || {},
+    pageSeo: (partialResources == null ? void 0 : partialResources.pageSeo) || {}
+  };
+  return resources;
+}
 class Makeswift {
   constructor(apiKey, { apiOrigin = "https://api.makeswift.com" } = {}) {
     __publicField(this, "apiKey");
@@ -1140,7 +1017,7 @@ Received "${apiKey}" instead.`);
     if (page == null)
       return null;
     const document2 = await this.getDocumentForPage(page.id);
-    const snapshot = await this.unstable_createSnapshotForPage({ document: document2, pageId: page.id });
+    const snapshot = await this.unstable_createSnapshotOnDemand({ document: document2, pageId: page.id });
     return {
       pageId: page.id,
       siteId: document2.site.id,
@@ -1152,13 +1029,13 @@ Received "${apiKey}" instead.`);
     const response = await this.fetch(`/v1/pages/${pageId}/document?preview=false`);
     if (!response.ok) {
       if (response.status === 404)
-        throw Error("bad");
+        throw Error("Document not found.");
       throw new Error(`Failed to create snapshot with error: "${response.statusText}"`);
     }
     const document2 = await response.json();
     return document2;
   }
-  async unstable_createSnapshotForPage({
+  async unstable_createSnapshotOnDemand({
     document: document2,
     pageId
   }) {
@@ -1178,12 +1055,14 @@ Received "${apiKey}" instead.`);
     }
     const client = new MakeswiftClient({ uri: new URL("graphql", this.apiOrigin).href });
     const prefetchedResources = await client.prefetch(fetchedDocument.data);
-    const resources = __spreadProps(__spreadValues({}, prefetchedResources), {
-      snippets: fetchedDocument.snippets,
-      meta: fetchedDocument.meta,
-      seo: fetchedDocument.seo,
-      fonts: fetchedDocument.fonts
-    });
+    const resources = normalizeToMakeswiftResources(getSnapshotResourcesFromSerializedState(prefetchedResources));
+    resources.snippets = fetchedDocument.snippets.map((snippet) => ({
+      id: snippet.id,
+      value: snippet
+    }));
+    resources.pageMetadata = fetchedDocument.meta;
+    resources.pageSeo = fetchedDocument.seo;
+    resources.fonts = fetchedDocument.fonts.map((font) => ({ id: font.family, value: font }));
     return { resources, elementTree: fetchedDocument.data, runtimeVersion: version };
   }
   async unstable_createSnapshot({
@@ -1193,33 +1072,15 @@ Received "${apiKey}" instead.`);
     currentSnapshot
   }) {
     const client = new MakeswiftClient({ uri: new URL("graphql", this.apiOrigin).href });
-    function normalizeToMakeswiftResources(partialResources) {
-      const resources2 = {
-        Swatch: (partialResources == null ? void 0 : partialResources.Swatch) || [],
-        File: (partialResources == null ? void 0 : partialResources.File) || [],
-        Typography: (partialResources == null ? void 0 : partialResources.Typography) || [],
-        PagePathnameSlice: (partialResources == null ? void 0 : partialResources.PagePathnameSlice) || [],
-        GlobalElement: (partialResources == null ? void 0 : partialResources.GlobalElement) || [],
-        Table: (partialResources == null ? void 0 : partialResources.Table) || [],
-        Snippet: (partialResources == null ? void 0 : partialResources.Snippet) || [],
-        Page: (partialResources == null ? void 0 : partialResources.Page) || [],
-        Site: (partialResources == null ? void 0 : partialResources.Site) || [],
-        snippets: (partialResources == null ? void 0 : partialResources.snippets) || [],
-        fonts: (partialResources == null ? void 0 : partialResources.fonts) || [],
-        meta: (partialResources == null ? void 0 : partialResources.meta) || {},
-        seo: (partialResources == null ? void 0 : partialResources.seo) || {}
-      };
-      return resources2;
-    }
     function mergeResources({
       resourcesFromPublishedElementTree: resourcesFromPublishedElementTree2,
       resourcesFromCurrentSnapshot: resourcesFromCurrentSnapshot2,
       publishedResources: publishedResources2,
       deletedResources: deletedResources2
     }) {
-      function mergeElementTreeResource(resourceSet, deletedResources3) {
+      function mergeIdSpecifiedResource(resourceSet, deletedResources3) {
         const map = new Map(resourceSet.map(({ id, value }) => [id, value]));
-        deletedResources3.forEach(({ id }) => map.delete(id));
+        deletedResources3 == null ? void 0 : deletedResources3.forEach((id) => map.delete(id));
         const finalResourceSet = [];
         Array.from(map.entries()).forEach(([id, value]) => {
           if (value != null) {
@@ -1228,80 +1089,54 @@ Received "${apiKey}" instead.`);
         });
         return finalResourceSet;
       }
-      function mergeSnippets(snippets, deletedSnippet) {
-        const map = new Map(snippets.map((value) => [value.id, value]));
-        deletedSnippet.forEach(({ id }) => map.delete(id));
-        const uniqueSnippets = [];
-        Array.from(map.entries()).forEach(([_, value]) => {
-          uniqueSnippets.push(value);
-        });
-        return uniqueSnippets;
-      }
-      function mergeFonts(fonts, deletedFonts) {
-        const map = new Map(fonts.map((value) => [value.family, value]));
-        deletedFonts.forEach(({ family }) => map.delete(family));
-        const uniqueFonts = [];
-        Array.from(map.entries()).forEach(([_, value]) => {
-          uniqueFonts.push(value);
-        });
-        return uniqueFonts;
-      }
       const resources2 = {
-        Swatch: mergeElementTreeResource([
-          ...resourcesFromPublishedElementTree2.Swatch,
-          ...resourcesFromCurrentSnapshot2.Swatch,
-          ...publishedResources2.Swatch
-        ], deletedResources2.Swatch),
-        File: mergeElementTreeResource([
-          ...resourcesFromPublishedElementTree2.File,
-          ...resourcesFromCurrentSnapshot2.File,
-          ...publishedResources2.File
-        ], deletedResources2.File),
-        Typography: mergeElementTreeResource([
-          ...resourcesFromPublishedElementTree2.Typography,
-          ...resourcesFromCurrentSnapshot2.Typography,
-          ...publishedResources2.Typography
-        ], deletedResources2.Typography),
-        PagePathnameSlice: mergeElementTreeResource([
-          ...resourcesFromPublishedElementTree2.PagePathnameSlice,
-          ...resourcesFromCurrentSnapshot2.PagePathnameSlice,
-          ...publishedResources2.PagePathnameSlice
-        ], deletedResources2.PagePathnameSlice),
-        GlobalElement: mergeElementTreeResource([
-          ...resourcesFromPublishedElementTree2.GlobalElement,
-          ...resourcesFromCurrentSnapshot2.GlobalElement,
-          ...publishedResources2.GlobalElement
-        ], deletedResources2.GlobalElement),
-        Table: mergeElementTreeResource([
-          ...resourcesFromPublishedElementTree2.Table,
-          ...resourcesFromCurrentSnapshot2.Table,
-          ...publishedResources2.Table
-        ], deletedResources2.Table),
-        snippets: mergeSnippets([
-          ...resourcesFromCurrentSnapshot2.snippets,
+        swatches: mergeIdSpecifiedResource([
+          ...resourcesFromPublishedElementTree2.swatches,
+          ...resourcesFromCurrentSnapshot2.swatches,
+          ...publishedResources2.swatches
+        ], deletedResources2 == null ? void 0 : deletedResources2.swatches),
+        files: mergeIdSpecifiedResource([
+          ...resourcesFromPublishedElementTree2.files,
+          ...resourcesFromCurrentSnapshot2.files,
+          ...publishedResources2.files
+        ], deletedResources2 == null ? void 0 : deletedResources2.files),
+        typographies: mergeIdSpecifiedResource([
+          ...resourcesFromPublishedElementTree2.typographies,
+          ...resourcesFromCurrentSnapshot2.typographies,
+          ...publishedResources2.typographies
+        ], deletedResources2 == null ? void 0 : deletedResources2.typographies),
+        pagePathnameSlices: mergeIdSpecifiedResource([
+          ...resourcesFromPublishedElementTree2.pagePathnameSlices,
+          ...resourcesFromCurrentSnapshot2.pagePathnameSlices,
+          ...publishedResources2.pagePathnameSlices
+        ], deletedResources2 == null ? void 0 : deletedResources2.pagePathnameSlices),
+        globalElements: mergeIdSpecifiedResource([
+          ...resourcesFromPublishedElementTree2.globalElements,
+          ...resourcesFromCurrentSnapshot2.globalElements,
+          ...publishedResources2.globalElements
+        ], deletedResources2 == null ? void 0 : deletedResources2.globalElements),
+        snippets: mergeIdSpecifiedResource([
           ...resourcesFromPublishedElementTree2.snippets,
+          ...resourcesFromCurrentSnapshot2.snippets,
           ...publishedResources2.snippets
-        ], deletedResources2.snippets),
-        fonts: mergeFonts([
-          ...resourcesFromCurrentSnapshot2.fonts,
+        ], deletedResources2 == null ? void 0 : deletedResources2.snippets),
+        fonts: mergeIdSpecifiedResource([
           ...resourcesFromPublishedElementTree2.fonts,
+          ...resourcesFromCurrentSnapshot2.fonts,
           ...publishedResources2.fonts
-        ], deletedResources2.fonts),
-        meta: __spreadValues(__spreadValues({}, resourcesFromCurrentSnapshot2.meta), publishedResources2.meta),
-        seo: __spreadValues(__spreadValues({}, resourcesFromCurrentSnapshot2.seo), publishedResources2.seo),
-        Snippet: [],
-        Page: [],
-        Site: []
+        ], deletedResources2 == null ? void 0 : deletedResources2.fonts),
+        pageMetadata: __spreadValues(__spreadValues({}, resourcesFromCurrentSnapshot2.pageMetadata), publishedResources2.pageMetadata),
+        pageSeo: __spreadValues(__spreadValues({}, resourcesFromCurrentSnapshot2.pageSeo), publishedResources2.pageSeo)
       };
       return resources2;
     }
-    const resourcesFromPublishedElementTree = publishedElementTree != null ? normalizeToMakeswiftResources(await client.prefetch(publishedElementTree)) : normalizeToMakeswiftResources({});
+    const resourcesFromPublishedElementTree = publishedElementTree != null ? normalizeToMakeswiftResources(getSnapshotResourcesFromSerializedState(await client.prefetch(publishedElementTree))) : normalizeToMakeswiftResources({});
     const resourcesFromCurrentSnapshot = normalizeToMakeswiftResources((currentSnapshot == null ? void 0 : currentSnapshot.resources) || {});
     const resources = mergeResources({
       resourcesFromPublishedElementTree,
       resourcesFromCurrentSnapshot,
       publishedResources: normalizeToMakeswiftResources(publishedResources),
-      deletedResources: normalizeToMakeswiftResources(deletedResources)
+      deletedResources
     });
     const elementTree = publishedElementTree || (currentSnapshot == null ? void 0 : currentSnapshot.elementTree);
     if (elementTree == null) {
@@ -1319,12 +1154,11 @@ Received "${apiKey}" instead.`);
       return id;
     }
     return [
-      ...resources.Swatch.map(parseResourceIds),
-      ...resources.File.map(parseResourceIds),
-      ...resources.Typography.map(parseResourceIds),
-      ...resources.PagePathnameSlice.map(parseResourceIds),
-      ...resources.GlobalElement.map(parseResourceIds),
-      ...resources.Table.map(parseResourceIds),
+      ...resources.swatches.map(parseResourceIds),
+      ...resources.files.map(parseResourceIds),
+      ...resources.typographies.map(parseResourceIds),
+      ...resources.pagePathnameSlices.map(parseResourceIds),
+      ...resources.globalElements.map(parseResourceIds),
       ...resources.snippets.map(parseResourceIds)
     ];
   }
@@ -1500,7 +1334,8 @@ Read more about dynamic catch-all routes here: https://nextjs.org/docs/routing/d
         return res.json({
           version,
           previewMode: true,
-          interactionMode: true
+          interactionMode: true,
+          clientSideNavigation: true
         });
       }
       case "revalidate": {
@@ -1587,8 +1422,101 @@ Read more here: https://nextjs.org/blog/next-12-2#on-demand-incremental-static-r
         const client = new Makeswift(apiKey, {
           apiOrigin
         });
+        const makeswiftApiClient = new MakeswiftClient({ uri: new URL("graphql", apiOrigin).href });
+        async function formMakeswiftResources(publishedResources) {
+          var _a2, _b, _c2, _d, _e, _f, _g;
+          const publishedResourcesInMakeswiftSnapshotFormat = {
+            swatches: [],
+            typographies: [],
+            files: [],
+            pagePathnameSlices: [],
+            globalElements: [],
+            snippets: [],
+            fonts: [],
+            pageMetadata: publishedResources == null ? void 0 : publishedResources.pageMetadata,
+            pageSeo: publishedResources == null ? void 0 : publishedResources.pageSeo
+          };
+          if (publishedResources == null) {
+            return publishedResourcesInMakeswiftSnapshotFormat;
+          }
+          for await (const swatchId of publishedResources.swatches || []) {
+            const swatch = await makeswiftApiClient.fetchSwatch(swatchId);
+            if (swatch != null) {
+              (_a2 = publishedResourcesInMakeswiftSnapshotFormat.swatches) == null ? void 0 : _a2.push({
+                id: swatchId,
+                value: swatch
+              });
+            }
+          }
+          for await (const typographyId of publishedResources.typographies || []) {
+            const typography = await makeswiftApiClient.fetchTypography(typographyId);
+            if (typography != null) {
+              (_b = publishedResourcesInMakeswiftSnapshotFormat.typographies) == null ? void 0 : _b.push({
+                id: typographyId,
+                value: typography
+              });
+            }
+          }
+          for await (const fileId of publishedResources.files || []) {
+            const file = await makeswiftApiClient.fetchFile(fileId);
+            if (file != null) {
+              (_c2 = publishedResourcesInMakeswiftSnapshotFormat.files) == null ? void 0 : _c2.push({
+                id: fileId,
+                value: file
+              });
+            }
+          }
+          for await (const pageId of publishedResources.pagePathnameSlices || []) {
+            const pagePathnameSlice = await makeswiftApiClient.fetchPagePathnameSlice(pageId);
+            if (pagePathnameSlice != null) {
+              (_d = publishedResourcesInMakeswiftSnapshotFormat.pagePathnameSlices) == null ? void 0 : _d.push({
+                id: pageId,
+                value: pagePathnameSlice
+              });
+            }
+          }
+          for await (const globalElementId of publishedResources.globalElements || []) {
+            const globalElement = await makeswiftApiClient.fetchGlobalElement(globalElementId);
+            if (globalElement != null) {
+              (_e = publishedResourcesInMakeswiftSnapshotFormat.globalElements) == null ? void 0 : _e.push({
+                id: globalElementId,
+                value: globalElement
+              });
+            }
+          }
+          if (publishedResources.snippets != null || publishedResources.fonts != null) {
+            const response2 = await fetch(new URL(`/v1/pages/${body.pageId}/document?preview=false`, apiOrigin).toString(), {
+              headers: { ["X-API-Key"]: apiKey }
+            });
+            if (!response2.ok) {
+              throw new Error(`Failed to hit live page endpoint: "${response2.statusText}"`);
+            }
+            const document2 = await response2.json();
+            const availableSnippets = document2.snippets;
+            const availableFonts = document2.fonts;
+            for await (const snippetId of publishedResources.snippets || []) {
+              const snippet = availableSnippets.find((availableSnippet) => availableSnippet.id === snippetId);
+              if (snippet != null) {
+                (_f = publishedResourcesInMakeswiftSnapshotFormat.snippets) == null ? void 0 : _f.push({
+                  id: snippetId,
+                  value: snippet
+                });
+              }
+            }
+            for await (const family of publishedResources.fonts || []) {
+              const font = availableFonts.find((availableFont) => availableFont.family === family);
+              if (font != null) {
+                (_g = publishedResourcesInMakeswiftSnapshotFormat.fonts) == null ? void 0 : _g.push({
+                  id: family,
+                  value: font
+                });
+              }
+            }
+          }
+          return publishedResourcesInMakeswiftSnapshotFormat;
+        }
         const snapshot = await client.unstable_createSnapshot({
-          publishedResources: body.publishedResources,
+          publishedResources: await formMakeswiftResources(body.publishedResources),
           deletedResources: body.deletedResources,
           publishedElementTree: body.publishedElementTree,
           currentSnapshot: body.currentSnapshot
@@ -1736,37 +1664,6 @@ const Page = memo(({
     }, snapshot.document.data.key)
   });
 });
-const unstable_Page = memo(({
-  pageData
-}) => {
-  function resourcesToCacheData(resources) {
-    if (resources == null)
-      return void 0;
-    return {
-      Swatch: resources.Swatch,
-      File: resources.File,
-      Typography: resources.Typography,
-      PagePathnameSlice: resources.PagePathnameSlice,
-      GlobalElement: resources.GlobalElement,
-      Table: resources.Table,
-      Snippet: resources.Snippet,
-      Page: resources.Page,
-      Site: resources.Site
-    };
-  }
-  const client = useMemo(() => new MakeswiftClient({
-    uri: new URL("graphql", pageData.options.apiOrigin).href,
-    cacheData: resourcesToCacheData(pageData.snapshot.resources)
-  }), [pageData]);
-  return /* @__PURE__ */ jsx(RuntimeProvider, {
-    client,
-    rootElements: /* @__PURE__ */ new Map([[pageData.pageId, pageData.snapshot.elementTree]]),
-    preview: pageData.options.preview,
-    children: /* @__PURE__ */ jsx(unstable_Page$1, {
-      pageData
-    })
-  });
-});
 const keys = (o) => Object.keys(o);
 const coalesce = (...args) => {
   let i;
@@ -4024,6 +3921,7 @@ const DocumentContext = createContext(null);
 function useDocumentKey() {
   return useContext(DocumentContext);
 }
+const DocumentCyclesContext = createContext([]);
 function useStore() {
   return useContext(StoreContext);
 }
@@ -4095,20 +3993,32 @@ const ElementReference = memo(forwardRef(function ElementReference2({
   const globalElement = useGlobalElement(elementReference.value);
   const globalElementData = globalElement == null ? void 0 : globalElement.data;
   const elementReferenceDocument = useDocument(elementReference.key);
+  const documentKey = elementReference.key;
+  const documentKeys = useContext(DocumentCyclesContext);
+  const providedDocumentKeys = useMemo(() => [...documentKeys, documentKey], [documentKeys, documentKey]);
   if (globalElementData == null) {
     return /* @__PURE__ */ jsx(FallbackComponent, {
       ref,
       text: "This global component doesn't exist"
     });
   }
-  return elementReferenceDocument != null ? /* @__PURE__ */ jsx(Document, {
-    document: elementReferenceDocument,
-    ref
-  }) : /* @__PURE__ */ jsx(DisableRegisterElement.Provider, {
-    value: true,
-    children: /* @__PURE__ */ jsx(ElementData, {
-      elementData: globalElementData,
+  if (documentKeys.includes(documentKey)) {
+    return /* @__PURE__ */ jsx(FallbackComponent, {
+      ref,
+      text: "This global component contains itself!"
+    });
+  }
+  return /* @__PURE__ */ jsx(DocumentCyclesContext.Provider, {
+    value: providedDocumentKeys,
+    children: elementReferenceDocument != null ? /* @__PURE__ */ jsx(Document, {
+      document: elementReferenceDocument,
       ref
+    }) : /* @__PURE__ */ jsx(DisableRegisterElement.Provider, {
+      value: true,
+      children: /* @__PURE__ */ jsx(ElementData, {
+        elementData: globalElementData,
+        ref
+      })
     })
   });
 }));
@@ -4181,5 +4091,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-export { getStaticProps as $, Provider as A, Alignments as B, Contrasts as C, DocumentReference as D, Element as E, useFile as F, DEVICES as G, findDeviceOverride as H, forwardNextDynamicRef as I, useIsPreview as J, useFiles as K, useSwatches as L, usePagePathnameSlice as M, useElementId as N, deepEqual as O, PageProvider as P, storeContextDefaultValue as Q, RuntimeProvider as R, Shapes as S, StoreContext as T, MakeswiftProvider as U, useBuilderEditMode as V, pollBoxModel as W, useTypography as X, shallowMergeFallbacks as Y, MakeswiftClient as Z, getStaticPaths as _, ReactRuntime as a, getServerSideProps as a0, Page as a1, unstable_Page as a2, Makeswift as a3, PreviewModeScript as a4, Document$1 as a5, MakeswiftApiHandler as a6, 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, unstable_Page$1 as o, useStyle as p, responsiveWidth as q, responsiveStyle as r, responsiveTextStyle as s, colorToString as t, useIsInBuilder as u, Sizes as v, useFormContext as w, responsiveGridItem as x, useTable as y, useMakeswiftClient as z };
+export { getServerSideProps 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, useBuilderEditMode as U, pollBoxModel as V, useTypography as W, shallowMergeFallbacks as X, MakeswiftClient as Y, getStaticPaths as Z, getStaticProps as _, ReactRuntime as a, Page as a0, Makeswift as a1, PreviewModeScript as a2, Document$1 as a3, MakeswiftApiHandler as a4, 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