@prismicio/vue 5.3.0-pr.88.72388e2 → 5.3.0-pr.89.d0f4ac2

package/src/PrismicRichText/types.ts

@@ -1,10 +1,29 @@
 import type {
 	LinkResolverFunction,
 	RTAnyNode,
-	RichTextNodeType,
+	RTEmNode,
+	RTEmbedNode,
+	RTHeading1Node,
+	RTHeading2Node,
+	RTHeading3Node,
+	RTHeading4Node,
+	RTHeading5Node,
+	RTHeading6Node,
+	RTImageNode,
+	RTLabelNode,
+	RTLinkNode,
+	RTListItemNode,
+	RTListNode,
+	RTOListItemNode,
+	RTOListNode,
+	RTParagraphNode,
+	RTPreformattedNode,
+	RTSpanNode,
+	RTStrongNode,
+	RichTextNodeTypes,
 } from "@prismicio/client"
 
-import type { VueComponent } from "../types"
+import type { VueComponent, VueComponentShorthand } from "../types"
 
 /**
  * A map of Rich Text block types to Vue Components. It is used to render Rich
@@ -12,13 +31,37 @@ import type { VueComponent } from "../types"
  *
  * @see Templating Rich Text and title fields from Prismic {@link https://prismic.io/docs/rich-text}
  */
-export type VueRichTextSerializer = Partial<
-	Record<keyof typeof RichTextNodeType, VueRichTextComponent | VueShorthand>
->
+export type VueRichTextComponents = {
+	heading1?: RichTextComponentProps<RTHeading1Node> | VueComponentShorthand
+	heading2?: RichTextComponentProps<RTHeading2Node> | VueComponentShorthand
+	heading3?: RichTextComponentProps<RTHeading3Node> | VueComponentShorthand
+	heading4?: RichTextComponentProps<RTHeading4Node> | VueComponentShorthand
+	heading5?: RichTextComponentProps<RTHeading5Node> | VueComponentShorthand
+	heading6?: RichTextComponentProps<RTHeading6Node> | VueComponentShorthand
+	paragraph?: RichTextComponentProps<RTParagraphNode> | VueComponentShorthand
+	preformatted?:
+		| RichTextComponentProps<RTPreformattedNode>
+		| VueComponentShorthand
+	strong?: RichTextComponentProps<RTStrongNode> | VueComponentShorthand
+	em?: RichTextComponentProps<RTEmNode> | VueComponentShorthand
+	listItem?: RichTextComponentProps<RTListItemNode> | VueComponentShorthand
+	oListItem?: RichTextComponentProps<RTOListItemNode> | VueComponentShorthand
+	list?: RichTextComponentProps<RTListNode> | VueComponentShorthand
+	oList?: RichTextComponentProps<RTOListNode> | VueComponentShorthand
+	image?:
+		| RichTextComponentProps<RTImageNode>
+		| Omit<VueComponentShorthand, "as">
+	embed?: RichTextComponentProps<RTEmbedNode> | VueComponentShorthand
+	hyperlink?:
+		| RichTextComponentProps<RTLinkNode>
+		| Omit<VueComponentShorthand, "as">
+	label?:
+		| RichTextComponentProps<RTLabelNode>
+		| Omit<VueComponentShorthand, "as">
+	span?: RichTextComponentProps<RTSpanNode>
+}
 
-/**
- * Props for a component rendering nodes from a Prismic rich text field.
- */
+/** Props for a component rendering nodes from a Prismic rich text field. */
 export type RichTextComponentProps<TRTNode extends RTAnyNode = RTAnyNode> = {
 	node: TRTNode
 }
@@ -28,29 +71,14 @@ export type RichTextComponentProps<TRTNode extends RTAnyNode = RTAnyNode> = {
  *
  * @typeParam TRTNode - The type of rich text node(s) this component handles
  */
-type VueRichTextComponent<TRTNode extends RTAnyNode = RTAnyNode> = VueComponent<
-	RichTextComponentProps<TRTNode>
->
-
-/**
- * A shorthand definition for {@link VueRichTextSerializer} component types.
- */
-export type VueShorthand = {
-	/**
-	 * 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 type VueRichTextComponent<TRTNode extends RTAnyNode = RTAnyNode> =
+	VueComponent<RichTextComponentProps<TRTNode>>
 
-export type InternalVueRichTextComponent = Record<
-	(typeof RichTextNodeType)[keyof typeof RichTextNodeType],
+export type InternalVueRichTextComponents = Record<
+	RichTextNodeTypes,
 	{
 		is: VueRichTextComponent
-		props?: { linkResolver?: LinkResolverFunction; shorthand?: VueShorthand }
+		linkResolver?: LinkResolverFunction
+		shorthand?: VueComponentShorthand
 	}
 >

package/src/PrismicTable/PrismicTable.vue

@@ -2,24 +2,24 @@
 import { type TableField, isFilled } from "@prismicio/client"
 import { computed } from "vue"
 
-import type { VueShorthand } from "../PrismicRichText/types"
-import { type ComponentOrTagName, isVueComponent } from "../types"
+import type { ComponentOrTagName, VueComponentShorthand } from "../types"
+import { isVueComponent } from "../types"
 import type { InternalVueTableComponents, VueTableComponents } from "./types"
 
-import type { VueRichTextSerializer } from "../PrismicRichText"
+import type { VueRichTextComponents } from "../PrismicRichText"
+import { usePrismic } from "../createPrismic"
 
 import { defaultTableComponents } from "./PrismicTableDefaultComponents"
 import PrismicTableRow from "./PrismicTableRow.vue"
 
-/**
- * Props for `<PrismicTable />`.
- */
+/** Props for `<PrismicTable />`. */
 export type PrismicTableProps = {
 	/** The Prismic table field to render. */
 	field: TableField | undefined
 
 	/**
-	 * An object that maps a table block type to a Vue component or a shorthand definition.
+	 * An object that maps a table block type to a Vue component or a shorthand
+	 * definition.
 	 *
 	 * @example
 	 *
@@ -31,7 +31,7 @@ export type PrismicTableProps = {
 	 * }
 	 * ```
 	 */
-	components?: VueTableComponents & VueRichTextSerializer
+	components?: VueTableComponents & VueRichTextComponents
 
 	/**
 	 * The value to be rendered when the field is empty. If a fallback is not
@@ -43,8 +43,16 @@ export type PrismicTableProps = {
 const props = defineProps<PrismicTableProps>()
 defineOptions({ name: "PrismicTable" })
 
+const { componentsConfig } = usePrismic()
+
+const resolvedComponents = computed<VueTableComponents & VueRichTextComponents>(
+	() => {
+		return { ...componentsConfig?.defaultComponents, ...props.components }
+	},
+)
+
 function getInternalComponent(type: keyof VueTableComponents) {
-	const maybeComponentOrShorthand = props.components?.[type]
+	const maybeComponentOrShorthand = resolvedComponents.value?.[type]
 
 	if (isVueComponent(maybeComponentOrShorthand)) {
 		return { is: maybeComponentOrShorthand }
@@ -52,11 +60,11 @@ function getInternalComponent(type: keyof VueTableComponents) {
 
 	return {
 		is: defaultTableComponents[type],
-		shorthand: maybeComponentOrShorthand as VueShorthand,
+		shorthand: maybeComponentOrShorthand as VueComponentShorthand,
 	}
 }
 
-const tableComponents = computed<InternalVueTableComponents>(() => {
+const internalTableComponents = computed<InternalVueTableComponents>(() => {
 	return {
 		table: getInternalComponent("table"),
 		thead: getInternalComponent("thead"),
@@ -71,34 +79,34 @@ const tableComponents = computed<InternalVueTableComponents>(() => {
 <template>
 	<component
 		v-if="isFilled.table(field)"
-		:is="tableComponents.table.is"
+		:is="internalTableComponents.table.is"
 		:table="field"
-		v-bind="{ ...$attrs, ...tableComponents.table.shorthand }"
+		v-bind="{ ...$attrs, ...internalTableComponents.table.shorthand }"
 	>
 		<component
 			v-if="field.head"
-			:is="tableComponents.thead.is"
+			:is="internalTableComponents.thead.is"
 			:head="field.head"
-			v-bind="tableComponents.thead.shorthand"
+			v-bind="internalTableComponents.thead.shorthand"
 		>
 			<PrismicTableRow
 				v-for="row in field.head.rows"
 				:key="row.key"
 				:row="row"
-				:internalTableComponents="tableComponents"
+				:internalTableComponents="internalTableComponents"
 				:components="components"
 			/>
 		</component>
 		<component
-			:is="tableComponents.tbody.is"
+			:is="internalTableComponents.tbody.is"
 			:body="field.body"
-			v-bind="tableComponents.tbody.shorthand"
+			v-bind="internalTableComponents.tbody.shorthand"
 		>
 			<PrismicTableRow
 				v-for="row in field.body.rows"
 				:key="row.key"
 				:row="row"
-				:internalTableComponents="tableComponents"
+				:internalTableComponents="internalTableComponents"
 				:components="components"
 			/>
 		</component>

package/src/PrismicTable/PrismicTableDefaultComponents.ts

@@ -1,69 +1,44 @@
 import { defineComponent, h } from "vue"
-import type { PropType } from "vue"
 
-import type { DefaultVueTableComponents } from "./types"
+import type { VueTableComponents } from "./types"
 
 import * as getTableComponentProps from "./getTableComponentProps"
 
-export const defaultTableComponents: DefaultVueTableComponents = {
+export const defaultTableComponents: Required<VueTableComponents> = {
 	table: defineComponent({
-		props: {
-			...getTableComponentProps.table(),
-			as: { type: String as PropType<string | undefined> },
-		},
+		props: getTableComponentProps.table(),
 		setup(props, { attrs, slots }) {
-			return () =>
-				h(props.as ?? "table", attrs, slots.default ? slots.default() : [])
+			return () => h("table", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 	thead: defineComponent({
-		props: {
-			...getTableComponentProps.thead(),
-			as: { type: String as PropType<string | undefined> },
-		},
+		props: getTableComponentProps.thead(),
 		setup(props, { attrs, slots }) {
-			return () =>
-				h(props.as ?? "thead", attrs, slots.default ? slots.default() : [])
+			return () => h("thead", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 	tbody: defineComponent({
-		props: {
-			...getTableComponentProps.tbody(),
-			as: { type: String as PropType<string | undefined> },
-		},
+		props: getTableComponentProps.tbody(),
 		setup(props, { attrs, slots }) {
-			return () =>
-				h(props.as ?? "tbody", attrs, slots.default ? slots.default() : [])
+			return () => h("tbody", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 	tr: defineComponent({
-		props: {
-			...getTableComponentProps.tr(),
-			as: { type: String as PropType<string | undefined> },
-		},
+		props: getTableComponentProps.tr(),
 		setup(props, { attrs, slots }) {
-			return () =>
-				h(props.as ?? "tr", attrs, slots.default ? slots.default() : [])
+			return () => h("tr", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 	th: defineComponent({
-		props: {
-			...getTableComponentProps.th(),
-			as: { type: String as PropType<string | undefined> },
-		},
+		props: getTableComponentProps.th(),
 		setup(props, { attrs, slots }) {
-			return () =>
-				h(props.as ?? "th", attrs, slots.default ? slots.default() : [])
+			return () => h("th", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 	td: defineComponent({
-		props: {
-			...getTableComponentProps.td(),
-			as: { type: String as PropType<string | undefined> },
-		},
+		props: getTableComponentProps.td(),
 		setup(props, { attrs, slots }) {
-			return () =>
-				h(props.as ?? "td", attrs, slots.default ? slots.default() : [])
+			return () => h("td", attrs, slots.default ? slots.default() : [])
 		},
 	}),
 }

package/src/PrismicTable/PrismicTableRow.vue

@@ -3,13 +3,13 @@ import type { TableFieldBodyRow, TableFieldHeadRow } from "@prismicio/client"
 
 import type { InternalVueTableComponents } from "./types"
 
-import type { VueRichTextSerializer } from "../PrismicRichText"
+import type { VueRichTextComponents } from "../PrismicRichText"
 import PrismicRichText from "../PrismicRichText/PrismicRichText.vue"
 
 export type PrismicTableRowProps = {
 	row: TableFieldHeadRow | TableFieldBodyRow
 	internalTableComponents: InternalVueTableComponents
-	components?: VueRichTextSerializer
+	components?: VueRichTextComponents
 }
 
 const props = defineProps<PrismicTableRowProps>()

package/src/PrismicTable/index.ts

@@ -1 +1,3 @@
 export * as getTableComponentProps from "./getTableComponentProps"
+
+export type { VueTableComponents } from "./types"

package/src/PrismicTable/types.ts

@@ -8,8 +8,7 @@ import type {
 	TableFieldHeaderCell,
 } from "@prismicio/client"
 
-import type { VueShorthand } from "../PrismicRichText/types"
-import type { VueComponent } from "../types"
+import type { VueComponent, VueComponentShorthand } from "../types"
 
 /**
  * A map of Table block types to Vue Components. It is used to render table
@@ -18,30 +17,49 @@ import type { VueComponent } from "../types"
  * @see Templating Table fields from Prismic {@link https://prismic.io/docs/table}
  */
 export type VueTableComponents = {
-	table?: VueComponent<{ table: TableField<"filled"> }> | VueShorthand
-	thead?: VueComponent<{ head: TableFieldHead }> | VueShorthand
-	tbody?: VueComponent<{ body: TableFieldBody }> | VueShorthand
+	table?:
+		| VueComponent<{ table: TableField<"filled"> }>
+		| Omit<VueComponentShorthand, "as">
+	thead?:
+		| VueComponent<{ head: TableFieldHead }>
+		| Omit<VueComponentShorthand, "as">
+	tbody?:
+		| VueComponent<{ body: TableFieldBody }>
+		| Omit<VueComponentShorthand, "as">
 	tr?:
 		| VueComponent<{ row: TableFieldBodyRow | TableFieldHeadRow }>
-		| VueShorthand
-	th?: VueComponent<{ cell: TableFieldHeaderCell }> | VueShorthand
-	td?: VueComponent<{ cell: TableFieldDataCell }> | VueShorthand
-}
-
-export type DefaultVueTableComponents = {
-	table: VueComponent<{ table: TableField<"filled">; as?: string }>
-	thead: VueComponent<{ head: TableFieldHead; as?: string }>
-	tbody: VueComponent<{ body: TableFieldBody; as?: string }>
-	tr: VueComponent<{ row: TableFieldBodyRow | TableFieldHeadRow; as?: string }>
-	th: VueComponent<{ cell: TableFieldHeaderCell; as?: string }>
-	td: VueComponent<{ cell: TableFieldDataCell; as?: string }>
+		| Omit<VueComponentShorthand, "as">
+	th?:
+		| VueComponent<{ cell: TableFieldHeaderCell }>
+		| Omit<VueComponentShorthand, "as">
+	td?:
+		| VueComponent<{ cell: TableFieldDataCell }>
+		| Omit<VueComponentShorthand, "as">
 }
 
 export type InternalVueTableComponents = {
-	table: { is: VueTableComponents["table"]; shorthand?: VueShorthand }
-	thead: { is: VueTableComponents["thead"]; shorthand?: VueShorthand }
-	tbody: { is: VueTableComponents["tbody"]; shorthand?: VueShorthand }
-	tr: { is: VueTableComponents["tr"]; shorthand?: VueShorthand }
-	th: { is: VueTableComponents["th"]; shorthand?: VueShorthand }
-	td: { is: VueTableComponents["td"]; shorthand?: VueShorthand }
+	table: {
+		is: VueTableComponents["table"]
+		shorthand?: Omit<VueComponentShorthand, "as">
+	}
+	thead: {
+		is: VueTableComponents["thead"]
+		shorthand?: Omit<VueComponentShorthand, "as">
+	}
+	tbody: {
+		is: VueTableComponents["tbody"]
+		shorthand?: Omit<VueComponentShorthand, "as">
+	}
+	tr: {
+		is: VueTableComponents["tr"]
+		shorthand?: Omit<VueComponentShorthand, "as">
+	}
+	th: {
+		is: VueTableComponents["th"]
+		shorthand?: Omit<VueComponentShorthand, "as">
+	}
+	td: {
+		is: VueTableComponents["td"]
+		shorthand?: Omit<VueComponentShorthand, "as">
+	}
 }

package/src/PrismicText.vue

@@ -6,9 +6,7 @@ import { watchEffect } from "vue"
 
 import { devMsg } from "./lib/devMsg"
 
-/**
- * Props for `<PrismicText />`.
- */
+/** Props for `<PrismicText />`. */
 export type PrismicTextProps = {
 	/** The Prismic rich text field to render. */
 	field: RichTextField | null | undefined

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