@prismicio/svelte 1.6.0-alpha.0 → 2.0.0-alpha.1

package/dist/SliceZone/SliceZone.svelte.d.ts

@@ -1,85 +1,37 @@
-import { SvelteComponent } from "svelte";
-import { ComponentCompat } from "../types";
-declare const __propDef: {
-    props: {
-        /**
-             * An array of Prismic Slices, such as the `slices` property from a Prismic
-             * document.
-             */ slices?: (({
-            slice_type: string;
-        } | {
-            type: string;
-        }) & {
-            /**
-             * If `true`, this Slice has been modified from its original value using a
-             * mapper and `@prismicio/client`'s `mapSliceZone()`.
-             *
-             * @internal
-             */
-            __mapped?: true;
-        })[];
-        /**
-             * 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,
-             * };
-             * ```
-             */ components?: Record<string, ComponentCompat<any>>;
-        /**
-             * Arbitrary data passed to all Slice components as a `context` prop.
-             */ context?: any;
-        /**
-             * The Svelte component rendered if a component mapping from the `components`
-             * prop cannot be found.
-             */ defaultComponent?: (new (...args: any[]) => SvelteComponent<{
-            slice?: ({
-                slice_type: string;
-            } | {
-                type: string;
-            }) & {
-                /**
-                 * If `true`, this Slice has been modified from its original value using a
-                 * mapper and `@prismicio/client`'s `mapSliceZone()`.
-                 *
-                 * @internal
-                 */
-                __mapped?: true;
-            };
-            slices?: (({
-                slice_type: string;
-            } | {
-                type: string;
-            }) & {
-                /**
-                 * If `true`, this Slice has been modified from its original value using a
-                 * mapper and `@prismicio/client`'s `mapSliceZone()`.
-                 *
-                 * @internal
-                 */
-                __mapped?: true;
-            })[];
-            context?: unknown;
-            index?: number;
-        }>) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+import type { Component } from "svelte";
+import type { SliceComponentProps, SliceZoneLike } from "../types";
+type Props = {
+    /**
+     * 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:
+     *
+     * ```js
+     * import BlockQuote from "./BlockQuote.svelte";
+     * import HeroImage from "./HeroImage.svelte";
+     *
+     * const components = {
+     * 	block_quote: BlockQuote,
+     * 	hero_image: HeroImage,
+     * };
+     * ```
+     */
+    components?: Record<string, Component>;
+    /**
+     * Arbitrary data passed to all Slice components as a `context` prop.
+     */
+    context?: any;
+    /**
+     * The Svelte component rendered if a component mapping from the
+     * `components` prop cannot be found.
+     */
+    defaultComponent?: Component<SliceComponentProps> | undefined;
 };
-export type SliceZoneProps = typeof __propDef.props;
-export type SliceZoneEvents = typeof __propDef.events;
-export type SliceZoneSlots = typeof __propDef.slots;
 /**
  * Component to render an array of Prismic slices.
  *
@@ -94,6 +46,6 @@ export type SliceZoneSlots = typeof __propDef.slots;
  * 	/>
  * ```
  */
-export default class SliceZone extends SvelteComponent<SliceZoneProps, SliceZoneEvents, SliceZoneSlots> {
-}
-export {};
+declare const SliceZone: Component<Props, {}, "">;
+type SliceZone = ReturnType<typeof SliceZone>;
+export default SliceZone;

package/dist/SliceZone/TodoComponent.svelte

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

@@ -1,22 +1,10 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        slice: {
-            slice_type: string;
-        } | {
-            type: string;
-        };
+type Props = {
+    slice: {
+        slice_type: string;
+    } | {
+        type: string;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
-export type TodoComponentProps = typeof __propDef.props;
-export type TodoComponentEvents = typeof __propDef.events;
-export type TodoComponentSlots = typeof __propDef.slots;
-export default class TodoComponent extends SvelteComponent<TodoComponentProps, TodoComponentEvents, TodoComponentSlots> {
-}
-export {};
+declare const TodoComponent: import("svelte").Component<Props, {}, "">;
+type TodoComponent = ReturnType<typeof TodoComponent>;
+export default TodoComponent;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { RichTextComponents } from "./types";
 export { default as PrismicEmbed } from "./PrismicEmbed.svelte";
 export { default as PrismicImage } from "./PrismicImage.svelte";
 export { default as PrismicLink } from "./PrismicLink.svelte";
@@ -5,4 +6,9 @@ export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.sv
 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";
+/**
+ * @deprecated Replaced with `RichTextComponents`
+ */
+export type SvelteRichTextSerializer = RichTextComponents;
+export type { RichTextComponents };
+export type { RichTextComponentProps, SliceComponentProps } from "./types";

package/dist/kit/PrismicPreview.svelte

@@ -1,61 +1,110 @@
-<script>import { onMount } from "svelte";
-import { getToolbarSrc } from "@prismicio/client";
-import { beforeNavigate, goto, invalidateAll } from "$app/navigation";
-export let repositoryName;
-export let routePrefix = "preview";
-export let routePrefixName = routePrefix;
-$: toolbarSrc = getToolbarSrc(repositoryName);
-let endingPreview = false;
-onMount(() => {
-  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 () => {
-    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 lang="ts">
+	import { beforeNavigate, goto, invalidateAll } from "$app/navigation";
+	import { getToolbarSrc } from "@prismicio/client";
+	import { onMount } from "svelte";
+
+	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.
+		 */
+		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.
+		 */
+		routePrefixName?: string;
+	};
+
+	const {
+		repositoryName,
+		routePrefix = "preview",
+		routePrefixName = routePrefix,
+	}: Props = $props();
+
+	const toolbarSrc = $derived(getToolbarSrc(repositoryName));
+
+	/**
+	 * 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();
+
+		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 () => {
+			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/dist/kit/PrismicPreview.svelte.d.ts

@@ -1,31 +1,22 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    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.
-             */ 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.
-             */ routePrefixName?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+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.
+     */
+    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.
+     */
+    routePrefixName?: string;
 };
-export type PrismicPreviewProps = typeof __propDef.props;
-export type PrismicPreviewEvents = typeof __propDef.events;
-export type PrismicPreviewSlots = typeof __propDef.slots;
-export default class PrismicPreview extends SvelteComponent<PrismicPreviewProps, PrismicPreviewEvents, PrismicPreviewSlots> {
-}
-export {};
+declare const PrismicPreview: import("svelte").Component<Props, {}, "">;
+type PrismicPreview = ReturnType<typeof PrismicPreview>;
+export default PrismicPreview;

package/dist/lib/devMsg.js

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

package/dist/types.d.ts

@@ -1,84 +1,131 @@
-import type * as prismic from "@prismicio/client";
-import type { Component, ComponentType, SvelteComponent } from "svelte";
-export type SvelteRichTextSerializer = {
-    heading1?: ComponentCompat<{
-        node: prismic.RTHeading1Node;
-    }>;
-    heading2?: ComponentCompat<{
-        node: prismic.RTHeading2Node;
-    }>;
-    heading3?: ComponentCompat<{
-        node: prismic.RTHeading3Node;
-    }>;
-    heading4?: ComponentCompat<{
-        node: prismic.RTHeading4Node;
-    }>;
-    heading5?: ComponentCompat<{
-        node: prismic.RTHeading5Node;
-    }>;
-    heading6?: ComponentCompat<{
-        node: prismic.RTHeading6Node;
-    }>;
-    paragraph?: ComponentCompat<{
-        node: prismic.RTParagraphNode;
-    }>;
-    preformatted?: ComponentCompat<{
-        node: prismic.RTPreformattedNode;
-    }>;
-    strong?: ComponentCompat<{
-        node: prismic.RTStrongNode;
-    }>;
-    em?: ComponentCompat<{
-        node: prismic.RTEmNode;
-    }>;
-    listItem?: ComponentCompat<{
-        node: prismic.RTListItemNode;
-    }>;
-    oListItem?: ComponentCompat<{
-        node: prismic.RTOListItemNode;
-    }>;
-    list?: ComponentCompat<{
-        node: prismic.RTListNode;
-    }>;
-    oList?: ComponentCompat<{
-        node: prismic.RTOListNode;
-    }>;
-    image?: ComponentCompat<{
-        node: prismic.RTImageNode;
-    }>;
-    embed?: ComponentCompat<{
-        node: prismic.RTEmbedNode;
-    }>;
-    hyperlink?: ComponentCompat<{
-        node: prismic.RTLinkNode;
-    }>;
-    label?: ComponentCompat<{
-        node: prismic.RTLabelNode;
-    }>;
-    span?: ComponentCompat<{
-        node: prismic.RTSpanNode;
-    }>;
+import type { RTAnyNode, RTEmNode, RTEmbedNode, RTHeading1Node, RTHeading2Node, RTHeading3Node, RTHeading4Node, RTHeading5Node, RTHeading6Node, RTImageNode, RTLabelNode, RTLinkNode, RTListItemNode, RTListNode, RTOListItemNode, RTOListNode, RTParagraphNode, RTPreformattedNode, RTSpanNode, RTStrongNode, Slice, TableField, TableFieldBody, TableFieldBodyRow, TableFieldDataCell, TableFieldHead, TableFieldHeadRow, TableFieldHeaderCell } from "@prismicio/client";
+import type { Component, Snippet } from "svelte";
+export type RichTextComponents = {
+    heading1?: RichTextComponent<RTHeading1Node>;
+    heading2?: RichTextComponent<RTHeading2Node>;
+    heading3?: RichTextComponent<RTHeading3Node>;
+    heading4?: RichTextComponent<RTHeading4Node>;
+    heading5?: RichTextComponent<RTHeading5Node>;
+    heading6?: RichTextComponent<RTHeading6Node>;
+    paragraph?: RichTextComponent<RTParagraphNode>;
+    preformatted?: RichTextComponent<RTPreformattedNode>;
+    strong?: RichTextComponent<RTStrongNode>;
+    em?: RichTextComponent<RTEmNode>;
+    listItem?: RichTextComponent<RTListItemNode>;
+    oListItem?: RichTextComponent<RTOListItemNode>;
+    list?: RichTextComponent<RTListNode>;
+    oList?: RichTextComponent<RTOListNode>;
+    image?: RichTextComponent<RTImageNode>;
+    embed?: RichTextComponent<RTEmbedNode>;
+    hyperlink?: RichTextComponent<RTLinkNode>;
+    label?: RichTextComponent<RTLabelNode>;
+    span?: RichTextComponent<RTSpanNode>;
+};
+export type RichTextComponent<TNode extends RTAnyNode = RTAnyNode> = Component<RichTextComponentProps<TNode>>;
+export type RichTextComponentProps<TNode extends RTAnyNode = RTAnyNode> = {
+    node: TNode;
+    children: Snippet;
 };
 export type TableComponents = {
-    table?: ComponentTypeCompat<{
-        table: prismic.TableField<"filled">;
+    table?: Component<{
+        table: TableField<"filled">;
+        children: Snippet;
     }>;
-    thead?: ComponentTypeCompat<{
-        head: prismic.TableFieldHead;
+    thead?: Component<{
+        head: TableFieldHead;
+        children: Snippet;
     }>;
-    tbody?: ComponentTypeCompat<{
-        body: prismic.TableFieldBody;
+    tbody?: Component<{
+        body: TableFieldBody;
+        children: Snippet;
     }>;
-    tr?: ComponentTypeCompat<{
-        row: prismic.TableFieldHeadRow | prismic.TableFieldBodyRow;
+    tr?: Component<{
+        row: TableFieldHeadRow | TableFieldBodyRow;
+        children: Snippet;
     }>;
-    th?: ComponentTypeCompat<{
-        table: prismic.TableFieldHeaderCell;
+    th?: Component<{
+        cell: TableFieldHeaderCell;
+        children: Snippet;
     }>;
-    td?: ComponentTypeCompat<{
-        table: prismic.TableFieldDataCell;
+    td?: Component<{
+        cell: TableFieldDataCell;
+        children: Snippet;
     }>;
 };
-type ComponentTypeCompat<Props extends Record<string, any> = any> = Component<Props> | ComponentType<SvelteComponent<Props>>;
-export type ComponentCompat<Props extends Record<string, any> = any> = Component<Props> | (new (...args: any[]) => SvelteComponent<Partial<Props>>);
+/**
+ * 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.
+     */
+    slices: SliceZoneLike<TSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2>;
+    /**
+     * 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[];
 export {};