@prismicio/svelte 0.0.5 → 0.0.6

package/CHANGELOG.md

@@ -2,12 +2,23 @@
 
 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.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
 
-* upgrade SvelteKit to 1.0 ([#3](https://github.com/prismicio/prismic-svelte/issues/3)) ([8d5addc](https://github.com/prismicio/prismic-svelte/commit/8d5addcdd669895ccacb666286b57af7825f4869))
+* 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))
 
 ### [0.0.4](https://github.com/prismicio/prismic-svelte/compare/v0.0.3...v0.0.4) (2022-05-27)
 

package/components/PrismicImage.svelte

@@ -1,8 +1,6 @@
 <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 };
 </script>
 

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prismicio/svelte",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Svelte plugin, components, and composables to fetch and present Prismic content",
   "keywords": [
     "typescript",

package/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>
 

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/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/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 } 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>

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