@prismicio/svelte 1.0.1 → 1.0.2

package/dist/kit/PrismicPreview.svelte

@@ -1,27 +1,62 @@
 <script>import { onMount } from "svelte";
 import { getToolbarSrc } from "@prismicio/client";
-import { invalidateAll } from "$app/navigation";
+import { beforeNavigate, goto, invalidateAll } from "$app/navigation";
 export let repositoryName;
+export let routePrefix = "preview";
+export let routePrefixName = routePrefix;
 $:
   toolbarSrc = getToolbarSrc(repositoryName);
-function prismicPreviewEventHandler(event) {
-  event.preventDefault();
-  invalidateAll();
-}
+let endingPreview = false;
 onMount(() => {
-  window.addEventListener("prismicPreviewUpdate", prismicPreviewEventHandler);
-  window.addEventListener("prismicPreviewEnd", prismicPreviewEventHandler);
+  const controller = new AbortController();
+  window.addEventListener(
+    "prismicPreviewUpdate",
+    (event) => {
+      event.preventDefault();
+      invalidateAll();
+    },
+    { signal: controller.signal }
+  );
+  window.addEventListener(
+    "prismicPreviewEnd",
+    (event) => {
+      event.preventDefault();
+      endingPreview = true;
+      goto(
+        new URL(
+          window.location.pathname.replace(
+            new RegExp(`^(/${routePrefix}/?$|/${routePrefix}/)`),
+            "/"
+          ),
+          window.location.origin
+        ),
+        {
+          invalidateAll: true,
+          noScroll: true
+        }
+      );
+    },
+    { signal: controller.signal }
+  );
   return () => {
-    window.removeEventListener(
-      "prismicPreviewUpdate",
-      prismicPreviewEventHandler
-    );
-    window.removeEventListener(
-      "prismicPreviewEnd",
-      prismicPreviewEventHandler
-    );
+    controller.abort();
   };
 });
+beforeNavigate((navigation) => {
+  if (navigation.to && navigation.from?.params?.[routePrefixName] === routePrefix && !(routePrefixName in (navigation.to.params || {}))) {
+    if (endingPreview) {
+      endingPreview = false;
+      return;
+    }
+    navigation.cancel();
+    goto(
+      new URL(
+        routePrefix + navigation.to.url.pathname,
+        navigation.to.url.origin
+      )
+    );
+  }
+});
 </script>
 
 <svelte:head>

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

@@ -5,6 +5,16 @@ declare const __propDef: {
              * The name of your Prismic repository. A Prismic Toolbar will be registered
              * using this repository.
              */ repositoryName: string;
+        /**
+             * The route parameter prefixed during preview sessions.
+             */ routePrefix?: string | undefined;
+        /**
+             * The name of the preview-specific route parameter prefixed during preview
+             * sessions.
+             *
+             * Only set this value if the route parameter's name differs from the
+             * parameter's value.
+             */ routePrefixName?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/kit/redirectToPreviewURL.d.ts

@@ -1,4 +1,5 @@
 import * as prismic from "@prismicio/client";
+import { Cookies } from "@sveltejs/kit";
 export type RedirectToPreviewURLConfig = {
     /**
      * The Prismic client configured for the preview session's repository.
@@ -10,11 +11,21 @@ export type RedirectToPreviewURLConfig = {
      * @see SvelteKit `+server` docs: \<https://kit.svelte.dev/docs/routing#server\>
      */
     request: Request;
+    /**
+     * The `cookies` object from a `+server` file.
+     *
+     * @see SvelteKit `+server` docs: \<https://kit.svelte.dev/docs/routing#server\>
+     */
+    cookies: Cookies;
     /**
      * The default redirect URL if a URL cannot be determined for the previewed
      * document.
      */
     defaultURL?: string;
+    /**
+     * The route parameter prefixed during preview sessions.
+     */
+    routePrefix?: string;
 };
 /**
  * Redirects a visitor to the URL of a previewed Prismic document from within a

package/dist/kit/redirectToPreviewURL.js

@@ -1,3 +1,4 @@
+import * as prismic from "@prismicio/client";
 /**
  * Redirects a visitor to the URL of a previewed Prismic document from within a
  * SvelteKit `+server` file.
@@ -20,15 +21,24 @@
 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 routePrefix = config.routePrefix ?? "preview";
     const previewURL = 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,
+        });
+    }
     return new Response(undefined, {
         status: 307,
         headers: {
-            Location: previewURL,
+            Location: "/" + routePrefix + previewURL,
         },
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/svelte",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"description": "Svelte components to present Prismic content.",
 	"keywords": [
 		"typescript",

package/src/kit/PrismicPreview.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import { getToolbarSrc } from "@prismicio/client";
-	import { invalidateAll } from "$app/navigation";
+	import { beforeNavigate, goto, invalidateAll } from "$app/navigation";
 
 	/**
 	 * The name of your Prismic repository. A Prismic Toolbar will be registered
@@ -9,29 +9,94 @@
 	 */
 	export let repositoryName: string;
 
-	$: toolbarSrc = getToolbarSrc(repositoryName);
+	/**
+	 * The route parameter prefixed during preview sessions.
+	 */
+	export let routePrefix: string = "preview";
 
-	function prismicPreviewEventHandler(event: Event) {
-		event.preventDefault();
+	/**
+	 * The name of the preview-specific route parameter prefixed during preview
+	 * sessions.
+	 *
+	 * Only set this value if the route parameter's name differs from the
+	 * parameter's value.
+	 */
+	export let routePrefixName: string = routePrefix;
 
-		invalidateAll();
-	}
+	$: toolbarSrc = getToolbarSrc(repositoryName);
+
+	/**
+	 * Set to `true` when the next `beforeNavigate()` call should not prefix the
+	 * route.
+	 */
+	let endingPreview = false;
 
+	// Register Prismic toolbar event handlers to refresh data on content updates.
 	onMount(() => {
-		window.addEventListener("prismicPreviewUpdate", prismicPreviewEventHandler);
-		window.addEventListener("prismicPreviewEnd", prismicPreviewEventHandler);
+		const controller = new AbortController();
+
+		window.addEventListener(
+			"prismicPreviewUpdate",
+			(event) => {
+				event.preventDefault();
+				invalidateAll();
+			},
+			{ signal: controller.signal },
+		);
+		window.addEventListener(
+			"prismicPreviewEnd",
+			(event) => {
+				event.preventDefault();
+
+				endingPreview = true;
+
+				goto(
+					new URL(
+						window.location.pathname.replace(
+							new RegExp(`^(\/${routePrefix}\/?$|\/${routePrefix}\/)`),
+							"/",
+						),
+						window.location.origin,
+					),
+					{
+						invalidateAll: true,
+						noScroll: true,
+					},
+				);
+			},
+			{ signal: controller.signal },
+		);
 
 		return () => {
-			window.removeEventListener(
-				"prismicPreviewUpdate",
-				prismicPreviewEventHandler,
-			);
-			window.removeEventListener(
-				"prismicPreviewEnd",
-				prismicPreviewEventHandler,
-			);
+			controller.abort();
 		};
 	});
+
+	beforeNavigate((navigation) => {
+		// Prefix links with the preview route parameter if the current
+		// route is in a preview session.
+		if (
+			navigation.to &&
+			navigation.from?.params?.[routePrefixName] === routePrefix &&
+			!(routePrefixName in (navigation.to.params || {}))
+		) {
+			// If this callback is called due to a `prismicPreviewEnd`
+			// event, don't prefix the route. The exception is only
+			// valid for one call.
+			if (endingPreview) {
+				endingPreview = false;
+				return;
+			}
+
+			navigation.cancel();
+			goto(
+				new URL(
+					routePrefix + navigation.to.url.pathname,
+					navigation.to.url.origin,
+				),
+			);
+		}
+	});
 </script>
 
 <svelte:head>

package/src/kit/redirectToPreviewURL.ts

@@ -1,4 +1,5 @@
 import * as prismic from "@prismicio/client";
+import { Cookies } from "@sveltejs/kit";
 
 export type RedirectToPreviewURLConfig = {
 	/**
@@ -16,11 +17,23 @@ export type RedirectToPreviewURLConfig = {
 	 */
 	request: Request;
 
+	/**
+	 * The `cookies` object from a `+server` file.
+	 *
+	 * @see SvelteKit `+server` docs: \<https://kit.svelte.dev/docs/routing#server\>
+	 */
+	cookies: Cookies;
+
 	/**
 	 * The default redirect URL if a URL cannot be determined for the previewed
 	 * document.
 	 */
 	defaultURL?: string;
+
+	/**
+	 * The route parameter prefixed during preview sessions.
+	 */
+	routePrefix?: string;
 };
 
 /**
@@ -49,6 +62,7 @@ export const redirectToPreviewURL = async (
 		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";
 
 	const previewURL = await config.client.resolvePreviewURL({
 		previewToken,
@@ -56,10 +70,19 @@ export const redirectToPreviewURL = async (
 		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,
+		});
+	}
+
 	return new Response(undefined, {
 		status: 307,
 		headers: {
-			Location: previewURL,
+			Location: "/" + routePrefix + previewURL,
 		},
 	});
 };