@prismicio/svelte 1.5.0 → 2.0.0-alpha.0

package/src/PrismicText.svelte

@@ -1,36 +1,44 @@
 <script lang="ts">
 	import type { RichTextField } from "@prismicio/client";
-	import { isFilled, asText } from "@prismicio/client";
+	import { asText, isFilled } from "@prismicio/client";
 	import { DEV } from "esm-env";
 
 	import { devMsg } from "./lib/devMsg";
 
-	/**
-	 * A Rich Text or Title field from Prismic.
-	 */
-	export let field: RichTextField;
+	type Props = {
+		/**
+		 * A Rich Text or Title field from Prismic.
+		 */
+		field: RichTextField;
 
-	/**
-	 * The separator used between blocks. Defaults to `\n`.
-	 */
-	export let separator: string | undefined = 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.
-	 */
-	export let fallback: string | undefined = undefined;
+		/**
+		 * The string rendered when the field is empty. If a fallback is not given,
+		 * `null` will be rendered.
+		 */
+		fallback?: string | undefined;
+	};
 
-	if (DEV) {
-		if ("className" in $$restProps) {
-			console.warn(
-				`[PrismicText] className cannot be passed to <PrismicText> since it renders plain text without a wrapping component. For more details, see ${devMsg(
-					"classname-is-not-a-valid-prop",
-				)}.`,
-				field,
-			);
+	const { field, separator, fallback, ...restProps }: Props = $props();
+
+	$effect(() => {
+		if (DEV) {
+			if ("className" in restProps) {
+				console.warn(
+					`[PrismicText] className cannot be passed to <PrismicText> since it renders plain text without a wrapping component. For more details, see ${devMsg(
+						"classname-is-not-a-valid-prop",
+					)}.`,
+					$state.snapshot(field),
+				);
+			}
 		}
+	});
 
+	if (DEV) {
 		if (typeof field === "string") {
 			throw new Error(
 				`[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(

package/src/SliceZone/SliceZone.svelte

@@ -1,100 +1,53 @@
 <script lang="ts">
-	import TodoComponent from "./TodoComponent.svelte";
-
-	import type * as prismic from "@prismicio/client";
-	import type { SvelteComponent } from "svelte";
+	import type { Component } from "svelte";
 
-	type SvelteSliceComponent = new (
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		...args: any[]
-	) => SvelteComponent<{
-		slice?: SliceLike;
-		slices?: SliceLike[];
-		context?: unknown;
-		index?: number;
-	}>;
+	import type { SliceComponentProps, SliceZoneLike } from "../types";
 
-	type SliceComponents = Record<string, SvelteSliceComponent>;
-
-	/**
-	 * The minimum required properties to represent a Prismic Slice from the
-	 * Prismic Rest API V2 for the `<SliceZone>` component.
-	 *
-	 * If using Prismic's Rest API V2, use the `Slice` export from
-	 * `@prismicio/types` for a full interface.
-	 *
-	 * @typeParam SliceType - Type name of the Slice.
-	 */
-	type SliceLikeRestV2<SliceType extends string = string> = {
-		slice_type: prismic.Slice<SliceType>["slice_type"];
-	};
+	import TodoComponent from "./TodoComponent.svelte";
 
-	/**
-	 * The minimum required properties to represent a Prismic Slice from the
-	 * Prismic GraphQL API for the `<SliceZone>` component.
-	 *
-	 * @typeParam SliceType - Type name of the Slice.
-	 */
-	type SliceLikeGraphQL<SliceType extends string = string> = {
-		type: prismic.Slice<SliceType>["slice_type"];
-	};
+	type Props = {
+		/**
+		 * An array of Prismic Slices, such as the `slices` property from a Prismic
+		 * document.
+		 */
+		slices?: SliceZoneLike;
 
-	/**
-	 * The minimum required properties to represent a Prismic Slice for the
-	 * `<SliceZone>` component.
-	 *
-	 * If using Prismic's Rest API V2, use the `Slice` export from
-	 * `@prismicio/types` for a full interface.
-	 *
-	 * @typeParam SliceType - Type name of the Slice.
-	 */
-	type SliceLike<SliceType extends string = string> = (
-		| SliceLikeRestV2<SliceType>
-		| SliceLikeGraphQL<SliceType>
-	) & {
 		/**
-		 * If `true`, this Slice has been modified from its original value using a
-		 * mapper and `@prismicio/client`'s `mapSliceZone()`.
+		 * An object that maps Slice components to their corresponding API IDs.
+		 *
+		 * @example An example map:
 		 *
-		 * @internal
+		 * ```js
+		 * import BlockQuote from "./BlockQuote.svelte";
+		 * import HeroImage from "./HeroImage.svelte";
+		 *
+		 * const components = {
+		 * 	block_quote: BlockQuote,
+		 * 	hero_image: HeroImage,
+		 * };
+		 * ```
 		 */
-		__mapped?: true;
-	};
-
-	/**
-	 * An array of Prismic Slices, such as the `slices` property from a Prismic
-	 * document.
-	 */
-	export let slices: SliceLike[] = [];
+		components?: Record<string, Component>;
 
-	/**
-	 * An object that maps Slice components to their corresponding API IDs.
-	 *
-	 * @example An example map:
-	 *
-	 * ```js
-	 * import BlockQuote from "./BlockQuote.svelte";
-	 * import HeroImage from "./HeroImage.svelte";
-	 *
-	 * const components = {
-	 * 	block_quote: BlockQuote,
-	 * 	hero_image: HeroImage,
-	 * };
-	 * ```
-	 */
-	export let components: SliceComponents = {};
+		/**
+		 * Arbitrary data passed to all Slice components as a `context` prop.
+		 */
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		context?: any;
 
-	/**
-	 * Arbitrary data passed to all Slice components as a `context` prop.
-	 */
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	export let context: any = {};
+		/**
+		 * The Svelte component rendered if a component mapping from the
+		 * `components` prop cannot be found.
+		 */
+		defaultComponent?: Component<SliceComponentProps> | undefined;
+	};
 
-	/**
-	 * The Svelte component rendered if a component mapping from the `components`
-	 * prop cannot be found.
-	 */
-	export let defaultComponent: SvelteSliceComponent | undefined = undefined;
+	const {
+		slices = [],
+		components = {},
+		context = {},
+		defaultComponent = undefined,
+	}: Props = $props();
 </script>
 
 <!--
@@ -113,15 +66,15 @@
 	```
 -->
 
-{#each slices as slice, index}
+{#each slices as slice, index ("id" in slice && slice.id ? slice.id : `${index}-${JSON.stringify(slice)}`)}
 	{@const type = "slice_type" in slice ? slice.slice_type : slice.type}
 	{@const Component = components[type] || defaultComponent}
 	{#if Component}
 		{#if slice.__mapped}
 			{@const { __mapped, ...mappedProps } = slice}
-			<svelte:component this={Component} {...mappedProps} />
+			<Component {...mappedProps} />
 		{:else}
-			<svelte:component this={Component} {slice} {slices} {context} {index} />
+			<Component {slice} {slices} {context} {index} />
 		{/if}
 	{:else}
 		<TodoComponent {slice} />

package/src/SliceZone/TodoComponent.svelte

@@ -1,16 +1,22 @@
 <script lang="ts">
 	import { DEV } from "esm-env";
 
-	export let slice: { slice_type: string } | { type: string };
+	type Props = {
+		slice: { slice_type: string } | { type: string };
+	};
 
-	const type = "slice_type" in slice ? slice.slice_type : slice.type;
+	const { slice }: Props = $props();
 
-	if (DEV) {
-		console.warn(
-			`[SliceZone] Could not find a component for Slice type "${type}"`,
-			slice,
-		);
-	}
+	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

@@ -6,4 +6,4 @@ export { default as PrismicTable } from "./PrismicTable/PrismicTable.svelte";
 export { default as PrismicText } from "./PrismicText.svelte";
 export { default as SliceZone } from "./SliceZone/SliceZone.svelte";
 
-export type { SvelteRichTextSerializer } from "./types";
+export type { SvelteRichTextSerializer, SliceComponentProps } from "./types";

package/src/kit/PrismicPreview.svelte

@@ -1,35 +1,43 @@
 <script lang="ts">
-	import { onMount } from "svelte";
-	import { getToolbarSrc } from "@prismicio/client";
 	import { beforeNavigate, goto, invalidateAll } from "$app/navigation";
+	import { getToolbarSrc } from "@prismicio/client";
+	import { onMount } from "svelte";
 
-	/**
-	 * The name of your Prismic repository. A Prismic Toolbar will be registered
-	 * using this repository.
-	 */
-	export let repositoryName: string;
+	type Props = {
+		/**
+		 * The name of your Prismic repository. A Prismic Toolbar will be registered
+		 * using this repository.
+		 */
+		repositoryName: string;
 
-	/**
-	 * The route parameter prefixed during preview sessions.
-	 */
-	export let routePrefix: string = "preview";
+		/**
+		 * The route parameter prefixed during preview sessions.
+		 */
+		routePrefix?: string;
 
-	/**
-	 * 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;
+		/**
+		 * 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;
+	};
+
+	const {
+		repositoryName,
+		routePrefix = "preview",
+		routePrefixName = routePrefix,
+	}: Props = $props();
 
-	$: toolbarSrc = getToolbarSrc(repositoryName);
+	const toolbarSrc = $derived(getToolbarSrc(repositoryName));
 
 	/**
 	 * Set to `true` when the next `beforeNavigate()` call should not prefix the
 	 * route.
 	 */
-	let endingPreview = false;
+	let endingPreview = $state(false);
 
 	// Register Prismic toolbar event handlers to refresh data on content updates.
 	onMount(() => {
@@ -53,7 +61,7 @@
 				goto(
 					new URL(
 						window.location.pathname.replace(
-							new RegExp(`^(\/${routePrefix}\/?$|\/${routePrefix}\/)`),
+							new RegExp(`^(/${routePrefix}/?$|/${routePrefix}/)`),
 							"/",
 						),
 						window.location.origin,

package/src/lib/devMsg.ts

@@ -16,5 +16,5 @@ import { version } from "../../package.json";
  * @returns The `prismic.dev/msg` URL for the given slug.
  */
 export const devMsg = (slug: string): string => {
-	return `https://prismic.dev/msg/react/v${version}/${slug}`;
+	return `https://prismic.dev/msg/svelte/v${version}/${slug}`;
 };

package/src/types.ts

@@ -1,6 +1,7 @@
 import type {
 	RTAnyNode,
 	RichTextNodeType,
+	Slice,
 	TableField,
 	TableFieldBody,
 	TableFieldBodyRow,
@@ -9,29 +10,115 @@ import type {
 	TableFieldHeadRow,
 	TableFieldHeaderCell,
 } from "@prismicio/client";
-import type { ComponentType, SvelteComponent } from "svelte";
+import type { Component } from "svelte";
 
 export type SvelteRichTextSerializer = Partial<
-	Record<keyof typeof RichTextNodeType, SvelteRichTextComponent>
->;
-
-type SvelteRichTextComponent = new (
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	...args: any[]
-) => SvelteComponent<
-	Partial<{
-		node: RTAnyNode;
-	}>
+	Record<keyof typeof RichTextNodeType, Component<{ node?: RTAnyNode }>>
 >;
 
 // Define the type for the components prop
 export type TableComponents = {
-	table?: ComponentType<SvelteComponent<{ table: TableField<"filled"> }>>;
-	thead?: ComponentType<SvelteComponent<{ head: TableFieldHead }>>;
-	tbody?: ComponentType<SvelteComponent<{ body: TableFieldBody }>>;
-	tr?: ComponentType<
-		SvelteComponent<{ row: TableFieldHeadRow | TableFieldBodyRow }>
+	table?: Component<{ table: TableField<"filled"> }>;
+	thead?: Component<{ head: TableFieldHead }>;
+	tbody?: Component<{ body: TableFieldBody }>;
+	tr?: Component<{ row: TableFieldHeadRow | TableFieldBodyRow }>;
+	th?: Component<{ cell: TableFieldHeaderCell }>;
+	td?: Component<{ cell: TableFieldDataCell }>;
+};
+
+/**
+ * Props for a component rendering content from a Prismic Slice using the
+ * `<SliceZone>` component.
+ *
+ * @typeParam TSlice - The Slice passed as a prop.
+ * @typeParam TContext - Arbitrary data passed to `<SliceZone>` and made
+ *   available to all Slice components.
+ */
+export type SliceComponentProps<
+	TSlice extends SliceLike = SliceLike,
+	TContext = unknown,
+> = {
+	/**
+	 * Slice data for this component.
+	 */
+	slice: TSlice;
+
+	/**
+	 * The index of the Slice in the Slice Zone.
+	 */
+	index: number;
+
+	/**
+	 * All Slices from the Slice Zone to which the Slice belongs.
+	 */
+	// TODO: We have to keep this list of Slices general due to circular
+	// reference limtiations. If we had another generic to determine the full
+	// union of Slice types, it would include TSlice. This causes TypeScript to
+	// throw a compilation error.
+	slices: SliceZoneLike<
+		TSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2
 	>;
-	th?: ComponentType<SvelteComponent<{ table: TableFieldHeaderCell }>>;
-	td?: ComponentType<SvelteComponent<{ table: TableFieldDataCell }>>;
+
+	/**
+	 * Arbitrary data passed to `<SliceZone>` and made available to all Slice
+	 * components.
+	 */
+	context: TContext;
 };
+
+/**
+ * The minimum required properties to represent a Prismic Slice from the Prismic
+ * Rest API V2 for the `<SliceZone>` component.
+ *
+ * If using Prismic's Rest API V2, use the `Slice` export from
+ * `@prismicio/types` for a full interface.
+ *
+ * @typeParam SliceType - Type name of the Slice.
+ */
+type SliceLikeRestV2<SliceType extends string = string> = {
+	slice_type: Slice<SliceType>["slice_type"];
+};
+
+/**
+ * The minimum required properties to represent a Prismic Slice from the Prismic
+ * GraphQL API for the `<SliceZone>` component.
+ *
+ * @typeParam SliceType - Type name of the Slice.
+ */
+type SliceLikeGraphQL<SliceType extends string = string> = {
+	type: Slice<SliceType>["slice_type"];
+};
+
+/**
+ * The minimum required properties to represent a Prismic Slice for the
+ * `<SliceZone>` component.
+ *
+ * If using Prismic's Rest API V2, use the `Slice` export from
+ * `@prismicio/types` for a full interface.
+ *
+ * @typeParam SliceType - Type name of the Slice.
+ */
+type SliceLike<SliceType extends string = string> = (
+	| SliceLikeRestV2<SliceType>
+	| SliceLikeGraphQL<SliceType>
+) & {
+	/**
+	 * If `true`, this Slice has been modified from its original value using a
+	 * mapper and `@prismicio/client`'s `mapSliceZone()`.
+	 *
+	 * @internal
+	 */
+	__mapped?: true;
+};
+
+/**
+ * A looser version of the `SliceZone` type from `@prismicio/client` using
+ * `SliceLike`.
+ *
+ * If using Prismic's Rest API V2, use the `SliceZone` export from
+ * `@prismicio/client` for the full type.
+ *
+ * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
+ */
+export type SliceZoneLike<TSlice extends SliceLike = SliceLike> =
+	readonly TSlice[];