@makeswift/runtime 0.1.1 → 0.1.4

package/dist/index.cjs.js

@@ -57,6 +57,7 @@ var shape = require("./shape.cjs.js");
 var image = require("./image.cjs.js");
 var style = require("./style.cjs.js");
 var ColorHelper = require("color");
+var scrollIntoView = require("scroll-into-view-if-needed");
 var reactDom = require("react-dom");
 var parse = require("html-react-parser");
 var Head = require("next/head");
@@ -91,6 +92,7 @@ var NextDocument__default = /* @__PURE__ */ _interopDefaultLegacy(NextDocument);
 var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
 var createEmotionServer__default = /* @__PURE__ */ _interopDefaultLegacy(createEmotionServer);
 var ColorHelper__default = /* @__PURE__ */ _interopDefaultLegacy(ColorHelper);
+var scrollIntoView__default = /* @__PURE__ */ _interopDefaultLegacy(scrollIntoView);
 var parse__default = /* @__PURE__ */ _interopDefaultLegacy(parse);
 var Head__default = /* @__PURE__ */ _interopDefaultLegacy(Head);
 var uuid__default = /* @__PURE__ */ _interopDefaultLegacy(uuid);
@@ -869,29 +871,57 @@ class Document$1 extends NextDocument__default["default"] {
   }
 }
 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 = `${process["env"].MAKESWIFT_API_HOST}/v0/preview-page-data?id=${pageId}`;
+  const url = `${getApiOrigin()}/v0/preview-page-data?id=${pageId}`;
   const res = await fetch(url, {
     headers: {
-      "x-api-key": process["env"].MAKESWIFT_SITE_API_KEY
+      "x-api-key": getApiKey()
     }
   });
-  if (res.status !== 200) {
+  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 = `${process["env"].MAKESWIFT_API_HOST}/graphql`;
+  const makeswiftApiEndpoint = `${getApiOrigin()}/graphql`;
   const client2 = new MakeswiftClient({
     uri: makeswiftApiEndpoint
   });
@@ -917,26 +947,30 @@ async function getStaticProps({
   const {
     path = []
   } = params;
-  const url = `${process["env"].MAKESWIFT_API_HOST}/v0/live-page-data?path=${path.join("/")}`;
+  const url = `${getApiOrigin()}/v0/live-page-data?path=${path.join("/")}`;
   const res = await fetch(url, {
     headers: {
-      "x-api-key": process["env"].MAKESWIFT_SITE_API_KEY
+      "x-api-key": getApiKey()
     }
   });
-  if (res.status !== 200) {
+  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 = `${process["env"].MAKESWIFT_API_HOST}/graphql`;
+  const makeswiftApiEndpoint = `${getApiOrigin()}/graphql`;
   const client2 = new MakeswiftClient({
     uri: makeswiftApiEndpoint
   });
@@ -2158,6 +2192,16 @@ function useFile(fileId) {
 }
 const isSSR = typeof window === "undefined" || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
 const useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
+function usePage(pageId) {
+  const { error, data = {} } = useQuery(PAGE_PATHNAMES_BY_ID, {
+    skip: pageId == null,
+    variables: { ids: [pageId] }
+  });
+  if (pageId == null || error != null)
+    return null;
+  const { pagePathnamesById: [page] = [] } = data;
+  return page;
+}
 function responsiveStyle(responsiveValues, join$1, strategy) {
   return join(responsiveValues, join$1, strategy).reduce((acc, { deviceId, value }) => {
     const device = getDevice(deviceId);
@@ -2444,10 +2488,11 @@ function useStyleControlCssObject(style$1, controlDefinition) {
     style$1 == null ? void 0 : style$1.margin,
     style$1 == null ? void 0 : style$1.padding,
     useBorder(style$1 == null ? void 0 : style$1.border),
-    style$1 == null ? void 0 : style$1.borderRadius
-  ], ([width, margin, padding, border, borderRadius]) => {
-    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
-    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(style.StyleControlProperty.Width) && {
+    style$1 == null ? void 0 : style$1.borderRadius,
+    style$1 == null ? void 0 : style$1.textStyle
+  ], ([width, margin, padding, border, borderRadius, textStyle]) => {
+    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
+    return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(style.StyleControlProperty.Width) && {
       width: (_a = widthToString(width)) != null ? _a : "100%"
     }), properties.includes(style.StyleControlProperty.Margin) && {
       marginTop: (_b = marginToString(margin == null ? void 0 : margin.marginTop)) != null ? _b : 0,
@@ -2469,7 +2514,10 @@ function useStyleControlCssObject(style$1, controlDefinition) {
       borderTopRightRadius: (_o = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopRightRadius)) != null ? _o : 0,
       borderBottomRightRadius: (_p = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomRightRadius)) != null ? _p : 0,
       borderBottomLeftRadius: (_q = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderBottomLeftRadius)) != null ? _q : 0
-    });
+    }), properties.includes(style.StyleControlProperty.TextStyle) && __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (textStyle == null ? void 0 : textStyle.fontFamily) && { fontFamily: textStyle.fontFamily }), (textStyle == null ? void 0 : textStyle.letterSpacing) && { letterSpacing: textStyle.letterSpacing }), (textStyle == null ? void 0 : textStyle.fontSize) && { fontSize: fontSizeToString(textStyle.fontSize) }), (textStyle == null ? void 0 : textStyle.fontWeight) && { fontWeight: textStyle.fontWeight }), {
+      textTransform: (_r = textStyle == null ? void 0 : textStyle.textTransform) != null ? _r : [],
+      fontStyle: (_s = textStyle == null ? void 0 : textStyle.fontStyle) != null ? _s : []
+    }));
   }));
   function widthToString(widthProperty) {
     if (widthProperty == null)
@@ -2499,6 +2547,9 @@ function useStyleControlCssObject(style$1, controlDefinition) {
       return null;
     return `${borderRadius.value}${borderRadius.unit}`;
   }
+  function fontSizeToString(fontSize) {
+    return `${fontSize.value}${fontSize.unit}`;
+  }
 }
 const useInsertionEffectSpecifier = "useInsertionEffect";
 const useInsertionEffect = (_e = React__namespace[useInsertionEffectSpecifier]) != null ? _e : React__namespace.useLayoutEffect;
@@ -2561,6 +2612,71 @@ function useImageControlValue(data, definition) {
     dimensions: { width: file.dimensions.width, height: file.dimensions.height }
   };
 }
+function useLinkControlValue(link, _definition) {
+  var _a;
+  const page = usePage(link && link.type === "OPEN_PAGE" ? link.payload.pageId : null);
+  const elementKey = (link == null ? void 0 : link.type) === "SCROLL_TO_ELEMENT" ? (_a = link.payload.elementIdConfig) == null ? void 0 : _a.elementKey : null;
+  const elementId = useElementId(elementKey);
+  let href = "#";
+  let target;
+  let block;
+  if (link) {
+    switch (link.type) {
+      case "OPEN_PAGE": {
+        if (page)
+          href = `/${page.pathname}`;
+        target = link.payload.openInNewTab ? "_blank" : "_self";
+        break;
+      }
+      case "OPEN_URL": {
+        href = link.payload.url;
+        target = link.payload.openInNewTab ? "_blank" : "_self";
+        break;
+      }
+      case "SEND_EMAIL": {
+        const { to, subject = "", body = "" } = link.payload;
+        if (to != null)
+          href = `mailto:${to}?subject=${subject}&body=${body}`;
+        break;
+      }
+      case "CALL_PHONE": {
+        href = `tel:${link.payload.phoneNumber}`;
+        break;
+      }
+      case "SCROLL_TO_ELEMENT": {
+        href = `#${elementId != null ? elementId : ""}`;
+        block = link.payload.block;
+        break;
+      }
+      default:
+        throw new RangeError(`Invalid link type "${link.type}."`);
+    }
+  }
+  const handleClick = React.useCallback((event) => {
+    if (event.defaultPrevented)
+      return;
+    if (link && link.type === "SCROLL_TO_ELEMENT") {
+      let hash;
+      try {
+        hash = new URL(`http://www.example.com/${href}`).hash;
+      } catch (error) {
+        console.error(`Link received invalid href: ${href}`, error);
+      }
+      if (href != null && href === hash) {
+        event.preventDefault();
+        const view = event.view;
+        scrollIntoView__default["default"](view.document.querySelector(hash), {
+          behavior: "smooth",
+          block
+        });
+        if (view.location.hash !== hash)
+          view.history.pushState({}, "", hash);
+      }
+    }
+  }, [link, href, block]);
+  const res = React.useMemo(() => ({ href, target, onClick: handleClick }), [href, target, handleClick]);
+  return res;
+}
 function ListControlValue({
   definition,
   data,
@@ -2645,6 +2761,12 @@ function ControlValue({
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
+    case textInput.LinkControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useLinkControlValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
     case shape.ComboboxControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useComboboxControlValue,
@@ -2695,6 +2817,7 @@ function PropsValue({
       case shape.ComboboxControlType:
       case shape.ShapeControlType:
       case shape.ListControlType:
+      case textInput.LinkControlType:
         return /* @__PURE__ */ jsxRuntime.jsx(ControlValue, {
           definition: descriptor,
           data: props[propName],
@@ -2889,17 +3012,17 @@ function useDispatch() {
   const store = React.useContext(Context);
   return store.dispatch;
 }
-function useSuppressRefWarning(ownerName) {
-  const originalErrorRef = React.useRef(console.error);
-  const patchedRef = React.useRef(false);
-  if (patchedRef.current === false) {
+const originalError = console.error;
+let patched = false;
+function suppressRefWarning(ownerName) {
+  if (patched === false) {
     console.error = (...args) => {
       if (typeof args[0] === "string" && args[0].includes("Function components cannot be given refs.") && args[0].includes(`Check the render method of \`${ownerName}\`.`)) {
         return;
       }
-      return originalErrorRef.current(...args);
+      return originalError(...args);
     };
-    patchedRef.current = true;
+    patched = true;
   }
 }
 const ElementData = React.memo(React.forwardRef(function ElementData2({
@@ -2909,7 +3032,7 @@ const ElementData = React.memo(React.forwardRef(function ElementData2({
   const [handle, setHandle] = React.useState(null);
   const [foundDomNode, setFoundDomNode] = React.useState(null);
   React.useImperativeHandle(ref, () => handle != null ? handle : foundDomNode, [handle, foundDomNode]);
-  useSuppressRefWarning(`\`ForwardRef(${ElementData2.name})\``);
+  suppressRefWarning(`\`ForwardRef(${ElementData2.name})\``);
   if (Component == null) {
     return /* @__PURE__ */ jsxRuntime.jsx(FallbackComponent, {
       ref,
@@ -3033,7 +3156,6 @@ exports.DocumentReference = DocumentReference;
 exports.Element = Element;
 exports.FILES_BY_ID = FILES_BY_ID;
 exports.MakeswiftClient = MakeswiftClient;
-exports.PAGE_PATHNAMES_BY_ID = PAGE_PATHNAMES_BY_ID;
 exports.PAGE_SNIPPETS_QUERY = PAGE_SNIPPETS_QUERY;
 exports.Page = Page$1;
 exports.Page$1 = Page;
@@ -3067,6 +3189,7 @@ exports.useFormContext = useFormContext;
 exports.useIsInBuilder = useIsInBuilder;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useMutation = useMutation;
+exports.usePage = usePage;
 exports.usePageId = usePageId;
 exports.useQuery = useQuery;
 exports.useResponsiveColor = useResponsiveColor;