@prismicio/svelte 1.5.0 → 2.0.0-alpha.0

package/dist/PrismicRichText/DefaultComponent.svelte.d.ts

@@ -1,19 +1,9 @@
-import { SvelteComponent } from "svelte";
 import type { RTAnyNode } from "@prismicio/client";
-declare const __propDef: {
-    props: {
-        node: RTAnyNode;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from "svelte";
+type Props = {
+    node: RTAnyNode;
+    children?: Snippet;
 };
-export type DefaultComponentProps = typeof __propDef.props;
-export type DefaultComponentEvents = typeof __propDef.events;
-export type DefaultComponentSlots = typeof __propDef.slots;
-export default class DefaultComponent extends SvelteComponent<DefaultComponentProps, DefaultComponentEvents, DefaultComponentSlots> {
-}
-export {};
+declare const DefaultComponent: import("svelte").Component<Props, {}, "">;
+type DefaultComponent = ReturnType<typeof DefaultComponent>;
+export default DefaultComponent;

package/dist/PrismicRichText/PrismicRichText.svelte

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

package/dist/PrismicRichText/PrismicRichText.svelte.d.ts

@@ -1,24 +1,15 @@
-import { SvelteComponent } from "svelte";
 import type { RichTextField } from "@prismicio/client";
-declare const __propDef: {
-    props: {
-        /**
-             * The Prismic rich text field to render.
-             */ field: RichTextField;
-        /**
-             * An object that maps a rich text block type to a Svelte component.
-             */ components?: Partial<Record<"heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "paragraph" | "preformatted" | "strong" | "em" | "listItem" | "oListItem" | "list" | "oList" | "image" | "embed" | "hyperlink" | "label" | "span", new (...args: any[]) => SvelteComponent<Partial<{
-            node: import("@prismicio/client").RTAnyNode;
-        }>, any, any>>> | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { SvelteRichTextSerializer } from "../types";
+type Props = {
+    /**
+     * The Prismic rich text field to render.
+     */
+    field: RichTextField;
+    /**
+     * An object that maps a rich text block type to a Svelte component.
+     */
+    components?: SvelteRichTextSerializer;
 };
-export type PrismicRichTextProps = typeof __propDef.props;
-export type PrismicRichTextEvents = typeof __propDef.events;
-export type PrismicRichTextSlots = typeof __propDef.slots;
 /**
  * Component to render a Prismic rich text field.
  *
@@ -27,6 +18,6 @@ export type PrismicRichTextSlots = typeof __propDef.slots;
  * 	<PrismicRichText field={document.data.example_rich_text} />
  * ```
  */
-export default class PrismicRichText extends SvelteComponent<PrismicRichTextProps, PrismicRichTextEvents, PrismicRichTextSlots> {
-}
-export {};
+declare const PrismicRichText: import("svelte").Component<Props, {}, "">;
+type PrismicRichText = ReturnType<typeof PrismicRichText>;
+export default PrismicRichText;

package/dist/PrismicRichText/Serialize.svelte

@@ -1,23 +1,42 @@
-<script>import DefaultComponent from "./DefaultComponent.svelte";
-export let components = {};
-export let children;
-const CHILD_TYPE_RENAMES = {
-  "list-item": "listItem",
-  "o-list-item": "oListItem",
-  "group-list-item": "list",
-  "group-o-list-item": "oList"
-};
-function getComponent(child) {
-  return components[CHILD_TYPE_RENAMES[child.type] || child.type] || DefaultComponent;
-}
+<script lang="ts">
+	import type { asTree } from "@prismicio/client/richtext";
+
+	import type { SvelteRichTextSerializer } from "../types";
+
+	import DefaultComponent from "./DefaultComponent.svelte";
+	import Serialize from "./Serialize.svelte";
+
+	type Props = {
+		components: SvelteRichTextSerializer;
+		children: ReturnType<typeof asTree>["children"];
+	};
+
+	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;
+
+	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={getComponent(child)} node={child.node}>
+{#each children as child (child.key)}
+	{@const Component = getComponent(child)}
+	<Component node={child.node}>
 		<!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
-		{#if child.children.length > 0}<svelte:self
+		{#if child.children.length > 0}<Serialize
 				children={child.children}
 				{components}
-			/>{/if}</svelte:component
+			/>{/if}</Component
 	>
 {/each}

package/dist/PrismicRichText/Serialize.svelte.d.ts

@@ -1,20 +1,10 @@
-import { SvelteComponent } from "svelte";
-import type { asTree } from "@prismicio/richtext";
-declare const __propDef: {
-    props: {
-        components?: Partial<Record<"heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "paragraph" | "preformatted" | "strong" | "em" | "listItem" | "oListItem" | "list" | "oList" | "image" | "embed" | "hyperlink" | "label" | "span", new (...args: any[]) => SvelteComponent<Partial<{
-            node: import("@prismicio/client/*").RTAnyNode;
-        }>, any, any>>> | undefined;
-        children: ReturnType<typeof asTree>["children"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { asTree } from "@prismicio/client/richtext";
+import type { SvelteRichTextSerializer } from "../types";
+import Serialize from "./Serialize.svelte";
+type Props = {
+    components: SvelteRichTextSerializer;
+    children: ReturnType<typeof asTree>["children"];
 };
-export type SerializeProps = typeof __propDef.props;
-export type SerializeEvents = typeof __propDef.events;
-export type SerializeSlots = typeof __propDef.slots;
-export default class Serialize extends SvelteComponent<SerializeProps, SerializeEvents, SerializeSlots> {
-}
-export {};
+declare const Serialize: import("svelte").Component<Props, {}, "">;
+type Serialize = ReturnType<typeof Serialize>;
+export default Serialize;

package/dist/PrismicTable/DefaultComponent.svelte

@@ -1,4 +1,14 @@
-<script>export let type;
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	import type { TableComponents } from "../types";
+
+	type Props = {
+		type: keyof TableComponents;
+		children?: Snippet;
+	};
+
+	const { type, children }: Props = $props();
 </script>
 
-<svelte:element this={type}><slot /></svelte:element>
+<svelte:element this={type}>{@render children?.()}</svelte:element>

package/dist/PrismicTable/DefaultComponent.svelte.d.ts

@@ -1,19 +1,9 @@
-import { SvelteComponent } from "svelte";
+import type { Snippet } from "svelte";
 import type { TableComponents } from "../types";
-declare const __propDef: {
-    props: {
-        type: keyof TableComponents;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+type Props = {
+    type: keyof TableComponents;
+    children?: Snippet;
 };
-export type DefaultComponentProps = typeof __propDef.props;
-export type DefaultComponentEvents = typeof __propDef.events;
-export type DefaultComponentSlots = typeof __propDef.slots;
-export default class DefaultComponent extends SvelteComponent<DefaultComponentProps, DefaultComponentEvents, DefaultComponentSlots> {
-}
-export {};
+declare const DefaultComponent: import("svelte").Component<Props, {}, "">;
+type DefaultComponent = ReturnType<typeof DefaultComponent>;
+export default DefaultComponent;

package/dist/PrismicTable/PrismicTable.svelte

@@ -1,51 +1,67 @@
-<script>import { isFilled } from "@prismicio/client";
-import {} from "svelte";
-import PrismicRichText from "../PrismicRichText/PrismicRichText.svelte";
-import DefaultComponent from "./DefaultComponent.svelte";
-export let field;
-export let components = {};
-export let fallback = void 0;
-const createComponent = (type) => {
-  const Component = components[type] ?? DefaultComponent;
-  return {
-    Component,
-    props: Component === DefaultComponent ? { type } : {}
-  };
-};
-const { Component: Table, props: tableProps } = createComponent("table");
-const { Component: Thead, props: theadProps } = createComponent("thead");
-const { Component: Tbody, props: tbodyProps } = createComponent("tbody");
-const { Component: Tr, props: trProps } = createComponent("tr");
-const { Component: Th, props: thProps } = createComponent("th");
-const { Component: Td, props: tdProps } = createComponent("td");
+<script lang="ts">
+	import { type TableField, isFilled } from "@prismicio/client";
+	import { type Component } from "svelte";
+
+	import type { SvelteRichTextSerializer, TableComponents } from "../types";
+
+	import PrismicRichText from "../PrismicRichText/PrismicRichText.svelte";
+
+	import DefaultComponent from "./DefaultComponent.svelte";
+
+	type Props = {
+		/**
+		 * The Prismic table field to render.
+		 */
+		field: TableField;
+
+		/**
+		 * An object that maps a rich text block type to a Svelte component.
+		 */
+		components?: TableComponents & SvelteRichTextSerializer;
+
+		/**
+		 * The component rendered when the field is empty. If a fallback is not
+		 * given, `null` will be rendered.
+		 */
+		fallback?: Component;
+	};
+
+	const { field, components = {}, fallback: Fallback }: Props = $props();
+
+	const Table = components.table ?? DefaultComponent;
+	const Thead = components.thead ?? DefaultComponent;
+	const Tbody = components.tbody ?? DefaultComponent;
+	const Tr = components.tr ?? DefaultComponent;
+	const Th = components.th ?? DefaultComponent;
+	const Td = components.td ?? DefaultComponent;
 </script>
 
 <!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
 {#if isFilled.table(field)}
-	<Table {...tableProps} table={field}>
+	<Table type="table" table={field}>
 		{#if field?.head}
-			<Thead {...theadProps} head={field.head}>
+			<Thead type="thead" head={field.head}>
 				{#each field.head.rows as row (row.key)}
-					<Tr {...trProps} {row}>
+					<Tr type="tr" {row}>
 						{#each row.cells as cell (cell.key)}
-							<Th {...thProps} {cell}>
+							<Th type="th" {cell}>
 								<PrismicRichText field={cell.content} {components} /></Th
 							>{/each}</Tr
 					>{/each}</Thead
-			>{/if}<Tbody {...tbodyProps} body={field.body}>
+			>{/if}<Tbody type="tbody" body={field.body}>
 			{#each field.body.rows as row (row.key)}
-				<Tr {...trProps} {row}>
+				<Tr type="tr" {row}>
 					{#each row.cells as cell (cell.key)}
 						{#if cell.type === "header"}
-							<Th {...thProps} {cell}>
+							<Th type="th" {cell}>
 								<PrismicRichText field={cell.content} {components} /></Th
-							>{:else}<Td {...tdProps} {cell}>
+							>{:else}<Td type="td" {cell}>
 								<PrismicRichText field={cell.content} {components} /></Td
 							>{/if}{/each}</Tr
 				>
 			{/each}
 		</Tbody>
 	</Table>
-{:else if fallback !== undefined}
-	<svelte:component this={fallback} />
+{:else if Fallback}
+	<Fallback />
 {/if}

package/dist/PrismicTable/PrismicTable.svelte.d.ts

@@ -1,33 +1,21 @@
-import { SvelteComponent } from "svelte";
 import { type TableField } from "@prismicio/client";
-import { type ComponentType } from "svelte";
-import type { TableComponents } from "../types";
-declare const __propDef: {
-    props: {
-        /**
-             * The Prismic table field to render.
-             */ field: TableField;
-        /**
-             * An object that maps a rich text block type to a Svelte component.
-             */ components?: (TableComponents & Partial<Record<"heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "paragraph" | "preformatted" | "strong" | "em" | "listItem" | "oListItem" | "list" | "oList" | "image" | "embed" | "hyperlink" | "label" | "span", new (...args: any[]) => SvelteComponent<Partial<{
-            /**
-             * An object that maps a rich text block type to a Svelte component.
-             */
-            node: import("@prismicio/client").RTAnyNode;
-        }>, any, any>>>) | undefined;
-        /**
-             * The component rendered when the field is empty. If a fallback is not given,
-             * `null` will be rendered.
-             */ fallback?: ComponentType | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import { type Component } from "svelte";
+import type { SvelteRichTextSerializer, TableComponents } from "../types";
+type Props = {
+    /**
+     * The Prismic table field to render.
+     */
+    field: TableField;
+    /**
+     * An object that maps a rich text block type to a Svelte component.
+     */
+    components?: TableComponents & SvelteRichTextSerializer;
+    /**
+     * The component rendered when the field is empty. If a fallback is not
+     * given, `null` will be rendered.
+     */
+    fallback?: Component;
 };
-export type PrismicTableProps = typeof __propDef.props;
-export type PrismicTableEvents = typeof __propDef.events;
-export type PrismicTableSlots = typeof __propDef.slots;
-export default class PrismicTable extends SvelteComponent<PrismicTableProps, PrismicTableEvents, PrismicTableSlots> {
-}
-export {};
+declare const PrismicTable: Component<Props, {}, "">;
+type PrismicTable = ReturnType<typeof PrismicTable>;
+export default PrismicTable;

package/dist/PrismicText.svelte

@@ -1,26 +1,52 @@
-<script>import { isFilled, asText } from "@prismicio/client";
-import { DEV } from "esm-env";
-import { devMsg } from "./lib/devMsg";
-export let field;
-export let separator = void 0;
-export let fallback = void 0;
-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
-    );
-  }
-  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(
-        "prismictext-works-only-with-rich-text-and-title-fields"
-      )}`
-    );
-  }
-}
+<script lang="ts">
+	import type { RichTextField } from "@prismicio/client";
+	import { asText, isFilled } from "@prismicio/client";
+	import { DEV } from "esm-env";
+
+	import { devMsg } from "./lib/devMsg";
+
+	type Props = {
+		/**
+		 * A Rich Text or Title field from Prismic.
+		 */
+		field: RichTextField;
+
+		/**
+		 * 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.
+		 */
+		fallback?: string | undefined;
+	};
+
+	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(
+					"prismictext-works-only-with-rich-text-and-title-fields",
+				)}`,
+			);
+		}
+	}
 </script>
 
 <!--

package/dist/PrismicText.svelte.d.ts

@@ -1,20 +1,19 @@
-import { SvelteComponent } from "svelte";
 import type { RichTextField } from "@prismicio/client";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        field: RichTextField;
-        separator?: string | undefined;
-        fallback?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type Props = {
+    /**
+     * A Rich Text or Title field from Prismic.
+     */
+    field: RichTextField;
+    /**
+     * 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.
+     */
+    fallback?: string | undefined;
 };
-export type PrismicTextProps = typeof __propDef.props;
-export type PrismicTextEvents = typeof __propDef.events;
-export type PrismicTextSlots = typeof __propDef.slots;
 /**
  * Component to render a Prismic Rich Text or Title field as plain text.
  *
@@ -23,6 +22,6 @@ export type PrismicTextSlots = typeof __propDef.slots;
  * 	<PrismicText field={document.data.example_rich_text} />
  *  ```
  */
-export default class PrismicText extends SvelteComponent<PrismicTextProps, PrismicTextEvents, PrismicTextSlots> {
-}
-export {};
+declare const PrismicText: import("svelte").Component<Props, {}, "">;
+type PrismicText = ReturnType<typeof PrismicText>;
+export default PrismicText;

package/dist/SliceZone/SliceZone.svelte

@@ -1,8 +1,53 @@
-<script>import TodoComponent from "./TodoComponent.svelte";
-export let slices = [];
-export let components = {};
-export let context = {};
-export let defaultComponent = void 0;
+<script lang="ts">
+	import type { Component } from "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 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.
+		 */
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		context?: any;
+
+		/**
+		 * The Svelte component rendered if a component mapping from the
+		 * `components` prop cannot be found.
+		 */
+		defaultComponent?: Component<SliceComponentProps> | undefined;
+	};
+
+	const {
+		slices = [],
+		components = {},
+		context = {},
+		defaultComponent = undefined,
+	}: Props = $props();
 </script>
 
 <!--
@@ -21,15 +66,15 @@ export let defaultComponent = void 0;
 	```
 -->
 
-{#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} />