@prismicio/svelte 0.0.3 → 0.0.5

package/CHANGELOG.md

@@ -2,59 +2,65 @@
 
 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.3](https://github.com/prismicio/prismic-svelte/compare/v0.0.2...v0.0.3) (2022-05-17)
+### [0.0.5](https://github.com/prismicio/prismic-svelte/compare/v0.0.4...v0.0.5) (2023-02-23)
 
 
-### Bug Fixes
+### Chore
 
-* change dev default value to ([11903bc](https://github.com/prismicio/prismic-svelte/commit/11903bc0e11f86e57bdebee3888c8b7efcffac97))
+* 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)
 
-### Documentation
+### Chore
+
+- Update docs link ([e8d14cf](https://github.com/prismicio/prismic-svelte/commit/e8d14cf66ee9c52d624848dbcabe29a531ecae5e))
+
+### [0.0.3](https://github.com/prismicio/prismic-svelte/compare/v0.0.2...v0.0.3) (2022-05-17)
 
-* add experimental disclaimer ([3779ec1](https://github.com/prismicio/prismic-svelte/commit/3779ec199cbcbf5d04bacbf2274cf484c1eec0db))
+### Bug Fixes
+
+- change dev default value to ([11903bc](https://github.com/prismicio/prismic-svelte/commit/11903bc0e11f86e57bdebee3888c8b7efcffac97))
+
+### Documentation
 
+- add experimental disclaimer ([3779ec1](https://github.com/prismicio/prismic-svelte/commit/3779ec199cbcbf5d04bacbf2274cf484c1eec0db))
 
 ### Chore
 
-* **deps:** maintain lock file ([d7ab62f](https://github.com/prismicio/prismic-svelte/commit/d7ab62f28884c2734ef2ae96b6a2f094ef835211))
+- **deps:** maintain lock file ([d7ab62f](https://github.com/prismicio/prismic-svelte/commit/d7ab62f28884c2734ef2ae96b6a2f094ef835211))
 
 ### [0.0.2](https://github.com/prismicio/prismic-svelte/compare/v0.0.1...v0.0.2) (2022-05-13)
 
-
 ### Chore
 
-* fix release script ([074d4fb](https://github.com/prismicio/prismic-svelte/commit/074d4fbdd6e3a7fd49b2e7fbe6b8a6b7b315491f))
-* fix release script ([026072a](https://github.com/prismicio/prismic-svelte/commit/026072ac3ff6fe08e161ac15c8776767af70f0d3))
+- fix release script ([074d4fb](https://github.com/prismicio/prismic-svelte/commit/074d4fbdd6e3a7fd49b2e7fbe6b8a6b7b315491f))
+- fix release script ([026072a](https://github.com/prismicio/prismic-svelte/commit/026072ac3ff6fe08e161ac15c8776767af70f0d3))
 
 ### 0.0.1 (2022-05-13)
 
-
 ### Features
 
-* Change PrismicProvider prop to only Command line to bootstrap prismic projects. ([e4675d4](https://github.com/prismicio/prismic-svelte/commit/e4675d48d4a2d9fe89c04aa4273948ef2a84d018))
-* Finish creating components; Create Slices for route. ([5b18487](https://github.com/prismicio/prismic-svelte/commit/5b1848736dcf5d75e09556a57756017fc46847f4))
-* Get htmlSerializer from context in PrismicRichText ([36664bc](https://github.com/prismicio/prismic-svelte/commit/36664bc72d7e9eb6cd353c96ae22ed209143a905))
-* Handle missing url ([54b3a75](https://github.com/prismicio/prismic-svelte/commit/54b3a7529eda7b29542483a5b7b0ab33c2b22643))
-* Improve mock data ([782a0f0](https://github.com/prismicio/prismic-svelte/commit/782a0f031c41aeefb2d14220146087fc164b6eae))
-* Merge Lucie's and Sam's link components ([3ea6c7f](https://github.com/prismicio/prismic-svelte/commit/3ea6c7fdb48ad718a62f0cf70662fdb79e6e7d96))
-* Rename  to ([cc271cb](https://github.com/prismicio/prismic-svelte/commit/cc271cb285089f3bc6104b771711fe62fb3f5fea))
-* revamp slicezone component ([65c55b8](https://github.com/prismicio/prismic-svelte/commit/65c55b84f7c7eea7e65470f6b5a101c7749d2cde))
-* setup link component ([0545d48](https://github.com/prismicio/prismic-svelte/commit/0545d48fcb0413f40e917d1f4857996d5f402e69))
-* setup prismic provider ([9b9752f](https://github.com/prismicio/prismic-svelte/commit/9b9752fce5f4754bc195e83f44a4bb081e203b95))
-* Setup Prismicimage component ([0033cb5](https://github.com/prismicio/prismic-svelte/commit/0033cb515f2444a5f45040d28a27bf05ac7e0dd0))
-
+- Change PrismicProvider prop to only Command line to bootstrap prismic projects. ([e4675d4](https://github.com/prismicio/prismic-svelte/commit/e4675d48d4a2d9fe89c04aa4273948ef2a84d018))
+- Finish creating components; Create Slices for route. ([5b18487](https://github.com/prismicio/prismic-svelte/commit/5b1848736dcf5d75e09556a57756017fc46847f4))
+- Get htmlSerializer from context in PrismicRichText ([36664bc](https://github.com/prismicio/prismic-svelte/commit/36664bc72d7e9eb6cd353c96ae22ed209143a905))
+- Handle missing url ([54b3a75](https://github.com/prismicio/prismic-svelte/commit/54b3a7529eda7b29542483a5b7b0ab33c2b22643))
+- Improve mock data ([782a0f0](https://github.com/prismicio/prismic-svelte/commit/782a0f031c41aeefb2d14220146087fc164b6eae))
+- Merge Lucie's and Sam's link components ([3ea6c7f](https://github.com/prismicio/prismic-svelte/commit/3ea6c7fdb48ad718a62f0cf70662fdb79e6e7d96))
+- Rename to ([cc271cb](https://github.com/prismicio/prismic-svelte/commit/cc271cb285089f3bc6104b771711fe62fb3f5fea))
+- revamp slicezone component ([65c55b8](https://github.com/prismicio/prismic-svelte/commit/65c55b84f7c7eea7e65470f6b5a101c7749d2cde))
+- setup link component ([0545d48](https://github.com/prismicio/prismic-svelte/commit/0545d48fcb0413f40e917d1f4857996d5f402e69))
+- setup prismic provider ([9b9752f](https://github.com/prismicio/prismic-svelte/commit/9b9752fce5f4754bc195e83f44a4bb081e203b95))
+- Setup Prismicimage component ([0033cb5](https://github.com/prismicio/prismic-svelte/commit/0033cb515f2444a5f45040d28a27bf05ac7e0dd0))
 
 ### Bug Fixes
 
-* Add shx so commands work cross platform ([1731f64](https://github.com/prismicio/prismic-svelte/commit/1731f64fa9310fdb93cf15b250320e0939d73f8b))
-
+- Add shx so commands work cross platform ([1731f64](https://github.com/prismicio/prismic-svelte/commit/1731f64fa9310fdb93cf15b250320e0939d73f8b))
 
 ### Chore
 
-* Add TODOs, rename plaintext component ([691aab7](https://github.com/prismicio/prismic-svelte/commit/691aab7bc9d47d2bdb47024e30ca90301813c85d))
-* init project ([9afa15a](https://github.com/prismicio/prismic-svelte/commit/9afa15a8a4372de8eb5b16e087433d2a640a93a0))
-* maintain repository ([e3ae492](https://github.com/prismicio/prismic-svelte/commit/e3ae492c0c03e121c8bddf03c96065485a448863))
-* migrate to vitest ([bbae453](https://github.com/prismicio/prismic-svelte/commit/bbae45309262b845dde7149ffad938bcc8aabc66))
-* setup todo components ([d57cf26](https://github.com/prismicio/prismic-svelte/commit/d57cf263f5294d9227a43bb9bb82e9e788dca09e))
-* update template config ([93a1b59](https://github.com/prismicio/prismic-svelte/commit/93a1b5971cf796f6eb9433044defc67eccf56bd2))
+- Add TODOs, rename plaintext component ([691aab7](https://github.com/prismicio/prismic-svelte/commit/691aab7bc9d47d2bdb47024e30ca90301813c85d))
+- init project ([9afa15a](https://github.com/prismicio/prismic-svelte/commit/9afa15a8a4372de8eb5b16e087433d2a640a93a0))
+- maintain repository ([e3ae492](https://github.com/prismicio/prismic-svelte/commit/e3ae492c0c03e121c8bddf03c96065485a448863))
+- migrate to vitest ([bbae453](https://github.com/prismicio/prismic-svelte/commit/bbae45309262b845dde7149ffad938bcc8aabc66))
+- setup todo components ([d57cf26](https://github.com/prismicio/prismic-svelte/commit/d57cf263f5294d9227a43bb9bb82e9e788dca09e))
+- update template config ([93a1b59](https://github.com/prismicio/prismic-svelte/commit/93a1b5971cf796f6eb9433044defc67eccf56bd2))

package/PrismicProvider.svelte

@@ -1,6 +1,5 @@
 <script>import { setContext } from "svelte";
 import { prismicKey } from "./injectionSymbols";
-import "./types";
 // export let client: PrismicContext["client"] = undefined;
 // export let linkResolver: PrismicContext["linkResolver"] = undefined;
 // export let htmlSerializer: PrismicContext["htmlSerializer"] = undefined;
@@ -15,7 +14,7 @@ setContext(prismicKey, {
     client: prismic.client,
     linkResolver: prismic.linkResolver,
     htmlSerializer: prismic.htmlSerializer,
-    slices: prismic.slices
+    slices: prismic.slices,
 });
 </script>
 

package/README.md

@@ -75,7 +75,7 @@ For more clarity on this project and its structure you can also check out the de
 
 <!-- TODO: Replace link with a more useful one if available -->
 
-[prismic-docs]: https://prismic.io/docs
+[prismic-docs]: https://prismic.io/docs/technical-reference/prismicio-svelte
 [changelog]: ./CHANGELOG.md
 [contributing]: ./CONTRIBUTING.md
 [svelte]: https://svelte.dev

package/components/PrismicEmbed.svelte

@@ -1,6 +1,10 @@
-<!-- TODO: Why are embeds 200px wide? -->
-
-<script>export let field;
+<script>import * as prismicH from "@prismicio/helpers";
+export let field;
+if (!prismicH.isFilled.embed(field)) {
+    console.warn("Invalid prop");
+}
 </script>
 
-{@html field.html}
+{#if prismicH.isFilled.embed(field)}
+	{@html field.html}
+{/if}

package/components/PrismicImage.svelte

@@ -1,22 +1,17 @@
-<script>import "@prismicio/types";
+<script>import * as prismicH from "@prismicio/helpers";
 export let field;
 let className;
 // creates a `class` property, even
 // though it is a reserved word
 export { className as class };
-const usePrismicImage = (field) => {
-    field.url;
-    return {
-        url: field.url || "",
-        alt: field.alt || "",
-        width: field.dimensions?.width || undefined,
-        height: field.dimensions?.height || undefined,
-        copyright: field.copyright || undefined,
-    };
-};
-const image = usePrismicImage(field);
 </script>
 
-{#if field.url}
-	<img src={image.url} alt={image.alt} height={image.height} />
+{#if prismicH.isFilled.image(field)}
+	{@const { alt, dimensions } = field}
+	{@const { width, height } = dimensions}
+	{@const { src, srcset } = prismicH.asImageWidthSrcSet(field)}
+
+	<img {src} {srcset} {alt} {width} {height} class={className} />
+{:else}
+	<img alt={field.alt || ""} class={className} />
 {/if}

package/components/PrismicPreview.svelte

@@ -1,5 +1,5 @@
-<script>import '@prismicio/client';
-import { goto } from '$app/navigation';
+<script>import * as prismic from "@prismicio/client";
+import { goto } from "$app/navigation";
 import { onMount } from "svelte";
 export let linkResolver;
 export let defaultURL;
@@ -9,7 +9,12 @@ onMount(async () => {
     const previewToken = urlParams.get("token");
     const documentID = urlParams.get("documentId");
     if (documentID && previewToken) {
-        const redirect = await client.resolvePreviewURL({ documentID, defaultURL, previewToken, linkResolver });
+        const redirect = await client.resolvePreviewURL({
+            documentID,
+            defaultURL,
+            previewToken,
+            linkResolver,
+        });
         await goto(redirect);
         return;
     }
@@ -18,4 +23,4 @@ onMount(async () => {
 });
 </script>
 
-<slot></slot>
+<slot />

package/components/PrismicText.svelte

@@ -4,4 +4,4 @@ export let separator;
 </script>
 
 <!-- TODO: Separator not working for newlines `\n\n` -->
-{@html prismicH.asText(field, separator)}
+{@html prismicH.asText(field, separator)}

package/components/SliceZone.svelte

@@ -1,4 +1,4 @@
-<script>import TodoSliceComponent from './TodoSliceComponent.svelte';
+<script>import TodoSliceComponent from "./TodoSliceComponent.svelte";
 export let slices = [];
 export let components = {};
 export let context = {};
@@ -7,11 +7,11 @@ export let dev = false;
 </script>
 
 {#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}
+	{@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/components/TodoSliceComponent.svelte

@@ -6,7 +6,7 @@ if (dev)
 </script>
 
 {#if dev}
-  <section data-slice-zone-todo-component="" data-slice-type={type}>
-    Could not find a component for Slice type &ldquo;{type}&rdquo;
-  </section>
-{/if}
+	<section data-slice-zone-todo-component="" data-slice-type={type}>
+		Could not find a component for Slice type &ldquo;{type}&rdquo;
+	</section>
+{/if}

package/{PrismicProvider.svelte.d.ts → lib/PrismicProvider.svelte.d.ts}

@@ -16,9 +16,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type PrismicProviderProps = typeof __propDef.props;
-export declare type PrismicProviderEvents = typeof __propDef.events;
-export declare type PrismicProviderSlots = typeof __propDef.slots;
+export type PrismicProviderProps = typeof __propDef.props;
+export type PrismicProviderEvents = typeof __propDef.events;
+export type PrismicProviderSlots = typeof __propDef.slots;
 export default class PrismicProvider extends SvelteComponentTyped<PrismicProviderProps, PrismicProviderEvents, PrismicProviderSlots> {
 }
 export {};

package/{components → lib/components}/PrismicEmbed.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type PrismicEmbedProps = typeof __propDef.props;
-export declare type PrismicEmbedEvents = typeof __propDef.events;
-export declare type PrismicEmbedSlots = typeof __propDef.slots;
+export type PrismicEmbedProps = typeof __propDef.props;
+export type PrismicEmbedEvents = typeof __propDef.events;
+export type PrismicEmbedSlots = typeof __propDef.slots;
 export default class PrismicEmbed extends SvelteComponentTyped<PrismicEmbedProps, PrismicEmbedEvents, PrismicEmbedSlots> {
 }
 export {};

package/{components → lib/components}/PrismicImage.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import * as prismicT from "@prismicio/types";
+import type * as prismicT from "@prismicio/types";
 declare const __propDef: {
     props: {
         field: prismicT.ImageField;
@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type PrismicImageProps = typeof __propDef.props;
-export declare type PrismicImageEvents = typeof __propDef.events;
-export declare type PrismicImageSlots = typeof __propDef.slots;
+export type PrismicImageProps = typeof __propDef.props;
+export type PrismicImageEvents = typeof __propDef.events;
+export type PrismicImageSlots = typeof __propDef.slots;
 export default class PrismicImage extends SvelteComponentTyped<PrismicImageProps, PrismicImageEvents, PrismicImageSlots> {
 }
 export {};

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

@@ -21,9 +21,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type PrismicLinkProps = typeof __propDef.props;
-export declare type PrismicLinkEvents = typeof __propDef.events;
-export declare type PrismicLinkSlots = typeof __propDef.slots;
+export type PrismicLinkProps = typeof __propDef.props;
+export type PrismicLinkEvents = typeof __propDef.events;
+export type PrismicLinkSlots = typeof __propDef.slots;
 export default class PrismicLink extends SvelteComponentTyped<PrismicLinkProps, PrismicLinkEvents, PrismicLinkSlots> {
 }
 export {};

package/{components → lib/components}/PrismicPreview.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type PrismicPreviewProps = typeof __propDef.props;
-export declare type PrismicPreviewEvents = typeof __propDef.events;
-export declare type PrismicPreviewSlots = typeof __propDef.slots;
+export type PrismicPreviewProps = typeof __propDef.props;
+export type PrismicPreviewEvents = typeof __propDef.events;
+export type PrismicPreviewSlots = typeof __propDef.slots;
 export default class PrismicPreview extends SvelteComponentTyped<PrismicPreviewProps, PrismicPreviewEvents, PrismicPreviewSlots> {
 }
 export {};

package/{components → lib/components}/PrismicRichText.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type PrismicRichTextProps = typeof __propDef.props;
-export declare type PrismicRichTextEvents = typeof __propDef.events;
-export declare type PrismicRichTextSlots = typeof __propDef.slots;
+export type PrismicRichTextProps = typeof __propDef.props;
+export type PrismicRichTextEvents = typeof __propDef.events;
+export type PrismicRichTextSlots = typeof __propDef.slots;
 export default class PrismicRichText extends SvelteComponentTyped<PrismicRichTextProps, PrismicRichTextEvents, PrismicRichTextSlots> {
 }
 export {};

package/{components → lib/components}/PrismicText.svelte.d.ts

@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type PrismicTextProps = typeof __propDef.props;
-export declare type PrismicTextEvents = typeof __propDef.events;
-export declare type PrismicTextSlots = typeof __propDef.slots;
+export type PrismicTextProps = typeof __propDef.props;
+export type PrismicTextEvents = typeof __propDef.events;
+export type PrismicTextSlots = typeof __propDef.slots;
 export default class PrismicText extends SvelteComponentTyped<PrismicTextProps, PrismicTextEvents, PrismicTextSlots> {
 }
 export {};

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SvelteComponent } from 'svelte';
+import type { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         slices?: ({
@@ -17,9 +17,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SliceZoneProps = typeof __propDef.props;
-export declare type SliceZoneEvents = typeof __propDef.events;
-export declare type SliceZoneSlots = typeof __propDef.slots;
+export type SliceZoneProps = typeof __propDef.props;
+export type SliceZoneEvents = typeof __propDef.events;
+export type SliceZoneSlots = typeof __propDef.slots;
 export default class SliceZone extends SvelteComponentTyped<SliceZoneProps, SliceZoneEvents, SliceZoneSlots> {
 }
 export {};

package/{components → lib/components}/TodoSliceComponent.svelte.d.ts

@@ -13,9 +13,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type TodoSliceComponentProps = typeof __propDef.props;
-export declare type TodoSliceComponentEvents = typeof __propDef.events;
-export declare type TodoSliceComponentSlots = typeof __propDef.slots;
+export type TodoSliceComponentProps = typeof __propDef.props;
+export type TodoSliceComponentEvents = typeof __propDef.events;
+export type TodoSliceComponentSlots = typeof __propDef.slots;
 export default class TodoSliceComponent extends SvelteComponentTyped<TodoSliceComponentProps, TodoSliceComponentEvents, TodoSliceComponentSlots> {
 }
 export {};

package/lib/usePrismic.d.ts

@@ -0,0 +1,2 @@
+import type { PrismicContext } from "../types/PrismicContext.type";
+export declare const usePrismic: () => PrismicContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prismicio/svelte",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Svelte plugin, components, and composables to fetch and present Prismic content",
   "keywords": [
     "typescript",
@@ -28,7 +28,6 @@
     "./components": "./components/index.js",
     "./configurePrismic": "./configurePrismic.js",
     "./injectionSymbols": "./injectionSymbols.js",
-    "./types": "./types.js",
     "./usePrismic": "./usePrismic.js"
   },
   "main": "index.js",
@@ -36,38 +35,44 @@
   "types": "index.d.ts",
   "svelte": "./index.js",
   "dependencies": {
-    "@prismicio/client": "^6.4.3",
-    "@prismicio/helpers": "^2.3.0"
+    "@prismicio/client": "^6.7.3",
+    "@prismicio/helpers": "^2.3.9",
+    "@sveltejs/kit": "^1.8.3",
+    "svelte": "^3.55.1"
   },
   "devDependencies": {
-    "@prismicio/mock": "0.0.10",
-    "@prismicio/types": "^0.1.27",
-    "@rollup/plugin-inject": "^4.0.4",
-    "@sveltejs/kit": "1.0.0-next.328",
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^5.23.0",
-    "c8": "^7.11.2",
+    "@prismicio/mock": "^0.2.0",
+    "@prismicio/types": "^0.2.7",
+    "@rollup/plugin-inject": "^5.0.3",
+    "@sveltejs/package": "^1.0.2",
+    "@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.0.0",
+    "eslint-plugin-prettier": "^4.2.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "eslint-plugin-tsdoc": "^0.2.16",
-    "prettier": "^2.6.2",
+    "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": "^3.48.0",
-    "svelte-check": "^2.7.0",
-    "svelte-preprocess": "^4.10.6",
-    "svelte2tsx": "^0.5.9",
-    "tslib": "^2.4.0",
-    "typescript": "^4.6.4",
-    "vitest": "^0.12.4"
+    "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"
   },
   "engines": {
     "node": ">=12.7.0"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "optionalDependencies": {
+    "@esbuild/android-arm": "^0.17.10"
   }
 }

package/src/app.html

@@ -4,9 +4,9 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%svelte.head%
+		%sveltekit.head%
 	</head>
 	<body>
-		<div id="svelte">%svelte.body%</div>
+		<div id="svelte">%sveltekit.body%</div>
 	</body>
 </html>

package/src/lib/PrismicProvider.svelte

@@ -2,7 +2,7 @@
 	import { setContext } from "svelte";
 
 	import { prismicKey } from "./injectionSymbols";
-	import { PrismicContext } from "./types";
+	import type { PrismicContext } from "../types/PrismicContext.type";
 
 	// export let client: PrismicContext["client"] = undefined;
 	// export let linkResolver: PrismicContext["linkResolver"] = undefined;
@@ -13,13 +13,13 @@
 		prismic: undefined,
 		htmlSerializer: undefined,
 		slices: undefined,
-	}
+	};
 
 	setContext<PrismicContext>(prismicKey, {
 		client: prismic.client,
 		linkResolver: prismic.linkResolver,
 		htmlSerializer: prismic.htmlSerializer,
-		slices: prismic.slices
+		slices: prismic.slices,
 	});
 </script>
 

package/src/lib/components/PrismicEmbed.svelte

@@ -1,9 +1,14 @@
-<!-- TODO: Why are embeds 200px wide? -->
-
 <script lang="ts">
-  import type * as prismicT from "@prismicio/types"
+	import * as prismicH from "@prismicio/helpers";
+	import type * as prismicT from "@prismicio/types";
+
+	export let field: prismicT.EmbedField;
 
-  export let field:prismicT.EmbedField
+	if (!prismicH.isFilled.embed(field)) {
+		console.warn("Invalid prop");
+	}
 </script>
 
-{@html field.html}
+{#if prismicH.isFilled.embed(field)}
+	{@html field.html}
+{/if}

package/src/lib/components/PrismicImage.svelte

@@ -1,34 +1,22 @@
 <script lang="ts">
-	import * as prismicT from "@prismicio/types";
+	import * as prismicH from "@prismicio/helpers";
+	import type * as prismicT from "@prismicio/types";
+
 	export let field: prismicT.ImageField;
+
 	let className: string;
 
 	// creates a `class` property, even
 	// though it is a reserved word
 	export { className as class };
-
-	const usePrismicImage = (
-		field: prismicT.ImageField,
-	): {
-		url: string;
-		width?: number;
-		height?: number;
-		alt?: string;
-		copyright: string | undefined;
-	} => {
-		field.url;
-		return {
-			url: field.url || "",
-			alt: field.alt || "",
-			width: field.dimensions?.width || undefined,
-			height: field.dimensions?.height || undefined,
-			copyright: field.copyright || undefined,
-		};
-	};
-
-	const image = usePrismicImage(field);
 </script>
 
-{#if field.url}
-	<img src={image.url} alt={image.alt} height={image.height} />
+{#if prismicH.isFilled.image(field)}
+	{@const { alt, dimensions } = field}
+	{@const { width, height } = dimensions}
+	{@const { src, srcset } = prismicH.asImageWidthSrcSet(field)}
+
+	<img {src} {srcset} {alt} {width} {height} class={className} />
+{:else}
+	<img alt={field.alt || ""} class={className} />
 {/if}

package/src/lib/components/PrismicPreview.svelte

@@ -1,24 +1,29 @@
 <script lang="ts">
-    import * as prismic from '@prismicio/client'
-    import { goto } from '$app/navigation'
-    import { onMount } from "svelte"
+	import * as prismic from "@prismicio/client";
+	import { goto } from "$app/navigation";
+	import { onMount } from "svelte";
 
-    export let linkResolver:any
-    export let defaultURL:string
-    export let client:any
+	export let linkResolver: any;
+	export let defaultURL: string;
+	export let client: any;
 
-    onMount(async () => {
-      const urlParams = new URLSearchParams(window.location.search);
-      const previewToken = urlParams.get("token")
-      const documentID = urlParams.get("documentId")
-      if(documentID && previewToken) {
-        const redirect = await client.resolvePreviewURL({documentID, defaultURL, previewToken, linkResolver})
-        await goto(redirect)
-        return
-      }
-      console.log("Could not resolve preview URL.")
-      // TODO: Handle else
-  })
+	onMount(async () => {
+		const urlParams = new URLSearchParams(window.location.search);
+		const previewToken = urlParams.get("token");
+		const documentID = urlParams.get("documentId");
+		if (documentID && previewToken) {
+			const redirect = await client.resolvePreviewURL({
+				documentID,
+				defaultURL,
+				previewToken,
+				linkResolver,
+			});
+			await goto(redirect);
+			return;
+		}
+		console.log("Could not resolve preview URL.");
+		// TODO: Handle else
+	});
 </script>
 
-<slot></slot>
+<slot />

package/src/lib/components/PrismicRichText.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-  import * as prismicH from "@prismicio/helpers"
-  import { usePrismic } from "./..";
+	import * as prismicH from "@prismicio/helpers";
+	import { usePrismic } from "./..";
 
-  import type { RichTextField as RichTextFieldType } from "@prismicio/types";
-  import type { TitleField as TitleFieldType } from "@prismicio/types";
+	import type { RichTextField as RichTextFieldType } from "@prismicio/types";
+	import type { TitleField as TitleFieldType } from "@prismicio/types";
 
-  let { htmlSerializer, linkResolver } = usePrismic()
+	let { htmlSerializer, linkResolver } = usePrismic();
 
-  export let field:TitleFieldType | RichTextFieldType
-  export { htmlSerializer, linkResolver }
+	export let field: TitleFieldType | RichTextFieldType;
+	export { htmlSerializer, linkResolver };
 </script>
 
 {@html prismicH.asHTML(field, linkResolver, htmlSerializer)}

package/src/lib/components/PrismicText.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import * as prismicH from "@prismicio/helpers"
+	import * as prismicH from "@prismicio/helpers";
 
-  import type { RichTextField as RichTextFieldType } from "@prismicio/types";
-  import type { TitleField as TitleFieldType } from "@prismicio/types";
+	import type { RichTextField as RichTextFieldType } from "@prismicio/types";
+	import type { TitleField as TitleFieldType } from "@prismicio/types";
 
-  export let field:TitleFieldType | RichTextFieldType
-  export let separator:string
+	export let field: TitleFieldType | RichTextFieldType;
+	export let separator: string;
 </script>
 
 <!-- TODO: Separator not working for newlines `\n\n` -->
-{@html prismicH.asText(field, separator)}
+{@html prismicH.asText(field, separator)}

package/src/lib/components/SliceZone.svelte

@@ -1,61 +1,66 @@
 <script lang="ts">
-  import TodoSliceComponent from './TodoSliceComponent.svelte'; 
-  
-  import type * as prismicT from "@prismicio/types"
-  import type { SvelteComponent } from 'svelte';
+	import TodoSliceComponent from "./TodoSliceComponent.svelte";
 
-  type SliceComponents = Record<string, SvelteComponent | (new (...args: any[]) => SvelteComponent)>
+	import type * as prismicT from "@prismicio/types";
+	import type { SvelteComponent } from "svelte";
 
-  /**
-   * The minimum required properties to represent a Prismic Slice from the Prismic
-   * Rest API V2 for the `<SliceZone>` component.
-   *
-   * If using Prismic's Rest API V2, use the `Slice` export from
-   * `@prismicio/types` for a full interface.
-   *
-   * @typeParam SliceType - Type name of the Slice.
-   */
-  type SliceLikeRestV2<SliceType extends string = string> = {
-    slice_type: prismicT.Slice<SliceType>["slice_type"];
-  };
+	type SliceComponents = Record<
+		string,
+		SvelteComponent | (new (...args: any[]) => SvelteComponent)
+	>;
 
-  /**
-   * The minimum required properties to represent a Prismic Slice from the Prismic
-   * GraphQL API for the `<SliceZone>` component.
-   *
-   * @typeParam SliceType - Type name of the Slice.
-   */
-  type SliceLikeGraphQL<SliceType extends string = string> = {
-    type: prismicT.Slice<SliceType>["slice_type"];
-  };
+	/**
+	 * The minimum required properties to represent a Prismic Slice from the
+	 * Prismic Rest API V2 for the `<SliceZone>` component.
+	 *
+	 * If using Prismic's Rest API V2, use the `Slice` export from
+	 * `@prismicio/types` for a full interface.
+	 *
+	 * @typeParam SliceType - Type name of the Slice.
+	 */
+	type SliceLikeRestV2<SliceType extends string = string> = {
+		slice_type: prismicT.Slice<SliceType>["slice_type"];
+	};
 
-  /**
-   * The minimum required properties to represent a Prismic Slice for the
-   * `<SliceZone>` component.
-   *
-   * If using Prismic's Rest API V2, use the `Slice` export from
-   * `@prismicio/types` for a full interface.
-   *
-   * @typeParam SliceType - Type name of the Slice.
-   */
-  type SliceLike<SliceType extends string = string> =
-    | SliceLikeRestV2<SliceType>
-    | SliceLikeGraphQL<SliceType>;
+	/**
+	 * The minimum required properties to represent a Prismic Slice from the
+	 * Prismic GraphQL API for the `<SliceZone>` component.
+	 *
+	 * @typeParam SliceType - Type name of the Slice.
+	 */
+	type SliceLikeGraphQL<SliceType extends string = string> = {
+		type: prismicT.Slice<SliceType>["slice_type"];
+	};
 
+	/**
+	 * The minimum required properties to represent a Prismic Slice for the
+	 * `<SliceZone>` component.
+	 *
+	 * If using Prismic's Rest API V2, use the `Slice` export from
+	 * `@prismicio/types` for a full interface.
+	 *
+	 * @typeParam SliceType - Type name of the Slice.
+	 */
+	type SliceLike<SliceType extends string = string> =
+		| SliceLikeRestV2<SliceType>
+		| SliceLikeGraphQL<SliceType>;
 
-  export let slices:SliceLike[] = []
-  export let components:SliceComponents = {}
-  export let context:any = {}
-  export let defaultComponent:SvelteComponent | (new (...args: any[]) => SvelteComponent) | undefined = undefined
-  export let dev:boolean = false
+	export let slices: SliceLike[] = [];
+	export let components: SliceComponents = {};
+	export let context: any = {};
+	export let defaultComponent:
+		| SvelteComponent
+		| (new (...args: any[]) => SvelteComponent)
+		| undefined = undefined;
+	export let dev: boolean = false;
 </script>
 
 {#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}
+	{@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/src/lib/components/TodoSliceComponent.svelte

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

package/src/lib/usePrismic.ts

@@ -1,7 +1,7 @@
 import { hasContext, getContext } from "svelte";
 
 import { prismicKey } from "./injectionSymbols";
-import { PrismicContext } from "./types";
+import type { PrismicContext } from "../types/PrismicContext.type";
 
 export const usePrismic = (): PrismicContext => {
 	if (hasContext(prismicKey)) {

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

@@ -0,0 +1,15 @@
+import * as prismic from "@prismicio/client";
+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 client = prismic.createClient(endpoint, { fetch });
+
+	const document: PageDocument = await client.getSingle("homepage");
+
+	return {
+		document,
+	};
+// eslint-disable-next-line prettier/prettier
+}) satisfies PageServerLoad;

package/src/routes/+page.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { SliceZone } from "$lib";
+	import { RichText, CodeSnippet } from "src/routes/slices";
+	import type { PageData } from "./$types";
+
+	const components = {
+		rich_text: RichText,
+		code_snippet: CodeSnippet,
+	};
+
+	export let data: PageData;
+</script>
+
+<main>
+	<h1>Welcome to SvelteKit</h1>
+	<SliceZone slices={data.document.data.body} {components} />
+</main>
+
+<style>
+	main {
+		max-width: min(90%, 800px);
+		margin: auto;
+	}
+</style>

package/src/routes/slices/CodeSnippet/index.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import * as prismicH from "@prismicio/helpers";
+	import type { CodeSnippetSlice } from "../../../types/CodeSnippetSlice.type";
+
+	export let slice: CodeSnippetSlice;
+</script>
+
+<pre>
+  {@html prismicH.asHTML(slice.primary.content)}
+</pre>
+
+<style>
+	pre {
+		background: #222;
+		color: white;
+		padding: 10px;
+		border-radius: 10px;
+	}
+</style>

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import * as prismicH from "@prismicio/helpers";
+	import type { RichTextSlice } from "./../../../types/RichTextSlice.type";
+
+	export let slice: RichTextSlice;
+</script>
+
+{@html prismicH.asHTML(slice.primary.content)}

package/src/routes/slices/index.ts

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

package/src/types/CodeSnippetSlice.type.ts

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

package/src/types/PageDocument.type.ts

@@ -0,0 +1,7 @@
+import type * as prismicT from "@prismicio/types";
+import type { CodeSnippetSlice } from "./CodeSnippetSlice.type";
+import type { RichTextSlice } from "./RichTextSlice.type";
+
+export type PageDocument = prismicT.PrismicDocument<{
+	body: prismicT.SliceZone<CodeSnippetSlice | RichTextSlice>;
+}>;

package/src/types/PrismicConfig.type.ts

@@ -0,0 +1,8 @@
+import type { Route } from "./Route.type";
+
+export interface PrismicConfig {
+	repoName: string;
+	routes?: Route[];
+	accessToken?: string;
+	options?: null;
+}

package/src/types/PrismicContext.type.ts

@@ -0,0 +1,13 @@
+import type { Client } from "@prismicio/client";
+import type {
+	LinkResolverFunction,
+	HTMLFunctionSerializer,
+	HTMLMapSerializer,
+} from "@prismicio/helpers";
+// import type * as prismicH from "@prismicio/helpers";
+
+export type PrismicContext = {
+	client?: Client;
+	linkResolver?: LinkResolverFunction;
+	htmlSerializer?: HTMLFunctionSerializer | HTMLMapSerializer;
+};

package/src/types/RichTextSlice.type.ts

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

package/src/types/Route.type.ts

@@ -0,0 +1,14 @@
+export interface Route {
+	/**
+	 * The Custom Type of the document.
+	 */
+	type: string;
+	/**
+	 * The resolved path of the document with optional placeholders.
+	 */
+	path: string;
+	/**
+	 * An object that lists the API IDs of the Content Relationships in the route.
+	 */
+	resolvers: Record<string, string>;
+}

package/src/types/index.ts

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

package/types/PrismicContext.type.d.ts

@@ -0,0 +1,7 @@
+import type { Client } from "@prismicio/client";
+import type { LinkResolverFunction, HTMLFunctionSerializer, HTMLMapSerializer } from "@prismicio/helpers";
+export type PrismicContext = {
+    client?: Client;
+    linkResolver?: LinkResolverFunction;
+    htmlSerializer?: HTMLFunctionSerializer | HTMLMapSerializer;
+};

package/usePrismic.js

@@ -1,6 +1,5 @@
 import { hasContext, getContext } from "svelte";
 import { prismicKey } from "./injectionSymbols";
-import "./types";
 export const usePrismic = () => {
     if (hasContext(prismicKey)) {
         return getContext(prismicKey);

package/src/lib/types.ts

@@ -1,35 +0,0 @@
-import type { Client } from "@prismicio/client";
-import type {
-	LinkResolverFunction,
-	HTMLFunctionSerializer,
-	HTMLMapSerializer,
-} from "@prismicio/helpers";
-// import type * as prismicH from "@prismicio/helpers";
-
-export interface Route {
-	/**
-	 * The Custom Type of the document.
-	 */
-	type: string;
-	/**
-	 * The resolved path of the document with optional placeholders.
-	 */
-	path: string;
-	/**
-	 * An object that lists the API IDs of the Content Relationships in the route.
-	 */
-	resolvers: Record<string, string>;
-}
-
-export interface PrismicConfig {
-	repoName: string;
-	routes?: Route[];
-	accessToken?: string;
-	options?: null;
-}
-
-export type PrismicContext = {
-	client?: Client;
-	linkResolver?: LinkResolverFunction;
-	htmlSerializer?: HTMLFunctionSerializer | HTMLMapSerializer;
-};

package/src/routes/index.svelte

@@ -1,26 +0,0 @@
-<script context="module" lang="ts">
-  import type * as prismicT from "@prismicio/types"
-  import { SliceZone } from "$lib";
-  import {RichText, CodeSnippet} from "./slices"
-
-  const components = {
-    rich_text: RichText,
-    code_snippet: CodeSnippet
-  }
-</script>
-
-<script lang="ts">
-  export let document:prismicT.PrismicDocument
-</script>
-
-<main>
-  <h1>Welcome to SvelteKit</h1>
-  <SliceZone slices={document.data.body} {components} />
-</main>
-
-<style>
-  main {
-    max-width: min(90%, 800px);
-    margin: auto;
-  }
-</style>

package/src/routes/index.ts

@@ -1,15 +0,0 @@
-import * as prismic from "@prismicio/client";
-import type * as prismicT from "@prismicio/types";
-
-export async function get({ fetch }) {
-	const endpoint = prismic.getEndpoint("svelte-package-dev");
-	const client = prismic.createClient(endpoint, { fetch });
-
-	const document: prismicT.PrismicDocument = await client.getSingle("homepage");
-
-	return {
-		body: {
-			document,
-		},
-	};
-}

package/src/routes/slices/CodeSnippet.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import * as prismicH from "@prismicio/helpers"
-  import type * as prismicT from "@prismicio/types"
-
-  export let slice:prismicT.Slice
-</script>
-
-<pre>
-  {@html prismicH.asHTML(slice.primary.content)}
-</pre>
-
-<style>
-  pre {
-    background: #222;
-    color: white;
-    padding: 10px;
-    border-radius: 10px;
-  }
-</style>

package/src/routes/slices/RichText.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-  import * as prismicH from "@prismicio/helpers"
-  import type * as prismicT from "@prismicio/types"
-
-  export let slice:prismicT.Slice
-</script>
-
-{@html prismicH.asHTML(slice.primary.content)}

package/types.d.ts

@@ -1,27 +0,0 @@
-import type { Client } from "@prismicio/client";
-import type { LinkResolverFunction, HTMLFunctionSerializer, HTMLMapSerializer } from "@prismicio/helpers";
-export interface Route {
-    /**
-     * The Custom Type of the document.
-     */
-    type: string;
-    /**
-     * The resolved path of the document with optional placeholders.
-     */
-    path: string;
-    /**
-     * An object that lists the API IDs of the Content Relationships in the route.
-     */
-    resolvers: Record<string, string>;
-}
-export interface PrismicConfig {
-    repoName: string;
-    routes?: Route[];
-    accessToken?: string;
-    options?: null;
-}
-export declare type PrismicContext = {
-    client?: Client;
-    linkResolver?: LinkResolverFunction;
-    htmlSerializer?: HTMLFunctionSerializer | HTMLMapSerializer;
-};

package/types.js

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

package/usePrismic.d.ts

@@ -1,2 +0,0 @@
-import { PrismicContext } from "./types";
-export declare const usePrismic: () => PrismicContext;