@makeswift/runtime 0.6.5 → 0.6.7

package/dist/index.cjs.js

@@ -154,6 +154,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) {
@@ -165,7 +166,12 @@ async function introspect(element, client, store) {
         constants.getTypographyIds(descriptor, props[propName]).forEach((typographyId) => typographyIds.add(typographyId));
         constants.getTableIds(descriptor, props[propName]).forEach((tableId) => tableIds.add(tableId));
         constants.getPageIds(descriptor, props[propName]).forEach((pageId) => pageIds.add(pageId));
-        constants.getElementChildren(descriptor, props[propName]).forEach((child) => remaining.push(child));
+        constants.getElementChildren(descriptor, props[propName]).forEach((child) => {
+          if (!seen.has(child.key)) {
+            seen.add(child.key);
+            remaining.push(child);
+          }
+        });
         if (descriptor.type === control.ShapeControlType) {
           const prop = props[propName];
           if (prop == null)
@@ -265,6 +271,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: [],
@@ -951,159 +967,6 @@ function Page$1({
     }, snippet.id))]
   });
 }
-function unstable_Page$1({
-  pageData
-}) {
-  var _a;
-  const isInBuilder = useIsInBuilder();
-  const [snippets, setSnippets] = React.useState(pageData.snapshot.resources.snippets);
-  const cachedPage = useCachedPage(isInBuilder ? pageData.pageId : null);
-  React.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 = React.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 = React.useMemo(() => snippets.filter((snippet) => isInBuilder ? snippet.builderEnabled : snippet.liveEnabled), [snippets, isInBuilder]);
-  const headSnippets = React.useMemo(() => filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Head), [filteredSnippets]);
-  const previousHeadSnippets = React.useRef(null);
-  React.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/* @__PURE__ */ jsxRuntime.jsxs(Head__default["default"], {
-      children: [/* @__PURE__ */ jsxRuntime.jsx("style", {
-        children: `
-            html {
-              font-family: sans-serif;
-            }
-            div#__next {
-              overflow: hidden;
-            }
-          `
-      }), /* @__PURE__ */ jsxRuntime.jsx("link", {
-        rel: "icon",
-        type: favicon.mimetype,
-        href: favicon.publicUrl
-      }), canonicalUrl && /* @__PURE__ */ jsxRuntime.jsx("link", {
-        rel: "canonical",
-        href: canonicalUrl
-      }), isIndexingBlocked && /* @__PURE__ */ jsxRuntime.jsx("meta", {
-        name: "robots",
-        content: "noindex"
-      }), title && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/* @__PURE__ */ jsxRuntime.jsx("title", {
-          children: title
-        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
-          property: "og:title",
-          content: title
-        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
-          name: "twitter:title",
-          content: title
-        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
-          itemProp: "name",
-          content: title
-        })]
-      }), description && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/* @__PURE__ */ jsxRuntime.jsx("meta", {
-          name: "description",
-          content: description
-        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
-          property: "og:description",
-          content: description
-        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
-          name: "twitter:description",
-          content: description
-        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
-          itemProp: "description",
-          content: description
-        })]
-      }), keywords && /* @__PURE__ */ jsxRuntime.jsx("meta", {
-        name: "keywords",
-        content: keywords
-      }), socialImage && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/* @__PURE__ */ jsxRuntime.jsx("meta", {
-          property: "og:image",
-          content: socialImage.publicUrl
-        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
-          property: "og:image:type",
-          content: socialImage.mimetype
-        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
-          name: "twitter:image",
-          content: socialImage.publicUrl
-        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
-          name: "twitter:card",
-          content: "summary_large_image"
-        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
-          itemProp: "image",
-          content: socialImage.publicUrl
-        })]
-      }), fontFamilyParamValue !== "" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: /* @__PURE__ */ jsxRuntime.jsx("link", {
-          rel: "stylesheet",
-          href: `https://fonts.googleapis.com/css?family=${fontFamilyParamValue}&display=swap`
-        })
-      }), headSnippets.map(snippetToElement).map((children) => React.Children.map(children, (child) => {
-        if (typeof child === "string")
-          return child;
-        if (VALID_HEAD_ELEMENT_TYPES.includes(child.type))
-          return child;
-        return null;
-      }))]
-    }), /* @__PURE__ */ jsxRuntime.jsx(DocumentReference, {
-      documentReference: constants.createDocumentReference(pageData.pageId)
-    }), filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Body).map((snippet) => /* @__PURE__ */ jsxRuntime.jsx(BodySnippet, {
-      code: snippet.code,
-      cleanup: snippet.cleanup
-    }, snippet.id))]
-  });
-}
 function useCachedPage(pageId) {
   const client = useMakeswiftClient();
   const getSnapshot = () => pageId == null ? null : client.readPage(pageId);
@@ -1116,7 +979,21 @@ function useCachedSite(siteId) {
   const site = shim.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");
@@ -1175,7 +1052,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,
@@ -1187,13 +1064,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
   }) {
@@ -1213,12 +1090,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({
@@ -1228,33 +1107,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) {
@@ -1263,80 +1124,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) {
@@ -1354,12 +1189,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)
     ];
   }
@@ -1535,7 +1369,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": {
@@ -1622,8 +1457,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
@@ -1771,37 +1699,6 @@ const Page = React.memo(({
     }, snapshot.document.data.key)
   });
 });
-const unstable_Page = React.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 = React.useMemo(() => new MakeswiftClient({
-    uri: new URL("graphql", pageData.options.apiOrigin).href,
-    cacheData: resourcesToCacheData(pageData.snapshot.resources)
-  }), [pageData]);
-  return /* @__PURE__ */ jsxRuntime.jsx(RuntimeProvider, {
-    client,
-    rootElements: /* @__PURE__ */ new Map([[pageData.pageId, pageData.snapshot.elementTree]]),
-    preview: pageData.options.preview,
-    children: /* @__PURE__ */ jsxRuntime.jsx(unstable_Page$1, {
-      pageData
-    })
-  });
-});
 const keys = (o) => Object.keys(o);
 const coalesce = (...args) => {
   let i;
@@ -4091,6 +3988,7 @@ const DocumentContext = React.createContext(null);
 function useDocumentKey() {
   return React.useContext(DocumentContext);
 }
+const DocumentCyclesContext = React.createContext([]);
 function useStore() {
   return React.useContext(StoreContext);
 }
@@ -4162,20 +4060,32 @@ const ElementReference = React.memo(React.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 = React.useContext(DocumentCyclesContext);
+  const providedDocumentKeys = React.useMemo(() => [...documentKeys, documentKey], [documentKeys, documentKey]);
   if (globalElementData == null) {
     return /* @__PURE__ */ jsxRuntime.jsx(FallbackComponent, {
       ref,
       text: "This global component doesn't exist"
     });
   }
-  return elementReferenceDocument != null ? /* @__PURE__ */ jsxRuntime.jsx(Document, {
-    document: elementReferenceDocument,
-    ref
-  }) : /* @__PURE__ */ jsxRuntime.jsx(DisableRegisterElement.Provider, {
-    value: true,
-    children: /* @__PURE__ */ jsxRuntime.jsx(ElementData, {
-      elementData: globalElementData,
+  if (documentKeys.includes(documentKey)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(FallbackComponent, {
+      ref,
+      text: "This global component contains itself!"
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(DocumentCyclesContext.Provider, {
+    value: providedDocumentKeys,
+    children: elementReferenceDocument != null ? /* @__PURE__ */ jsxRuntime.jsx(Document, {
+      document: elementReferenceDocument,
       ref
+    }) : /* @__PURE__ */ jsxRuntime.jsx(DisableRegisterElement.Provider, {
+      value: true,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ElementData, {
+        elementData: globalElementData,
+        ref
+      })
     })
   });
 }));
@@ -4289,8 +4199,6 @@ exports.responsiveTextStyle = responsiveTextStyle;
 exports.responsiveWidth = responsiveWidth;
 exports.shallowMergeFallbacks = shallowMergeFallbacks;
 exports.storeContextDefaultValue = storeContextDefaultValue;
-exports.unstable_Page = unstable_Page$1;
-exports.unstable_Page$1 = unstable_Page;
 exports.useBorder = useBorder;
 exports.useBoxShadow = useBoxShadow;
 exports.useBuilderEditMode = useBuilderEditMode;