@comet/site-nextjs 9.0.0-canary-20251013121422 → 9.0.0-canary-20251124092450

package/lib/index.js

@@ -1,51 +1,53 @@
 /* empty css                         */
-import { DamFileDownloadLinkBlock } from "./blocks/DamFileDownloadLinkBlock.js";
 import { DamVideoBlock } from "./blocks/DamVideoBlock.js";
-import { EmailLinkBlock } from "./blocks/EmailLinkBlock.js";
-import { ExternalLinkBlock } from "./blocks/ExternalLinkBlock.js";
 import { SeoBlock } from "./blocks/factories/SeoBlock.js";
 import { VideoPreviewImage } from "./blocks/helpers/VideoPreviewImage.js";
 import { InternalLinkBlock } from "./blocks/InternalLinkBlock.js";
-import { PhoneLinkBlock } from "./blocks/PhoneLinkBlock.js";
 import { PixelImageBlock } from "./blocks/PixelImageBlock.js";
 import { VimeoVideoBlock } from "./blocks/VimeoVideoBlock.js";
 import { YouTubeVideoBlock } from "./blocks/YouTubeVideoBlock.js";
 import { createFetchWithDefaultNextRevalidate, createFetchWithDefaults } from "./graphQLFetch/graphQLFetch.js";
 import { Image } from "./image/Image.js";
 import { sitePreviewRoute } from "./sitePreview/appRouter/sitePreviewRoute.js";
-import { sendSitePreviewIFrameMessage } from "./sitePreview/iframebridge/sendSitePreviewIFrameMessage.js";
-import { SitePreviewIFrameMessageType } from "./sitePreview/iframebridge/SitePreviewIFrameMessage.js";
 import { legacyPagesRouterSitePreviewApiHandler } from "./sitePreview/pagesRouter/legacyPagesRouterSitePreviewApiHandler.js";
 import { legacyPagesRouterPreviewParams, previewParams } from "./sitePreview/previewUtils.js";
 import { SitePreviewProvider } from "./sitePreview/SitePreviewProvider.js";
-import { recursivelyLoadBlockData } from "./site-react/lib/blockLoader/blockLoader.js";
+import { AdminMessageType, IFrameMessageType } from "./site-react/lib/iframebridge/IFrameMessage.js";
+import { BlockPreviewProvider } from "./site-react/lib/preview/BlockPreviewProvider.js";
 import { BlocksBlock } from "./site-react/lib/blocks/factories/BlocksBlock.js";
-import { ListBlock } from "./site-react/lib/blocks/factories/ListBlock.js";
-import { OneOfBlock } from "./site-react/lib/blocks/factories/OneOfBlock.js";
-import { OptionalBlock } from "./site-react/lib/blocks/factories/OptionalBlock.js";
-import { hasRichTextBlockContent } from "./site-react/lib/blocks/helpers/RichTextBlockHelper.js";
-import { useIsElementInViewport } from "./site-react/lib/blocks/helpers/useIsElementInViewport.js";
-import { SvgImageBlock } from "./site-react/lib/blocks/SvgImageBlock.js";
+import { calculateInheritAspectRatio, generateImageUrl, getMaxDimensionsFromArea, parseAspectRatio } from "./site-react/lib/image/image.utils.js";
+import { convertPreviewDataToHeaders, createFetchWithPreviewHeaders, createGraphQLFetch, gql } from "./site-react/lib/graphQLFetch/graphQLFetch.js";
 import { CookieApiProvider, useCookieApi } from "./site-react/lib/cookies/CookieApiContext.js";
 import { CookieSafe } from "./site-react/lib/cookies/CookieSafe.js";
-import { useCookieBotCookieApi } from "./site-react/lib/cookies/useCookieBotCookieApi.js";
-import { useLocalStorageCookieApi } from "./site-react/lib/cookies/useLocalStorageCookieApi.js";
-import { useOneTrustCookieApi } from "./site-react/lib/cookies/useOneTrustCookieApi.js";
+import { createFetchInMemoryCache } from "./site-react/lib/graphQLFetch/fetchInMemoryCache.js";
+import { createPersistedQueryGraphQLFetch } from "./site-react/lib/persistedQueries/createPersistedQueryGraphQLFetch.js";
+import { DamFileDownloadLinkBlock } from "./site-react/lib/blocks/DamFileDownloadLinkBlock.js";
+import { EmailLinkBlock } from "./site-react/lib/blocks/EmailLinkBlock.js";
 import { ErrorHandlerBoundary } from "./site-react/lib/errorHandler/ErrorHandlerBoundary.js";
 import { ErrorHandlerProvider } from "./site-react/lib/errorHandler/ErrorHandlerProvider.js";
-import { convertPreviewDataToHeaders, createFetchWithPreviewHeaders, createGraphQLFetch, gql } from "./site-react/lib/graphQLFetch/graphQLFetch.js";
+import { ExternalLinkBlock } from "./site-react/lib/blocks/ExternalLinkBlock.js";
+import { hasRichTextBlockContent } from "./site-react/lib/blocks/helpers/RichTextBlockHelper.js";
 import { IFrameBridgeProvider } from "./site-react/lib/iframebridge/IFrameBridge.js";
-import { AdminMessageType, IFrameMessageType } from "./site-react/lib/iframebridge/IFrameMessage.js";
+import { isWithPreviewPropsData, withPreview } from "./site-react/lib/iframebridge/withPreview.js";
+import { ListBlock } from "./site-react/lib/blocks/factories/ListBlock.js";
+import { OneOfBlock } from "./site-react/lib/blocks/factories/OneOfBlock.js";
+import { OptionalBlock } from "./site-react/lib/blocks/factories/OptionalBlock.js";
+import { persistedQueryRoute } from "./site-react/lib/persistedQueries/persistedQueryRoute.js";
+import { PhoneLinkBlock } from "./site-react/lib/blocks/PhoneLinkBlock.js";
 import { Preview } from "./site-react/lib/iframebridge/Preview.js";
+import { PreviewSkeleton } from "./site-react/lib/previewskeleton/PreviewSkeleton.js";
+import { recursivelyLoadBlockData } from "./site-react/lib/blockLoader/blockLoader.js";
+import { sendSitePreviewIFrameMessage } from "./site-react/lib/sitePreview/iframebridge/sendSitePreviewIFrameMessage.js";
+import { SitePreviewIFrameMessageType } from "./site-react/lib/sitePreview/iframebridge/SitePreviewIFrameMessage.js";
+import { SvgImageBlock } from "./site-react/lib/blocks/SvgImageBlock.js";
 import { useBlockPreviewFetch } from "./site-react/lib/iframebridge/useBlockPreviewFetch.js";
+import { useCookieBotCookieApi } from "./site-react/lib/cookies/useCookieBotCookieApi.js";
 import { useIFrameBridge } from "./site-react/lib/iframebridge/useIFrameBridge.js";
-import { isWithPreviewPropsData, withPreview } from "./site-react/lib/iframebridge/withPreview.js";
-import "react/jsx-runtime";
-import { calculateInheritAspectRatio, generateImageUrl, getMaxDimensionsFromArea, parseAspectRatio } from "./site-react/lib/image/image.utils.js";
-import { BlockPreviewProvider } from "./site-react/lib/preview/BlockPreviewProvider.js";
-import "./site-react/lib/preview/PreviewContext.js";
+import { useIsElementInViewport } from "./site-react/lib/blocks/helpers/useIsElementInViewport.js";
+import { useLocalStorageCookieApi } from "./site-react/lib/cookies/useLocalStorageCookieApi.js";
+import { useOneTrustCookieApi } from "./site-react/lib/cookies/useOneTrustCookieApi.js";
 import { usePreview } from "./site-react/lib/preview/usePreview.js";
-import { PreviewSkeleton } from "./site-react/lib/previewskeleton/PreviewSkeleton.js";
+import { default as default2 } from "./site-react/lib/persistedQueries/webpackPersistedQueriesLoader.js";
 export {
   AdminMessageType,
   BlockPreviewProvider,
@@ -78,10 +80,12 @@ export {
   YouTubeVideoBlock,
   calculateInheritAspectRatio,
   convertPreviewDataToHeaders,
+  createFetchInMemoryCache,
   createFetchWithDefaultNextRevalidate,
   createFetchWithDefaults,
   createFetchWithPreviewHeaders,
   createGraphQLFetch,
+  createPersistedQueryGraphQLFetch,
   generateImageUrl,
   getMaxDimensionsFromArea,
   gql,
@@ -90,6 +94,7 @@ export {
   legacyPagesRouterPreviewParams,
   legacyPagesRouterSitePreviewApiHandler,
   parseAspectRatio,
+  persistedQueryRoute,
   previewParams,
   recursivelyLoadBlockData,
   sendSitePreviewIFrameMessage,
@@ -102,5 +107,6 @@ export {
   useLocalStorageCookieApi,
   useOneTrustCookieApi,
   usePreview,
+  default2 as webpackPersistedQueriesLoader,
   withPreview
 };

package/lib/{blocks → site-react/lib/blocks}/DamFileDownloadLinkBlock.js

@@ -1,14 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { cloneElement } from "react";
-import "../site-react/lib/errorHandler/ErrorHandlerProvider.js";
-import "../site-react/lib/iframebridge/IFrameBridge.js";
-import "../site-react/lib/preview/PreviewContext.js";
-import { withPreview } from "../site-react/lib/iframebridge/withPreview.js";
-import "../site-react/lib/cookies/CookieApiContext.js";
-import "usehooks-ts";
-import "scroll-into-view-if-needed";
-import "../site-react/lib/preview/BlockPreviewProvider.js";
+import { withPreview } from "../iframebridge/withPreview.js";
 const DamFileDownloadLinkBlock = withPreview(
   ({ data: { file, openFileType }, children, title, className, legacyBehavior }) => {
     if (!file) {

package/lib/site-react/lib/blocks/DamVideoBlock.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useState, useRef } from "react";
+import { withPreview } from "../iframebridge/withPreview.js";
+import { PreviewSkeleton } from "../previewskeleton/PreviewSkeleton.js";
+import styles from "./DamVideoBlock.module.scss.js";
+import { useIsElementInViewport } from "./helpers/useIsElementInViewport.js";
+const DamVideoBlock = withPreview(
+  ({
+    data: { damFile, autoplay, loop, showControls, previewImage },
+    aspectRatio = "16x9",
+    previewImageSizes,
+    renderPreviewImage,
+    fill,
+    previewImageIcon,
+    playButtonAriaLabel
+  }) => {
+    var _a;
+    if (damFile === void 0) {
+      return /* @__PURE__ */ jsx(PreviewSkeleton, { type: "media", hasContent: false, aspectRatio });
+    }
+    const [showPreviewImage, setShowPreviewImage] = useState(true);
+    const hasPreviewImage = Boolean(previewImage && previewImage.damFile);
+    const videoRef = useRef(null);
+    useIsElementInViewport(videoRef, (inView) => {
+      if (autoplay && videoRef.current) {
+        if (inView) {
+          videoRef.current.play();
+        } else {
+          videoRef.current.pause();
+        }
+      }
+    });
+    return /* @__PURE__ */ jsx(Fragment, { children: hasPreviewImage && showPreviewImage ? renderPreviewImage({
+      onPlay: () => setShowPreviewImage(false),
+      image: previewImage,
+      aspectRatio,
+      sizes: previewImageSizes,
+      fill,
+      icon: previewImageIcon,
+      playButtonAriaLabel
+    }) : /* @__PURE__ */ jsxs(
+      "video",
+      {
+        autoPlay: autoplay || hasPreviewImage && !showPreviewImage,
+        controls: showControls,
+        loop,
+        playsInline: true,
+        muted: autoplay,
+        ref: videoRef,
+        className: clsx(styles.video, fill && styles.fill),
+        style: !fill ? { "--aspect-ratio": aspectRatio.replace("x", " / ") } : void 0,
+        children: [
+          (_a = damFile.captions) == null ? void 0 : _a.map((caption) => {
+            return /* @__PURE__ */ jsx("track", { src: caption.fileUrl, kind: "captions", srcLang: caption.language }, caption.id);
+          }),
+          /* @__PURE__ */ jsx("source", { src: damFile.fileUrl, type: damFile.mimetype })
+        ]
+      }
+    ) });
+  },
+  { label: "Video" }
+);
+export {
+  DamVideoBlock
+};

package/lib/{blocks → site-react/lib/blocks}/ExternalLinkBlock.js

@@ -1,15 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { cloneElement } from "react";
-import "../site-react/lib/errorHandler/ErrorHandlerProvider.js";
-import { usePreview } from "../site-react/lib/preview/usePreview.js";
-import "../site-react/lib/iframebridge/withPreview.js";
-import "../site-react/lib/cookies/CookieApiContext.js";
-import "usehooks-ts";
-import "../site-react/lib/iframebridge/IFrameBridge.js";
-import "scroll-into-view-if-needed";
-import "../site-react/lib/preview/BlockPreviewProvider.js";
-import "../site-react/lib/preview/PreviewContext.js";
+import { usePreview } from "../preview/usePreview.js";
 import { sendSitePreviewIFrameMessage } from "../sitePreview/iframebridge/sendSitePreviewIFrameMessage.js";
 import { SitePreviewIFrameMessageType } from "../sitePreview/iframebridge/SitePreviewIFrameMessage.js";
 function ExternalLinkBlock({ data: { targetUrl, openInNewWindow }, children, title, className, legacyBehavior }) {

package/lib/site-react/lib/blocks/VimeoVideoBlock.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useState, useRef } from "react";
+import { withPreview } from "../iframebridge/withPreview.js";
+import { PreviewSkeleton } from "../previewskeleton/PreviewSkeleton.js";
+import { useIsElementInViewport } from "./helpers/useIsElementInViewport.js";
+import styles from "./VimeoVideoBlock.module.scss.js";
+function parseVimeoIdentifier(vimeoIdentifier) {
+  const urlRegEx = /^(https?:\/\/)?((www\.|player\.)?vimeo\.com\/?(showcase\/)*([0-9a-z]*\/)*([0-9]{6,11})[?]?.*)$/;
+  const idRegEx = /^([0-9]{6,11})$/;
+  const urlRegExMatch = vimeoIdentifier.match(urlRegEx);
+  const idRegExMatch = vimeoIdentifier.match(idRegEx);
+  if (!urlRegExMatch && !idRegExMatch) return void 0;
+  if (urlRegExMatch) {
+    return urlRegExMatch[6];
+  } else if (idRegExMatch) {
+    return idRegExMatch[1];
+  }
+}
+const VimeoVideoBlock = withPreview(
+  ({
+    data: { vimeoIdentifier, autoplay, loop, showControls, previewImage },
+    aspectRatio = "16x9",
+    previewImageSizes,
+    renderPreviewImage,
+    fill,
+    previewImageIcon,
+    playButtonAriaLabel
+  }) => {
+    const [showPreviewImage, setShowPreviewImage] = useState(true);
+    const hasPreviewImage = !!(previewImage && previewImage.damFile);
+    const inViewRef = useRef(null);
+    const iframeRef = useRef(null);
+    const handleVisibilityChange = (isVisible) => {
+      var _a, _b;
+      (_b = (_a = iframeRef.current) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.postMessage(
+        JSON.stringify({ method: isVisible && autoplay ? "play" : "pause" }),
+        "https://player.vimeo.com"
+      );
+    };
+    useIsElementInViewport(inViewRef, handleVisibilityChange);
+    if (!vimeoIdentifier) {
+      return /* @__PURE__ */ jsx(PreviewSkeleton, { type: "media", hasContent: false, aspectRatio });
+    }
+    const identifier = parseVimeoIdentifier(vimeoIdentifier);
+    const searchParams = new URLSearchParams();
+    if (hasPreviewImage && !showPreviewImage) searchParams.append("autoplay", "1");
+    if (autoplay) searchParams.append("muted", "1");
+    if (loop !== void 0) searchParams.append("loop", Number(loop).toString());
+    if (showControls !== void 0) searchParams.append("controls", Number(showControls).toString());
+    searchParams.append("dnt", "1");
+    const vimeoBaseUrl = "https://player.vimeo.com/video/";
+    const vimeoUrl = new URL(`${vimeoBaseUrl}${identifier ?? ""}`);
+    vimeoUrl.search = searchParams.toString();
+    return /* @__PURE__ */ jsx(Fragment, { children: hasPreviewImage && showPreviewImage ? renderPreviewImage({
+      onPlay: () => setShowPreviewImage(false),
+      image: previewImage,
+      aspectRatio,
+      sizes: previewImageSizes,
+      fill,
+      icon: previewImageIcon,
+      playButtonAriaLabel
+    }) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: inViewRef,
+        className: clsx(styles.videoContainer, fill && styles.fill),
+        style: !fill ? { "--aspect-ratio": aspectRatio.replace("x", "/") } : void 0,
+        children: /* @__PURE__ */ jsx("iframe", { ref: iframeRef, className: styles.vimeoContainer, src: vimeoUrl.toString(), allow: "autoplay", allowFullScreen: true })
+      }
+    ) });
+  },
+  { label: "Video" }
+);
+export {
+  VimeoVideoBlock
+};

package/lib/site-react/lib/blocks/YouTubeVideoBlock.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useState, useRef } from "react";
+import { withPreview } from "../iframebridge/withPreview.js";
+import { PreviewSkeleton } from "../previewskeleton/PreviewSkeleton.js";
+import { useIsElementInViewport } from "./helpers/useIsElementInViewport.js";
+import styles from "./YouTubeVideoBlock.module.scss.js";
+const EXPECTED_YT_ID_LENGTH = 11;
+const parseYoutubeIdentifier = (value) => {
+  const regExp = /(https?:\/\/)?(((m|www)\.)?(youtube(-nocookie)?|youtube.googleapis)\.com.*(v\/|v=|vi=|vi\/|e\/|embed\/|user\/.*\/u\/\d+\/)|youtu\.be\/)([_0-9a-zA-Z-]+)/;
+  const match = value.match(regExp);
+  const youtubeId = value.length === EXPECTED_YT_ID_LENGTH ? value : match && match[8].length === EXPECTED_YT_ID_LENGTH ? match[8] : null;
+  return youtubeId ?? void 0;
+};
+const YouTubeVideoBlock = withPreview(
+  ({
+    data: { youtubeIdentifier, autoplay, loop, showControls, previewImage },
+    aspectRatio = "16x9",
+    previewImageSizes,
+    renderPreviewImage,
+    fill,
+    previewImageIcon,
+    playButtonAriaLabel
+  }) => {
+    const [showPreviewImage, setShowPreviewImage] = useState(true);
+    const hasPreviewImage = !!(previewImage && previewImage.damFile);
+    const iframeRef = useRef(null);
+    const inViewRef = useRef(null);
+    const pauseYouTubeVideo = () => {
+      var _a, _b;
+      (_b = (_a = iframeRef.current) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.postMessage(`{"event":"command","func":"pauseVideo","args":""}`, "https://www.youtube-nocookie.com");
+    };
+    const playYouTubeVideo = () => {
+      var _a, _b;
+      (_b = (_a = iframeRef.current) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.postMessage(`{"event":"command","func":"playVideo","args":""}`, "https://www.youtube-nocookie.com");
+    };
+    useIsElementInViewport(inViewRef, (inView) => {
+      if (autoplay) {
+        if (inView) {
+          playYouTubeVideo();
+        } else {
+          pauseYouTubeVideo();
+        }
+      }
+    });
+    if (!youtubeIdentifier) {
+      return /* @__PURE__ */ jsx(PreviewSkeleton, { type: "media", hasContent: false, aspectRatio });
+    }
+    const identifier = parseYoutubeIdentifier(youtubeIdentifier);
+    const searchParams = new URLSearchParams();
+    searchParams.append("modestbranding", "1");
+    searchParams.append("rel", "0");
+    searchParams.append("enablejsapi", "1");
+    if (hasPreviewImage && !showPreviewImage) searchParams.append("autoplay", "1");
+    if (autoplay) searchParams.append("mute", "1");
+    if (showControls !== void 0) searchParams.append("controls", Number(showControls).toString());
+    if (loop !== void 0) searchParams.append("loop", Number(loop).toString());
+    if (loop && identifier) searchParams.append("playlist", identifier);
+    const youtubeBaseUrl = "https://www.youtube-nocookie.com/embed/";
+    const youtubeUrl = new URL(`${youtubeBaseUrl}${identifier ?? ""}`);
+    youtubeUrl.search = searchParams.toString();
+    return /* @__PURE__ */ jsx(Fragment, { children: hasPreviewImage && showPreviewImage ? renderPreviewImage({
+      onPlay: () => setShowPreviewImage(false),
+      image: previewImage,
+      aspectRatio,
+      sizes: previewImageSizes,
+      fill,
+      icon: previewImageIcon,
+      playButtonAriaLabel
+    }) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: inViewRef,
+        className: clsx(styles.videoContainer, fill && styles.fill),
+        style: !fill ? { "--aspect-ratio": aspectRatio.replace("x", "/") } : void 0,
+        children: /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            ref: iframeRef,
+            className: styles.youtubeContainer,
+            allow: "autoplay",
+            referrerPolicy: "strict-origin-when-cross-origin",
+            src: youtubeUrl.toString()
+          }
+        )
+      }
+    ) });
+  },
+  { label: "Video" }
+);
+export {
+  YouTubeVideoBlock
+};

package/lib/site-react/lib/blocks/helpers/VideoPreviewImage.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import styles from "./VideoPreviewImage.module.scss.js";
+const VideoPreviewImage = ({
+  onPlay,
+  image,
+  aspectRatio,
+  sizes = "100vw",
+  fill,
+  playButtonAriaLabel = "Play video",
+  icon = /* @__PURE__ */ jsx(PlayIcon, { playButtonAriaLabel }),
+  className,
+  renderImage
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, fill && styles.fill, className), children: [
+    renderImage({ data: image, aspectRatio, sizes, fill }),
+    /* @__PURE__ */ jsx("button", { className: styles.iconWrapper, onClick: onPlay, children: icon })
+  ] });
+};
+const PlayIcon = ({ playButtonAriaLabel }) => /* @__PURE__ */ jsx("span", { className: styles.playIcon, "aria-label": playButtonAriaLabel });
+export {
+  VideoPreviewImage
+};

package/lib/site-react/lib/graphQLFetch/fetchInMemoryCache.js

@@ -1,7 +1,7 @@
 const cache = {};
 function createFetchInMemoryCache(fetch) {
   return async function(input, init) {
-    var _a;
+    var _a, _b;
     let cacheKey;
     if ((init == null ? void 0 : init.cache) === "no-store") ;
     else if (((_a = init == null ? void 0 : init.method) == null ? void 0 : _a.toUpperCase()) === "GET") {
@@ -11,7 +11,7 @@ function createFetchInMemoryCache(fetch) {
       if (bodyString.startsWith("{")) {
         try {
           const body = JSON.parse(init.body.toString());
-          if (body.query && body.variables) {
+          if ((body.query || ((_b = body.extensions) == null ? void 0 : _b.persistedQuery)) && body.variables) {
             cacheKey = `${input.toString()}#${init.body.toString()}`;
           }
         } catch {

package/lib/site-react/lib/iframebridge/IFrameBridge.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { decodeJwt } from "jose";
 import isEqual from "lodash.isequal";
-import { createContext, useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { useState, useRef, useCallback, useEffect, useMemo, createContext } from "react";
 import { useDebounceCallback } from "usehooks-ts";
 import styles from "./IFrameBridge.module.scss.js";
 import { AdminMessageType, IFrameMessageType } from "./IFrameMessage.js";

package/lib/site-react/lib/iframebridge/withPreview.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
+import { useContext, createContext } from "react";
 import { Preview } from "./Preview.js";
 function isWithPreviewPropsData(block) {
   return block.adminMeta !== void 0;

package/lib/site-react/lib/persistedQueries/createPersistedQueryGraphQLFetch.js

@@ -0,0 +1,68 @@
+function createPersistedQueryGraphQLFetch(fetch, url) {
+  return async function(query, variables, init) {
+    if (typeof query === "string") throw new Error("at runtime only hashed queries are supported");
+    const hash = query.hash;
+    let response;
+    if ((init == null ? void 0 : init.method) === "GET") {
+      const fetchUrl = new URL(url, window.location.origin);
+      fetchUrl.searchParams.append("extensions.persistedQuery.sha256Hash", hash);
+      fetchUrl.searchParams.append("variables", JSON.stringify(variables));
+      response = await fetch(fetchUrl, {
+        ...init,
+        headers: {
+          /**
+           * It's recommended to add the `Apollo-Require-Preflight` header to GET requests, running on an Apollo Server 4.
+           *
+           * If this header is missing, Apollo Server 4 will return: This operation has been blocked as a potential Cross-Site Request Forgery (CSRF).
+           *
+           * see: https://www.apollographql.com/docs/graphos/routing/security/csrf#enable-csrf-prevention
+           */
+          "Apollo-Require-Preflight": "true",
+          ...init.headers
+        }
+      });
+    } else {
+      response = await fetch(url, {
+        method: "POST",
+        ...init,
+        headers: { "Content-Type": "application/json", ...init == null ? void 0 : init.headers },
+        body: JSON.stringify({
+          extensions: {
+            persistedQuery: {
+              version: 1,
+              sha256Hash: hash
+            }
+          },
+          variables
+        })
+      });
+    }
+    if (!response.ok) {
+      let errorMessage = `Network response was not ok. Status: ${response.status}`;
+      const body = await response.text();
+      try {
+        const json = JSON.parse(body);
+        const { errors: errors2 } = json;
+        if (errors2) {
+          errorMessage += `
+
+GraphQL error(s):
+- ${errors2.map((error) => error.message).join("\n- ")}`;
+        }
+      } catch {
+        errorMessage += `
+${body}`;
+      }
+      throw new Error(errorMessage);
+    }
+    const { data, errors } = await response.json();
+    if (errors) {
+      throw new Error(`GraphQL error(s):
+- ${errors.map((error) => error.message).join("\n- ")}`);
+    }
+    return data;
+  };
+}
+export {
+  createPersistedQueryGraphQLFetch
+};

package/lib/site-react/lib/persistedQueries/persistedQueryRoute.js

@@ -0,0 +1,100 @@
+import { readFile } from "fs/promises";
+let queryMap;
+let fragmentsMap;
+async function loadPersistedQueries(path) {
+  const file = await readFile(path, { encoding: "utf-8" });
+  queryMap = JSON.parse(file.toString());
+  fragmentsMap = {};
+  for (const [, query] of Object.entries(queryMap)) {
+    const match = query.match(/^\s*fragment\s+(\w+)\s+on\s+\w+/m);
+    if (match) {
+      const fragmentName = match[1];
+      fragmentsMap[fragmentName] = query.replace(/\${.*?}/g, "");
+    }
+  }
+}
+function injectFragments(query) {
+  query = query.replace(/\${.*?}/g, "");
+  const injected = /* @__PURE__ */ new Set();
+  for (const m of query.matchAll(/^\s*fragment\s+(\w+)\s+on\s+\w+/gm)) {
+    injected.add(m[1]);
+  }
+  function inject(q) {
+    const spreads = Array.from(q.matchAll(/\.\.\.(\w+)/g)).map((m) => m[1]);
+    let result = q;
+    for (const fragmentName of spreads) {
+      if (!injected.has(fragmentName) && fragmentsMap[fragmentName]) {
+        injected.add(fragmentName);
+        result += `
+${inject(fragmentsMap[fragmentName])}`;
+      }
+    }
+    return result;
+  }
+  query = inject(query);
+  return query;
+}
+async function persistedQueryRoute(req, {
+  graphqlTarget,
+  headers: headersInit,
+  persistedQueriesPath = ".persisted-queries.json",
+  cacheMaxAge
+}) {
+  var _a, _b;
+  if (!queryMap) {
+    await loadPersistedQueries(persistedQueriesPath);
+  }
+  let hash;
+  let variables;
+  if (req.method === "POST") {
+    const body = await req.json();
+    hash = (_b = (_a = body.extensions) == null ? void 0 : _a.persistedQuery) == null ? void 0 : _b.sha256Hash;
+    variables = body.variables;
+  } else if (req.method === "GET") {
+    const url = new URL(req.url);
+    hash = url.searchParams.get("extensions.persistedQuery.sha256Hash");
+    const variablesParam = url.searchParams.get("variables");
+    variables = variablesParam ? JSON.parse(variablesParam) : void 0;
+  } else {
+    return Response.json({ error: "MethodNotAllowed" }, { status: 405 });
+  }
+  if (!hash) {
+    return Response.json({ error: "OnlyPersistedQueriesAllowed" }, { status: 400 });
+  }
+  let query = queryMap[hash];
+  if (!query) {
+    return Response.json({ error: "PersistedQueryNotFound", hash }, { status: 400 });
+  }
+  query = injectFragments(query);
+  if (req.method === "GET") {
+    const apolloPreflight = req.headers.get("Apollo-Require-Preflight");
+    if (apolloPreflight !== "true") {
+      return Response.json({ error: "CSRFProtection", message: "Missing Apollo-Require-Preflight header" }, { status: 403 });
+    }
+  }
+  const headers = new Headers(headersInit);
+  headers.set("Content-Type", "application/json");
+  for (const header of ["x-include-invisible-content", "x-preview-dam-urls"]) {
+    const value = req.headers.get(header);
+    if (value !== null) {
+      headers.set(header, value);
+    }
+  }
+  const upstreamRes = await fetch(graphqlTarget, {
+    method: "POST",
+    headers,
+    body: JSON.stringify({ query, variables })
+  });
+  const responseHeaders = {
+    "Content-Type": "application/json"
+  };
+  if (req.method === "GET" && upstreamRes.ok && cacheMaxAge !== void 0) {
+    responseHeaders["Cache-Control"] = `public, max-age=${cacheMaxAge}`;
+  }
+  return new Response(upstreamRes.body, {
+    headers: responseHeaders
+  });
+}
+export {
+  persistedQueryRoute
+};

package/lib/site-react/lib/persistedQueries/webpackPersistedQueriesLoader.js

@@ -0,0 +1,51 @@
+import { createHash } from "crypto";
+import * as fs from "fs";
+function loadHashMap(path) {
+  if (fs.existsSync(path)) {
+    return JSON.parse(fs.readFileSync(path, "utf-8"));
+  }
+  return {};
+}
+function saveHashMap(path, hashMap) {
+  fs.writeFileSync(path, JSON.stringify(hashMap, null, 2));
+}
+function hashQuery(query) {
+  return createHash("sha256").update(query).digest("hex");
+}
+const gqlTagRegex = /gql`([\s\S]*?)`/gm;
+const webpackPersistedQueriesLoader = function(source) {
+  const options = this.getOptions() || {};
+  const persistedQueriesPath = options.persistedQueriesPath || ".persisted-queries.json";
+  const hashMap = loadHashMap(persistedQueriesPath);
+  const replacements = [];
+  let match;
+  while ((match = gqlTagRegex.exec(source)) !== null) {
+    const query = match[1];
+    const hash = hashQuery(query);
+    hashMap[hash] = query;
+    const fragmentVariables = Array.from(query.matchAll(/\${.*?}/g) ?? []).map((m) => m[0]).join(" ");
+    if (query.match(/^\s*fragment\s+(\w+)\s+on\s+\w+/)) {
+      replacements.push({
+        start: match.index,
+        end: match.index + match[0].length,
+        replacement: `{ fragment: true, fragmentVariables: \`${fragmentVariables}\` }`
+      });
+    } else {
+      replacements.push({
+        start: match.index,
+        end: match.index + match[0].length,
+        replacement: `{ hash: "${hash}", fragmentVariables: \`${fragmentVariables}\` }`
+      });
+    }
+  }
+  let modifiedSource = source;
+  for (let i = replacements.length - 1; i >= 0; i--) {
+    const { start, end, replacement } = replacements[i];
+    modifiedSource = modifiedSource.slice(0, start) + replacement + modifiedSource.slice(end);
+  }
+  saveHashMap(persistedQueriesPath, hashMap);
+  return modifiedSource;
+};
+export {
+  webpackPersistedQueriesLoader as default
+};