@prismicio/vue 5.3.0 → 6.0.0-canary.331d154

package/src/PrismicRichText/PrismicRichTextDefaultComponent.vue

@@ -2,19 +2,35 @@
 import type { LinkResolverFunction } from "@prismicio/client"
 import { computed } from "vue"
 
+import type { ComponentShorthand } from "../types"
 import type { RichTextComponentProps } from "./types"
 
-import PrismicEmbed from "../PrismicEmbed.vue"
 import PrismicImage from "../PrismicImage.vue"
 import PrismicLink from "../PrismicLink.vue"
 
 const props = defineProps<
 	RichTextComponentProps & {
 		linkResolver?: LinkResolverFunction
+		shorthand?: ComponentShorthand
 	}
 >()
 defineOptions({ name: "PrismicRichTextDefaultComponent" })
 
+const as = computed(() => {
+	return props.node.type !== "image" &&
+		props.node.type !== "hyperlink" &&
+		props.node.type !== "label" &&
+		props.node.type !== "span"
+		? props.shorthand?.as
+		: undefined
+})
+
+const attrs = computed(() => {
+	const { as, ...attrs } = props.shorthand ?? {}
+
+	return attrs
+})
+
 const dir = computed(() => {
 	return "direction" in props.node && props.node.direction === "rtl"
 		? "rtl"
@@ -23,38 +39,68 @@ const dir = computed(() => {
 </script>
 
 <template>
-	<h1 v-if="node.type === 'heading1'" :dir="dir"><slot /></h1>
-	<h2 v-else-if="node.type === 'heading2'" :dir="dir"><slot /></h2>
-	<h3 v-else-if="node.type === 'heading3'" :dir="dir"><slot /></h3>
-	<h4 v-else-if="node.type === 'heading4'" :dir="dir"><slot /></h4>
-	<h5 v-else-if="node.type === 'heading5'" :dir="dir"><slot /></h5>
-	<h6 v-else-if="node.type === 'heading6'" :dir="dir"><slot /></h6>
-	<p v-else-if="node.type === 'paragraph'" :dir="dir"><slot /></p>
-	<pre v-else-if="node.type === 'preformatted'"><slot /></pre>
-	<strong v-else-if="node.type === 'strong'"><slot /></strong>
-	<em v-else-if="node.type === 'em'"><slot /></em>
-	<li v-else-if="node.type === 'list-item'" :dir="dir"><slot /></li>
-	<li v-else-if="node.type === 'o-list-item'" :dir="dir"><slot /></li>
-	<ul v-else-if="node.type === 'group-list-item'">
+	<component v-if="as" :is="as" :dir="dir" v-bind="attrs"><slot /></component>
+	<h1 v-else-if="node.type === 'heading1'" :dir="dir" v-bind="attrs">
+		<slot />
+	</h1>
+	<h2 v-else-if="node.type === 'heading2'" :dir="dir" v-bind="attrs">
+		<slot />
+	</h2>
+	<h3 v-else-if="node.type === 'heading3'" :dir="dir" v-bind="attrs">
+		<slot />
+	</h3>
+	<h4 v-else-if="node.type === 'heading4'" :dir="dir" v-bind="attrs">
+		<slot />
+	</h4>
+	<h5 v-else-if="node.type === 'heading5'" :dir="dir" v-bind="attrs">
+		<slot />
+	</h5>
+	<h6 v-else-if="node.type === 'heading6'" :dir="dir" v-bind="attrs">
+		<slot />
+	</h6>
+	<p v-else-if="node.type === 'paragraph'" :dir="dir" v-bind="attrs">
+		<slot />
+	</p>
+	<pre v-else-if="node.type === 'preformatted'" v-bind="attrs"><slot /></pre>
+	<strong v-else-if="node.type === 'strong'" v-bind="attrs"><slot /></strong>
+	<em v-else-if="node.type === 'em'" v-bind="attrs"><slot /></em>
+	<li v-else-if="node.type === 'list-item'" :dir="dir" v-bind="attrs">
+		<slot />
+	</li>
+	<li v-else-if="node.type === 'o-list-item'" :dir="dir" v-bind="attrs">
+		<slot />
+	</li>
+	<ul v-else-if="node.type === 'group-list-item'" v-bind="attrs">
 		<slot />
 	</ul>
-	<ol v-else-if="node.type === 'group-o-list-item'">
+	<ol v-else-if="node.type === 'group-o-list-item'" v-bind="attrs">
 		<slot />
 	</ol>
 	<p class="block-img" v-else-if="node.type === 'image'">
 		<PrismicLink v-if="node.linkTo" :field="node.linkTo"
-			><PrismicImage :field="node"
+			><PrismicImage :field="node" v-bind="attrs"
 		/></PrismicLink>
-		<PrismicImage v-else :field="node" />
+		<PrismicImage v-else :field="node" v-bind="attrs" />
 	</p>
-	<PrismicEmbed v-else-if="node.type === 'embed'" :field="node.oembed" />
+	<div
+		v-else-if="node.type === 'embed'"
+		:data-oembed="node.oembed.embed_url"
+		:data-oembed-type="node.oembed.type"
+		:data-oembed-provider="node.oembed.provider_name"
+		v-html="node.oembed.html"
+		v-bind="attrs"
+	/>
 	<PrismicLink
 		v-else-if="node.type === 'hyperlink'"
 		:field="node.data"
 		:link-resolver="linkResolver"
+		v-bind="attrs"
 		><slot
 	/></PrismicLink>
-	<span v-else-if="node.type === 'label'" :class="node.data.label"
+	<span
+		v-else-if="node.type === 'label'"
+		:class="node.data.label"
+		v-bind="attrs"
 		><slot
 	/></span>
 	<template v-else v-for="(line, index) in node.text.split('\n')" :key="line"

package/src/PrismicRichText/PrismicRichTextSerialize.vue

@@ -1,52 +1,28 @@
 <script lang="ts" setup>
-import type { LinkResolverFunction } from "@prismicio/client"
 import type { asTree } from "@prismicio/client/richtext"
 
-import type { VueRichTextSerializer } from "./types"
-
-import PrismicRichTextDefaultComponent from "./PrismicRichTextDefaultComponent.vue"
-
-const CHILD_TYPE_RENAMES = {
-	"list-item": "listItem",
-	"o-list-item": "oListItem",
-	"group-list-item": "list",
-	"group-o-list-item": "oList",
-} as const
+import type { InternalRichTextComponents } from "./types"
 
 type PrismicRichTextSerializeProps = {
-	components?: VueRichTextSerializer
 	children: ReturnType<typeof asTree>["children"]
-	linkResolver?: LinkResolverFunction
+	internalComponents: InternalRichTextComponents
 }
 
 const props = defineProps<PrismicRichTextSerializeProps>()
 defineOptions({ name: "PrismicRichTextSerialize" })
-
-function getComponent(child: ReturnType<typeof asTree>["children"][number]) {
-	return (
-		props.components?.[
-			CHILD_TYPE_RENAMES[child.type as keyof typeof CHILD_TYPE_RENAMES] ||
-				(child.type as keyof typeof props.components)
-		] || PrismicRichTextDefaultComponent
-	)
-}
 </script>
 
 <template>
 	<component
 		v-for="child in props.children"
 		:key="JSON.stringify(child)"
-		:is="getComponent(child)"
+		:is="internalComponents[child.type].is"
 		:node="child.node"
-		:link-resolver="
-			getComponent(child) === PrismicRichTextDefaultComponent
-				? props.linkResolver
-				: undefined
-		"
+		:link-resolver="internalComponents[child.type].linkResolver"
+		:shorthand="internalComponents[child.type].shorthand"
 		><PrismicRichTextSerialize
 			v-if="child.children.length"
 			:children="child.children"
-			:components="components"
-			:link-resolver="linkResolver"
+			:internal-components="internalComponents"
 	/></component>
 </template>

package/src/PrismicRichText/index.ts

@@ -1,3 +1,3 @@
 export { getRichTextComponentProps } from "./getRichTextComponentProps"
 
-export type { VueRichTextSerializer, RichTextComponentProps } from "./types"
+export type { RichTextComponents, RichTextComponentProps } from "./types"

package/src/PrismicRichText/types.ts

@@ -1,9 +1,29 @@
-import type { RTAnyNode, RichTextNodeType } from "@prismicio/client"
 import type {
-	DefineComponent,
-	FunctionalComponent,
-	defineAsyncComponent,
-} from "vue"
+	LinkResolverFunction,
+	RTAnyNode,
+	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 { Component, ComponentShorthand } from "../types"
 
 /**
  * A map of Rich Text block types to Vue Components. It is used to render Rich
@@ -11,13 +31,33 @@ import type {
  *
  * @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>
->
+export type RichTextComponents = {
+	heading1?: RichTextComponent<RTHeading1Node> | ComponentShorthand
+	heading2?: RichTextComponent<RTHeading2Node> | ComponentShorthand
+	heading3?: RichTextComponent<RTHeading3Node> | ComponentShorthand
+	heading4?: RichTextComponent<RTHeading4Node> | ComponentShorthand
+	heading5?: RichTextComponent<RTHeading5Node> | ComponentShorthand
+	heading6?: RichTextComponent<RTHeading6Node> | ComponentShorthand
+	paragraph?: RichTextComponent<RTParagraphNode> | ComponentShorthand
+	preformatted?:
+		| RichTextComponent<RTPreformattedNode>
+		| ComponentShorthand
+	strong?: RichTextComponent<RTStrongNode> | ComponentShorthand
+	em?: RichTextComponent<RTEmNode> | ComponentShorthand
+	listItem?: RichTextComponent<RTListItemNode> | ComponentShorthand
+	oListItem?: RichTextComponent<RTOListItemNode> | ComponentShorthand
+	list?: RichTextComponent<RTListNode> | ComponentShorthand
+	oList?: RichTextComponent<RTOListNode> | ComponentShorthand
+	image?: RichTextComponent<RTImageNode> | Omit<ComponentShorthand, "as">
+	embed?: RichTextComponent<RTEmbedNode> | ComponentShorthand
+	hyperlink?:
+		| RichTextComponent<RTLinkNode>
+		| Omit<ComponentShorthand, "as">
+	label?: RichTextComponent<RTLabelNode> | Omit<ComponentShorthand, "as">
+	span?: RichTextComponent<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
 }
@@ -27,11 +67,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> =
-	// For reference within TypeScript files when `*.vue` type cannot be inferred
-	// eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/no-explicit-any
-	| DefineComponent<{}, {}, any>
-	// Likewise, for reference with TypeScript files.
-	| ReturnType<typeof defineAsyncComponent>
-	| DefineComponent<RichTextComponentProps<TRTNode>>
-	| FunctionalComponent<RichTextComponentProps<TRTNode>>
+export type RichTextComponent<TRTNode extends RTAnyNode = RTAnyNode> =
+	Component<RichTextComponentProps<TRTNode>>
+
+export type InternalRichTextComponents = Record<
+	RichTextNodeTypes,
+	{
+		is: RichTextComponent
+		linkResolver?: LinkResolverFunction
+		shorthand?: ComponentShorthand
+	}
+>

package/src/PrismicTable/PrismicTable.vue

@@ -2,79 +2,114 @@
 import { type TableField, isFilled } from "@prismicio/client"
 import { computed } from "vue"
 
-import type { ComponentOrTagName } from "../types"
-import type { VueTableComponents } from "./types"
+import type { ComponentOrTagName, ComponentShorthand } from "../types"
+import { isComponent } from "../types"
+import type { InternalTableComponents, TableComponents } from "./types"
 
-import type { VueRichTextSerializer } from "../PrismicRichText"
+import type { RichTextComponents } 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.
-	 */
+	/** The Prismic table field to render. */
 	field: TableField | undefined
 
 	/**
-	 * The value to be rendered when the field is empty. If a fallback is not
-	 * given, `null` (nothing) will be rendered.
-	 */
-	fallback?: ComponentOrTagName
-
-	/**
-	 * An object that maps a table block type to a Vue component.
+	 * An object that maps a table block type to a Vue component or a shorthand
+	 * definition.
 	 *
 	 * @example
 	 *
 	 * ```javascript
 	 * {
 	 *   table: Table,
+	 *   thead: { class: 'bg-black text-white' },
+	 *   th: { as: 'td', class: 'font-bold' },
 	 * }
 	 * ```
 	 */
-	components?: VueTableComponents & VueRichTextSerializer
+	components?: TableComponents & RichTextComponents
+
+	/**
+	 * The value to be rendered when the field is empty. If a fallback is not
+	 * given, `null` (nothing) will be rendered.
+	 */
+	fallback?: ComponentOrTagName
 }
 
 const props = defineProps<PrismicTableProps>()
 defineOptions({ name: "PrismicTable" })
 
-const mergedComponents = computed(() => ({
-	...defaultTableComponents,
-	...props.components,
-}))
+const { components: { richTextComponents } } = usePrismic()
+
+const resolvedComponents = computed<TableComponents & RichTextComponents>(
+	() => {
+		return { ...richTextComponents, ...props.components }
+	},
+)
+
+function getInternalComponent(type: keyof TableComponents) {
+	const maybeComponentOrShorthand = resolvedComponents.value?.[type]
+
+	if (isComponent(maybeComponentOrShorthand)) {
+		return { is: maybeComponentOrShorthand }
+	}
+
+	return {
+		is: defaultTableComponents[type],
+		shorthand: maybeComponentOrShorthand as ComponentShorthand,
+	}
+}
+
+const internalTableComponents = computed<InternalTableComponents>(() => {
+	return {
+		table: getInternalComponent("table"),
+		thead: getInternalComponent("thead"),
+		tbody: getInternalComponent("tbody"),
+		tr: getInternalComponent("tr"),
+		th: getInternalComponent("th"),
+		td: getInternalComponent("td"),
+	}
+})
 </script>
 
 <template>
 	<component
 		v-if="isFilled.table(field)"
-		:is="mergedComponents.table"
+		:is="internalTableComponents.table.is"
 		:table="field"
-		v-bind="$attrs"
+		v-bind="{ ...$attrs, ...internalTableComponents.table.shorthand }"
 	>
 		<component
 			v-if="field.head"
-			:is="mergedComponents.thead"
+			:is="internalTableComponents.thead.is"
 			:head="field.head"
+			v-bind="internalTableComponents.thead.shorthand"
 		>
 			<PrismicTableRow
 				v-for="row in field.head.rows"
 				:key="row.key"
 				:row="row"
-				:components="mergedComponents"
+				:internalTableComponents="internalTableComponents"
+				:components="components"
 			/>
 		</component>
-		<component :is="mergedComponents.tbody" :body="field.body">
+		<component
+			:is="internalTableComponents.tbody.is"
+			:body="field.body"
+			v-bind="internalTableComponents.tbody.shorthand"
+		>
 			<PrismicTableRow
 				v-for="row in field.body.rows"
 				:key="row.key"
 				:row="row"
-				:components="mergedComponents"
+				:internalTableComponents="internalTableComponents"
+				:components="components"
 			/>
 		</component>
 	</component>
-	<component v-else :is="fallback" />
+	<component v-else-if="fallback" :is="fallback" v-bind="$attrs" />
 </template>

package/src/PrismicTable/PrismicTableDefaultComponents.ts

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

package/src/PrismicTable/PrismicTableRow.vue

@@ -1,32 +1,15 @@
 <script lang="ts" setup>
 import type { TableFieldBodyRow, TableFieldHeadRow } from "@prismicio/client"
 
-import type { VueTableComponents } from "./types"
+import type { InternalTableComponents } from "./types"
 
-import type { VueRichTextSerializer } from "../PrismicRichText"
+import type { RichTextComponents } from "../PrismicRichText"
 import PrismicRichText from "../PrismicRichText/PrismicRichText.vue"
 
-/**
- * Props for `<PrismicRowTable />`.
- */
 export type PrismicTableRowProps = {
-	/**
-	 * The Prismic table row to render.
-	 */
 	row: TableFieldHeadRow | TableFieldBodyRow
-
-	/**
-	 * An object that maps a table block type to a Vue component.
-	 *
-	 * @example
-	 *
-	 * ```javascript
-	 * {
-	 *   tr: TableRow,
-	 * }
-	 * ```
-	 */
-	components: VueTableComponents & VueRichTextSerializer
+	internalTableComponents: InternalTableComponents
+	components?: RichTextComponents
 }
 
 const props = defineProps<PrismicTableRowProps>()
@@ -34,17 +17,27 @@ defineOptions({ name: "PrismicTableRow" })
 </script>
 
 <template>
-	<component :is="props.components.tr" :row="row">
+	<component
+		:is="internalTableComponents.tr.is"
+		:row="row"
+		v-bind="internalTableComponents.tr.shorthand"
+	>
 		<template v-for="cell in row.cells" :key="cell.key">
 			<component
 				v-if="cell.type === 'header'"
-				:is="props.components.th"
+				:is="internalTableComponents.th.is"
 				:cell="cell"
+				v-bind="internalTableComponents.th.shorthand"
 			>
 				<PrismicRichText :field="cell.content" :components="components" />
 			</component>
-			<component v-else :is="props.components.td" :cell="cell">
-				<PrismicRichText :field="cell.content" :components="props.components" />
+			<component
+				v-else
+				:is="internalTableComponents.td.is"
+				:cell="cell"
+				v-bind="internalTableComponents.td.shorthand"
+			>
+				<PrismicRichText :field="cell.content" :components="components" />
 			</component>
 		</template>
 	</component>

package/src/PrismicTable/index.ts

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

package/src/PrismicTable/types.ts

@@ -7,11 +7,8 @@ import type {
 	TableFieldHeadRow,
 	TableFieldHeaderCell,
 } from "@prismicio/client"
-import type {
-	DefineComponent,
-	FunctionalComponent,
-	defineAsyncComponent,
-} from "vue"
+
+import type { Component, ComponentShorthand } from "../types"
 
 /**
  * A map of Table block types to Vue Components. It is used to render table
@@ -19,16 +16,50 @@ import type {
  *
  * @see Templating Table fields from Prismic {@link https://prismic.io/docs/table}
  */
-export type VueTableComponents = {
-	table?: VueComponent<{ table: TableField<"filled"> }>
-	thead?: VueComponent<{ head: TableFieldHead }>
-	tbody?: VueComponent<{ body: TableFieldBody }>
-	tr?: VueComponent<{ row: TableFieldBodyRow | TableFieldHeadRow }>
-	th?: VueComponent<{ cell: TableFieldHeaderCell }>
-	td?: VueComponent<{ cell: TableFieldDataCell }>
+export type TableComponents = {
+	table?:
+		| Component<{ table: TableField<"filled"> }>
+		| Omit<ComponentShorthand, "as">
+	thead?:
+		| Component<{ head: TableFieldHead }>
+		| Omit<ComponentShorthand, "as">
+	tbody?:
+		| Component<{ body: TableFieldBody }>
+		| Omit<ComponentShorthand, "as">
+	tr?:
+		| Component<{ row: TableFieldBodyRow | TableFieldHeadRow }>
+		| Omit<ComponentShorthand, "as">
+	th?:
+		| Component<{ cell: TableFieldHeaderCell }>
+		| Omit<ComponentShorthand, "as">
+	td?:
+		| Component<{ cell: TableFieldDataCell }>
+		| Omit<ComponentShorthand, "as">
 }
 
-type VueComponent<TProps> =
-	| ReturnType<typeof defineAsyncComponent>
-	| DefineComponent<TProps>
-	| FunctionalComponent<TProps>
+export type InternalTableComponents = {
+	table: {
+		is: TableComponents["table"]
+		shorthand?: Omit<ComponentShorthand, "as">
+	}
+	thead: {
+		is: TableComponents["thead"]
+		shorthand?: Omit<ComponentShorthand, "as">
+	}
+	tbody: {
+		is: TableComponents["tbody"]
+		shorthand?: Omit<ComponentShorthand, "as">
+	}
+	tr: {
+		is: TableComponents["tr"]
+		shorthand?: Omit<ComponentShorthand, "as">
+	}
+	th: {
+		is: TableComponents["th"]
+		shorthand?: Omit<ComponentShorthand, "as">
+	}
+	td: {
+		is: TableComponents["td"]
+		shorthand?: Omit<ComponentShorthand, "as">
+	}
+}