@prismicio/svelte 2.2.2 → 2.2.3-pr.64.25522e1

package/src/PrismicRichText/PrismicRichText.svelte

@@ -1,26 +1,21 @@
 <script lang="ts">
-	import type { RichTextField } from "@prismicio/client";
-	import { asTree } from "@prismicio/client/richtext";
+	import type { RichTextField } from "@prismicio/client"
+	import { asTree } from "@prismicio/client/richtext"
 
-	import type { RichTextComponents } from "../types";
-
-	import Serialize from "./Serialize.svelte";
+	import type { RichTextComponents } from "../types"
+	import Serialize from "./Serialize.svelte"
 
 	type Props = {
-		/**
-		 * The Prismic rich text field to render.
-		 */
-		field: RichTextField;
+		/** The Prismic rich text field to render. */
+		field: RichTextField
 
-		/**
-		 * An object that maps a rich text block type to a Svelte component.
-		 */
-		components?: RichTextComponents;
-	};
+		/** An object that maps a rich text block type to a Svelte component. */
+		components?: RichTextComponents
+	}
 
-	const { field, components = {} }: Props = $props();
+	const { field, components = {} }: Props = $props()
 
-	const children = $derived(asTree(field).children);
+	const children = $derived(asTree(field).children)
 </script>
 
 <!--

package/src/PrismicRichText/Serialize.svelte

@@ -1,34 +1,29 @@
 <script lang="ts">
-	import type { asTree } from "@prismicio/client/richtext";
+	import type { asTree } from "@prismicio/client/richtext"
 
-	import type {
-		ComponentShorthand,
-		RichTextComponent,
-		RichTextComponents,
-	} from "../types";
-
-	import DefaultComponent from "./DefaultComponent.svelte";
-	import Serialize from "./Serialize.svelte";
+	import type { ComponentShorthand, RichTextComponent, RichTextComponents } from "../types"
+	import DefaultComponent from "./DefaultComponent.svelte"
+	import Serialize from "./Serialize.svelte"
 
 	type Props = {
-		components: RichTextComponents;
-		children: ReturnType<typeof asTree>["children"];
-	};
+		components: RichTextComponents
+		children: ReturnType<typeof asTree>["children"]
+	}
 
-	const { components, children }: Props = $props();
+	const { components, children }: Props = $props()
 
 	const CHILD_TYPE_RENAMES = {
 		"list-item": "listItem",
 		"o-list-item": "oListItem",
 		"group-list-item": "list",
 		"group-o-list-item": "oList",
-	} as const;
+	} 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)
-		] as RichTextComponent | ComponentShorthand;
+		] as RichTextComponent | ComponentShorthand
 	}
 </script>
 
@@ -36,10 +31,7 @@
 	{@const Component = getComponent(child)}
 	{#snippet serializedChildren()}
 		<!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
-		{#if child.children.length > 0}<Serialize
-				children={child.children}
-				{components}
-			/>{/if}
+		{#if child.children.length > 0}<Serialize children={child.children} {components} />{/if}
 	{/snippet}
 	{#if typeof Component === "function"}
 		<Component node={child.node}>{@render serializedChildren()}</Component>

package/src/PrismicTable.svelte

@@ -7,40 +7,35 @@
 		TableFieldHead,
 		TableFieldHeadRow,
 		TableFieldHeaderCell,
-	} from "@prismicio/client";
-	import { isFilled } from "@prismicio/client";
-	import type { Component } from "svelte";
+	} from "@prismicio/client"
+	import { isFilled } from "@prismicio/client"
+	import type { Component } from "svelte"
 
-	import type { RichTextComponents, TableComponents } from "./types";
-
-	import PrismicRichText from "./PrismicRichText/PrismicRichText.svelte";
+	import PrismicRichText from "./PrismicRichText/PrismicRichText.svelte"
+	import type { RichTextComponents, TableComponents } from "./types"
 
 	type Props = {
-		/**
-		 * The Prismic table field to render.
-		 */
-		field: TableField;
+		/** The Prismic table field to render. */
+		field: TableField
 
-		/**
-		 * An object that maps a rich text block type to a Svelte component.
-		 */
-		components?: TableComponents & RichTextComponents;
+		/** An object that maps a rich text block type to a Svelte component. */
+		components?: TableComponents & RichTextComponents
 
 		/**
-		 * The component rendered when the field is empty. If a fallback is not
-		 * given, `null` will be rendered.
+		 * The component rendered when the field is empty. If a fallback is not given, `null` will be
+		 * rendered.
 		 */
-		fallback?: Component;
-	};
+		fallback?: Component
+	}
 
-	const { field, components = {}, fallback: Fallback }: Props = $props();
+	const { field, components = {}, fallback: Fallback }: Props = $props()
 
-	const Table = components.table;
-	const Thead = components.thead;
-	const Tbody = components.tbody;
-	const Tr = components.tr;
-	const Th = components.th;
-	const Td = components.td;
+	const Table = $derived(components.table)
+	const Thead = $derived(components.thead)
+	const Tbody = $derived(components.tbody)
+	const Tr = $derived(components.tr)
+	const Th = $derived(components.th)
+	const Td = $derived(components.td)
 </script>
 
 {#snippet thead(head: TableFieldHead)}
@@ -72,31 +67,21 @@
 {/snippet}
 
 {#snippet th(cell: TableFieldHeaderCell)}
-	{#if typeof Th === "function"}<Th {cell}
-			><PrismicRichText field={cell.content} {components} /></Th
-		>{:else}<th {...Th}
-			><PrismicRichText field={cell.content} {components} /></th
-		>{/if}
+	{#if typeof Th === "function"}<Th {cell}><PrismicRichText field={cell.content} {components} /></Th
+		>{:else}<th {...Th}><PrismicRichText field={cell.content} {components} /></th>{/if}
 {/snippet}
 
 {#snippet td(cell: TableFieldDataCell)}
-	{#if typeof Td === "function"}<Td {cell}
-			><PrismicRichText field={cell.content} {components} /></Td
-		>{:else}<td {...Td}
-			><PrismicRichText field={cell.content} {components} /></td
-		>{/if}
+	{#if typeof Td === "function"}<Td {cell}><PrismicRichText field={cell.content} {components} /></Td
+		>{:else}<td {...Td}><PrismicRichText field={cell.content} {components} /></td>{/if}
 {/snippet}
 
 <!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
 {#if isFilled.table(field)}
 	{#if typeof Table === "function"}<Table table={field}
-			>{#if field?.head}{@render thead(field.head)}{/if}{@render tbody(
-				field.body,
-			)}</Table
+			>{#if field?.head}{@render thead(field.head)}{/if}{@render tbody(field.body)}</Table
 		>{:else}<table {...Table}>
-			{#if field?.head}{@render thead(field.head)}{/if}{@render tbody(
-				field.body,
-			)}
+			{#if field?.head}{@render thead(field.head)}{/if}{@render tbody(field.body)}
 		</table>{/if}
 {:else if Fallback}
 	<Fallback />

package/src/PrismicText.svelte

@@ -1,29 +1,25 @@
 <script lang="ts">
-	import type { RichTextField } from "@prismicio/client";
-	import { asText, isFilled } from "@prismicio/client";
-	import { DEV } from "esm-env";
+	import type { RichTextField } from "@prismicio/client"
+	import { asText, isFilled } from "@prismicio/client"
+	import { DEV } from "esm-env"
 
-	import { devMsg } from "./lib/devMsg";
+	import { devMsg } from "./lib/devMsg"
 
 	type Props = {
-		/**
-		 * A Rich Text or Title field from Prismic.
-		 */
-		field: RichTextField;
+		/** A Rich Text or Title field from Prismic. */
+		field: RichTextField
 
-		/**
-		 * The separator used between blocks. Defaults to `\n`.
-		 */
-		separator?: string | undefined;
+		/** The separator used between blocks. Defaults to `\n`. */
+		separator?: string | undefined
 
 		/**
-		 * The string rendered when the field is empty. If a fallback is not given,
-		 * `null` will be rendered.
+		 * The string rendered when the field is empty. If a fallback is not given, `null` will be
+		 * rendered.
 		 */
-		fallback?: string | undefined;
-	};
+		fallback?: string | undefined
+	}
 
-	const { field, separator, fallback, ...restProps }: Props = $props();
+	const { field, separator, fallback, ...restProps }: Props = $props()
 
 	$effect(() => {
 		if (DEV) {
@@ -33,10 +29,10 @@
 						"classname-is-not-a-valid-prop",
 					)}.`,
 					$state.snapshot(field),
-				);
+				)
 			}
 		}
-	});
+	})
 
 	if (DEV) {
 		if (typeof field === "string") {
@@ -44,7 +40,7 @@
 				`[PrismicText] The "field" prop only accepts a Rich Text or Title field's value but was provided a different type of field instead (e.g. a Key Text or Select field). You can resolve this error by rendering the field value inline without <PrismicText>. For more details, see ${devMsg(
 					"prismictext-works-only-with-rich-text-and-title-fields",
 				)}`,
-			);
+			)
 		}
 	}
 </script>

package/src/SliceSimulator.svelte

@@ -9,40 +9,53 @@
 		onClickHandler,
 		simulatorClass,
 		simulatorRootClass,
-	} from "@prismicio/simulator/kit";
+	} from "@prismicio/simulator/kit"
+	import type { Snippet } from "svelte"
+	import type { ClassValue } from "svelte/elements"
 
-	const defaultProps = getDefaultProps();
+	const defaultProps = getDefaultProps()
 
-	export let zIndex = defaultProps.zIndex;
-	export let background = defaultProps.background;
+	type Props = {
+		zIndex?: number
+		background?: string
+		class?: ClassValue
+		children?: Snippet<[{ slices: ReturnType<typeof getDefaultSlices> }]>
+	}
+
+	const {
+		zIndex = defaultProps.zIndex,
+		background = defaultProps.background,
+		class: className,
+		children,
+	}: Props = $props()
 
-	let slices = getDefaultSlices();
-	let message = getDefaultMessage();
+	let slices = $state.raw(getDefaultSlices())
+	let message = $state(getDefaultMessage())
 
 	if (typeof window !== "undefined") {
-		const simulatorManager = new SimulatorManager();
+		const simulatorManager = new SimulatorManager()
 
 		simulatorManager.state.on(
 			StateEventType.Slices,
 			(newSlices) => {
-				slices = newSlices;
+				slices = newSlices
 			},
 			"simulator-slices",
-		);
+		)
 		simulatorManager.state.on(
 			StateEventType.Message,
 			(newMessage) => {
-				message = newMessage;
+				message = newMessage
 			},
 			"simulator-message",
-		);
+		)
 
-		simulatorManager.init();
+		simulatorManager.init()
 	}
 </script>
 
 <div
-	class="{simulatorClass} {$$props.class}"
+	class={[simulatorClass, className]}
 	style="z-index: {zIndex}; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: auto; background: {background}"
 >
 	{#if message}
@@ -51,15 +64,15 @@
 			{@html message}
 		</article>
 	{:else if slices.length}
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			id="root"
 			class={simulatorRootClass}
-			on:click={onClickHandler}
-			on:submit={disableEventHandler}
-			on:keypress={disableEventHandler}
+			onclick={onClickHandler}
+			onsubmit={disableEventHandler}
+			onkeypress={disableEventHandler}
 		>
-			<slot {slices} />
+			{@render children?.({ slices })}
 		</div>
 	{/if}
 </div>

package/src/SliceZone/SliceZone.svelte

@@ -1,54 +1,49 @@
 <script lang="ts">
-	import type { Component } from "svelte";
+	import type { Component } from "svelte"
 
-	import type { SliceComponentProps, SliceZoneLike } from "../types";
-
-	import TodoComponent from "./TodoComponent.svelte";
+	import type { SliceComponentProps, SliceZoneLike } from "../types"
+	import TodoComponent from "./TodoComponent.svelte"
 
 	type Props = {
-		/**
-		 * An array of Prismic Slices, such as the `slices` property from a Prismic
-		 * document.
-		 */
-		slices?: SliceZoneLike;
+		/** An array of Prismic Slices, such as the `slices` property from a Prismic document. */
+		slices?: SliceZoneLike
 
 		/**
 		 * An object that maps Slice components to their corresponding API IDs.
 		 *
-		 * @example An example map:
+		 * @example
+		 * 	An example map:
 		 *
-		 * ```js
-		 * import BlockQuote from "./BlockQuote.svelte";
-		 * import HeroImage from "./HeroImage.svelte";
+		 * 	```js
+		 * 	import BlockQuote from "./BlockQuote.svelte";
+		 * 	import HeroImage from "./HeroImage.svelte";
 		 *
-		 * const components = {
+		 * 	const components = {
 		 * 	block_quote: BlockQuote,
 		 * 	hero_image: HeroImage,
-		 * };
-		 * ```
+		 * 	};
+		 * 	```
 		 */
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		components?: Record<string, Component<any>>;
+		components?: Record<string, Component<any>>
 
-		/**
-		 * Arbitrary data passed to all Slice components as a `context` prop.
-		 */
+		/** Arbitrary data passed to all Slice components as a `context` prop. */
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		context?: any;
+		context?: any
 
 		/**
-		 * The Svelte component rendered if a component mapping from the
-		 * `components` prop cannot be found.
+		 * The Svelte component rendered if a component mapping from the `components` prop cannot be
+		 * found.
 		 */
-		defaultComponent?: Component<SliceComponentProps> | undefined;
-	};
+		defaultComponent?: Component<SliceComponentProps> | undefined
+	}
 
 	const {
 		slices = [],
 		components = {},
 		context = {},
 		defaultComponent = undefined,
-	}: Props = $props();
+	}: Props = $props()
 </script>
 
 <!--

package/src/SliceZone/TodoComponent.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-	import { DEV } from "esm-env";
+	import { DEV } from "esm-env"
 
 	type Props = {
-		slice: { slice_type: string } | { type: string };
-	};
+		slice: { slice_type: string } | { type: string }
+	}
 
-	const { slice }: Props = $props();
+	const { slice }: Props = $props()
 
-	const type = $derived("slice_type" in slice ? slice.slice_type : slice.type);
+	const type = $derived("slice_type" in slice ? slice.slice_type : slice.type)
 
 	$effect(() => {
 		if (DEV) {
 			console.warn(
 				`[SliceZone] Could not find a component for Slice type "${type}"`,
 				$state.snapshot(slice),
-			);
+			)
 		}
-	});
+	})
 </script>
 
 {#if DEV}

package/src/index.ts

@@ -1,19 +1,17 @@
-import type { RichTextComponents } from "./types";
+import type { RichTextComponents } from "./types"
 
-export { default as PrismicEmbed } from "./PrismicEmbed.svelte";
-export { default as PrismicImage } from "./PrismicImage.svelte";
-export { default as PrismicLink } from "./PrismicLink.svelte";
-export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.svelte";
-export { default as PrismicTable } from "./PrismicTable.svelte";
-export { default as PrismicText } from "./PrismicText.svelte";
-export { default as SliceZone } from "./SliceZone/SliceZone.svelte";
-export { default as SliceSimulator } from "./SliceSimulator.svelte";
+export { default as PrismicEmbed } from "./PrismicEmbed.svelte"
+export { default as PrismicImage } from "./PrismicImage.svelte"
+export { default as PrismicLink } from "./PrismicLink.svelte"
+export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.svelte"
+export { default as PrismicTable } from "./PrismicTable.svelte"
+export { default as PrismicText } from "./PrismicText.svelte"
+export { default as SliceZone } from "./SliceZone/SliceZone.svelte"
+export { default as SliceSimulator } from "./SliceSimulator.svelte"
 
-/**
- * @deprecated Replaced with `RichTextComponents`
- */
+/** @deprecated Replaced with `RichTextComponents` */
 // TODO: Remove in v3.
-export type SvelteRichTextSerializer = RichTextComponents;
-export type { RichTextComponents };
+export type SvelteRichTextSerializer = RichTextComponents
+export type { RichTextComponents }
 
-export type { RichTextComponentProps, SliceComponentProps } from "./types";
+export type { RichTextComponentProps, SliceComponentProps } from "./types"

package/src/kit/PrismicPreview.svelte

@@ -1,62 +1,52 @@
 <script lang="ts">
-	import { beforeNavigate, goto, invalidateAll } from "$app/navigation";
-	import { getToolbarSrc } from "@prismicio/client";
-	import { onMount } from "svelte";
+	import { beforeNavigate, goto, refreshAll } from "$app/navigation"
+	import { getToolbarSrc } from "@prismicio/client"
+	import { VERSION } from "@sveltejs/kit"
+	import { onMount } from "svelte"
 
 	type Props = {
 		/**
-		 * The name of your Prismic repository. A Prismic Toolbar will be registered
-		 * using this repository.
+		 * The name of your Prismic repository. A Prismic Toolbar will be registered using this
+		 * repository.
 		 */
-		repositoryName: string;
+		repositoryName: string
 
-		/**
-		 * The route parameter prefixed during preview sessions.
-		 */
-		routePrefix?: string;
+		/** The route parameter prefixed during preview sessions. */
+		routePrefix?: string
 
 		/**
-		 * The name of the preview-specific route parameter prefixed during preview
-		 * sessions.
+		 * 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.
+		 * Only set this value if the route parameter's name differs from the parameter's value.
 		 */
-		routePrefixName?: string;
-	};
+		routePrefixName?: string
+	}
 
-	const {
-		repositoryName,
-		routePrefix = "preview",
-		routePrefixName = routePrefix,
-	}: Props = $props();
+	const { repositoryName, routePrefix = "preview", routePrefixName = routePrefix }: Props = $props()
 
-	const toolbarSrc = $derived(getToolbarSrc(repositoryName));
+	const toolbarSrc = $derived(getToolbarSrc(repositoryName))
 
-	/**
-	 * Set to `true` when the next `beforeNavigate()` call should not prefix the
-	 * route.
-	 */
-	let endingPreview = $state(false);
+	/** Set to `true` when the next `beforeNavigate()` call should not prefix the route. */
+	let endingPreview = $state(false)
 
 	// Register Prismic toolbar event handlers to refresh data on content updates.
 	onMount(() => {
-		const controller = new AbortController();
+		const controller = new AbortController()
 
 		window.addEventListener(
 			"prismicPreviewUpdate",
 			(event) => {
-				event.preventDefault();
-				invalidateAll();
+				event.preventDefault()
+				refreshAll()
 			},
 			{ signal: controller.signal },
-		);
+		)
 		window.addEventListener(
 			"prismicPreviewEnd",
 			(event) => {
-				event.preventDefault();
+				event.preventDefault()
 
-				endingPreview = true;
+				endingPreview = true
 
 				goto(
 					new URL(
@@ -66,19 +56,20 @@
 						),
 						window.location.origin,
 					),
-					{
-						invalidateAll: true,
-						noScroll: true,
-					},
-				);
+					// SvelteKit 3 replaced `noScroll` with `reset`, and
+					// throws if `noScroll` is passed.
+					(VERSION.startsWith("2.")
+						? { invalidateAll: true, noScroll: true }
+						: { refreshAll: true, reset: false }) as Parameters<typeof goto>[1],
+				)
 			},
 			{ signal: controller.signal },
-		);
+		)
 
 		return () => {
-			controller.abort();
-		};
-	});
+			controller.abort()
+		}
+	})
 
 	beforeNavigate((navigation) => {
 		// Prefix links with the preview route parameter if the current
@@ -92,19 +83,14 @@
 			// event, don't prefix the route. The exception is only
 			// valid for one call.
 			if (endingPreview) {
-				endingPreview = false;
-				return;
+				endingPreview = false
+				return
 			}
 
-			navigation.cancel();
-			goto(
-				new URL(
-					routePrefix + navigation.to.url.pathname,
-					navigation.to.url.origin,
-				),
-			);
+			navigation.cancel()
+			goto(new URL(routePrefix + navigation.to.url.pathname, navigation.to.url.origin))
 		}
-	});
+	})
 </script>
 
 <svelte:head>