@prismicio/next 2.0.0-alpha.0 → 2.0.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/PrismicNextImage.d.ts +2 -2
- package/dist/PrismicNextImage.js.map +1 -1
- package/dist/PrismicPreview.d.ts +2 -2
- package/dist/PrismicPreview.js +2 -2
- package/dist/PrismicPreview.js.map +1 -1
- package/dist/PrismicPreviewClient.d.ts +2 -1
- package/dist/PrismicPreviewClient.js +4 -3
- package/dist/PrismicPreviewClient.js.map +1 -1
- package/dist/package.json.js +1 -1
- package/dist/pages/PrismicPreview.d.ts +2 -2
- package/dist/pages/PrismicPreview.js +2 -2
- package/dist/pages/PrismicPreview.js.map +1 -1
- package/package.json +3 -3
- package/src/PrismicNextImage.tsx +3 -3
- package/src/PrismicPreview.tsx +3 -5
- package/src/PrismicPreviewClient.tsx +5 -4
- package/src/pages/PrismicPreview.tsx +3 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FC } from "react";
|
|
2
2
|
import { ImageProps } from "next/image";
|
|
3
3
|
import { ImgixURLParams } from "imgix-url-builder";
|
|
4
4
|
import { ImageFieldImage } from "@prismicio/client";
|
|
@@ -51,4 +51,4 @@ export type PrismicNextImageProps = Omit<ImageProps, "src" | "alt" | "loader"> &
|
|
|
51
51
|
*
|
|
52
52
|
* @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image
|
|
53
53
|
*/
|
|
54
|
-
export declare const PrismicNextImage:
|
|
54
|
+
export declare const PrismicNextImage: FC<PrismicNextImageProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrismicNextImage.js","sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["\"use client\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"PrismicNextImage.js","sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["\"use client\";\n\nimport { FC } from \"react\";\nimport Image, { ImageProps } from \"next/image\";\nimport { buildURL, ImgixURLParams } from \"imgix-url-builder\";\nimport { ImageFieldImage, isFilled } from \"@prismicio/client\";\nimport { DEV } from \"esm-env\";\n\nimport { devMsg } from \"./lib/devMsg.js\";\n\nimport { imgixLoader } from \"./imgixLoader.js\";\n\nconst castInt = (input: string | number | undefined): number | undefined => {\n\tif (typeof input === \"number\" || typeof input === \"undefined\") {\n\t\treturn input;\n\t} else {\n\t\tconst parsed = Number.parseInt(input);\n\n\t\tif (Number.isNaN(parsed)) {\n\t\t\treturn undefined;\n\t\t} else {\n\t\t\treturn parsed;\n\t\t}\n\t}\n};\n\nexport type PrismicNextImageProps = Omit<\n\tImageProps,\n\t\"src\" | \"alt\" | \"loader\"\n> & {\n\t/** The Prismic Image field or thumbnail to render. */\n\tfield: ImageFieldImage | null | undefined;\n\n\t/**\n\t * An object of Imgix URL API parameters to transform the image.\n\t *\n\t * @see https://docs.imgix.com/apis/rendering\n\t */\n\timgixParams?: { [P in keyof ImgixURLParams]: ImgixURLParams[P] | null };\n\n\t/**\n\t * Declare an image as decorative by providing `alt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\talt?: \"\";\n\n\t/**\n\t * Declare an image as decorative only if the Image field does not have\n\t * alternative text by providing `fallbackAlt=\"\"`.\n\t *\n\t * See:\n\t * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images\n\t */\n\tfallbackAlt?: \"\";\n\n\t/**\n\t * Rendered when the field is empty. If a fallback is not given, `null` will\n\t * be rendered.\n\t */\n\tfallback?: React.ReactNode;\n\n\tloader?: ImageProps[\"loader\"] | null;\n};\n\n/**\n * React component that renders an image from a Prismic Image field or one of\n * its thumbnails using `next/image`. It will automatically set the `alt`\n * attribute using the Image field's `alt` property.\n *\n * It uses an Imgix URL-based loader by default. A custom loader can be provided\n * with the `loader` prop. If you would like to use the Next.js Image\n * Optimization API instead, set `loader={undefined}`.\n *\n * @param props - Props for the component.\n *\n * @returns A responsive image component using `next/image` for the given Image\n * field.\n *\n * @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image\n */\nexport const PrismicNextImage: FC<PrismicNextImageProps> = ({\n\tfield,\n\timgixParams = {},\n\talt,\n\tfallbackAlt,\n\tfill,\n\twidth,\n\theight,\n\tfallback = null,\n\tloader = imgixLoader,\n\t...restProps\n}) => {\n\tif (DEV) {\n\t\tif (typeof alt === \"string\" && alt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[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(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\n\t\tif (typeof fallbackAlt === \"string\" && fallbackAlt !== \"\") {\n\t\t\tconsole.warn(\n\t\t\t\t`[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(\n\t\t\t\t\t\"alt-must-be-an-empty-string\",\n\t\t\t\t)}`,\n\t\t\t);\n\t\t}\n\t}\n\n\tif (isFilled.imageThumbnail(field)) {\n\t\tconst resolvedImgixParams = imgixParams;\n\t\tfor (const x in imgixParams) {\n\t\t\tif (resolvedImgixParams[x as keyof typeof resolvedImgixParams] === null) {\n\t\t\t\tresolvedImgixParams[x as keyof typeof resolvedImgixParams] = undefined;\n\t\t\t}\n\t\t}\n\n\t\tconst src = buildURL(field.url, imgixParams as ImgixURLParams);\n\n\t\tconst ar = field.dimensions.width / field.dimensions.height;\n\n\t\tconst castedWidth = castInt(width);\n\t\tconst castedHeight = castInt(height);\n\n\t\tlet resolvedWidth = castedWidth ?? field.dimensions.width;\n\t\tlet resolvedHeight = castedHeight ?? field.dimensions.height;\n\n\t\tif (castedWidth != null && castedHeight == null) {\n\t\t\tresolvedHeight = castedWidth / ar;\n\t\t} else if (castedWidth == null && castedHeight != null) {\n\t\t\tresolvedWidth = castedHeight * ar;\n\t\t}\n\n\t\t// A non-null assertion is required since we can't statically\n\t\t// know if an alt attribute is available.\n\n\t\tconst resolvedAlt = (alt ?? (field.alt || fallbackAlt))!;\n\n\t\tif (DEV && typeof resolvedAlt !== \"string\") {\n\t\t\tconsole.error(\n\t\t\t\t`[PrismicNextImage] The following image is missing an \"alt\" property. Please add Alternative Text to the image in Prismic. To mark the image as decorative instead, add one of \\`alt=\"\"\\` or \\`fallbackAlt=\"\"\\`.`,\n\t\t\t\tsrc,\n\t\t\t);\n\t\t}\n\n\t\t// TODO: Remove once https://github.com/vercel/next.js/issues/52216 is resolved.\n\t\t// `next/image` seems to be affected by a default + named export bundling bug.\n\t\tlet ResolvedImage = Image;\n\t\tif (\"default\" in ResolvedImage) {\n\t\t\tResolvedImage = (ResolvedImage as unknown as { default: typeof Image })\n\t\t\t\t.default;\n\t\t}\n\n\t\treturn (\n\t\t\t<ResolvedImage\n\t\t\t\tsrc={src}\n\t\t\t\twidth={fill ? undefined : resolvedWidth}\n\t\t\t\theight={fill ? undefined : resolvedHeight}\n\t\t\t\talt={resolvedAlt}\n\t\t\t\tfill={fill}\n\t\t\t\tloader={loader === null ? undefined : loader}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t} else {\n\t\treturn <>{fallback}</>;\n\t}\n};\n"],"names":["_jsx","_Fragment"],"mappings":";;;;;;;;AAYA,MAAM,UAAU,CAAC,UAA0D;AAC1E,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,aAAa;AACvD,WAAA;AAAA,EAAA,OACD;AACA,UAAA,SAAS,OAAO,SAAS,KAAK;AAEhC,QAAA,OAAO,MAAM,MAAM,GAAG;AAClB,aAAA;AAAA,IAAA,OACD;AACC,aAAA;AAAA,IAAA;AAAA,EACR;AAEF;AA0DO,MAAM,mBAA8C,CAAC,EAC3D,OACA,cAAc,IACd,KACA,aACA,MACA,OACA,QACA,WAAW,MACX,SAAS,aACT,GAAG,gBACC;AACJ,MAAI,KAAK;AACR,QAAI,OAAO,QAAQ,YAAY,QAAQ,IAAI;AAC1C,cAAQ,KACP,yQAAyQ,OACxQ,6BAA6B,CAC7B,EAAE;AAAA,IAAA;AAIL,QAAI,OAAO,gBAAgB,YAAY,gBAAgB,IAAI;AAC1D,cAAQ,KACP,ySAAyS,OACxS,6BAA6B,CAC7B,EAAE;AAAA,IAAA;AAAA,EAEL;AAGG,MAAA,SAAS,eAAe,KAAK,GAAG;AACnC,UAAM,sBAAsB;AAC5B,eAAW,KAAK,aAAa;AACxB,UAAA,oBAAoB,CAAqC,MAAM,MAAM;AACxE,4BAAoB,CAAqC,IAAI;AAAA,MAAA;AAAA,IAC9D;AAGD,UAAM,MAAM,SAAS,MAAM,KAAK,WAA6B;AAE7D,UAAM,KAAK,MAAM,WAAW,QAAQ,MAAM,WAAW;AAE/C,UAAA,cAAc,QAAQ,KAAK;AAC3B,UAAA,eAAe,QAAQ,MAAM;AAE/B,QAAA,gBAAgB,eAAe,MAAM,WAAW;AAChD,QAAA,iBAAiB,gBAAgB,MAAM,WAAW;AAElD,QAAA,eAAe,QAAQ,gBAAgB,MAAM;AAChD,uBAAiB,cAAc;AAAA,IACrB,WAAA,eAAe,QAAQ,gBAAgB,MAAM;AACvD,sBAAgB,eAAe;AAAA,IAAA;AAM1B,UAAA,cAAe,QAAQ,MAAM,OAAO;AAEtC,QAAA,OAAO,OAAO,gBAAgB,UAAU;AACnC,cAAA,MACP,mNACA,GAAG;AAAA,IAAA;AAML,QAAI,gBAAgB;AACpB,QAAI,aAAa,eAAe;AAC/B,sBAAiB,cACf;AAAA,IAAA;AAIF,WAAAA,IAAC,eACA,EAAA,KACA,OAAO,OAAO,SAAY,eAC1B,QAAQ,OAAO,SAAY,gBAC3B,KAAK,aACL,MACA,QAAQ,WAAW,OAAO,SAAY,QAClC,GAAA,UAAA,CACH;AAAA,EAAA,OAEG;AACN,WAAOA,IAAAC,UAAA,EAAA,UAAG,UAAQ;AAAA,EAAA;AAEpB;"}
|
package/dist/PrismicPreview.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { FC, ReactNode } from "react";
|
|
2
2
|
/** Props for `<PrismicPreview>`. */
|
|
3
3
|
export type PrismicPreviewProps = {
|
|
4
4
|
/**
|
|
@@ -28,4 +28,4 @@ export type PrismicPreviewProps = {
|
|
|
28
28
|
* This component can be wrapped around your app or added anywhere in your app's
|
|
29
29
|
* tree. It must be rendered on every page.
|
|
30
30
|
*/
|
|
31
|
-
export declare
|
|
31
|
+
export declare const PrismicPreview: FC<PrismicPreviewProps>;
|
package/dist/PrismicPreview.js
CHANGED
|
@@ -2,13 +2,13 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import Script from "next/script";
|
|
3
3
|
import { getToolbarSrc } from "@prismicio/client";
|
|
4
4
|
import { PrismicPreviewClient } from "./PrismicPreviewClient.js";
|
|
5
|
-
async
|
|
5
|
+
const PrismicPreview = async (props) => {
|
|
6
6
|
const { repositoryName, children, ...otherProps } = props;
|
|
7
7
|
const { draftMode } = await import("next/headers");
|
|
8
8
|
const toolbarSrc = getToolbarSrc(repositoryName);
|
|
9
9
|
const isDraftMode = (await draftMode()).isEnabled;
|
|
10
10
|
return jsxs(Fragment, { children: [children, jsx(PrismicPreviewClient, { repositoryName, isDraftMode, ...otherProps }), jsx(Script, { src: toolbarSrc, strategy: "lazyOnload" })] });
|
|
11
|
-
}
|
|
11
|
+
};
|
|
12
12
|
export {
|
|
13
13
|
PrismicPreview
|
|
14
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrismicPreview.js","sources":["../src/PrismicPreview.tsx"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"PrismicPreview.js","sources":["../src/PrismicPreview.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport Script from \"next/script\";\nimport { getToolbarSrc } from \"@prismicio/client\";\n\nimport { PrismicPreviewClient } from \"./PrismicPreviewClient.js\";\n\n/** Props for `<PrismicPreview>`. */\nexport type PrismicPreviewProps = {\n\t/**\n\t * The name of your Prismic repository. A Prismic Toolbar will be registered\n\t * using this repository.\n\t */\n\trepositoryName: string;\n\n\t/**\n\t * The URL of your app's Prismic preview endpoint (default: `/api/preview`).\n\t * This URL will be fetched on preview update events.\n\t */\n\tupdatePreviewURL?: string;\n\n\t/**\n\t * The URL of your app's exit preview endpoint (default: `/api/exit-preview`).\n\t * This URL will be fetched on preview exit events.\n\t */\n\texitPreviewURL?: string;\n\n\t/** Children to render adjacent to the Prismic Toolbar. */\n\tchildren?: ReactNode;\n};\n\n/**\n * React component that sets up Prismic Previews using the Prismic Toolbar. When\n * the Prismic Toolbar send events to the browser, such as on preview updates\n * and exiting, this component will automatically refresh the page with the\n * changes.\n *\n * This component can be wrapped around your app or added anywhere in your app's\n * tree. It must be rendered on every page.\n */\nexport const PrismicPreview: FC<PrismicPreviewProps> = async (props) => {\n\tconst { repositoryName, children, ...otherProps } = props;\n\n\t// Need this to avoid the following Next.js build-time error:\n\t// You're importing a component that needs next/headers. That only works\n\t// in a Server Component which is not supported in the pages/ directory.\n\tconst { draftMode } = await import(\"next/headers\");\n\n\tconst toolbarSrc = getToolbarSrc(repositoryName);\n\tconst isDraftMode = (await draftMode()).isEnabled;\n\n\treturn (\n\t\t<>\n\t\t\t{children}\n\t\t\t<PrismicPreviewClient\n\t\t\t\trepositoryName={repositoryName}\n\t\t\t\tisDraftMode={isDraftMode}\n\t\t\t\t{...otherProps}\n\t\t\t/>\n\t\t\t<Script src={toolbarSrc} strategy=\"lazyOnload\" />\n\t\t</>\n\t);\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;AAuCa,MAAA,iBAA0C,OAAO,UAAS;AACtE,QAAM,EAAE,gBAAgB,UAAU,GAAG,WAAe,IAAA;AAKpD,QAAM,EAAE,UAAA,IAAc,MAAM,OAAO,cAAc;AAE3C,QAAA,aAAa,cAAc,cAAc;AACzC,QAAA,eAAe,MAAM,UAAA,GAAa;AAGvC,SAAAA,KAAAC,UAAA,EAAA,UAAA,CACE,UACDC,IAAC,sBACA,EAAA,gBACA,aAAwB,GACpB,YAAU,GAEfA,IAAC,QAAM,EAAC,KAAK,YAAY,UAAS,cAAe,CAAA,GAAA;AAGpD;"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import { FC } from "react";
|
|
1
2
|
type PrismicPreviewClientProps = {
|
|
2
3
|
repositoryName: string;
|
|
3
4
|
isDraftMode: boolean;
|
|
4
5
|
updatePreviewURL?: string;
|
|
5
6
|
exitPreviewURL?: string;
|
|
6
7
|
};
|
|
7
|
-
export declare
|
|
8
|
+
export declare const PrismicPreviewClient: FC<PrismicPreviewClientProps>;
|
|
8
9
|
export {};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { useEffect } from "react";
|
|
3
3
|
import { cookie } from "@prismicio/client";
|
|
4
4
|
import { useRouter } from "next/navigation";
|
|
5
|
-
|
|
5
|
+
const PrismicPreviewClient = (props) => {
|
|
6
6
|
const { repositoryName, isDraftMode, updatePreviewURL = "/api/preview", exitPreviewURL = "/api/exit-preview" } = props;
|
|
7
7
|
const { refresh } = useRouter();
|
|
8
8
|
useEffect(() => {
|
|
@@ -30,7 +30,8 @@ function PrismicPreviewClient(props) {
|
|
|
30
30
|
}).catch(() => {
|
|
31
31
|
});
|
|
32
32
|
}
|
|
33
|
-
function onUpdate() {
|
|
33
|
+
function onUpdate(event) {
|
|
34
|
+
event.preventDefault();
|
|
34
35
|
refresh();
|
|
35
36
|
}
|
|
36
37
|
function onEnd(event) {
|
|
@@ -47,7 +48,7 @@ function PrismicPreviewClient(props) {
|
|
|
47
48
|
return () => controller.abort();
|
|
48
49
|
}, [repositoryName, isDraftMode, updatePreviewURL, exitPreviewURL, refresh]);
|
|
49
50
|
return null;
|
|
50
|
-
}
|
|
51
|
+
};
|
|
51
52
|
function getPrismicPreviewCookie(cookieJar) {
|
|
52
53
|
function readValue(value2) {
|
|
53
54
|
return value2.replace(/%3B/g, ";");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrismicPreviewClient.js","sources":["../src/PrismicPreviewClient.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\nimport { cookie as prismicCookie } from \"@prismicio/client\";\nimport { useRouter } from \"next/navigation\";\n\ntype PrismicPreviewClientProps = {\n\trepositoryName: string;\n\tisDraftMode: boolean;\n\tupdatePreviewURL?: string;\n\texitPreviewURL?: string;\n};\n\nexport
|
|
1
|
+
{"version":3,"file":"PrismicPreviewClient.js","sources":["../src/PrismicPreviewClient.tsx"],"sourcesContent":["\"use client\";\n\nimport { FC, useEffect } from \"react\";\nimport { cookie as prismicCookie } from \"@prismicio/client\";\nimport { useRouter } from \"next/navigation\";\n\ntype PrismicPreviewClientProps = {\n\trepositoryName: string;\n\tisDraftMode: boolean;\n\tupdatePreviewURL?: string;\n\texitPreviewURL?: string;\n};\n\nexport const PrismicPreviewClient: FC<PrismicPreviewClientProps> = (props) => {\n\tconst {\n\t\trepositoryName,\n\t\tisDraftMode,\n\t\tupdatePreviewURL = \"/api/preview\",\n\t\texitPreviewURL = \"/api/exit-preview\",\n\t} = props;\n\n\tconst { refresh } = useRouter();\n\n\tuseEffect(() => {\n\t\tconst controller = new AbortController();\n\n\t\twindow.addEventListener(\"prismicPreviewUpdate\", onUpdate, {\n\t\t\tsignal: controller.signal,\n\t\t});\n\t\twindow.addEventListener(\"prismicPreviewEnd\", onEnd, {\n\t\t\tsignal: controller.signal,\n\t\t});\n\n\t\tconst cookie = getPrismicPreviewCookie(window.document.cookie);\n\t\tconst cookieRepositoryName = cookie\n\t\t\t? (decodeURIComponent(cookie).match(/\"([^\"]+)\\.prismic\\.io\"/) || [])[1]\n\t\t\t: undefined;\n\t\tconst hasCookieForRepository = cookieRepositoryName === repositoryName;\n\n\t\t// Start the preview for preview share links. Previews from\n\t\t// share links do not go to the `updatePreviewURL` like a normal\n\t\t// preview.\n\t\tif (hasCookieForRepository && !isDraftMode) {\n\t\t\tconsole.log(\"starting preview link\");\n\n\t\t\t// We check `opaqueredirect` because we don't care if\n\t\t\t// the redirect was successful or not. As long as it\n\t\t\t// redirects, we know the endpoint exists and draft mode\n\t\t\t// is active.\n\t\t\tglobalThis\n\t\t\t\t.fetch(updatePreviewURL, {\n\t\t\t\t\tredirect: \"manual\",\n\t\t\t\t\tsignal: controller.signal,\n\t\t\t\t})\n\t\t\t\t.then((res) => {\n\t\t\t\t\tif (res.type !== \"opaqueredirect\") {\n\t\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t\t`[<PrismicPreview>] Failed to start the preview using \"${updatePreviewURL}\". Does it exist?`,\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\trefresh();\n\t\t\t\t})\n\t\t\t\t.catch(() => {\n\t\t\t\t\t// noop\n\t\t\t\t});\n\t\t}\n\n\t\tfunction onUpdate(event: Event) {\n\t\t\tevent.preventDefault();\n\t\t\trefresh();\n\t\t}\n\n\t\tfunction onEnd(event: Event) {\n\t\t\tevent.preventDefault();\n\t\t\tglobalThis\n\t\t\t\t.fetch(exitPreviewURL, { signal: controller.signal })\n\t\t\t\t.then((res) => {\n\t\t\t\t\tif (!res.ok) {\n\t\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t\t`[<PrismicPreview>] Failed to exit Preview Mode using the \"${exitPreviewURL}\" API endpoint. Does it exist?`,\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\trefresh();\n\t\t\t\t})\n\t\t\t\t.catch(() => {\n\t\t\t\t\t// noop\n\t\t\t\t});\n\t\t}\n\n\t\treturn () => controller.abort();\n\t}, [repositoryName, isDraftMode, updatePreviewURL, exitPreviewURL, refresh]);\n\n\treturn null;\n};\n\n/**\n * Returns the value of a cookie from a given cookie store.\n *\n * @param cookieJar - The stringified cookie store from which to read the\n * cookie.\n *\n * @returns The value of the cookie, if it exists.\n */\nfunction getPrismicPreviewCookie(cookieJar: string): string | undefined {\n\tfunction readValue(value: string): string {\n\t\treturn value.replace(/%3B/g, \";\");\n\t}\n\n\tconst cookies = cookieJar.split(\"; \");\n\n\tlet value: string | undefined;\n\n\tfor (const cookie of cookies) {\n\t\tconst parts = cookie.split(\"=\");\n\t\tconst name = readValue(parts[0]).replace(/%3D/g, \"=\");\n\n\t\tif (name === prismicCookie.preview) {\n\t\t\tvalue = readValue(parts.slice(1).join(\"=\"));\n\t\t\tcontinue;\n\t\t}\n\t}\n\n\treturn value;\n}\n"],"names":["cookie","value","prismicCookie"],"mappings":";;;;AAaa,MAAA,uBAAsD,CAAC,UAAS;AAC5E,QAAM,EACL,gBACA,aACA,mBAAmB,gBACnB,iBAAiB,wBACd;AAEE,QAAA,EAAE,QAAO,IAAK;AAEpB,YAAU,MAAK;AACR,UAAA,aAAa,IAAI;AAEhB,WAAA,iBAAiB,wBAAwB,UAAU;AAAA,MACzD,QAAQ,WAAW;AAAA,IAAA,CACnB;AACM,WAAA,iBAAiB,qBAAqB,OAAO;AAAA,MACnD,QAAQ,WAAW;AAAA,IAAA,CACnB;AAED,UAAMA,UAAS,wBAAwB,OAAO,SAAS,MAAM;AACvD,UAAA,uBAAuBA,WACzB,mBAAmBA,OAAM,EAAE,MAAM,wBAAwB,KAAK,CAAA,GAAI,CAAC,IACpE;AACH,UAAM,yBAAyB,yBAAyB;AAKpD,QAAA,0BAA0B,CAAC,aAAa;AAC3C,cAAQ,IAAI,uBAAuB;AAMnC,iBACE,MAAM,kBAAkB;AAAA,QACxB,UAAU;AAAA,QACV,QAAQ,WAAW;AAAA,MAAA,CACnB,EACA,KAAK,CAAC,QAAO;AACT,YAAA,IAAI,SAAS,kBAAkB;AAC1B,kBAAA,MACP,yDAAyD,gBAAgB,mBAAmB;AAG7F;AAAA,QAAA;;OAID,EACA,MAAM,MAAK;AAAA,MAAA,CAEX;AAAA,IAAA;AAGH,aAAS,SAAS,OAAY;AAC7B,YAAM,eAAc;;;AAIrB,aAAS,MAAM,OAAY;AAC1B,YAAM,eAAc;AAElB,iBAAA,MAAM,gBAAgB,EAAE,QAAQ,WAAW,QAAQ,EACnD,KAAK,CAAC,QAAO;AACT,YAAA,CAAC,IAAI,IAAI;AACJ,kBAAA,MACP,6DAA6D,cAAc,gCAAgC;AAG5G;AAAA,QAAA;;OAID,EACA,MAAM,MAAK;AAAA,MAAA,CAEX;AAAA,IAAA;AAGI,WAAA,MAAM,WAAW;KACtB,CAAC,gBAAgB,aAAa,kBAAkB,gBAAgB,OAAO,CAAC;AAEpE,SAAA;AACR;AAUA,SAAS,wBAAwB,WAAiB;AACjD,WAAS,UAAUC,QAAa;AACxBA,WAAAA,OAAM,QAAQ,QAAQ,GAAG;AAAA,EAAA;AAG3B,QAAA,UAAU,UAAU,MAAM,IAAI;AAEhC,MAAA;AAEJ,aAAWD,YAAU,SAAS;AACvB,UAAA,QAAQA,SAAO,MAAM,GAAG;AACxB,UAAA,OAAO,UAAU,MAAM,CAAC,CAAC,EAAE,QAAQ,QAAQ,GAAG;AAEhD,QAAA,SAASE,OAAc,SAAS;AACnC,cAAQ,UAAU,MAAM,MAAM,CAAC,EAAE,KAAK,GAAG,CAAC;AAC1C;AAAA,IAAA;AAAA,EACD;AAGM,SAAA;AACR;"}
|
package/dist/package.json.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ReactNode,
|
|
1
|
+
import { type ReactNode, FC } from "react";
|
|
2
2
|
/** Props for `<PrismicPreview>`. */
|
|
3
3
|
export type PrismicPreviewProps = {
|
|
4
4
|
/**
|
|
@@ -28,4 +28,4 @@ export type PrismicPreviewProps = {
|
|
|
28
28
|
* This component can be wrapped around your app or added anywhere in your app's
|
|
29
29
|
* tree. It must be rendered on every page.
|
|
30
30
|
*/
|
|
31
|
-
export declare
|
|
31
|
+
export declare const PrismicPreview: FC<PrismicPreviewProps>;
|
|
@@ -3,7 +3,7 @@ import { useEffect } from "react";
|
|
|
3
3
|
import { useRouter } from "next/router";
|
|
4
4
|
import Script from "next/script";
|
|
5
5
|
import { getToolbarSrc, cookie } from "@prismicio/client";
|
|
6
|
-
|
|
6
|
+
const PrismicPreview = (props) => {
|
|
7
7
|
const { repositoryName, updatePreviewURL = "/api/preview", exitPreviewURL = "/api/exit-preview", children } = props;
|
|
8
8
|
const router = useRouter();
|
|
9
9
|
const toolbarSrc = getToolbarSrc(repositoryName);
|
|
@@ -52,7 +52,7 @@ function PrismicPreview(props) {
|
|
|
52
52
|
return () => controller.abort();
|
|
53
53
|
}, [exitPreviewURL, updatePreviewURL, repositoryName, router]);
|
|
54
54
|
return jsxs(Fragment, { children: [children, jsx(Script, { src: toolbarSrc, strategy: "lazyOnload" })] });
|
|
55
|
-
}
|
|
55
|
+
};
|
|
56
56
|
function getPreviewCookieRepositoryName() {
|
|
57
57
|
var _a;
|
|
58
58
|
const cookie$1 = (_a = window.document.cookie.split("; ").find((row) => row.startsWith(`${cookie.preview}=`))) == null ? void 0 : _a.split("=")[1];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrismicPreview.js","sources":["../../src/pages/PrismicPreview.tsx"],"sourcesContent":["import { type ReactNode, useEffect,
|
|
1
|
+
{"version":3,"file":"PrismicPreview.js","sources":["../../src/pages/PrismicPreview.tsx"],"sourcesContent":["import { type ReactNode, useEffect, FC } from \"react\";\nimport { useRouter } from \"next/router\";\nimport Script from \"next/script\";\nimport { getToolbarSrc, cookie as prismicCookie } from \"@prismicio/client\";\n\n/** Props for `<PrismicPreview>`. */\nexport type PrismicPreviewProps = {\n\t/**\n\t * The name of your Prismic repository. A Prismic Toolbar will be registered\n\t * using this repository.\n\t */\n\trepositoryName: string;\n\n\t/**\n\t * The URL of your app's Prismic preview endpoint (default: `/api/preview`).\n\t * This URL will be fetched on preview update events.\n\t */\n\tupdatePreviewURL?: string;\n\n\t/**\n\t * The URL of your app's exit preview endpoint (default: `/api/exit-preview`).\n\t * This URL will be fetched on preview exit events.\n\t */\n\texitPreviewURL?: string;\n\n\t/** Children to render adjacent to the Prismic Toolbar. */\n\tchildren?: ReactNode;\n};\n\n/**\n * React component that sets up Prismic Previews using the Prismic Toolbar. When\n * the Prismic Toolbar send events to the browser, such as on preview updates\n * and exiting, this component will automatically refresh the page with the\n * changes.\n *\n * This component can be wrapped around your app or added anywhere in your app's\n * tree. It must be rendered on every page.\n */\nexport const PrismicPreview: FC<PrismicPreviewProps> = (props) => {\n\tconst {\n\t\trepositoryName,\n\t\tupdatePreviewURL = \"/api/preview\",\n\t\texitPreviewURL = \"/api/exit-preview\",\n\t\tchildren,\n\t} = props;\n\n\tconst router = useRouter();\n\n\tconst toolbarSrc = getToolbarSrc(repositoryName);\n\n\tuseEffect(() => {\n\t\tconst controller = new AbortController();\n\n\t\twindow.addEventListener(\"prismicPreviewUpdate\", onUpdate, {\n\t\t\tsignal: controller.signal,\n\t\t});\n\t\twindow.addEventListener(\"prismicPreviewEnd\", onEnd, {\n\t\t\tsignal: controller.signal,\n\t\t});\n\n\t\t// Start the preview for preview share links. Previews from\n\t\t// share links do not go to the `updatePreviewURL` like a normal\n\t\t// preview.\n\t\t//\n\t\t// We check that the current URL is a descendant of the base\n\t\t// path to prevent infinite refrehes.\n\t\tif (\n\t\t\twindow.location.href.startsWith(\n\t\t\t\twindow.location.origin + router.basePath,\n\t\t\t) &&\n\t\t\tgetPreviewCookieRepositoryName() === repositoryName &&\n\t\t\t!router.isPreview\n\t\t) {\n\t\t\tstart();\n\t\t}\n\n\t\tfunction onEnd(event: Event) {\n\t\t\tevent.preventDefault();\n\t\t\tfetch(router.basePath + exitPreviewURL, { signal: controller.signal })\n\t\t\t\t.then((res) => {\n\t\t\t\t\tif (!res.ok) {\n\t\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t\t`[<PrismicPreview>] Failed to exit Preview Mode using the \"${exitPreviewURL}\" API endpoint. Does it exist?`,\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\trefresh();\n\t\t\t\t})\n\t\t\t\t.catch(() => {});\n\t\t}\n\n\t\tfunction onUpdate(event: Event) {\n\t\t\tevent.preventDefault();\n\t\t\tstart();\n\t\t}\n\n\t\tfunction start() {\n\t\t\t// We check `opaqueredirect` because we don't care if\n\t\t\t// the redirect was successful or not. As long as it\n\t\t\t// redirects, we know the endpoint exists and at least\n\t\t\t// attempted to set preview data.\n\t\t\tfetch(router.basePath + updatePreviewURL, {\n\t\t\t\tredirect: \"manual\",\n\t\t\t\tsignal: controller.signal,\n\t\t\t})\n\t\t\t\t.then((res) => {\n\t\t\t\t\tif (res.type !== \"opaqueredirect\") {\n\t\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t\t`[<PrismicPreview>] Failed to start or update the preview using \"${updatePreviewURL}\". Does it exist?`,\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\trefresh();\n\t\t\t\t})\n\t\t\t\t.catch(() => {});\n\t\t}\n\n\t\tfunction refresh() {\n\t\t\trouter.replace(router.asPath, undefined, { scroll: false });\n\t\t}\n\n\t\treturn () => controller.abort();\n\t}, [exitPreviewURL, updatePreviewURL, repositoryName, router]);\n\n\treturn (\n\t\t<>\n\t\t\t{children}\n\t\t\t<Script src={toolbarSrc} strategy=\"lazyOnload\" />\n\t\t</>\n\t);\n};\n\nfunction getPreviewCookieRepositoryName() {\n\tconst cookie = window.document.cookie\n\t\t.split(\"; \")\n\t\t.find((row) => row.startsWith(`${prismicCookie.preview}=`))\n\t\t?.split(\"=\")[1];\n\n\treturn (decodeURIComponent(cookie ?? \"\").match(/\"([^\"]+)\\.prismic\\.io\"/) ||\n\t\t[])[1];\n}\n"],"names":["_jsxs","_Fragment","_jsx","cookie","prismicCookie"],"mappings":";;;;;AAsCa,MAAA,iBAA0C,CAAC,UAAS;AAChE,QAAM,EACL,gBACA,mBAAmB,gBACnB,iBAAiB,qBACjB,aACG;AAEJ,QAAM,SAAS,UAAS;AAElB,QAAA,aAAa,cAAc,cAAc;AAE/C,YAAU,MAAK;AACR,UAAA,aAAa,IAAI;AAEhB,WAAA,iBAAiB,wBAAwB,UAAU;AAAA,MACzD,QAAQ,WAAW;AAAA,IAAA,CACnB;AACM,WAAA,iBAAiB,qBAAqB,OAAO;AAAA,MACnD,QAAQ,WAAW;AAAA,IAAA,CACnB;AAQD,QACC,OAAO,SAAS,KAAK,WACpB,OAAO,SAAS,SAAS,OAAO,QAAQ,KAEzC,+BAA8B,MAAO,kBACrC,CAAC,OAAO,WACP;;;AAIF,aAAS,MAAM,OAAY;AAC1B,YAAM,eAAc;AACd,YAAA,OAAO,WAAW,gBAAgB,EAAE,QAAQ,WAAW,OAAQ,CAAA,EACnE,KAAK,CAAC,QAAO;AACT,YAAA,CAAC,IAAI,IAAI;AACJ,kBAAA,MACP,6DAA6D,cAAc,gCAAgC;AAG5G;AAAA,QAAA;;OAID,EACA,MAAM,MAAO;AAAA,MAAA,CAAC;AAAA,IAAA;AAGjB,aAAS,SAAS,OAAY;AAC7B,YAAM,eAAc;;;AAIrB,aAAS,QAAK;AAKP,YAAA,OAAO,WAAW,kBAAkB;AAAA,QACzC,UAAU;AAAA,QACV,QAAQ,WAAW;AAAA,MAAA,CACnB,EACC,KAAK,CAAC,QAAO;AACT,YAAA,IAAI,SAAS,kBAAkB;AAC1B,kBAAA,MACP,mEAAmE,gBAAgB,mBAAmB;AAGvG;AAAA,QAAA;;OAID,EACA,MAAM,MAAO;AAAA,MAAA,CAAC;AAAA,IAAA;AAGjB,aAAS,UAAO;AACf,aAAO,QAAQ,OAAO,QAAQ,QAAW,EAAE,QAAQ,OAAO;AAAA,IAAA;AAGpD,WAAA,MAAM,WAAW;KACtB,CAAC,gBAAgB,kBAAkB,gBAAgB,MAAM,CAAC;AAE7D,SACCA,KACEC,UAAA,EAAA,UAAA,CAAA,UACDC,IAAC,QAAO,EAAA,KAAK,YAAY,UAAS,aAAe,CAAA,CAAA,GAAA;AAGpD;AAEA,SAAS,iCAA8B;;AAChC,QAAAC,YAAS,YAAO,SAAS,OAC7B,MAAM,IAAI,EACV,KAAK,CAAC,QAAQ,IAAI,WAAW,GAAGC,OAAc,OAAO,GAAG,CAAC,MAF5C,mBAGZ,MAAM,KAAK;AAEN,UAAA,mBAAmBD,YAAU,EAAE,EAAE,MAAM,wBAAwB,KACtE,CAAA,GAAI,CAAC;AACP;"}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"e2e-projects/*"
|
|
5
5
|
],
|
|
6
6
|
"name": "@prismicio/next",
|
|
7
|
-
"version": "2.0.0-alpha.
|
|
7
|
+
"version": "2.0.0-alpha.2",
|
|
8
8
|
"description": "Helpers to integrate Prismic into Next.js apps",
|
|
9
9
|
"keywords": [
|
|
10
10
|
"typescript",
|
|
@@ -98,8 +98,8 @@
|
|
|
98
98
|
},
|
|
99
99
|
"peerDependencies": {
|
|
100
100
|
"@prismicio/client": "^7",
|
|
101
|
-
"next": "^13.4.5 || ^14 || ^15
|
|
102
|
-
"react": "^18 || ^19
|
|
101
|
+
"next": "^13.4.5 || ^14 || ^15",
|
|
102
|
+
"react": "^18 || ^19"
|
|
103
103
|
},
|
|
104
104
|
"engines": {
|
|
105
105
|
"node": ">=18"
|
package/src/PrismicNextImage.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { FC } from "react";
|
|
4
4
|
import Image, { ImageProps } from "next/image";
|
|
5
5
|
import { buildURL, ImgixURLParams } from "imgix-url-builder";
|
|
6
6
|
import { ImageFieldImage, isFilled } from "@prismicio/client";
|
|
@@ -80,7 +80,7 @@ export type PrismicNextImageProps = Omit<
|
|
|
80
80
|
*
|
|
81
81
|
* @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image
|
|
82
82
|
*/
|
|
83
|
-
export const PrismicNextImage = ({
|
|
83
|
+
export const PrismicNextImage: FC<PrismicNextImageProps> = ({
|
|
84
84
|
field,
|
|
85
85
|
imgixParams = {},
|
|
86
86
|
alt,
|
|
@@ -91,7 +91,7 @@ export const PrismicNextImage = ({
|
|
|
91
91
|
fallback = null,
|
|
92
92
|
loader = imgixLoader,
|
|
93
93
|
...restProps
|
|
94
|
-
}
|
|
94
|
+
}) => {
|
|
95
95
|
if (DEV) {
|
|
96
96
|
if (typeof alt === "string" && alt !== "") {
|
|
97
97
|
console.warn(
|
package/src/PrismicPreview.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { FC, ReactNode } from "react";
|
|
2
2
|
import Script from "next/script";
|
|
3
3
|
import { getToolbarSrc } from "@prismicio/client";
|
|
4
4
|
|
|
@@ -37,9 +37,7 @@ export type PrismicPreviewProps = {
|
|
|
37
37
|
* This component can be wrapped around your app or added anywhere in your app's
|
|
38
38
|
* tree. It must be rendered on every page.
|
|
39
39
|
*/
|
|
40
|
-
export async
|
|
41
|
-
props: PrismicPreviewProps,
|
|
42
|
-
): Promise<JSX.Element> {
|
|
40
|
+
export const PrismicPreview: FC<PrismicPreviewProps> = async (props) => {
|
|
43
41
|
const { repositoryName, children, ...otherProps } = props;
|
|
44
42
|
|
|
45
43
|
// Need this to avoid the following Next.js build-time error:
|
|
@@ -61,4 +59,4 @@ export async function PrismicPreview(
|
|
|
61
59
|
<Script src={toolbarSrc} strategy="lazyOnload" />
|
|
62
60
|
</>
|
|
63
61
|
);
|
|
64
|
-
}
|
|
62
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import { useEffect } from "react";
|
|
3
|
+
import { FC, useEffect } from "react";
|
|
4
4
|
import { cookie as prismicCookie } from "@prismicio/client";
|
|
5
5
|
import { useRouter } from "next/navigation";
|
|
6
6
|
|
|
@@ -11,7 +11,7 @@ type PrismicPreviewClientProps = {
|
|
|
11
11
|
exitPreviewURL?: string;
|
|
12
12
|
};
|
|
13
13
|
|
|
14
|
-
export
|
|
14
|
+
export const PrismicPreviewClient: FC<PrismicPreviewClientProps> = (props) => {
|
|
15
15
|
const {
|
|
16
16
|
repositoryName,
|
|
17
17
|
isDraftMode,
|
|
@@ -68,7 +68,8 @@ export function PrismicPreviewClient(props: PrismicPreviewClientProps): null {
|
|
|
68
68
|
});
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
function onUpdate() {
|
|
71
|
+
function onUpdate(event: Event) {
|
|
72
|
+
event.preventDefault();
|
|
72
73
|
refresh();
|
|
73
74
|
}
|
|
74
75
|
|
|
@@ -96,7 +97,7 @@ export function PrismicPreviewClient(props: PrismicPreviewClientProps): null {
|
|
|
96
97
|
}, [repositoryName, isDraftMode, updatePreviewURL, exitPreviewURL, refresh]);
|
|
97
98
|
|
|
98
99
|
return null;
|
|
99
|
-
}
|
|
100
|
+
};
|
|
100
101
|
|
|
101
102
|
/**
|
|
102
103
|
* Returns the value of a cookie from a given cookie store.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ReactNode, useEffect,
|
|
1
|
+
import { type ReactNode, useEffect, FC } from "react";
|
|
2
2
|
import { useRouter } from "next/router";
|
|
3
3
|
import Script from "next/script";
|
|
4
4
|
import { getToolbarSrc, cookie as prismicCookie } from "@prismicio/client";
|
|
@@ -36,7 +36,7 @@ export type PrismicPreviewProps = {
|
|
|
36
36
|
* This component can be wrapped around your app or added anywhere in your app's
|
|
37
37
|
* tree. It must be rendered on every page.
|
|
38
38
|
*/
|
|
39
|
-
export
|
|
39
|
+
export const PrismicPreview: FC<PrismicPreviewProps> = (props) => {
|
|
40
40
|
const {
|
|
41
41
|
repositoryName,
|
|
42
42
|
updatePreviewURL = "/api/preview",
|
|
@@ -132,7 +132,7 @@ export function PrismicPreview(props: PrismicPreviewProps): JSX.Element {
|
|
|
132
132
|
<Script src={toolbarSrc} strategy="lazyOnload" />
|
|
133
133
|
</>
|
|
134
134
|
);
|
|
135
|
-
}
|
|
135
|
+
};
|
|
136
136
|
|
|
137
137
|
function getPreviewCookieRepositoryName() {
|
|
138
138
|
const cookie = window.document.cookie
|