Merge branch 'master' of https://github.com/prismicio/prismic-svelte

CHANGELOG.md

@@ -4,10 +4,9 @@ All notable changes to this project will be documented in this file. See [standa
 
 ### [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)
 

src/lib/components/PrismicImage.svelte

@@ -6,8 +6,6 @@
 
 	let className: string;
 
-	// creates a `class` property, even
-	// though it is a reserved word
 	export { className as class };
 </script>
 

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>

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";
 

src/lib/index.ts

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

src/routes/+page.server.ts

@@ -6,10 +6,15 @@ export const load = (async ({ fetch }) => {
 	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;

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 } from "$lib";
+	import { RichText, CodeSnippet } from "./slices";
 	import type { PageData } from "./$types";
 
 	const components = {
@@ -13,7 +13,18 @@
 
 <main>
 	<h1>Welcome to SvelteKit</h1>
-	<SliceZone slices={data.document.data.body} {components} />
+	<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>

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;
+}>;

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";