@prismicio/svelte 0.0.11 → 0.1.1

package/{dist/src/lib → src}/PrismicRichText/DefaultComponent.svelte

@@ -1,23 +1,11 @@
 <script lang="ts">
-	import type { LinkResolverFunction } from "@prismicio/helpers";
-	import type { TreeNode } from "@prismicio/richtext";
+	import type { RTAnyNode } from "@prismicio/client";
 
 	import PrismicEmbed from "../PrismicEmbed.svelte";
 	import PrismicImage from "../PrismicImage.svelte";
 	import PrismicLink from "../PrismicLink.svelte";
 
-	export let node: TreeNode["node"];
-	export let key: TreeNode["key"];
-	export let text: TreeNode["text"];
-	export let type: TreeNode["type"];
-
-	// These variables are not used in the component, but we need to
-	// superficially use them to supress development warnings.
-	key;
-	text;
-	type;
-
-	export let linkResolver: LinkResolverFunction | undefined = undefined;
+	export let node: RTAnyNode;
 </script>
 
 {#if node.type === "heading1"}
@@ -55,7 +43,7 @@
 {:else if node.type === "embed"}
 	<PrismicEmbed field={node.oembed} />
 {:else if node.type === "hyperlink"}
-	<PrismicLink {linkResolver} field={node.data}><slot /></PrismicLink>
+	<PrismicLink field={node.data}><slot /></PrismicLink>
 {:else if node.type === "label"}
 	<span class={node.data.label}><slot /></span>
 {:else}

package/src/PrismicRichText/PrismicRichText.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { asTree } from "@prismicio/richtext";
+	import type { RichTextField } from "@prismicio/client";
+
+	import type { SvelteRichTextSerializer } from "../types";
+
+	import Serialize from "./Serialize.svelte";
+
+	/**
+	 * The Prismic rich text field to render.
+	 */
+	export let field: RichTextField;
+
+	/**
+	 * An object that maps a rich text block type to a Svelte component.
+	 */
+	export let components: SvelteRichTextSerializer = {};
+
+	$: children = asTree(field).children;
+</script>
+
+<!--
+  @component
+  Component to render a Prismic rich text field.
+
+  @example Rendering a rich text field:
+	```svelte
+		<PrismicRichText field={document.data.example_rich_text} />
+	```
+-->
+
+<Serialize {children} {components} />

package/src/PrismicRichText/Serialize.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { RichTextNodeType } from "@prismicio/client";
+	import type { asTree } from "@prismicio/richtext";
+
+	import type { SvelteRichTextSerializer } from "../types";
+
+	import DefaultComponent from "./DefaultComponent.svelte";
+
+	export let components: SvelteRichTextSerializer = {};
+	export let children: ReturnType<typeof asTree>["children"];
+
+	const rewrittenNodeTypes: Partial<
+		Record<
+			(typeof RichTextNodeType)[keyof typeof RichTextNodeType],
+			keyof typeof RichTextNodeType
+		>
+	> = {
+		"list-item": "listItem",
+		"o-list-item": "oListItem",
+		"group-list-item": "list",
+		"group-o-list-item": "oList",
+	};
+</script>
+
+{#each children as child}
+	<svelte:component
+		this={components[rewrittenNodeTypes[child.type] || child.type] ||
+			DefaultComponent}
+		node={child.node}
+		key={child.key}
+	>
+		{#if child.children.length > 0}
+			<svelte:self children={child.children} {components} />
+		{/if}
+	</svelte:component>
+{/each}

package/src/PrismicText.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { RichTextField } from "@prismicio/client";
+	import { isFilled, asText } from "@prismicio/client";
+	import { DEV } from "esm-env";
+
+	import { devMsg } from "./lib/devMsg";
+
+	/**
+	 * A Rich Text or Title field from Prismic.
+	 */
+	export let field: RichTextField;
+
+	/**
+	 * The separator used between blocks. Defaults to `\n`.
+	 */
+	export let separator: string | undefined = undefined;
+
+	/**
+	 * The string rendered when the field is empty. If a fallback is not given,
+	 * `null` will be rendered.
+	 */
+	export let fallback: string | undefined = undefined;
+
+	if (DEV) {
+		if ("className" in $$restProps) {
+			console.warn(
+				`[PrismicText] className cannot be passed to <PrismicText> since it renders plain text without a wrapping component. For more details, see ${devMsg(
+					"classname-is-not-a-valid-prop",
+				)}.`,
+				field,
+			);
+		}
+
+		if (typeof field === "string") {
+			throw new Error(
+				`[PrismicText] The "field" prop only accepts a Rich Text or Title field's value but was provided a different type of field instead (e.g. a Key Text or Select field). You can resolve this error by rendering the field value inline without <PrismicText>. For more details, see ${devMsg(
+					"prismictext-works-only-with-rich-text-and-title-fields",
+				)}`,
+			);
+		}
+	}
+</script>
+
+<!--
+  @component
+  Component to render a Prismic Rich Text or Title field as plain text.
+
+  @example Rendering a Rich Text field:
+	```svelte
+		<PrismicText field={document.data.example_rich_text} />
+  ```
+-->
+
+{#if isFilled.richText(field)}
+	{asText(field, { separator })}
+{:else if fallback !== undefined}
+	{fallback}
+{/if}

package/{dist/src/lib → src}/SliceZone/SliceZone.svelte

@@ -1,13 +1,20 @@
 <script lang="ts">
-	import TodoSliceComponent from "./TodoSliceComponent.svelte";
+	import TodoComponent from "./TodoComponent.svelte";
 
-	import type * as prismicT from "@prismicio/types";
+	import type * as prismic from "@prismicio/client";
 	import type { SvelteComponent } from "svelte";
 
-	type SliceComponents = Record<
-		string,
-		new (...args: any[]) => SvelteComponent
-	>;
+	type SvelteSliceComponent = new (
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		...args: any[]
+	) => SvelteComponent<{
+		slice?: SliceLike;
+		slices?: SliceLike[];
+		context?: unknown;
+		index?: number;
+	}>;
+
+	type SliceComponents = Record<string, SvelteSliceComponent>;
 
 	/**
 	 * The minimum required properties to represent a Prismic Slice from the
@@ -19,7 +26,7 @@
 	 * @typeParam SliceType - Type name of the Slice.
 	 */
 	type SliceLikeRestV2<SliceType extends string = string> = {
-		slice_type: prismicT.Slice<SliceType>["slice_type"];
+		slice_type: prismic.Slice<SliceType>["slice_type"];
 	};
 
 	/**
@@ -29,7 +36,7 @@
 	 * @typeParam SliceType - Type name of the Slice.
 	 */
 	type SliceLikeGraphQL<SliceType extends string = string> = {
-		type: prismicT.Slice<SliceType>["slice_type"];
+		type: prismic.Slice<SliceType>["slice_type"];
 	};
 
 	/**
@@ -52,7 +59,7 @@
 	export let slices: SliceLike[] = [];
 
 	/**
-	 * An object that maps Slice components to their corresponding API IDs
+	 * An object that maps Slice components to their corresponding API IDs.
 	 *
 	 * @example An example map:
 	 *
@@ -71,29 +78,30 @@
 	/**
 	 * Arbitrary data passed to all Slice components as a `context` prop.
 	 */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	export let context: any = {};
 
 	/**
 	 * The Svelte component rendered if a component mapping from the `components`
 	 * prop cannot be found.
 	 */
-	export let defaultComponent:
-		| SvelteComponent
-		| (new (...args: any[]) => SvelteComponent)
-		| undefined = undefined;
+	export let defaultComponent: SvelteSliceComponent | undefined = undefined;
 </script>
 
 <!--
   @component
-  Component to render an array of Prismic Slices.
+  Component to render an array of Prismic slices.
 
-  @example Rendering a Rich Text field:
+  @example Rendering a Slice Zone:
 	```svelte
-		<SliceZone slices={document.data.slices} components={{
-			block_quote: BlockQuote,
-			hero_image: HeroImage
-		}} />
-  ```
+		<SliceZone
+			slices={document.data.slices}
+			components={{
+				block_quote: BlockQuote,
+				hero_image: HeroImage
+			}}
+		/>
+	```
 -->
 
 {#each slices as slice, index}
@@ -102,6 +110,6 @@
 	{#if Component}
 		<svelte:component this={Component} {slice} {slices} {context} {index} />
 	{:else}
-		<TodoSliceComponent {slice} />
+		<TodoComponent {slice} />
 	{/if}
 {/each}

package/{dist/src/lib/SliceZone/TodoSliceComponent.svelte → src/SliceZone/TodoComponent.svelte}

@@ -5,11 +5,12 @@
 
 	const type = "slice_type" in slice ? slice.slice_type : slice.type;
 
-	if (DEV)
+	if (DEV) {
 		console.warn(
 			`[SliceZone] Could not find a component for Slice type "${type}"`,
 			slice,
 		);
+	}
 </script>
 
 {#if DEV}

package/{dist/src/lib → src}/index.ts

@@ -4,3 +4,5 @@ export { default as PrismicLink } from "./PrismicLink.svelte";
 export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.svelte";
 export { default as PrismicText } from "./PrismicText.svelte";
 export { default as SliceZone } from "./SliceZone/SliceZone.svelte";
+
+export type { SvelteRichTextSerializer } from "./types";

package/src/lib/devMsg.ts

@@ -0,0 +1,20 @@
+import { version } from "../../package.json";
+
+/**
+ * Returns a `prismic.dev/msg` URL for a given message slug.
+ *
+ * @example
+ *
+ * ```ts
+ * devMsg("missing-param");
+ * // => "https://prismic.dev/msg/svelte/v1.2.3/missing-param.md"
+ * ```
+ *
+ * @param slug - Slug for the message. This corresponds to a Markdown file in
+ *   the Git repository's `/messages` directory.
+ *
+ * @returns The `prismic.dev/msg` URL for the given slug.
+ */
+export const devMsg = (slug: string): string => {
+	return `https://prismic.dev/msg/react/v${version}/${slug}`;
+};

package/src/types.ts

@@ -0,0 +1,15 @@
+import type { RTAnyNode, RichTextNodeType } from "@prismicio/client";
+import type { SvelteComponent } from "svelte";
+
+export type SvelteRichTextSerializer = Partial<
+	Record<keyof typeof RichTextNodeType, SvelteRichTextComponent>
+>;
+
+type SvelteRichTextComponent = new (
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	...args: any[]
+) => SvelteComponent<
+	Partial<{
+		node: RTAnyNode;
+	}>
+>;

package/dist/SliceZone/TodoSliceComponent.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        slice: {
-            slice_type: string;
-        } | {
-            type: string;
-        };
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TodoSliceComponentProps = typeof __propDef.props;
-export type TodoSliceComponentEvents = typeof __propDef.events;
-export type TodoSliceComponentSlots = typeof __propDef.slots;
-export default class TodoSliceComponent extends SvelteComponentTyped<TodoSliceComponentProps, TodoSliceComponentEvents, TodoSliceComponentSlots> {
-}
-export {};

package/dist/src/app.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body>
-		<div id="svelte">%sveltekit.body%</div>
-	</body>
-</html>

package/dist/src/global.d.ts

@@ -1 +0,0 @@
-/// <reference types="@sveltejs/kit" />

package/dist/src/lib/PrismicEmbed.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import * as prismicH from "@prismicio/helpers";
-	import type * as prismicT from "@prismicio/types";
-
-	/**
-	 * An Embed field from Prismic.
-	 */
-	export let field: prismicT.EmbedField;
-</script>
-
-<!-- 
-  @component
-  Component to render a Prismic Embed field.
-  
-  @example Rendering an Embed field:
-	```svelte
-		<PrismicEmbed field={document.data.example_embed} />
-  ```
--->
-
-{#if prismicH.isFilled.embed(field)}
-	<div
-		data-oembed={field.embed_url}
-		data-oembed-type={field.type}
-		data-oembed-provider={field.provider_name}
-	>
-		{@html field.html}
-	</div>
-{/if}

package/dist/src/lib/PrismicImage.svelte

@@ -1,192 +0,0 @@
-<script lang="ts">
-	import * as prismicH from "@prismicio/helpers";
-	import type * as prismicT from "@prismicio/types";
-	import type { HTMLImgAttributes } from "svelte/elements";
-	import { DEV } from "esm-env";
-
-	type PrismicImageProps = {
-		/**
-		 * A Prismic Image field.
-		 */
-		field: prismicT.ImageField;
-		/**
-		 * An object of Imgix URL API parameters to transform the image.
-		 *
-		 * See: https://docs.imgix.com/apis/rendering
-		 */
-		imgixParams?: Parameters<typeof prismicH.asImageSrc>[1];
-		/**
-		 * 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 prismicH.asImageWidthSrcSet>[1]>["widths"]
-			| "defaults";
-		/**
-		 * 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 prismicH.asImagePixelDensitySrcSet>[1]
-			  >["pixelDensities"]
-			| "defaults";
-		/**
-		 * 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?: "";
-		/**
-		 * PrismicImage will ignore any provided `src` property. The `src` property
-		 * is generated based on the provided `field`.
-		 */
-		src?: undefined;
-		/**
-		 * PrismicImage will ignore any provided `srcset` property. The `srcset`
-		 * property is generated based on the provided `field`.
-		 */
-		srcset?: undefined;
-	};
-
-	type $$Props = Omit<HTMLImgAttributes, "alt" | "src" | "srcset"> &
-		PrismicImageProps;
-
-	export let field: $$Props["field"];
-
-	export let imgixParams: $$Props["imgixParams"] = {};
-
-	export let widths: $$Props["widths"] = undefined;
-
-	export let pixelDensities: $$Props["pixelDensities"] = undefined;
-
-	export let width: $$Props["width"] = undefined;
-
-	export let height: $$Props["height"] = undefined;
-
-	export let alt: $$Props["alt"] = undefined;
-
-	export let fallbackAlt: $$Props["fallbackAlt"] = undefined;
-
-	delete $$restProps.src;
-	delete $$restProps.srcset;
-
-	const castInt = (
-		input: string | number | null | undefined,
-	): number | undefined | null => {
-		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 && field.dimensions.width / field.dimensions.height;
-
-	const castedWidth = castInt(width);
-	const castedHeight = castInt(height);
-
-	let resolvedWidth =
-		castedWidth ?? (field.dimensions && field.dimensions.width);
-	let resolvedHeight =
-		castedHeight ?? (field.dimensions && field.dimensions.height);
-
-	if (
-		ar &&
-		castedWidth != null &&
-		(castedHeight == null || typeof castedWidth !== "undefined")
-	) {
-		resolvedHeight = castedWidth / ar;
-	} else if (
-		ar &&
-		castedHeight != null &&
-		(castedWidth == null || typeof castedWidth !== "undefined")
-	) {
-		resolvedWidth = castedHeight * ar;
-	}
-
-	if (DEV) {
-		if (widths && pixelDensities) {
-			console.warn(
-				`[PrismicImage] Only one of "widths" or "pixelDensities" props can be provided. You can resolve this warning by removing either the "widths" or "pixelDensities" prop. "widths" will be used in this case.`,
-			);
-		}
-
-		if (typeof alt === "string" && alt !== "") {
-			console.warn(
-				`[PrismicImage] The "alt" prop can only be used to declare an image as decorative by passing an empty string (alt="") but was provided a non-empty string. You can resolve this warning by removing the "alt" prop or changing it to alt="".`,
-			);
-		}
-
-		if (typeof fallbackAlt === "string" && fallbackAlt !== "") {
-			console.warn(
-				`[PrismicImage] The "fallbackAlt" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt="") but was provided a non-empty string. You can resolve this warning by removing the "fallbackAlt" prop or changing it to fallbackAlt="".`,
-			);
-		}
-	}
-</script>
-
-<!--
-  @component
-  Component to render a Prismic Image field as an `img` element with `width`, `height`, `alt`, `src`, and `srcset` attributes.
-
-  @example Rendering an Image field:
-	```svelte
-		<PrismicImage
-			field={document.data.example_image}
-			imgixParams={{ sat: -100 }}
-		/>
-  ```
--->
-
-{#if prismicH.isFilled.image(field)}
-	{@const { src, srcset } =
-		pixelDensities && !widths
-			? prismicH.asImagePixelDensitySrcSet(field, {
-					pixelDensities:
-						pixelDensities === "defaults" ? undefined : pixelDensities,
-					...imgixParams,
-			  })
-			: prismicH.asImageWidthSrcSet(field, {
-					widths: widths === "defaults" ? undefined : widths,
-					...imgixParams,
-			  })}
-	<img
-		{src}
-		{srcset}
-		alt={alt ?? field.alt ?? fallbackAlt}
-		width={width || height ? resolvedWidth : field.dimensions.width}
-		height={height || (width ? resolvedHeight : field.dimensions.height)}
-		{...$$restProps}
-	/>
-{:else}
-	<img alt={field.alt || ""} {...$$restProps} />
-{/if}

package/dist/src/lib/PrismicLink.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-	import * as prismicH from "@prismicio/helpers";
-	import type * as prismicT from "@prismicio/types";
-	import type { HTMLAnchorAttributes } from "svelte/elements";
-	// import { usePrismic } from "../usePrismic";
-
-	type PrismicLinkProps = {
-		/**
-		 * A Prismic Link field, Content Relationship field, Link to Media field or
-		 * Document.
-		 */
-		field: prismicT.LinkField | prismicT.PrismicDocument;
-
-		/**
-		 * The Link Resolver used to resolve links.
-		 *
-		 * @remarks
-		 * If your app uses Route Resolvers when querying for your Prismic
-		 * repository's content, a Link Resolver does not need to be provided.
-		 * @see Learn about Link Resolvers and Route Resolvers {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}
-		 */
-		linkResolver?: prismicH.LinkResolverFunction | undefined;
-
-		/**
-		 * PrismicLink does not accept an `href` property. The `href` attribute is
-		 * generated based on the field provided. If an `href` attribute is
-		 * provided, it will be ignored.
-		 */
-		href?: undefined;
-	};
-
-	type $$Props = Omit<HTMLAnchorAttributes, "href"> & PrismicLinkProps;
-
-	export let field: $$Props["field"];
-	export let linkResolver: $$Props["linkResolver"] = undefined;
-
-	export let target: $$Props["target"] = undefined;
-	const resolvedTarget =
-		target || (field && "target" in field && field.target) || undefined;
-
-	export let rel: $$Props["rel"] = undefined;
-	const resolvedRel =
-		rel || (target === "_blank" ? "noopener noreferrer" : undefined);
-
-	const href = (field ? prismicH.asLink(field, linkResolver) : "") || "";
-
-	delete $$restProps.href;
-</script>
-
-<!-- 
-  @component
-  Component to render a Prismic Link, Link to Media, Content Relationship, or whole Document as an `a` tag.
-  
-  @example Rendering a Link field:
-	```svelte
-		<PrismicLink field={document.data.example_link}>
-			Example anchor text.
-		</PrismicLink>
-  ```
--->
-
-<a {href} {...$$restProps} rel={resolvedRel} target={resolvedTarget}>
-	<slot />
-</a>