@prismicio/vue 5.2.0 → 5.3.0-canary.4c3e4ab

package/src/PrismicLink.vue

@@ -12,8 +12,6 @@ import { isInternalURL } from "./lib/isInternalURL"
 
 import type { ComponentOrTagName } from "./types"
 
-import { usePrismic } from "./usePrismic"
-
 /**
  * The default component rendered for internal URLs.
  */
@@ -34,12 +32,13 @@ const defaultExternalRelAttribute = "noreferrer"
  */
 export type PrismicLinkProps = {
 	/**
-	 * A link resolver function used to resolve links when not using the route
-	 * resolver parameter with `@prismicio/client`.
+	 * The link resolver used to resolve links.
 	 *
-	 * @defaultValue The link resolver provided to `@prismicio/vue` plugin if configured.
+	 * @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 Link resolver documentation {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver#link-resolver}
+	 * @see Learn about link resolvers and route resolvers {@link https://prismic.io/docs/routes}
 	 */
 	linkResolver?: LinkResolverFunction
 
@@ -47,36 +46,23 @@ export type PrismicLinkProps = {
 	 * The `rel` attribute for the link. By default, `"noreferrer"` is provided if
 	 * the link's URL is external. This prop can be provided a function to use the
 	 * link's metadata to determine the `rel` value.
-	 *
-	 * @defaultValue The one provided to `@prismicio/vue` plugin if configured.
 	 */
 	rel?: string | AsLinkAttrsConfig["rel"]
 
 	/**
-	 * An HTML tag name or a component used to render internal links.
+	 * The component rendered for internal URLs.
 	 *
-	 * @remarks
-	 * HTML tag names will be rendered using the anchor tag interface (`href`,
-	 * `target`, and `rel` attributes).
-	 * @remarks
-	 * Components will be rendered using Vue Router {@link RouterLink} interface
-	 * (`to` props).
+	 * If your app uses a client-side router that requires a special Link
+	 * component, provide the Link component to this prop.
 	 *
-	 * @defaultValue The one provided to `@prismicio/vue` plugin if configured, {@link RouterLink} otherwise.
+	 * @defaultValue `<RouterLink>`
 	 */
 	internalComponent?: ComponentOrTagName
 
 	/**
-	 * An HTML tag name or a component used to render external links.
+	 * The component rendered for external URLs.
 	 *
-	 * @remarks
-	 * HTML tag names will be rendered using the anchor tag interface (`href`,
-	 * `target`, and `rel` attributes).
-	 * @remarks
-	 * Components will be rendered using Vue Router {@link RouterLink} interface
-	 * (`to` props).
-	 *
-	 * @defaultValue The one provided to `@prismicio/vue` plugin if configured, `"a"` otherwise.
+	 * @defaultValue `<a>`
 	 */
 	externalComponent?: ComponentOrTagName
 } & (
@@ -99,15 +85,12 @@ export type PrismicLinkProps = {
 const props = defineProps<PrismicLinkProps>()
 defineOptions({ name: "PrismicLink" })
 
-const { options } = usePrismic()
-
 const rawAttrs = computed(() => {
 	return asLinkAttrs(props.field || props.document, {
-		linkResolver: props.linkResolver || options.linkResolver,
+		linkResolver: props.linkResolver,
 		rel(args) {
-			const maybeRel = props.rel || options.components?.linkRel
-			if (maybeRel) {
-				return typeof maybeRel === "function" ? maybeRel(args) : maybeRel
+			if (props.rel) {
+				return typeof props.rel === "function" ? props.rel(args) : props.rel
 			}
 
 			return args.isExternal ? defaultExternalRelAttribute : undefined
@@ -117,12 +100,8 @@ const rawAttrs = computed(() => {
 
 const component = computed(() => {
 	return isInternalURL(rawAttrs.value.href || "")
-		? props.internalComponent ||
-				options.components?.linkInternalComponent ||
-				defaultInternalComponent
-		: props.externalComponent ||
-				options.components?.linkExternalComponent ||
-				defaultExternalComponent
+		? props.internalComponent || defaultInternalComponent
+		: props.externalComponent || defaultExternalComponent
 })
 
 // Match Vue Router's `<RouterLink />` interface unless the component is an anchor tag.

package/src/PrismicRichText/PrismicRichText.vue

@@ -1,23 +1,21 @@
 <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 { computed, watchEffect } from "vue"
+import type { PropType } 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"
 
 /**
@@ -25,133 +23,114 @@ import PrismicRichTextSerialize from "./PrismicRichTextSerialize.vue"
  */
 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
 }
 
-const props = defineProps<PrismicRichTextProps>()
-defineOptions({ name: "PrismicRichText" })
-
-const { options } = usePrismic()
-
-const resolvedComponents = computed(() => {
-	return props.components || options.components?.richTextComponents
-})
-
-const resolvedLinkResolver = computed(() => {
-	return props.linkResolver || options.linkResolver
+// We're forced to declare props using the JavaScript syntax because `@vue/compiler-sfc`
+// has limitations for inferring types from complex objects.
+const props = defineProps({
+	field: {
+		type: Array as unknown as PropType<PrismicRichTextProps["field"]>,
+	},
+	linkResolver: {
+		type: Function as PropType<PrismicRichTextProps["linkResolver"]>,
+	},
+	components: {
+		type: Object as PropType<PrismicRichTextProps["components"]>,
+	},
+	fallback: {
+		type: [String, Object, Function] as PropType<
+			PrismicRichTextProps["fallback"]
+		>,
+	},
 })
+defineOptions({ name: "PrismicRichText" })
 
 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 }
+	}
+>