@prismicio/svelte 3.0.0-pr.71.9e4af9f → 3.0.0-pr.71.dde7d8b

package/dist/kit/PrismicPreview.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { beforeNavigate, goto, refreshAll } from "$app/navigation"
+	import { resolve } from "$app/paths"
+	import { page } from "$app/state"
 	import { getToolbarSrc } from "@prismicio/client"
 	import { onMount } from "svelte"
 
@@ -19,13 +21,26 @@
 		 * Only set this value if the route parameter's name differs from the parameter's value.
 		 */
 		routePrefixName?: string
+
+		/**
+		 * The path of your preview route, without `paths.base`. The Prismic Toolbar uses it to create
+		 * share links.
+		 *
+		 * @defaultValue `"/api/preview"`
+		 */
+		previewURL?: string
 	}
 
-	const { repositoryName, routePrefix = "preview", routePrefixName = routePrefix }: Props = $props()
+	const {
+		repositoryName,
+		routePrefix = "preview",
+		routePrefixName = routePrefix,
+		previewURL = "/api/preview",
+	}: Props = $props()
 
-	// `v=5` opts into the toolbar's modern flow, which follows the session set by
-	// `redirectToPreviewURL()`.
-	const toolbarSrc = $derived(`${getToolbarSrc(repositoryName)}&v=5`)
+	const toolbarSrc = $derived(getToolbarSrc(repositoryName, { version: 5 }))
+	// `resolve()` can return a path relative to the current page, which changes on navigation.
+	const previewPath = $derived(new URL(resolve(previewURL, {}), page.url).pathname)
 
 	/** Set to `true` when the next `beforeNavigate()` call should not prefix the route. */
 	let endingPreview = $state(false)
@@ -47,7 +62,6 @@
 			(event) => {
 				event.preventDefault()
 
-				document.cookie = "io.prismic.previewSession=; Path=/; Max-Age=0"
 				endingPreview = true
 
 				goto(
@@ -92,5 +106,5 @@
 </script>
 
 <svelte:head>
-	<script defer src={toolbarSrc}></script>
+	<script defer src={toolbarSrc} data-preview-url={previewPath}></script>
 </svelte:head>

package/dist/kit/PrismicPreview.svelte.d.ts

@@ -12,6 +12,13 @@ type Props = {
      * Only set this value if the route parameter's name differs from the parameter's value.
      */
     routePrefixName?: string;
+    /**
+     * The path of your preview route, without `paths.base`. The Prismic Toolbar uses it to create
+     * share links.
+     *
+     * @defaultValue `"/api/preview"`
+     */
+    previewURL?: string;
 };
 declare const PrismicPreview: import("svelte").Component<Props, {}, "">;
 type PrismicPreview = ReturnType<typeof PrismicPreview>;

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" | "documentAPIEndpoint">;
+    client: Pick<prismic.Client, "resolvePreviewURL">;
     /**
      * The `request` object from a `+server` file.
      *

package/dist/kit/redirectToPreviewURL.js

@@ -1,4 +1,6 @@
+import { resolve } from "$app/paths";
 import * as prismic from "@prismicio/client";
+import { getSafePath } from "../lib/getSafePath";
 /**
  * Redirects a visitor to the URL of a previewed Prismic document from within a SvelteKit `+server`
  * file.
@@ -18,15 +20,10 @@ import * as prismic from "@prismicio/client";
  * 	```
  */
 export const redirectToPreviewURL = async (config) => {
-    const { searchParams } = new URL(config.request.url);
-    const session = searchParams.get("session");
-    const documentID = searchParams.get("documentId") ?? undefined;
+    const previewToken = new URL(config.request.url).searchParams.get("token") ?? undefined;
+    const documentID = new URL(config.request.url).searchParams.get("documentId") ?? undefined;
     const routePrefix = config.routePrefix ?? "preview";
-    // 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 ??
+    const location = getSharedPath(config.request.url, routePrefix) ??
         "/" +
             routePrefix +
             (await config.client.resolvePreviewURL({
@@ -37,11 +34,18 @@ export const redirectToPreviewURL = async (config) => {
     // 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, cookieOptions);
+        config.cookies.set(prismic.cookie.preview, previewToken, {
+            path: "/",
+            httpOnly: false,
+        });
     }
-    // The toolbar follows the preview session with this cookie.
+    // The toolbar's `v=5` flow follows the preview session with this cookie.
+    const session = new URL(config.request.url).searchParams.get("session");
     if (session) {
-        config.cookies.set("io.prismic.previewSession", session, cookieOptions);
+        config.cookies.set(prismic.cookie.previewSession, session, {
+            path: "/",
+            httpOnly: false,
+        });
     }
     return new Response(undefined, {
         status: 307,
@@ -50,27 +54,18 @@ export const redirectToPreviewURL = async (config) => {
         },
     });
 };
-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`.
+ * Returns the `path` param of toolbar share links inside the preview route prefix, or `undefined`
+ * if it is missing or not a path on this website.
  */
-const getSafePath = (path) => {
-    if (!path?.startsWith("/")) {
+const getSharedPath = (requestURL, routePrefix) => {
+    const path = getSafePath(new URL(requestURL).searchParams.get("path"));
+    // `path` comes from the browser, so it already includes `paths.base`. `resolve()` returns `base`
+    // either absolute or relative to the request.
+    const base = new URL(resolve("/", {}), requestURL).pathname.slice(0, -1);
+    if (!path?.startsWith(`${base}/`)) {
         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;
+    const pathname = path.slice(base.length);
+    return pathname.split(/[/?#]/)[1] === routePrefix ? path : `${base}/${routePrefix}${pathname}`;
 };

package/dist/lib/getSafePath.d.ts

@@ -0,0 +1,2 @@
+/** Returns `path` if it stays on the current origin, like `/blog?page=2#top`. */
+export declare function getSafePath(path: string | null | undefined): string | undefined;

package/dist/lib/getSafePath.js

@@ -0,0 +1,11 @@
+/** Returns `path` if it stays on the current origin, like `/blog?page=2#top`. */
+export function getSafePath(path) {
+    if (!path?.startsWith("/") || path.startsWith("//") || path.startsWith("/\\")) {
+        return;
+    }
+    const origin = "https://placeholder.invalid";
+    const url = new URL(path, origin);
+    if (url.origin === origin) {
+        return url.href.slice(origin.length);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/svelte",
-	"version": "3.0.0-pr.71.9e4af9f",
+	"version": "3.0.0-pr.71.dde7d8b",
 	"description": "Svelte components to present Prismic content.",
 	"keywords": [
 		"prismic",
@@ -62,7 +62,7 @@
 		"esm-env": "^1.2.2"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^7.22.3",
+		"@prismicio/client": "7.22.3-pr.477.9eb2102",
 		"@prismicio/mock": "^0.7.2",
 		"@sveltejs/kit": "^3.0.1",
 		"@sveltejs/package": "^3.0.1",
@@ -72,15 +72,15 @@
 		"@vitest/coverage-v8": "^5.0.5",
 		"globals": "^17.13.0",
 		"happy-dom": "^21.0.3",
-		"oxfmt": "^0.73.0",
-		"oxlint": "^1.88.0",
+		"oxfmt": "^0.74.0",
+		"oxlint": "^1.89.0",
 		"standard-version": "^9.5.0",
 		"svelte": "^5.57.2",
 		"typescript": "^6.0.3",
 		"vitest": "^5.0.5"
 	},
 	"peerDependencies": {
-		"@prismicio/client": ">=7",
+		"@prismicio/client": "^7.23.0",
 		"@sveltejs/kit": "^3.0.0",
 		"svelte": "^5.16.0"
 	},
@@ -89,6 +89,9 @@
 			"optional": true
 		}
 	},
+	"overrides": {
+		"@prismicio/client": "$@prismicio/client"
+	},
 	"engines": {
 		"node": ">=22"
 	}

package/src/kit/PrismicPreview.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { beforeNavigate, goto, refreshAll } from "$app/navigation"
+	import { resolve } from "$app/paths"
+	import { page } from "$app/state"
 	import { getToolbarSrc } from "@prismicio/client"
 	import { onMount } from "svelte"
 
@@ -19,13 +21,26 @@
 		 * Only set this value if the route parameter's name differs from the parameter's value.
 		 */
 		routePrefixName?: string
+
+		/**
+		 * The path of your preview route, without `paths.base`. The Prismic Toolbar uses it to create
+		 * share links.
+		 *
+		 * @defaultValue `"/api/preview"`
+		 */
+		previewURL?: string
 	}
 
-	const { repositoryName, routePrefix = "preview", routePrefixName = routePrefix }: Props = $props()
+	const {
+		repositoryName,
+		routePrefix = "preview",
+		routePrefixName = routePrefix,
+		previewURL = "/api/preview",
+	}: Props = $props()
 
-	// `v=5` opts into the toolbar's modern flow, which follows the session set by
-	// `redirectToPreviewURL()`.
-	const toolbarSrc = $derived(`${getToolbarSrc(repositoryName)}&v=5`)
+	const toolbarSrc = $derived(getToolbarSrc(repositoryName, { version: 5 }))
+	// `resolve()` can return a path relative to the current page, which changes on navigation.
+	const previewPath = $derived(new URL(resolve(previewURL, {}), page.url).pathname)
 
 	/** Set to `true` when the next `beforeNavigate()` call should not prefix the route. */
 	let endingPreview = $state(false)
@@ -47,7 +62,6 @@
 			(event) => {
 				event.preventDefault()
 
-				document.cookie = "io.prismic.previewSession=; Path=/; Max-Age=0"
 				endingPreview = true
 
 				goto(
@@ -92,5 +106,5 @@
 </script>
 
 <svelte:head>
-	<script defer src={toolbarSrc}></script>
+	<script defer src={toolbarSrc} data-preview-url={previewPath}></script>
 </svelte:head>

package/src/kit/redirectToPreviewURL.ts

@@ -1,12 +1,15 @@
+import { resolve } from "$app/paths"
 import * as prismic from "@prismicio/client"
 import type { Cookies } from "@sveltejs/kit"
 
+import { getSafePath } from "../lib/getSafePath"
+
 export type RedirectToPreviewURLConfig = {
 	/** The Prismic client configured for the preview session's repository. */
 	// `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" | "documentAPIEndpoint">
+	client: Pick<prismic.Client, "resolvePreviewURL">
 
 	/**
 	 * The `request` object from a `+server` file.
@@ -50,19 +53,12 @@ export type RedirectToPreviewURLConfig = {
 export const redirectToPreviewURL = async (
 	config: RedirectToPreviewURLConfig,
 ): Promise<Response> => {
-	const { searchParams } = new URL(config.request.url)
-	const session = searchParams.get("session")
-	const documentID = searchParams.get("documentId") ?? undefined
+	const previewToken = new URL(config.request.url).searchParams.get("token") ?? undefined
+	const documentID = new URL(config.request.url).searchParams.get("documentId") ?? undefined
 	const routePrefix = config.routePrefix ?? "preview"
 
-	// 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 ??
+		getSharedPath(config.request.url, routePrefix) ??
 		"/" +
 			routePrefix +
 			(await config.client.resolvePreviewURL({
@@ -74,12 +70,19 @@ export const redirectToPreviewURL = async (
 	// 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, cookieOptions)
+		config.cookies.set(prismic.cookie.preview, previewToken, {
+			path: "/",
+			httpOnly: false,
+		})
 	}
 
-	// The toolbar follows the preview session with this cookie.
+	// The toolbar's `v=5` flow follows the preview session with this cookie.
+	const session = new URL(config.request.url).searchParams.get("session")
 	if (session) {
-		config.cookies.set("io.prismic.previewSession", session, cookieOptions)
+		config.cookies.set(prismic.cookie.previewSession, session, {
+			path: "/",
+			httpOnly: false,
+		})
 	}
 
 	return new Response(undefined, {
@@ -90,37 +93,20 @@ export const redirectToPreviewURL = async (
 	})
 }
 
-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`.
+ * Returns the `path` param of toolbar share links inside the preview route prefix, or `undefined`
+ * if it is missing or not a path on this website.
  */
-const getSafePath = (path: string | null): string | undefined => {
-	if (!path?.startsWith("/")) {
+const getSharedPath = (requestURL: string, routePrefix: string): string | undefined => {
+	const path = getSafePath(new URL(requestURL).searchParams.get("path"))
+	// `path` comes from the browser, so it already includes `paths.base`. `resolve()` returns `base`
+	// either absolute or relative to the request.
+	const base = new URL(resolve("/", {}), requestURL).pathname.slice(0, -1)
+	if (!path?.startsWith(`${base}/`)) {
 		return
 	}
 
-	// Paths like `//evil.com` and `/\evil.com` resolve to another origin.
-	const origin = "https://placeholder.invalid"
-	const url = new URL(path, origin)
+	const pathname = path.slice(base.length)
 
-	return url.origin === origin ? url.pathname + url.search + url.hash : undefined
+	return pathname.split(/[/?#]/)[1] === routePrefix ? path : `${base}/${routePrefix}${pathname}`
 }

package/src/lib/getSafePath.ts

@@ -0,0 +1,12 @@
+/** Returns `path` if it stays on the current origin, like `/blog?page=2#top`. */
+export function getSafePath(path: string | null | undefined): string | undefined {
+	if (!path?.startsWith("/") || path.startsWith("//") || path.startsWith("/\\")) {
+		return
+	}
+
+	const origin = "https://placeholder.invalid"
+	const url = new URL(path, origin)
+	if (url.origin === origin) {
+		return url.href.slice(origin.length)
+	}
+}