@prismicio/next 1.0.3 → 1.1.0-alpha.0

package/src/react-server/PrismicPreview.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import * as React from "react";
+import Script from "next/script";
+import * as prismic from "@prismicio/client";
+
+/**
+ * Props for `<PrismicPreview>`.
+ */
+export type PrismicPreviewProps = {
+	/**
+	 * The name of your Prismic repository. A Prismic Toolbar will be registered
+	 * using this repository.
+	 */
+	repositoryName: string;
+
+	children?: React.ReactNode;
+};
+
+/**
+ * React component that sets up Prismic Previews using the Prismic Toolbar. When
+ * the Prismic Toolbar send events to the browser, such as on preview updates
+ * and exiting, this component will automatically update Next.js Preview Mode
+ * and refresh the page.
+ *
+ * This component can be wrapped around your app or added anywhere in your app's
+ * tree. It must be rendered on every page.
+ */
+export function PrismicPreview({
+	repositoryName,
+	children,
+}: PrismicPreviewProps): JSX.Element {
+	const prismicToolbarSrc = prismic.getToolbarSrc(repositoryName);
+
+	React.useEffect(() => {
+		const handlePrismicPreviewUpdate = async (event: Event) => {
+			// Prevent the toolbar from reloading the page.
+			event.preventDefault();
+
+			// TODO: Handle preview updates.
+
+			// eslint-disable-next-line no-console
+			console.log("[PrismicPreview]: Update event called.");
+		};
+
+		const handlePrismicPreviewEnd = async (event: Event) => {
+			// Prevent the toolbar from reloading the page.
+			event.preventDefault();
+
+			// TODO: Handle preview exit.
+
+			// eslint-disable-next-line no-console
+			console.log("[PrismicPreview]: End event called.");
+		};
+
+		window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+		window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
+
+		return () => {
+			window.removeEventListener(
+				"prismicPreviewUpdate",
+				handlePrismicPreviewUpdate,
+			);
+			window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
+		};
+	}, []);
+
+	return (
+		<>
+			{children}
+			<Script src={prismicToolbarSrc} strategy="lazyOnload" />
+		</>
+	);
+}

package/src/react-server/index.ts

@@ -0,0 +1,11 @@
+export {
+	PrismicPreview,
+	enableAutoPreviews,
+	redirectToPreviewURL,
+	exitPreview,
+	setPreviewData,
+} from "./unsupported";
+
+// These exports do not have RSC-specific implementations.
+// They are aliases for the root-level exports.
+export { PrismicNextImage, imgixLoader, PrismicNextLink } from "..";

package/src/react-server/unsupported.ts

@@ -0,0 +1,26 @@
+// Exports in this file are unsupported in the react-server environment.
+// All environments should export the same functions to maintian API compatability.
+
+function buildErrorMessage(fnName: string) {
+	return `${fnName} is currently incompatible with App Router. Preview Mode is not supported in App Router at this time. Please remove all uses of ${fnName}.`;
+}
+
+export function PrismicPreview(): JSX.Element {
+	throw new Error(buildErrorMessage("<PrismicPreview>"));
+}
+
+export function enableAutoPreviews() {
+	throw new Error(buildErrorMessage("enableAutoPreviews()"));
+}
+
+export function exitPreview() {
+	throw new Error(buildErrorMessage("exitPreview()"));
+}
+
+export function redirectToPreviewURL() {
+	throw new Error(buildErrorMessage("redirectToPreviewURL()"));
+}
+
+export function setPreviewData() {
+	throw new Error(buildErrorMessage("setPreviewData()"));
+}

package/src/redirectToPreviewURL.ts

@@ -1,6 +1,5 @@
-import type { Client } from "@prismicio/client";
 import type { NextApiRequest, NextApiResponse } from "next";
-import type { LinkResolverFunction } from "@prismicio/helpers";
+import type * as prismic from "@prismicio/client";
 
 type PrismicNextQuery = {
 	documentId: string;
@@ -28,7 +27,7 @@ const isPrismicNextQuery = (
  */
 export type RedirectToPreviewURLConfig<
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	TLinkResolverFunction extends LinkResolverFunction<any> = LinkResolverFunction,
+	TLinkResolverFunction extends prismic.LinkResolverFunction<any> = prismic.LinkResolverFunction,
 > = {
 	/**
 	 * The `req` object from a Next.js API route. This is given as a parameter to
@@ -53,7 +52,10 @@ export type RedirectToPreviewURLConfig<
 	/**
 	 * The Prismic client configured for the preview session's repository.
 	 */
-	client: Client;
+	// `Pick` is used to use the smallest possible subset of
+	// `prismic.Client`. Doing this reduces the surface area for breaking
+	// type changes.
+	client: Pick<prismic.Client, "resolvePreviewURL">;
 
 	/**
 	 * A Link Resolver used to resolve the previewed document's URL.
@@ -89,7 +91,7 @@ export type RedirectToPreviewURLConfig<
  */
 export async function redirectToPreviewURL<
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	TLinkResolverFunction extends LinkResolverFunction<any>,
+	TLinkResolverFunction extends prismic.LinkResolverFunction<any>,
 >(config: RedirectToPreviewURLConfig<TLinkResolverFunction>): Promise<void> {
 	const defaultURL = config.defaultURL || "/";
 	const basePath = config.basePath || "";