@prismicio/svelte 0.1.1 → 1.0.0

package/dist/kit/enableAutoPreviews.js

@@ -0,0 +1,30 @@
+import * as prismic from "@prismicio/client";
+/**
+ * Configures a Prismic client to automatically query draft content during a
+ * preview session.
+ *
+ * @param config - Configuration for the function.
+ */
+export const enableAutoPreviews = (config) => {
+    if (!config.cookies) {
+        return;
+    }
+    const cookie = config.cookies.get(prismic.cookie.preview);
+    // We only return the cookie if a Prismic Preview session is active.
+    //
+    // An inactive cookie looks like this (URL encoded):
+    // 	{
+    // 		"_tracker": "abc123"
+    // 	}
+    //
+    // An active cookie looks like this (URL encoded):
+    // 	{
+    // 		"_tracker": "abc123",
+    // 		"example-prismic-repo.prismic.io": {
+    // 			preview: "https://example-prismic-repo.prismic.io/previews/abc:123?websitePreviewId=xyz"
+    // 		}
+    // 	}
+    if (cookie && /\.prismic\.io/.test(cookie)) {
+        config.client.queryContentFromRef(cookie);
+    }
+};

package/dist/kit/index.d.ts

@@ -0,0 +1,6 @@
+export { default as PrismicPreview } from "./PrismicPreview.svelte";
+export { enableAutoPreviews } from "./enableAutoPreviews";
+export type { EnableAutoPreviewsConfig } from "./enableAutoPreviews";
+export { redirectToPreviewURL } from "./redirectToPreviewURL";
+export type { RedirectToPreviewURLConfig } from "./redirectToPreviewURL";
+export type { CreateClientConfig } from "./types";

package/dist/kit/index.js

@@ -0,0 +1,3 @@
+export { default as PrismicPreview } from "./PrismicPreview.svelte";
+export { enableAutoPreviews } from "./enableAutoPreviews";
+export { redirectToPreviewURL } from "./redirectToPreviewURL";

package/dist/kit/redirectToPreviewURL.d.ts

@@ -0,0 +1,38 @@
+import * as prismic from "@prismicio/client";
+export type RedirectToPreviewURLConfig = {
+    /**
+     * The Prismic client configured for the preview session's repository.
+     */
+    client: Pick<prismic.Client, "resolvePreviewURL">;
+    /**
+     * The `request` object from a `+server` file.
+     *
+     * @see SvelteKit `+server` docs: \<https://kit.svelte.dev/docs/routing#server\>
+     */
+    request: Request;
+    /**
+     * The default redirect URL if a URL cannot be determined for the previewed
+     * document.
+     */
+    defaultURL?: string;
+};
+/**
+ * Redirects a visitor to the URL of a previewed Prismic document from within a
+ * SvelteKit `+server` file.
+ *
+ * Return the created `Response` in your `+server` file.
+ *
+ * @example
+ *
+ * ```typescript
+ * import { createClient } from "../lib/prismicio.js";
+ * import { redirectToPreviewURL } from "@prismicio/svelte/kit";
+ *
+ * export async function GET({ fetch, request }) {
+ * 	const client = createClient({ fetch });
+ *
+ * 	return await redirectToPreviewURL({ client, request });
+ * }
+ * ```
+ */
+export declare const redirectToPreviewURL: (config: RedirectToPreviewURLConfig) => Promise<Response>;

package/dist/kit/redirectToPreviewURL.js

@@ -0,0 +1,34 @@
+/**
+ * Redirects a visitor to the URL of a previewed Prismic document from within a
+ * SvelteKit `+server` file.
+ *
+ * Return the created `Response` in your `+server` file.
+ *
+ * @example
+ *
+ * ```typescript
+ * import { createClient } from "../lib/prismicio.js";
+ * import { redirectToPreviewURL } from "@prismicio/svelte/kit";
+ *
+ * export async function GET({ fetch, request }) {
+ * 	const client = createClient({ fetch });
+ *
+ * 	return await redirectToPreviewURL({ client, request });
+ * }
+ * ```
+ */
+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 previewURL = await config.client.resolvePreviewURL({
+        previewToken,
+        documentID,
+        defaultURL: config.defaultURL || "/",
+    });
+    return new Response(undefined, {
+        status: 307,
+        headers: {
+            Location: previewURL,
+        },
+    });
+};

package/dist/kit/types.d.ts

@@ -0,0 +1,13 @@
+import { ClientConfig } from "@prismicio/client";
+import { Cookies } from "@sveltejs/kit";
+/**
+ * Configuration for creating a Prismic client with automatic preview support in
+ * SvelteKit apps.
+ */
+export type CreateClientConfig = ClientConfig & {
+    /**
+     * The `cookies` object provided to a route's `load()` function. This parmeter
+     * is required to load previews.
+     */
+    cookies?: Cookies;
+};

package/dist/kit/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/svelte",
-	"version": "0.1.1",
+	"version": "1.0.0",
 	"description": "Svelte components to present Prismic content.",
 	"keywords": [
 		"typescript",
@@ -19,11 +19,26 @@
 			"svelte": "./dist/index.js",
 			"default": "./dist/index.js"
 		},
+		"./kit": {
+			"types": "./dist/kit/index.d.ts",
+			"svelte": "./dist/kit/index.js",
+			"default": "./dist/kit/index.js"
+		},
 		"./package.json": "./package.json"
 	},
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
 	"types": "./dist/index.d.ts",
+	"typesVersions": {
+		"*": {
+			"*": [
+				"dist/index.d.ts"
+			],
+			"kit": [
+				"dist/kit/index.d.ts"
+			]
+		}
+	},
 	"files": [
 		"./dist",
 		"./src"
@@ -50,35 +65,42 @@
 		"esm-env": "^1.0.0"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^7.1.1",
+		"@prismicio/client": "^7.2.0",
 		"@prismicio/mock": "^0.3.1",
-		"@size-limit/preset-small-lib": "^8.2.6",
-		"@sveltejs/package": "^2.2.1",
-		"@sveltejs/vite-plugin-svelte": "^2.4.5",
+		"@size-limit/preset-small-lib": "^9.0.0",
+		"@sveltejs/kit": "^1.25.1",
+		"@sveltejs/package": "^2.2.2",
+		"@sveltejs/vite-plugin-svelte": "^2.4.6",
 		"@testing-library/svelte": "^4.0.3",
 		"@trivago/prettier-plugin-sort-imports": "^4.2.0",
-		"@typescript-eslint/eslint-plugin": "^6.4.1",
-		"@typescript-eslint/parser": "^6.4.1",
-		"@vitest/coverage-v8": "^0.34.2",
-		"eslint": "^8.47.0",
+		"@typescript-eslint/eslint-plugin": "^6.7.4",
+		"@typescript-eslint/parser": "^6.7.4",
+		"@vitest/coverage-v8": "^0.34.6",
+		"eslint": "^8.50.0",
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-prettier": "^5.0.0",
-		"eslint-plugin-svelte": "^2.33.0",
+		"eslint-plugin-svelte": "^2.33.2",
 		"eslint-plugin-tsdoc": "^0.2.17",
-		"happy-dom": "^10.11.0",
-		"prettier": "^3.0.2",
-		"prettier-plugin-jsdoc": "^1.0.1",
+		"happy-dom": "^12.7.0",
+		"prettier": "^3.0.3",
+		"prettier-plugin-jsdoc": "^1.0.2",
 		"prettier-plugin-svelte": "^3.0.3",
-		"size-limit": "^8.2.6",
+		"size-limit": "^9.0.0",
 		"standard-version": "^9.5.0",
 		"svelte": "^4.2.0",
-		"typescript": "^5.1.6",
-		"vitest": "^0.34.2"
+		"typescript": "^5.2.2",
+		"vitest": "^0.34.6"
 	},
 	"peerDependencies": {
 		"@prismicio/client": ">=7",
+		"@sveltejs/kit": ">=1",
 		"svelte": ">=4"
 	},
+	"peerDependenciesMeta": {
+		"@sveltejs/kit": {
+			"optional": true
+		}
+	},
 	"engines": {
 		"node": ">=14.15.0"
 	},

package/src/PrismicRichText/DefaultComponent.svelte

@@ -48,9 +48,7 @@
 	<span class={node.data.label}><slot /></span>
 {:else}
 	{#each node.text.split("\n") as line, index}
-		{#if index > 0}
-			<br />
-		{/if}
-		{line}
+		<!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
+		{#if index > 0}<br />{/if}{line}
 	{/each}
 {/if}

package/src/PrismicRichText/Serialize.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import type { RichTextNodeType } from "@prismicio/client";
 	import type { asTree } from "@prismicio/richtext";
 
 	import type { SvelteRichTextSerializer } from "../types";
@@ -9,28 +8,29 @@
 	export let components: SvelteRichTextSerializer = {};
 	export let children: ReturnType<typeof asTree>["children"];
 
-	const rewrittenNodeTypes: Partial<
-		Record<
-			(typeof RichTextNodeType)[keyof typeof RichTextNodeType],
-			keyof typeof RichTextNodeType
-		>
-	> = {
+	const CHILD_TYPE_RENAMES = {
 		"list-item": "listItem",
 		"o-list-item": "oListItem",
 		"group-list-item": "list",
 		"group-o-list-item": "oList",
-	};
+	} as const;
+
+	function getComponent(child: ReturnType<typeof asTree>["children"][number]) {
+		return (
+			components[
+				CHILD_TYPE_RENAMES[child.type as keyof typeof CHILD_TYPE_RENAMES] ||
+					(child.type as keyof typeof components)
+			] || DefaultComponent
+		);
+	}
 </script>
 
 {#each children as child}
-	<svelte:component
-		this={components[rewrittenNodeTypes[child.type] || child.type] ||
-			DefaultComponent}
-		node={child.node}
-		key={child.key}
+	<svelte:component this={getComponent(child)} node={child.node}>
+		<!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
+		{#if child.children.length > 0}<svelte:self
+				children={child.children}
+				{components}
+			/>{/if}</svelte:component
 	>
-		{#if child.children.length > 0}
-			<svelte:self children={child.children} {components} />
-		{/if}
-	</svelte:component>
 {/each}

package/src/kit/PrismicPreview.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { getToolbarSrc } from "@prismicio/client";
+	import { invalidateAll } from "$app/navigation";
+
+	/**
+	 * The name of your Prismic repository. A Prismic Toolbar will be registered
+	 * using this repository.
+	 */
+	export let repositoryName: string;
+
+	$: toolbarSrc = getToolbarSrc(repositoryName);
+
+	function prismicPreviewEventHandler(event: Event) {
+		event.preventDefault();
+
+		invalidateAll();
+	}
+
+	onMount(() => {
+		window.addEventListener("prismicPreviewUpdate", prismicPreviewEventHandler);
+		window.addEventListener("prismicPreviewEnd", prismicPreviewEventHandler);
+
+		return () => {
+			window.removeEventListener(
+				"prismicPreviewUpdate",
+				prismicPreviewEventHandler,
+			);
+			window.removeEventListener(
+				"prismicPreviewEnd",
+				prismicPreviewEventHandler,
+			);
+		};
+	});
+</script>
+
+<svelte:head>
+	<script defer src={toolbarSrc}></script>
+</svelte:head>

package/src/kit/enableAutoPreviews.ts

@@ -0,0 +1,52 @@
+import * as prismic from "@prismicio/client";
+import { Cookies } from "@sveltejs/kit";
+
+/**
+ * Configuration for `enableAutoPreviews`.
+ */
+export type EnableAutoPreviewsConfig = {
+	/**
+	 * Prismic client with which automatic previews will be enabled.
+	 */
+	// `Pick` is used to use the smallest possible subset of `Client`. Doing
+	// this reduces the surface area for breaking type changes.
+	client: Pick<prismic.Client, "queryContentFromRef">;
+
+	/**
+	 * The `cookies` object provided to a route's `load()` function. This parmeter
+	 * is required to load previews.
+	 */
+	cookies?: Cookies;
+};
+
+/**
+ * Configures a Prismic client to automatically query draft content during a
+ * preview session.
+ *
+ * @param config - Configuration for the function.
+ */
+export const enableAutoPreviews = (config: EnableAutoPreviewsConfig): void => {
+	if (!config.cookies) {
+		return;
+	}
+
+	const cookie = config.cookies.get(prismic.cookie.preview);
+
+	// We only return the cookie if a Prismic Preview session is active.
+	//
+	// An inactive cookie looks like this (URL encoded):
+	// 	{
+	// 		"_tracker": "abc123"
+	// 	}
+	//
+	// An active cookie looks like this (URL encoded):
+	// 	{
+	// 		"_tracker": "abc123",
+	// 		"example-prismic-repo.prismic.io": {
+	// 			preview: "https://example-prismic-repo.prismic.io/previews/abc:123?websitePreviewId=xyz"
+	// 		}
+	// 	}
+	if (cookie && /\.prismic\.io/.test(cookie)) {
+		config.client.queryContentFromRef(cookie);
+	}
+};

package/src/kit/index.ts

@@ -0,0 +1,9 @@
+export { default as PrismicPreview } from "./PrismicPreview.svelte";
+
+export { enableAutoPreviews } from "./enableAutoPreviews";
+export type { EnableAutoPreviewsConfig } from "./enableAutoPreviews";
+
+export { redirectToPreviewURL } from "./redirectToPreviewURL";
+export type { RedirectToPreviewURLConfig } from "./redirectToPreviewURL";
+
+export type { CreateClientConfig } from "./types";

package/src/kit/redirectToPreviewURL.ts

@@ -0,0 +1,65 @@
+import * as prismic from "@prismicio/client";
+
+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">;
+
+	/**
+	 * The `request` object from a `+server` file.
+	 *
+	 * @see SvelteKit `+server` docs: \<https://kit.svelte.dev/docs/routing#server\>
+	 */
+	request: Request;
+
+	/**
+	 * The default redirect URL if a URL cannot be determined for the previewed
+	 * document.
+	 */
+	defaultURL?: string;
+};
+
+/**
+ * Redirects a visitor to the URL of a previewed Prismic document from within a
+ * SvelteKit `+server` file.
+ *
+ * Return the created `Response` in your `+server` file.
+ *
+ * @example
+ *
+ * ```typescript
+ * import { createClient } from "$lib/prismicio.js";
+ * import { redirectToPreviewURL } from "@prismicio/svelte/kit";
+ *
+ * export async function GET({ fetch, request }) {
+ * 	const client = createClient({ fetch });
+ *
+ * 	return await redirectToPreviewURL({ client, request });
+ * }
+ * ```
+ */
+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 previewURL = await config.client.resolvePreviewURL({
+		previewToken,
+		documentID,
+		defaultURL: config.defaultURL || "/",
+	});
+
+	return new Response(undefined, {
+		status: 307,
+		headers: {
+			Location: previewURL,
+		},
+	});
+};

package/src/kit/types.ts

@@ -0,0 +1,14 @@
+import { ClientConfig } from "@prismicio/client";
+import { Cookies } from "@sveltejs/kit";
+
+/**
+ * Configuration for creating a Prismic client with automatic preview support in
+ * SvelteKit apps.
+ */
+export type CreateClientConfig = ClientConfig & {
+	/**
+	 * The `cookies` object provided to a route's `load()` function. This parmeter
+	 * is required to load previews.
+	 */
+	cookies?: Cookies;
+};