@prismicio/svelte 0.0.8-dev.1 → 0.0.9

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

@@ -30,6 +30,9 @@
 	/**
 	 * An object that maps Rich Text blocks to functions.
 	 *
+	 * **Important**: Your components must be wrapped in a function. For example:
+	 * `{ heading1: () => Heading }`, not: `{ heading1: Heading }`.
+	 *
 	 * @example A serializer that modififes `h1` and `em` elements:
 	 *
 	 * ```js
@@ -43,23 +46,21 @@
 	 * };
 	 * ```
 	 */
-	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,
@@ -29,7 +30,7 @@
 	<h2><code>PrismicImage</code></h2>
 	<PrismicImage
 		field={data.exampleDocument.data.example_image}
-		height="200px"
+		height="200"
 		alt=""
 	/>
 	<h2><code>PrismicLink</code></h2>

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.1",
+	"version": "0.0.9",
 	"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/PrismicImage.svelte.d.ts

@@ -1,71 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import * as prismicH from "@prismicio/helpers";
-import type * as prismicT from "@prismicio/types";
-declare const __propDef: {
-    props: {
-        /**
-         * 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?: "" | undefined;
-        /**
-         * 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?: "" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type PrismicImageProps = typeof __propDef.props;
-export type PrismicImageEvents = typeof __propDef.events;
-export type PrismicImageSlots = typeof __propDef.slots;
-/**
- * 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 }}
- * 	/>
- *  ```
- */
-export default class PrismicImage extends SvelteComponentTyped<PrismicImageProps, PrismicImageEvents, PrismicImageSlots> {
-}
-export {};

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

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: any;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type PrismicLinkProps = typeof __propDef.props;
-export type PrismicLinkEvents = typeof __propDef.events;
-export type PrismicLinkSlots = typeof __propDef.slots;
-/**
- * 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>
- *  ```
- */
-export default class PrismicLink extends SvelteComponentTyped<PrismicLinkProps, PrismicLinkEvents, PrismicLinkSlots> {
-}
-export {};

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";