@prismicio/vue 5.3.0-pr.88.ee9acb6 → 5.3.0-pr.89.d0f4ac2

package/src/SliceZone/types.ts

@@ -83,19 +83,13 @@ export type SliceComponentProps<
 	TSlice extends SliceLike = SliceLike,
 	TContext = unknown,
 > = {
-	/**
-	 * Slice data for this component.
-	 */
+	/** Slice data for this component. */
 	slice: TSlice
 
-	/**
-	 * The index of the Slice in the Slice Zone.
-	 */
+	/** The index of the Slice in the Slice Zone. */
 	index: number
 
-	/**
-	 * All Slices from the Slice Zone to which the Slice belongs.
-	 */
+	/** All Slices from the Slice Zone to which the Slice belongs. */
 	// TODO: We have to keep this list of Slices general due to circular
 	// reference limtiations. If we had another generic to determine the full
 	// union of Slice types, it would include TSlice. This causes TypeScript to

package/src/createPrismic.ts

@@ -0,0 +1,86 @@
+import type { CreateClient } from "@prismicio/client"
+import { isFilled } from "@prismicio/client"
+import { type App, type InjectionKey, inject } from "vue"
+
+import type { ComponentOrTagName } from "./types"
+
+import type { VueRichTextComponents } from "./PrismicRichText"
+import type { VueTableComponents } 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
+	 * fields.
+	 */
+	defaultComponents?: VueRichTextComponents & VueTableComponents
+}
+
+/**
+ * Prismic Vue plugin interface accessible through `usePrismic()` and
+ * `$prismic`.
+ */
+export type PrismicPlugin = {
+	/** A Prismic client that can be used to query content from a repository. */
+	client: ReturnType<CreateClient>
+
+	/** Helpers to determine if a field is filled. */
+	isFilled: typeof isFilled
+
+	/** @internal */
+	readonly componentsConfig?: ComponentsConfig
+
+	/** @internal */
+	install: (app: App) => void
+}
+
+/** Prismic Vue plugin configuration. */
+export type PrismicPluginConfig = {
+	/** A Prismic client instance to inject into the Vue app. */
+	client: ReturnType<CreateClient>
+
+	/** Components configuration. */
+	componentsConfig?: ComponentsConfig
+}
+
+/** Creates a Prismic Vue plugin instance that can be used by a Vue app. */
+export const createPrismic = (config: PrismicPluginConfig): PrismicPlugin => {
+	return {
+		...config,
+		isFilled,
+		install(app: App): void {
+			app.provide(prismicKey, this)
+			app.config.globalProperties.$prismic = this
+		},
+	}
+}
+
+/**
+ * Access the Prismic Vue plugin interface.
+ *
+ * @example
+ *
+ * ```typescript
+ * const { client, isFilled } = usePrismic()
+ * ```
+ */
+export const usePrismic = (): PrismicPlugin => {
+	return inject(prismicKey, { componentsConfig: {} } as PrismicPlugin)
+}
+
+declare module "vue" {
+	export interface ComponentCustomProperties {
+		/** The Prismic Vue plugin interface. */
+		$prismic: PrismicPlugin
+	}
+}

package/src/index.ts

@@ -2,13 +2,14 @@ export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.vu
 export type { PrismicRichTextProps } from "./PrismicRichText/PrismicRichText.vue"
 export { getRichTextComponentProps } from "./PrismicRichText"
 export type {
-	VueRichTextSerializer,
+	VueRichTextComponents,
 	RichTextComponentProps,
 } from "./PrismicRichText"
 
 export { default as PrismicTable } from "./PrismicTable/PrismicTable.vue"
 export type { PrismicTableProps } from "./PrismicTable/PrismicTable.vue"
 export { getTableComponentProps } from "./PrismicTable"
+export type { VueTableComponents } from "./PrismicTable"
 
 export { default as PrismicImage } from "./PrismicImage.vue"
 export type { PrismicImageProps } from "./PrismicImage.vue"
@@ -35,3 +36,6 @@ export type {
 	SliceZoneComponents,
 	SliceZoneLike,
 } from "./SliceZone"
+
+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

package/src/types.ts

@@ -20,8 +20,20 @@ export type VueComponent<TProps> =
 	| DefineComponent<TProps>
 	| FunctionalComponent<TProps>
 
+/**
+ * A shorthand definition for `<PrismicRichText />` and `<PrismicTable />`
+ * component types.
+ */
+export type VueComponentShorthand = {
+	/** The HTML element type rendered for this node type. */
+	as?: string
+
+	/** Other attributes to apply to the element type. */
+	[Attribute: string]: string | boolean | null | undefined
+}
+
 export const isVueComponent = <T>(
-	component: VueComponent<T> | unknown,
+	component: VueComponent<T> | VueComponentShorthand | undefined,
 ): component is VueComponent<T> => {
 	return (
 		!!component &&