@prismicio/svelte 3.0.0-pr.70.0fcf71f → 3.0.0-pr.71.9e4af9f

package/dist/kit/PrismicPreview.svelte

@@ -23,7 +23,9 @@
 
 	const { repositoryName, routePrefix = "preview", routePrefixName = routePrefix }: Props = $props()
 
-	const toolbarSrc = $derived(getToolbarSrc(repositoryName))
+	// `v=5` opts into the toolbar's modern flow, which follows the session set by
+	// `redirectToPreviewURL()`.
+	const toolbarSrc = $derived(`${getToolbarSrc(repositoryName)}&v=5`)
 
 	/** Set to `true` when the next `beforeNavigate()` call should not prefix the route. */
 	let endingPreview = $state(false)
@@ -45,6 +47,7 @@
 			(event) => {
 				event.preventDefault()
 
+				document.cookie = "io.prismic.previewSession=; Path=/; Max-Age=0"
 				endingPreview = true
 
 				goto(

package/dist/kit/redirectToPreviewURL.d.ts

@@ -2,7 +2,7 @@ import * as prismic from "@prismicio/client";
 import type { Cookies } from "@sveltejs/kit";
 export type RedirectToPreviewURLConfig = {
     /** The Prismic client configured for the preview session's repository. */
-    client: Pick<prismic.Client, "resolvePreviewURL">;
+    client: Pick<prismic.Client, "resolvePreviewURL" | "documentAPIEndpoint">;
     /**
      * The `request` object from a `+server` file.
      *

package/dist/kit/redirectToPreviewURL.js

@@ -18,26 +18,59 @@ import * as prismic from "@prismicio/client";
  * 	```
  */
 export const redirectToPreviewURL = async (config) => {
-    const previewToken = new URL(config.request.url).searchParams.get("token") ?? undefined;
-    const documentID = new URL(config.request.url).searchParams.get("documentId") ?? undefined;
+    const { searchParams } = new URL(config.request.url);
+    const session = searchParams.get("session");
+    const documentID = searchParams.get("documentId") ?? undefined;
     const routePrefix = config.routePrefix ?? "preview";
-    const previewURL = await config.client.resolvePreviewURL({
-        previewToken,
-        documentID,
-        defaultURL: config.defaultURL || "/",
-    });
+    // Share links from the toolbar's modern flow only carry the session.
+    const previewToken = searchParams.get("token") ??
+        (session ? await getSessionRef(config.client.documentAPIEndpoint, session) : undefined);
+    const path = session ? getSafePath(searchParams.get("path")) : undefined;
+    const location = path ??
+        "/" +
+            routePrefix +
+            (await config.client.resolvePreviewURL({
+                previewToken,
+                documentID,
+                defaultURL: config.defaultURL || "/",
+            }));
     // Prevent a flash of non-preview content by setting the preview token
     // on the initial page load.
     if (previewToken) {
-        config.cookies.set(prismic.cookie.preview, previewToken, {
-            path: "/",
-            httpOnly: false,
-        });
+        config.cookies.set(prismic.cookie.preview, previewToken, cookieOptions);
+    }
+    // The toolbar follows the preview session with this cookie.
+    if (session) {
+        config.cookies.set("io.prismic.previewSession", session, cookieOptions);
     }
     return new Response(undefined, {
         status: 307,
         headers: {
-            Location: "/" + routePrefix + previewURL,
+            Location: location,
         },
     });
 };
+const cookieOptions = { path: "/", httpOnly: false };
+/** Returns the session's current ref from the repository's public endpoint. */
+const getSessionRef = async (documentAPIEndpoint, session) => {
+    const url = new URL(`/previews/token/${encodeURIComponent(session)}`, documentAPIEndpoint);
+    url.hostname = url.hostname.replace(".cdn.", ".");
+    const { ref } = await (await fetch(url)).json();
+    if (!ref) {
+        throw new prismic.PreviewTokenExpiredError("The preview session has ended.", url.href, undefined);
+    }
+    return ref;
+};
+/**
+ * Returns `path` if it is a path on this website. The path already includes SvelteKit's
+ * `paths.base`.
+ */
+const getSafePath = (path) => {
+    if (!path?.startsWith("/")) {
+        return;
+    }
+    // Paths like `//evil.com` and `/\evil.com` resolve to another origin.
+    const origin = "https://placeholder.invalid";
+    const url = new URL(path, origin);
+    return url.origin === origin ? url.pathname + url.search + url.hash : undefined;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/svelte",
-	"version": "3.0.0-pr.70.0fcf71f",
+	"version": "3.0.0-pr.71.9e4af9f",
 	"description": "Svelte components to present Prismic content.",
 	"keywords": [
 		"prismic",

package/src/kit/PrismicPreview.svelte

@@ -23,7 +23,9 @@
 
 	const { repositoryName, routePrefix = "preview", routePrefixName = routePrefix }: Props = $props()
 
-	const toolbarSrc = $derived(getToolbarSrc(repositoryName))
+	// `v=5` opts into the toolbar's modern flow, which follows the session set by
+	// `redirectToPreviewURL()`.
+	const toolbarSrc = $derived(`${getToolbarSrc(repositoryName)}&v=5`)
 
 	/** Set to `true` when the next `beforeNavigate()` call should not prefix the route. */
 	let endingPreview = $state(false)
@@ -45,6 +47,7 @@
 			(event) => {
 				event.preventDefault()
 
+				document.cookie = "io.prismic.previewSession=; Path=/; Max-Age=0"
 				endingPreview = true
 
 				goto(

package/src/kit/redirectToPreviewURL.ts

@@ -6,7 +6,7 @@ export type RedirectToPreviewURLConfig = {
 	// `Pick` is used to use the smallest possible subset of
 	// `prismic.Client`. Doing this reduces the surface area for breaking
 	// type changes.
-	client: Pick<prismic.Client, "resolvePreviewURL">
+	client: Pick<prismic.Client, "resolvePreviewURL" | "documentAPIEndpoint">
 
 	/**
 	 * The `request` object from a `+server` file.
@@ -50,29 +50,77 @@ export type RedirectToPreviewURLConfig = {
 export const redirectToPreviewURL = async (
 	config: RedirectToPreviewURLConfig,
 ): Promise<Response> => {
-	const previewToken = new URL(config.request.url).searchParams.get("token") ?? undefined
-	const documentID = new URL(config.request.url).searchParams.get("documentId") ?? undefined
+	const { searchParams } = new URL(config.request.url)
+	const session = searchParams.get("session")
+	const documentID = searchParams.get("documentId") ?? undefined
 	const routePrefix = config.routePrefix ?? "preview"
 
-	const previewURL = await config.client.resolvePreviewURL({
-		previewToken,
-		documentID,
-		defaultURL: config.defaultURL || "/",
-	})
+	// Share links from the toolbar's modern flow only carry the session.
+	const previewToken =
+		searchParams.get("token") ??
+		(session ? await getSessionRef(config.client.documentAPIEndpoint, session) : undefined)
+
+	const path = session ? getSafePath(searchParams.get("path")) : undefined
+	const location =
+		path ??
+		"/" +
+			routePrefix +
+			(await config.client.resolvePreviewURL({
+				previewToken,
+				documentID,
+				defaultURL: config.defaultURL || "/",
+			}))
 
 	// Prevent a flash of non-preview content by setting the preview token
 	// on the initial page load.
 	if (previewToken) {
-		config.cookies.set(prismic.cookie.preview, previewToken, {
-			path: "/",
-			httpOnly: false,
-		})
+		config.cookies.set(prismic.cookie.preview, previewToken, cookieOptions)
+	}
+
+	// The toolbar follows the preview session with this cookie.
+	if (session) {
+		config.cookies.set("io.prismic.previewSession", session, cookieOptions)
 	}
 
 	return new Response(undefined, {
 		status: 307,
 		headers: {
-			Location: "/" + routePrefix + previewURL,
+			Location: location,
 		},
 	})
 }
+
+const cookieOptions = { path: "/", httpOnly: false }
+
+/** Returns the session's current ref from the repository's public endpoint. */
+const getSessionRef = async (documentAPIEndpoint: string, session: string): Promise<string> => {
+	const url = new URL(`/previews/token/${encodeURIComponent(session)}`, documentAPIEndpoint)
+	url.hostname = url.hostname.replace(".cdn.", ".")
+
+	const { ref } = await (await fetch(url)).json()
+	if (!ref) {
+		throw new prismic.PreviewTokenExpiredError(
+			"The preview session has ended.",
+			url.href,
+			undefined,
+		)
+	}
+
+	return ref
+}
+
+/**
+ * Returns `path` if it is a path on this website. The path already includes SvelteKit's
+ * `paths.base`.
+ */
+const getSafePath = (path: string | null): string | undefined => {
+	if (!path?.startsWith("/")) {
+		return
+	}
+
+	// Paths like `//evil.com` and `/\evil.com` resolve to another origin.
+	const origin = "https://placeholder.invalid"
+	const url = new URL(path, origin)
+
+	return url.origin === origin ? url.pathname + url.search + url.hash : undefined
+}