@prismicio/svelte 2.0.0 → 2.1.0-canary.fa6f08e

package/README.md

@@ -2,10 +2,6 @@
 
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
-[![Codecov][codecov-src]][codecov-href]
-[![Conventional Commits][conventional-commits-src]][conventional-commits-href]
-[![License][license-src]][license-href]
 
 [Svelte][svelte] components to present [Prismic][prismic] content.
 
@@ -93,11 +89,3 @@ limitations under the License.
 [npm-version-href]: https://npmjs.com/package/@prismicio/svelte
 [npm-downloads-src]: https://img.shields.io/npm/dm/@prismicio/svelte.svg
 [npm-downloads-href]: https://npmjs.com/package/@prismicio/svelte
-[github-actions-ci-src]: https://github.com/prismicio/prismic-svelte/workflows/ci/badge.svg
-[github-actions-ci-href]: https://github.com/prismicio/prismic-svelte/actions?query=workflow%3Aci
-[codecov-src]: https://img.shields.io/codecov/c/github/prismicio/prismic-svelte.svg
-[codecov-href]: https://codecov.io/gh/prismicio/prismic-svelte
-[conventional-commits-src]: https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&logoColor=white
-[conventional-commits-href]: https://conventionalcommits.org
-[license-src]: https://img.shields.io/npm/l/@prismicio/svelte.svg
-[license-href]: https://npmjs.com/package/@prismicio/svelte

package/dist/PrismicRichText/DefaultComponent.svelte

@@ -1,57 +1,70 @@
 <script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
 	import type { RichTextComponentProps } from "../types";
 
 	import PrismicEmbed from "../PrismicEmbed.svelte";
 	import PrismicImage from "../PrismicImage.svelte";
 	import PrismicLink from "../PrismicLink.svelte";
 
-	type Props = RichTextComponentProps;
+	type Props = RichTextComponentProps &
+		HTMLAttributes<HTMLElement> & { as?: string };
 
-	const { node, children }: Props = $props();
+	const { node, children, as, ...attrs }: Props = $props();
 
 	const dirProp = $derived(
 		"direction" in node && node.direction === "rtl" ? { direction: "rtl" } : {},
 	);
 </script>
 
-{#if node.type === "heading1"}
-	<h1 {...dirProp}>{@render children()}</h1>
+{#if as}
+	<svelte:element this={as} {...dirProp} {...attrs} {...attrs}
+		>{@render children()}</svelte:element
+	>
+{:else if node.type === "heading1"}
+	<h1 {...dirProp} {...attrs}>{@render children()}</h1>
 {:else if node.type === "heading2"}
-	<h2 {...dirProp}>{@render children()}</h2>
+	<h2 {...dirProp} {...attrs}>{@render children()}</h2>
 {:else if node.type === "heading3"}
-	<h3 {...dirProp}>{@render children()}</h3>
+	<h3 {...dirProp} {...attrs}>{@render children()}</h3>
 {:else if node.type === "heading4"}
-	<h4 {...dirProp}>{@render children()}</h4>
+	<h4 {...dirProp} {...attrs}>{@render children()}</h4>
 {:else if node.type === "heading5"}
-	<h5 {...dirProp}>{@render children()}</h5>
+	<h5 {...dirProp} {...attrs}>{@render children()}</h5>
 {:else if node.type === "heading6"}
-	<h6 {...dirProp}>{@render children()}</h6>
+	<h6 {...dirProp} {...attrs}>{@render children()}</h6>
 {:else if node.type === "paragraph"}
-	<p {...dirProp}>{@render children()}</p>
+	<p {...dirProp} {...attrs}>{@render children()}</p>
 {:else if node.type === "preformatted"}
-	<pre>{@render children()}</pre>
+	<pre {...attrs}>{@render children()}</pre>
 {:else if node.type === "strong"}
-	<strong>{@render children()}</strong>
+	<strong {...attrs}>{@render children()}</strong>
 {:else if node.type === "em"}
-	<em>{@render children()}</em>
+	<em {...attrs}>{@render children()}</em>
 {:else if node.type === "list-item"}
-	<li {...dirProp}>{@render children()}</li>
+	<li {...dirProp} {...attrs}>{@render children()}</li>
 {:else if node.type === "o-list-item"}
-	<li {...dirProp}>{@render children()}</li>
+	<li {...dirProp} {...attrs}>{@render children()}</li>
 {:else if node.type === "group-list-item"}
-	<ul>{@render children()}</ul>
+	<ul {...attrs}>{@render children()}</ul>
 {:else if node.type === "group-o-list-item"}
-	<ol>{@render children()}</ol>
+	<ol {...attrs}>{@render children()}</ol>
 {:else if node.type === "image"}
 	<p class="block-img">
-		<PrismicImage field={node} />
+		{#if node.linkTo}
+			<PrismicLink field={node.linkTo}>
+				<PrismicImage field={node} {...attrs} />
+			</PrismicLink>
+		{:else}
+			<PrismicImage field={node} {...attrs} />
+		{/if}
 	</p>
 {:else if node.type === "embed"}
-	<PrismicEmbed field={node.oembed} />
+	<PrismicEmbed field={node.oembed} {...attrs} />
 {:else if node.type === "hyperlink"}
-	<PrismicLink field={node.data}>{@render children()}</PrismicLink>
+	<PrismicLink field={node.data} {...attrs}>{@render children()}</PrismicLink>
 {:else if node.type === "label"}
-	<span class={node.data.label}>{@render children()}</span>
+	<span class={node.data.label} {...attrs}>{@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,5 +1,8 @@
+import type { HTMLAttributes } from "svelte/elements";
 import type { RichTextComponentProps } from "../types";
-type Props = RichTextComponentProps;
+type Props = RichTextComponentProps & HTMLAttributes<HTMLElement> & {
+    as?: string;
+};
 declare const DefaultComponent: import("svelte").Component<Props, {}, "">;
 type DefaultComponent = ReturnType<typeof DefaultComponent>;
 export default DefaultComponent;

package/dist/PrismicRichText/Serialize.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
 	import type { asTree } from "@prismicio/client/richtext";
 
-	import type { RichTextComponent, RichTextComponents } from "../types";
+	import type {
+		ComponentShorthand,
+		RichTextComponent,
+		RichTextComponents,
+	} from "../types";
 
 	import DefaultComponent from "./DefaultComponent.svelte";
 	import Serialize from "./Serialize.svelte";
@@ -21,22 +25,27 @@
 	} 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)
-			] as RichTextComponent) || DefaultComponent
-		);
+		return components[
+			CHILD_TYPE_RENAMES[child.type as keyof typeof CHILD_TYPE_RENAMES] ||
+				(child.type as keyof typeof components)
+		] as RichTextComponent | ComponentShorthand;
 	}
 </script>
 
 {#each children as child (child.key)}
 	{@const Component = getComponent(child)}
-	<Component node={child.node}>
+	{#snippet serializedChildren()}
 		<!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
 		{#if child.children.length > 0}<Serialize
 				children={child.children}
 				{components}
-			/>{/if}</Component
-	>
+			/>{/if}
+	{/snippet}
+	{#if typeof Component === "function"}
+		<Component node={child.node}>{@render serializedChildren()}</Component>
+	{:else}
+		<DefaultComponent {...Component} node={child.node}
+			>{@render serializedChildren()}</DefaultComponent
+		>
+	{/if}
 {/each}

package/dist/PrismicTable.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import {
+		type TableField,
+		TableFieldBody,
+		TableFieldBodyRow,
+		TableFieldDataCell,
+		TableFieldHead,
+		TableFieldHeadRow,
+		TableFieldHeaderCell,
+		isFilled,
+	} from "@prismicio/client";
+	import { type Component } from "svelte";
+
+	import { type RichTextComponents, type TableComponents } from "./types";
+
+	import PrismicRichText from "./PrismicRichText/PrismicRichText.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 & RichTextComponents;
+
+		/**
+		 * 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;
+	const Thead = components.thead;
+	const Tbody = components.tbody;
+	const Tr = components.tr;
+	const Th = components.th;
+	const Td = components.td;
+</script>
+
+{#snippet thead(head: TableFieldHead)}
+	{#if typeof Thead === "function"}<Thead {head}
+			>{#each head.rows as row (row.key)}{@render tr(row)}{/each}</Thead
+		>{:else}<thead {...Thead}
+			>{#each head.rows as row (row.key)}{@render tr(row)}{/each}</thead
+		>{/if}
+{/snippet}
+
+{#snippet tbody(body: TableFieldBody)}
+	{#if typeof Tbody === "function"}<Tbody {body}
+			>{#each body.rows as row (row.key)}{@render tr(row)}{/each}</Tbody
+		>{:else}<tbody {...Tbody}
+			>{#each body.rows as row (row.key)}{@render tr(row)}{/each}</tbody
+		>{/if}
+{/snippet}
+
+{#snippet tr(row: TableFieldHeadRow | TableFieldBodyRow)}
+	{#if typeof Tr === "function"}<Tr {row}
+			>{#each row.cells as cell (cell.key)}{#if cell.type === "header"}{@render th(
+						cell,
+					)}{:else}{@render td(cell)}{/if}{/each}</Tr
+		>{:else}<tr {...Tr}
+			>{#each row.cells as cell (cell.key)}{#if cell.type === "header"}{@render th(
+						cell,
+					)}{:else}{@render td(cell)}{/if}{/each}</tr
+		>{/if}
+{/snippet}
+
+{#snippet th(cell: TableFieldHeaderCell)}
+	{#if typeof Th === "function"}<Th {cell}
+			><PrismicRichText field={cell.content} {components} /></Th
+		>{:else}<th {...Th}
+			><PrismicRichText field={cell.content} {components} /></th
+		>{/if}
+{/snippet}
+
+{#snippet td(cell: TableFieldDataCell)}
+	{#if typeof Td === "function"}<Td {cell}
+			><PrismicRichText field={cell.content} {components} /></Td
+		>{:else}<td {...Td}
+			><PrismicRichText field={cell.content} {components} /></td
+		>{/if}
+{/snippet}
+
+<!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
+{#if isFilled.table(field)}
+	{#if typeof Table === "function"}<Table table={field}
+			>{#if field?.head}{@render thead(field.head)}{/if}{@render tbody(
+				field.body,
+			)}</Table
+		>{:else}<table {...Table}>
+			{#if field?.head}{@render thead(field.head)}{/if}{@render tbody(
+				field.body,
+			)}
+		</table>{/if}
+{:else if Fallback}
+	<Fallback />
+{/if}

package/dist/{PrismicTable/PrismicTable.svelte.d.ts → PrismicTable.svelte.d.ts}

@@ -1,6 +1,6 @@
 import { type TableField } from "@prismicio/client";
 import { type Component } from "svelte";
-import type { RichTextComponents, TableComponents } from "../types";
+import { type RichTextComponents, type TableComponents } from "./types";
 type Props = {
     /**
      * The Prismic table field to render.

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import { RichTextComponents } from "./types";
+import type { RichTextComponents } from "./types";
 export { default as PrismicEmbed } from "./PrismicEmbed.svelte";
 export { default as PrismicImage } from "./PrismicImage.svelte";
 export { default as PrismicLink } from "./PrismicLink.svelte";
 export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.svelte";
-export { default as PrismicTable } from "./PrismicTable/PrismicTable.svelte";
+export { default as PrismicTable } from "./PrismicTable.svelte";
 export { default as PrismicText } from "./PrismicText.svelte";
 export { default as SliceZone } from "./SliceZone/SliceZone.svelte";
 /**

package/dist/index.js

@@ -2,6 +2,6 @@ export { default as PrismicEmbed } from "./PrismicEmbed.svelte";
 export { default as PrismicImage } from "./PrismicImage.svelte";
 export { default as PrismicLink } from "./PrismicLink.svelte";
 export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.svelte";
-export { default as PrismicTable } from "./PrismicTable/PrismicTable.svelte";
+export { default as PrismicTable } from "./PrismicTable.svelte";
 export { default as PrismicText } from "./PrismicText.svelte";
 export { default as SliceZone } from "./SliceZone/SliceZone.svelte";

package/dist/kit/enableAutoPreviews.d.ts

@@ -1,5 +1,5 @@
 import * as prismic from "@prismicio/client";
-import { Cookies } from "@sveltejs/kit";
+import type { Cookies } from "@sveltejs/kit";
 /**
  * Configuration for `enableAutoPreviews`.
  */

package/dist/kit/redirectToPreviewURL.d.ts

@@ -1,5 +1,5 @@
 import * as prismic from "@prismicio/client";
-import { Cookies } from "@sveltejs/kit";
+import type { Cookies } from "@sveltejs/kit";
 export type RedirectToPreviewURLConfig = {
     /**
      * The Prismic client configured for the preview session's repository.

package/dist/kit/types.d.ts

@@ -1,5 +1,5 @@
-import { ClientConfig } from "@prismicio/client";
-import { Cookies } from "@sveltejs/kit";
+import type { ClientConfig } from "@prismicio/client";
+import type { Cookies } from "@sveltejs/kit";
 /**
  * Configuration for creating a Prismic client with automatic preview support in
  * SvelteKit apps.

package/dist/types.d.ts

@@ -1,24 +1,34 @@
 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";
+import type { HTMLAttributes } from "svelte/elements";
+/**
+ * A shorthand definition for `<PrismicRichText />` component types.
+ */
+export type ComponentShorthand = {
+    /**
+     * The HTML element type rendered for this node type.
+     */
+    as?: string;
+} & HTMLAttributes<HTMLElement>;
 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>;
+    heading1?: RichTextComponent<RTHeading1Node> | ComponentShorthand;
+    heading2?: RichTextComponent<RTHeading2Node> | ComponentShorthand;
+    heading3?: RichTextComponent<RTHeading3Node> | ComponentShorthand;
+    heading4?: RichTextComponent<RTHeading4Node> | ComponentShorthand;
+    heading5?: RichTextComponent<RTHeading5Node> | ComponentShorthand;
+    heading6?: RichTextComponent<RTHeading6Node> | ComponentShorthand;
+    paragraph?: RichTextComponent<RTParagraphNode> | ComponentShorthand;
+    preformatted?: RichTextComponent<RTPreformattedNode> | ComponentShorthand;
+    strong?: RichTextComponent<RTStrongNode> | ComponentShorthand;
+    em?: RichTextComponent<RTEmNode> | ComponentShorthand;
+    listItem?: RichTextComponent<RTListItemNode> | ComponentShorthand;
+    oListItem?: RichTextComponent<RTOListItemNode> | ComponentShorthand;
+    list?: RichTextComponent<RTListNode> | ComponentShorthand;
+    oList?: RichTextComponent<RTOListNode> | ComponentShorthand;
+    image?: RichTextComponent<RTImageNode> | HTMLAttributes<HTMLImageElement>;
+    embed?: RichTextComponent<RTEmbedNode> | HTMLAttributes<HTMLDivElement>;
+    hyperlink?: RichTextComponent<RTLinkNode> | HTMLAttributes<HTMLAnchorElement>;
+    label?: RichTextComponent<RTLabelNode> | HTMLAttributes<HTMLSpanElement>;
     span?: RichTextComponent<RTSpanNode>;
 };
 export type RichTextComponent<TNode extends RTAnyNode = RTAnyNode> = Component<RichTextComponentProps<TNode>>;
@@ -30,27 +40,27 @@ export type TableComponents = {
     table?: Component<{
         table: TableField<"filled">;
         children: Snippet;
-    }>;
+    }> | HTMLAttributes<HTMLTableElement>;
     thead?: Component<{
         head: TableFieldHead;
         children: Snippet;
-    }>;
+    }> | HTMLAttributes<HTMLTableSectionElement>;
     tbody?: Component<{
         body: TableFieldBody;
         children: Snippet;
-    }>;
+    }> | HTMLAttributes<HTMLTableSectionElement>;
     tr?: Component<{
         row: TableFieldHeadRow | TableFieldBodyRow;
         children: Snippet;
-    }>;
+    }> | HTMLAttributes<HTMLTableRowElement>;
     th?: Component<{
         cell: TableFieldHeaderCell;
         children: Snippet;
-    }>;
+    }> | HTMLAttributes<HTMLTableCellElement>;
     td?: Component<{
         cell: TableFieldDataCell;
         children: Snippet;
-    }>;
+    }> | HTMLAttributes<HTMLTableCellElement>;
 };
 /**
  * Props for a component rendering content from a Prismic Slice using the

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/svelte",
-	"version": "2.0.0",
+	"version": "2.1.0-canary.fa6f08e",
 	"description": "Svelte components to present Prismic content.",
 	"keywords": [
 		"typescript",
@@ -47,51 +47,36 @@
 		"build": "svelte-package --input ./src",
 		"dev": "svelte-package --input ./src --watch",
 		"format": "prettier --write --plugin prettier-plugin-svelte .",
-		"lint": "eslint",
 		"prepare": "npm run build",
-		"release": "npm run test && standard-version && git push --follow-tags && npm run build && npm publish",
-		"release:alpha": "npm run test && standard-version --release-as major --prerelease alpha && git push --follow-tags && npm run build && npm publish --tag alpha",
-		"release:alpha:dry": "standard-version --release-as major --prerelease alpha --dry-run",
-		"release:dry": "standard-version --release-as patch --dry-run",
-		"size": "size-limit",
-		"test": "npm run lint && npm run types && npm run unit && npm run build && npm run size",
+		"lint": "oxlint --deny-warnings",
 		"types": "tsc --noEmit",
-		"types:watch": "vitest watch --typecheck.only",
 		"unit": "vitest run --coverage",
-		"unit:watch": "vitest watch"
+		"unit:watch": "vitest watch",
+		"test": "npm run lint && npm run types && npm run unit && npm run build"
 	},
 	"dependencies": {
 		"esm-env": "^1.2.2"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^1.2.9",
-		"@eslint/js": "^9.27.0",
-		"@prismicio/client": "^7.17.2",
+		"@prismicio/client": "^7.21.0",
 		"@prismicio/mock": "^0.7.1",
-		"@size-limit/preset-small-lib": "^11.2.0",
-		"@sveltejs/kit": "^2.21.0",
-		"@sveltejs/package": "^2.3.11",
-		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@testing-library/svelte": "^5.2.7",
-		"@trivago/prettier-plugin-sort-imports": "^5.2.2",
-		"@types/node": "^22.15.18",
-		"@vitest/coverage-v8": "^3.1.3",
-		"eslint": "^9.27.0",
-		"eslint-config-prettier": "^10.1.5",
-		"eslint-plugin-prettier": "^5.4.0",
-		"eslint-plugin-svelte": "^3.7.0",
-		"eslint-plugin-tsdoc": "^0.4.0",
-		"globals": "^16.1.0",
-		"happy-dom": "^17.4.7",
-		"prettier": "^3.5.3",
-		"prettier-plugin-jsdoc": "^1.3.2",
-		"prettier-plugin-svelte": "^3.4.0",
-		"size-limit": "^11.2.0",
+		"@sveltejs/kit": "^2.49.2",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@testing-library/svelte": "^5.2.9",
+		"@trivago/prettier-plugin-sort-imports": "^6.0.0",
+		"@types/node": "^25.0.3",
+		"@vitest/coverage-v8": "^4.0.16",
+		"globals": "^16.5.0",
+		"happy-dom": "^20.0.11",
+		"oxlint": "^1.33.0",
+		"prettier": "^3.7.4",
+		"prettier-plugin-jsdoc": "^1.8.0",
+		"prettier-plugin-svelte": "^3.4.1",
 		"standard-version": "^9.5.0",
-		"svelte": "^5.30.1",
-		"typescript": "^5.8.3",
-		"typescript-eslint": "^8.32.1",
-		"vitest": "^3.1.3"
+		"svelte": "^5.46.0",
+		"typescript": "^5.9.3",
+		"vitest": "^4.0.16"
 	},
 	"peerDependencies": {
 		"@prismicio/client": ">=7",

package/src/PrismicRichText/DefaultComponent.svelte

@@ -1,57 +1,70 @@
 <script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
 	import type { RichTextComponentProps } from "../types";
 
 	import PrismicEmbed from "../PrismicEmbed.svelte";
 	import PrismicImage from "../PrismicImage.svelte";
 	import PrismicLink from "../PrismicLink.svelte";
 
-	type Props = RichTextComponentProps;
+	type Props = RichTextComponentProps &
+		HTMLAttributes<HTMLElement> & { as?: string };
 
-	const { node, children }: Props = $props();
+	const { node, children, as, ...attrs }: Props = $props();
 
 	const dirProp = $derived(
 		"direction" in node && node.direction === "rtl" ? { direction: "rtl" } : {},
 	);
 </script>
 
-{#if node.type === "heading1"}
-	<h1 {...dirProp}>{@render children()}</h1>
+{#if as}
+	<svelte:element this={as} {...dirProp} {...attrs} {...attrs}
+		>{@render children()}</svelte:element
+	>
+{:else if node.type === "heading1"}
+	<h1 {...dirProp} {...attrs}>{@render children()}</h1>
 {:else if node.type === "heading2"}
-	<h2 {...dirProp}>{@render children()}</h2>
+	<h2 {...dirProp} {...attrs}>{@render children()}</h2>
 {:else if node.type === "heading3"}
-	<h3 {...dirProp}>{@render children()}</h3>
+	<h3 {...dirProp} {...attrs}>{@render children()}</h3>
 {:else if node.type === "heading4"}
-	<h4 {...dirProp}>{@render children()}</h4>
+	<h4 {...dirProp} {...attrs}>{@render children()}</h4>
 {:else if node.type === "heading5"}
-	<h5 {...dirProp}>{@render children()}</h5>
+	<h5 {...dirProp} {...attrs}>{@render children()}</h5>
 {:else if node.type === "heading6"}
-	<h6 {...dirProp}>{@render children()}</h6>
+	<h6 {...dirProp} {...attrs}>{@render children()}</h6>
 {:else if node.type === "paragraph"}
-	<p {...dirProp}>{@render children()}</p>
+	<p {...dirProp} {...attrs}>{@render children()}</p>
 {:else if node.type === "preformatted"}
-	<pre>{@render children()}</pre>
+	<pre {...attrs}>{@render children()}</pre>
 {:else if node.type === "strong"}
-	<strong>{@render children()}</strong>
+	<strong {...attrs}>{@render children()}</strong>
 {:else if node.type === "em"}
-	<em>{@render children()}</em>
+	<em {...attrs}>{@render children()}</em>
 {:else if node.type === "list-item"}
-	<li {...dirProp}>{@render children()}</li>
+	<li {...dirProp} {...attrs}>{@render children()}</li>
 {:else if node.type === "o-list-item"}
-	<li {...dirProp}>{@render children()}</li>
+	<li {...dirProp} {...attrs}>{@render children()}</li>
 {:else if node.type === "group-list-item"}
-	<ul>{@render children()}</ul>
+	<ul {...attrs}>{@render children()}</ul>
 {:else if node.type === "group-o-list-item"}
-	<ol>{@render children()}</ol>
+	<ol {...attrs}>{@render children()}</ol>
 {:else if node.type === "image"}
 	<p class="block-img">
-		<PrismicImage field={node} />
+		{#if node.linkTo}
+			<PrismicLink field={node.linkTo}>
+				<PrismicImage field={node} {...attrs} />
+			</PrismicLink>
+		{:else}
+			<PrismicImage field={node} {...attrs} />
+		{/if}
 	</p>
 {:else if node.type === "embed"}
-	<PrismicEmbed field={node.oembed} />
+	<PrismicEmbed field={node.oembed} {...attrs} />
 {:else if node.type === "hyperlink"}
-	<PrismicLink field={node.data}>{@render children()}</PrismicLink>
+	<PrismicLink field={node.data} {...attrs}>{@render children()}</PrismicLink>
 {:else if node.type === "label"}
-	<span class={node.data.label}>{@render children()}</span>
+	<span class={node.data.label} {...attrs}>{@render children()}</span>
 {:else}
 	{#each node.text.split("\n") as line, index (index)}
 		{#if index > 0}<br />{/if}{line}

package/src/PrismicRichText/Serialize.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
 	import type { asTree } from "@prismicio/client/richtext";
 
-	import type { RichTextComponent, RichTextComponents } from "../types";
+	import type {
+		ComponentShorthand,
+		RichTextComponent,
+		RichTextComponents,
+	} from "../types";
 
 	import DefaultComponent from "./DefaultComponent.svelte";
 	import Serialize from "./Serialize.svelte";
@@ -21,22 +25,27 @@
 	} 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)
-			] as RichTextComponent) || DefaultComponent
-		);
+		return components[
+			CHILD_TYPE_RENAMES[child.type as keyof typeof CHILD_TYPE_RENAMES] ||
+				(child.type as keyof typeof components)
+		] as RichTextComponent | ComponentShorthand;
 	}
 </script>
 
 {#each children as child (child.key)}
 	{@const Component = getComponent(child)}
-	<Component node={child.node}>
+	{#snippet serializedChildren()}
 		<!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
 		{#if child.children.length > 0}<Serialize
 				children={child.children}
 				{components}
-			/>{/if}</Component
-	>
+			/>{/if}
+	{/snippet}
+	{#if typeof Component === "function"}
+		<Component node={child.node}>{@render serializedChildren()}</Component>
+	{:else}
+		<DefaultComponent {...Component} node={child.node}
+			>{@render serializedChildren()}</DefaultComponent
+		>
+	{/if}
 {/each}

package/src/PrismicTable.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import {
+		type TableField,
+		TableFieldBody,
+		TableFieldBodyRow,
+		TableFieldDataCell,
+		TableFieldHead,
+		TableFieldHeadRow,
+		TableFieldHeaderCell,
+		isFilled,
+	} from "@prismicio/client";
+	import { type Component } from "svelte";
+
+	import { type RichTextComponents, type TableComponents } from "./types";
+
+	import PrismicRichText from "./PrismicRichText/PrismicRichText.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 & RichTextComponents;
+
+		/**
+		 * 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;
+	const Thead = components.thead;
+	const Tbody = components.tbody;
+	const Tr = components.tr;
+	const Th = components.th;
+	const Td = components.td;
+</script>
+
+{#snippet thead(head: TableFieldHead)}
+	{#if typeof Thead === "function"}<Thead {head}
+			>{#each head.rows as row (row.key)}{@render tr(row)}{/each}</Thead
+		>{:else}<thead {...Thead}
+			>{#each head.rows as row (row.key)}{@render tr(row)}{/each}</thead
+		>{/if}
+{/snippet}
+
+{#snippet tbody(body: TableFieldBody)}
+	{#if typeof Tbody === "function"}<Tbody {body}
+			>{#each body.rows as row (row.key)}{@render tr(row)}{/each}</Tbody
+		>{:else}<tbody {...Tbody}
+			>{#each body.rows as row (row.key)}{@render tr(row)}{/each}</tbody
+		>{/if}
+{/snippet}
+
+{#snippet tr(row: TableFieldHeadRow | TableFieldBodyRow)}
+	{#if typeof Tr === "function"}<Tr {row}
+			>{#each row.cells as cell (cell.key)}{#if cell.type === "header"}{@render th(
+						cell,
+					)}{:else}{@render td(cell)}{/if}{/each}</Tr
+		>{:else}<tr {...Tr}
+			>{#each row.cells as cell (cell.key)}{#if cell.type === "header"}{@render th(
+						cell,
+					)}{:else}{@render td(cell)}{/if}{/each}</tr
+		>{/if}
+{/snippet}
+
+{#snippet th(cell: TableFieldHeaderCell)}
+	{#if typeof Th === "function"}<Th {cell}
+			><PrismicRichText field={cell.content} {components} /></Th
+		>{:else}<th {...Th}
+			><PrismicRichText field={cell.content} {components} /></th
+		>{/if}
+{/snippet}
+
+{#snippet td(cell: TableFieldDataCell)}
+	{#if typeof Td === "function"}<Td {cell}
+			><PrismicRichText field={cell.content} {components} /></Td
+		>{:else}<td {...Td}
+			><PrismicRichText field={cell.content} {components} /></td
+		>{/if}
+{/snippet}
+
+<!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
+{#if isFilled.table(field)}
+	{#if typeof Table === "function"}<Table table={field}
+			>{#if field?.head}{@render thead(field.head)}{/if}{@render tbody(
+				field.body,
+			)}</Table
+		>{:else}<table {...Table}>
+			{#if field?.head}{@render thead(field.head)}{/if}{@render tbody(
+				field.body,
+			)}
+		</table>{/if}
+{:else if Fallback}
+	<Fallback />
+{/if}

package/src/index.ts

@@ -1,10 +1,10 @@
-import { RichTextComponents } from "./types";
+import type { RichTextComponents } from "./types";
 
 export { default as PrismicEmbed } from "./PrismicEmbed.svelte";
 export { default as PrismicImage } from "./PrismicImage.svelte";
 export { default as PrismicLink } from "./PrismicLink.svelte";
 export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.svelte";
-export { default as PrismicTable } from "./PrismicTable/PrismicTable.svelte";
+export { default as PrismicTable } from "./PrismicTable.svelte";
 export { default as PrismicText } from "./PrismicText.svelte";
 export { default as SliceZone } from "./SliceZone/SliceZone.svelte";
 

package/src/kit/enableAutoPreviews.ts

@@ -1,5 +1,5 @@
 import * as prismic from "@prismicio/client";
-import { Cookies } from "@sveltejs/kit";
+import type { Cookies } from "@sveltejs/kit";
 
 /**
  * Configuration for `enableAutoPreviews`.

package/src/kit/redirectToPreviewURL.ts

@@ -1,5 +1,5 @@
 import * as prismic from "@prismicio/client";
-import { Cookies } from "@sveltejs/kit";
+import type { Cookies } from "@sveltejs/kit";
 
 export type RedirectToPreviewURLConfig = {
 	/**

package/src/kit/types.ts

@@ -1,5 +1,5 @@
-import { ClientConfig } from "@prismicio/client";
-import { Cookies } from "@sveltejs/kit";
+import type { ClientConfig } from "@prismicio/client";
+import type { Cookies } from "@sveltejs/kit";
 
 /**
  * Configuration for creating a Prismic client with automatic preview support in

package/src/types.ts

@@ -29,26 +29,37 @@ import type {
 	TableFieldHeaderCell,
 } from "@prismicio/client";
 import type { Component, Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+
+/**
+ * A shorthand definition for `<PrismicRichText />` component types.
+ */
+export type ComponentShorthand = {
+	/**
+	 * The HTML element type rendered for this node type.
+	 */
+	as?: string;
+} & HTMLAttributes<HTMLElement>;
 
 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>;
+	heading1?: RichTextComponent<RTHeading1Node> | ComponentShorthand;
+	heading2?: RichTextComponent<RTHeading2Node> | ComponentShorthand;
+	heading3?: RichTextComponent<RTHeading3Node> | ComponentShorthand;
+	heading4?: RichTextComponent<RTHeading4Node> | ComponentShorthand;
+	heading5?: RichTextComponent<RTHeading5Node> | ComponentShorthand;
+	heading6?: RichTextComponent<RTHeading6Node> | ComponentShorthand;
+	paragraph?: RichTextComponent<RTParagraphNode> | ComponentShorthand;
+	preformatted?: RichTextComponent<RTPreformattedNode> | ComponentShorthand;
+	strong?: RichTextComponent<RTStrongNode> | ComponentShorthand;
+	em?: RichTextComponent<RTEmNode> | ComponentShorthand;
+	listItem?: RichTextComponent<RTListItemNode> | ComponentShorthand;
+	oListItem?: RichTextComponent<RTOListItemNode> | ComponentShorthand;
+	list?: RichTextComponent<RTListNode> | ComponentShorthand;
+	oList?: RichTextComponent<RTOListNode> | ComponentShorthand;
+	image?: RichTextComponent<RTImageNode> | HTMLAttributes<HTMLImageElement>;
+	embed?: RichTextComponent<RTEmbedNode> | HTMLAttributes<HTMLDivElement>;
+	hyperlink?: RichTextComponent<RTLinkNode> | HTMLAttributes<HTMLAnchorElement>;
+	label?: RichTextComponent<RTLabelNode> | HTMLAttributes<HTMLSpanElement>;
 	span?: RichTextComponent<RTSpanNode>;
 };
 
@@ -63,30 +74,42 @@ export type RichTextComponentProps<TNode extends RTAnyNode = RTAnyNode> = {
 
 // Define the type for the components prop
 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;
-	}>;
+	table?:
+		| Component<{
+				table: TableField<"filled">;
+				children: Snippet;
+		  }>
+		| HTMLAttributes<HTMLTableElement>;
+	thead?:
+		| Component<{
+				head: TableFieldHead;
+				children: Snippet;
+		  }>
+		| HTMLAttributes<HTMLTableSectionElement>;
+	tbody?:
+		| Component<{
+				body: TableFieldBody;
+				children: Snippet;
+		  }>
+		| HTMLAttributes<HTMLTableSectionElement>;
+	tr?:
+		| Component<{
+				row: TableFieldHeadRow | TableFieldBodyRow;
+				children: Snippet;
+		  }>
+		| HTMLAttributes<HTMLTableRowElement>;
+	th?:
+		| Component<{
+				cell: TableFieldHeaderCell;
+				children: Snippet;
+		  }>
+		| HTMLAttributes<HTMLTableCellElement>;
+	td?:
+		| Component<{
+				cell: TableFieldDataCell;
+				children: Snippet;
+		  }>
+		| HTMLAttributes<HTMLTableCellElement>;
 };
 
 /**

package/dist/PrismicTable/DefaultComponent.svelte

@@ -1,14 +0,0 @@
-<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}>{@render children()}</svelte:element>

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

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

package/dist/PrismicTable/PrismicTable.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-	import { type TableField, isFilled } from "@prismicio/client";
-	import { type Component } from "svelte";
-
-	import type { RichTextComponents, 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 & RichTextComponents;
-
-		/**
-		 * 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 type="table" table={field}>
-		{#if field?.head}
-			<Thead type="thead" head={field.head}>
-				{#each field.head.rows as row (row.key)}
-					<Tr type="tr" {row}>
-						{#each row.cells as cell (cell.key)}
-							<Th type="th" {cell}>
-								<PrismicRichText field={cell.content} {components} /></Th
-							>{/each}</Tr
-					>{/each}</Thead
-			>{/if}<Tbody type="tbody" body={field.body}>
-			{#each field.body.rows as row (row.key)}
-				<Tr type="tr" {row}>
-					{#each row.cells as cell (cell.key)}
-						{#if cell.type === "header"}
-							<Th type="th" {cell}>
-								<PrismicRichText field={cell.content} {components} /></Th
-							>{:else}<Td type="td" {cell}>
-								<PrismicRichText field={cell.content} {components} /></Td
-							>{/if}{/each}</Tr
-				>
-			{/each}
-		</Tbody>
-	</Table>
-{:else if Fallback}
-	<Fallback />
-{/if}

package/src/PrismicTable/DefaultComponent.svelte

@@ -1,14 +0,0 @@
-<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}>{@render children()}</svelte:element>

package/src/PrismicTable/PrismicTable.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-	import { type TableField, isFilled } from "@prismicio/client";
-	import { type Component } from "svelte";
-
-	import type { RichTextComponents, 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 & RichTextComponents;
-
-		/**
-		 * 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 type="table" table={field}>
-		{#if field?.head}
-			<Thead type="thead" head={field.head}>
-				{#each field.head.rows as row (row.key)}
-					<Tr type="tr" {row}>
-						{#each row.cells as cell (cell.key)}
-							<Th type="th" {cell}>
-								<PrismicRichText field={cell.content} {components} /></Th
-							>{/each}</Tr
-					>{/each}</Thead
-			>{/if}<Tbody type="tbody" body={field.body}>
-			{#each field.body.rows as row (row.key)}
-				<Tr type="tr" {row}>
-					{#each row.cells as cell (cell.key)}
-						{#if cell.type === "header"}
-							<Th type="th" {cell}>
-								<PrismicRichText field={cell.content} {components} /></Th
-							>{:else}<Td type="td" {cell}>
-								<PrismicRichText field={cell.content} {components} /></Td
-							>{/if}{/each}</Tr
-				>
-			{/each}
-		</Tbody>
-	</Table>
-{:else if Fallback}
-	<Fallback />
-{/if}