@makeswift/runtime 0.1.2 → 0.1.5

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);
@@ -480,6 +482,8 @@ class MakeswiftClient {
       variables: introspectionData
     });
     res.data.pagePathnamesById.forEach((pagePathnameSlice) => {
+      if (pagePathnameSlice == null)
+        return;
       const id = Buffer.from(`Page:${pagePathnameSlice.id}`).toString("base64");
       this.apolloClient.cache.writeFragment({
         fragment: graphql.PagePathnameSliceFragmentDoc,
@@ -869,29 +873,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 +949,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 +2194,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);
@@ -2568,6 +2614,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,
@@ -2652,6 +2763,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,
@@ -2702,6 +2819,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],
@@ -2919,7 +3037,7 @@ const ElementData = React.memo(React.forwardRef(function ElementData2({
   suppressRefWarning(`\`ForwardRef(${ElementData2.name})\``);
   if (Component == null) {
     return /* @__PURE__ */ jsxRuntime.jsx(FallbackComponent, {
-      ref,
+      ref: setHandle,
       text: "Component not found"
     });
   }
@@ -3040,7 +3158,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;
@@ -3074,6 +3191,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;