@prismicio/svelte 0.0.6 → 0.0.8-dev.0

package/dist/src/lib/components/PrismicEmbed.svelte

@@ -0,0 +1,29 @@
+<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/components/PrismicImage.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+	import * as prismicH from "@prismicio/helpers";
+	import type * as prismicT from "@prismicio/types";
+	import { __PRODUCTION__ } from "$lib/__PRODUCTION__";
+
+	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?: "";
+	};
+
+	type $$Props = Omit<svelteHTML.IntrinsicElements["img"], "alt"> &
+		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;
+
+	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 (!__PRODUCTION__) {
+		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/{src → dist/src}/lib/components/PrismicLink.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import * as prismicH from "@prismicio/helpers";
 	import type * as prismicT from "@prismicio/types";
+	// import { usePrismic } from "../usePrismic";
 
 	type PrismicLinkProps = {
 		/**

package/dist/src/lib/components/PrismicRichText/DefaultComponent.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { PrismicImage, PrismicEmbed, PrismicLink } from "$lib/components";
+	import type { LinkResolverFunction } from "@prismicio/helpers";
+	import type { RTAnyNode } from "@prismicio/types";
+
+	export let node: RTAnyNode;
+
+	export let linkResolver: LinkResolverFunction | undefined = undefined;
+</script>
+
+{#if node.type === "heading1"}
+	<h1><slot /></h1>
+{:else if node.type === "heading2"}
+	<h2><slot /></h2>
+{:else if node.type === "heading3"}
+	<h3><slot /></h3>
+{:else if node.type === "heading4"}
+	<h4><slot /></h4>
+{:else if node.type === "heading5"}
+	<h5><slot /></h5>
+{:else if node.type === "heading6"}
+	<h6><slot /></h6>
+{:else if node.type === "paragraph"}
+	<p><slot /></p>
+{:else if node.type === "preformatted"}
+	<pre><slot /></pre>
+{:else if node.type === "strong"}
+	<strong><slot /></strong>
+{:else if node.type === "em"}
+	<em><slot /></em>
+{:else if node.type === "list-item"}
+	<li><slot /></li>
+{:else if node.type === "o-list-item"}
+	<li><slot /></li>
+{:else if node.type === "group-list-item"}
+	<ul><slot /></ul>
+{:else if node.type === "group-o-list-item"}
+	<ol><slot /></ol>
+{:else if node.type === "image"}
+	<p class="block-img">
+		<PrismicImage field={node} />
+	</p>
+{:else if node.type === "embed"}
+	<PrismicEmbed field={node.oembed} />
+{:else if node.type === "hyperlink"}
+	<PrismicLink {linkResolver} field={node.data}><slot /></PrismicLink>
+{:else if node.type === "label"}
+	<span class={node.data.label}><slot /></span>
+{:else}
+	{#each node.text.split("\n") as line, index}
+		{#if index > 0}
+			<br />
+		{/if}
+		{line}
+	{/each}
+{/if}

package/dist/src/lib/components/PrismicRichText/PrismicRichText.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { SvelteComponent } from "svelte";
+	import type { RichTextField } from "@prismicio/types";
+	import {
+		asTree,
+		wrapMapSerializer,
+		type RichTextFunctionSerializer,
+		type RichTextMapSerializer,
+		type TreeNode,
+	} from "@prismicio/richtext";
+
+	import Serialize from "./Serialize.svelte";
+	import type { LinkResolverFunction } from "@prismicio/helpers";
+
+	/**
+	 * The Prismic Rich Text field to render.
+	 */
+	export let field: RichTextField = [];
+
+	/**
+	 * 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/route-resolver}
+	 */
+	export let linkResolver: LinkResolverFunction | undefined = undefined;
+
+	/**
+	 * An object that maps Rich Text blocks to functions.
+	 *
+	 * @example A serializer that modififes `h1` and `em` elements:
+	 *
+	 * ```js
+	 * import Title from "./Title.svelte";
+	 *
+	 * const field = exampleRichText;
+	 *
+	 * const richTextSerializer = {
+	 * 	h1: () => Title,
+	 * 	em: ({ children }) => `<mark>${children}</mark>`,
+	 * };
+	 * ```
+	 */
+	export let richTextSerializer:
+		| RichTextMapSerializer<typeof SvelteComponent, TreeNode>
+		| RichTextFunctionSerializer<typeof SvelteComponent, TreeNode>
+		| undefined = undefined;
+
+	const resolvedSerializer =
+		typeof richTextSerializer === "object"
+			? wrapMapSerializer(richTextSerializer)
+			: richTextSerializer;
+
+	const nodes = asTree(field).children;
+</script>
+
+<!-- 
+  @component
+  Component to render a Prismic Rich Text or Title field as HTML.
+  
+  @example Rendering a Link field:
+	```svelte
+		<PrismicRichText field={document.data.example_rich_text} />
+  ```
+-->
+
+<Serialize {nodes} serializer={resolvedSerializer} {linkResolver} />

package/dist/src/lib/components/PrismicRichText/Serialize.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { SvelteComponent } from "svelte";
+	import type {
+		RichTextFunctionSerializer,
+		TreeNode,
+	} from "@prismicio/richtext";
+	import type { LinkResolverFunction } from "@prismicio/helpers";
+
+	import Default from "./DefaultComponent.svelte";
+
+	export let serializer:
+		| RichTextFunctionSerializer<typeof SvelteComponent, TreeNode>
+		| undefined;
+	export let nodes: TreeNode[] = [];
+	export let linkResolver: LinkResolverFunction | undefined = undefined;
+</script>
+
+{#each nodes as node}
+	<svelte:component
+		this={(serializer &&
+			serializer(node.type, node.node, node.text, node.children, node.key)) ||
+			Default}
+		{...node}
+		{linkResolver}
+	>
+		{#if node.children.length > 0}
+			<svelte:self nodes={node.children} {serializer} />
+		{/if}
+	</svelte:component>
+{/each}

package/dist/src/lib/components/PrismicText.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import * as prismicH from "@prismicio/helpers";
+	import type * as prismicR from "@prismicio/richtext";
+
+	import type { RichTextField as RichTextFieldType } from "@prismicio/types";
+	import type { TitleField as TitleFieldType } from "@prismicio/types";
+
+	/**
+	 * A Rich Text or Title field from Prismic.
+	 */
+	export let field: TitleFieldType | RichTextFieldType;
+
+	/**
+	 * The separator used between blocks. Defaults to `\n`.
+	 */
+	export let separator: string | undefined = undefined;
+</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} />
+  ```
+-->
+
+{@html prismicH.asText(field, separator)}

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

@@ -6,7 +6,7 @@
 
 	type SliceComponents = Record<
 		string,
-		SvelteComponent | (new (...args: any[]) => SvelteComponent)
+		new (...args: any[]) => SvelteComponent
 	>;
 
 	/**
@@ -45,16 +45,62 @@
 		| SliceLikeRestV2<SliceType>
 		| SliceLikeGraphQL<SliceType>;
 
+	/**
+	 * An array of Prismic Slices, such as the `slices` property from a Prismic document.
+	 */
 	export let slices: SliceLike[] = [];
+
+	/**
+	 * An object that maps Slice components to their corresponding API IDs
+	 *
+	 * @example An example map:
+	 *
+	 * ```js
+	 * import BlockQuote from "./BlockQuote.svelte";
+	 * import HeroImage from "./HeroImage.svelte";
+	 *
+	 * const components = {
+	 * 	block_quote: BlockQuote,
+	 * 	hero_image: HeroImage,
+	 * };
+	 * ```
+	 */
 	export let components: SliceComponents = {};
+
+	/**
+	 * Arbitrary data passed to all Slice components as a `context` prop.
+	 */
 	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;
+
+	/**
+	 * Whether the app is in development mode. When true, the SliceZone may
+	 * display error messages in the UI.
+	 */
 	export let dev: boolean = false;
 </script>
 
+<!-- 
+  @component
+  Component to render an array of Prismic Slices.
+  
+  @example Rendering a Rich Text field:
+	```svelte
+		<SliceZone slices={document.data.slices} components={{
+			block_quote: BlockQuote,
+			hero_image: HeroImage
+		}} />
+  ```
+-->
+
 {#each slices as slice, index}
 	{@const type = "slice_type" in slice ? slice.slice_type : slice.type}
 	{@const Component = components[type] || defaultComponent}

package/dist/src/lib/components/index.ts

@@ -0,0 +1,11 @@
+export { default as PrismicEmbed } from "./PrismicEmbed.svelte";
+
+export { default as PrismicImage } from "./PrismicImage.svelte";
+
+export { default as PrismicLink } from "./PrismicLink.svelte";
+
+export { default as PrismicText } from "./PrismicText.svelte";
+
+export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.svelte";
+
+export { default as SliceZone } from "./SliceZone.svelte";

package/dist/src/lib/index.ts

@@ -0,0 +1,9 @@
+export {
+	// Components
+	PrismicEmbed,
+	PrismicImage,
+	PrismicLink,
+	PrismicText,
+	PrismicRichText,
+	SliceZone,
+} from "./components";

package/{src → dist/src}/routes/+page.server.ts

@@ -9,7 +9,7 @@ export const load = (async ({ fetch }) => {
 	const pageDocument: PageDocument = await client.getSingle("homepage");
 
 	const exampleClient = prismic.createClient("example-prismic-repo", { fetch })
-	const exampleDocument = exampleClient.getFirst()
+	const exampleDocument = exampleClient.getFirst({ page: 11, pageSize: 1})
 
 
 	return {

package/dist/src/routes/+page.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import {
+		SliceZone,
+		PrismicLink,
+		PrismicImage,
+		PrismicRichText,
+		PrismicText,
+		PrismicEmbed,
+	} from "$lib";
+	import { RichText, CodeSnippet } from "./slices";
+
+	import type { PageData } from "./$types";
+	import { page } from "$app/stores";
+
+	const components = {
+		rich_text: RichText,
+		code_snippet: CodeSnippet,
+	};
+
+	export let data: PageData;
+</script>
+
+<main>
+	<h1>Welcome to SvelteKit</h1>
+	<h2><code>PrismicText</code></h2>
+	<PrismicText field={data.exampleDocument.data.example_rich_text} />
+	<h2><code>PrismicRichText</code></h2>
+	<PrismicRichText field={data.exampleDocument.data.example_rich_text} />
+	<h2><code>PrismicImage</code></h2>
+	<PrismicImage
+		field={data.exampleDocument.data.example_image}
+		height="200px"
+		alt=""
+	/>
+	<h2><code>PrismicLink</code></h2>
+	<PrismicLink
+		data-sveltekit-noscroll
+		data-sveltekit-preload-code
+		data-sveltekit-preload-data
+		data-sveltekit-reload
+		rel="external"
+		class="doggo"
+		field={data.exampleDocument.data.example_link}>Link</PrismicLink
+	>
+	<h2><code>PrismicEmbed</code></h2>
+	<PrismicEmbed field={data.exampleDocument.data.example_embed} />
+	<h2><code>SliceZone</code></h2>
+	<SliceZone slices={data.pageDocument.data.body} {components} />
+</main>
+
+<style>
+	main {
+		max-width: min(90%, 700px);
+		margin: auto;
+	}
+
+	:global(img) {
+		height: auto;
+		max-width: 100%;
+	}
+</style>

package/dist/src/routes/components/Emphasis.svelte

@@ -0,0 +1,3 @@
+<mark>
+	<slot />
+</mark>

package/dist/src/routes/components/index.js

@@ -0,0 +1 @@
+export { default as Em } from "./Emphasis.svelte";

package/dist/src/routes/slices/RichText/index.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { RichTextSlice } from "./../../../types/RichTextSlice.type";
+	import PrismicRichText from "$lib/components/PrismicRichText/PrismicRichText.svelte";
+	import Emphasis from "./../../components/Emphasis.svelte";
+
+	export let slice: RichTextSlice;
+</script>
+
+<PrismicRichText field={slice.primary.content} components={{ em: Emphasis }} />

package/{src → dist/src}/types/ExampleDocument.type.ts

@@ -3,4 +3,6 @@ import type * as prismicT from "@prismicio/types";
 export type ExampleDocument = prismicT.PrismicDocument<{
 	example_link: prismicT.LinkField;
 	example_content_relationship: prismicT.ContentRelationshipField;
+	example_rich_text: prismicT.RichTextField;
+	example_image: prismicT.ImageField;
 }>;

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

@@ -1,7 +1,5 @@
 export type { CodeSnippetSlice } from "./CodeSnippetSlice.type";
 export type { PageDocument } from "./PageDocument.type";
 export type { ExampleDocument } from "./ExampleDocument.type";
-export type { PrismicConfig } from "./PrismicConfig.type";
-export type { PrismicContext } from "./PrismicContext.type";
 export type { RichTextSlice } from "./RichTextSlice.type";
 export type { Route } from "./Route.type";