@makeswift/runtime 0.0.11 → 0.0.12

package/dist/index.es.js

@@ -47,8 +47,8 @@ import { getDataFromTree } from "@apollo/client/react/ssr";
 import { KeyUtils, Value } from "slate";
 import uuid from "uuid/v4";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import "html-react-parser";
-import "next/head";
+import parse$1 from "html-react-parser";
+import Head from "next/head";
 import { E as ElementID, B as Backgrounds$1, W as Width, R as ResponsiveIconRadioGroup, M as Margin, P as Padding, a as Border, b as BorderRadius, S as Shadows, G as GapY, c as GapX, e as ResponsiveSelect, f as ResponsiveNumber, C as Checkbox$1, g as Grid$2, h as TextInput, L as Link$1, i as ResponsiveColor, j as TextStyle, I as Image$1, k as ResponsiveOpacity, l as Images, N as Number$1, D as Date$1, F as Font, m as ResponsiveLength, n as TextArea$1, o as Table, p as TableFormFields, q as NavigationLinks, r as SocialLinks$1, s as RichText, V as Video$1, T as Types, t as WidthControlValueFormats } from "./descriptors.es.js";
 import ColorHelper from "color";
 import scrollIntoView from "scroll-into-view-if-needed";
@@ -284,6 +284,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);
       }
     }
   }
@@ -2516,7 +2534,7 @@ const Reel = styled(motion.div)`
         }
       `)}
 `;
-const Page = styled(motion.div)`
+const Page$1 = styled(motion.div)`
   position: relative;
   width: 100%;
 `;
@@ -2729,7 +2747,7 @@ const Carousel = forwardRef(function Carousel2({
     },
     children: [/* @__PURE__ */ jsxs(Container$b, {
       children: [/* @__PURE__ */ jsx(ClipMask, {
-        children: /* @__PURE__ */ jsx(Page, __spreadProps(__spreadValues({}, bindPage()), {
+        children: /* @__PURE__ */ jsx(Page$1, __spreadProps(__spreadValues({}, bindPage()), {
           animate: animation,
           children: /* @__PURE__ */ jsx(Reel, {
             gap,
@@ -3518,7 +3536,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 = forwardRef(function Embed2({
   id,
   width,
@@ -3536,7 +3554,7 @@ const Embed = 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 = [];
@@ -3547,7 +3565,7 @@ const Embed = 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,
@@ -4876,7 +4894,7 @@ function useTableFormFieldRefs(propController, { fieldsCount }) {
     }
   }, [propController, container, items, isInBuilder]);
   const itemRefs = 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 };
 }
@@ -6202,7 +6220,7 @@ const GridItem = styled.div`
   align-items: flex-start;
   ${cssGridItem()}
 `;
-const Root = forwardRef(function Page2({
+const Root = forwardRef(function Page({
   children,
   backgrounds,
   rowGap,
@@ -7803,6 +7821,325 @@ function registerBuiltinComponents(runtime) {
     unregisterVideoComponent();
   };
 }
+const SCRIPT_TAG = "script";
+function BodySnippet({
+  code,
+  cleanup
+}) {
+  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 Children.map(parse$1(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 createElement(element.type, __spreadProps(__spreadValues({}, element.props), {
+      key
+    }));
+  });
+}
+const filterUsedSnippetProperties = ({
+  code,
+  builderEnabled,
+  liveEnabled,
+  location,
+  cleanup
+}) => ({
+  code,
+  builderEnabled,
+  liveEnabled,
+  location,
+  cleanup
+});
+const PAGE_SNIPPETS_QUERY = gql`
+  query PageById($id: ID!) {
+    page(id: $id) {
+      __typename
+      id
+      snippets {
+        __typename
+        id
+        name
+        code
+        cleanup
+        location
+        shouldAddToNewPages
+        liveEnabled
+        builderEnabled
+      }
+    }
+  }
+`;
+const SITE_FONTS_QUERY = gql`
+  query SiteById($id: ID!) {
+    site(id: $id) {
+      id
+      googleFonts {
+        edges {
+          activeVariants {
+            specifier
+          }
+          node {
+            family
+            variants {
+              specifier
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function Page2({
+  page,
+  preview = false
+}) {
+  var _a;
+  const isInBuilder = useIsInBuilder();
+  const [snippets, setSnippets] = 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 = 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 = useMemo(() => snippets.filter((snippet) => preview ? snippet.builderEnabled : snippet.liveEnabled), [snippets]);
+  const headSnippets = useMemo(() => filteredSnippets.filter((snippet) => snippet.location === "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.publicUrl
+        }), /* @__PURE__ */ jsx("meta", {
+          name: "twitter:image",
+          content: socialImage.publicUrl
+        }), /* @__PURE__ */ jsx("meta", {
+          name: "twitter:card",
+          content: socialImage.publicUrl
+        }), /* @__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(page.id)
+    }), filteredSnippets.filter((snippet) => snippet.location === "BODY").map((snippet) => /* @__PURE__ */ jsx(BodySnippet, {
+      code: snippet.code,
+      cleanup: snippet.cleanup
+    }, snippet.id))]
+  });
+}
 var _path;
 function _extends() {
   _extends = Object.assign || function(target) {
@@ -8656,21 +8993,21 @@ const Element$1 = memo(forwardRef(function Element2({
   }, elementKey);
 }));
 const Document = memo(forwardRef(function Document2({
-  document
+  document: document2
 }, ref) {
   return /* @__PURE__ */ jsx(DocumentContext.Provider, {
-    value: document.key,
+    value: document2.key,
     children: /* @__PURE__ */ jsx(Element$1, {
       ref,
-      element: document.rootElement
+      element: document2.rootElement
     })
   });
 }));
 const DocumentReference = memo(forwardRef(function DocumentReference2({
   documentReference
 }, ref) {
-  const document = useDocument(documentReference.key);
-  if (document == null) {
+  const document2 = useDocument(documentReference.key);
+  if (document2 == null) {
     return /* @__PURE__ */ jsx(FallbackComponent, {
       ref,
       text: "Document not found"
@@ -8678,8 +9015,8 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
   }
   return /* @__PURE__ */ jsx(Document, {
     ref,
-    document
+    document: document2
   });
 }));
-export { useBackgrounds as A, Box as B, Carousel as C, DocumentReference as D, Element$1 as E, Form as F, useBorder as G, useBoxShadow as H, ImageComponent as I, useResponsiveColor as J, useFile as K, useMediaQuery as L, usePage as M, Navigation as N, useTable as O, PageProvider as P, MakeswiftClient as Q, RuntimeProvider as R, SocialLinks as S, Text as T, ReactRuntime as a, usePageId as b, Button$1 as c, Countdown as d, Divider as e, Embed as f, Root as g, registerComponent$c as h, DEFAULT_BOX_ANIMATE_TYPE as i, DEFAULT_BOX_ANIMATE_DELAY as j, DEFAULT_BOX_ANIMATE_DURATION as k, DEFAULT_ITEM_ANIMATE_TYPE as l, DEFAULT_ITEM_ANIMATE_DELAY as m, DEFAULT_ITEM_ANIMATE_DURATION as n, DEFAULT_ITEM_STAGGER_DURATION as o, cssMediaRules as p, cssWidth as q, registerBuiltinComponents as r, cssMargin as s, cssPadding as t, useIsInBuilder as u, cssBorder as v, cssBorderRadius as w, cssBoxShadow as x, cssGridItem as y, cssTextStyle as z };
+export { useBackgrounds as A, Box as B, Carousel as C, DocumentReference as D, Element$1 as E, Form as F, useBorder as G, useBoxShadow as H, ImageComponent as I, useResponsiveColor as J, useFile as K, useMediaQuery as L, usePage as M, Navigation as N, useTable as O, PageProvider as P, PAGE_SNIPPETS_QUERY as Q, RuntimeProvider as R, SocialLinks as S, Text as T, SITE_FONTS_QUERY as U, Page2 as V, MakeswiftClient as W, deepEqual as X, ReactRuntime as a, usePageId as b, Button$1 as c, Countdown as d, Divider as e, Embed as f, Root as g, registerComponent$c as h, DEFAULT_BOX_ANIMATE_TYPE as i, DEFAULT_BOX_ANIMATE_DELAY as j, DEFAULT_BOX_ANIMATE_DURATION as k, DEFAULT_ITEM_ANIMATE_TYPE as l, DEFAULT_ITEM_ANIMATE_DELAY as m, DEFAULT_ITEM_ANIMATE_DURATION as n, DEFAULT_ITEM_STAGGER_DURATION as o, cssMediaRules as p, cssWidth as q, registerBuiltinComponents as r, cssMargin as s, cssPadding as t, useIsInBuilder as u, cssBorder as v, cssBorderRadius as w, cssBoxShadow as x, cssGridItem as y, cssTextStyle as z };
 //# sourceMappingURL=index.es.js.map