@prismicio/svelte 0.0.11 → 0.1.0

package/dist/SliceZone/SliceZone.svelte

@@ -1,4 +1,4 @@
-<script>import TodoSliceComponent from "./TodoSliceComponent.svelte";
+<script>import TodoComponent from "./TodoComponent.svelte";
 export let slices = [];
 export let components = {};
 export let context = {};
@@ -7,15 +7,18 @@ export let defaultComponent = void 0;
 
 <!--
   @component
-  Component to render an array of Prismic Slices.
+  Component to render an array of Prismic slices.
 
-  @example Rendering a Rich Text field:
+  @example Rendering a Slice Zone:
 	```svelte
-		<SliceZone slices={document.data.slices} components={{
-			block_quote: BlockQuote,
-			hero_image: HeroImage
-		}} />
-  ```
+		<SliceZone
+			slices={document.data.slices}
+			components={{
+				block_quote: BlockQuote,
+				hero_image: HeroImage
+			}}
+		/>
+	```
 -->
 
 {#each slices as slice, index}
@@ -24,6 +27,6 @@ export let defaultComponent = void 0;
 	{#if Component}
 		<svelte:component this={Component} {slice} {slices} {context} {index} />
 	{:else}
-		<TodoSliceComponent {slice} />
+		<TodoComponent {slice} />
 	{/if}
 {/each}

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

@@ -1,5 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-import type { SvelteComponent } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -11,7 +10,7 @@ declare const __propDef: {
             type: string;
         })[] | undefined;
         /**
-             * An object that maps Slice components to their corresponding API IDs
+             * An object that maps Slice components to their corresponding API IDs.
              *
              * @example An example map:
              *
@@ -24,14 +23,40 @@ declare const __propDef: {
              * 	hero_image: HeroImage,
              * };
              * ```
-             */ components?: Record<string, new (...args: any[]) => SvelteComponent> | undefined;
+             */ components?: Record<string, new (...args: any[]) => SvelteComponent<{
+            slice: {
+                slice_type: string;
+            } | {
+                type: string;
+            };
+            slices: ({
+                slice_type: string;
+            } | {
+                type: string;
+            })[];
+            context: unknown;
+            index: number;
+        }, any, any>> | undefined;
         /**
              * Arbitrary data passed to all Slice components as a `context` prop.
              */ context?: any;
         /**
              * The Svelte component rendered if a component mapping from the `components`
              * prop cannot be found.
-             */ defaultComponent?: SvelteComponent | (new (...args: any[]) => SvelteComponent) | undefined;
+             */ defaultComponent?: (new (...args: any[]) => SvelteComponent<{
+            slice: {
+                slice_type: string;
+            } | {
+                type: string;
+            };
+            slices: ({
+                slice_type: string;
+            } | {
+                type: string;
+            })[];
+            context: unknown;
+            index: number;
+        }, any, any>) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -42,16 +67,19 @@ export type SliceZoneProps = typeof __propDef.props;
 export type SliceZoneEvents = typeof __propDef.events;
 export type SliceZoneSlots = typeof __propDef.slots;
 /**
- * Component to render an array of Prismic Slices.
+ * Component to render an array of Prismic slices.
  *
- *  @example Rendering a Rich Text field:
+ *  @example Rendering a Slice Zone:
  * ```svelte
- * 	<SliceZone slices={document.data.slices} components={{
- * 		block_quote: BlockQuote,
- * 		hero_image: HeroImage
- * 	}} />
- *  ```
+ * 	<SliceZone
+ * 		slices={document.data.slices}
+ * 		components={{
+ * 			block_quote: BlockQuote,
+ * 			hero_image: HeroImage
+ * 		}}
+ * 	/>
+ * ```
  */
-export default class SliceZone extends SvelteComponentTyped<SliceZoneProps, SliceZoneEvents, SliceZoneSlots> {
+export default class SliceZone extends SvelteComponent<SliceZoneProps, SliceZoneEvents, SliceZoneSlots> {
 }
 export {};

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

@@ -1,11 +1,12 @@
 <script>import { DEV } from "esm-env";
 export let slice;
 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}

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        slice: {
+            slice_type: string;
+        } | {
+            type: string;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TodoComponentProps = typeof __propDef.props;
+export type TodoComponentEvents = typeof __propDef.events;
+export type TodoComponentSlots = typeof __propDef.slots;
+export default class TodoComponent extends SvelteComponent<TodoComponentProps, TodoComponentEvents, TodoComponentSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -4,3 +4,4 @@ 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";
+export type { SvelteRichTextSerializer } from "./types";

package/dist/lib/devMsg.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Returns a `prismic.dev/msg` URL for a given message slug.
+ *
+ * @example
+ *
+ * ```ts
+ * devMsg("missing-param");
+ * // => "https://prismic.dev/msg/svelte/v1.2.3/missing-param.md"
+ * ```
+ *
+ * @param slug - Slug for the message. This corresponds to a Markdown file in
+ *   the Git repository's `/messages` directory.
+ *
+ * @returns The `prismic.dev/msg` URL for the given slug.
+ */
+export declare const devMsg: (slug: string) => string;

package/dist/lib/devMsg.js

@@ -0,0 +1,19 @@
+import { version } from "../../package.json";
+/**
+ * Returns a `prismic.dev/msg` URL for a given message slug.
+ *
+ * @example
+ *
+ * ```ts
+ * devMsg("missing-param");
+ * // => "https://prismic.dev/msg/svelte/v1.2.3/missing-param.md"
+ * ```
+ *
+ * @param slug - Slug for the message. This corresponds to a Markdown file in
+ *   the Git repository's `/messages` directory.
+ *
+ * @returns The `prismic.dev/msg` URL for the given slug.
+ */
+export const devMsg = (slug) => {
+    return `https://prismic.dev/msg/react/v${version}/${slug}`;
+};

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type { RTAnyNode, RichTextNodeType } from "@prismicio/client";
+import type { SvelteComponent } from "svelte";
+export type SvelteRichTextSerializer = Partial<Record<keyof typeof RichTextNodeType, SvelteRichTextComponent>>;
+type SvelteRichTextComponent = new (...args: any[]) => SvelteComponent<Partial<{
+    node: RTAnyNode;
+}>>;
+export {};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,11 +1,10 @@
 {
 	"name": "@prismicio/svelte",
-	"version": "0.0.11",
-	"description": "Svelte plugin, components, and composables to fetch and present Prismic content",
+	"version": "0.1.0",
+	"description": "Svelte components to present Prismic content.",
 	"keywords": [
 		"typescript",
-		"prismic",
-		"svelte"
+		"prismic"
 	],
 	"repository": {
 		"type": "git",
@@ -15,134 +14,75 @@
 	"author": "Prismic <contact@prismic.io> (https://prismic.io)",
 	"type": "module",
 	"exports": {
-		"./package.json": "./package.json",
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js",
 			"default": "./dist/index.js"
 		},
-		"./index.d.ts": "./dist/index.d.ts"
+		"./package.json": "./package.json"
 	},
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
 	"types": "./dist/index.d.ts",
-	"svelte": "./dist/index.js",
+	"files": [
+		"./dist",
+		"./src"
+	],
 	"scripts": {
-		"build": "svelte-package -o dist package && shx cp -r src dist/src",
-		"dev": "vite dev",
-		"format": "prettier --write .",
-		"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",
-		"release:alpha:dry": "standard-version --release-as major --prerelease alpha --dry-run",
-		"release:dev": "npm run build && npm run test && standard-version --prerelease dev && git push --follow-tags && npm run build && npm publish --tag dev",
-		"release:dev:dry": "standard-version --prerelease dev --dry-run",
+		"build": "svelte-package --input ./src",
+		"dev": "svelte-package --input ./src --watch",
+		"format": "prettier --write --plugin prettier-plugin-svelte .",
 		"lint": "eslint --ext .js,.ts .",
+		"prepare": "npm run build",
+		"release": "npm run test && standard-version && git push --follow-tags && npm run build && npm publish",
+		"release:alpha": "npm run test && standard-version --release-as major --prerelease alpha && git push --follow-tags && npm run build && npm publish --tag alpha",
+		"release:alpha:dry": "standard-version --release-as major --prerelease alpha --dry-run",
+		"release:dry": "standard-version --dry-run",
+		"size": "size-limit",
+		"test": "npm run lint && npm run types && npm run unit && npm run build && npm run size",
+		"types": "vitest typecheck --run && tsc --noEmit",
+		"types:watch": "vitest typecheck",
 		"unit": "vitest run --coverage",
-		"unit:watch": "vitest watch",
-		"test": "npm run lint && npm run unit",
-		"preview": "svelte-kit preview",
-		"package": "svelte-package -o dist package",
-		"check": "svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
+		"unit:watch": "vitest watch"
 	},
 	"dependencies": {
-		"@prismicio/client": "^6.7.3",
-		"@prismicio/helpers": "^2.3.9",
-		"@prismicio/richtext": "^2.2.0-alpha.0",
-		"@sveltejs/kit": "^1.8.3",
-		"svelte": "^3.55.1"
+		"@prismicio/richtext": "^2.1.5",
+		"esm-env": "^1.0.0"
 	},
 	"devDependencies": {
-		"@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",
-		"@vitest/coverage-c8": "^0.28.5",
-		"c8": "^7.13.0",
-		"eslint": "^8.15.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-prettier": "^4.2.0",
-		"eslint-plugin-svelte3": "^4.0.0",
-		"eslint-plugin-tsdoc": "^0.2.16",
-		"prettier": "^2.8.4",
-		"prettier-plugin-jsdoc": "^0.3.38",
-		"prettier-plugin-svelte": "^2.9.0",
-		"shx": "^0.3.4",
-		"standard-version": "^9.3.2",
-		"svelte-check": "^3.0.3",
-		"svelte-preprocess": "^5.0.1",
-		"svelte2tsx": "^0.6.1",
-		"tslib": "^2.5.0",
-		"typescript": "^4.9.5",
-		"vitest": "^0.28.5"
+		"@prismicio/client": "^7.1.1",
+		"@prismicio/mock": "^0.3.1",
+		"@size-limit/preset-small-lib": "^8.2.6",
+		"@sveltejs/package": "^2.2.1",
+		"@sveltejs/vite-plugin-svelte": "^2.4.5",
+		"@testing-library/svelte": "^4.0.3",
+		"@trivago/prettier-plugin-sort-imports": "^4.2.0",
+		"@typescript-eslint/eslint-plugin": "^6.4.1",
+		"@typescript-eslint/parser": "^6.4.1",
+		"@vitest/coverage-v8": "^0.34.2",
+		"eslint": "^8.47.0",
+		"eslint-config-prettier": "^9.0.0",
+		"eslint-plugin-prettier": "^5.0.0",
+		"eslint-plugin-svelte": "^2.33.0",
+		"eslint-plugin-tsdoc": "^0.2.17",
+		"happy-dom": "^10.11.0",
+		"prettier": "^3.0.2",
+		"prettier-plugin-jsdoc": "^1.0.1",
+		"prettier-plugin-svelte": "^3.0.3",
+		"size-limit": "^8.2.6",
+		"standard-version": "^9.5.0",
+		"svelte": "^4.2.0",
+		"typescript": "^5.1.6",
+		"vitest": "^0.34.2"
+	},
+	"peerDependencies": {
+		"@prismicio/client": ">=7",
+		"svelte": ">=4"
 	},
 	"engines": {
-		"node": ">=16.14.2"
+		"node": ">=14.15.0"
 	},
 	"publishConfig": {
 		"access": "public"
-	},
-	"optionalDependencies": {
-		"@esbuild/android-arm": "^0.17.10"
-	},
-	"files": [
-		"dist"
-	],
-	"typesVersions": {
-		">4.0": {
-			"PrismicProvider.svelte": [
-				"./dist/PrismicProvider.svelte.d.ts"
-			],
-			"components/PrismicEmbed.svelte": [
-				"./dist/components/PrismicEmbed.svelte.d.ts"
-			],
-			"components/PrismicImage.svelte": [
-				"./dist/components/PrismicImage.svelte.d.ts"
-			],
-			"components/PrismicLink.svelte": [
-				"./dist/components/PrismicLink.svelte.d.ts"
-			],
-			"components/PrismicPreview.svelte": [
-				"./dist/components/PrismicPreview.svelte.d.ts"
-			],
-			"components/PrismicRichText/DefaultComponent.svelte": [
-				"./dist/components/PrismicRichText/DefaultComponent.svelte.d.ts"
-			],
-			"components/PrismicRichText/PrismicRichText.svelte": [
-				"./dist/components/PrismicRichText/PrismicRichText.svelte.d.ts"
-			],
-			"components/PrismicRichText/Serialize.svelte": [
-				"./dist/components/PrismicRichText/Serialize.svelte.d.ts"
-			],
-			"components/PrismicText.svelte": [
-				"./dist/components/PrismicText.svelte.d.ts"
-			],
-			"components/SliceZone.svelte": [
-				"./dist/components/SliceZone.svelte.d.ts"
-			],
-			"components/TodoSliceComponent.svelte": [
-				"./dist/components/TodoSliceComponent.svelte.d.ts"
-			],
-			"components": [
-				"./dist/components/index.d.ts"
-			],
-			"configurePrismic": [
-				"./dist/configurePrismic.d.ts"
-			],
-			"index": [
-				"./dist/index.d.ts"
-			],
-			"injectionSymbols": [
-				"./dist/injectionSymbols.d.ts"
-			],
-			"usePrismic": [
-				"./dist/usePrismic.d.ts"
-			]
-		}
 	}
 }

package/src/PrismicEmbed.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { EmbedField } from "@prismicio/client";
+	import { isFilled } from "@prismicio/client";
+
+	/**
+	 * An Embed field from Prismic.
+	 */
+	export let field: EmbedField;
+</script>
+
+<!--
+  @component
+  Component to render a Prismic embed field.
+
+  @example Rendering an embed field:
+	```svelte
+		<PrismicEmbed field={document.data.example_embed} />
+	```
+-->
+
+{#if isFilled.embed(field)}
+	<div
+		data-oembed={field.embed_url}
+		data-oembed-type={field.type}
+		data-oembed-provider={field.provider_name}
+	>
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html field.html}
+	</div>
+{/if}

package/src/PrismicImage.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+	import {
+		asImageWidthSrcSet,
+		asImagePixelDensitySrcSet,
+		isFilled,
+		type ImageFieldImage,
+	} from "@prismicio/client";
+	import type { ImgixURLParams } from "imgix-url-builder";
+	import type { HTMLImgAttributes } from "svelte/elements";
+
+	type $$Props = Omit<HTMLImgAttributes, "src" | "srcset" | "alt"> & {
+		/**
+		 * The Prismic image field or thumbnail to render.
+		 */
+		field: ImageFieldImage | null | undefined;
+
+		/**
+		 * An object of Imgix URL API parameters to transform the image.
+		 *
+		 * See: https://docs.imgix.com/apis/rendering
+		 */
+		imgixParams?: ImgixURLParams;
+
+		/**
+		 * 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?: "";
+	} & (
+			| {
+					/**
+					 * 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 asImageWidthSrcSet>[1]>["widths"]
+						| "defaults";
+					pixelDensities?: never;
+			  }
+			| {
+					/**
+					 * 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 asImagePixelDensitySrcSet>[1]
+						  >["pixelDensities"]
+						| "defaults";
+					widths?: never;
+			  }
+		);
+
+	export let field: $$Props["field"];
+	export let imgixParams: $$Props["imgixParams"] = {};
+	export let alt: $$Props["alt"] = undefined;
+	export let fallbackAlt: $$Props["fallbackAlt"] = undefined;
+	export let width: $$Props["width"] = undefined;
+	export let height: $$Props["width"] = undefined;
+	export let widths: $$Props["widths"] = undefined;
+	export let pixelDensities: $$Props["pixelDensities"] = undefined;
+
+	let src: string | undefined = undefined;
+	let srcset: string | undefined = undefined;
+	let resolvedWidth: $$Props["width"] = undefined;
+	let resolvedHeight: $$Props["height"] = undefined;
+
+	$: {
+		if (isFilled.imageThumbnail(field)) {
+			const castInt = (
+				input: string | number | null | undefined,
+			): number | null | undefined => {
+				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.width / field.dimensions.height;
+
+			const castedWidth = castInt(width);
+			const castedHeight = castInt(height);
+
+			resolvedWidth = castedWidth ?? field.dimensions.width;
+			resolvedHeight = castedHeight ?? field.dimensions.height;
+
+			if (castedWidth != null && castedHeight == null) {
+				resolvedHeight = castedWidth / ar;
+			} else if (castedWidth == null && castedHeight != null) {
+				resolvedWidth = castedHeight * ar;
+			}
+
+			if (widths || !pixelDensities) {
+				const res = asImageWidthSrcSet(field, {
+					...imgixParams,
+					widths: widths === "defaults" ? undefined : widths,
+				});
+
+				src = res.src;
+				srcset = res.srcset;
+			} else if (pixelDensities) {
+				const res = asImagePixelDensitySrcSet(field, {
+					...imgixParams,
+					pixelDensities:
+						pixelDensities === "defaults" ? undefined : pixelDensities,
+				} as ImgixURLParams);
+
+				src = res.src;
+				srcset = res.srcset;
+			}
+		}
+	}
+</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 isFilled.imageThumbnail(field)}
+	<img
+		{src}
+		{srcset}
+		alt={alt ?? (field.alt || fallbackAlt)}
+		width={resolvedWidth}
+		height={resolvedHeight}
+		{...$$restProps}
+	/>
+{/if}

package/src/PrismicLink.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import {
+		asLinkAttrs,
+		type AsLinkAttrsConfig,
+		type LinkField,
+		type PrismicDocument,
+	} from "@prismicio/client";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+
+	type $$Props = Omit<HTMLAnchorAttributes, "rel" | "href"> & {
+		/**
+		 * The `rel` attribute for the link. By default, `"noreferrer"` is provided
+		 * if the link's URL is external. This prop can be provided a function to
+		 * use the link's metadata to determine the `rel` value.
+		 */
+		rel?: string | AsLinkAttrsConfig["rel"];
+	} & (
+			| {
+					/**
+					 * A Prismic link field, content relationship field, or link to media
+					 * field.
+					 */
+					field: LinkField;
+					document?: never;
+			  }
+			| {
+					/**
+					 * A Prismic document.
+					 */
+					document: PrismicDocument;
+					field?: never;
+			  }
+		);
+
+	export let field: $$Props["field"] = undefined;
+	export let document: $$Props["document"] = undefined;
+	export let rel: $$Props["rel"] = undefined;
+
+	$: linkAttrs = asLinkAttrs(field ?? document, {
+		rel: typeof rel === "function" ? rel : undefined,
+	});
+
+	$: resolvedRel = typeof rel === "string" ? rel : linkAttrs.rel;
+</script>
+
+<!--
+  @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 {...linkAttrs} rel={resolvedRel} href={linkAttrs.href} {...$$restProps}>
+	<slot />
+</a>