@prismicio/next 0.1.2 → 0.1.3

package/dist/index.js

@@ -1,7 +1,9 @@
 import * as prismic from '@prismicio/client';
-import React, { useEffect } from 'react';
+import * as React from 'react';
 import { PrismicToolbar } from '@prismicio/react';
 import { useRouter } from 'next/router';
+import Image from 'next/image';
+import * as prismicH from '@prismicio/helpers';
 
 function setPreviewData({ req, res }) {
   const ref = req.query.token || req.cookies[prismic.cookie.preview];
@@ -11,65 +13,29 @@ function setPreviewData({ req, res }) {
 }
 
 function exitPreview(config) {
-  const { req } = config;
   config.res.clearPreviewData();
-  if (req.headers.referer) {
-    const url = new URL(req.headers.referer);
-    if (url.pathname !== "/api/exit-preview") {
-      config.res.redirect(req.headers.referer);
-      return;
-    }
-  }
-  config.res.redirect("/");
+  config.res.json({ success: true });
 }
 
 const readValue = (value) => {
   return value.replace(/%3B/g, ";");
 };
-const parse = (cookieString) => {
-  const result = {};
-  const cookies = cookieString.split("; ");
+const getCookie = (name, cookieJar) => {
+  const cookies = cookieJar.split("; ");
   for (const cookie of cookies) {
     const parts = cookie.split("=");
-    const value = parts.slice(1).join("=");
-    const name = readValue(parts[0]).replace(/%3D/g, "=");
-    result[name] = readValue(value);
-  }
-  return result;
-};
-const getAll = (cookieStore) => parse(cookieStore);
-const getCookie = (name, cookieStore) => getAll(cookieStore)[name];
-
-const extractFirstSubdomain = (host) => host.split(".")[0];
-const extractRepositoryNameFromObjectRef = (previewRef) => {
-  try {
-    const parsed = JSON.parse(decodeURIComponent(previewRef));
-    const keys = Object.keys(parsed);
-    const domainKey = keys.find((key) => /\.prismic\.io$/.test(key));
-    if (domainKey) {
-      return extractFirstSubdomain(domainKey);
-    } else {
-      return void 0;
+    const thisName = readValue(parts[0]).replace(/%3D/g, "=");
+    if (thisName === name) {
+      const value = parts.slice(1).join("=");
+      return readValue(value);
     }
-  } catch (e) {
-    return void 0;
-  }
-};
-const extractRepositoryNameFromURLRef = (previewRef) => {
-  try {
-    const url = new URL(previewRef);
-    return extractFirstSubdomain(url.host);
-  } catch (e) {
-    return void 0;
   }
 };
-const extractPreviewRefRepositoryName = (previewRef) => {
-  return extractRepositoryNameFromObjectRef(previewRef) || extractRepositoryNameFromURLRef(previewRef);
-};
 
-const isPrismicUpdateToolbarEvent = (event) => {
-  return "detail" in event && typeof event.detail.ref === "string";
+const getPreviewCookieRepositoryName = (previewCookie) => {
+  return (decodeURIComponent(previewCookie).match(/"(.+).prismic.io"/) || [])[1];
 };
+
 function PrismicPreview({
   repositoryName,
   children,
@@ -77,41 +43,57 @@ function PrismicPreview({
   exitPreviewURL = "/api/exit-preview"
 }) {
   const router = useRouter();
-  useEffect(() => {
-    const previewRefRepositoryName = extractPreviewRefRepositoryName(getCookie("io.prismic.preview", globalThis.document.cookie));
-    const startPreviewIfLoadedFromSharedLink = async () => {
-      if (previewRefRepositoryName === repositoryName && !router.isPreview) {
-        await fetch(updatePreviewURL);
-        window.location.reload();
+  const resolvedUpdatePreviewURL = router.basePath + updatePreviewURL;
+  const resolvedExitPreviewURL = router.basePath + exitPreviewURL;
+  React.useEffect(() => {
+    const startPreviewMode = async () => {
+      const res = await globalThis.fetch(resolvedUpdatePreviewURL);
+      if (res.ok) {
+        globalThis.location.reload();
+      } else {
+        console.error(`[<PrismicPreview>] Failed to start or update Preview Mode using the "${resolvedUpdatePreviewURL}" API endpoint. Does it exist?`);
       }
     };
-    startPreviewIfLoadedFromSharedLink();
     const handlePrismicPreviewUpdate = async (event) => {
-      if (isPrismicUpdateToolbarEvent(event)) {
-        event.preventDefault();
-        await fetch(updatePreviewURL);
-        window.location.reload();
-      }
+      event.preventDefault();
+      await startPreviewMode();
     };
     const handlePrismicPreviewEnd = async (event) => {
       event.preventDefault();
-      await fetch(exitPreviewURL);
-      window.location.reload();
+      const res = await globalThis.fetch(resolvedExitPreviewURL);
+      if (res.ok) {
+        globalThis.location.reload();
+      } else {
+        console.error(`[<PrismicPreview>] Failed to exit Preview Mode using the "${resolvedExitPreviewURL}" API endpoint. Does it exist?`);
+      }
     };
-    if (window) {
+    if (router.isPreview) {
       window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
       window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
+    } else {
+      const prismicPreviewCookie = getCookie(prismic.cookie.preview, globalThis.document.cookie);
+      if (prismicPreviewCookie) {
+        const locationIsDescendantOfBasePath = window.location.href.startsWith(window.location.origin + router.basePath);
+        const prismicPreviewCookieRepositoryName = getPreviewCookieRepositoryName(prismicPreviewCookie);
+        if (locationIsDescendantOfBasePath && prismicPreviewCookieRepositoryName === repositoryName) {
+          startPreviewMode();
+        }
+      }
     }
     return () => {
-      if (window) {
-        window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
-        window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
-      }
+      window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+      window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
     };
-  }, []);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PrismicToolbar, {
+  }, [
+    repositoryName,
+    resolvedExitPreviewURL,
+    resolvedUpdatePreviewURL,
+    router.isPreview,
+    router.basePath
+  ]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children, /* @__PURE__ */ React.createElement(PrismicToolbar, {
     repositoryName
-  }), children);
+  }));
 }
 
 const isPrismicNextPreviewData = (previewData) => {
@@ -128,26 +110,101 @@ const enableAutoPreviews = (config) => {
   }
 };
 
-const isPrismicNextQuery = (query) => typeof query.documentId === "string" && typeof query.token === "string";
-async function redirectToPreviewURL({
-  req,
-  res,
-  client,
-  linkResolver,
-  defaultURL = "/"
-}) {
-  if (isPrismicNextQuery(req.query)) {
-    const { documentId, token } = req.query;
-    const previewUrl = await client.resolvePreviewURL({
-      linkResolver,
+const isPrismicNextQuery = (query) => {
+  return typeof query.documentId === "string" && typeof query.token === "string";
+};
+async function redirectToPreviewURL(config) {
+  const defaultURL = config.defaultURL || "/";
+  const basePath = config.basePath || "";
+  if (isPrismicNextQuery(config.req.query)) {
+    const previewUrl = await config.client.resolvePreviewURL({
+      linkResolver: config.linkResolver,
       defaultURL,
-      documentID: documentId,
-      previewToken: token
+      documentID: config.req.query.documentId,
+      previewToken: config.req.query.token
     });
-    res.redirect(previewUrl);
+    config.res.redirect(basePath + previewUrl);
     return;
   }
-  res.redirect(defaultURL);
+  config.res.redirect(basePath + defaultURL);
 }
 
-export { PrismicPreview, enableAutoPreviews, exitPreview, redirectToPreviewURL, setPreviewData };
+const camelCaseToParamCase = (input) => {
+  return input.replace(/[A-Z]/g, (match) => {
+    return `-${match.toLowerCase()}`;
+  });
+};
+const buildURL = (url, params) => {
+  const instance = new URL(url);
+  for (const camelCasedParamKey in params) {
+    const paramKey = camelCaseToParamCase(camelCasedParamKey);
+    const paramValue = params[camelCasedParamKey];
+    if (paramValue === void 0) {
+      instance.searchParams.delete(paramKey);
+    } else if (Array.isArray(paramValue)) {
+      instance.searchParams.set(paramKey, paramValue.join(","));
+    } else {
+      instance.searchParams.set(paramKey, `${paramValue}`);
+    }
+  }
+  const s = instance.searchParams.get("s");
+  if (s) {
+    instance.searchParams.delete("s");
+    instance.searchParams.append("s", s);
+  }
+  return instance.toString();
+};
+
+const __PRODUCTION__ = process.env.NODE_ENV === "production";
+
+var version = "0.1.3";
+
+const devMsg = (slug) => {
+  return `https://prismic.dev/msg/next/v${version}/${slug}`;
+};
+
+const imgixLoader = (args) => {
+  const url = new URL(args.src);
+  const params = {
+    fit: url.searchParams.get("fit") || "max",
+    w: args.width,
+    h: void 0
+  };
+  if (args.quality) {
+    params.q = args.quality;
+  }
+  return buildURL(args.src, params);
+};
+const PrismicNextImage = ({
+  field,
+  imgixParams = {},
+  alt,
+  fallbackAlt,
+  layout,
+  ...restProps
+}) => {
+  if (!__PRODUCTION__) {
+    if (typeof alt === "string" && alt !== "") {
+      console.warn(`[PrismicNextImage] The "alt" prop can only be used to declare an image as decorative by passing an empty string (alt="") but was provided a non-empty string. You can resolve this warning by removing the "alt" prop or changing it to alt="". For more details, see ${devMsg("alt-must-be-an-empty-string")}`);
+    }
+    if (typeof fallbackAlt === "string" && fallbackAlt !== "") {
+      console.warn(`[PrismicNextImage] The "fallbackAlt" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt="") but was provided a non-empty string. You can resolve this warning by removing the "fallbackAlt" prop or changing it to fallbackAlt="". For more details, see ${devMsg("alt-must-be-an-empty-string")}`);
+    }
+  }
+  if (prismicH.isFilled.imageThumbnail(field)) {
+    const src = buildURL(field.url, imgixParams);
+    return /* @__PURE__ */ React.createElement(Image, {
+      src,
+      width: layout === "fill" ? void 0 : field.dimensions.width,
+      height: layout === "fill" ? void 0 : field.dimensions.height,
+      alt: alt != null ? alt : field.alt || fallbackAlt,
+      loader: imgixLoader,
+      layout,
+      ...restProps
+    });
+  } else {
+    return null;
+  }
+};
+
+export { PrismicNextImage, PrismicPreview, enableAutoPreviews, exitPreview, redirectToPreviewURL, setPreviewData };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/next",
-	"version": "0.1.2",
+	"version": "0.1.3",
 	"description": "Helpers to integrate Prismic into Next.js apps",
 	"keywords": [
 		"typescript",
@@ -41,44 +41,40 @@
 		"release:dry": "standard-version --dry-run",
 		"size": "size-limit",
 		"test": "npm run lint && npm run unit && npm run build && npm run size",
-		"unit": "nyc --reporter=lcovonly --reporter=text --exclude-after-remap=false ava"
+		"unit": "vitest run --coverage",
+		"unit:watch": "vitest watch"
 	},
 	"dependencies": {
-		"@prismicio/react": "^2.2.0"
+		"@prismicio/client": "^6.4.3",
+		"@prismicio/helpers": "^2.3.0",
+		"@prismicio/react": "^2.4.0",
+		"@prismicio/types": "^0.1.27",
+		"eslint-plugin-react": "^7.30.0",
+		"eslint-plugin-react-hooks": "^4.5.0"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^6.4.2",
-		"@prismicio/mock": "^0.0.9",
-		"@prismicio/types": "^0.1.27",
+		"@prismicio/mock": "^0.0.10",
 		"@size-limit/preset-small-lib": "^7.0.8",
-		"@testing-library/react": "^13.0.0",
-		"@types/jsdom": "^16.2.14",
-		"@types/jsdom-global": "^3.0.2",
-		"@types/react-test-renderer": "^17.0.1",
-		"@types/sinon": "^10.0.11",
-		"@typescript-eslint/eslint-plugin": "^5.17.0",
-		"@typescript-eslint/parser": "^5.17.0",
-		"ava": "^4.1.0",
-		"eslint": "^8.12.0",
+		"@types/react-test-renderer": "^18.0.0",
+		"@typescript-eslint/eslint-plugin": "^5.26.0",
+		"@typescript-eslint/parser": "^5.26.0",
+		"c8": "^7.11.3",
+		"eslint": "^8.16.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-prettier": "^4.0.0",
-		"eslint-plugin-tsdoc": "^0.2.14",
-		"jsdom": "^19.0.0",
-		"jsdom-global": "^3.0.2",
-		"msw": "^0.39.2",
+		"eslint-plugin-tsdoc": "^0.2.16",
+		"happy-dom": "^4.0.1",
 		"next": "^12.1.4",
-		"node-fetch": "^3.2.3",
 		"nyc": "^15.1.0",
-		"prettier": "^2.6.1",
-		"prettier-plugin-jsdoc": "^0.3.35",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0",
-		"sinon": "^13.0.1",
+		"prettier": "^2.6.2",
+		"prettier-plugin-jsdoc": "^0.3.38",
+		"react": "^18.1.0",
+		"react-test-renderer": "^18.1.0",
 		"siroc": "^0.16.0",
 		"size-limit": "^7.0.8",
-		"standard-version": "^9.3.2",
-		"ts-eager": "^2.0.2",
-		"typescript": "^4.6.3"
+		"standard-version": "^9.5.0",
+		"typescript": "^4.7.2",
+		"vitest": "^0.12.9"
 	},
 	"peerDependencies": {
 		"@prismicio/client": "^6.0.0",

package/src/PrismicNextImage.tsx

@@ -0,0 +1,125 @@
+import * as React from "react";
+import Image, { ImageProps, ImageLoaderProps } from "next/image";
+import { buildURL, ImgixURLParams } from "imgix-url-builder";
+import * as prismicH from "@prismicio/helpers";
+import * as prismicT from "@prismicio/types";
+
+import { __PRODUCTION__ } from "./lib/__PRODUCTION__";
+import { devMsg } from "./lib/devMsg";
+
+/**
+ * Creates a `next/image` loader for Imgix, which Prismic uses, with an optional
+ * collection of default Imgix parameters.
+ *
+ * @see To learn about `next/image` loaders: https://nextjs.org/docs/api-reference/next/image#loader
+ * @see To learn about Imgix's URL API: https://docs.imgix.com/apis/rendering
+ */
+const imgixLoader = (args: ImageLoaderProps): string => {
+	const url = new URL(args.src);
+
+	const params: ImgixURLParams = {
+		fit: (url.searchParams.get("fit") as ImgixURLParams["fit"]) || "max",
+		w: args.width,
+		h: undefined,
+	};
+
+	if (args.quality) {
+		params.q = args.quality;
+	}
+
+	return buildURL(args.src, params);
+};
+
+export type PrismicNextImageProps = Omit<
+	ImageProps,
+	"src" | "alt" | "width" | "height"
+> & {
+	/**
+	 * The Prismic Image field or thumbnail to render.
+	 */
+	field: prismicT.ImageFieldImage | null | undefined;
+
+	/**
+	 * An object of Imgix URL API parameters to transform the image.
+	 *
+	 * @see https://docs.imgix.com/apis/rendering
+	 */
+	imgixParams?: ImgixURLParams;
+
+	/**
+	 * Declare an image as decorative by providing `alt=""`.
+	 *
+	 * See:
+	 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+	 */
+	alt?: "";
+
+	/**
+	 * Declare an image as decorative only if the Image field does not have
+	 * alternative text by providing `fallbackAlt=""`.
+	 *
+	 * See:
+	 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+	 */
+	fallbackAlt?: "";
+};
+
+/**
+ * React component that renders an image from a Prismic Image field or one of
+ * its thumbnails using `next/image`. It will automatically set the `alt`
+ * attribute using the Image field's `alt` property.
+ *
+ * It uses an Imgix URL-based loader by default. A custom loader can be provided
+ * with the `loader` prop. If you would like to use the Next.js Image
+ * Optimization API instead, set `loader={undefined}`.
+ *
+ * @param props - Props for the component.
+ *
+ * @returns A responsive image component using `next/image` for the given Image field.
+ *
+ * @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image
+ */
+export const PrismicNextImage = ({
+	field,
+	imgixParams = {},
+	alt,
+	fallbackAlt,
+	layout,
+	...restProps
+}: PrismicNextImageProps) => {
+	if (!__PRODUCTION__) {
+		if (typeof alt === "string" && alt !== "") {
+			console.warn(
+				`[PrismicNextImage] The "alt" prop can only be used to declare an image as decorative by passing an empty string (alt="") but was provided a non-empty string. You can resolve this warning by removing the "alt" prop or changing it to alt="". For more details, see ${devMsg(
+					"alt-must-be-an-empty-string",
+				)}`,
+			);
+		}
+
+		if (typeof fallbackAlt === "string" && fallbackAlt !== "") {
+			console.warn(
+				`[PrismicNextImage] The "fallbackAlt" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt="") but was provided a non-empty string. You can resolve this warning by removing the "fallbackAlt" prop or changing it to fallbackAlt="". For more details, see ${devMsg(
+					"alt-must-be-an-empty-string",
+				)}`,
+			);
+		}
+	}
+
+	if (prismicH.isFilled.imageThumbnail(field)) {
+		const src = buildURL(field.url, imgixParams);
+
+		return (
+			<Image
+				src={src}
+				width={layout === "fill" ? undefined : field.dimensions.width}
+				height={layout === "fill" ? undefined : field.dimensions.height}
+				alt={alt ?? (field.alt || fallbackAlt)}
+				loader={imgixLoader}
+				layout={layout}
+				{...restProps}
+			/>
+		);
+	} else {
+		return null;
+	}
+};