@prismicio/vue 5.3.0 → 6.0.0

package/src/createPrismic.ts

@@ -1,154 +1,105 @@
-import type {
-	Client,
-	HTMLRichTextFunctionSerializer,
-	HTMLRichTextMapSerializer,
-	LinkResolverFunction,
-} from "@prismicio/client"
-import {
-	asDate,
-	asHTML,
-	asImagePixelDensitySrcSet,
-	asImageSrc,
-	asImageWidthSrcSet,
-	asLink,
-	asLinkAttrs,
-	asText,
-	cookie,
-	createClient,
-	documentToLinkField,
-	filter,
-	isFilled,
-} from "@prismicio/client"
-import type { App } from "vue"
-
-import type {
-	PrismicPlugin,
-	PrismicPluginClient,
-	PrismicPluginHelpers,
-	PrismicPluginOptions,
-} from "./types"
-
-import PrismicRichText from "./PrismicRichText/PrismicRichText.vue"
-import PrismicTable from "./PrismicTable/PrismicTable.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"
+import type { CreateClient, LinkResolverFunction } from "@prismicio/client"
+import { isFilled } from "@prismicio/client"
+import type { App, InjectionKey } from "vue"
+import { inject } from "vue"
+
+import type { ComponentOrTagName } from "./types"
+
+import type { RichTextComponents } from "./PrismicRichText"
+import type { TableComponents } from "./PrismicTable"
+
+const prismicKey = Symbol.for(
+	"@prismicio/vue/plugin",
+) as InjectionKey<PrismicPlugin>
+
+/** Components configuration. */
+type ComponentsConfig = {
+	/** The default component rendered for internal URLs. */
+	linkInternalComponent?: ComponentOrTagName
+
+	/** The default component rendered for external URLs. */
+	linkExternalComponent?: ComponentOrTagName
+
+	/**
+	 * The default components or shorthand definitions for rich text and table
+	 * components.
+	 *
+	 * @see {@link https://prismic.io/docs/fields/rich-text}
+	 * @see {@link https://prismic.io/docs/fields/table}
+	 */
+	richTextComponents?: RichTextComponents & TableComponents
+}
+
+/** Prismic Vue plugin configuration. */
+export type PrismicPluginConfig = {
+	/** A Prismic client instance to inject into the Vue app. */
+	client: ReturnType<CreateClient>
+
+	/**
+	 * A default link resolver used to resolve links when route resolvers cannot be used.
+	 *
+	 * @see {@link https://prismic.io/docs/routes}
+	 */
+	linkResolver?: LinkResolverFunction
+
+	/** Components configuration. */
+	components?: ComponentsConfig
+}
 
 /**
- * Creates a `@prismicio/vue` plugin instance that can be used by a Vue app.
- *
- * @param options - {@link PrismicPluginOptions}
- *
- * @returns `@prismicio/vue` plugin instance {@link PrismicPlugin}
- *
- * @see Prismic Official Vue.js documentation: {@link https://prismic.io/docs/technologies/vuejs}
- * @see Plugin repository: {@link https://github.com/prismicio/prismic-vue}
+ * Prismic Vue plugin interface accessible through `usePrismic()` and
+ * `$prismic`.
  */
-export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
-	// Create plugin client
-	let client: Client
-	if (options.client) {
-		client = options.client
-	} else {
-		client = createClient(options.endpoint, options.clientConfig)
-	}
+export type PrismicPlugin = {
+	/** A Prismic client that can be used to query content from a repository. */
+	client: ReturnType<CreateClient>
 
-	const prismicClient: PrismicPluginClient = {
-		client,
-		filter,
-		cookie,
-	}
+	/** Helpers to determine if a field is filled. */
+	isFilled: typeof isFilled
 
-	// Create plugin helpers
-	const prismicHelpers: PrismicPluginHelpers = {
-		asText,
-		asHTML: (richTextField, ...config) => {
-			const [configOrLinkResolver, maybeHTMLSerializer] = config
-
-			return asHTML(
-				richTextField,
-				typeof configOrLinkResolver === "function" ||
-					configOrLinkResolver == null
-					? {
-							linkResolver: configOrLinkResolver || options.linkResolver,
-							serializer:
-								(maybeHTMLSerializer as
-									| HTMLRichTextFunctionSerializer
-									| HTMLRichTextMapSerializer) || options.richTextSerializer,
-						}
-					: {
-							linkResolver: options.linkResolver,
-							serializer: options.richTextSerializer,
-							...configOrLinkResolver,
-						},
-			)
-		},
-		asLink: (linkField, config) => {
-			return asLink(
-				linkField,
-				typeof config === "function"
-					? { linkResolver: config }
-					: {
-							linkResolver: options.linkResolver,
-							// 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, {
-				// TODO: We can't really retrieve the generic type here, this might cause some unexpected type error in some edge-case scenario
-				// eslint-disable-next-line @typescript-eslint/no-explicit-any
-				linkResolver: options.linkResolver as LinkResolverFunction<any>,
-				...config,
-			})
-		},
-		asDate,
-		asImageSrc,
-		asImageWidthSrcSet,
-		asImagePixelDensitySrcSet,
-		isFilled,
-		documentToLinkField,
-	}
+	/**
+	 * The default link resolver used to resolve links when route resolvers cannot be used.
+	 *
+	 * @see {@link https://prismic.io/docs/routes}
+	 */
+	linkResolver?: LinkResolverFunction
 
-	// Create plugin interface
-	const prismic: PrismicPlugin = {
-		options,
+	/** @internal */
+	readonly components: ComponentsConfig
 
-		...prismicClient,
-		...prismicHelpers,
+	/** @internal */
+	install: (app: App) => void
+}
 
+/** Creates a Prismic Vue plugin instance that can be used by a Vue app. */
+export const createPrismic = (config: PrismicPluginConfig): PrismicPlugin => {
+	return {
+		...config,
+		components: config.components || {},
+		isFilled,
 		install(app: App): void {
 			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(PrismicTable.name!, PrismicTable)
-				app.component(PrismicText.name!, PrismicText)
-				app.component(PrismicRichText.name!, PrismicRichText)
-				app.component(SliceZone.name!, SliceZone)
-			}
 		},
 	}
+}
 
-	return prismic
+/**
+ * Access the Prismic Vue plugin interface.
+ *
+ * @example
+ *
+ * ```typescript
+ * const { client, isFilled } = usePrismic()
+ * ```
+ */
+export const usePrismic = (): PrismicPlugin => {
+	return inject(prismicKey, { components: {} } as PrismicPlugin)
 }
 
 declare module "vue" {
 	export interface ComponentCustomProperties {
-		/**
-		 * `@prismicio/vue` plugin interface exposed on `this`.
-		 *
-		 * @see `@prismicio/vue` plugin interface {@link PrismicPlugin}
-		 */
+		/** The Prismic Vue plugin interface. */
 		$prismic: PrismicPlugin
 	}
 }

package/src/index.ts

@@ -1,39 +1,24 @@
-import PrismicRichText from "./PrismicRichText/PrismicRichText.vue"
-import PrismicTable from "./PrismicTable/PrismicTable.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 { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.vue"
 export type { PrismicRichTextProps } from "./PrismicRichText/PrismicRichText.vue"
+export { getRichTextComponentProps } from "./PrismicRichText"
+export type { RichTextComponents, RichTextComponentProps } from "./PrismicRichText"
+
+export { default as PrismicTable } from "./PrismicTable/PrismicTable.vue"
 export type { PrismicTableProps } from "./PrismicTable/PrismicTable.vue"
+export { getTableComponentProps } from "./PrismicTable"
+export type { TableComponents } from "./PrismicTable"
 
-export type { PrismicEmbedProps } from "./PrismicEmbed.vue"
+export { default as PrismicImage } from "./PrismicImage.vue"
 export type { PrismicImageProps } from "./PrismicImage.vue"
-export type { PrismicLinkProps } from "./PrismicLink.vue"
-export type { PrismicTextProps } from "./PrismicText.vue"
 
-export {
-	SliceZone,
-	PrismicEmbed,
-	PrismicImage,
-	PrismicLink,
-	PrismicTable,
-	PrismicText,
-	PrismicRichText,
-}
-
-export { getRichTextComponentProps } from "./PrismicRichText"
-export type {
-	VueRichTextSerializer,
-	RichTextComponentProps,
-} from "./PrismicRichText"
+export { default as PrismicLink } from "./PrismicLink.vue"
+export type { PrismicLinkProps } from "./PrismicLink.vue"
 
-export { getTableComponentProps } from "./PrismicTable"
+export { default as PrismicText } from "./PrismicText.vue"
+export type { PrismicTextProps } from "./PrismicText.vue"
 
+export { default as SliceZone } from "./SliceZone/SliceZone.vue"
+export type { SliceZoneProps } from "./SliceZone/SliceZone.vue"
 export {
 	TODOSliceComponent,
 	defineSliceZoneComponents,
@@ -49,7 +34,5 @@ export type {
 	SliceZoneLike,
 } from "./SliceZone"
 
-export type { PrismicPluginOptions, PrismicPlugin } from "./types"
-
-export { createPrismic } from "./createPrismic"
-export { usePrismic, prismicKey } from "./usePrismic"
+export { createPrismic, usePrismic } from "./createPrismic"
+export type { PrismicPlugin, PrismicPluginConfig } from "./createPrismic"

package/src/lib/isInternalURL.ts

@@ -7,13 +7,9 @@
  */
 // TODO: This does not detect all relative URLs as internal, such as `about` or `./about`. This function assumes relative URLs start with a "/"`.
 export const isInternalURL = (url: string): boolean => {
-	/**
-	 * @see Regex101 expression: {@link https://regex101.com/r/1y7iod/1}
-	 */
+	/** @see Regex101 expression: {@link https://regex101.com/r/1y7iod/1} */
 	const isInternal = /^\/(?!\/)/.test(url)
-	/**
-	 * @see Regex101 expression: {@link https://regex101.com/r/RnUseS/1}
-	 */
+	/** @see Regex101 expression: {@link https://regex101.com/r/RnUseS/1} */
 	const isSpecialLink = !isInternal && !/^https?:\/\//i.test(url)
 
 	return isInternal && !isSpecialLink