@prismicio/svelte 0.0.8-dev.2 → 0.0.10

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

@@ -1,7 +1,4 @@
 <script>import * as prismicH from "@prismicio/helpers";
-/**
- * An Embed field from Prismic.
- */
 export let field;
 </script>
 

package/dist/PrismicImage.svelte

@@ -0,0 +1,89 @@
+<script>import * as prismicH from "@prismicio/helpers";
+import { DEV } from "esm-env";
+export let field;
+export let imgixParams = {};
+export let widths = void 0;
+export let pixelDensities = void 0;
+export let width = void 0;
+export let height = void 0;
+export let alt = void 0;
+export let fallbackAlt = void 0;
+delete $$restProps.src;
+delete $$restProps.srcset;
+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 && 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/{components/PrismicImage.svelte.d.ts → PrismicImage.svelte.d.ts}

@@ -12,8 +12,6 @@ declare const __propDef: {
         loading?: "eager" | "lazy" | null | undefined;
         referrerpolicy?: ReferrerPolicy | null | undefined;
         sizes?: string | null | undefined;
-        src?: string | null | undefined;
-        srcset?: string | null | undefined;
         usemap?: string | null | undefined;
         'bind:naturalWidth'?: number | null | undefined;
         'bind:naturalHeight'?: number | null | undefined;
@@ -267,6 +265,16 @@ declare const __propDef: {
          * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
          */
         fallbackAlt?: "" | undefined;
+        /**
+         * 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;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,11 +1,12 @@
 <script>import * as prismicH from "@prismicio/helpers";
 export let field;
-export let linkResolver = undefined;
-export let target = undefined;
-const resolvedTarget = target || (field && "target" in field && field.target) || undefined;
-export let rel = undefined;
-const resolvedRel = rel || (target === "_blank" ? "noopener noreferrer" : undefined);
+export let linkResolver = void 0;
+export let target = void 0;
+const resolvedTarget = target || field && "target" in field && field.target || void 0;
+export let rel = void 0;
+const resolvedRel = rel || (target === "_blank" ? "noopener noreferrer" : void 0);
 const href = (field ? prismicH.asLink(field, linkResolver) : "") || "";
+delete $$restProps.href;
 </script>
 
 <!-- 

package/dist/{components/PrismicLink.svelte.d.ts → PrismicLink.svelte.d.ts}

@@ -3,17 +3,8 @@ import * as prismicH from "@prismicio/helpers";
 import type * as prismicT from "@prismicio/types";
 declare const __propDef: {
     props: {
-        download?: any;
-        href?: string | null | undefined;
-        hreflang?: string | null | undefined;
-        media?: string | null | undefined;
-        ping?: string | null | undefined;
-        rel?: string | null | undefined;
-        target?: import("svelte/elements").HTMLAttributeAnchorTarget | null | undefined;
-        type?: string | null | undefined;
+        prefix?: string | null | undefined;
         referrerpolicy?: ReferrerPolicy | null | undefined;
-        'sapper:noscroll'?: true | null | undefined;
-        'sapper:prefetch'?: true | null | undefined;
         accesskey?: string | null | undefined;
         autofocus?: boolean | null | undefined;
         class?: string | null | undefined;
@@ -39,7 +30,6 @@ declare const __propDef: {
         about?: string | null | undefined;
         datatype?: string | null | undefined;
         inlist?: any;
-        prefix?: string | null | undefined;
         property?: string | null | undefined;
         resource?: string | null | undefined;
         typeof?: string | null | undefined;
@@ -222,8 +212,18 @@ declare const __propDef: {
         'on:close'?: import("svelte/elements").EventHandler<Event, HTMLAnchorElement> | null | undefined;
         'on:fullscreenchange'?: import("svelte/elements").EventHandler<Event, HTMLAnchorElement> | null | undefined;
         'on:fullscreenerror'?: import("svelte/elements").EventHandler<Event, HTMLAnchorElement> | null | undefined;
+        download?: any;
+        hreflang?: string | null | undefined;
+        media?: string | null | undefined;
+        ping?: string | null | undefined;
+        rel?: string | null | undefined;
+        target?: import("svelte/elements").HTMLAttributeAnchorTarget | null | undefined;
+        type?: string | null | undefined;
+        'sapper:noscroll'?: true | null | undefined;
+        'sapper:prefetch'?: true | null | undefined;
         /**
-         * A Prismic Link field, Content Relationship field, Link to Media field or Document.
+         * A Prismic Link field, Content Relationship field, Link to Media field or
+         * Document.
          */
         field: prismicT.LinkField | prismicT.PrismicDocument;
         /**
@@ -235,6 +235,12 @@ declare const __propDef: {
          * @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;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/{components/PrismicRichText → PrismicRichText}/DefaultComponent.svelte

@@ -1,6 +1,14 @@
-<script>import { PrismicImage, PrismicEmbed, PrismicLink } from "..";
+<script>import PrismicEmbed from "../PrismicEmbed.svelte";
+import PrismicImage from "../PrismicImage.svelte";
+import PrismicLink from "../PrismicLink.svelte";
 export let node;
-export let linkResolver = undefined;
+export let key;
+export let text;
+export let type;
+key;
+text;
+type;
+export let linkResolver = void 0;
 </script>
 
 {#if node.type === "heading1"}

package/dist/{components/PrismicRichText → PrismicRichText}/DefaultComponent.svelte.d.ts

@@ -1,9 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 import type { LinkResolverFunction } from "@prismicio/helpers";
-import type { RTAnyNode } from "@prismicio/types";
+import type { TreeNode } from "@prismicio/richtext";
 declare const __propDef: {
     props: {
-        node: RTAnyNode;
+        node: TreeNode["node"];
+        key: TreeNode["key"];
+        text: TreeNode["text"];
+        type: TreeNode["type"];
         linkResolver?: LinkResolverFunction | undefined;
     };
     events: {

package/dist/PrismicRichText/PrismicRichText.svelte

@@ -0,0 +1,23 @@
+<script>import {
+  asTree,
+  wrapMapSerializer
+} from "@prismicio/richtext";
+import Serialize from "./Serialize.svelte";
+export let field = [];
+export let linkResolver = void 0;
+export let components = void 0;
+let resolvedSerializer = typeof components === "object" ? wrapMapSerializer(components) : components;
+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}/PrismicRichText.svelte.d.ts

@@ -16,21 +16,21 @@ declare const __propDef: {
              * @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.
+             * An object that maps Rich Text blocks to Svelte components.
              *
-             * @example A serializer that modififes `h1` and `em` elements:
+             * **Important**: Your components must be wrapped in a function. For example:
+             * `{ heading1: () => Heading }`, not: `{ heading1: Heading }`.
+             *
+             * @example A serializer that modififes `h1` 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;
+             */ components?: RichTextMapSerializer<typeof SvelteComponent, TreeNode> | RichTextFunctionSerializer<typeof SvelteComponent, TreeNode> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/{components/PrismicRichText → PrismicRichText}/Serialize.svelte

@@ -1,7 +1,7 @@
 <script>import Default from "./DefaultComponent.svelte";
 export let serializer;
 export let nodes = [];
-export let linkResolver = undefined;
+export let linkResolver = void 0;
 </script>
 
 {#each nodes as node}
@@ -9,7 +9,10 @@ export let linkResolver = undefined;
 		this={(serializer &&
 			serializer(node.type, node.node, node.text, node.children, node.key)) ||
 			Default}
-		{...node}
+		type={node.type}
+		node={node.node}
+		text={node.text}
+		key={node.key}
 		{linkResolver}
 	>
 		{#if node.children.length > 0}

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

@@ -1,12 +1,6 @@
 <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;
+export let separator = void 0;
 </script>
 
 <!-- 

package/dist/SliceZone/SliceZone.svelte

@@ -0,0 +1,29 @@
+<script>import TodoSliceComponent from "./TodoSliceComponent.svelte";
+export let slices = [];
+export let components = {};
+export let context = {};
+export let defaultComponent = void 0;
+</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} />
+	{/if}
+{/each}

package/dist/{components → SliceZone}/SliceZone.svelte.d.ts

@@ -3,7 +3,8 @@ import type { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
-             * An array of Prismic Slices, such as the `slices` property from a Prismic document.
+             * An array of Prismic Slices, such as the `slices` property from a Prismic
+             * document.
              */ slices?: ({
             slice_type: string;
         } | {
@@ -31,10 +32,6 @@ declare const __propDef: {
              * 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>;

package/dist/{components → SliceZone}/TodoSliceComponent.svelte

@@ -1,11 +1,14 @@
-<script>export let slice;
-export let dev = false;
+<script>import { DEV } from "esm-env";
+export let slice;
 const type = "slice_type" in slice ? slice.slice_type : slice.type;
-if (dev)
-    console.warn(`[SliceZone] Could not find a component for Slice type "${type}"`, slice);
+if (DEV)
+  console.warn(
+    `[SliceZone] Could not find a component for Slice type "${type}"`,
+    slice
+  );
 </script>
 
-{#if dev}
+{#if DEV}
 	<section data-slice-zone-todo-component="" data-slice-type={type}>
 		Could not find a component for Slice type &ldquo;{type}&rdquo;
 	</section>

package/dist/{components → SliceZone}/TodoSliceComponent.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
         } | {
             type: string;
         };
-        dev?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,3 +1,6 @@
-export { 
-// Components
-PrismicEmbed, PrismicImage, PrismicLink, PrismicText, PrismicRichText, SliceZone, } from "./components";
+export { default as PrismicEmbed } from "./PrismicEmbed.svelte";
+export { default as PrismicImage } from "./PrismicImage.svelte";
+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";

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

@@ -2,7 +2,7 @@
 	import * as prismicH from "@prismicio/helpers";
 	import type * as prismicT from "@prismicio/types";
 	import type { HTMLImgAttributes } from "svelte/elements";
-	import { __PRODUCTION__ } from "$lib/__PRODUCTION__";
+	import { DEV } from "esm-env";
 
 	type PrismicImageProps = {
 		/**
@@ -54,9 +54,20 @@
 		 * 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"> & PrismicImageProps;
+	type $$Props = Omit<HTMLImgAttributes, "alt" | "src" | "srcset"> &
+		PrismicImageProps;
 
 	export let field: $$Props["field"];
 
@@ -74,6 +85,9 @@
 
 	export let fallbackAlt: $$Props["fallbackAlt"] = undefined;
 
+	delete $$restProps.src;
+	delete $$restProps.srcset;
+
 	const castInt = (
 		input: string | number | null | undefined,
 	): number | undefined | null => {
@@ -119,7 +133,7 @@
 		resolvedWidth = castedHeight * ar;
 	}
 
-	if (!__PRODUCTION__) {
+	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.`,
@@ -140,14 +154,14 @@
 	}
 </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} 
+		<PrismicImage
+			field={document.data.example_image}
 			imgixParams={{ sat: -100 }}
 		/>
   ```

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

@@ -6,7 +6,8 @@
 
 	type PrismicLinkProps = {
 		/**
-		 * A Prismic Link field, Content Relationship field, Link to Media field or Document.
+		 * A Prismic Link field, Content Relationship field, Link to Media field or
+		 * Document.
 		 */
 		field: prismicT.LinkField | prismicT.PrismicDocument;
 
@@ -19,9 +20,16 @@
 		 * @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 = HTMLAnchorAttributes & PrismicLinkProps;
+	type $$Props = Omit<HTMLAnchorAttributes, "href"> & PrismicLinkProps;
 
 	export let field: $$Props["field"];
 	export let linkResolver: $$Props["linkResolver"] = undefined;
@@ -35,6 +43,8 @@
 		rel || (target === "_blank" ? "noopener noreferrer" : undefined);
 
 	const href = (field ? prismicH.asLink(field, linkResolver) : "") || "";
+
+	delete $$restProps.href;
 </script>
 
 <!-- 

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

@@ -1,9 +1,21 @@
 <script lang="ts">
-	import { PrismicImage, PrismicEmbed, PrismicLink } from "$lib/components";
 	import type { LinkResolverFunction } from "@prismicio/helpers";
-	import type { RTAnyNode } from "@prismicio/types";
+	import type { TreeNode } from "@prismicio/richtext";
 
-	export let node: RTAnyNode;
+	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;
 </script>

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

@@ -28,38 +28,36 @@
 	export let linkResolver: LinkResolverFunction | undefined = undefined;
 
 	/**
-	 * An object that maps Rich Text blocks to functions.
+	 * An object that maps Rich Text blocks to Svelte components.
 	 *
-	 * @example A serializer that modififes `h1` and `em` elements:
+	 * **Important**: Your components must be wrapped in a function. For example:
+	 * `{ heading1: () => Heading }`, not: `{ heading1: Heading }`.
+	 *
+	 * @example A serializer that modififes `h1` elements:
 	 *
 	 * ```js
 	 * import Title from "./Title.svelte";
 	 *
-	 * const field = exampleRichText;
-	 *
 	 * const richTextSerializer = {
 	 * 	h1: () => Title,
-	 * 	em: ({ children }) => `<mark>${children}</mark>`,
 	 * };
 	 * ```
 	 */
-	export let richTextSerializer:
+	export let components:
 		| RichTextMapSerializer<typeof SvelteComponent, TreeNode>
 		| RichTextFunctionSerializer<typeof SvelteComponent, TreeNode>
 		| undefined = undefined;
 
-	const resolvedSerializer =
-		typeof richTextSerializer === "object"
-			? wrapMapSerializer(richTextSerializer)
-			: richTextSerializer;
+	let resolvedSerializer =
+		typeof components === "object" ? wrapMapSerializer(components) : components;
 
 	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} />

package/dist/src/lib/{components/PrismicRichText → PrismicRichText}/Serialize.svelte

@@ -20,7 +20,10 @@
 		this={(serializer &&
 			serializer(node.type, node.node, node.text, node.children, node.key)) ||
 			Default}
-		{...node}
+		type={node.type}
+		node={node.node}
+		text={node.text}
+		key={node.key}
 		{linkResolver}
 	>
 		{#if node.children.length > 0}

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

@@ -46,7 +46,8 @@
 		| SliceLikeGraphQL<SliceType>;
 
 	/**
-	 * An array of Prismic Slices, such as the `slices` property from a Prismic document.
+	 * An array of Prismic Slices, such as the `slices` property from a Prismic
+	 * document.
 	 */
 	export let slices: SliceLike[] = [];
 
@@ -80,18 +81,12 @@
 		| 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={{
@@ -107,6 +102,6 @@
 	{#if Component}
 		<svelte:component this={Component} {slice} {slices} {context} {index} />
 	{:else}
-		<TodoSliceComponent {slice} {dev} />
+		<TodoSliceComponent {slice} />
 	{/if}
 {/each}

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

@@ -1,17 +1,18 @@
 <script lang="ts">
+	import { DEV } from "esm-env";
+
 	export let slice: { slice_type: string } | { type: string };
-	export let dev: boolean = false;
 
 	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}
+{#if DEV}
 	<section data-slice-zone-todo-component="" data-slice-type={type}>
 		Could not find a component for Slice type &ldquo;{type}&rdquo;
 	</section>

package/dist/src/lib/index.ts

@@ -1,9 +1,6 @@
-export {
-	// Components
-	PrismicEmbed,
-	PrismicImage,
-	PrismicLink,
-	PrismicText,
-	PrismicRichText,
-	SliceZone,
-} from "./components";
+export { default as PrismicEmbed } from "./PrismicEmbed.svelte";
+export { default as PrismicImage } from "./PrismicImage.svelte";
+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";

package/dist/src/routes/+page.server.ts

@@ -1,5 +1,5 @@
 import * as prismic from "@prismicio/client";
-import type { PageDocument } from "../types/PageDocument.type"
+import type { PageDocument } from "../types/PageDocument.type";
 import type { PageServerLoad } from "./$types";
 
 export const load = (async ({ fetch }) => {
@@ -8,13 +8,12 @@ export const load = (async ({ fetch }) => {
 
 	const pageDocument: PageDocument = await client.getSingle("homepage");
 
-	const exampleClient = prismic.createClient("example-prismic-repo", { fetch })
-	const exampleDocument = exampleClient.getFirst({ page: 11, pageSize: 1})
-
+	const exampleClient = prismic.createClient("example-prismic-repo", { fetch });
+	const exampleDocument = exampleClient.getFirst({ page: 11, pageSize: 1 });
 
 	return {
 		pageDocument,
-		exampleDocument
+		exampleDocument,
 	};
-// eslint-disable-next-line prettier/prettier
+	// eslint-disable-next-line prettier/prettier
 }) satisfies PageServerLoad;

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

@@ -7,10 +7,11 @@
 		PrismicText,
 		PrismicEmbed,
 	} from "$lib";
-	import { RichText, CodeSnippet } from "./slices";
 
 	import type { PageData } from "./$types";
-	import { page } from "$app/stores";
+
+	import CodeSnippet from "./slices/CodeSnippet.svelte";
+	import RichText from "./slices/RichText.svelte";
 
 	const components = {
 		rich_text: RichText,

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/svelte",
-	"version": "0.0.8-dev.2",
+	"version": "0.0.10",
 	"description": "Svelte plugin, components, and composables to fetch and present Prismic content",
 	"keywords": [
 		"typescript",
@@ -31,7 +31,7 @@
 		"build": "svelte-package -o dist package && shx cp -r src dist/src",
 		"dev": "vite dev",
 		"format": "prettier --write .",
-		"prepare": "npm run build",
+		"prepare": "npm run build && svelte-kit sync",
 		"release": "npm run build && npm run test && standard-version && git push --follow-tags && npm run build && npm publish",
 		"release:dry": "standard-version --dry-run",
 		"release:alpha": "npm run build && npm run test && standard-version --release-as major --prerelease alpha && git push --follow-tags && npm run build && npm publish --tag alpha",
@@ -58,6 +58,7 @@
 		"@prismicio/mock": "^0.2.0",
 		"@prismicio/types": "^0.2.7",
 		"@rollup/plugin-inject": "^5.0.3",
+		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/package": "^2.0.0",
 		"@typescript-eslint/eslint-plugin": "^5.53.0",
 		"@typescript-eslint/parser": "^5.53.0",
@@ -81,7 +82,7 @@
 		"vitest": "^0.28.5"
 	},
 	"engines": {
-		"node": ">=12.7.0"
+		"node": ">=16.14.2"
 	},
 	"publishConfig": {
 		"access": "public"

package/dist/__PRODUCTION__.d.ts

@@ -1,7 +0,0 @@
-/**
- * `true` if in the production environment, `false` otherwise.
- *
- * This boolean can be used to perform actions only in development environments,
- * such as logging.
- */
-export declare const __PRODUCTION__: boolean;

package/dist/__PRODUCTION__.js

@@ -1,11 +0,0 @@
-// We need to polyfill process if it doesn't exist, such as in the browser.
-if (typeof process === "undefined") {
-    globalThis.process = { env: {} };
-}
-/**
- * `true` if in the production environment, `false` otherwise.
- *
- * This boolean can be used to perform actions only in development environments,
- * such as logging.
- */
-export const __PRODUCTION__ = process.env.NODE_ENV === "production";

package/dist/components/PrismicImage.svelte

@@ -1,90 +0,0 @@
-<script>import * as prismicH from "@prismicio/helpers";
-import { __PRODUCTION__ } from "../__PRODUCTION__";
-export let field;
-export let imgixParams = {};
-export let widths = undefined;
-export let pixelDensities = undefined;
-export let width = undefined;
-export let height = undefined;
-export let alt = undefined;
-export let fallbackAlt = undefined;
-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 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/dist/components/PrismicRichText/PrismicRichText.svelte

@@ -1,49 +0,0 @@
-<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/SliceZone.svelte

@@ -1,59 +0,0 @@
-<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/index.d.ts

@@ -1,6 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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/__PRODUCTION__.ts

@@ -1,12 +0,0 @@
-// We need to polyfill process if it doesn't exist, such as in the browser.
-if (typeof process === "undefined") {
-	globalThis.process = { env: {} } as typeof process;
-}
-
-/**
- * `true` if in the production environment, `false` otherwise.
- *
- * This boolean can be used to perform actions only in development environments,
- * such as logging.
- */
-export const __PRODUCTION__ = process.env.NODE_ENV === "production";

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

@@ -1,11 +0,0 @@
-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/routes/components/index.js

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

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

@@ -1,9 +0,0 @@
-<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/dist/src/routes/slices/index.ts

@@ -1,2 +0,0 @@
-export { default as CodeSnippet } from "./CodeSnippet/index.svelte";
-export { default as RichText } from "./RichText/index.svelte";