@prismicio/next 0.1.0 → 0.2.0-alpha.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { NextApiRequest, NextApiResponse, PreviewData } from 'next';
+import * as React from 'react';
 import { Client, HttpRequestLike } from '@prismicio/client';
-import React from 'react';
 import { LinkResolverFunction } from '@prismicio/helpers';
 
 /**
@@ -13,60 +13,19 @@ declare type SetPreviewDataConfig = {
      *
      * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
      */
-    req: {
-        query: NextApiRequest["query"];
-        cookies: NextApiRequest["cookies"];
-    };
+    req: Pick<NextApiRequest, "query" | "cookies">;
     /**
      * The `res` object from a Next.js API route. This is given as a parameter to
      * the API route.
      *
      * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
      */
-    res: {
-        setPreviewData: NextApiResponse["setPreviewData"];
-    };
+    res: Pick<NextApiResponse, "setPreviewData">;
 };
 /**
  * Set Prismic preview data for Next.js's Preview Mode.
  */
-declare function setPreviewData({ req, res, }: SetPreviewDataConfig): Promise<void>;
-
-/**
- * Configuration for `enableAutoPreviews`.
- *
- * @typeParam TPreviewData - Next.js preview data object.
- */
-declare type EnableAutoPreviewsConfig<TPreviewData extends PreviewData = PreviewData> = {
-    /**
-     * Prismic client with which automatic previews will be enabled.
-     */
-    client: Client;
-} & ({
-    /**
-     * A Next.js context object (such as the context object from
-     * `getStaticProps` or `getServerSideProps`).
-     *
-     * Pass a `context` object when using `enableAutoPreviews` outside a
-     * Next.js API endpoint.
-     */
-    previewData?: TPreviewData;
-} | {
-    /**
-     * A Next.js API endpoint request object.
-     *
-     * Pass a `req` object when using `enableAutoPreviews` in a Next.js API endpoint.
-     */
-    req?: HttpRequestLike;
-});
-/**
- * Configures a Prismic client to automatically query draft content during a
- * preview session. It either takes in a Next.js `getStaticProps` context object
- * or a Next.js API endpoint request object.
- *
- * @param config - Configuration for the function.
- */
-declare const enableAutoPreviews: <TPreviewData extends PreviewData>(config: EnableAutoPreviewsConfig<TPreviewData>) => void;
+declare function setPreviewData({ req, res }: SetPreviewDataConfig): void;
 
 /**
  * Configuration for `exitPreview`.
@@ -78,27 +37,17 @@ declare type ExitPreviewConfig = {
      *
      * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
      */
-    req: {
-        headers: {
-            referer?: NextApiRequest["headers"]["referer"];
-        };
-    };
+    req: Pick<NextApiRequest, "headers">;
     /**
      * The `res` object from a Next.js API route. This is given as a parameter to
      * the API route.
      *
      * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
      */
-    res: {
-        clearPreviewData: NextApiResponse["clearPreviewData"];
-        redirect: NextApiResponse["redirect"];
-    };
+    res: Pick<NextApiResponse, "clearPreviewData" | "json">;
 };
 /**
  * Exits Next.js's Preview Mode from within a Next.js API route.
- *
- * If the user was sent to the endpoint from a page, the user will be redirected
- * back to that page after exiting Preview Mode.
  */
 declare function exitPreview(config: ExitPreviewConfig): void;
 
@@ -114,13 +63,23 @@ declare type PrismicPreviewProps = {
     /**
      * The URL of your app's Prismic preview endpoint (default: `/api/preview`).
      * This URL will be fetched on preview update events.
+     *
+     * **Note**: If your `next.config.js` file contains a `basePath`, it is
+     * automatically included.
      */
     updatePreviewURL?: string;
     /**
      * The URL of your app's exit preview endpoint (default: `/api/exit-preview`).
      * This URL will be fetched on preview exit events.
+     *
+     * **Note**: If your `next.config.js` file contains a `basePath`, it is
+     * automatically included.
      */
     exitPreviewURL?: string;
+    /**
+     * Children to render adjacent to the Prismic Toolbar. The Prismic Toolbar
+     * will be rendered last.
+     */
     children?: React.ReactNode;
 };
 /**
@@ -132,55 +91,62 @@ declare type PrismicPreviewProps = {
  * This component can be wrapped around your app or added anywhere in your app's
  * tree. It must be rendered on every page.
  */
-declare function PrismicPreview({ repositoryName, children, updatePreviewURL, exitPreviewURL, }: PrismicPreviewProps): JSX.Element;
-
-/**
- * Redirects a user to the URL of a previewed Prismic document from within a
- * Next.js API route.
- */
-declare function redirectToPreviewURL({ req, res, client, linkResolver, defaultURL, }: PreviewConfig): Promise<void>;
+declare function PrismicPreview({ repositoryName, updatePreviewURL, exitPreviewURL, children, }: PrismicPreviewProps): JSX.Element;
 
 /**
- * Configuration for creating a Prismic client with automatic preview support in
- * Next.js apps.
+ * Configuration for `enableAutoPreviews`.
+ *
+ * @typeParam TPreviewData - Next.js preview data object.
  */
-declare type CreateClientConfig = {
+declare type EnableAutoPreviewsConfig<TPreviewData extends PreviewData = PreviewData> = {
     /**
-     * Preview data coming from Next.js context object. This context object comes
-     * from `getStaticProps` or `getServerSideProps`.
+     * Prismic client with which automatic previews will be enabled.
+     */
+    client: Client;
+} & ({
+    /**
+     * A Next.js context object (such as the context object from
+     * `getStaticProps` or `getServerSideProps`).
      *
-     * Pass `previewData` when using outside a Next.js API endpoint.
+     * Pass a `context` object when using `enableAutoPreviews` outside a
+     * Next.js API endpoint.
      */
-    previewData?: PreviewData;
+    previewData?: TPreviewData;
+} | {
     /**
      * A Next.js API endpoint request object.
      *
-     * Pass a `req` object when using in a Next.js API endpoint.
+     * Pass a `req` object when using `enableAutoPreviews` in a Next.js API endpoint.
      */
-    req?: NextApiRequest;
-};
+    req?: HttpRequestLike;
+});
+/**
+ * Configures a Prismic client to automatically query draft content during a
+ * preview session. It either takes in a Next.js `getStaticProps` context object
+ * or a Next.js API endpoint request object.
+ *
+ * @param config - Configuration for the function.
+ */
+declare const enableAutoPreviews: <TPreviewData extends PreviewData>(config: EnableAutoPreviewsConfig<TPreviewData>) => void;
+
 /**
  * Preview config for enabling previews with redirectToPreviewURL
  */
-declare type PreviewConfig = {
+declare type RedirectToPreviewURLConfig<TLinkResolverFunction extends LinkResolverFunction<any> = LinkResolverFunction> = {
     /**
      * The `req` object from a Next.js API route. This is given as a parameter to
      * the API route.
      *
      * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
      */
-    req: {
-        query: NextApiRequest["query"];
-    };
+    req: Pick<NextApiRequest, "query">;
     /**
      * The `res` object from a Next.js API route. This is given as a parameter to
      * the API route.
      *
      * @see Next.js API route docs: {@link https://nextjs.org/docs/api-routes/introduction}
      */
-    res: {
-        redirect: NextApiResponse["redirect"];
-    };
+    res: Pick<NextApiResponse, "redirect">;
     /**
      * The Prismic client configured for the preview session's repository.
      */
@@ -190,11 +156,49 @@ declare type PreviewConfig = {
      *
      * @see To learn more about Link Resolver: {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}
      */
-    linkResolver?: LinkResolverFunction;
+    linkResolver?: TLinkResolverFunction;
     /**
      * The default redirect URL if a URL cannot be determined for the previewed document.
+     *
+     * **Note**: If your `next.config.js` file contains a `basePath`, you must
+     * include the `basePath` as part of this option. `redirectToPreviewURL()`
+     * cannot read your global `basePath`.
      */
     defaultURL?: string;
+    /**
+     * The `basePath` for the Next.js app as it is defined in `next.config.js`.
+     * This option can be omitted if the app does not have a `basePath`.
+     *
+     * @remarks
+     * The API route is unable to detect the app's `basePath` automatically. It
+     * must be provided to `redirectToPreviewURL()` manually.
+     */
+    basePath?: string;
+};
+/**
+ * Redirects a user to the URL of a previewed Prismic document from within a
+ * Next.js API route.
+ */
+declare function redirectToPreviewURL<TLinkResolverFunction extends LinkResolverFunction<any>>(config: RedirectToPreviewURLConfig<TLinkResolverFunction>): Promise<void>;
+
+/**
+ * Configuration for creating a Prismic client with automatic preview support in
+ * Next.js apps.
+ */
+declare type CreateClientConfig = {
+    /**
+     * Preview data coming from Next.js context object. This context object comes
+     * from `getStaticProps` or `getServerSideProps`.
+     *
+     * Pass `previewData` when using outside a Next.js API endpoint.
+     */
+    previewData?: PreviewData;
+    /**
+     * A Next.js API endpoint request object.
+     *
+     * Pass a `req` object when using in a Next.js API endpoint.
+     */
+    req?: NextApiRequest;
 };
 
-export { CreateClientConfig, EnableAutoPreviewsConfig, ExitPreviewConfig as ExitPreviewParams, PreviewConfig, PrismicPreview, SetPreviewDataConfig, enableAutoPreviews, exitPreview, redirectToPreviewURL, setPreviewData };
+export { CreateClientConfig, EnableAutoPreviewsConfig, ExitPreviewConfig, PrismicPreview, PrismicPreviewProps, RedirectToPreviewURLConfig, SetPreviewDataConfig, enableAutoPreviews, exitPreview, redirectToPreviewURL, setPreviewData };

package/dist/index.js

@@ -0,0 +1,153 @@
+import * as prismic from '@prismicio/client';
+import * as React from 'react';
+import { PrismicToolbar } from '@prismicio/react';
+import { useRouter } from 'next/router';
+
+function setPreviewData({ req, res }) {
+  const ref = req.query.token || req.cookies[prismic.cookie.preview];
+  if (ref) {
+    res.setPreviewData({ ref });
+  }
+}
+
+function exitPreview(config) {
+  config.res.clearPreviewData();
+  config.res.json({ success: true });
+}
+
+const readValue = (value) => {
+  return value.replace(/%3B/g, ";");
+};
+const getCookie = (name) => {
+  const cookies = document.cookie.split("; ");
+  for (const cookie of cookies) {
+    const parts = cookie.split("=");
+    const value = parts.slice(1).join("=");
+    const thisName = readValue(parts[0]).replace(/%3D/g, "=");
+    if (thisName === name) {
+      return readValue(value);
+    }
+  }
+};
+
+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 updatePreviewMode = async (updatePreviewURL) => {
+  const res = await globalThis.fetch(updatePreviewURL);
+  if (res.ok) {
+    window.location.reload();
+  } else {
+    console.error(`[<PrismicPreview>] Failed to start or update Preview Mode using the "${updatePreviewURL}" API endpoint. Does it exist?`);
+  }
+};
+const exitPreviewMode = async (exitPreviewURL) => {
+  const res = await globalThis.fetch(exitPreviewURL);
+  if (res.ok) {
+    window.location.reload();
+  } else {
+    console.error(`[<PrismicPreview>] Failed to exit Preview Mode using the "${exitPreviewURL}" API endpoint. Does it exist?`);
+  }
+};
+function PrismicPreview({
+  repositoryName,
+  updatePreviewURL = "/api/preview",
+  exitPreviewURL = "/api/exit-preview",
+  children
+}) {
+  const router = useRouter();
+  const resolvedUpdatePreviewURL = router.basePath + updatePreviewURL;
+  const resolvedExitPreviewURL = router.basePath + exitPreviewURL;
+  React.useEffect(() => {
+    const previewCookie = getCookie(prismic.cookie.preview);
+    const prismicPreviewSessionIsForThisRepo = Boolean(previewCookie && extractPreviewRefRepositoryName(previewCookie) === repositoryName);
+    const locationIsDescendantOfBasePath = window.location.href.startsWith(window.location.origin + router.basePath);
+    const loadedFromShareLink = !router.isPreview && previewCookie;
+    if (prismicPreviewSessionIsForThisRepo && locationIsDescendantOfBasePath && loadedFromShareLink) {
+      updatePreviewMode(resolvedUpdatePreviewURL);
+      return;
+    }
+    const handlePrismicPreviewUpdate = async (event) => {
+      event.preventDefault();
+      await updatePreviewMode(resolvedUpdatePreviewURL);
+    };
+    const handlePrismicPreviewEnd = async (event) => {
+      event.preventDefault();
+      await exitPreviewMode(resolvedExitPreviewURL);
+    };
+    window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+    window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
+    return () => {
+      window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
+      window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
+    };
+  }, [
+    repositoryName,
+    resolvedUpdatePreviewURL,
+    resolvedExitPreviewURL,
+    router.isPreview,
+    router.basePath
+  ]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children, /* @__PURE__ */ React.createElement(PrismicToolbar, {
+    repositoryName
+  }));
+}
+
+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) => {
+  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 { PrismicPreview, enableAutoPreviews, exitPreview, redirectToPreviewURL, setPreviewData };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prismicio/next",
-	"version": "0.1.0",
-	"description": "Integrate Prismic into a Next.js app",
+	"version": "0.2.0-alpha.0",
+	"description": "Helpers to integrate Prismic into Next.js apps",
 	"keywords": [
 		"typescript",
 		"prismic",
@@ -15,16 +15,15 @@
 	},
 	"license": "Apache-2.0",
 	"author": "Prismic <contact@prismic.io> (https://prismic.io)",
-	"type": "module",
 	"exports": {
 		".": {
 			"require": "./dist/index.cjs",
-			"import": "./dist/index.mjs"
+			"import": "./dist/index.js"
 		},
 		"./package.json": "./package.json"
 	},
 	"main": "./dist/index.cjs",
-	"module": "dist/index.mjs",
+	"module": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"files": [
 		"dist",
@@ -36,50 +35,49 @@
 		"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.0.2"
+		"@prismicio/client": "^6.0.0",
+		"@prismicio/react": "^2.2.0",
+		"@prismicio/types": "^0.1.27"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^6.0.0-beta.0",
-		"@prismicio/mock": "^0.0.6",
-		"@prismicio/types": "^0.1.13",
-		"@testing-library/react": "^12.1.2",
-		"@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",
+		"@size-limit/preset-small-lib": "^7.0.8",
+		"@types/react-test-renderer": "^17.0.1",
+		"@typescript-eslint/eslint-plugin": "^5.17.0",
+		"@typescript-eslint/parser": "^5.17.0",
+		"c8": "^7.11.0",
+		"eslint": "^8.12.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-prettier": "^4.0.0",
+		"eslint-plugin-react": "^7.29.4",
+		"eslint-plugin-react-hooks": "^4.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",
+		"happy-dom": "^2.55.0",
+		"next": "^12.1.4",
 		"nyc": "^15.1.0",
-		"prettier": "^2.3.2",
-		"prettier-plugin-jsdoc": "^0.3.30",
-		"react-test-renderer": "^17.0.2",
-		"sinon": "^12.0.1",
-		"siroc": "^0.15.0",
-		"standard-version": "^9.3.1",
-		"ts-eager": "^2.0.2",
-		"typescript": "^4.3.5"
+		"prettier": "^2.6.1",
+		"prettier-plugin-jsdoc": "^0.3.35",
+		"react": "^18.0.0",
+		"react-test-renderer": "^18.0.0",
+		"siroc": "^0.16.0",
+		"size-limit": "^7.0.8",
+		"standard-version": "^9.3.2",
+		"typescript": "^4.6.3",
+		"vitest": "^0.8.1"
 	},
 	"peerDependencies": {
-		"@prismicio/client": "^6.0.0-beta.0",
+		"@prismicio/client": "^6.0.0",
 		"next": "^11 || ^12",
-		"react": "^17"
+		"react": "^17 || ^18"
 	},
 	"engines": {
 		"node": ">=12.7.0"