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

package/dist/PrismicRichText/DefaultComponent.svelte

@@ -1,15 +1,11 @@
 <script lang="ts">
-	import type { RTAnyNode } from "@prismicio/client";
-	import type { Snippet } from "svelte";
+	import type { RichTextComponentProps } from "../types";
 
 	import PrismicEmbed from "../PrismicEmbed.svelte";
 	import PrismicImage from "../PrismicImage.svelte";
 	import PrismicLink from "../PrismicLink.svelte";
 
-	type Props = {
-		node: RTAnyNode;
-		children?: Snippet;
-	};
+	type Props = RichTextComponentProps;
 
 	const { node, children }: Props = $props();
 
@@ -19,33 +15,33 @@
 </script>
 
 {#if node.type === "heading1"}
-	<h1 {...dirProp}>{@render children?.()}</h1>
+	<h1 {...dirProp}>{@render children()}</h1>
 {:else if node.type === "heading2"}
-	<h2 {...dirProp}>{@render children?.()}</h2>
+	<h2 {...dirProp}>{@render children()}</h2>
 {:else if node.type === "heading3"}
-	<h3 {...dirProp}>{@render children?.()}</h3>
+	<h3 {...dirProp}>{@render children()}</h3>
 {:else if node.type === "heading4"}
-	<h4 {...dirProp}>{@render children?.()}</h4>
+	<h4 {...dirProp}>{@render children()}</h4>
 {:else if node.type === "heading5"}
-	<h5 {...dirProp}>{@render children?.()}</h5>
+	<h5 {...dirProp}>{@render children()}</h5>
 {:else if node.type === "heading6"}
-	<h6 {...dirProp}>{@render children?.()}</h6>
+	<h6 {...dirProp}>{@render children()}</h6>
 {:else if node.type === "paragraph"}
-	<p {...dirProp}>{@render children?.()}</p>
+	<p {...dirProp}>{@render children()}</p>
 {:else if node.type === "preformatted"}
-	<pre>{@render children?.()}</pre>
+	<pre>{@render children()}</pre>
 {:else if node.type === "strong"}
-	<strong>{@render children?.()}</strong>
+	<strong>{@render children()}</strong>
 {:else if node.type === "em"}
-	<em>{@render children?.()}</em>
+	<em>{@render children()}</em>
 {:else if node.type === "list-item"}
-	<li {...dirProp}>{@render children?.()}</li>
+	<li {...dirProp}>{@render children()}</li>
 {:else if node.type === "o-list-item"}
-	<li {...dirProp}>{@render children?.()}</li>
+	<li {...dirProp}>{@render children()}</li>
 {:else if node.type === "group-list-item"}
-	<ul>{@render children?.()}</ul>
+	<ul>{@render children()}</ul>
 {:else if node.type === "group-o-list-item"}
-	<ol>{@render children?.()}</ol>
+	<ol>{@render children()}</ol>
 {:else if node.type === "image"}
 	<p class="block-img">
 		<PrismicImage field={node} />
@@ -53,9 +49,9 @@
 {:else if node.type === "embed"}
 	<PrismicEmbed field={node.oembed} />
 {:else if node.type === "hyperlink"}
-	<PrismicLink field={node.data}>{@render children?.()}</PrismicLink>
+	<PrismicLink field={node.data}>{@render children()}</PrismicLink>
 {:else if node.type === "label"}
-	<span class={node.data.label}>{@render children?.()}</span>
+	<span class={node.data.label}>{@render children()}</span>
 {:else}
 	{#each node.text.split("\n") as line, index (index)}
 		{#if index > 0}<br />{/if}{line}

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

@@ -1,9 +1,5 @@
-import type { RTAnyNode } from "@prismicio/client";
-import type { Snippet } from "svelte";
-type Props = {
-    node: RTAnyNode;
-    children?: Snippet;
-};
+import type { RichTextComponentProps } from "../types";
+type Props = RichTextComponentProps;
 declare const DefaultComponent: import("svelte").Component<Props, {}, "">;
 type DefaultComponent = ReturnType<typeof DefaultComponent>;
 export default DefaultComponent;

package/dist/PrismicRichText/PrismicRichText.svelte

@@ -2,7 +2,7 @@
 	import type { RichTextField } from "@prismicio/client";
 	import { asTree } from "@prismicio/client/richtext";
 
-	import type { SvelteRichTextSerializer } from "../types";
+	import type { RichTextComponents } from "../types";
 
 	import Serialize from "./Serialize.svelte";
 
@@ -15,7 +15,7 @@
 		/**
 		 * An object that maps a rich text block type to a Svelte component.
 		 */
-		components?: SvelteRichTextSerializer;
+		components?: RichTextComponents;
 	};
 
 	const { field, components = {} }: Props = $props();

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

@@ -1,5 +1,5 @@
 import type { RichTextField } from "@prismicio/client";
-import type { SvelteRichTextSerializer } from "../types";
+import type { RichTextComponents } from "../types";
 type Props = {
     /**
      * The Prismic rich text field to render.
@@ -8,7 +8,7 @@ type Props = {
     /**
      * An object that maps a rich text block type to a Svelte component.
      */
-    components?: SvelteRichTextSerializer;
+    components?: RichTextComponents;
 };
 /**
  * Component to render a Prismic rich text field.

package/dist/PrismicRichText/Serialize.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { asTree } from "@prismicio/client/richtext";
 
-	import type { SvelteRichTextSerializer } from "../types";
+	import type { RichTextComponent, RichTextComponents } from "../types";
 
 	import DefaultComponent from "./DefaultComponent.svelte";
 	import Serialize from "./Serialize.svelte";
 
 	type Props = {
-		components: SvelteRichTextSerializer;
+		components: RichTextComponents;
 		children: ReturnType<typeof asTree>["children"];
 	};
 
@@ -22,10 +22,10 @@
 
 	function getComponent(child: ReturnType<typeof asTree>["children"][number]) {
 		return (
-			components[
+			(components[
 				CHILD_TYPE_RENAMES[child.type as keyof typeof CHILD_TYPE_RENAMES] ||
 					(child.type as keyof typeof components)
-			] || DefaultComponent
+			] as RichTextComponent) || DefaultComponent
 		);
 	}
 </script>

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

@@ -1,8 +1,8 @@
 import type { asTree } from "@prismicio/client/richtext";
-import type { SvelteRichTextSerializer } from "../types";
+import type { RichTextComponents } from "../types";
 import Serialize from "./Serialize.svelte";
 type Props = {
-    components: SvelteRichTextSerializer;
+    components: RichTextComponents;
     children: ReturnType<typeof asTree>["children"];
 };
 declare const Serialize: import("svelte").Component<Props, {}, "">;

package/dist/PrismicTable/DefaultComponent.svelte

@@ -5,10 +5,10 @@
 
 	type Props = {
 		type: keyof TableComponents;
-		children?: Snippet;
+		children: Snippet;
 	};
 
 	const { type, children }: Props = $props();
 </script>
 
-<svelte:element this={type}>{@render children?.()}</svelte:element>
+<svelte:element this={type}>{@render children()}</svelte:element>

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

@@ -2,7 +2,7 @@ import type { Snippet } from "svelte";
 import type { TableComponents } from "../types";
 type Props = {
     type: keyof TableComponents;
-    children?: Snippet;
+    children: Snippet;
 };
 declare const DefaultComponent: import("svelte").Component<Props, {}, "">;
 type DefaultComponent = ReturnType<typeof DefaultComponent>;

package/dist/PrismicTable/PrismicTable.svelte

@@ -2,7 +2,7 @@
 	import { type TableField, isFilled } from "@prismicio/client";
 	import { type Component } from "svelte";
 
-	import type { SvelteRichTextSerializer, TableComponents } from "../types";
+	import type { RichTextComponents, TableComponents } from "../types";
 
 	import PrismicRichText from "../PrismicRichText/PrismicRichText.svelte";
 
@@ -17,7 +17,7 @@
 		/**
 		 * An object that maps a rich text block type to a Svelte component.
 		 */
-		components?: TableComponents & SvelteRichTextSerializer;
+		components?: TableComponents & RichTextComponents;
 
 		/**
 		 * The component rendered when the field is empty. If a fallback is not

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

@@ -1,6 +1,6 @@
 import { type TableField } from "@prismicio/client";
 import { type Component } from "svelte";
-import type { SvelteRichTextSerializer, TableComponents } from "../types";
+import type { RichTextComponents, TableComponents } from "../types";
 type Props = {
     /**
      * The Prismic table field to render.
@@ -9,7 +9,7 @@ type Props = {
     /**
      * An object that maps a rich text block type to a Svelte component.
      */
-    components?: TableComponents & SvelteRichTextSerializer;
+    components?: TableComponents & RichTextComponents;
     /**
      * The component rendered when the field is empty. If a fallback is not
      * given, `null` will be rendered.

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, SliceComponentProps } from "./types";
+/**
+ * @deprecated Replaced with `RichTextComponents`
+ */
+export type SvelteRichTextSerializer = RichTextComponents;
+export type { RichTextComponents };
+export type { RichTextComponentProps, SliceComponentProps } from "./types";

package/dist/types.d.ts

@@ -1,26 +1,55 @@
-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;
-}>>>;
+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?: Component<{
         table: TableField<"filled">;
+        children: Snippet;
     }>;
     thead?: Component<{
         head: TableFieldHead;
+        children: Snippet;
     }>;
     tbody?: Component<{
         body: TableFieldBody;
+        children: Snippet;
     }>;
     tr?: Component<{
         row: TableFieldHeadRow | TableFieldBodyRow;
+        children: Snippet;
     }>;
     th?: Component<{
         cell: TableFieldHeaderCell;
+        children: Snippet;
     }>;
     td?: Component<{
         cell: TableFieldDataCell;
+        children: Snippet;
     }>;
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/svelte",
-	"version": "2.0.0-alpha.0",
+	"version": "2.0.0-alpha.1",
 	"description": "Svelte components to present Prismic content.",
 	"keywords": [
 		"typescript",

package/src/PrismicRichText/DefaultComponent.svelte

@@ -1,15 +1,11 @@
 <script lang="ts">
-	import type { RTAnyNode } from "@prismicio/client";
-	import type { Snippet } from "svelte";
+	import type { RichTextComponentProps } from "../types";
 
 	import PrismicEmbed from "../PrismicEmbed.svelte";
 	import PrismicImage from "../PrismicImage.svelte";
 	import PrismicLink from "../PrismicLink.svelte";
 
-	type Props = {
-		node: RTAnyNode;
-		children?: Snippet;
-	};
+	type Props = RichTextComponentProps;
 
 	const { node, children }: Props = $props();
 
@@ -19,33 +15,33 @@
 </script>
 
 {#if node.type === "heading1"}
-	<h1 {...dirProp}>{@render children?.()}</h1>
+	<h1 {...dirProp}>{@render children()}</h1>
 {:else if node.type === "heading2"}
-	<h2 {...dirProp}>{@render children?.()}</h2>
+	<h2 {...dirProp}>{@render children()}</h2>
 {:else if node.type === "heading3"}
-	<h3 {...dirProp}>{@render children?.()}</h3>
+	<h3 {...dirProp}>{@render children()}</h3>
 {:else if node.type === "heading4"}
-	<h4 {...dirProp}>{@render children?.()}</h4>
+	<h4 {...dirProp}>{@render children()}</h4>
 {:else if node.type === "heading5"}
-	<h5 {...dirProp}>{@render children?.()}</h5>
+	<h5 {...dirProp}>{@render children()}</h5>
 {:else if node.type === "heading6"}
-	<h6 {...dirProp}>{@render children?.()}</h6>
+	<h6 {...dirProp}>{@render children()}</h6>
 {:else if node.type === "paragraph"}
-	<p {...dirProp}>{@render children?.()}</p>
+	<p {...dirProp}>{@render children()}</p>
 {:else if node.type === "preformatted"}
-	<pre>{@render children?.()}</pre>
+	<pre>{@render children()}</pre>
 {:else if node.type === "strong"}
-	<strong>{@render children?.()}</strong>
+	<strong>{@render children()}</strong>
 {:else if node.type === "em"}
-	<em>{@render children?.()}</em>
+	<em>{@render children()}</em>
 {:else if node.type === "list-item"}
-	<li {...dirProp}>{@render children?.()}</li>
+	<li {...dirProp}>{@render children()}</li>
 {:else if node.type === "o-list-item"}
-	<li {...dirProp}>{@render children?.()}</li>
+	<li {...dirProp}>{@render children()}</li>
 {:else if node.type === "group-list-item"}
-	<ul>{@render children?.()}</ul>
+	<ul>{@render children()}</ul>
 {:else if node.type === "group-o-list-item"}
-	<ol>{@render children?.()}</ol>
+	<ol>{@render children()}</ol>
 {:else if node.type === "image"}
 	<p class="block-img">
 		<PrismicImage field={node} />
@@ -53,9 +49,9 @@
 {:else if node.type === "embed"}
 	<PrismicEmbed field={node.oembed} />
 {:else if node.type === "hyperlink"}
-	<PrismicLink field={node.data}>{@render children?.()}</PrismicLink>
+	<PrismicLink field={node.data}>{@render children()}</PrismicLink>
 {:else if node.type === "label"}
-	<span class={node.data.label}>{@render children?.()}</span>
+	<span class={node.data.label}>{@render children()}</span>
 {:else}
 	{#each node.text.split("\n") as line, index (index)}
 		{#if index > 0}<br />{/if}{line}

package/src/PrismicRichText/PrismicRichText.svelte

@@ -2,7 +2,7 @@
 	import type { RichTextField } from "@prismicio/client";
 	import { asTree } from "@prismicio/client/richtext";
 
-	import type { SvelteRichTextSerializer } from "../types";
+	import type { RichTextComponents } from "../types";
 
 	import Serialize from "./Serialize.svelte";
 
@@ -15,7 +15,7 @@
 		/**
 		 * An object that maps a rich text block type to a Svelte component.
 		 */
-		components?: SvelteRichTextSerializer;
+		components?: RichTextComponents;
 	};
 
 	const { field, components = {} }: Props = $props();

package/src/PrismicRichText/Serialize.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { asTree } from "@prismicio/client/richtext";
 
-	import type { SvelteRichTextSerializer } from "../types";
+	import type { RichTextComponent, RichTextComponents } from "../types";
 
 	import DefaultComponent from "./DefaultComponent.svelte";
 	import Serialize from "./Serialize.svelte";
 
 	type Props = {
-		components: SvelteRichTextSerializer;
+		components: RichTextComponents;
 		children: ReturnType<typeof asTree>["children"];
 	};
 
@@ -22,10 +22,10 @@
 
 	function getComponent(child: ReturnType<typeof asTree>["children"][number]) {
 		return (
-			components[
+			(components[
 				CHILD_TYPE_RENAMES[child.type as keyof typeof CHILD_TYPE_RENAMES] ||
 					(child.type as keyof typeof components)
-			] || DefaultComponent
+			] as RichTextComponent) || DefaultComponent
 		);
 	}
 </script>

package/src/PrismicTable/DefaultComponent.svelte

@@ -5,10 +5,10 @@
 
 	type Props = {
 		type: keyof TableComponents;
-		children?: Snippet;
+		children: Snippet;
 	};
 
 	const { type, children }: Props = $props();
 </script>
 
-<svelte:element this={type}>{@render children?.()}</svelte:element>
+<svelte:element this={type}>{@render children()}</svelte:element>

package/src/PrismicTable/PrismicTable.svelte

@@ -2,7 +2,7 @@
 	import { type TableField, isFilled } from "@prismicio/client";
 	import { type Component } from "svelte";
 
-	import type { SvelteRichTextSerializer, TableComponents } from "../types";
+	import type { RichTextComponents, TableComponents } from "../types";
 
 	import PrismicRichText from "../PrismicRichText/PrismicRichText.svelte";
 
@@ -17,7 +17,7 @@
 		/**
 		 * An object that maps a rich text block type to a Svelte component.
 		 */
-		components?: TableComponents & SvelteRichTextSerializer;
+		components?: TableComponents & RichTextComponents;
 
 		/**
 		 * The component rendered when the field is empty. If a fallback is not

package/src/index.ts

@@ -1,3 +1,5 @@
+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";
@@ -6,4 +8,11 @@ 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, SliceComponentProps } from "./types";
+/**
+ * @deprecated Replaced with `RichTextComponents`
+ */
+// TODO: Remove in v3.
+export type SvelteRichTextSerializer = RichTextComponents;
+export type { RichTextComponents };
+
+export type { RichTextComponentProps, SliceComponentProps } from "./types";

package/src/types.ts

@@ -1,6 +1,24 @@
 import type {
 	RTAnyNode,
-	RichTextNodeType,
+	RTEmNode,
+	RTEmbedNode,
+	RTHeading1Node,
+	RTHeading2Node,
+	RTHeading3Node,
+	RTHeading4Node,
+	RTHeading5Node,
+	RTHeading6Node,
+	RTImageNode,
+	RTLabelNode,
+	RTLinkNode,
+	RTListItemNode,
+	RTListNode,
+	RTOListItemNode,
+	RTOListNode,
+	RTParagraphNode,
+	RTPreformattedNode,
+	RTSpanNode,
+	RTStrongNode,
 	Slice,
 	TableField,
 	TableFieldBody,
@@ -10,20 +28,65 @@ import type {
 	TableFieldHeadRow,
 	TableFieldHeaderCell,
 } from "@prismicio/client";
-import type { Component } from "svelte";
+import type { Component, Snippet } from "svelte";
 
-export type SvelteRichTextSerializer = Partial<
-	Record<keyof typeof RichTextNodeType, Component<{ node?: RTAnyNode }>>
+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;
+};
+
 // Define the type for the components prop
 export type TableComponents = {
-	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 }>;
+	table?: Component<{
+		table: TableField<"filled">;
+		children: Snippet;
+	}>;
+	thead?: Component<{
+		head: TableFieldHead;
+		children: Snippet;
+	}>;
+	tbody?: Component<{
+		body: TableFieldBody;
+		children: Snippet;
+	}>;
+	tr?: Component<{
+		row: TableFieldHeadRow | TableFieldBodyRow;
+		children: Snippet;
+	}>;
+	th?: Component<{
+		cell: TableFieldHeaderCell;
+		children: Snippet;
+	}>;
+	td?: Component<{
+		cell: TableFieldDataCell;
+		children: Snippet;
+	}>;
 };
 
 /**