@prismicio/svelte 0.0.4 → 0.0.6

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,20 @@
 <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/PrismicLink.svelte

@@ -2,66 +2,51 @@
 	import * as prismicH from "@prismicio/helpers";
 	import type * as prismicT from "@prismicio/types";
 
-	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/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/components/index.ts

@@ -2,7 +2,7 @@
 
 // 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

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

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,20 @@
+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.getRepositoryEndpoint("svelte-package-dev");
+	const client = prismic.createClient(endpoint, { fetch });
+
+	const pageDocument: PageDocument = await client.getSingle("homepage");
+
+	const exampleClient = prismic.createClient("example-prismic-repo", { fetch })
+	const exampleDocument = exampleClient.getFirst()
+
+
+	return {
+		pageDocument,
+		exampleDocument
+	};
+// eslint-disable-next-line prettier/prettier
+}) satisfies PageServerLoad;

package/src/routes/+page.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { SliceZone, PrismicLink } from "$lib";
+	import { RichText, CodeSnippet } from "./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>
+	<h2>Prismic Link</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>Slice Zone</h2>
+	<SliceZone slices={data.pageDocument.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,7 @@
+import type * as prismicT from "@prismicio/types";
+
+type PrimaryFields = {
+	content: prismicT.RichTextField;
+};
+
+export type CodeSnippetSlice = prismicT.Slice<"code_snippet", PrimaryFields>;

package/src/types/ExampleDocument.type.ts

@@ -0,0 +1,6 @@
+import type * as prismicT from "@prismicio/types";
+
+export type ExampleDocument = prismicT.PrismicDocument<{
+	example_link: prismicT.LinkField;
+	example_content_relationship: prismicT.ContentRelationshipField;
+}>;

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,7 @@
+export type { CodeSnippetSlice } from "./CodeSnippetSlice.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";
+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);