@prismicio/svelte 1.5.0 → 2.0.0-alpha.0

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

@@ -1,111 +1,37 @@
-import { SvelteComponent } from "svelte";
-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 | undefined;
-        })[] | undefined;
-        /**
-             * 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, 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 | undefined;
-            }) | undefined;
-            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 | undefined;
-            })[] | undefined;
-            context?: unknown;
-            index?: number | undefined;
-        }, any, any>> | undefined;
-        /**
-             * 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 | undefined;
-            }) | undefined;
-            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 | undefined;
-            })[] | undefined;
-            context?: unknown;
-            index?: number | undefined;
-        }, any, any>) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+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.
  *
@@ -120,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,20 +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: {};
 };
-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

@@ -5,4 +5,4 @@ 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";
+export type { SvelteRichTextSerializer, SliceComponentProps } from "./types";

package/dist/kit/PrismicPreview.svelte

@@ -1,62 +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,29 +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 | 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>;
-    };
-    slots: {};
+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,27 +1,102 @@
-import type { RTAnyNode, RichTextNodeType, TableField, TableFieldBody, TableFieldBodyRow, TableFieldDataCell, TableFieldHead, TableFieldHeadRow, TableFieldHeaderCell } from "@prismicio/client";
-import type { ComponentType, SvelteComponent } from "svelte";
-export type SvelteRichTextSerializer = Partial<Record<keyof typeof RichTextNodeType, SvelteRichTextComponent>>;
-type SvelteRichTextComponent = new (...args: any[]) => SvelteComponent<Partial<{
-    node: RTAnyNode;
-}>>;
+import type { RTAnyNode, RichTextNodeType, Slice, TableField, TableFieldBody, TableFieldBodyRow, TableFieldDataCell, TableFieldHead, TableFieldHeadRow, TableFieldHeaderCell } from "@prismicio/client";
+import type { Component } from "svelte";
+export type SvelteRichTextSerializer = Partial<Record<keyof typeof RichTextNodeType, Component<{
+    node?: RTAnyNode;
+}>>>;
 export type TableComponents = {
-    table?: ComponentType<SvelteComponent<{
+    table?: Component<{
         table: TableField<"filled">;
-    }>>;
-    thead?: ComponentType<SvelteComponent<{
+    }>;
+    thead?: Component<{
         head: TableFieldHead;
-    }>>;
-    tbody?: ComponentType<SvelteComponent<{
+    }>;
+    tbody?: Component<{
         body: TableFieldBody;
-    }>>;
-    tr?: ComponentType<SvelteComponent<{
+    }>;
+    tr?: Component<{
         row: TableFieldHeadRow | TableFieldBodyRow;
-    }>>;
-    th?: ComponentType<SvelteComponent<{
-        table: TableFieldHeaderCell;
-    }>>;
-    td?: ComponentType<SvelteComponent<{
-        table: TableFieldDataCell;
-    }>>;
+    }>;
+    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.
+     */
+    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 {};