@prismicio/next 0.1.1 → 0.1.4-alpha.0

package/dist/index.mjs

@@ -1,156 +1,6 @@
-import * as prismic from '@prismicio/client';
-import React, { useEffect } from 'react';
-import { PrismicToolbar } from '@prismicio/react';
-import { useRouter } from 'next/router';
-
-async function setPreviewData({
-  req,
-  res
-}) {
-  const ref = req.query.token || req.cookies[prismic.cookie.preview];
-  if (ref) {
-    res.setPreviewData({ ref });
-  }
-}
-
-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("/");
-}
-
-const readValue = (value) => {
-  return value.replace(/%3B/g, ";");
-};
-const parse = (cookieString) => {
-  const result = {};
-  const cookies = cookieString.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;
-    }
-  } 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";
-};
-function PrismicPreview({
-  repositoryName,
-  children,
-  updatePreviewURL = "/api/preview",
-  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();
-      }
-    };
-    startPreviewIfLoadedFromSharedLink();
-    const handlePrismicPreviewUpdate = async (event) => {
-      if (isPrismicUpdateToolbarEvent(event)) {
-        event.preventDefault();
-        await fetch(updatePreviewURL);
-        window.location.reload();
-      }
-    };
-    const handlePrismicPreviewEnd = async (event) => {
-      event.preventDefault();
-      await fetch(exitPreviewURL);
-      window.location.reload();
-    };
-    if (window) {
-      window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
-      window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
-    }
-    return () => {
-      if (window) {
-        window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
-        window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PrismicToolbar, {
-    repositoryName
-  }), children);
-}
-
-const isPrismicNextPreviewData = (previewData) => {
-  return typeof previewData === "object" && "ref" in previewData;
-};
-const enableAutoPreviews = (config) => {
-  if ("previewData" in config && config.previewData) {
-    const { previewData } = config;
-    if (isPrismicNextPreviewData(previewData) && previewData.ref) {
-      config.client.queryContentFromRef(previewData.ref);
-    }
-  } else if ("req" in config && config.req) {
-    config.client.enableAutoPreviewsFromReq(config.req);
-  }
-};
-
-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,
-      defaultURL,
-      documentID: documentId,
-      previewToken: token
-    });
-    res.redirect(previewUrl);
-    return;
-  }
-  res.redirect(defaultURL);
-}
-
-export { PrismicPreview, enableAutoPreviews, exitPreview, redirectToPreviewURL, setPreviewData };
+export { setPreviewData } from './setPreviewData.mjs';
+export { exitPreview } from './exitPreview.mjs';
+export { PrismicPreview } from './PrismicPreview.mjs';
+export { enableAutoPreviews } from './enableAutoPreviews.mjs';
+export { redirectToPreviewURL } from './redirectToPreviewURL.mjs';
+export { PrismicNextImage } from './PrismicNextImage.mjs';

package/dist/lib/__PRODUCTION__.mjs

@@ -0,0 +1,3 @@
+const __PRODUCTION__ = process.env.NODE_ENV === "production";
+
+export { __PRODUCTION__ };

package/dist/lib/devMsg.mjs

@@ -0,0 +1,7 @@
+import { version } from '../package.mjs';
+
+const devMsg = (slug) => {
+  return `https://prismic.dev/msg/next/v${version}/${slug}`;
+};
+
+export { devMsg };

package/dist/lib/getPreviewCookieRepositoryName.mjs

@@ -0,0 +1,5 @@
+const getPreviewCookieRepositoryName = (previewCookie) => {
+  return (decodeURIComponent(previewCookie).match(/"(.+).prismic.io"/) || [])[1];
+};
+
+export { getPreviewCookieRepositoryName };

package/dist/lib/getPrismicPreviewCookie.mjs

@@ -0,0 +1,20 @@
+import * as prismic from '@prismicio/client';
+
+const readValue = (value) => {
+  return value.replace(/%3B/g, ";");
+};
+const getPrismicPreviewCookie = (cookieJar) => {
+  const cookies = cookieJar.split("; ");
+  let value;
+  for (const cookie of cookies) {
+    const parts = cookie.split("=");
+    const name = readValue(parts[0]).replace(/%3D/g, "=");
+    if (name === prismic.cookie.preview) {
+      value = readValue(parts.slice(1).join("="));
+      continue;
+    }
+  }
+  return value;
+};
+
+export { getPrismicPreviewCookie };

package/dist/package.mjs

@@ -0,0 +1,3 @@
+const version = "0.1.4-alpha.0";
+
+export { version };

package/dist/redirectToPreviewURL.mjs

@@ -0,0 +1,20 @@
+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: config.req.query.documentId,
+      previewToken: config.req.query.token
+    });
+    config.res.redirect(basePath + previewUrl);
+    return;
+  }
+  config.res.redirect(basePath + defaultURL);
+}
+
+export { redirectToPreviewURL };

package/dist/setPreviewData.mjs

@@ -0,0 +1,10 @@
+import * as prismic from '@prismicio/client';
+
+function setPreviewData({ req, res }) {
+  const ref = req.query.token || req.cookies[prismic.cookie.preview];
+  if (ref) {
+    res.setPreviewData({ ref });
+  }
+}
+
+export { setPreviewData };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prismicio/next",
-	"version": "0.1.1",
-	"description": "Integrate Prismic into a Next.js app",
+	"version": "0.1.4-alpha.0",
+	"description": "Helpers to integrate Prismic into Next.js apps",
 	"keywords": [
 		"typescript",
 		"prismic",
@@ -15,66 +15,63 @@
 	},
 	"license": "Apache-2.0",
 	"author": "Prismic <contact@prismic.io> (https://prismic.io)",
+	"sideEffects": false,
 	"type": "module",
 	"exports": {
-		".": {
-			"require": "./dist/index.cjs",
-			"import": "./dist/index.mjs"
-		},
-		"./package.json": "./package.json"
+		".": "./dist/index.mjs"
 	},
-	"main": "./dist/index.cjs",
-	"module": "dist/index.mjs",
 	"types": "dist/index.d.ts",
 	"files": [
 		"dist",
 		"src"
 	],
 	"scripts": {
-		"build": "siroc build",
-		"dev": "siroc build --watch",
+		"build": "unbuild",
+		"dev": "unbuild --stub",
 		"format": "prettier --write .",
 		"lint": "eslint --ext .js,.ts .",
 		"prepare": "npm run build",
-		"release": "npm run build && npm run test && standard-version && git push --follow-tags && npm run build && npm publish",
-		"release:alpha": "npm run build && npm run test && standard-version --release-as major --prerelease alpha && git push --follow-tags && npm run build && npm publish --tag alpha",
+		"release": "npm run test && standard-version && git push --follow-tags && npm run build && npm publish",
+		"release:alpha": "npm run test && standard-version --release-as major --prerelease alpha && git push --follow-tags && npm run build && npm publish --tag alpha",
 		"release:alpha:dry": "standard-version --release-as major --prerelease alpha --dry-run",
 		"release:dry": "standard-version --dry-run",
-		"test": "npm run lint && npm run unit",
-		"unit": "nyc --reporter=lcovonly --reporter=text --exclude-after-remap=false ava"
+		"size": "size-limit",
+		"test": "npm run lint && npm run unit && npm run build && npm run size",
+		"unit": "vitest run --coverage",
+		"unit:watch": "vitest watch"
 	},
 	"dependencies": {
-		"@prismicio/react": "^2.2.0"
+		"@prismicio/client": "^6.7.0",
+		"@prismicio/helpers": "^2.3.3",
+		"@prismicio/react": "^2.5.0",
+		"@prismicio/types": "^0.2.3",
+		"eslint-plugin-react": "^7.30.1",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"imgix-url-builder": "^0.0.3"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^6.0.0",
-		"@prismicio/mock": "^0.0.6",
-		"@prismicio/types": "^0.1.13",
-		"@testing-library/react": "^12.1.4",
-		"@types/jsdom": "^16.2.13",
-		"@types/jsdom-global": "^3.0.2",
-		"@types/node-fetch": "^3.0.3",
-		"@types/sinon": "^10.0.6",
-		"@typescript-eslint/eslint-plugin": "^4.29.1",
-		"@typescript-eslint/parser": "^4.29.1",
-		"ava": "^3.15.0",
-		"eslint": "^7.32.0",
-		"eslint-config-prettier": "^8.3.0",
-		"eslint-plugin-prettier": "^3.4.0",
-		"eslint-plugin-tsdoc": "^0.2.14",
-		"jsdom": "^18.1.1",
-		"jsdom-global": "^3.0.2",
-		"msw": "^0.35.0",
-		"node-fetch": "^2.6.6",
+		"@prismicio/mock": "^0.1.1",
+		"@size-limit/preset-small-lib": "^8.0.1",
+		"@types/react-test-renderer": "^18.0.0",
+		"@typescript-eslint/eslint-plugin": "^5.34.0",
+		"@typescript-eslint/parser": "^5.34.0",
+		"@vitest/coverage-c8": "^0.22.1",
+		"eslint": "^8.22.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-prettier": "^4.2.1",
+		"eslint-plugin-tsdoc": "^0.2.16",
+		"happy-dom": "^6.0.4",
+		"next": "^12.1.4",
 		"nyc": "^15.1.0",
-		"prettier": "^2.3.2",
-		"prettier-plugin-jsdoc": "^0.3.30",
-		"react-test-renderer": "^18.0.0",
-		"sinon": "^12.0.1",
-		"siroc": "^0.15.0",
-		"standard-version": "^9.3.1",
-		"ts-eager": "^2.0.2",
-		"typescript": "^4.3.5"
+		"prettier": "^2.7.1",
+		"prettier-plugin-jsdoc": "^0.3.38",
+		"react": "^18.1.0",
+		"react-test-renderer": "^18.2.0",
+		"size-limit": "^8.0.1",
+		"standard-version": "^9.5.0",
+		"typescript": "^4.7.4",
+		"unbuild": "^0.8.9",
+		"vitest": "^0.22.1"
 	},
 	"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;
+	}
+};