@makeswift/runtime 0.0.11 → 0.0.12

package/dist/index.cjs.js

@@ -47,8 +47,8 @@ var ssr = require("@apollo/client/react/ssr");
 var slate = require("slate");
 var uuid = require("uuid/v4");
 var jsxRuntime = require("react/jsx-runtime");
-require("html-react-parser");
-require("next/head");
+var parse = require("html-react-parser");
+var Head = require("next/head");
 var descriptors = require("./descriptors.cjs.js");
 var ColorHelper = require("color");
 var scrollIntoView = require("scroll-into-view-if-needed");
@@ -95,6 +95,8 @@ function _interopNamespace(e) {
 var React__namespace = /* @__PURE__ */ _interopNamespace(React);
 var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
 var uuid__default = /* @__PURE__ */ _interopDefaultLegacy(uuid);
+var parse__default = /* @__PURE__ */ _interopDefaultLegacy(parse);
+var Head__default = /* @__PURE__ */ _interopDefaultLegacy(Head);
 var ColorHelper__default = /* @__PURE__ */ _interopDefaultLegacy(ColorHelper);
 var scrollIntoView__default = /* @__PURE__ */ _interopDefaultLegacy(scrollIntoView);
 var NextLink__default = /* @__PURE__ */ _interopDefaultLegacy(NextLink);
@@ -318,6 +320,24 @@ const typePolicies = {
           __typename: "Table",
           id: args == null ? void 0 : args.id
         }, true);
+      },
+      page(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "Page",
+          id: args == null ? void 0 : args.id
+        }, true);
+      },
+      site(existingData, {
+        args,
+        toReference
+      }) {
+        return existingData != null ? existingData : toReference({
+          __typename: "Site",
+          id: args == null ? void 0 : args.id
+        }, true);
       }
     }
   }
@@ -2550,7 +2570,7 @@ const Reel = styled__default["default"](framerMotion.motion.div)`
         }
       `)}
 `;
-const Page = styled__default["default"](framerMotion.motion.div)`
+const Page$1 = styled__default["default"](framerMotion.motion.div)`
   position: relative;
   width: 100%;
 `;
@@ -2763,7 +2783,7 @@ const Carousel = React.forwardRef(function Carousel2({
     },
     children: [/* @__PURE__ */ jsxRuntime.jsxs(Container$b, {
       children: [/* @__PURE__ */ jsxRuntime.jsx(ClipMask, {
-        children: /* @__PURE__ */ jsxRuntime.jsx(Page, __spreadProps(__spreadValues({}, bindPage()), {
+        children: /* @__PURE__ */ jsxRuntime.jsx(Page$1, __spreadProps(__spreadValues({}, bindPage()), {
           animate: animation,
           children: /* @__PURE__ */ jsxRuntime.jsx(Reel, {
             gap,
@@ -3552,7 +3572,7 @@ const defaultHtml = `<div style="padding: 24px; background-color: rgba(161, 168,
 <rect y="160" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
 </svg>
 </div>`;
-const SCRIPT_TAG = "script";
+const SCRIPT_TAG$1 = "script";
 const Embed = React.forwardRef(function Embed2({
   id,
   width,
@@ -3570,7 +3590,7 @@ const Embed = React.forwardRef(function Embed2({
       return;
     const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
       acceptNode(node) {
-        return node.tagName.toLowerCase() === SCRIPT_TAG ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+        return node.tagName.toLowerCase() === SCRIPT_TAG$1 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
       }
     });
     const nodes = [];
@@ -3581,7 +3601,7 @@ const Embed = React.forwardRef(function Embed2({
         await new Promise((resolve) => {
           var _a, _b;
           const node = nodes[i];
-          const script = node.ownerDocument.createElement(SCRIPT_TAG);
+          const script = node.ownerDocument.createElement(SCRIPT_TAG$1);
           script.textContent = node.textContent;
           Array.from(node.attributes).forEach(({
             name,
@@ -4910,7 +4930,7 @@ function useTableFormFieldRefs(propController, { fieldsCount }) {
     }
   }, [propController, container, items, isInBuilder]);
   const itemRefs = React.useMemo(() => Array.from({ length: fieldsCount + 1 }).map((_, index) => (item) => {
-    setItems((is) => [...is.slice(0, index), item, ...is.slice(index + 1)]);
+    setItems((is2) => [...is2.slice(0, index), item, ...is2.slice(index + 1)]);
   }), [fieldsCount, setItems]);
   return { container: setContainer, items: itemRefs };
 }
@@ -7837,6 +7857,325 @@ function registerBuiltinComponents(runtime) {
     unregisterVideoComponent();
   };
 }
+const SCRIPT_TAG = "script";
+function BodySnippet({
+  code,
+  cleanup
+}) {
+  React.useEffect(() => {
+    const container = document.createElement("div");
+    container.innerHTML = code;
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
+    const scripts = [];
+    while (walker.nextNode()) {
+      if (walker.currentNode instanceof HTMLScriptElement)
+        scripts.push(walker.currentNode);
+    }
+    scripts.forEach((inlineScript) => {
+      var _a;
+      const executableScript = document.createElement(SCRIPT_TAG);
+      executableScript.textContent = inlineScript.textContent;
+      Array.from(inlineScript.attributes).forEach(({
+        name,
+        value
+      }) => {
+        executableScript.setAttribute(name, value);
+      });
+      (_a = inlineScript.parentNode) == null ? void 0 : _a.replaceChild(executableScript, inlineScript);
+    });
+    const nodes = Array.from(container.childNodes);
+    document.body.append(...nodes);
+    return () => {
+      nodes.forEach((node) => {
+        var _a;
+        (_a = node.parentNode) == null ? void 0 : _a.removeChild(node);
+      });
+      if (cleanup == null)
+        return;
+      const cleanUp = new Function(cleanup);
+      try {
+        cleanUp();
+      } catch {
+      }
+    };
+  }, [code, cleanup]);
+  return null;
+}
+function is(x, y) {
+  if (x === y)
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  return x !== x && y !== y;
+}
+const { hasOwnProperty: hasOwnProperty$1 } = Object.prototype;
+const shallowEqual = (a, b) => {
+  if (is(a, b))
+    return true;
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
+    return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length)
+    return false;
+  for (let i = 0; i < keysA.length; i += 1) {
+    if (!hasOwnProperty$1.call(b, keysA[i]) || !is(a[keysA[i]], b[keysA[i]]))
+      return false;
+  }
+  return true;
+};
+const { hasOwnProperty } = Object.prototype;
+const deepEqual = (a, b) => {
+  if (shallowEqual(a, b))
+    return true;
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
+    return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length)
+    return false;
+  for (let i = 0; i < keysA.length; i += 1) {
+    if (!hasOwnProperty.call(b, keysA[i]) || !deepEqual(a[keysA[i]], b[keysA[i]]))
+      return false;
+  }
+  return true;
+};
+const defaultFavicon = {
+  mimetype: "image/png",
+  publicUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC"
+};
+const VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_.\-\d]*$/;
+const VALID_HEAD_ELEMENT_TYPES = ["title", "base", "link", "style", "meta", "script", "noscript", "template"];
+function snippetToElement(snippet) {
+  return React.Children.map(parse__default["default"](snippet.code), (element) => {
+    if (typeof element === "string")
+      return element;
+    if (!VALID_TAG_REGEX.test(element.type))
+      return null;
+    const key = element.key ? `${snippet.id}:${element.key}` : snippet.id;
+    return React.createElement(element.type, __spreadProps(__spreadValues({}, element.props), {
+      key
+    }));
+  });
+}
+const filterUsedSnippetProperties = ({
+  code,
+  builderEnabled,
+  liveEnabled,
+  location,
+  cleanup
+}) => ({
+  code,
+  builderEnabled,
+  liveEnabled,
+  location,
+  cleanup
+});
+const PAGE_SNIPPETS_QUERY = client.gql`
+  query PageById($id: ID!) {
+    page(id: $id) {
+      __typename
+      id
+      snippets {
+        __typename
+        id
+        name
+        code
+        cleanup
+        location
+        shouldAddToNewPages
+        liveEnabled
+        builderEnabled
+      }
+    }
+  }
+`;
+const SITE_FONTS_QUERY = client.gql`
+  query SiteById($id: ID!) {
+    site(id: $id) {
+      id
+      googleFonts {
+        edges {
+          activeVariants {
+            specifier
+          }
+          node {
+            family
+            variants {
+              specifier
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function Page({
+  page,
+  preview = false
+}) {
+  var _a;
+  const isInBuilder = useIsInBuilder();
+  const [snippets, setSnippets] = React.useState(page.snippets);
+  useQuery(PAGE_SNIPPETS_QUERY, {
+    variables: {
+      id: page.id
+    },
+    skip: isInBuilder === false,
+    fetchPolicy: "cache-only",
+    onCompleted(data) {
+      if (data == null)
+        return;
+      const oldSnippets = snippets.map(filterUsedSnippetProperties);
+      const newSnippets = data.page.snippets.map(filterUsedSnippetProperties);
+      if (deepEqual(newSnippets, oldSnippets))
+        return;
+      setSnippets(data.page.snippets);
+    }
+  });
+  const {
+    data: siteData
+  } = useQuery(SITE_FONTS_QUERY, {
+    variables: {
+      id: page.site.id
+    },
+    skip: isInBuilder === false,
+    fetchPolicy: "cache-only"
+  });
+  const favicon = (_a = page.meta.favicon) != null ? _a : defaultFavicon;
+  const {
+    title,
+    description,
+    keywords,
+    socialImage
+  } = page.meta;
+  const {
+    canonicalUrl,
+    isIndexingBlocked
+  } = page.seo;
+  const fontFamilyParamValue = React.useMemo(() => {
+    if ((siteData == null ? void 0 : siteData.site) == null) {
+      return page.fonts.map(({
+        family,
+        variants
+      }) => {
+        return `${family.replace(/ /g, "+")}:${variants.join()}`;
+      }).join("|");
+    }
+    return siteData.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("|");
+  }, [siteData, page]);
+  const filteredSnippets = React.useMemo(() => snippets.filter((snippet) => preview ? snippet.builderEnabled : snippet.liveEnabled), [snippets]);
+  const headSnippets = React.useMemo(() => filteredSnippets.filter((snippet) => snippet.location === "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.publicUrl
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "twitter:image",
+          content: socialImage.publicUrl
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "twitter:card",
+          content: socialImage.publicUrl
+        }), /* @__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: reactPage.createDocumentReference(page.id)
+    }), filteredSnippets.filter((snippet) => snippet.location === "BODY").map((snippet) => /* @__PURE__ */ jsxRuntime.jsx(BodySnippet, {
+      code: snippet.code,
+      cleanup: snippet.cleanup
+    }, snippet.id))]
+  });
+}
 var _path;
 function _extends() {
   _extends = Object.assign || function(target) {
@@ -8692,21 +9031,21 @@ const Element$1 = React.memo(React.forwardRef(function Element2({
   }, elementKey);
 }));
 const Document = React.memo(React.forwardRef(function Document2({
-  document
+  document: document2
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(DocumentContext.Provider, {
-    value: document.key,
+    value: document2.key,
     children: /* @__PURE__ */ jsxRuntime.jsx(Element$1, {
       ref,
-      element: document.rootElement
+      element: document2.rootElement
     })
   });
 }));
 const DocumentReference = React.memo(React.forwardRef(function DocumentReference2({
   documentReference
 }, ref) {
-  const document = useDocument(documentReference.key);
-  if (document == null) {
+  const document2 = useDocument(documentReference.key);
+  if (document2 == null) {
     return /* @__PURE__ */ jsxRuntime.jsx(FallbackComponent, {
       ref,
       text: "Document not found"
@@ -8714,7 +9053,7 @@ const DocumentReference = React.memo(React.forwardRef(function DocumentReference
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Document, {
     ref,
-    document
+    document: document2
   });
 }));
 exports.Box = Box;
@@ -8736,10 +9075,13 @@ exports.Form = Form;
 exports.ImageComponent = ImageComponent;
 exports.MakeswiftClient = MakeswiftClient;
 exports.Navigation = Navigation;
+exports.PAGE_SNIPPETS_QUERY = PAGE_SNIPPETS_QUERY;
+exports.Page = Page;
 exports.PageProvider = PageProvider;
 exports.ReactRuntime = ReactRuntime;
 exports.Root = Root;
 exports.RuntimeProvider = RuntimeProvider;
+exports.SITE_FONTS_QUERY = SITE_FONTS_QUERY;
 exports.SocialLinks = SocialLinks;
 exports.Text = Text;
 exports.cssBorder = cssBorder;
@@ -8751,6 +9093,7 @@ exports.cssMediaRules = cssMediaRules;
 exports.cssPadding = cssPadding;
 exports.cssTextStyle = cssTextStyle;
 exports.cssWidth = cssWidth;
+exports.deepEqual = deepEqual;
 exports.registerBuiltinComponents = registerBuiltinComponents;
 exports.registerComponent = registerComponent$c;
 exports.useBackgrounds = useBackgrounds;