@prismicio/next 0.1.6-alpha.0 → 0.1.6
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.cjs +44 -2
- package/dist/PrismicNextImage.cjs.map +1 -1
- package/dist/PrismicNextImage.d.ts +6 -3
- package/dist/PrismicNextImage.js +44 -2
- package/dist/PrismicNextImage.js.map +1 -1
- package/dist/PrismicPreview.cjs +12 -9
- package/dist/PrismicPreview.cjs.map +1 -1
- package/dist/PrismicPreview.js +12 -9
- package/dist/PrismicPreview.js.map +1 -1
- package/dist/package.cjs +1 -1
- package/dist/package.js +1 -1
- package/package.json +19 -18
- package/src/PrismicNextImage.tsx +48 -7
|
@@ -27,6 +27,18 @@ function _interopNamespace(e) {
|
|
|
27
27
|
}
|
|
28
28
|
const Image__default = /* @__PURE__ */ _interopDefaultLegacy(Image);
|
|
29
29
|
const prismicH__namespace = /* @__PURE__ */ _interopNamespace(prismicH);
|
|
30
|
+
const castInt = (input) => {
|
|
31
|
+
if (typeof input === "number" || typeof input === "undefined") {
|
|
32
|
+
return input;
|
|
33
|
+
} else {
|
|
34
|
+
const parsed = Number.parseInt(input);
|
|
35
|
+
if (Number.isNaN(parsed)) {
|
|
36
|
+
return void 0;
|
|
37
|
+
} else {
|
|
38
|
+
return parsed;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
};
|
|
30
42
|
const imgixLoader = (args) => {
|
|
31
43
|
const url = new URL(args.src);
|
|
32
44
|
const params = {
|
|
@@ -39,7 +51,14 @@ const imgixLoader = (args) => {
|
|
|
39
51
|
}
|
|
40
52
|
return imgixUrlBuilder.buildURL(args.src, params);
|
|
41
53
|
};
|
|
42
|
-
const PrismicNextImage = ({
|
|
54
|
+
const PrismicNextImage = ({
|
|
55
|
+
field,
|
|
56
|
+
imgixParams = {},
|
|
57
|
+
alt,
|
|
58
|
+
fallbackAlt,
|
|
59
|
+
layout = "intrinsic",
|
|
60
|
+
...restProps
|
|
61
|
+
}) => {
|
|
43
62
|
if (!__PRODUCTION__.__PRODUCTION__) {
|
|
44
63
|
if (typeof alt === "string" && alt !== "") {
|
|
45
64
|
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.devMsg("alt-must-be-an-empty-string")}`);
|
|
@@ -50,7 +69,30 @@ const PrismicNextImage = ({ field, imgixParams = {}, alt, fallbackAlt, layout, .
|
|
|
50
69
|
}
|
|
51
70
|
if (prismicH__namespace.isFilled.imageThumbnail(field)) {
|
|
52
71
|
const src = imgixUrlBuilder.buildURL(field.url, imgixParams);
|
|
53
|
-
|
|
72
|
+
const ar = field.dimensions.width / field.dimensions.height;
|
|
73
|
+
let resolvedWidth = field.dimensions.width;
|
|
74
|
+
let resolvedHeight = field.dimensions.height;
|
|
75
|
+
if ((layout === "intrinsic" || layout === "fixed") && ("width" in restProps || "height" in restProps)) {
|
|
76
|
+
const castedWidth = castInt(restProps.width);
|
|
77
|
+
const castedHeight = castInt(restProps.height);
|
|
78
|
+
if (castedWidth) {
|
|
79
|
+
resolvedWidth = castedWidth;
|
|
80
|
+
} else {
|
|
81
|
+
if (castedHeight) {
|
|
82
|
+
resolvedWidth = ar * castedHeight;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
resolvedHeight = resolvedWidth / ar;
|
|
86
|
+
}
|
|
87
|
+
return jsxRuntime.jsx(Image__default.default, {
|
|
88
|
+
src,
|
|
89
|
+
width: layout === "fill" ? void 0 : resolvedWidth,
|
|
90
|
+
height: layout === "fill" ? void 0 : resolvedHeight,
|
|
91
|
+
alt: alt != null ? alt : field.alt || fallbackAlt,
|
|
92
|
+
loader: imgixLoader,
|
|
93
|
+
layout,
|
|
94
|
+
...restProps
|
|
95
|
+
});
|
|
54
96
|
} else {
|
|
55
97
|
return null;
|
|
56
98
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrismicNextImage.cjs","sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"PrismicNextImage.cjs","sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["import Image, { ImageProps, ImageLoaderProps } from \"next/image\";\nimport { buildURL, ImgixURLParams } from \"imgix-url-builder\";\nimport * as prismicH from \"@prismicio/helpers\";\nimport * as prismicT from \"@prismicio/types\";\n\nimport { __PRODUCTION__ } from \"./lib/__PRODUCTION__\";\nimport { devMsg } from \"./lib/devMsg\";\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\n/**\n * Creates a `next/image` loader for Imgix, which Prismic uses, with an optional\n * collection of default Imgix parameters.\n *\n * @see To learn about `next/image` loaders: https://nextjs.org/docs/api-reference/next/image#loader\n * @see To learn about Imgix's URL API: https://docs.imgix.com/apis/rendering\n */\nconst imgixLoader = (args: ImageLoaderProps): string => {\n\tconst url = new URL(args.src);\n\n\tconst params: ImgixURLParams = {\n\t\tfit: (url.searchParams.get(\"fit\") as ImgixURLParams[\"fit\"]) || \"max\",\n\t\tw: args.width,\n\t\th: undefined,\n\t};\n\n\tif (args.quality) {\n\t\tparams.q = args.quality;\n\t}\n\n\treturn buildURL(args.src, params);\n};\n\nexport type PrismicNextImageProps = Omit<\n\tImageProps,\n\t\"src\" | \"alt\" | \"width\" | \"height\" | \"layout\"\n> & {\n\t/**\n\t * The Prismic Image field or thumbnail to render.\n\t */\n\tfield: prismicT.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?: ImgixURLParams;\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\t| ({\n\t\t\t\tlayout?: \"intrinsic\" | \"fixed\";\n\t\t } & Pick<ImageProps, \"width\" | \"height\">)\n\t\t| {\n\t\t\t\tlayout: \"responsive\" | \"fill\";\n\t\t }\n\t);\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 * @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image\n */\nexport const PrismicNextImage = ({\n\tfield,\n\timgixParams = {},\n\talt,\n\tfallbackAlt,\n\tlayout = \"intrinsic\",\n\t...restProps\n}: PrismicNextImageProps) => {\n\tif (!__PRODUCTION__) {\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 (prismicH.isFilled.imageThumbnail(field)) {\n\t\tconst src = buildURL(field.url, imgixParams);\n\t\tconst ar = field.dimensions.width / field.dimensions.height;\n\n\t\tlet resolvedWidth = field.dimensions.width;\n\t\tlet resolvedHeight = field.dimensions.height;\n\n\t\tif (\n\t\t\t(layout === \"intrinsic\" || layout === \"fixed\") &&\n\t\t\t(\"width\" in restProps || \"height\" in restProps)\n\t\t) {\n\t\t\tconst castedWidth = castInt(restProps.width);\n\t\t\tconst castedHeight = castInt(restProps.height);\n\n\t\t\tif (castedWidth) {\n\t\t\t\tresolvedWidth = castedWidth;\n\t\t\t} else {\n\t\t\t\tif (castedHeight) {\n\t\t\t\t\tresolvedWidth = ar * castedHeight;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tresolvedHeight = resolvedWidth / ar;\n\t\t}\n\n\t\treturn (\n\t\t\t<Image\n\t\t\t\tsrc={src}\n\t\t\t\twidth={layout === \"fill\" ? undefined : resolvedWidth}\n\t\t\t\theight={layout === \"fill\" ? undefined : resolvedHeight}\n\t\t\t\talt={alt ?? (field.alt || fallbackAlt)}\n\t\t\t\tloader={imgixLoader}\n\t\t\t\tlayout={layout}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n};\n"],"names":["castInt","input","parsed","Number","parseInt","isNaN","undefined","imgixLoader","args","url","URL","src","params","fit","searchParams","get","w","width","h","quality","q","buildURL","PrismicNextImage","field","imgixParams","alt","fallbackAlt","layout","restProps","__PRODUCTION__","console","warn","devMsg","prismicH","isFilled","imageThumbnail","ar","dimensions","height","resolvedWidth","resolvedHeight","castedWidth","castedHeight","_jsx","Image","loader"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAMA,UAAWC,CAA0D,UAAA;AAC1E,MAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,aAAa;AACvDA,WAAAA;AAAAA,EAAAA,OACD;AACAC,UAAAA,SAASC,OAAOC,SAASH,KAAK;AAEhCE,QAAAA,OAAOE,MAAMH,MAAM,GAAG;AAClBI,aAAAA;AAAAA,IAAAA,OACD;AACCJ,aAAAA;AAAAA,IACP;AAAA,EACD;AACF;AASA,MAAMK,cAAeC,CAAkC,SAAA;AACtD,QAAMC,MAAM,IAAIC,IAAIF,KAAKG,GAAG;AAE5B,QAAMC,SAAyB;AAAA,IAC9BC,KAAMJ,IAAIK,aAAaC,IAAI,KAAK,KAA+B;AAAA,IAC/DC,GAAGR,KAAKS;AAAAA,IACRC,GAAGZ;AAAAA,EAAAA;AAGJ,MAAIE,KAAKW,SAAS;AACjBP,WAAOQ,IAAIZ,KAAKW;AAAAA,EAChB;AAEME,SAAAA,yBAASb,KAAKG,KAAKC,MAAM;AACjC;AA0DO,MAAMU,mBAAmB,CAAC;AAAA,EAChCC;AAAAA,EACAC,cAAc,CAAE;AAAA,EAChBC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,KACNC;AACoB,MAAI;AAC3B,MAAI,CAACC,eAAAA,gBAAgB;AACpB,QAAI,OAAOJ,QAAQ,YAAYA,QAAQ,IAAI;AAC1CK,cAAQC,KACkQ,yQAAAC,OACxQ,OAAA,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,OAAON,gBAAgB,YAAYA,gBAAgB,IAAI;AAC1DI,cAAQC,KACkS,ySAAAC,OACxS,OAAA,6BAA6B,GAC3B;AAAA,IAEJ;AAAA,EACD;AAED,MAAIC,oBAASC,SAASC,eAAeZ,KAAK,GAAG;AAC5C,UAAMZ,MAAMU,gBAAAA,SAASE,MAAMd,KAAKe,WAAW;AAC3C,UAAMY,KAAKb,MAAMc,WAAWpB,QAAQM,MAAMc,WAAWC;AAEjDC,QAAAA,gBAAgBhB,MAAMc,WAAWpB;AACjCuB,QAAAA,iBAAiBjB,MAAMc,WAAWC;AAEtC,SACEX,WAAW,eAAeA,WAAW,aACrC,WAAWC,aAAa,YAAYA,YACpC;AACKa,YAAAA,cAAczC,QAAQ4B,UAAUX,KAAK;AACrCyB,YAAAA,eAAe1C,QAAQ4B,UAAUU,MAAM;AAE7C,UAAIG,aAAa;AACAA,wBAAAA;AAAAA,MAAAA,OACV;AACN,YAAIC,cAAc;AACjBH,0BAAgBH,KAAKM;AAAAA,QACrB;AAAA,MACD;AAEDF,uBAAiBD,gBAAgBH;AAAAA,IACjC;AAED,WACCO,WAAAA,IAACC,eAAAA,SACA;AAAA,MAAAjC;AAAAA,MACAM,OAAOU,WAAW,SAASrB,SAAYiC;AAAAA,MACvCD,QAAQX,WAAW,SAASrB,SAAYkC;AAAAA,MACxCf,KAAKA,oBAAQF,MAAME,OAAOC;AAAAA,MAC1BmB,QAAQtC;AAAAA,MACRoB;AAAAA,MACI,GAAAC;AAAAA,IAAAA,CACH;AAAA,EAAA,OAEG;AACC,WAAA;AAAA,EACP;AACF;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { ImageProps } from "next/image";
|
|
3
3
|
import { ImgixURLParams } from "imgix-url-builder";
|
|
4
4
|
import * as prismicT from "@prismicio/types";
|
|
5
|
-
export declare type PrismicNextImageProps = Omit<ImageProps, "src" | "alt" | "width" | "height"> & {
|
|
5
|
+
export declare type PrismicNextImageProps = Omit<ImageProps, "src" | "alt" | "width" | "height" | "layout"> & {
|
|
6
6
|
/**
|
|
7
7
|
* The Prismic Image field or thumbnail to render.
|
|
8
8
|
*/
|
|
@@ -28,7 +28,11 @@ export declare type PrismicNextImageProps = Omit<ImageProps, "src" | "alt" | "wi
|
|
|
28
28
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
|
|
29
29
|
*/
|
|
30
30
|
fallbackAlt?: "";
|
|
31
|
-
}
|
|
31
|
+
} & (({
|
|
32
|
+
layout?: "intrinsic" | "fixed";
|
|
33
|
+
} & Pick<ImageProps, "width" | "height">) | {
|
|
34
|
+
layout: "responsive" | "fill";
|
|
35
|
+
});
|
|
32
36
|
/**
|
|
33
37
|
* React component that renders an image from a Prismic Image field or one of
|
|
34
38
|
* its thumbnails using `next/image`. It will automatically set the `alt`
|
|
@@ -42,7 +46,6 @@ export declare type PrismicNextImageProps = Omit<ImageProps, "src" | "alt" | "wi
|
|
|
42
46
|
*
|
|
43
47
|
* @returns A responsive image component using `next/image` for the given Image
|
|
44
48
|
* field.
|
|
45
|
-
*
|
|
46
49
|
* @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image
|
|
47
50
|
*/
|
|
48
51
|
export declare const PrismicNextImage: ({ field, imgixParams, alt, fallbackAlt, layout, ...restProps }: PrismicNextImageProps) => JSX.Element | null;
|
package/dist/PrismicNextImage.js
CHANGED
|
@@ -4,6 +4,18 @@ import { buildURL } from "imgix-url-builder";
|
|
|
4
4
|
import * as prismicH from "@prismicio/helpers";
|
|
5
5
|
import { __PRODUCTION__ } from "./lib/__PRODUCTION__.js";
|
|
6
6
|
import { devMsg } from "./lib/devMsg.js";
|
|
7
|
+
const castInt = (input) => {
|
|
8
|
+
if (typeof input === "number" || typeof input === "undefined") {
|
|
9
|
+
return input;
|
|
10
|
+
} else {
|
|
11
|
+
const parsed = Number.parseInt(input);
|
|
12
|
+
if (Number.isNaN(parsed)) {
|
|
13
|
+
return void 0;
|
|
14
|
+
} else {
|
|
15
|
+
return parsed;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
};
|
|
7
19
|
const imgixLoader = (args) => {
|
|
8
20
|
const url = new URL(args.src);
|
|
9
21
|
const params = {
|
|
@@ -16,7 +28,14 @@ const imgixLoader = (args) => {
|
|
|
16
28
|
}
|
|
17
29
|
return buildURL(args.src, params);
|
|
18
30
|
};
|
|
19
|
-
const PrismicNextImage = ({
|
|
31
|
+
const PrismicNextImage = ({
|
|
32
|
+
field,
|
|
33
|
+
imgixParams = {},
|
|
34
|
+
alt,
|
|
35
|
+
fallbackAlt,
|
|
36
|
+
layout = "intrinsic",
|
|
37
|
+
...restProps
|
|
38
|
+
}) => {
|
|
20
39
|
if (!__PRODUCTION__) {
|
|
21
40
|
if (typeof alt === "string" && alt !== "") {
|
|
22
41
|
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")}`);
|
|
@@ -27,7 +46,30 @@ const PrismicNextImage = ({ field, imgixParams = {}, alt, fallbackAlt, layout, .
|
|
|
27
46
|
}
|
|
28
47
|
if (prismicH.isFilled.imageThumbnail(field)) {
|
|
29
48
|
const src = buildURL(field.url, imgixParams);
|
|
30
|
-
|
|
49
|
+
const ar = field.dimensions.width / field.dimensions.height;
|
|
50
|
+
let resolvedWidth = field.dimensions.width;
|
|
51
|
+
let resolvedHeight = field.dimensions.height;
|
|
52
|
+
if ((layout === "intrinsic" || layout === "fixed") && ("width" in restProps || "height" in restProps)) {
|
|
53
|
+
const castedWidth = castInt(restProps.width);
|
|
54
|
+
const castedHeight = castInt(restProps.height);
|
|
55
|
+
if (castedWidth) {
|
|
56
|
+
resolvedWidth = castedWidth;
|
|
57
|
+
} else {
|
|
58
|
+
if (castedHeight) {
|
|
59
|
+
resolvedWidth = ar * castedHeight;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
resolvedHeight = resolvedWidth / ar;
|
|
63
|
+
}
|
|
64
|
+
return jsx(Image, {
|
|
65
|
+
src,
|
|
66
|
+
width: layout === "fill" ? void 0 : resolvedWidth,
|
|
67
|
+
height: layout === "fill" ? void 0 : resolvedHeight,
|
|
68
|
+
alt: alt != null ? alt : field.alt || fallbackAlt,
|
|
69
|
+
loader: imgixLoader,
|
|
70
|
+
layout,
|
|
71
|
+
...restProps
|
|
72
|
+
});
|
|
31
73
|
} else {
|
|
32
74
|
return null;
|
|
33
75
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrismicNextImage.js","sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"PrismicNextImage.js","sources":["../src/PrismicNextImage.tsx"],"sourcesContent":["import Image, { ImageProps, ImageLoaderProps } from \"next/image\";\nimport { buildURL, ImgixURLParams } from \"imgix-url-builder\";\nimport * as prismicH from \"@prismicio/helpers\";\nimport * as prismicT from \"@prismicio/types\";\n\nimport { __PRODUCTION__ } from \"./lib/__PRODUCTION__\";\nimport { devMsg } from \"./lib/devMsg\";\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\n/**\n * Creates a `next/image` loader for Imgix, which Prismic uses, with an optional\n * collection of default Imgix parameters.\n *\n * @see To learn about `next/image` loaders: https://nextjs.org/docs/api-reference/next/image#loader\n * @see To learn about Imgix's URL API: https://docs.imgix.com/apis/rendering\n */\nconst imgixLoader = (args: ImageLoaderProps): string => {\n\tconst url = new URL(args.src);\n\n\tconst params: ImgixURLParams = {\n\t\tfit: (url.searchParams.get(\"fit\") as ImgixURLParams[\"fit\"]) || \"max\",\n\t\tw: args.width,\n\t\th: undefined,\n\t};\n\n\tif (args.quality) {\n\t\tparams.q = args.quality;\n\t}\n\n\treturn buildURL(args.src, params);\n};\n\nexport type PrismicNextImageProps = Omit<\n\tImageProps,\n\t\"src\" | \"alt\" | \"width\" | \"height\" | \"layout\"\n> & {\n\t/**\n\t * The Prismic Image field or thumbnail to render.\n\t */\n\tfield: prismicT.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?: ImgixURLParams;\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\t| ({\n\t\t\t\tlayout?: \"intrinsic\" | \"fixed\";\n\t\t } & Pick<ImageProps, \"width\" | \"height\">)\n\t\t| {\n\t\t\t\tlayout: \"responsive\" | \"fill\";\n\t\t }\n\t);\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 * @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image\n */\nexport const PrismicNextImage = ({\n\tfield,\n\timgixParams = {},\n\talt,\n\tfallbackAlt,\n\tlayout = \"intrinsic\",\n\t...restProps\n}: PrismicNextImageProps) => {\n\tif (!__PRODUCTION__) {\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 (prismicH.isFilled.imageThumbnail(field)) {\n\t\tconst src = buildURL(field.url, imgixParams);\n\t\tconst ar = field.dimensions.width / field.dimensions.height;\n\n\t\tlet resolvedWidth = field.dimensions.width;\n\t\tlet resolvedHeight = field.dimensions.height;\n\n\t\tif (\n\t\t\t(layout === \"intrinsic\" || layout === \"fixed\") &&\n\t\t\t(\"width\" in restProps || \"height\" in restProps)\n\t\t) {\n\t\t\tconst castedWidth = castInt(restProps.width);\n\t\t\tconst castedHeight = castInt(restProps.height);\n\n\t\t\tif (castedWidth) {\n\t\t\t\tresolvedWidth = castedWidth;\n\t\t\t} else {\n\t\t\t\tif (castedHeight) {\n\t\t\t\t\tresolvedWidth = ar * castedHeight;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tresolvedHeight = resolvedWidth / ar;\n\t\t}\n\n\t\treturn (\n\t\t\t<Image\n\t\t\t\tsrc={src}\n\t\t\t\twidth={layout === \"fill\" ? undefined : resolvedWidth}\n\t\t\t\theight={layout === \"fill\" ? undefined : resolvedHeight}\n\t\t\t\talt={alt ?? (field.alt || fallbackAlt)}\n\t\t\t\tloader={imgixLoader}\n\t\t\t\tlayout={layout}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n};\n"],"names":["castInt","input","parsed","Number","parseInt","isNaN","undefined","imgixLoader","args","url","URL","src","params","fit","searchParams","get","w","width","h","quality","q","buildURL","PrismicNextImage","field","imgixParams","alt","fallbackAlt","layout","restProps","__PRODUCTION__","console","warn","devMsg","prismicH","isFilled","imageThumbnail","ar","dimensions","height","resolvedWidth","resolvedHeight","castedWidth","castedHeight","_jsx","Image","loader"],"mappings":";;;;;;AAQA,MAAMA,UAAWC,CAA0D,UAAA;AAC1E,MAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,aAAa;AACvDA,WAAAA;AAAAA,EAAAA,OACD;AACAC,UAAAA,SAASC,OAAOC,SAASH,KAAK;AAEhCE,QAAAA,OAAOE,MAAMH,MAAM,GAAG;AAClBI,aAAAA;AAAAA,IAAAA,OACD;AACCJ,aAAAA;AAAAA,IACP;AAAA,EACD;AACF;AASA,MAAMK,cAAeC,CAAkC,SAAA;AACtD,QAAMC,MAAM,IAAIC,IAAIF,KAAKG,GAAG;AAE5B,QAAMC,SAAyB;AAAA,IAC9BC,KAAMJ,IAAIK,aAAaC,IAAI,KAAK,KAA+B;AAAA,IAC/DC,GAAGR,KAAKS;AAAAA,IACRC,GAAGZ;AAAAA,EAAAA;AAGJ,MAAIE,KAAKW,SAAS;AACjBP,WAAOQ,IAAIZ,KAAKW;AAAAA,EAChB;AAEME,SAAAA,SAASb,KAAKG,KAAKC,MAAM;AACjC;AA0DO,MAAMU,mBAAmB,CAAC;AAAA,EAChCC;AAAAA,EACAC,cAAc,CAAE;AAAA,EAChBC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,KACNC;AACoB,MAAI;AAC3B,MAAI,CAACC,gBAAgB;AACpB,QAAI,OAAOJ,QAAQ,YAAYA,QAAQ,IAAI;AAC1CK,cAAQC,KACkQ,yQAAAC,OACxQ,6BAA6B,GAC3B;AAAA,IAEJ;AAED,QAAI,OAAON,gBAAgB,YAAYA,gBAAgB,IAAI;AAC1DI,cAAQC,KACkS,ySAAAC,OACxS,6BAA6B,GAC3B;AAAA,IAEJ;AAAA,EACD;AAED,MAAIC,SAASC,SAASC,eAAeZ,KAAK,GAAG;AAC5C,UAAMZ,MAAMU,SAASE,MAAMd,KAAKe,WAAW;AAC3C,UAAMY,KAAKb,MAAMc,WAAWpB,QAAQM,MAAMc,WAAWC;AAEjDC,QAAAA,gBAAgBhB,MAAMc,WAAWpB;AACjCuB,QAAAA,iBAAiBjB,MAAMc,WAAWC;AAEtC,SACEX,WAAW,eAAeA,WAAW,aACrC,WAAWC,aAAa,YAAYA,YACpC;AACKa,YAAAA,cAAczC,QAAQ4B,UAAUX,KAAK;AACrCyB,YAAAA,eAAe1C,QAAQ4B,UAAUU,MAAM;AAE7C,UAAIG,aAAa;AACAA,wBAAAA;AAAAA,MAAAA,OACV;AACN,YAAIC,cAAc;AACjBH,0BAAgBH,KAAKM;AAAAA,QACrB;AAAA,MACD;AAEDF,uBAAiBD,gBAAgBH;AAAAA,IACjC;AAED,WACCO,IAACC,OACA;AAAA,MAAAjC;AAAAA,MACAM,OAAOU,WAAW,SAASrB,SAAYiC;AAAAA,MACvCD,QAAQX,WAAW,SAASrB,SAAYkC;AAAAA,MACxCf,KAAKA,oBAAQF,MAAME,OAAOC;AAAAA,MAC1BmB,QAAQtC;AAAAA,MACRoB;AAAAA,MACI,GAAAC;AAAAA,IAAAA,CACH;AAAA,EAAA,OAEG;AACC,WAAA;AAAA,EACP;AACF;"}
|
package/dist/PrismicPreview.cjs
CHANGED
|
@@ -25,7 +25,12 @@ function _interopNamespace(e) {
|
|
|
25
25
|
return Object.freeze(n);
|
|
26
26
|
}
|
|
27
27
|
const React__namespace = /* @__PURE__ */ _interopNamespace(React);
|
|
28
|
-
function PrismicPreview({
|
|
28
|
+
function PrismicPreview({
|
|
29
|
+
repositoryName,
|
|
30
|
+
children,
|
|
31
|
+
updatePreviewURL = "/api/preview",
|
|
32
|
+
exitPreviewURL = "/api/exit-preview"
|
|
33
|
+
}) {
|
|
29
34
|
const router$1 = router.useRouter();
|
|
30
35
|
const resolvedUpdatePreviewURL = router$1.basePath + updatePreviewURL;
|
|
31
36
|
const resolvedExitPreviewURL = router$1.basePath + exitPreviewURL;
|
|
@@ -68,14 +73,12 @@ function PrismicPreview({ repositoryName, children, updatePreviewURL = "/api/pre
|
|
|
68
73
|
window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
|
|
69
74
|
window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
|
|
70
75
|
};
|
|
71
|
-
}, [
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
]);
|
|
78
|
-
return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsx(react.PrismicToolbar, { repositoryName })] });
|
|
76
|
+
}, [repositoryName, resolvedExitPreviewURL, resolvedUpdatePreviewURL, router$1.isPreview, router$1.basePath]);
|
|
77
|
+
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
78
|
+
children: [children, jsxRuntime.jsx(react.PrismicToolbar, {
|
|
79
|
+
repositoryName
|
|
80
|
+
})]
|
|
81
|
+
});
|
|
79
82
|
}
|
|
80
83
|
exports.PrismicPreview = PrismicPreview;
|
|
81
84
|
//# sourceMappingURL=PrismicPreview.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrismicPreview.cjs","sources":["../src/PrismicPreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { PrismicToolbar } from \"@prismicio/react\";\nimport { useRouter } from \"next/router\";\n\nimport { getPrismicPreviewCookie } from \"./lib/getPrismicPreviewCookie\";\nimport { getPreviewCookieRepositoryName } from \"./lib/getPreviewCookieRepositoryName\";\n\n/**\n * Props for `<PrismicPreview>`.\n */\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\t * **Note**: If your `next.config.js` file contains a `basePath`, it is\n\t * automatically included.\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\t * **Note**: If your `next.config.js` file contains a `basePath`, it is\n\t * automatically included.\n\t */\n\texitPreviewURL?: string;\n\n\t/**\n\t * Children to render adjacent to the Prismic Toolbar. The Prismic Toolbar\n\t * will be rendered last.\n\t */\n\tchildren?: React.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 update the Next.js preview\n * cookie and refresh the page.\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 function PrismicPreview({\n\trepositoryName,\n\tchildren,\n\tupdatePreviewURL = \"/api/preview\",\n\texitPreviewURL = \"/api/exit-preview\",\n}: PrismicPreviewProps): JSX.Element {\n\tconst router = useRouter();\n\n\tconst resolvedUpdatePreviewURL = router.basePath + updatePreviewURL;\n\tconst resolvedExitPreviewURL = router.basePath + exitPreviewURL;\n\n\tReact.useEffect(() => {\n\t\t/**\n\t\t * Starts Preview Mode and refreshes the page's props.\n\t\t */\n\t\tconst startPreviewMode = async () => {\n\t\t\t// Start Next.js Preview Mode via the given preview API endpoint.\n\t\t\tconst res = await globalThis.fetch(resolvedUpdatePreviewURL);\n\n\t\t\tif (res.ok) {\n\t\t\t\tglobalThis.location.reload();\n\t\t\t} else {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`[<PrismicPreview>] Failed to start or update Preview Mode using the \"${resolvedUpdatePreviewURL}\" API endpoint. Does it exist?`,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst handlePrismicPreviewUpdate = async (event: Event) => {\n\t\t\t// Prevent the toolbar from reloading the page.\n\t\t\tevent.preventDefault();\n\n\t\t\tawait startPreviewMode();\n\t\t};\n\n\t\tconst handlePrismicPreviewEnd = async (event: Event) => {\n\t\t\t// Prevent the toolbar from reloading the page.\n\t\t\tevent.preventDefault();\n\n\t\t\t// Exit Next.js Preview Mode via the given preview API endpoint.\n\t\t\tconst res = await globalThis.fetch(resolvedExitPreviewURL);\n\n\t\t\tif (res.ok) {\n\t\t\t\tglobalThis.location.reload();\n\t\t\t} else {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`[<PrismicPreview>] Failed to exit Preview Mode using the \"${resolvedExitPreviewURL}\" API endpoint. Does it exist?`,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tif (router.isPreview) {\n\t\t\t// Register Prismic Toolbar event handlers.\n\t\t\twindow.addEventListener(\n\t\t\t\t\"prismicPreviewUpdate\",\n\t\t\t\thandlePrismicPreviewUpdate,\n\t\t\t);\n\t\t\twindow.addEventListener(\"prismicPreviewEnd\", handlePrismicPreviewEnd);\n\t\t} else {\n\t\t\tconst prismicPreviewCookie = getPrismicPreviewCookie(\n\t\t\t\tglobalThis.document.cookie,\n\t\t\t);\n\n\t\t\tif (prismicPreviewCookie) {\n\t\t\t\t// If a Prismic preview cookie is present, but Next.js Preview\n\t\t\t\t// Mode is not active, we must activate Preview Mode manually.\n\t\t\t\t//\n\t\t\t\t// This will happen when a visitor accesses the page using a\n\t\t\t\t// Prismic preview share link.\n\n\t\t\t\t/**\n\t\t\t\t * Determines if the current location is a descendant of the app's base\n\t\t\t\t * path.\n\t\t\t\t *\n\t\t\t\t * This is used to prevent infinite refrehes; when\n\t\t\t\t * `isDescendantOfBasePath` is `false`, `router.isPreview` is also\n\t\t\t\t * `false`.\n\t\t\t\t *\n\t\t\t\t * If the app does not have a base path, this should always be `true`.\n\t\t\t\t */\n\t\t\t\tconst locationIsDescendantOfBasePath = window.location.href.startsWith(\n\t\t\t\t\twindow.location.origin + router.basePath,\n\t\t\t\t);\n\n\t\t\t\tconst prismicPreviewCookieRepositoryName =\n\t\t\t\t\tgetPreviewCookieRepositoryName(prismicPreviewCookie);\n\n\t\t\t\tif (\n\t\t\t\t\tlocationIsDescendantOfBasePath &&\n\t\t\t\t\tprismicPreviewCookieRepositoryName === repositoryName\n\t\t\t\t) {\n\t\t\t\t\tstartPreviewMode();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// On cleanup, unregister Prismic Toolbar event handlers.\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\n\t\t\t\t\"prismicPreviewUpdate\",\n\t\t\t\thandlePrismicPreviewUpdate,\n\t\t\t);\n\t\t\twindow.removeEventListener(\"prismicPreviewEnd\", handlePrismicPreviewEnd);\n\t\t};\n\t}, [\n\t\trepositoryName,\n\t\tresolvedExitPreviewURL,\n\t\tresolvedUpdatePreviewURL,\n\t\trouter.isPreview,\n\t\trouter.basePath,\n\t]);\n\n\treturn (\n\t\t<>\n\t\t\t{children}\n\t\t\t<PrismicToolbar repositoryName={repositoryName} />\n\t\t</>\n\t);\n}\n"],"names":["router","useRouter","React","getPrismicPreviewCookie","getPreviewCookieRepositoryName","_jsxs","_Fragment","_jsx","PrismicToolbar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDgB,
|
|
1
|
+
{"version":3,"file":"PrismicPreview.cjs","sources":["../src/PrismicPreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { PrismicToolbar } from \"@prismicio/react\";\nimport { useRouter } from \"next/router\";\n\nimport { getPrismicPreviewCookie } from \"./lib/getPrismicPreviewCookie\";\nimport { getPreviewCookieRepositoryName } from \"./lib/getPreviewCookieRepositoryName\";\n\n/**\n * Props for `<PrismicPreview>`.\n */\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\t * **Note**: If your `next.config.js` file contains a `basePath`, it is\n\t * automatically included.\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\t * **Note**: If your `next.config.js` file contains a `basePath`, it is\n\t * automatically included.\n\t */\n\texitPreviewURL?: string;\n\n\t/**\n\t * Children to render adjacent to the Prismic Toolbar. The Prismic Toolbar\n\t * will be rendered last.\n\t */\n\tchildren?: React.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 update the Next.js preview\n * cookie and refresh the page.\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 function PrismicPreview({\n\trepositoryName,\n\tchildren,\n\tupdatePreviewURL = \"/api/preview\",\n\texitPreviewURL = \"/api/exit-preview\",\n}: PrismicPreviewProps): JSX.Element {\n\tconst router = useRouter();\n\n\tconst resolvedUpdatePreviewURL = router.basePath + updatePreviewURL;\n\tconst resolvedExitPreviewURL = router.basePath + exitPreviewURL;\n\n\tReact.useEffect(() => {\n\t\t/**\n\t\t * Starts Preview Mode and refreshes the page's props.\n\t\t */\n\t\tconst startPreviewMode = async () => {\n\t\t\t// Start Next.js Preview Mode via the given preview API endpoint.\n\t\t\tconst res = await globalThis.fetch(resolvedUpdatePreviewURL);\n\n\t\t\tif (res.ok) {\n\t\t\t\tglobalThis.location.reload();\n\t\t\t} else {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`[<PrismicPreview>] Failed to start or update Preview Mode using the \"${resolvedUpdatePreviewURL}\" API endpoint. Does it exist?`,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst handlePrismicPreviewUpdate = async (event: Event) => {\n\t\t\t// Prevent the toolbar from reloading the page.\n\t\t\tevent.preventDefault();\n\n\t\t\tawait startPreviewMode();\n\t\t};\n\n\t\tconst handlePrismicPreviewEnd = async (event: Event) => {\n\t\t\t// Prevent the toolbar from reloading the page.\n\t\t\tevent.preventDefault();\n\n\t\t\t// Exit Next.js Preview Mode via the given preview API endpoint.\n\t\t\tconst res = await globalThis.fetch(resolvedExitPreviewURL);\n\n\t\t\tif (res.ok) {\n\t\t\t\tglobalThis.location.reload();\n\t\t\t} else {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`[<PrismicPreview>] Failed to exit Preview Mode using the \"${resolvedExitPreviewURL}\" API endpoint. Does it exist?`,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tif (router.isPreview) {\n\t\t\t// Register Prismic Toolbar event handlers.\n\t\t\twindow.addEventListener(\n\t\t\t\t\"prismicPreviewUpdate\",\n\t\t\t\thandlePrismicPreviewUpdate,\n\t\t\t);\n\t\t\twindow.addEventListener(\"prismicPreviewEnd\", handlePrismicPreviewEnd);\n\t\t} else {\n\t\t\tconst prismicPreviewCookie = getPrismicPreviewCookie(\n\t\t\t\tglobalThis.document.cookie,\n\t\t\t);\n\n\t\t\tif (prismicPreviewCookie) {\n\t\t\t\t// If a Prismic preview cookie is present, but Next.js Preview\n\t\t\t\t// Mode is not active, we must activate Preview Mode manually.\n\t\t\t\t//\n\t\t\t\t// This will happen when a visitor accesses the page using a\n\t\t\t\t// Prismic preview share link.\n\n\t\t\t\t/**\n\t\t\t\t * Determines if the current location is a descendant of the app's base\n\t\t\t\t * path.\n\t\t\t\t *\n\t\t\t\t * This is used to prevent infinite refrehes; when\n\t\t\t\t * `isDescendantOfBasePath` is `false`, `router.isPreview` is also\n\t\t\t\t * `false`.\n\t\t\t\t *\n\t\t\t\t * If the app does not have a base path, this should always be `true`.\n\t\t\t\t */\n\t\t\t\tconst locationIsDescendantOfBasePath = window.location.href.startsWith(\n\t\t\t\t\twindow.location.origin + router.basePath,\n\t\t\t\t);\n\n\t\t\t\tconst prismicPreviewCookieRepositoryName =\n\t\t\t\t\tgetPreviewCookieRepositoryName(prismicPreviewCookie);\n\n\t\t\t\tif (\n\t\t\t\t\tlocationIsDescendantOfBasePath &&\n\t\t\t\t\tprismicPreviewCookieRepositoryName === repositoryName\n\t\t\t\t) {\n\t\t\t\t\tstartPreviewMode();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// On cleanup, unregister Prismic Toolbar event handlers.\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\n\t\t\t\t\"prismicPreviewUpdate\",\n\t\t\t\thandlePrismicPreviewUpdate,\n\t\t\t);\n\t\t\twindow.removeEventListener(\"prismicPreviewEnd\", handlePrismicPreviewEnd);\n\t\t};\n\t}, [\n\t\trepositoryName,\n\t\tresolvedExitPreviewURL,\n\t\tresolvedUpdatePreviewURL,\n\t\trouter.isPreview,\n\t\trouter.basePath,\n\t]);\n\n\treturn (\n\t\t<>\n\t\t\t{children}\n\t\t\t<PrismicToolbar repositoryName={repositoryName} />\n\t\t</>\n\t);\n}\n"],"names":["PrismicPreview","repositoryName","children","updatePreviewURL","exitPreviewURL","router","useRouter","resolvedUpdatePreviewURL","basePath","resolvedExitPreviewURL","React","useEffect","startPreviewMode","res","globalThis","fetch","ok","location","reload","error","handlePrismicPreviewUpdate","event","preventDefault","handlePrismicPreviewEnd","isPreview","addEventListener","prismicPreviewCookie","getPrismicPreviewCookie","document","cookie","locationIsDescendantOfBasePath","window","href","startsWith","origin","prismicPreviewCookieRepositoryName","getPreviewCookieRepositoryName","removeEventListener","_jsxs","_Fragment","_jsx","PrismicToolbar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDgB,SAAAA,eAAe;AAAA,EAC9BC;AAAAA,EACAC;AAAAA,EACAC,mBAAmB;AAAA,EACnBC,iBAAiB;AACI,GAAA;AACrB,QAAMC,WAASC,OAAAA;AAETC,QAAAA,2BAA2BF,SAAOG,WAAWL;AAC7CM,QAAAA,yBAAyBJ,SAAOG,WAAWJ;AAEjDM,mBAAMC,UAAU,MAAK;AAIpB,UAAMC,mBAAmB,YAAW;AAEnC,YAAMC,MAAM,MAAMC,WAAWC,MAAMR,wBAAwB;AAE3D,UAAIM,IAAIG,IAAI;AACXF,mBAAWG,SAASC;MAAQ,OACtB;AACEC,gBAAAA,8EACiEZ,wDAAwD;AAAA,MAEjI;AAAA,IAAA;AAGIa,UAAAA,6BAA6B,OAAOC,UAAgB;AAEzDA,YAAMC,eAAgB;AAEtB,YAAMV,iBAAkB;AAAA,IAAA;AAGnBW,UAAAA,0BAA0B,OAAOF,UAAgB;AAEtDA,YAAMC,eAAgB;AAGtB,YAAMT,MAAM,MAAMC,WAAWC,MAAMN,sBAAsB;AAEzD,UAAII,IAAIG,IAAI;AACXF,mBAAWG,SAASC;MAAQ,OACtB;AACEC,gBAAAA,mEACsDV,sDAAsD;AAAA,MAEpH;AAAA,IAAA;AAGF,QAAIJ,SAAOmB,WAAW;AAEdC,aAAAA,iBACN,wBACAL,0BAA0B;AAEpBK,aAAAA,iBAAiB,qBAAqBF,uBAAuB;AAAA,IAAA,OAC9D;AACN,YAAMG,uBAAuBC,wBAAAA,wBAC5Bb,WAAWc,SAASC,MAAM;AAG3B,UAAIH,sBAAsB;AAiBnBI,cAAAA,iCAAiCC,OAAOd,SAASe,KAAKC,WAC3DF,OAAOd,SAASiB,SAAS7B,SAAOG,QAAQ;AAGnC2B,cAAAA,qCACLC,8DAA+BV,oBAAoB;AAGnDI,YAAAA,kCACAK,uCAAuClC,gBACtC;AACiB;QAClB;AAAA,MACD;AAAA,IACD;AAGD,WAAO,MAAK;AACJoC,aAAAA,oBACN,wBACAjB,0BAA0B;AAEpBiB,aAAAA,oBAAoB,qBAAqBd,uBAAuB;AAAA,IAAA;AAAA,EACxE,GACE,CACFtB,gBACAQ,wBACAF,0BACAF,SAAOmB,WACPnB,SAAOG,QAAQ,CACf;AAED,SACC8B,WAAAA,KAAAC,WAAAA,UAAA;AAAA,IAAArC,UAAA,CACEA,UACDsC,WAAAA,IAACC,sBAAe;AAAA,MAAAxC;AAAAA,IAAAA,CAAkC,CAAA;AAAA,EAAA,CAAA;AAGrD;;"}
|
package/dist/PrismicPreview.js
CHANGED
|
@@ -4,7 +4,12 @@ import { PrismicToolbar } from "@prismicio/react";
|
|
|
4
4
|
import { useRouter } from "next/router";
|
|
5
5
|
import { getPrismicPreviewCookie } from "./lib/getPrismicPreviewCookie.js";
|
|
6
6
|
import { getPreviewCookieRepositoryName } from "./lib/getPreviewCookieRepositoryName.js";
|
|
7
|
-
function PrismicPreview({
|
|
7
|
+
function PrismicPreview({
|
|
8
|
+
repositoryName,
|
|
9
|
+
children,
|
|
10
|
+
updatePreviewURL = "/api/preview",
|
|
11
|
+
exitPreviewURL = "/api/exit-preview"
|
|
12
|
+
}) {
|
|
8
13
|
const router = useRouter();
|
|
9
14
|
const resolvedUpdatePreviewURL = router.basePath + updatePreviewURL;
|
|
10
15
|
const resolvedExitPreviewURL = router.basePath + exitPreviewURL;
|
|
@@ -47,14 +52,12 @@ function PrismicPreview({ repositoryName, children, updatePreviewURL = "/api/pre
|
|
|
47
52
|
window.removeEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
|
|
48
53
|
window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
|
|
49
54
|
};
|
|
50
|
-
}, [
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
]);
|
|
57
|
-
return jsxs(Fragment, { children: [children, jsx(PrismicToolbar, { repositoryName })] });
|
|
55
|
+
}, [repositoryName, resolvedExitPreviewURL, resolvedUpdatePreviewURL, router.isPreview, router.basePath]);
|
|
56
|
+
return jsxs(Fragment, {
|
|
57
|
+
children: [children, jsx(PrismicToolbar, {
|
|
58
|
+
repositoryName
|
|
59
|
+
})]
|
|
60
|
+
});
|
|
58
61
|
}
|
|
59
62
|
export {
|
|
60
63
|
PrismicPreview
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrismicPreview.js","sources":["../src/PrismicPreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { PrismicToolbar } from \"@prismicio/react\";\nimport { useRouter } from \"next/router\";\n\nimport { getPrismicPreviewCookie } from \"./lib/getPrismicPreviewCookie\";\nimport { getPreviewCookieRepositoryName } from \"./lib/getPreviewCookieRepositoryName\";\n\n/**\n * Props for `<PrismicPreview>`.\n */\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\t * **Note**: If your `next.config.js` file contains a `basePath`, it is\n\t * automatically included.\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\t * **Note**: If your `next.config.js` file contains a `basePath`, it is\n\t * automatically included.\n\t */\n\texitPreviewURL?: string;\n\n\t/**\n\t * Children to render adjacent to the Prismic Toolbar. The Prismic Toolbar\n\t * will be rendered last.\n\t */\n\tchildren?: React.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 update the Next.js preview\n * cookie and refresh the page.\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 function PrismicPreview({\n\trepositoryName,\n\tchildren,\n\tupdatePreviewURL = \"/api/preview\",\n\texitPreviewURL = \"/api/exit-preview\",\n}: PrismicPreviewProps): JSX.Element {\n\tconst router = useRouter();\n\n\tconst resolvedUpdatePreviewURL = router.basePath + updatePreviewURL;\n\tconst resolvedExitPreviewURL = router.basePath + exitPreviewURL;\n\n\tReact.useEffect(() => {\n\t\t/**\n\t\t * Starts Preview Mode and refreshes the page's props.\n\t\t */\n\t\tconst startPreviewMode = async () => {\n\t\t\t// Start Next.js Preview Mode via the given preview API endpoint.\n\t\t\tconst res = await globalThis.fetch(resolvedUpdatePreviewURL);\n\n\t\t\tif (res.ok) {\n\t\t\t\tglobalThis.location.reload();\n\t\t\t} else {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`[<PrismicPreview>] Failed to start or update Preview Mode using the \"${resolvedUpdatePreviewURL}\" API endpoint. Does it exist?`,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst handlePrismicPreviewUpdate = async (event: Event) => {\n\t\t\t// Prevent the toolbar from reloading the page.\n\t\t\tevent.preventDefault();\n\n\t\t\tawait startPreviewMode();\n\t\t};\n\n\t\tconst handlePrismicPreviewEnd = async (event: Event) => {\n\t\t\t// Prevent the toolbar from reloading the page.\n\t\t\tevent.preventDefault();\n\n\t\t\t// Exit Next.js Preview Mode via the given preview API endpoint.\n\t\t\tconst res = await globalThis.fetch(resolvedExitPreviewURL);\n\n\t\t\tif (res.ok) {\n\t\t\t\tglobalThis.location.reload();\n\t\t\t} else {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`[<PrismicPreview>] Failed to exit Preview Mode using the \"${resolvedExitPreviewURL}\" API endpoint. Does it exist?`,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tif (router.isPreview) {\n\t\t\t// Register Prismic Toolbar event handlers.\n\t\t\twindow.addEventListener(\n\t\t\t\t\"prismicPreviewUpdate\",\n\t\t\t\thandlePrismicPreviewUpdate,\n\t\t\t);\n\t\t\twindow.addEventListener(\"prismicPreviewEnd\", handlePrismicPreviewEnd);\n\t\t} else {\n\t\t\tconst prismicPreviewCookie = getPrismicPreviewCookie(\n\t\t\t\tglobalThis.document.cookie,\n\t\t\t);\n\n\t\t\tif (prismicPreviewCookie) {\n\t\t\t\t// If a Prismic preview cookie is present, but Next.js Preview\n\t\t\t\t// Mode is not active, we must activate Preview Mode manually.\n\t\t\t\t//\n\t\t\t\t// This will happen when a visitor accesses the page using a\n\t\t\t\t// Prismic preview share link.\n\n\t\t\t\t/**\n\t\t\t\t * Determines if the current location is a descendant of the app's base\n\t\t\t\t * path.\n\t\t\t\t *\n\t\t\t\t * This is used to prevent infinite refrehes; when\n\t\t\t\t * `isDescendantOfBasePath` is `false`, `router.isPreview` is also\n\t\t\t\t * `false`.\n\t\t\t\t *\n\t\t\t\t * If the app does not have a base path, this should always be `true`.\n\t\t\t\t */\n\t\t\t\tconst locationIsDescendantOfBasePath = window.location.href.startsWith(\n\t\t\t\t\twindow.location.origin + router.basePath,\n\t\t\t\t);\n\n\t\t\t\tconst prismicPreviewCookieRepositoryName =\n\t\t\t\t\tgetPreviewCookieRepositoryName(prismicPreviewCookie);\n\n\t\t\t\tif (\n\t\t\t\t\tlocationIsDescendantOfBasePath &&\n\t\t\t\t\tprismicPreviewCookieRepositoryName === repositoryName\n\t\t\t\t) {\n\t\t\t\t\tstartPreviewMode();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// On cleanup, unregister Prismic Toolbar event handlers.\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\n\t\t\t\t\"prismicPreviewUpdate\",\n\t\t\t\thandlePrismicPreviewUpdate,\n\t\t\t);\n\t\t\twindow.removeEventListener(\"prismicPreviewEnd\", handlePrismicPreviewEnd);\n\t\t};\n\t}, [\n\t\trepositoryName,\n\t\tresolvedExitPreviewURL,\n\t\tresolvedUpdatePreviewURL,\n\t\trouter.isPreview,\n\t\trouter.basePath,\n\t]);\n\n\treturn (\n\t\t<>\n\t\t\t{children}\n\t\t\t<PrismicToolbar repositoryName={repositoryName} />\n\t\t</>\n\t);\n}\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;AAmDgB,
|
|
1
|
+
{"version":3,"file":"PrismicPreview.js","sources":["../src/PrismicPreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { PrismicToolbar } from \"@prismicio/react\";\nimport { useRouter } from \"next/router\";\n\nimport { getPrismicPreviewCookie } from \"./lib/getPrismicPreviewCookie\";\nimport { getPreviewCookieRepositoryName } from \"./lib/getPreviewCookieRepositoryName\";\n\n/**\n * Props for `<PrismicPreview>`.\n */\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\t * **Note**: If your `next.config.js` file contains a `basePath`, it is\n\t * automatically included.\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\t * **Note**: If your `next.config.js` file contains a `basePath`, it is\n\t * automatically included.\n\t */\n\texitPreviewURL?: string;\n\n\t/**\n\t * Children to render adjacent to the Prismic Toolbar. The Prismic Toolbar\n\t * will be rendered last.\n\t */\n\tchildren?: React.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 update the Next.js preview\n * cookie and refresh the page.\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 function PrismicPreview({\n\trepositoryName,\n\tchildren,\n\tupdatePreviewURL = \"/api/preview\",\n\texitPreviewURL = \"/api/exit-preview\",\n}: PrismicPreviewProps): JSX.Element {\n\tconst router = useRouter();\n\n\tconst resolvedUpdatePreviewURL = router.basePath + updatePreviewURL;\n\tconst resolvedExitPreviewURL = router.basePath + exitPreviewURL;\n\n\tReact.useEffect(() => {\n\t\t/**\n\t\t * Starts Preview Mode and refreshes the page's props.\n\t\t */\n\t\tconst startPreviewMode = async () => {\n\t\t\t// Start Next.js Preview Mode via the given preview API endpoint.\n\t\t\tconst res = await globalThis.fetch(resolvedUpdatePreviewURL);\n\n\t\t\tif (res.ok) {\n\t\t\t\tglobalThis.location.reload();\n\t\t\t} else {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`[<PrismicPreview>] Failed to start or update Preview Mode using the \"${resolvedUpdatePreviewURL}\" API endpoint. Does it exist?`,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst handlePrismicPreviewUpdate = async (event: Event) => {\n\t\t\t// Prevent the toolbar from reloading the page.\n\t\t\tevent.preventDefault();\n\n\t\t\tawait startPreviewMode();\n\t\t};\n\n\t\tconst handlePrismicPreviewEnd = async (event: Event) => {\n\t\t\t// Prevent the toolbar from reloading the page.\n\t\t\tevent.preventDefault();\n\n\t\t\t// Exit Next.js Preview Mode via the given preview API endpoint.\n\t\t\tconst res = await globalThis.fetch(resolvedExitPreviewURL);\n\n\t\t\tif (res.ok) {\n\t\t\t\tglobalThis.location.reload();\n\t\t\t} else {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`[<PrismicPreview>] Failed to exit Preview Mode using the \"${resolvedExitPreviewURL}\" API endpoint. Does it exist?`,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tif (router.isPreview) {\n\t\t\t// Register Prismic Toolbar event handlers.\n\t\t\twindow.addEventListener(\n\t\t\t\t\"prismicPreviewUpdate\",\n\t\t\t\thandlePrismicPreviewUpdate,\n\t\t\t);\n\t\t\twindow.addEventListener(\"prismicPreviewEnd\", handlePrismicPreviewEnd);\n\t\t} else {\n\t\t\tconst prismicPreviewCookie = getPrismicPreviewCookie(\n\t\t\t\tglobalThis.document.cookie,\n\t\t\t);\n\n\t\t\tif (prismicPreviewCookie) {\n\t\t\t\t// If a Prismic preview cookie is present, but Next.js Preview\n\t\t\t\t// Mode is not active, we must activate Preview Mode manually.\n\t\t\t\t//\n\t\t\t\t// This will happen when a visitor accesses the page using a\n\t\t\t\t// Prismic preview share link.\n\n\t\t\t\t/**\n\t\t\t\t * Determines if the current location is a descendant of the app's base\n\t\t\t\t * path.\n\t\t\t\t *\n\t\t\t\t * This is used to prevent infinite refrehes; when\n\t\t\t\t * `isDescendantOfBasePath` is `false`, `router.isPreview` is also\n\t\t\t\t * `false`.\n\t\t\t\t *\n\t\t\t\t * If the app does not have a base path, this should always be `true`.\n\t\t\t\t */\n\t\t\t\tconst locationIsDescendantOfBasePath = window.location.href.startsWith(\n\t\t\t\t\twindow.location.origin + router.basePath,\n\t\t\t\t);\n\n\t\t\t\tconst prismicPreviewCookieRepositoryName =\n\t\t\t\t\tgetPreviewCookieRepositoryName(prismicPreviewCookie);\n\n\t\t\t\tif (\n\t\t\t\t\tlocationIsDescendantOfBasePath &&\n\t\t\t\t\tprismicPreviewCookieRepositoryName === repositoryName\n\t\t\t\t) {\n\t\t\t\t\tstartPreviewMode();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// On cleanup, unregister Prismic Toolbar event handlers.\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\n\t\t\t\t\"prismicPreviewUpdate\",\n\t\t\t\thandlePrismicPreviewUpdate,\n\t\t\t);\n\t\t\twindow.removeEventListener(\"prismicPreviewEnd\", handlePrismicPreviewEnd);\n\t\t};\n\t}, [\n\t\trepositoryName,\n\t\tresolvedExitPreviewURL,\n\t\tresolvedUpdatePreviewURL,\n\t\trouter.isPreview,\n\t\trouter.basePath,\n\t]);\n\n\treturn (\n\t\t<>\n\t\t\t{children}\n\t\t\t<PrismicToolbar repositoryName={repositoryName} />\n\t\t</>\n\t);\n}\n"],"names":["PrismicPreview","repositoryName","children","updatePreviewURL","exitPreviewURL","router","useRouter","resolvedUpdatePreviewURL","basePath","resolvedExitPreviewURL","React","useEffect","startPreviewMode","res","globalThis","fetch","ok","location","reload","error","handlePrismicPreviewUpdate","event","preventDefault","handlePrismicPreviewEnd","isPreview","addEventListener","prismicPreviewCookie","getPrismicPreviewCookie","document","cookie","locationIsDescendantOfBasePath","window","href","startsWith","origin","prismicPreviewCookieRepositoryName","getPreviewCookieRepositoryName","removeEventListener","_jsxs","_Fragment","_jsx","PrismicToolbar"],"mappings":";;;;;;AAmDgB,SAAAA,eAAe;AAAA,EAC9BC;AAAAA,EACAC;AAAAA,EACAC,mBAAmB;AAAA,EACnBC,iBAAiB;AACI,GAAA;AACrB,QAAMC,SAASC;AAETC,QAAAA,2BAA2BF,OAAOG,WAAWL;AAC7CM,QAAAA,yBAAyBJ,OAAOG,WAAWJ;AAEjDM,QAAMC,UAAU,MAAK;AAIpB,UAAMC,mBAAmB,YAAW;AAEnC,YAAMC,MAAM,MAAMC,WAAWC,MAAMR,wBAAwB;AAE3D,UAAIM,IAAIG,IAAI;AACXF,mBAAWG,SAASC;MAAQ,OACtB;AACEC,gBAAAA,8EACiEZ,wDAAwD;AAAA,MAEjI;AAAA,IAAA;AAGIa,UAAAA,6BAA6B,OAAOC,UAAgB;AAEzDA,YAAMC,eAAgB;AAEtB,YAAMV,iBAAkB;AAAA,IAAA;AAGnBW,UAAAA,0BAA0B,OAAOF,UAAgB;AAEtDA,YAAMC,eAAgB;AAGtB,YAAMT,MAAM,MAAMC,WAAWC,MAAMN,sBAAsB;AAEzD,UAAII,IAAIG,IAAI;AACXF,mBAAWG,SAASC;MAAQ,OACtB;AACEC,gBAAAA,mEACsDV,sDAAsD;AAAA,MAEpH;AAAA,IAAA;AAGF,QAAIJ,OAAOmB,WAAW;AAEdC,aAAAA,iBACN,wBACAL,0BAA0B;AAEpBK,aAAAA,iBAAiB,qBAAqBF,uBAAuB;AAAA,IAAA,OAC9D;AACN,YAAMG,uBAAuBC,wBAC5Bb,WAAWc,SAASC,MAAM;AAG3B,UAAIH,sBAAsB;AAiBnBI,cAAAA,iCAAiCC,OAAOd,SAASe,KAAKC,WAC3DF,OAAOd,SAASiB,SAAS7B,OAAOG,QAAQ;AAGnC2B,cAAAA,qCACLC,+BAA+BV,oBAAoB;AAGnDI,YAAAA,kCACAK,uCAAuClC,gBACtC;AACiB;QAClB;AAAA,MACD;AAAA,IACD;AAGD,WAAO,MAAK;AACJoC,aAAAA,oBACN,wBACAjB,0BAA0B;AAEpBiB,aAAAA,oBAAoB,qBAAqBd,uBAAuB;AAAA,IAAA;AAAA,EACxE,GACE,CACFtB,gBACAQ,wBACAF,0BACAF,OAAOmB,WACPnB,OAAOG,QAAQ,CACf;AAED,SACC8B,KAAAC,UAAA;AAAA,IAAArC,UAAA,CACEA,UACDsC,IAACC,gBAAe;AAAA,MAAAxC;AAAAA,IAAAA,CAAkC,CAAA;AAAA,EAAA,CAAA;AAGrD;"}
|
package/dist/package.cjs
CHANGED
package/dist/package.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prismicio/next",
|
|
3
|
-
"version": "0.1.6
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"description": "Helpers to integrate Prismic into Next.js apps",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"typescript",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"lint": "eslint --ext .js,.ts .",
|
|
38
38
|
"prepare": "npm run build",
|
|
39
39
|
"release": "npm run test && standard-version && git push --follow-tags && npm run build && npm publish",
|
|
40
|
-
"release:alpha": "npm run test && standard-version --release-as
|
|
41
|
-
"release:alpha:dry": "standard-version --release-as
|
|
40
|
+
"release:alpha": "npm run test && standard-version --release-as patch --prerelease alpha && git push --follow-tags && npm run build && npm publish --tag alpha",
|
|
41
|
+
"release:alpha:dry": "standard-version --release-as patch --prerelease alpha --dry-run",
|
|
42
42
|
"release:dry": "standard-version --dry-run",
|
|
43
43
|
"size": "size-limit",
|
|
44
44
|
"test": "npm run lint && npm run unit && npm run build && npm run size",
|
|
@@ -46,27 +46,27 @@
|
|
|
46
46
|
"unit:watch": "vitest watch"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@prismicio/client": "^6.
|
|
50
|
-
"@prismicio/helpers": "^2.3.
|
|
49
|
+
"@prismicio/client": "^6.7.1",
|
|
50
|
+
"@prismicio/helpers": "^2.3.5",
|
|
51
51
|
"@prismicio/react": "^2.5.0",
|
|
52
52
|
"@prismicio/types": "^0.2.3",
|
|
53
|
-
"@rollup/plugin-typescript": "^8.5.0",
|
|
54
|
-
"eslint-plugin-react": "^7.31.7",
|
|
55
|
-
"eslint-plugin-react-hooks": "^4.6.0",
|
|
56
53
|
"imgix-url-builder": "^0.0.3"
|
|
57
54
|
},
|
|
58
55
|
"devDependencies": {
|
|
59
56
|
"@prismicio/mock": "^0.1.1",
|
|
60
57
|
"@size-limit/preset-small-lib": "^8.1.0",
|
|
61
58
|
"@types/react-test-renderer": "^18.0.0",
|
|
62
|
-
"@typescript-eslint/eslint-plugin": "^5.
|
|
63
|
-
"@typescript-eslint/parser": "^5.
|
|
64
|
-
"@
|
|
65
|
-
"
|
|
59
|
+
"@typescript-eslint/eslint-plugin": "^5.40.0",
|
|
60
|
+
"@typescript-eslint/parser": "^5.40.0",
|
|
61
|
+
"@vitejs/plugin-react": "^2.1.0",
|
|
62
|
+
"@vitest/coverage-c8": "^0.24.1",
|
|
63
|
+
"eslint": "^8.25.0",
|
|
66
64
|
"eslint-config-prettier": "^8.5.0",
|
|
67
65
|
"eslint-plugin-prettier": "^4.2.1",
|
|
68
|
-
"eslint-plugin-
|
|
69
|
-
"
|
|
66
|
+
"eslint-plugin-react": "^7.31.10",
|
|
67
|
+
"eslint-plugin-react-hooks": "^4.6.0",
|
|
68
|
+
"eslint-plugin-tsdoc": "^0.2.17",
|
|
69
|
+
"happy-dom": "^7.5.6",
|
|
70
70
|
"next": "^12.1.4",
|
|
71
71
|
"nyc": "^15.1.0",
|
|
72
72
|
"prettier": "^2.7.1",
|
|
@@ -75,9 +75,10 @@
|
|
|
75
75
|
"react-test-renderer": "^18.2.0",
|
|
76
76
|
"size-limit": "^8.1.0",
|
|
77
77
|
"standard-version": "^9.5.0",
|
|
78
|
-
"typescript": "^4.8.
|
|
79
|
-
"vite": "^3.1.
|
|
80
|
-
"
|
|
78
|
+
"typescript": "^4.8.4",
|
|
79
|
+
"vite": "^3.1.7",
|
|
80
|
+
"vite-plugin-sdk": "^0.0.3",
|
|
81
|
+
"vitest": "^0.24.1"
|
|
81
82
|
},
|
|
82
83
|
"peerDependencies": {
|
|
83
84
|
"@prismicio/client": "^6.0.0",
|
|
@@ -85,7 +86,7 @@
|
|
|
85
86
|
"react": "^17 || ^18"
|
|
86
87
|
},
|
|
87
88
|
"engines": {
|
|
88
|
-
"node": ">=
|
|
89
|
+
"node": ">=14.15.0"
|
|
89
90
|
},
|
|
90
91
|
"publishConfig": {
|
|
91
92
|
"access": "public"
|
package/src/PrismicNextImage.tsx
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
1
|
import Image, { ImageProps, ImageLoaderProps } from "next/image";
|
|
3
2
|
import { buildURL, ImgixURLParams } from "imgix-url-builder";
|
|
4
3
|
import * as prismicH from "@prismicio/helpers";
|
|
@@ -7,6 +6,20 @@ import * as prismicT from "@prismicio/types";
|
|
|
7
6
|
import { __PRODUCTION__ } from "./lib/__PRODUCTION__";
|
|
8
7
|
import { devMsg } from "./lib/devMsg";
|
|
9
8
|
|
|
9
|
+
const castInt = (input: string | number | undefined): number | undefined => {
|
|
10
|
+
if (typeof input === "number" || typeof input === "undefined") {
|
|
11
|
+
return input;
|
|
12
|
+
} else {
|
|
13
|
+
const parsed = Number.parseInt(input);
|
|
14
|
+
|
|
15
|
+
if (Number.isNaN(parsed)) {
|
|
16
|
+
return undefined;
|
|
17
|
+
} else {
|
|
18
|
+
return parsed;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
|
|
10
23
|
/**
|
|
11
24
|
* Creates a `next/image` loader for Imgix, which Prismic uses, with an optional
|
|
12
25
|
* collection of default Imgix parameters.
|
|
@@ -32,7 +45,7 @@ const imgixLoader = (args: ImageLoaderProps): string => {
|
|
|
32
45
|
|
|
33
46
|
export type PrismicNextImageProps = Omit<
|
|
34
47
|
ImageProps,
|
|
35
|
-
"src" | "alt" | "width" | "height"
|
|
48
|
+
"src" | "alt" | "width" | "height" | "layout"
|
|
36
49
|
> & {
|
|
37
50
|
/**
|
|
38
51
|
* The Prismic Image field or thumbnail to render.
|
|
@@ -62,7 +75,14 @@ export type PrismicNextImageProps = Omit<
|
|
|
62
75
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
|
|
63
76
|
*/
|
|
64
77
|
fallbackAlt?: "";
|
|
65
|
-
}
|
|
78
|
+
} & (
|
|
79
|
+
| ({
|
|
80
|
+
layout?: "intrinsic" | "fixed";
|
|
81
|
+
} & Pick<ImageProps, "width" | "height">)
|
|
82
|
+
| {
|
|
83
|
+
layout: "responsive" | "fill";
|
|
84
|
+
}
|
|
85
|
+
);
|
|
66
86
|
|
|
67
87
|
/**
|
|
68
88
|
* React component that renders an image from a Prismic Image field or one of
|
|
@@ -77,7 +97,6 @@ export type PrismicNextImageProps = Omit<
|
|
|
77
97
|
*
|
|
78
98
|
* @returns A responsive image component using `next/image` for the given Image
|
|
79
99
|
* field.
|
|
80
|
-
*
|
|
81
100
|
* @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image
|
|
82
101
|
*/
|
|
83
102
|
export const PrismicNextImage = ({
|
|
@@ -85,7 +104,7 @@ export const PrismicNextImage = ({
|
|
|
85
104
|
imgixParams = {},
|
|
86
105
|
alt,
|
|
87
106
|
fallbackAlt,
|
|
88
|
-
layout,
|
|
107
|
+
layout = "intrinsic",
|
|
89
108
|
...restProps
|
|
90
109
|
}: PrismicNextImageProps) => {
|
|
91
110
|
if (!__PRODUCTION__) {
|
|
@@ -108,12 +127,34 @@ export const PrismicNextImage = ({
|
|
|
108
127
|
|
|
109
128
|
if (prismicH.isFilled.imageThumbnail(field)) {
|
|
110
129
|
const src = buildURL(field.url, imgixParams);
|
|
130
|
+
const ar = field.dimensions.width / field.dimensions.height;
|
|
131
|
+
|
|
132
|
+
let resolvedWidth = field.dimensions.width;
|
|
133
|
+
let resolvedHeight = field.dimensions.height;
|
|
134
|
+
|
|
135
|
+
if (
|
|
136
|
+
(layout === "intrinsic" || layout === "fixed") &&
|
|
137
|
+
("width" in restProps || "height" in restProps)
|
|
138
|
+
) {
|
|
139
|
+
const castedWidth = castInt(restProps.width);
|
|
140
|
+
const castedHeight = castInt(restProps.height);
|
|
141
|
+
|
|
142
|
+
if (castedWidth) {
|
|
143
|
+
resolvedWidth = castedWidth;
|
|
144
|
+
} else {
|
|
145
|
+
if (castedHeight) {
|
|
146
|
+
resolvedWidth = ar * castedHeight;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
resolvedHeight = resolvedWidth / ar;
|
|
151
|
+
}
|
|
111
152
|
|
|
112
153
|
return (
|
|
113
154
|
<Image
|
|
114
155
|
src={src}
|
|
115
|
-
width={layout === "fill" ? undefined :
|
|
116
|
-
height={layout === "fill" ? undefined :
|
|
156
|
+
width={layout === "fill" ? undefined : resolvedWidth}
|
|
157
|
+
height={layout === "fill" ? undefined : resolvedHeight}
|
|
117
158
|
alt={alt ?? (field.alt || fallbackAlt)}
|
|
118
159
|
loader={imgixLoader}
|
|
119
160
|
layout={layout}
|