@makeswift/runtime 0.2.2 → 0.2.4

package/dist/index.es.js

@@ -36,10 +36,10 @@ var __publicField = (obj, key, value) => {
 };
 var _e;
 import * as React from "react";
-import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, useLayoutEffect, useCallback, Component, memo, useImperativeHandle } from "react";
+import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useLayoutEffect, useCallback, Component, 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 { 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, c as createDocument, q as getReactComponent } from "./react-page.es.js";
+import { f as registerDocumentEffect, g as registerComponentHandleEffect, h as mountComponentEffect, j as registerComponentEffect, k as registerReactComponentEffect } from "./actions.es.js";
 import dynamic from "next/dynamic";
 import { gql, useQuery as useQuery$1, useMutation as useMutation$1, ApolloClient, InMemoryCache } from "@apollo/client";
 import { BatchHttpLink } from "@apollo/client/link/batch-http";
@@ -48,7 +48,7 @@ import { P as PagePathnameSliceFragmentDoc } from "./graphql.es.js";
 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 styled, { ServerStyleSheet } 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 SlotControlType } from "./slot.es.js";
@@ -59,12 +59,12 @@ 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 createEmotionServer from "@emotion/server/create-instance";
+import NextDocument, { Html, Head as Head$1, Main, NextScript } from "next/document";
+import { serialize } from "cookie";
+import Cors from "cors";
+import { createProxyServer } from "http-proxy";
+import { parse as parse$1 } from "set-cookie-parser";
 import uuid from "uuid/v4";
 import ipsum from "corporate-ipsum";
 const SCRIPT_TAG = "script";
@@ -646,7 +646,7 @@ const SITE_FONTS_QUERY = gql`
     }
   }
 `;
-function Page({
+function Page$1({
   document: page
 }) {
   var _a;
@@ -813,6 +813,256 @@ function Page({
     }, snippet.id))]
   });
 }
+class Makeswift {
+  constructor(apiKey, { apiOrigin = "https://api.makeswift.com" } = {}) {
+    __publicField(this, "apiKey");
+    __publicField(this, "apiOrigin");
+    if (typeof apiKey !== "string") {
+      throw new Error(`The Makeswift client must be passed a valid Makeswift site API key: \`new Makeswift('<makeswift_site_api_key>')\`
+Received "${apiKey}" instead.`);
+    }
+    this.apiKey = apiKey;
+    try {
+      this.apiOrigin = new URL(apiOrigin);
+    } catch {
+      throw new Error(`The Makeswift client received an invalid \`apiOrigin\` parameter: "${apiOrigin}".`);
+    }
+  }
+  async fetch(path, init) {
+    const response = await fetch(new URL(path, this.apiOrigin).toString(), __spreadProps(__spreadValues({}, init), {
+      headers: __spreadProps(__spreadValues({}, init == null ? void 0 : init.headers), { ["X-API-Key"]: this.apiKey })
+    }));
+    return response;
+  }
+  async getPages(params = {}) {
+    const searchParams = new URLSearchParams(params);
+    const response = await this.fetch(`/v1/pages?${searchParams}`);
+    if (!response.ok) {
+      throw new Error(`Failed to get pages with error: "${response.statusText}"`);
+    }
+    const json = await response.json();
+    return json;
+  }
+  async createSnapshot(document2) {
+    const client = new MakeswiftClient({ uri: new URL("graphql", this.apiOrigin).href });
+    const cacheData = await client.prefetch(document2.data);
+    return { document: document2, apiOrigin: this.apiOrigin.href, cacheData };
+  }
+  async getPageSnapshotByPageId(pageId, { preview = false } = {}) {
+    const searchParams = new URLSearchParams({ preview: String(preview) });
+    const response = await this.fetch(`/v1/pages/${pageId}/document?${searchParams}`);
+    if (!response.ok) {
+      if (response.status === 404)
+        return null;
+      throw new Error(`Failed to get snapshot with error: "${response.statusText}"`);
+    }
+    const document2 = await response.json();
+    return await this.createSnapshot(document2);
+  }
+  async getPageSnapshot(path, { preview } = {}) {
+    const [page] = await this.getPages({ path });
+    if (page == null)
+      return null;
+    const snapshot = this.getPageSnapshotByPageId(page.id, { preview });
+    return snapshot;
+  }
+}
+function PreviewModeScript({
+  isPreview = false,
+  appOrigin = "https://app.makeswift.com"
+}) {
+  const __html = `
+const isPreview = ${isPreview}
+const appOrigin = '${appOrigin.replace("'", "\\'")}'
+const searchParamName = 'x-makeswift-preview-mode'
+const headerName = 'X-Makeswift-Preview-Mode'
+const originalUrl = new URL(window.location.href)
+
+if (window.parent !== window) {
+  window.addEventListener('message', event => {
+    if (event.origin === appOrigin && event.data.type === 'makeswift_preview_mode') {
+      const { secret } = event.data
+
+      if (!isPreview && !originalUrl.searchParams.has(searchParamName)) {
+        const url = new URL(originalUrl)
+
+        url.searchParams.set(searchParamName, secret)
+
+        window.location.replace(url)
+      } else {
+        const originalFetch = window.fetch
+
+        window.fetch = function patchedFetch(input, init) {
+          return originalFetch.call(this, input, {
+            ...init,
+            headers: { ...init?.headers, [headerName]: secret },
+          })
+        }
+      }
+    }
+  })
+
+  window.parent.postMessage({ type: 'makeswift_preview_mode' }, appOrigin)
+}
+
+if (originalUrl.searchParams.has(searchParamName)) {
+  const url = new URL(originalUrl)
+
+  url.searchParams.delete(searchParamName)
+
+  window.history.replaceState(null, '', url)
+}
+`;
+  return /* @__PURE__ */ jsx("script", {
+    id: "makeswift-preview-mode",
+    type: "module",
+    dangerouslySetInnerHTML: {
+      __html
+    }
+  });
+}
+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();
+    }
+  }
+  render() {
+    const {
+      isPreview
+    } = this.props.__NEXT_DATA__;
+    return /* @__PURE__ */ jsxs(Html, {
+      children: [/* @__PURE__ */ jsx(Head$1, {
+        children: /* @__PURE__ */ jsx(PreviewModeScript, {
+          isPreview
+        })
+      }), /* @__PURE__ */ jsxs("body", {
+        children: [/* @__PURE__ */ jsx(Main, {}), /* @__PURE__ */ jsx(NextScript, {})]
+      })]
+    });
+  }
+}
+const version = "0.2.4";
+function MakeswiftApiHandler(apiKey, { appOrigin = "https://app.makeswift.com", getFonts } = {}) {
+  const cors = Cors({ origin: appOrigin });
+  const previewModeProxy = createProxyServer();
+  previewModeProxy.on("proxyReq", (proxyReq) => {
+    proxyReq.removeHeader("X-Makeswift-Preview-Mode");
+    const url = new URL(proxyReq.path, "http://n");
+    url.searchParams.delete("x-makeswift-preview-mode");
+    proxyReq.path = url.pathname + url.search;
+  });
+  if (typeof apiKey !== "string") {
+    throw new Error(`The Makeswift Next.js API handler must be passed a valid Makeswift site API key: \`MakeswiftApiHandler('<makeswift_site_api_key>')\`
+Received "${apiKey}" instead.`);
+  }
+  return async function makeswiftApiHandler(req, res) {
+    var _a, _b;
+    await new Promise((resolve2, reject) => {
+      cors(req, res, (err) => {
+        if (err instanceof Error)
+          reject(err);
+        else
+          resolve2();
+      });
+    });
+    const { makeswift } = req.query;
+    if (!Array.isArray(makeswift)) {
+      throw new Error(`The Makeswift Next.js API handler must be used in a dynamic catch-all route named \`[...makeswift]\`.
+Received "${makeswift}" for the \`makeswift\` param instead.
+Read more about dynamic catch-all routes here: https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes`);
+    }
+    const action = makeswift.join("/");
+    switch (action) {
+      case "manifest": {
+        if (req.query.secret !== apiKey)
+          return res.status(401).json({ message: "Unauthorized" });
+        return res.json({
+          version,
+          previewMode: true
+        });
+      }
+      case "revalidate": {
+        if (req.query.secret !== apiKey) {
+          return res.status(401).json({ message: "Unauthorized" });
+        }
+        if (typeof req.query.path !== "string") {
+          return res.status(400).json({ message: "Bad Request" });
+        }
+        const revalidate = (_a = res.revalidate) != null ? _a : res.unstable_revalidate;
+        if (typeof revalidate !== "function") {
+          const message = `Cannot revalidate path "${req.query.path}" because \`revalidate\` function does not exist in API handler response. Please update to Next.js v12.2.0 or higher for support for on-demand revalidation.
+Read more here: https://nextjs.org/blog/next-12-2#on-demand-incremental-static-regeneration-stable`;
+          console.warn(message);
+          return res.json({ revalidated: false });
+        }
+        try {
+          await revalidate(req.query.path);
+          return res.json({ revalidated: true });
+        } catch (error) {
+          return res.status(500).json({ message: "Error Revalidating" });
+        }
+      }
+      case "proxy-preview-mode": {
+        if (req.query.secret !== apiKey)
+          return res.status(401).send("Unauthorized");
+        const host = req.headers.host;
+        if (host == null)
+          return res.status(400).send("Bad Request");
+        const forwardedProto = req.headers["x-forwarded-proto"];
+        const proto = typeof forwardedProto === "string" ? forwardedProto : "http";
+        let target = `${proto}://${host}`;
+        if (process.env["NODE_ENV"] !== "production") {
+          const port = req.socket.localPort;
+          if (port != null)
+            target = `http://localhost:${port}`;
+        }
+        const setCookie = res.setPreviewData({ makeswift: true }).getHeader("Set-Cookie");
+        res.removeHeader("Set-Cookie");
+        if (!Array.isArray(setCookie))
+          return res.status(500).send("Internal Server Error");
+        const cookie = parse$1(setCookie).map((cookie2) => serialize(cookie2.name, cookie2.value, cookie2)).join(";");
+        return await new Promise((resolve2, reject) => previewModeProxy.web(req, res, { target, headers: { cookie } }, (err) => {
+          if (err)
+            reject(err);
+          else
+            resolve2();
+        }));
+      }
+      case "fonts": {
+        const fonts = (_b = await (getFonts == null ? void 0 : getFonts())) != null ? _b : [];
+        return res.json(fonts);
+      }
+      default:
+        return res.status(404).json({ message: "Not Found" });
+    }
+  };
+}
 const FORWARDED_NEXT_DYNAMIC_REF_KEY = "__forwarded_next_dynamic_ref__";
 function saveForwardedRef(props, ref) {
   return __spreadProps(__spreadValues({}, props), {
@@ -839,6 +1089,111 @@ function forwardNextDynamicRef(nextDynamicThunk) {
   })));
   return forwardRef((props, ref) => /* @__PURE__ */ jsx(Dynamic, __spreadValues({}, saveForwardedRef(props, ref))));
 }
+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;
+}
+function deprecationWarning(methodName) {
+  const warningMessage = `The \`${methodName}\` export has been deprecated and will be removed in the next minor version. More info: https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.2.0`;
+  if (process.env["NODE_ENV"] !== "production")
+    console.warn(warningMessage);
+}
+async function getStaticPaths() {
+  deprecationWarning("getStaticPaths");
+  const makeswift = new Makeswift(getApiKey(), {
+    apiOrigin: getApiOrigin()
+  });
+  const pages = await makeswift.getPages();
+  return {
+    paths: pages.map((page) => ({
+      params: {
+        path: page.path.split("/").filter((segment) => segment !== "")
+      }
+    })),
+    fallback: "blocking"
+  };
+}
+const REVALIDATE_SECONDS = 1;
+async function getStaticProps(ctx) {
+  var _a, _b, _c;
+  deprecationWarning("getStaticProps");
+  const makeswift = new Makeswift(getApiKey(), {
+    apiOrigin: getApiOrigin()
+  });
+  const path = "/" + ((_b = (_a = ctx.params) == null ? void 0 : _a.path) != null ? _b : []).join("/");
+  const snapshot = await makeswift.getPageSnapshot(path, {
+    preview: ((_c = ctx.previewData) == null ? void 0 : _c.makeswift) === true
+  });
+  if (snapshot == null)
+    return {
+      notFound: true,
+      revalidate: REVALIDATE_SECONDS
+    };
+  return {
+    props: {
+      snapshot
+    },
+    revalidate: REVALIDATE_SECONDS
+  };
+}
+async function getServerSideProps(ctx) {
+  var _a, _b;
+  deprecationWarning("getServerSideProps");
+  const makeswift = new Makeswift(getApiKey(), {
+    apiOrigin: getApiOrigin()
+  });
+  const path = "/" + ((_b = (_a = ctx.params) == null ? void 0 : _a.path) != null ? _b : []).join("/");
+  const snapshot = await makeswift.getPageSnapshot(path, {
+    preview: true
+  });
+  if (snapshot == null)
+    return {
+      notFound: true
+    };
+  return {
+    props: {
+      snapshot
+    }
+  };
+}
+const Page = memo(({
+  snapshot
+}) => {
+  const [client] = useState(() => new MakeswiftClient({
+    uri: new URL("graphql", snapshot.apiOrigin).href,
+    cacheData: snapshot.cacheData
+  }));
+  useEffect(() => {
+    client.updateCacheData(snapshot.cacheData);
+  }, [client, snapshot]);
+  return /* @__PURE__ */ jsx(RuntimeProvider, {
+    client,
+    rootElements: /* @__PURE__ */ new Map([[snapshot.document.id, snapshot.document.data]]),
+    children: /* @__PURE__ */ jsx(Page$1, {
+      document: snapshot.document
+    })
+  });
+});
 const keys = (o) => Object.keys(o);
 const coalesce = (...args) => {
   let i;
@@ -3100,5 +3455,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, 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 };
+export { Document$1 as $, 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, getStaticPaths as V, getStaticProps as W, getServerSideProps as X, Page as Y, Makeswift as Z, PreviewModeScript as _, ReactRuntime as a, MakeswiftApiHandler as a0, forwardNextDynamicRef as a1, 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 };
 //# sourceMappingURL=index.es.js.map