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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/svelte",
-	"version": "1.6.0-alpha.0",
+	"version": "2.0.0-alpha.1",
 	"description": "Svelte components to present Prismic content.",
 	"keywords": [
 		"typescript",
@@ -47,53 +47,56 @@
 		"build": "svelte-package --input ./src",
 		"dev": "svelte-package --input ./src --watch",
 		"format": "prettier --write --plugin prettier-plugin-svelte .",
-		"lint": "eslint --ext .js,.ts .",
+		"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 minor --prerelease alpha && git push --follow-tags && npm run build && npm publish --tag alpha",
-		"release:alpha:dry": "standard-version --release-as minor --prerelease alpha --dry-run",
+		"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",
-		"types": "vitest --typecheck.only --run && tsc --noEmit",
+		"types": "tsc --noEmit",
 		"types:watch": "vitest watch --typecheck.only",
 		"unit": "vitest run --coverage",
 		"unit:watch": "vitest watch"
 	},
 	"dependencies": {
-		"@prismicio/client": "^7.17.2",
-		"esm-env": "^1.0.0"
+		"esm-env": "^1.2.2"
 	},
 	"devDependencies": {
+		"@eslint/compat": "^1.2.9",
+		"@eslint/js": "^9.27.0",
+		"@prismicio/client": "^7.17.2",
 		"@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": "^3.1.2",
-		"@testing-library/svelte": "^4.2.3",
-		"@trivago/prettier-plugin-sort-imports": "^4.3.0",
-		"@typescript-eslint/eslint-plugin": "^6.21.0",
-		"@typescript-eslint/parser": "^6.21.0",
-		"@vitest/coverage-v8": "^1.6.1",
-		"eslint": "^8.57.1",
-		"eslint-config-prettier": "^9.1.0",
+		"@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": "^2.46.1",
-		"eslint-plugin-tsdoc": "^0.2.17",
-		"happy-dom": "^12.10.3",
+		"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.3.3",
+		"prettier-plugin-svelte": "^3.4.0",
 		"size-limit": "^11.2.0",
 		"standard-version": "^9.5.0",
-		"svelte": "^4.2.19",
+		"svelte": "^5.30.1",
 		"typescript": "^5.8.3",
-		"vitest": "^1.6.1"
+		"typescript-eslint": "^8.32.1",
+		"vitest": "^3.1.3"
 	},
 	"peerDependencies": {
 		"@prismicio/client": ">=7",
-		"@sveltejs/kit": ">=1",
-		"svelte": ">=4"
+		"@sveltejs/kit": "^2",
+		"svelte": "^5"
 	},
 	"peerDependenciesMeta": {
 		"@sveltejs/kit": {
@@ -101,7 +104,7 @@
 		}
 	},
 	"engines": {
-		"node": ">=14.15.0"
+		"node": ">=20"
 	},
 	"publishConfig": {
 		"access": "public"

package/src/PrismicEmbed.svelte

@@ -2,10 +2,14 @@
 	import type { EmbedField } from "@prismicio/client";
 	import { isFilled } from "@prismicio/client";
 
-	/**
-	 * An Embed field from Prismic.
-	 */
-	export let field: EmbedField;
+	type Props = {
+		/**
+		 * An Embed field from Prismic.
+		 */
+		field: EmbedField;
+	};
+
+	const { field }: Props = $props();
 </script>
 
 <!--

package/src/PrismicImage.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import {
-		asImageWidthSrcSet,
+		type ImageFieldImage,
 		asImagePixelDensitySrcSet,
+		asImageWidthSrcSet,
 		isFilled,
-		type ImageFieldImage,
 	} from "@prismicio/client";
 	import type { ImgixURLParams } from "imgix-url-builder";
 	import type { HTMLImgAttributes } from "svelte/elements";
 
-	type $$Props = Omit<HTMLImgAttributes, "src" | "srcset" | "alt"> & {
+	type Props = Omit<HTMLImgAttributes, "src" | "srcset" | "alt"> & {
 		/**
 		 * The Prismic image field or thumbnail to render.
 		 */
@@ -71,73 +71,69 @@
 			  }
 		);
 
-	export let field: $$Props["field"];
-	export let imgixParams: $$Props["imgixParams"] = {};
-	export let alt: $$Props["alt"] = undefined;
-	export let fallbackAlt: $$Props["fallbackAlt"] = undefined;
-	export let width: $$Props["width"] = undefined;
-	export let height: $$Props["width"] = undefined;
-	export let widths: $$Props["widths"] = undefined;
-	export let pixelDensities: $$Props["pixelDensities"] = undefined;
-
-	let src: string | undefined = undefined;
-	let srcset: string | undefined = undefined;
-	let resolvedWidth: $$Props["width"] = undefined;
-	let resolvedHeight: $$Props["height"] = undefined;
-
-	$: {
-		if (isFilled.imageThumbnail(field)) {
-			const castInt = (
-				input: string | number | null | undefined,
-			): number | null | undefined => {
-				if (
-					typeof input === "number" ||
-					typeof input === "undefined" ||
-					input === null
-				) {
-					return input;
-				} else {
-					const parsed = Number.parseInt(input);
-
-					if (Number.isNaN(parsed)) {
-						return undefined;
-					} else {
-						return parsed;
-					}
-				}
-			};
-
-			const ar = field.dimensions.width / field.dimensions.height;
-
-			const castedWidth = castInt(width);
-			const castedHeight = castInt(height);
-
-			resolvedWidth = castedWidth ?? field.dimensions.width;
-			resolvedHeight = castedHeight ?? field.dimensions.height;
-
-			if (castedWidth != null && castedHeight == null) {
-				resolvedHeight = castedWidth / ar;
-			} else if (castedWidth == null && castedHeight != null) {
-				resolvedWidth = castedHeight * ar;
-			}
+	const {
+		field,
+		imgixParams = {},
+		alt,
+		fallbackAlt,
+		width,
+		height,
+		widths,
+		pixelDensities,
+		...restProps
+	}: Props = $props();
+
+	const { resolvedWidth, resolvedHeight } = $derived.by(() => {
+		if (!isFilled.imageThumbnail(field))
+			return { resolvedWidth: undefined, resolvedHeight: undefined };
+
+		const ar = field.dimensions.width / field.dimensions.height;
+
+		let resolvedWidth = castInt(width) ?? field.dimensions.width;
+		let resolvedHeight = castInt(height) ?? field.dimensions.height;
+		if (resolvedWidth != null && resolvedHeight == null) {
+			resolvedHeight = resolvedWidth / ar;
+		} else if (resolvedWidth == null && resolvedHeight != null) {
+			resolvedWidth = resolvedHeight * ar;
+		}
 
-			if (widths || !pixelDensities) {
-				const res = asImageWidthSrcSet(field, {
-					...imgixParams,
-					widths: widths === "defaults" ? undefined : widths,
-				});
-
-				src = res.src;
-				srcset = res.srcset;
-			} else if (pixelDensities) {
-				const res = asImagePixelDensitySrcSet(field, {
-					...imgixParams,
-					pixelDensities:
-						pixelDensities === "defaults" ? undefined : pixelDensities,
-				} as ImgixURLParams);
+		return { resolvedWidth, resolvedHeight };
+	});
+
+	const { src, srcset } = $derived.by(() => {
+		if (!isFilled.imageThumbnail(field))
+			return { src: undefined, srcset: undefined };
+
+		if (pixelDensities) {
+			return asImagePixelDensitySrcSet(field, {
+				...imgixParams,
+				pixelDensities:
+					pixelDensities === "defaults" ? undefined : pixelDensities,
+			} as ImgixURLParams);
+		}
 
-				src = res.src;
-				srcset = res.srcset;
+		return asImageWidthSrcSet(field, {
+			...imgixParams,
+			widths: widths === "defaults" ? undefined : widths,
+		});
+	});
+
+	function castInt(
+		input: string | number | null | undefined,
+	): number | null | undefined {
+		if (
+			typeof input === "number" ||
+			typeof input === "undefined" ||
+			input === null
+		) {
+			return input;
+		} else {
+			const parsed = Number.parseInt(input);
+
+			if (Number.isNaN(parsed)) {
+				return undefined;
+			} else {
+				return parsed;
 			}
 		}
 	}
@@ -163,6 +159,6 @@
 		alt={alt ?? (field.alt || fallbackAlt)}
 		width={resolvedWidth}
 		height={resolvedHeight}
-		{...$$restProps}
+		{...restProps}
 	/>
 {/if}

package/src/PrismicLink.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import {
-		asLinkAttrs,
 		type AsLinkAttrsConfig,
 		type LinkField,
 		type PrismicDocument,
+		asLinkAttrs,
 	} from "@prismicio/client";
 	import type { HTMLAnchorAttributes } from "svelte/elements";
 
-	type $$Props = Omit<HTMLAnchorAttributes, "rel" | "href"> & {
+	type Props = Omit<HTMLAnchorAttributes, "rel" | "href"> & {
 		/**
 		 * The `rel` attribute for the link. By default, `"noreferrer"` is provided
 		 * if the link's URL is external. This prop can be provided a function to
@@ -20,27 +20,37 @@
 					 * A Prismic link field, content relationship field, or link to media
 					 * field.
 					 */
-					field: LinkField;
+					field: LinkField | null | undefined;
 					document?: never;
+					href?: never;
 			  }
 			| {
 					/**
 					 * A Prismic document.
 					 */
-					document: PrismicDocument;
+					document: PrismicDocument | null | undefined;
+					field?: never;
+					href?: never;
+			  }
+			| {
+					href: HTMLAnchorAttributes["href"];
+					document: never;
 					field?: never;
 			  }
 		);
 
-	export let field: $$Props["field"] = undefined;
-	export let document: $$Props["document"] = undefined;
-	export let rel: $$Props["rel"] = undefined;
+	const { field, document, rel, children, ...restProps }: Props = $props();
 
-	$: linkAttrs = asLinkAttrs(field ?? document, {
-		rel: typeof rel === "function" ? rel : undefined,
-	});
+	const linkAttrs = $derived(
+		asLinkAttrs(field ?? document, {
+			rel: typeof rel === "function" ? rel : undefined,
+		}),
+	);
+	const href = $derived(
+		("href" in restProps ? restProps.href : linkAttrs.href) || "",
+	);
 
-	$: resolvedRel = typeof rel === "string" ? rel : linkAttrs.rel;
+	const resolvedRel = $derived(typeof rel === "string" ? rel : linkAttrs.rel);
 </script>
 
 <!--
@@ -53,12 +63,6 @@
 	```
 -->
 
-<a
-	{...linkAttrs}
-	rel={resolvedRel}
-	href={linkAttrs.href}
-	on:click
-	{...$$restProps}
->
-	<slot>{field?.text}</slot>
+<a {...linkAttrs} rel={resolvedRel} {href} {...restProps}>
+	{#if children}{@render children?.()}{:else}{field?.text}{/if}
 </a>

package/src/PrismicRichText/DefaultComponent.svelte

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

package/src/PrismicRichText/PrismicRichText.svelte

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

package/src/PrismicRichText/Serialize.svelte

@@ -1,12 +1,17 @@
 <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";
 
-	export let components: SvelteRichTextSerializer = {};
-	export let children: ReturnType<typeof asTree>["children"];
+	type Props = {
+		components: RichTextComponents;
+		children: ReturnType<typeof asTree>["children"];
+	};
+
+	const { components, children }: Props = $props();
 
 	const CHILD_TYPE_RENAMES = {
 		"list-item": "listItem",
@@ -17,20 +22,21 @@
 
 	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>
 
-{#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/src/PrismicTable/DefaultComponent.svelte

@@ -1,6 +1,14 @@
 <script lang="ts">
+	import type { Snippet } from "svelte";
+
 	import type { TableComponents } from "../types";
-	export let type: keyof TableComponents;
+
+	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/src/PrismicTable/PrismicTable.svelte

@@ -1,73 +1,67 @@
 <script lang="ts">
-	import { isFilled, type TableField } from "@prismicio/client";
-	import { type ComponentType } from "svelte";
+	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 type { SvelteRichTextSerializer, TableComponents } from "../types";
-	import DefaultComponent from "./DefaultComponent.svelte";
 
-	/**
-	 * The Prismic table field to render.
-	 */
-	export let field: TableField;
+	import DefaultComponent from "./DefaultComponent.svelte";
 
-	/**
-	 * An object that maps a rich text block type to a Svelte component.
-	 */
-	export let components: TableComponents & SvelteRichTextSerializer = {};
+	type Props = {
+		/**
+		 * The Prismic table field to render.
+		 */
+		field: TableField;
 
-	/**
-	 * The component rendered when the field is empty. If a fallback is not given,
-	 * `null` will be rendered.
-	 */
-	export let fallback: ComponentType | undefined = undefined;
+		/**
+		 * An object that maps a rich text block type to a Svelte component.
+		 */
+		components?: TableComponents & RichTextComponents;
 
-	/**
-	 * This function creates the needed table components, prioritizing any user
-	 * provided custom components and falling back to the default components.
-	 */
-	const createComponent = (type: keyof TableComponents) => {
-		const Component: ComponentType = components[type] ?? DefaultComponent;
-		return {
-			Component,
-			props: Component === DefaultComponent ? { type } : {},
-		};
+		/**
+		 * The component rendered when the field is empty. If a fallback is not
+		 * given, `null` will be rendered.
+		 */
+		fallback?: Component;
 	};
 
-	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");
+	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}