@makeswift/runtime 0.1.12 → 0.2.1

package/dist/index.es.js

@@ -36,33 +36,81 @@ var __publicField = (obj, key, value) => {
 };
 var _e;
 import * as React from "react";
-import { createContext, useContext, useEffect, useState, useMemo, useRef, Children, createElement, forwardRef, useLayoutEffect, useCallback, Component, memo, useImperativeHandle } from "react";
+import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, useLayoutEffect, useCallback, Component, memo, useImperativeHandle } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
 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, k as getComponentPropControllerDescriptors, l as getPropControllers, m as configureStore, n as getDocument, o as getElementId, p as getIsInBuilder, q as getReactComponent, c as createDocument } from "./react-page.es.js";
 import { f as registerComponentHandleEffect, g as mountComponentEffect, h as registerComponentEffect, j as registerReactComponentEffect, k as registerDocumentEffect } from "./actions.es.js";
 import dynamic from "next/dynamic";
-import NextDocument from "next/document";
-import styled, { ServerStyleSheet } from "styled-components";
-import { KeyUtils } from "slate";
-import createEmotionServer from "@emotion/server/create-instance";
-import { cache, cx, css } from "@emotion/css";
 import { gql, useQuery as useQuery$1, useMutation as useMutation$1, ApolloClient, InMemoryCache } from "@apollo/client";
 import { BatchHttpLink } from "@apollo/client/link/batch-http";
+import { KeyUtils } from "slate";
 import { P as PagePathnameSliceFragmentDoc } from "./graphql.es.js";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { T as Types, E as ElementID, B as Backgrounds, 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, g as Grid, h as TextInput, L as Link, i as ResponsiveColor, j as TextStyle, k as Images, N as Number, D as Date$1, F as Font, l as ResponsiveLength, m as TextArea, n as Table, o as TableFormFields, p as Image, q as ResponsiveOpacity, r as NavigationLinks, s as SocialLinks, t as RichText, V as Video, u as StyleControlProperty, v as ImageControlValueFormat, I as ImageControlType, w as StyleControlType, x as WidthControlValueFormats } from "./image.es.js";
+import { S as ShapeControlType, L as ListControlType, C as ComboboxControlType } from "./shape.es.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import styled from "styled-components";
 import { L as LinkControlType, S as SelectControlType, T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
 import { C as ColorControlType } from "./color.es.js";
-import { S as ShapeControlType, L as ListControlType, C as ComboboxControlType } from "./shape.es.js";
 import { S as SlotControlType } from "./slot.es.js";
+import { cache, cx, css } from "@emotion/css";
 import ColorHelper from "color";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { g as getBox } from "./box-models.es.js";
 import { findDOMNode } from "react-dom";
 import parse from "html-react-parser";
 import Head from "next/head";
+import "@emotion/server/create-instance";
+import "next/document";
+import "cookie";
+import "cors";
+import "http-proxy";
+import "set-cookie-parser";
 import uuid from "uuid/v4";
 import ipsum from "corporate-ipsum";
+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;
+}
 const SWATCHES_BY_ID = gql`
   query SwatchesById($ids: [ID!]!) {
     swatches(ids: $ids) {
@@ -487,50 +535,6 @@ function MakeswiftProvider({
     children
   });
 }
-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;
@@ -568,6 +572,10 @@ const deepEqual = (a, b) => {
   }
   return true;
 };
+const SnippetLocation = {
+  Body: "BODY",
+  Head: "HEAD"
+};
 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"
@@ -638,9 +646,8 @@ const SITE_FONTS_QUERY = gql`
     }
   }
 `;
-function Page$1({
-  page,
-  preview = false
+function Page({
+  document: page
 }) {
   var _a;
   const isInBuilder = useIsInBuilder();
@@ -701,8 +708,8 @@ function Page$1({
       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 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;
@@ -800,189 +807,12 @@ function Page$1({
       }))]
     }), /* @__PURE__ */ jsx(DocumentReference, {
       documentReference: createDocumentReference(page.id)
-    }), filteredSnippets.filter((snippet) => snippet.location === "BODY").map((snippet) => /* @__PURE__ */ jsx(BodySnippet, {
+    }), filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Body).map((snippet) => /* @__PURE__ */ jsx(BodySnippet, {
       code: snippet.code,
       cleanup: snippet.cleanup
     }, snippet.id))]
   });
 }
-class Document$1 extends NextDocument {
-  static async getInitialProps(ctx) {
-    const sheet = new ServerStyleSheet();
-    const originalRenderPage = ctx.renderPage;
-    try {
-      ctx.renderPage = () => originalRenderPage({
-        enhanceApp: (App) => (props) => sheet.collectStyles(/* @__PURE__ */ jsx(App, __spreadValues({}, props)))
-      });
-      const initialProps = await NextDocument.getInitialProps(ctx);
-      KeyUtils.resetGenerator();
-      const {
-        extractCritical
-      } = createEmotionServer(cache);
-      const {
-        ids,
-        css: css2
-      } = extractCritical(initialProps.html);
-      return __spreadProps(__spreadValues({}, initialProps), {
-        styles: /* @__PURE__ */ jsxs(Fragment, {
-          children: [initialProps.styles, sheet.getStyleElement(), /* @__PURE__ */ jsx("style", {
-            "data-emotion": `css ${ids.join(" ")}`,
-            dangerouslySetInnerHTML: {
-              __html: css2
-            }
-          })]
-        })
-      });
-    } finally {
-      sheet.seal();
-    }
-  }
-}
-const REVALIDATE_SECONDS = 1;
-function getApiOrigin() {
-  var _a;
-  const apiOriginString = (_a = process["env"].MAKESWIFT_API_HOST) != null ? _a : "https://api.makeswift.com";
-  try {
-    const url = new URL(apiOriginString);
-    return url.origin;
-  } catch (error) {
-    const errorMessage = `"MAKESWIFT_API_HOST" environment variable must be a valid URL. Expected something like "https://api.makeswift.com" but instead received "${apiOriginString}".`;
-    throw new Error(errorMessage);
-  }
-}
-const uuidRegExp = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
-function getApiKey() {
-  const apiKey = process["env"].MAKESWIFT_SITE_API_KEY;
-  if (apiKey == null) {
-    const errorMessage = '"MAKESWIFT_SITE_API_KEY" environment variable must be set. Please add your site API key to your `.env.local` file. More info: https://www.makeswift.com/docs/guides/manual-setup#add-environment-variables';
-    throw new Error(errorMessage);
-  }
-  if (!uuidRegExp.test(apiKey)) {
-    const errorMEssage = `Invalid Makeswift site API key "${apiKey}". Please check your \`.env.local\` file for the "MAKESWIFT_SITE_API_KEY" environment variable. More info: https://www.makeswift.com/docs/guides/manual-setup#add-environment-variables`;
-    throw new Error(errorMEssage);
-  }
-  return apiKey;
-}
-async function getServerSideProps({
-  query: {
-    pageId
-  }
-}) {
-  const url = `${getApiOrigin()}/v0/preview-page-data?id=${pageId}`;
-  const res = await fetch(url, {
-    headers: {
-      "x-api-key": getApiKey()
-    }
-  });
-  if (res.status === 404) {
-    console.error(await res.json());
-    return {
-      notFound: true
-    };
-  }
-  if (!res.ok) {
-    const json = await res.json();
-    throw new Error(json.message);
-  }
-  const page = await res.json();
-  if (page == null)
-    return {
-      notFound: true
-    };
-  const makeswiftApiEndpoint = `${getApiOrigin()}/graphql`;
-  const client = new MakeswiftClient({
-    uri: makeswiftApiEndpoint
-  });
-  const cacheData = await client.prefetch(page.data);
-  return {
-    props: {
-      page,
-      rootElement: page.data,
-      makeswiftApiEndpoint,
-      cacheData,
-      preview: true
-    }
-  };
-}
-async function getStaticProps({
-  params
-}) {
-  if (params == null)
-    return {
-      notFound: true,
-      revalidate: REVALIDATE_SECONDS
-    };
-  const {
-    path = []
-  } = params;
-  const url = `${getApiOrigin()}/v0/live-page-data?path=${path.join("/")}`;
-  const res = await fetch(url, {
-    headers: {
-      "x-api-key": getApiKey()
-    }
-  });
-  if (res.status === 404) {
-    console.error(await res.json());
-    return {
-      notFound: true,
-      revalidate: REVALIDATE_SECONDS
-    };
-  }
-  if (!res.ok) {
-    const json = await res.json();
-    throw new Error(json.message);
-  }
-  const page = await res.json();
-  if (page == null)
-    return {
-      notFound: true,
-      revalidate: REVALIDATE_SECONDS
-    };
-  const makeswiftApiEndpoint = `${getApiOrigin()}/graphql`;
-  const client = new MakeswiftClient({
-    uri: makeswiftApiEndpoint
-  });
-  const cacheData = await client.prefetch(page.data);
-  return {
-    props: {
-      page,
-      rootElement: page.data,
-      makeswiftApiEndpoint,
-      cacheData,
-      preview: false
-    },
-    revalidate: REVALIDATE_SECONDS
-  };
-}
-async function getStaticPaths() {
-  return {
-    paths: [],
-    fallback: "blocking"
-  };
-}
-function Page({
-  page,
-  rootElement,
-  makeswiftApiEndpoint,
-  cacheData,
-  preview
-}) {
-  const [client] = useState(() => new MakeswiftClient({
-    uri: makeswiftApiEndpoint,
-    cacheData
-  }));
-  useEffect(() => {
-    client.updateCacheData(cacheData);
-  }, [client, cacheData]);
-  return /* @__PURE__ */ jsx(RuntimeProvider, {
-    client,
-    rootElements: /* @__PURE__ */ new Map([[page.id, rootElement]]),
-    children: /* @__PURE__ */ jsx(Page$1, {
-      page,
-      preview
-    })
-  });
-}
 const FORWARDED_NEXT_DYNAMIC_REF_KEY = "__forwarded_next_dynamic_ref__";
 function saveForwardedRef(props, ref) {
   return __spreadProps(__spreadValues({}, props), {
@@ -3270,5 +3100,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-export { Alignments as A, TYPOGRAPHIES_BY_ID as B, Contrasts as C, DocumentReference as D, Element as E, SWATCHES_BY_ID as F, shallowMergeFallbacks as G, join as H, getDevice as I, getDeviceMediaQuery as J, getIndexes as K, isNonNullable as L, MakeswiftComponentType as M, FILES_BY_ID as N, useElementId as O, PageProvider as P, deepEqual as Q, RuntimeProvider as R, SITE_FONTS_QUERY as S, TABLE_BY_ID as T, MakeswiftClient as U, Document$1 as V, getServerSideProps as W, getStaticProps as X, getStaticPaths as Y, Page as Z, forwardNextDynamicRef as _, ReactRuntime as a, 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, useResponsiveColor as k, useFile as l, usePage as m, PAGE_SNIPPETS_QUERY as n, Page$1 as o, colorToString as p, useIsomorphicLayoutEffect as q, Shapes as r, Sizes as s, useFormContext as t, useIsInBuilder as u, useQuery as v, useMutation as w, Provider as x, DEVICES as y, findDeviceOverride as z };
+export { Alignments as A, TYPOGRAPHIES_BY_ID as B, Contrasts as C, DocumentReference as D, Element as E, SWATCHES_BY_ID as F, shallowMergeFallbacks as G, join as H, getDevice as I, getDeviceMediaQuery as J, getIndexes as K, isNonNullable as L, MakeswiftComponentType as M, FILES_BY_ID as N, useElementId as O, PageProvider as P, MakeswiftClient as Q, RuntimeProvider as R, SITE_FONTS_QUERY as S, TABLE_BY_ID as T, forwardNextDynamicRef as U, deepEqual as V, ReactRuntime as a, 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, useResponsiveColor as k, useFile as l, usePage as m, PAGE_SNIPPETS_QUERY as n, Page as o, colorToString as p, useIsomorphicLayoutEffect as q, Shapes as r, Sizes as s, useFormContext as t, useIsInBuilder as u, useQuery as v, useMutation as w, Provider as x, DEVICES as y, findDeviceOverride as z };
 //# sourceMappingURL=index.es.js.map