@prismicio/next
Version:
Helpers to integrate Prismic into Next.js apps
1 lines • 5.8 kB
Source Map (JSON)
{"version":3,"file":"PrismicPreview.cjs","names":["Script","prismicCookie"],"sources":["../../src/pages/PrismicPreview.tsx"],"sourcesContent":["import { getToolbarSrc, cookie as prismicCookie } from \"@prismicio/client\"\nimport { useRouter } from \"next/router\"\nimport Script from \"next/script\"\nimport type { FC } from \"react\"\nimport { type ReactNode, useEffect } from \"react\"\n\n/** Props for `<PrismicPreview>`. */\nexport type PrismicPreviewProps = {\n\t/**\n\t * The name of your Prismic repository. A Prismic Toolbar will be registered using this\n\t * repository.\n\t */\n\trepositoryName: string\n\n\t/**\n\t * The URL of your app's Prismic preview endpoint (default: `/api/preview`). This URL will be\n\t * 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`). This URL will be\n\t * 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 the Prismic Toolbar\n * send events to the browser, such as on preview updates and exiting, this component will\n * automatically refresh the page with the changes.\n *\n * This component can be wrapped around your app or added anywhere in your app's tree. It must be\n * 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(window.location.origin + router.basePath) &&\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\"/) || [])[1]\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAsCA,MAAa,kBAA2C,UAAU;CACjE,MAAM,EACL,gBACA,mBAAmB,gBACnB,iBAAiB,qBACjB,aACG;CAEJ,MAAM,UAAA,GAAA,eAAA,YAAoB;CAE1B,MAAM,cAAA,GAAA,kBAAA,eAA2B,eAAe;AAEhD,EAAA,GAAA,MAAA,iBAAgB;EACf,MAAM,aAAa,IAAI,iBAAiB;AAExC,SAAO,iBAAiB,wBAAwB,UAAU,EACzD,QAAQ,WAAW,QACnB,CAAC;AACF,SAAO,iBAAiB,qBAAqB,OAAO,EACnD,QAAQ,WAAW,QACnB,CAAC;AAQF,MACC,OAAO,SAAS,KAAK,WAAW,OAAO,SAAS,SAAS,OAAO,SAAS,IACzE,gCAAgC,KAAK,kBACrC,CAAC,OAAO,UAER,QAAO;EAGR,SAAS,MAAM,OAAc;AAC5B,SAAM,gBAAgB;AACtB,SAAM,OAAO,WAAW,gBAAgB,EAAE,QAAQ,WAAW,QAAQ,CAAC,CACpE,MAAM,QAAQ;AACd,QAAI,CAAC,IAAI,IAAI;AACZ,aAAQ,MACP,6DAA6D,eAAe,gCAC5E;AAED;;AAGD,aAAS;KACR,CACD,YAAY,GAAG;;EAGlB,SAAS,SAAS,OAAc;AAC/B,SAAM,gBAAgB;AACtB,UAAO;;EAGR,SAAS,QAAQ;AAKhB,SAAM,OAAO,WAAW,kBAAkB;IACzC,UAAU;IACV,QAAQ,WAAW;IACnB,CAAC,CACA,MAAM,QAAQ;AACd,QAAI,IAAI,SAAS,kBAAkB;AAClC,aAAQ,MACP,mEAAmE,iBAAiB,mBACpF;AAED;;AAGD,aAAS;KACR,CACD,YAAY,GAAG;;EAGlB,SAAS,UAAU;AAClB,UAAO,QAAQ,OAAO,QAAQ,KAAA,GAAW,EAAE,QAAQ,OAAO,CAAC;;AAG5D,eAAa,WAAW,OAAO;IAC7B;EAAC;EAAgB;EAAkB;EAAgB;EAAO,CAAC;AAE9D,QACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,UACD,iBAAA,GAAA,kBAAA,KAACA,eAAAA,SAAD;EAAQ,KAAK;EAAY,UAAS;EAAe,CAAA,CAC/C,EAAA,CAAA;;AAIL,SAAS,iCAAiC;CACzC,MAAM,SAAS,OAAO,SAAS,OAC7B,MAAM,KAAK,CACX,MAAM,QAAQ,IAAI,WAAW,GAAGC,kBAAAA,OAAc,QAAQ,GAAG,CAAC,EACzD,MAAM,IAAI,CAAC;AAEd,SAAQ,mBAAmB,UAAU,GAAG,CAAC,MAAM,yBAAyB,IAAI,EAAE,EAAE"}