@prismicio/vue 5.3.0-canary.5d9ea4c → 5.3.0-canary.87748cc

package/src/PrismicRichText/PrismicRichText.vue

@@ -1,83 +1,61 @@
 <script lang="ts" setup>
-import {
-	type HTMLRichTextFunctionSerializer,
-	type HTMLRichTextMapSerializer,
-	type LinkResolverFunction,
-	type RichTextField,
-	isFilled,
+import type {
+	LinkResolverFunction,
+	RichTextField,
+	RichTextNodeType,
 } from "@prismicio/client"
 import { asTree } from "@prismicio/client/richtext"
-import { DEV } from "esm-env"
 import type { PropType } from "vue"
-import { computed, watchEffect } from "vue"
+import { computed } from "vue"
 
-import Wrapper from "../lib/Wrapper.vue"
+import { type ComponentOrTagName, isVueComponent } from "../types"
+import type {
+	InternalVueRichTextComponent,
+	VueRichTextSerializer,
+	VueShorthand,
+} from "./types"
 
-import type { ComponentOrTagName } from "../types"
-import type { VueRichTextSerializer } from "./types"
-
-import { usePrismic } from "../usePrismic"
-
-import DeprecatedPrismicRichText from "./DeprecatedPrismicRichText.vue"
+import PrismicRichTextDefaultComponent from "./PrismicRichTextDefaultComponent.vue"
 import PrismicRichTextSerialize from "./PrismicRichTextSerialize.vue"
 
 /**
  * Props for `<PrismicRichText />`.
  */
 export type PrismicRichTextProps = {
-	/**
-	 * The Prismic rich text or title field to render.
-	 */
+	/** The Prismic rich text field to render. */
 	field: RichTextField | null | undefined
 
 	/**
-	 * The value to be rendered when the field is empty. If a fallback is not
-	 * given, `null` (nothing) will be rendered.
+	 * The link resolver used to resolve links.
+	 *
+	 * @remarks
+	 * If your app uses route resolvers when querying for your Prismic
+	 * repository's content, a link resolver does not need to be provided.
+	 *
+	 * @see Learn about link resolvers and route resolvers {@link https://prismic.io/docs/routes}
 	 */
-	fallback?: ComponentOrTagName
+	linkResolver?: LinkResolverFunction
 
 	/**
-	 * An object that maps a rich text block type to a Vue component.
+	 * An object that maps a rich text block type to a Vue component or a shorthand definition.
 	 *
 	 * @example
 	 *
 	 * ```javascript
 	 * {
 	 *   heading1: Heading1,
+	 *   paragraph: { class: 'prose'},
+	 *   strong: { as: 'em', class: 'font-bold' },
 	 * }
 	 * ```
 	 */
 	components?: VueRichTextSerializer
 
 	/**
-	 * A link resolver function used to resolve link when not using the route
-	 * resolver parameter with `@prismicio/client`.
-	 *
-	 * @defaultValue The link resolver provided to `@prismicio/vue` plugin if configured.
-	 *
-	 * @see Link resolver documentation {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver#link-resolver}
-	 */
-	linkResolver?: LinkResolverFunction
-
-	/**
-	 * An HTML serializer to customize the way rich text fields are rendered.
-	 *
-	 * @deprecated Use `components` instead.
-	 *
-	 * @defaultValue The HTML serializer provided to `@prismicio/vue` plugin if configured.
-	 *
-	 * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}
-	 */
-	// TODO: Remove in v6
-	serializer?: HTMLRichTextFunctionSerializer | HTMLRichTextMapSerializer
-
-	/**
-	 * An HTML tag name or a component used to wrap the output. `<PrismicText />`
-	 * is not wrapped by default.
-	 *
-	 * @defaultValue `"template"` (no wrapper)
+	 * The value to be rendered when the field is empty. If a fallback is not
+	 * given, `null` will be rendered.
 	 */
-	wrapper?: ComponentOrTagName
+	fallback?: ComponentOrTagName
 }
 
 // We're forced to declare props using the JavaScript syntax because `@vue/compiler-sfc`
@@ -86,98 +64,70 @@ const props = defineProps({
 	field: {
 		type: Array as unknown as PropType<PrismicRichTextProps["field"]>,
 	},
-	fallback: {
-		type: [String, Object, Function] as PropType<
-			PrismicRichTextProps["fallback"]
-		>,
-	},
-	components: {
-		type: Object as PropType<PrismicRichTextProps["components"]>,
-	},
 	linkResolver: {
 		type: Function as PropType<PrismicRichTextProps["linkResolver"]>,
 	},
-	serializer: {
-		type: [Object, Function] as PropType<PrismicRichTextProps["serializer"]>,
+	components: {
+		type: Object as PropType<PrismicRichTextProps["components"]>,
 	},
-	wrapper: {
+	fallback: {
 		type: [String, Object, Function] as PropType<
-			PrismicRichTextProps["wrapper"]
+			PrismicRichTextProps["fallback"]
 		>,
 	},
 })
 defineOptions({ name: "PrismicRichText" })
 
-const { options } = usePrismic()
-
-const resolvedComponents = computed(() => {
-	return props.components || options.components?.richTextComponents
-})
-
-const resolvedLinkResolver = computed(() => {
-	return props.linkResolver || options.linkResolver
-})
-
 const children = computed(() => {
 	return asTree(props.field || []).children
 })
 
-const isModern = computed(() => {
-	// Explicit components prop
-	if (props.components) {
-		return true
-	}
+function getInternalComponent(type: keyof typeof RichTextNodeType) {
+	const maybeComponentOrShorthand = props.components?.[type]
 
-	// Explicit serializer prop
-	if (props.serializer) {
-		return false
+	if (isVueComponent(maybeComponentOrShorthand)) {
+		return { is: maybeComponentOrShorthand }
 	}
 
-	// Global components option
-	if (options.components?.richTextComponents) {
-		return true
+	return {
+		is: PrismicRichTextDefaultComponent,
+		props: {
+			linkResolver: props.linkResolver,
+			shorthand: maybeComponentOrShorthand as VueShorthand,
+		},
 	}
+}
 
-	// Global serializer option
-	if (options.richTextSerializer) {
-		return false
+const internalComponents = computed<InternalVueRichTextComponent>(() => {
+	return {
+		heading1: getInternalComponent("heading1"),
+		heading2: getInternalComponent("heading2"),
+		heading3: getInternalComponent("heading3"),
+		heading4: getInternalComponent("heading4"),
+		heading5: getInternalComponent("heading5"),
+		heading6: getInternalComponent("heading6"),
+		paragraph: getInternalComponent("paragraph"),
+		preformatted: getInternalComponent("preformatted"),
+		strong: getInternalComponent("strong"),
+		em: getInternalComponent("em"),
+		"list-item": getInternalComponent("listItem"),
+		"o-list-item": getInternalComponent("oListItem"),
+		"group-list-item": getInternalComponent("list"),
+		"group-o-list-item": getInternalComponent("oList"),
+		image: getInternalComponent("image"),
+		embed: getInternalComponent("embed"),
+		hyperlink: getInternalComponent("hyperlink"),
+		label: getInternalComponent("label"),
+		span: getInternalComponent("span"),
 	}
-
-	// Default to modern
-	return true
 })
-
-if (DEV) {
-	watchEffect(() => {
-		// TODO: Remove in v6
-		if (props.components && props.serializer) {
-			console.warn(
-				`[PrismicRichText] Only one of "components" or "serializer" (deprecated) props can be provided. You can resolve this warning by removing either the "components" or "serializer" prop. "components" will be used in this case.`,
-			)
-		}
-	})
-}
 </script>
 
 <template>
-	<Wrapper
-		v-if="isModern && (isFilled.richText(field) || fallback)"
-		:wrapper="wrapper"
-	>
-		<PrismicRichTextSerialize
-			v-if="children.length"
-			:children="children"
-			:components="resolvedComponents"
-			:link-resolver="resolvedLinkResolver"
-		/>
-		<component v-else :is="fallback" />
-	</Wrapper>
-	<DeprecatedPrismicRichText
-		v-else-if="!isModern"
-		:field="field"
-		:fallback="typeof fallback === 'string' ? fallback : undefined"
-		:link-resolver="linkResolver"
-		:serializer="serializer"
-		:wrapper="wrapper"
+	<PrismicRichTextSerialize
+		v-if="children.length"
+		:children="children"
+		:internal-components="internalComponents"
 	/>
+	<component v-else-if="fallback" :is="fallback" />
 </template>

package/src/PrismicRichText/PrismicRichTextDefaultComponent.vue

@@ -2,19 +2,31 @@
 import type { LinkResolverFunction } from "@prismicio/client"
 import { computed } from "vue"
 
-import type { RichTextComponentProps } from "./types"
+import type { RichTextComponentProps, VueShorthand } from "./types"
 
-import PrismicEmbed from "../PrismicEmbed.vue"
 import PrismicImage from "../PrismicImage.vue"
 import PrismicLink from "../PrismicLink.vue"
 
 const props = defineProps<
 	RichTextComponentProps & {
 		linkResolver?: LinkResolverFunction
+		shorthand?: VueShorthand
 	}
 >()
 defineOptions({ name: "PrismicRichTextDefaultComponent" })
 
+const as = computed(() => {
+	return props.node.type !== "image" && 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 +35,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"
 		/></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,27 @@
 <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 { InternalVueRichTextComponent } from "./types"
 
 type PrismicRichTextSerializeProps = {
-	components?: VueRichTextSerializer
 	children: ReturnType<typeof asTree>["children"]
-	linkResolver?: LinkResolverFunction
+	internalComponents: InternalVueRichTextComponent
 }
 
 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
-		"
+		v-bind="internalComponents[child.type].props"
 		><PrismicRichTextSerialize
 			v-if="child.children.length"
 			:children="child.children"
-			:components="components"
-			:link-resolver="linkResolver"
+			:internal-components="internalComponents"
 	/></component>
 </template>

package/src/PrismicRichText/types.ts

@@ -1,9 +1,10 @@
-import type { RTAnyNode, RichTextNodeType } from "@prismicio/client"
 import type {
-	DefineComponent,
-	FunctionalComponent,
-	defineAsyncComponent,
-} from "vue"
+	LinkResolverFunction,
+	RTAnyNode,
+	RichTextNodeType,
+} from "@prismicio/client"
+
+import type { VueComponent } from "../types"
 
 /**
  * A map of Rich Text block types to Vue Components. It is used to render Rich
@@ -12,7 +13,7 @@ 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>
+	Record<keyof typeof RichTextNodeType, VueRichTextComponent | VueShorthand>
 >
 
 /**
@@ -27,11 +28,29 @@ 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>>
+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 InternalVueRichTextComponent = Record<
+	(typeof RichTextNodeType)[keyof typeof RichTextNodeType],
+	{
+		is: VueRichTextComponent
+		props?: { linkResolver?: LinkResolverFunction; shorthand?: VueShorthand }
+	}
+>

package/src/PrismicTable/PrismicTable.vue

@@ -2,8 +2,9 @@
 import { type TableField, isFilled } from "@prismicio/client"
 import { computed } from "vue"
 
-import type { ComponentOrTagName } from "../types"
-import type { VueTableComponents } from "./types"
+import type { VueShorthand } from "../PrismicRichText/types"
+import { type ComponentOrTagName, isVueComponent } from "../types"
+import type { InternalVueTableComponents, VueTableComponents } from "./types"
 
 import type { VueRichTextSerializer } from "../PrismicRichText"
 
@@ -14,67 +15,93 @@ import PrismicTableRow from "./PrismicTableRow.vue"
  * 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
+
+	/**
+	 * 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,
-}))
+function getInternalComponent(type: keyof VueTableComponents) {
+	const maybeComponentOrShorthand = props.components?.[type]
+
+	if (isVueComponent(maybeComponentOrShorthand)) {
+		return { is: maybeComponentOrShorthand }
+	}
+
+	return {
+		is: defaultTableComponents[type],
+		shorthand: maybeComponentOrShorthand as VueShorthand,
+	}
+}
+
+const tableComponents = computed<InternalVueTableComponents>(() => {
+	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="tableComponents.table.is"
 		:table="field"
-		v-bind="$attrs"
+		v-bind="{ ...$attrs, ...tableComponents.table.shorthand }"
 	>
 		<component
 			v-if="field.head"
-			:is="mergedComponents.thead"
+			:is="tableComponents.thead.is"
 			:head="field.head"
+			v-bind="tableComponents.thead.shorthand"
 		>
 			<PrismicTableRow
 				v-for="row in field.head.rows"
 				:key="row.key"
 				:row="row"
-				:components="mergedComponents"
+				:internalTableComponents="tableComponents"
+				:components="components"
 			/>
 		</component>
-		<component :is="mergedComponents.tbody" :body="field.body">
+		<component
+			:is="tableComponents.tbody.is"
+			:body="field.body"
+			v-bind="tableComponents.tbody.shorthand"
+		>
 			<PrismicTableRow
 				v-for="row in field.body.rows"
 				:key="row.key"
 				:row="row"
-				:components="mergedComponents"
+				:internalTableComponents="tableComponents"
+				:components="components"
 			/>
 		</component>
 	</component>
-	<component v-else :is="fallback" />
+	<component v-else-if="fallback" :is="fallback" v-bind="$attrs" />
 </template>