@prismicio/svelte 0.0.6 → 0.0.7

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.7](https://github.com/prismicio/prismic-svelte/compare/v0.0.6...v0.0.7) (2023-03-02)
+
+
+### Features
+
+* create `<PrismicImage>` component ([#5](https://github.com/prismicio/prismic-svelte/issues/5)) ([9b29b58](https://github.com/prismicio/prismic-svelte/commit/9b29b58d771ae0d6cf6960a28d35035c7fff23b0))
+
 ### [0.0.6](https://github.com/prismicio/prismic-svelte/compare/v0.0.5...v0.0.6) (2023-02-24)
 
 

package/__PRODUCTION__.js

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

@@ -1,15 +1,91 @@
 <script>import * as prismicH from "@prismicio/helpers";
+import { __PRODUCTION__ } from "../__PRODUCTION__";
 export let field;
-let className;
-export { className as class };
+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 { alt, dimensions } = field}
-	{@const { width, height } = dimensions}
-	{@const { src, srcset } = prismicH.asImageWidthSrcSet(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} {width} {height} class={className} />
+	<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 || ""} class={className} />
+	<img alt={field.alt || ""} {...$$restProps} />
 {/if}

package/components/index.js

@@ -1,5 +1,5 @@
 // export { default as PrismicEmbed } from "./PrismicEmbed.svelte";
-// export { default as PrismicImage } from "./PrismicImage.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.svelte";

package/index.js

@@ -2,8 +2,7 @@
 export { 
 // Components
 // PrismicEmbed,
-// PrismicImage,
-PrismicLink, 
+PrismicImage, PrismicLink, 
 // PrismicText,
 // PrismicRichText,
 // Slice Zone

package/lib/__PRODUCTION__.d.ts

@@ -0,0 +1,7 @@
+/**
+ * `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/lib/components/PrismicImage.svelte.d.ts

@@ -1,9 +1,51 @@
 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;
-        class: string;
+        /**
+         * 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>;
@@ -13,6 +55,17 @@ declare const __propDef: {
 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/lib/components/index.d.ts

@@ -1,2 +1,3 @@
+export { default as PrismicImage } from "./PrismicImage.svelte";
 export { default as PrismicLink } from "./PrismicLink.svelte";
 export { default as SliceZone } from "./SliceZone.svelte";

package/lib/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prismicio/svelte",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Svelte plugin, components, and composables to fetch and present Prismic content",
   "keywords": [
     "typescript",

package/src/lib/__PRODUCTION__.ts

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

@@ -1,20 +1,179 @@
 <script lang="ts">
 	import * as prismicH from "@prismicio/helpers";
 	import type * as prismicT from "@prismicio/types";
+	import { __PRODUCTION__ } from "$lib/__PRODUCTION__";
 
-	export let field: prismicT.ImageField;
+	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?: "";
+	};
 
-	let className: string;
+	type $$Props = Omit<svelteHTML.IntrinsicElements["img"], "alt"> &
+		PrismicImageProps;
 
-	export { className as class };
+	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 { alt, dimensions } = field}
-	{@const { width, height } = dimensions}
-	{@const { src, srcset } = prismicH.asImageWidthSrcSet(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} {width} {height} class={className} />
+	<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 || ""} class={className} />
+	<img alt={field.alt || ""} {...$$restProps} />
 {/if}

package/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/src/lib/components/index.ts

@@ -1,6 +1,6 @@
 // export { default as PrismicEmbed } from "./PrismicEmbed.svelte";
 
-// export { default as PrismicImage } from "./PrismicImage.svelte";
+export { default as PrismicImage } from "./PrismicImage.svelte";
 
 export { default as PrismicLink } from "./PrismicLink.svelte";
 

package/src/lib/index.ts

@@ -3,7 +3,7 @@
 export {
 	// Components
 	// PrismicEmbed,
-	// PrismicImage,
+	PrismicImage,
 	PrismicLink,
 	// PrismicText,
 	// PrismicRichText,

package/src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { SliceZone, PrismicLink } from "$lib";
+	import { SliceZone, PrismicLink, PrismicImage } from "$lib";
 	import { RichText, CodeSnippet } from "./slices";
 	import type { PageData } from "./$types";
 
@@ -13,7 +13,14 @@
 
 <main>
 	<h1>Welcome to SvelteKit</h1>
-	<h2>Prismic Link</h2>
+	<h2><code>PrismicImage</code></h2>
+	<PrismicImage
+		field={data.exampleDocument.data.example_image}
+		pixelDensities="defaults"
+		height="200"
+		alt=""
+	/>
+	<h2><code>PrismicLink</code></h2>
 	<PrismicLink
 		data-sveltekit-noscroll
 		data-sveltekit-preload-code
@@ -23,7 +30,7 @@
 		class="doggo"
 		field={data.exampleDocument.data.example_link}>Link</PrismicLink
 	>
-	<h2>Slice Zone</h2>
+	<h2><code>SliceZone</code></h2>
 	<SliceZone slices={data.pageDocument.data.body} {components} />
 </main>
 
@@ -32,4 +39,9 @@
 		max-width: min(90%, 800px);
 		margin: auto;
 	}
+
+	:global(img) {
+		/* width: 100%; */
+		height: auto;
+	}
 </style>

package/src/types/ExampleDocument.type.ts

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