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

package/README.md

@@ -51,7 +51,7 @@ For more clarity on this project and its structure you can also check out the de
 ## License
 
 ```
-Copyright 2013-2023 Prismic <contact@prismic.io> (https://prismic.io)
+Copyright 2013-2025 Prismic <contact@prismic.io> (https://prismic.io)
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

package/dist/PrismicEmbed.svelte

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

package/dist/PrismicEmbed.svelte.d.ts

@@ -1,21 +1,10 @@
-import { SvelteComponent } from "svelte";
 import type { EmbedField } from "@prismicio/client";
-declare const __propDef: {
-    props: {
-        /**
-             * An Embed field from Prismic.
-             */ field: EmbedField;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+type Props = {
+    /**
+     * An Embed field from Prismic.
+     */
+    field: EmbedField;
 };
-export type PrismicEmbedProps = typeof __propDef.props;
-export type PrismicEmbedEvents = typeof __propDef.events;
-export type PrismicEmbedSlots = typeof __propDef.slots;
 /**
  * Component to render a Prismic embed field.
  *
@@ -24,6 +13,6 @@ export type PrismicEmbedSlots = typeof __propDef.slots;
  * 	<PrismicEmbed field={document.data.example_embed} />
  * ```
  */
-export default class PrismicEmbed extends SvelteComponent<PrismicEmbedProps, PrismicEmbedEvents, PrismicEmbedSlots> {
-}
-export {};
+declare const PrismicEmbed: import("svelte").Component<Props, {}, "">;
+type PrismicEmbed = ReturnType<typeof PrismicEmbed>;
+export default PrismicEmbed;

package/dist/PrismicImage.svelte

@@ -1,61 +1,142 @@
-<script>import {
-  asImageWidthSrcSet,
-  asImagePixelDensitySrcSet,
-  isFilled
-} from "@prismicio/client";
-export let field;
-export let imgixParams = {};
-export let alt = void 0;
-export let fallbackAlt = void 0;
-export let width = void 0;
-export let height = void 0;
-export let widths = void 0;
-export let pixelDensities = void 0;
-let src = void 0;
-let srcset = void 0;
-let resolvedWidth = void 0;
-let resolvedHeight = void 0;
-$: {
-  if (isFilled.imageThumbnail(field)) {
-    const castInt = (input) => {
-      if (typeof input === "number" || typeof input === "undefined" || input === null) {
-        return input;
-      } else {
-        const parsed = Number.parseInt(input);
-        if (Number.isNaN(parsed)) {
-          return void 0;
-        } 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;
-    }
-    if (widths || !pixelDensities) {
-      const res = asImageWidthSrcSet(field, {
-        ...imgixParams,
-        widths: widths === "defaults" ? void 0 : widths
-      });
-      src = res.src;
-      srcset = res.srcset;
-    } else if (pixelDensities) {
-      const res = asImagePixelDensitySrcSet(field, {
-        ...imgixParams,
-        pixelDensities: pixelDensities === "defaults" ? void 0 : pixelDensities
-      });
-      src = res.src;
-      srcset = res.srcset;
-    }
-  }
-}
+<script lang="ts">
+	import {
+		type ImageFieldImage,
+		asImagePixelDensitySrcSet,
+		asImageWidthSrcSet,
+		isFilled,
+	} from "@prismicio/client";
+	import type { ImgixURLParams } from "imgix-url-builder";
+	import type { HTMLImgAttributes } from "svelte/elements";
+
+	type Props = Omit<HTMLImgAttributes, "src" | "srcset" | "alt"> & {
+		/**
+		 * The Prismic image field or thumbnail to render.
+		 */
+		field: ImageFieldImage | null | undefined;
+
+		/**
+		 * An object of Imgix URL API parameters to transform the image.
+		 *
+		 * See: https://docs.imgix.com/apis/rendering
+		 */
+		imgixParams?: ImgixURLParams;
+
+		/**
+		 * Declare an image as decorative by providing `alt=""`.
+		 *
+		 * See:
+		 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+		 */
+		alt?: "";
+
+		/**
+		 * Declare an image as decorative only if the Image field does not have
+		 * alternative text by providing `fallbackAlt=""`.
+		 *
+		 * See:
+		 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+		 */
+		fallbackAlt?: "";
+	} & (
+			| {
+					/**
+					 * Widths used to build a `srcset` value for the Image field.
+					 *
+					 * If a `widths` prop is not given or `"defaults"` is passed, the
+					 * following widths will be used: 640, 750, 828, 1080, 1200, 1920,
+					 * 2048, 3840.
+					 *
+					 * If the Image field contains responsive views, each responsive view
+					 * can be used as a width in the resulting `srcset` by passing
+					 * `"thumbnails"` as the `widths` prop.
+					 */
+					widths?:
+						| NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"]
+						| "defaults";
+					pixelDensities?: never;
+			  }
+			| {
+					/**
+					 * Pixel densities used to build a `srcset` value for the Image field.
+					 *
+					 * If a `pixelDensities` prop is passed `"defaults"`, the following
+					 * pixel densities will be used: 1, 2, 3.
+					 */
+					pixelDensities:
+						| NonNullable<
+								Parameters<typeof asImagePixelDensitySrcSet>[1]
+						  >["pixelDensities"]
+						| "defaults";
+					widths?: never;
+			  }
+		);
+
+	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;
+		}
+
+		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);
+		}
+
+		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;
+			}
+		}
+	}
 </script>
 
 <!--
@@ -78,6 +159,6 @@ $: {
 		alt={alt ?? (field.alt || fallbackAlt)}
 		width={resolvedWidth}
 		height={resolvedHeight}
-		{...$$restProps}
+		{...restProps}
 	/>
 {/if}

package/dist/PrismicImage.svelte.d.ts

@@ -1,68 +1,56 @@
-import { SvelteComponent } from "svelte";
-import { asImageWidthSrcSet, asImagePixelDensitySrcSet, type ImageFieldImage } from "@prismicio/client";
+import { type ImageFieldImage, asImagePixelDensitySrcSet, asImageWidthSrcSet } from "@prismicio/client";
 import type { ImgixURLParams } from "imgix-url-builder";
 import type { HTMLImgAttributes } from "svelte/elements";
-declare const __propDef: {
-    props: Omit<HTMLImgAttributes, "src" | "srcset" | "alt"> & ({
-        /**
-         * The Prismic image field or thumbnail to render.
-         */
-        field: ImageFieldImage | null | undefined;
-        /**
-         * An object of Imgix URL API parameters to transform the image.
-         *
-         * See: https://docs.imgix.com/apis/rendering
-         */
-        imgixParams?: ImgixURLParams;
-        /**
-         * Declare an image as decorative by providing `alt=""`.
-         *
-         * See:
-         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
-         */
-        alt?: "";
-        /**
-         * Declare an image as decorative only if the Image field does not have
-         * alternative text by providing `fallbackAlt=""`.
-         *
-         * See:
-         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
-         */
-        fallbackAlt?: "";
-    } & ({
-        /**
-         * Widths used to build a `srcset` value for the Image field.
-         *
-         * If a `widths` prop is not given or `"defaults"` is passed, the
-         * following widths will be used: 640, 750, 828, 1080, 1200, 1920,
-         * 2048, 3840.
-         *
-         * If the Image field contains responsive views, each responsive view
-         * can be used as a width in the resulting `srcset` by passing
-         * `"thumbnails"` as the `widths` prop.
-         */
-        widths?: NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"] | "defaults";
-        pixelDensities?: never;
-    } | {
-        /**
-         * Pixel densities used to build a `srcset` value for the Image field.
-         *
-         * If a `pixelDensities` prop is passed `"defaults"`, the following
-         * pixel densities will be used: 1, 2, 3.
-         */
-        pixelDensities: NonNullable<Parameters<typeof asImagePixelDensitySrcSet>[1]>["pixelDensities"] | "defaults";
-        widths?: never;
-    }));
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PrismicImageProps = typeof __propDef.props;
-export type PrismicImageEvents = typeof __propDef.events;
-export type PrismicImageSlots = typeof __propDef.slots;
+type Props = Omit<HTMLImgAttributes, "src" | "srcset" | "alt"> & {
+    /**
+     * The Prismic image field or thumbnail to render.
+     */
+    field: ImageFieldImage | null | undefined;
+    /**
+     * An object of Imgix URL API parameters to transform the image.
+     *
+     * See: https://docs.imgix.com/apis/rendering
+     */
+    imgixParams?: ImgixURLParams;
+    /**
+     * Declare an image as decorative by providing `alt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    alt?: "";
+    /**
+     * Declare an image as decorative only if the Image field does not have
+     * alternative text by providing `fallbackAlt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    fallbackAlt?: "";
+} & ({
+    /**
+     * Widths used to build a `srcset` value for the Image field.
+     *
+     * If a `widths` prop is not given or `"defaults"` is passed, the
+     * following widths will be used: 640, 750, 828, 1080, 1200, 1920,
+     * 2048, 3840.
+     *
+     * If the Image field contains responsive views, each responsive view
+     * can be used as a width in the resulting `srcset` by passing
+     * `"thumbnails"` as the `widths` prop.
+     */
+    widths?: NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"] | "defaults";
+    pixelDensities?: never;
+} | {
+    /**
+     * Pixel densities used to build a `srcset` value for the Image field.
+     *
+     * If a `pixelDensities` prop is passed `"defaults"`, the following
+     * pixel densities will be used: 1, 2, 3.
+     */
+    pixelDensities: NonNullable<Parameters<typeof asImagePixelDensitySrcSet>[1]>["pixelDensities"] | "defaults";
+    widths?: never;
+});
 /**
  * Component to render a Prismic image field as an `img` element with `width`, `height`, `alt`, `src`, and `srcset` attributes.
  *
@@ -74,6 +62,6 @@ export type PrismicImageSlots = typeof __propDef.slots;
  * 	/>
  * ```
  */
-export default class PrismicImage extends SvelteComponent<PrismicImageProps, PrismicImageEvents, PrismicImageSlots> {
-}
-export {};
+declare const PrismicImage: import("svelte").Component<Props, {}, "">;
+type PrismicImage = ReturnType<typeof PrismicImage>;
+export default PrismicImage;

package/dist/PrismicLink.svelte

@@ -1,13 +1,56 @@
-<script>import {
-  asLinkAttrs
-} from "@prismicio/client";
-export let field = void 0;
-export let document = void 0;
-export let rel = void 0;
-$: linkAttrs = asLinkAttrs(field ?? document, {
-  rel: typeof rel === "function" ? rel : void 0
-});
-$: resolvedRel = typeof rel === "string" ? rel : linkAttrs.rel;
+<script lang="ts">
+	import {
+		type AsLinkAttrsConfig,
+		type LinkField,
+		type PrismicDocument,
+		asLinkAttrs,
+	} from "@prismicio/client";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+
+	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
+		 * use the link's metadata to determine the `rel` value.
+		 */
+		rel?: string | AsLinkAttrsConfig["rel"];
+	} & (
+			| {
+					/**
+					 * A Prismic link field, content relationship field, or link to media
+					 * field.
+					 */
+					field: LinkField | null | undefined;
+					document?: never;
+					href?: never;
+			  }
+			| {
+					/**
+					 * A Prismic document.
+					 */
+					document: PrismicDocument | null | undefined;
+					field?: never;
+					href?: never;
+			  }
+			| {
+					href: HTMLAnchorAttributes["href"];
+					document: never;
+					field?: never;
+			  }
+		);
+
+	const { field, document, rel, children, ...restProps }: Props = $props();
+
+	const linkAttrs = $derived(
+		asLinkAttrs(field ?? document, {
+			rel: typeof rel === "function" ? rel : undefined,
+		}),
+	);
+	const href = $derived(
+		("href" in restProps ? restProps.href : linkAttrs.href) || "",
+	);
+
+	const resolvedRel = $derived(typeof rel === "string" ? rel : linkAttrs.rel);
 </script>
 
 <!--
@@ -20,12 +63,6 @@ $: resolvedRel = typeof rel === "string" ? rel : linkAttrs.rel;
 	```
 -->
 
-<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/dist/PrismicLink.svelte.d.ts

@@ -1,42 +1,32 @@
-import { SvelteComponent } from "svelte";
 import { type AsLinkAttrsConfig, type LinkField, type PrismicDocument } from "@prismicio/client";
 import type { HTMLAnchorAttributes } from "svelte/elements";
-declare const __propDef: {
-    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
-         * use the link's metadata to determine the `rel` value.
-         */
-        rel?: string | AsLinkAttrsConfig["rel"];
-    } & ({
-        /**
-         * A Prismic link field, content relationship field, or link to media
-         * field.
-         */
-        field: LinkField;
-        document?: never;
-    } | {
-        /**
-         * A Prismic document.
-         */
-        document: PrismicDocument;
-        field?: never;
-    }));
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PrismicLinkProps = typeof __propDef.props;
-export type PrismicLinkEvents = typeof __propDef.events;
-export type PrismicLinkSlots = typeof __propDef.slots;
+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
+     * use the link's metadata to determine the `rel` value.
+     */
+    rel?: string | AsLinkAttrsConfig["rel"];
+} & ({
+    /**
+     * A Prismic link field, content relationship field, or link to media
+     * field.
+     */
+    field: LinkField | null | undefined;
+    document?: never;
+    href?: never;
+} | {
+    /**
+     * A Prismic document.
+     */
+    document: PrismicDocument | null | undefined;
+    field?: never;
+    href?: never;
+} | {
+    href: HTMLAnchorAttributes["href"];
+    document: never;
+    field?: never;
+});
 /**
  * Component to render a Prismic link, link to media, content relationship, or whole document as an `a` tag.
  *
@@ -45,6 +35,6 @@ export type PrismicLinkSlots = typeof __propDef.slots;
  * 	<PrismicLink field={document.data.example_link} />
  * ```
  */
-export default class PrismicLink extends SvelteComponent<PrismicLinkProps, PrismicLinkEvents, PrismicLinkSlots> {
-}
-export {};
+declare const PrismicLink: import("svelte").Component<Props, {}, "">;
+type PrismicLink = ReturnType<typeof PrismicLink>;
+export default PrismicLink;

package/dist/PrismicRichText/DefaultComponent.svelte

@@ -1,38 +1,51 @@
-<script>import PrismicEmbed from "../PrismicEmbed.svelte";
-import PrismicImage from "../PrismicImage.svelte";
-import PrismicLink from "../PrismicLink.svelte";
-export let node;
-$: dir = "direction" in node && node.direction === "rtl" ? "rtl" : void 0;
+<script lang="ts">
+	import type { RTAnyNode } from "@prismicio/client";
+	import type { Snippet } from "svelte";
+
+	import PrismicEmbed from "../PrismicEmbed.svelte";
+	import PrismicImage from "../PrismicImage.svelte";
+	import PrismicLink from "../PrismicLink.svelte";
+
+	type Props = {
+		node: RTAnyNode;
+		children?: Snippet;
+	};
+
+	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} />
@@ -40,11 +53,11 @@ $: dir = "direction" in node && node.direction === "rtl" ? "rtl" : void 0;
 {: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}