@prismicio/vue 4.2.3 → 5.0.0-alpha.0

package/src/createPrismic.ts

@@ -1,7 +1,10 @@
-import {
+import type {
 	Client,
-	FetchLike,
+	HTMLRichTextFunctionSerializer,
+	HTMLRichTextMapSerializer,
 	LinkResolverFunction,
+} from "@prismicio/client"
+import {
 	asDate,
 	asHTML,
 	asImagePixelDensitySrcSet,
@@ -15,25 +18,24 @@ import {
 	documentToLinkField,
 	filter,
 	isFilled,
-} from "@prismicio/client";
-import { App } from "vue";
+} from "@prismicio/client"
+import type { App } from "vue"
 
 import type {
 	PrismicPlugin,
 	PrismicPluginClient,
 	PrismicPluginHelpers,
 	PrismicPluginOptions,
-} from "./types";
+} from "./types"
 
-import {
-	PrismicEmbed,
-	PrismicImage,
-	PrismicLink,
-	PrismicRichText,
-	PrismicText,
-	SliceZone,
-} from "./components";
-import { prismicKey } from "./injectionSymbols";
+import PrismicRichText from "./PrismicRichText/PrismicRichText.vue"
+import SliceZone from "./SliceZone/SliceZone.vue"
+
+import PrismicEmbed from "./PrismicEmbed.vue"
+import PrismicImage from "./PrismicImage.vue"
+import PrismicLink from "./PrismicLink.vue"
+import PrismicText from "./PrismicText.vue"
+import { prismicKey } from "./usePrismic"
 
 /**
  * Creates a `@prismicio/vue` plugin instance that can be used by a Vue app.
@@ -47,36 +49,24 @@ import { prismicKey } from "./injectionSymbols";
  */
 export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
 	// Create plugin client
-	let client: Client;
+	let client: Client
 	if (options.client) {
-		client = options.client;
+		client = options.client
 	} else {
-		client = createClient(options.endpoint, {
-			fetch: async (endpoint, options) => {
-				let fetchFunction: FetchLike;
-				if (typeof globalThis.fetch === "function") {
-					fetchFunction = globalThis.fetch;
-				} else {
-					fetchFunction = (await import("isomorphic-unfetch")).default;
-				}
-
-				return await fetchFunction(endpoint, options);
-			},
-			...options.clientConfig,
-		});
+		client = createClient(options.endpoint, options.clientConfig)
 	}
 
 	const prismicClient: PrismicPluginClient = {
 		client,
 		filter,
 		cookie,
-	};
+	}
 
 	// Create plugin helpers
 	const prismicHelpers: PrismicPluginHelpers = {
 		asText,
 		asHTML: (richTextField, ...config) => {
-			const [configOrLinkResolver, maybeHTMLSerializer] = config;
+			const [configOrLinkResolver, maybeHTMLSerializer] = config
 
 			return asHTML(
 				richTextField,
@@ -85,16 +75,16 @@ export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
 					? {
 							linkResolver: configOrLinkResolver || options.linkResolver,
 							serializer:
-								maybeHTMLSerializer ||
-								options.richTextSerializer ||
-								options.htmlSerializer,
-					  }
+								(maybeHTMLSerializer as
+									| HTMLRichTextFunctionSerializer
+									| HTMLRichTextMapSerializer) || options.richTextSerializer,
+						}
 					: {
 							linkResolver: options.linkResolver,
-							serializer: options.richTextSerializer || options.htmlSerializer,
+							serializer: options.richTextSerializer,
 							...configOrLinkResolver,
-					  },
-			);
+						},
+			)
 		},
 		asLink: (linkField, config) => {
 			return asLink(
@@ -106,8 +96,8 @@ export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
 							// TODO: For some reasons, TypeScript narrows the type to "unknown" where it's supposed to be a union
 							// eslint-disable-next-line @typescript-eslint/no-explicit-any
 							...(config as any),
-					  },
-			);
+						},
+			)
 		},
 		asLinkAttrs: (linkField, config) => {
 			return asLinkAttrs(linkField, {
@@ -115,7 +105,7 @@ export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
 				// eslint-disable-next-line @typescript-eslint/no-explicit-any
 				linkResolver: options.linkResolver as LinkResolverFunction<any>,
 				...config,
-			});
+			})
 		},
 		asDate,
 		asImageSrc,
@@ -123,7 +113,7 @@ export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
 		asImagePixelDensitySrcSet,
 		isFilled,
 		documentToLinkField,
-	};
+	}
 
 	// Create plugin interface
 	const prismic: PrismicPlugin = {
@@ -133,19 +123,30 @@ export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
 		...prismicHelpers,
 
 		install(app: App): void {
-			app.provide(prismicKey, this);
-			app.config.globalProperties.$prismic = this;
+			app.provide(prismicKey, this)
+			app.config.globalProperties.$prismic = this
 
 			if (options.injectComponents !== false) {
-				app.component(PrismicLink.name, PrismicLink);
-				app.component(PrismicEmbed.name, PrismicEmbed);
-				app.component(PrismicImage.name, PrismicImage);
-				app.component(PrismicText.name, PrismicText);
-				app.component(PrismicRichText.name, PrismicRichText);
-				app.component(SliceZone.name, SliceZone);
+				app.component(PrismicLink.name!, PrismicLink)
+				app.component(PrismicEmbed.name!, PrismicEmbed)
+				app.component(PrismicImage.name!, PrismicImage)
+				app.component(PrismicText.name!, PrismicText)
+				app.component(PrismicRichText.name!, PrismicRichText)
+				app.component(SliceZone.name!, SliceZone)
 			}
 		},
-	};
+	}
 
-	return prismic;
-};
+	return prismic
+}
+
+declare module "vue" {
+	export interface ComponentCustomProperties {
+		/**
+		 * `@prismicio/vue` plugin interface exposed on `this`.
+		 *
+		 * @see `@prismicio/vue` plugin interface {@link PrismicPlugin}
+		 */
+		$prismic: PrismicPlugin
+	}
+}

package/src/index.ts

@@ -1,75 +1,50 @@
-export { createPrismic } from "./createPrismic";
-export { usePrismic } from "./usePrismic";
+import PrismicRichText from "./PrismicRichText/PrismicRichText.vue"
+import SliceZone from "./SliceZone/SliceZone.vue"
+
+import PrismicEmbed from "./PrismicEmbed.vue"
+import PrismicImage from "./PrismicImage.vue"
+import PrismicLink from "./PrismicLink.vue"
+import PrismicText from "./PrismicText.vue"
+
+export type { SliceZoneProps } from "./SliceZone/SliceZone.vue"
+export type { PrismicRichTextProps } from "./PrismicRichText/PrismicRichText.vue"
+
+export type { PrismicEmbedProps } from "./PrismicEmbed.vue"
+export type { PrismicImageProps } from "./PrismicImage.vue"
+export type { PrismicLinkProps } from "./PrismicLink.vue"
+export type { PrismicTextProps } from "./PrismicText.vue"
 
 export {
-	// Composables
-	usePrismicImage,
-	usePrismicLink,
-	usePrismicText,
-	usePrismicRichText,
-	// Components
+	SliceZone,
 	PrismicEmbed,
 	PrismicImage,
 	PrismicLink,
 	PrismicText,
 	PrismicRichText,
-	// Slice Zone
-	getSliceComponentProps,
+}
+
+export { getRichTextComponentProps } from "./PrismicRichText"
+export type {
+	VueRichTextSerializer,
+	RichTextComponentProps,
+} from "./PrismicRichText"
+
+export {
 	TODOSliceComponent,
 	defineSliceZoneComponents,
-	SliceZone,
-} from "./components";
+	getSliceComponentProps,
+} from "./SliceZone"
 export type {
-	// Composables
-	UsePrismicImageOptions,
-	UsePrismicLinkOptions,
-	UsePrismicTextOptions,
-	UsePrismicRichTextOptions,
-	// Components
-	PrismicEmbedProps,
-	PrismicImageProps,
-	PrismicLinkProps,
-	PrismicTextProps,
-	PrismicRichTextProps,
-	// Slice Zone
-	DefineComponentSliceComponentProps,
 	SliceComponentProps,
 	SliceComponentType,
-	SliceLikeRestV2,
-	SliceLikeGraphQL,
 	SliceLike,
+	SliceLikeGraphQL,
+	SliceLikeRestV2,
 	SliceZoneComponents,
-	SliceZoneResolver,
 	SliceZoneLike,
-	SliceZoneProps,
-} from "./components";
-
-export {
-	useAllPrismicDocumentsByIDs,
-	useAllPrismicDocumentsByUIDs,
-	useAllPrismicDocumentsByTag,
-	useAllPrismicDocumentsByEveryTag,
-	useAllPrismicDocumentsBySomeTags,
-	useAllPrismicDocumentsByType,
-	useFirstPrismicDocument,
-	usePrismicDocumentByID,
-	usePrismicDocumentByUID,
-	usePrismicDocuments,
-	usePrismicDocumentsByIDs,
-	usePrismicDocumentsByUIDs,
-	usePrismicDocumentsByTag,
-	usePrismicDocumentsByEveryTag,
-	usePrismicDocumentsBySomeTags,
-	usePrismicDocumentsByType,
-	useSinglePrismicDocument,
-	dangerouslyUseAllPrismicDocuments,
-} from "./composables";
-
-export type { ClientComposableReturnType } from "./useStatefulPrismicClientMethod";
-
-export { PrismicClientComposableState } from "./types";
-export type { PrismicPluginOptions, PrismicPlugin } from "./types";
+} from "./SliceZone"
 
-export { prismicKey } from "./injectionSymbols";
+export type { PrismicPluginOptions, PrismicPlugin } from "./types"
 
-export * from "./globalExtensions";
+export { createPrismic } from "./createPrismic"
+export { usePrismic, prismicKey } from "./usePrismic"

package/src/lib/Wrapper.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { ComponentOrTagName } from "../types"
+
+defineProps<{
+	/**
+	 * An HTML tag name or a component used to wrap the output. Output is not
+	 * wrapped by default.
+	 *
+	 * @defaultValue `"template"` (no wrapper)
+	 */
+	wrapper?: ComponentOrTagName
+}>()
+</script>
+
+<template>
+	<component v-if="wrapper" :is="wrapper" v-bind="$attrs">
+		<slot />
+	</component>
+	<template v-else>
+		<slot />
+	</template>
+</template>

package/src/lib/devMsg.ts

@@ -0,0 +1,20 @@
+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: string): string => {
+	return `https://prismic.dev/msg/vue/v${version}/${slug}`
+}

package/src/lib/isInternalURL.ts

@@ -10,11 +10,11 @@ export const isInternalURL = (url: string): boolean => {
 	/**
 	 * @see Regex101 expression: {@link https://regex101.com/r/1y7iod/1}
 	 */
-	const isInternal = /^\/(?!\/)/.test(url);
+	const isInternal = /^\/(?!\/)/.test(url)
 	/**
 	 * @see Regex101 expression: {@link https://regex101.com/r/RnUseS/1}
 	 */
-	const isSpecialLink = !isInternal && !/^https?:\/\//i.test(url);
+	const isSpecialLink = !isInternal && !/^https?:\/\//i.test(url)
 
-	return isInternal && !isSpecialLink;
-};
+	return isInternal && !isSpecialLink
+}