@prismicio/svelte 0.0.7 → 0.0.8-dev.0

package/dist/components/PrismicEmbed.svelte

@@ -0,0 +1,26 @@
+<script>import * as prismicH from "@prismicio/helpers";
+/**
+ * An Embed field from Prismic.
+ */
+export let field;
+</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/{lib → dist}/components/PrismicEmbed.svelte.d.ts

@@ -2,7 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 import type * as prismicT from "@prismicio/types";
 declare const __propDef: {
     props: {
-        field: prismicT.EmbedField;
+        /**
+             * An Embed field from Prismic.
+             */ field: prismicT.EmbedField;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -12,6 +14,14 @@ declare const __propDef: {
 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.
+ *
+ *  @example Rendering an Embed field:
+ * ```svelte
+ * 	<PrismicEmbed field={document.data.example_embed} />
+ *  ```
+ */
 export default class PrismicEmbed extends SvelteComponentTyped<PrismicEmbedProps, PrismicEmbedEvents, PrismicEmbedSlots> {
 }
 export {};

package/{components → dist/components}/PrismicImage.svelte

@@ -77,13 +77,12 @@ if (!__PRODUCTION__) {
 					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}
+		height={height || (width ? resolvedHeight : field.dimensions.height)}
 		{...$$restProps}
 	/>
 {:else}

package/dist/components/PrismicRichText/DefaultComponent.svelte

@@ -0,0 +1,51 @@
+<script>import { PrismicImage, PrismicEmbed, PrismicLink } from "..";
+export let node;
+export let linkResolver = 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/components/PrismicRichText/DefaultComponent.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { LinkResolverFunction } from "@prismicio/helpers";
+import type { RTAnyNode } from "@prismicio/types";
+declare const __propDef: {
+    props: {
+        node: RTAnyNode;
+        linkResolver?: LinkResolverFunction | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DefaultComponentProps = typeof __propDef.props;
+export type DefaultComponentEvents = typeof __propDef.events;
+export type DefaultComponentSlots = typeof __propDef.slots;
+export default class DefaultComponent extends SvelteComponentTyped<DefaultComponentProps, DefaultComponentEvents, DefaultComponentSlots> {
+}
+export {};

package/dist/components/PrismicRichText/PrismicRichText.svelte

@@ -0,0 +1,49 @@
+<script>import { asTree, wrapMapSerializer, } from "@prismicio/richtext";
+import Serialize from "./Serialize.svelte";
+/**
+ * The Prismic Rich Text field to render.
+ */
+export let field = [];
+/**
+ * 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 = 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 = 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/components/PrismicRichText/PrismicRichText.svelte.d.ts

@@ -0,0 +1,53 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SvelteComponent } from "svelte";
+import { type RichTextFunctionSerializer, type RichTextMapSerializer, type TreeNode } from "@prismicio/richtext";
+import type { LinkResolverFunction } from "@prismicio/helpers";
+declare const __propDef: {
+    props: {
+        /**
+             * The Prismic Rich Text field to render.
+             */ field?: [] | [import("@prismicio/types").RTNode, ...import("@prismicio/types").RTNode[]] | undefined;
+        /**
+             * 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}
+             */ linkResolver?: LinkResolverFunction | 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>`,
+             * };
+             * ```
+             */ richTextSerializer?: RichTextMapSerializer<typeof SvelteComponent, TreeNode> | RichTextFunctionSerializer<typeof SvelteComponent, TreeNode> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PrismicRichTextProps = typeof __propDef.props;
+export type PrismicRichTextEvents = typeof __propDef.events;
+export type PrismicRichTextSlots = typeof __propDef.slots;
+/**
+ * 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} />
+ *  ```
+ */
+export default class PrismicRichText extends SvelteComponentTyped<PrismicRichTextProps, PrismicRichTextEvents, PrismicRichTextSlots> {
+}
+export {};

package/dist/components/PrismicRichText/Serialize.svelte

@@ -0,0 +1,19 @@
+<script>import Default from "./DefaultComponent.svelte";
+export let serializer;
+export let nodes = [];
+export let linkResolver = 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/components/PrismicRichText/Serialize.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SvelteComponent } from "svelte";
+import type { RichTextFunctionSerializer, TreeNode } from "@prismicio/richtext";
+import type { LinkResolverFunction } from "@prismicio/helpers";
+declare const __propDef: {
+    props: {
+        serializer: RichTextFunctionSerializer<typeof SvelteComponent, TreeNode> | undefined;
+        nodes?: TreeNode[] | undefined;
+        linkResolver?: LinkResolverFunction | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SerializeProps = typeof __propDef.props;
+export type SerializeEvents = typeof __propDef.events;
+export type SerializeSlots = typeof __propDef.slots;
+export default class Serialize extends SvelteComponentTyped<SerializeProps, SerializeEvents, SerializeSlots> {
+}
+export {};

package/dist/components/PrismicText.svelte

@@ -0,0 +1,22 @@
+<script>import * as prismicH from "@prismicio/helpers";
+/**
+ * A Rich Text or Title field from Prismic.
+ */
+export let field;
+/**
+ * The separator used between blocks. Defaults to `\n`.
+ */
+export let separator = 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/{lib → dist}/components/PrismicText.svelte.d.ts

@@ -3,8 +3,12 @@ import type { RichTextField as RichTextFieldType } from "@prismicio/types";
 import type { TitleField as TitleFieldType } from "@prismicio/types";
 declare const __propDef: {
     props: {
-        field: TitleFieldType | RichTextFieldType;
-        separator: string;
+        /**
+             * A Rich Text or Title field from Prismic.
+             */ field: TitleFieldType | RichTextFieldType;
+        /**
+             * The separator used between blocks. Defaults to `\n`.
+             */ separator?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -14,6 +18,14 @@ declare const __propDef: {
 export type PrismicTextProps = typeof __propDef.props;
 export type PrismicTextEvents = typeof __propDef.events;
 export type PrismicTextSlots = typeof __propDef.slots;
+/**
+ * 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} />
+ *  ```
+ */
 export default class PrismicText extends SvelteComponentTyped<PrismicTextProps, PrismicTextEvents, PrismicTextSlots> {
 }
 export {};

package/dist/components/SliceZone.svelte

@@ -0,0 +1,59 @@
+<script>import TodoSliceComponent from "./TodoSliceComponent.svelte";
+/**
+ * An array of Prismic Slices, such as the `slices` property from a Prismic document.
+ */
+export let slices = [];
+/**
+ * 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 = {};
+/**
+ * Arbitrary data passed to all Slice components as a `context` prop.
+ */
+export let context = {};
+/**
+ * The Svelte component rendered if a component mapping from the `components`
+ * prop cannot be found.
+ */
+export let defaultComponent = undefined;
+/**
+ * Whether the app is in development mode. When true, the SliceZone may
+ * display error messages in the UI.
+ */
+export let dev = 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}
+	{#if Component}
+		<svelte:component this={Component} {slice} {slices} {context} {index} />
+	{:else}
+		<TodoSliceComponent {slice} {dev} />
+	{/if}
+{/each}

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

@@ -0,0 +1,60 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+             * An array of Prismic Slices, such as the `slices` property from a Prismic document.
+             */ slices?: ({
+            slice_type: string;
+        } | {
+            type: string;
+        })[] | undefined;
+        /**
+             * 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,
+             * };
+             * ```
+             */ components?: Record<string, new (...args: any[]) => SvelteComponent> | undefined;
+        /**
+             * Arbitrary data passed to all Slice components as a `context` prop.
+             */ context?: any;
+        /**
+             * The Svelte component rendered if a component mapping from the `components`
+             * prop cannot be found.
+             */ defaultComponent?: SvelteComponent | (new (...args: any[]) => SvelteComponent) | undefined;
+        /**
+             * Whether the app is in development mode. When true, the SliceZone may
+             * display error messages in the UI.
+             */ dev?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SliceZoneProps = typeof __propDef.props;
+export type SliceZoneEvents = typeof __propDef.events;
+export type SliceZoneSlots = typeof __propDef.slots;
+/**
+ * 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
+ * 	}} />
+ *  ```
+ */
+export default class SliceZone extends SvelteComponentTyped<SliceZoneProps, SliceZoneEvents, SliceZoneSlots> {
+}
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,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 PrismicText } from "./PrismicText.svelte";
+export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.svelte";
+export { default as SliceZone } from "./SliceZone.svelte";

package/dist/components/index.js

@@ -0,0 +1,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 PrismicText } from "./PrismicText.svelte";
+export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.svelte";
+export { default as SliceZone } from "./SliceZone.svelte";

package/dist/index.d.ts

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

package/dist/index.js

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

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/{src → dist/src}/lib/components/PrismicImage.svelte

@@ -165,13 +165,12 @@
 					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}
+		height={height || (width ? resolvedHeight : field.dimensions.height)}
 		{...$$restProps}
 	/>
 {:else}

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} />