@makeswift/runtime 0.6.4 → 0.6.6

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,14 +236,44 @@ const deepEqual = (a, b) => {
   }
   return true;
 };
-function getInitialState(serializedState = []) {
-  return new Map(serializedState.map(([resourceType, resources]) => [resourceType, new Map(resources)]));
+function getInitialState(serializedState = {
+  Swatch: [],
+  File: [],
+  Typography: [],
+  PagePathnameSlice: [],
+  GlobalElement: [],
+  Table: [],
+  Snippet: [],
+  Page: [],
+  Site: []
+}) {
+  return new Map(Object.entries(serializedState).map(([apiResourceType, resources]) => [
+    apiResourceType,
+    new Map(resources.map(({ id, value }) => [id, value]))
+  ]));
 }
 function getSerializedState$1(state) {
-  return Array.from(state.entries()).map(([resourceType, resources]) => [
-    resourceType,
-    Array.from(resources.entries())
-  ]);
+  const resourceMap = {
+    Swatch: [],
+    File: [],
+    Typography: [],
+    PagePathnameSlice: [],
+    GlobalElement: [],
+    Table: [],
+    Snippet: [],
+    Page: [],
+    Site: []
+  };
+  Array.from(state.entries()).forEach(([resourceType, resources]) => {
+    const particularResourceMap = [];
+    Array.from(resources.entries()).forEach(([id, value]) => {
+      if (value != null) {
+        particularResourceMap.push({ id, value });
+      }
+    });
+    resourceMap[resourceType] = particularResourceMap;
+  });
+  return resourceMap;
 }
 function getHasAPIResource$1(state, resourceType, resourceId) {
   var _a, _b;
@@ -886,6 +922,159 @@ 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);
@@ -898,6 +1087,7 @@ function useCachedSite(siteId) {
   const site = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
   return site;
 }
+const version = "0.6.6";
 class Makeswift {
   constructor(apiKey, { apiOrigin = "https://api.makeswift.com" } = {}) {
     __publicField(this, "apiKey");
@@ -951,6 +1141,199 @@ Received "${apiKey}" instead.`);
     const snapshot = this.getPageSnapshotByPageId(page.id, { preview });
     return snapshot;
   }
+  async unstable_getPageData(path, { preview } = {}) {
+    const [page] = await this.getPages({ path });
+    if (page == null)
+      return null;
+    const document2 = await this.getDocumentForPage(page.id);
+    const snapshot = await this.unstable_createSnapshotForPage({ document: document2, pageId: page.id });
+    return {
+      pageId: page.id,
+      siteId: document2.site.id,
+      snapshot,
+      options: { preview: preview || false, apiOrigin: this.apiOrigin.href }
+    };
+  }
+  async getDocumentForPage(pageId) {
+    const response = await this.fetch(`/v1/pages/${pageId}/document?preview=false`);
+    if (!response.ok) {
+      if (response.status === 404)
+        throw Error("bad");
+      throw new Error(`Failed to create snapshot with error: "${response.statusText}"`);
+    }
+    const document2 = await response.json();
+    return document2;
+  }
+  async unstable_createSnapshotForPage({
+    document: document2,
+    pageId
+  }) {
+    let fetchedDocument = document2;
+    if (fetchedDocument == null) {
+      const response = await this.fetch(`/v1/pages/${pageId}/document?preview=false`);
+      if (!response.ok) {
+        if (response.status === 404) {
+          throw new Error("Not found");
+        }
+        throw new Error(`Failed to create snapshot with error: "${response.statusText}"`);
+      }
+      fetchedDocument = await response.json();
+    }
+    if (fetchedDocument == null) {
+      throw Error("fetchedDocument should never be null");
+    }
+    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
+    });
+    return { resources, elementTree: fetchedDocument.data, runtimeVersion: version };
+  }
+  async unstable_createSnapshot({
+    publishedResources,
+    deletedResources,
+    publishedElementTree,
+    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) {
+        const map = new Map(resourceSet.map(({ id, value }) => [id, value]));
+        deletedResources3.forEach(({ id }) => map.delete(id));
+        const finalResourceSet = [];
+        Array.from(map.entries()).forEach(([id, value]) => {
+          if (value != null) {
+            finalResourceSet.push({ id, value });
+          }
+        });
+        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,
+          ...resourcesFromPublishedElementTree2.snippets,
+          ...publishedResources2.snippets
+        ], deletedResources2.snippets),
+        fonts: mergeFonts([
+          ...resourcesFromCurrentSnapshot2.fonts,
+          ...resourcesFromPublishedElementTree2.fonts,
+          ...publishedResources2.fonts
+        ], deletedResources2.fonts),
+        meta: __spreadValues(__spreadValues({}, resourcesFromCurrentSnapshot2.meta), publishedResources2.meta),
+        seo: __spreadValues(__spreadValues({}, resourcesFromCurrentSnapshot2.seo), publishedResources2.seo),
+        Snippet: [],
+        Page: [],
+        Site: []
+      };
+      return resources2;
+    }
+    const resourcesFromPublishedElementTree = publishedElementTree != null ? normalizeToMakeswiftResources(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)
+    });
+    const elementTree = publishedElementTree || (currentSnapshot == null ? void 0 : currentSnapshot.elementTree);
+    if (elementTree == null) {
+      throw Error("elementTree should not be null; something went wrong.");
+    }
+    return {
+      resources,
+      elementTree,
+      runtimeVersion: version
+    };
+  }
+  unstable_getSnapshotResourceMapping(snapshot) {
+    const resources = snapshot.resources;
+    function parseResourceIds({ id }) {
+      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.snippets.map(parseResourceIds)
+    ];
+  }
 }
 function PreviewModeScript({
   isPreview = false,
@@ -1079,11 +1462,14 @@ class Document$1 extends NextDocument {
     });
   }
 }
-const version = "0.6.4";
 function isErrorWithMessage(error) {
   return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
 }
-function MakeswiftApiHandler(apiKey, { appOrigin = "https://app.makeswift.com", getFonts } = {}) {
+function MakeswiftApiHandler(apiKey, {
+  appOrigin = "https://app.makeswift.com",
+  apiOrigin = "https://api.makeswift.com",
+  getFonts
+} = {}) {
   const cors = Cors({ origin: appOrigin });
   const previewModeProxy = createProxyServer();
   previewModeProxy.on("proxyReq", (proxyReq) => {
@@ -1120,7 +1506,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": {
@@ -1193,6 +1580,35 @@ Read more here: https://nextjs.org/blog/next-12-2#on-demand-incremental-static-r
         const response = { elementTree: generatedElementTree };
         return res.json(response);
       }
+      case "snapshot": {
+        let validateBody = function(body2) {
+          if (body2.pageId == null) {
+            return res.status(400).json({ message: "Must define pageId." });
+          }
+          if (body2.currentSnapshot == null && body2.publishedElementTree == null) {
+            return res.status(400).json({ message: "Either currentSnapshot or publishedElementTree must be defined." });
+          }
+        };
+        const body = req.body;
+        validateBody(body);
+        const client = new Makeswift(apiKey, {
+          apiOrigin
+        });
+        const snapshot = await client.unstable_createSnapshot({
+          publishedResources: body.publishedResources,
+          deletedResources: body.deletedResources,
+          publishedElementTree: body.publishedElementTree,
+          currentSnapshot: body.currentSnapshot
+        });
+        const usedResources = client.unstable_getSnapshotResourceMapping(snapshot);
+        const response = {
+          pageId: body.pageId,
+          snapshot,
+          livePageChanges: body.livePageChanges,
+          usedResources
+        };
+        return res.json(response);
+      }
       default:
         return res.status(404).json({ message: "Not Found" });
     }
@@ -1327,6 +1743,37 @@ 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;
@@ -3584,6 +4031,7 @@ const DocumentContext = createContext(null);
 function useDocumentKey() {
   return useContext(DocumentContext);
 }
+const DocumentCyclesContext = createContext([]);
 function useStore() {
   return useContext(StoreContext);
 }
@@ -3655,20 +4103,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
+      })
     })
   });
 }));
@@ -3741,5 +4201,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-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 };
+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 };
 //# sourceMappingURL=index.es.js.map