@prismicio/svelte 0.0.5 → 0.0.7

package/CHANGELOG.md

@@ -2,12 +2,30 @@
 
 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.5](https://github.com/prismicio/prismic-svelte/compare/v0.0.4...v0.0.5) (2023-02-23)
+### [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)
+
+
+### Features
+
+* add `<PrismicLink>` component ([1db9dc0](https://github.com/prismicio/prismic-svelte/commit/1db9dc0cd6a24de87505b5e1486fe9458cb7be01))
+
+
+### Chore
+
+* fix slice typing ([16340b3](https://github.com/prismicio/prismic-svelte/commit/16340b320396f69127e89d26dae498baff8fa299))
+
+### [0.0.5](https://github.com/prismicio/prismic-svelte/compare/v0.0.4...v0.0.5) (2023-02-23)
 
 ### Chore
 
-* upgrade SvelteKit to 1.0 ([#3](https://github.com/prismicio/prismic-svelte/issues/3)) ([8d5addc](https://github.com/prismicio/prismic-svelte/commit/8d5addcdd669895ccacb666286b57af7825f4869))
+- upgrade SvelteKit to 1.0 ([#3](https://github.com/prismicio/prismic-svelte/issues/3)) ([8d5addc](https://github.com/prismicio/prismic-svelte/commit/8d5addcdd669895ccacb666286b57af7825f4869))
 
 ### [0.0.4](https://github.com/prismicio/prismic-svelte/compare/v0.0.3...v0.0.4) (2022-05-27)
 

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,17 +1,91 @@
 <script>import * as prismicH from "@prismicio/helpers";
+import { __PRODUCTION__ } from "../__PRODUCTION__";
 export let field;
-let className;
-// creates a `class` property, even
-// though it is a reserved word
-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/PrismicLink.svelte

@@ -1,44 +1,25 @@
 <script>import * as prismicH from "@prismicio/helpers";
-import { usePrismic } from "../usePrismic";
-// const defaultBlankTargetRelAttribute = "noopener noreferrer";
-export let field, linkResolver, download, hreflang, referrerpolicy, rel, target, type, prefetch, noscroll;
-const setRel = () => {
-    let rels = [];
-    const defaultBlankTargetRelAttribute = ["noopener", "noreferrer"];
-    if (rel)
-        rels.push(...rel?.split(" "));
-    if ((field && "target" in field && field?.target === "_blank") ||
-        target === "_blank")
-        defaultBlankTargetRelAttribute.forEach((item) => {
-            if (!rels.includes(item))
-                rels.push(item);
-        });
-    if (field &&
-        "link_type" in field &&
-        field?.link_type === "Web" &&
-        !rels.includes("external"))
-        rels.push("external");
-    return rels.join(" ");
-};
-const attrs = {
-    download,
-    hreflang,
-    referrerpolicy,
-    target: target || field?.target || undefined,
-    rel: setRel(),
-    type,
-};
-const link = field
-    ? prismicH.asLink(field, linkResolver || usePrismic().linkResolver)
-    : "";
-const href = link || "";
+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);
+const href = (field ? prismicH.asLink(field, linkResolver) : "") || "";
 </script>
 
-<a
-	{href}
-	{...attrs}
-	sveltekit:prefetch={prefetch}
-	sveltekit:noscroll={noscroll}
->
+<!-- 
+  @component
+  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>
+  ```
+-->
+
+<a {href} {...$$restProps} rel={resolvedRel} target={resolvedTarget}>
 	<slot />
 </a>

package/components/index.js

@@ -1,6 +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 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";
 // export { default as PrismicPreview } from "./PrismicPreview.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/PrismicLink.svelte.d.ts

@@ -1,19 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import * as prismicH from "@prismicio/helpers";
-import type * as prismicT from "@prismicio/types";
 declare const __propDef: {
-    props: {
-        field: prismicT.LinkField | prismicT.PrismicDocument | null | undefined;
-        linkResolver: prismicH.LinkResolverFunction | null | undefined;
-        download: boolean | null | undefined;
-        hreflang: string | undefined;
-        referrerpolicy: string | undefined;
-        rel: string | undefined;
-        target: string | undefined;
-        type: string | undefined;
-        prefetch: true | undefined;
-        noscroll: true | undefined;
-    };
+    props: any;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -24,6 +11,16 @@ declare const __propDef: {
 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/lib/components/index.d.ts

@@ -1 +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 { SliceZone, } from "./components";
+export { PrismicImage, PrismicLink, SliceZone, } from "./components";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prismicio/svelte",
-  "version": "0.0.5",
+  "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,22 +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;
 
-	// creates a `class` property, even
-	// though it is a reserved word
-	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,67 +1,53 @@
 <script lang="ts">
 	import * as prismicH from "@prismicio/helpers";
 	import type * as prismicT from "@prismicio/types";
+	// import { usePrismic } from "../usePrismic";
 
-	import { usePrismic } from "../usePrismic";
+	type PrismicLinkProps = {
+		/**
+		 * A Prismic Link field, Content Relationship field, Link to Media field or Document.
+		 */
+		field: prismicT.LinkField | prismicT.PrismicDocument;
 
-	// const defaultBlankTargetRelAttribute = "noopener noreferrer";
+		/**
+		 * 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/core-concepts/link-resolver-route-resolver}
+		 */
+		linkResolver?: prismicH.LinkResolverFunction | undefined;
+	};
 
-	export let field:
-			| prismicT.LinkField
-			| prismicT.PrismicDocument
-			| null
-			| undefined,
-		linkResolver: prismicH.LinkResolverFunction | null | undefined,
-		download: boolean | null | undefined,
-		hreflang: string | undefined,
-		referrerpolicy: string | undefined,
-		rel: string | undefined,
-		target: string | undefined,
-		type: string | undefined,
-		prefetch: true | undefined,
-		noscroll: true | undefined;
+	type $$Props = svelteHTML.IntrinsicElements["a"] & PrismicLinkProps;
 
-	const setRel = () => {
-		let rels: string[] = [];
-		const defaultBlankTargetRelAttribute = ["noopener", "noreferrer"];
-		if (rel) rels.push(...rel?.split(" "));
-		if (
-			(field && "target" in field && field?.target === "_blank") ||
-			target === "_blank"
-		)
-			defaultBlankTargetRelAttribute.forEach((item) => {
-				if (!rels.includes(item)) rels.push(item);
-			});
-		if (
-			field &&
-			"link_type" in field &&
-			field?.link_type === "Web" &&
-			!rels.includes("external")
-		)
-			rels.push("external");
-		return rels.join(" ");
-	};
+	export let field: $$Props["field"];
+	export let linkResolver: $$Props["linkResolver"] = undefined;
 
-	const attrs = {
-		download,
-		hreflang,
-		referrerpolicy,
-		target: target || field?.target || undefined,
-		rel: setRel(),
-		type,
-	};
+	export let target: $$Props["target"] = undefined;
+	const resolvedTarget =
+		target || (field && "target" in field && field.target) || undefined;
 
-	const link: string | null = field
-		? prismicH.asLink(field, linkResolver || usePrismic().linkResolver)
-		: "";
-	const href: string = link || "";
+	export let rel: $$Props["rel"] = undefined;
+	const resolvedRel =
+		rel || (target === "_blank" ? "noopener noreferrer" : undefined);
+
+	const href = (field ? prismicH.asLink(field, linkResolver) : "") || "";
 </script>
 
-<a
-	{href}
-	{...attrs}
-	sveltekit:prefetch={prefetch}
-	sveltekit:noscroll={noscroll}
->
+<!-- 
+  @component
+  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>
+  ```
+-->
+
+<a {href} {...$$restProps} rel={resolvedRel} target={resolvedTarget}>
 	<slot />
 </a>

package/src/lib/components/index.ts

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

package/src/lib/index.ts

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

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

@@ -3,13 +3,18 @@ import type { PageDocument } from "../types/PageDocument.type"
 import type { PageServerLoad } from "./$types";
 
 export const load = (async ({ fetch }) => {
-	const endpoint = prismic.getEndpoint("svelte-package-dev");
+	const endpoint = prismic.getRepositoryEndpoint("svelte-package-dev");
 	const client = prismic.createClient(endpoint, { fetch });
 
-	const document: PageDocument = await client.getSingle("homepage");
+	const pageDocument: PageDocument = await client.getSingle("homepage");
+
+	const exampleClient = prismic.createClient("example-prismic-repo", { fetch })
+	const exampleDocument = exampleClient.getFirst()
+
 
 	return {
-		document,
+		pageDocument,
+		exampleDocument
 	};
 // eslint-disable-next-line prettier/prettier
 }) satisfies PageServerLoad;

package/src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { SliceZone } from "$lib";
-	import { RichText, CodeSnippet } from "src/routes/slices";
+	import { SliceZone, PrismicLink, PrismicImage } from "$lib";
+	import { RichText, CodeSnippet } from "./slices";
 	import type { PageData } from "./$types";
 
 	const components = {
@@ -13,7 +13,25 @@
 
 <main>
 	<h1>Welcome to SvelteKit</h1>
-	<SliceZone slices={data.document.data.body} {components} />
+	<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
+		data-sveltekit-preload-data
+		data-sveltekit-reload
+		rel="external"
+		class="doggo"
+		field={data.exampleDocument.data.example_link}>Link</PrismicLink
+	>
+	<h2><code>SliceZone</code></h2>
+	<SliceZone slices={data.pageDocument.data.body} {components} />
 </main>
 
 <style>
@@ -21,4 +39,9 @@
 		max-width: min(90%, 800px);
 		margin: auto;
 	}
+
+	:global(img) {
+		/* width: 100%; */
+		height: auto;
+	}
 </style>

package/src/types/CodeSnippetSlice.type.ts

@@ -1,5 +1,7 @@
 import type * as prismicT from "@prismicio/types";
 
-export type CodeSnippetSlice = prismicT.Slice<{
+type PrimaryFields = {
 	content: prismicT.RichTextField;
-}>;
+};
+
+export type CodeSnippetSlice = prismicT.Slice<"code_snippet", PrimaryFields>;

package/src/types/ExampleDocument.type.ts

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

package/src/types/index.ts

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