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

package/src/PrismicRichText/PrismicRichText.vue

@@ -8,51 +8,54 @@ import { asTree } from "@prismicio/client/richtext"
 import type { PropType } from "vue"
 import { computed } from "vue"
 
-import { type ComponentOrTagName, isVueComponent } from "../types"
+import type { ComponentOrTagName, VueComponentShorthand } from "../types"
+import { isVueComponent } from "../types"
 import type {
-	InternalVueRichTextComponent,
-	VueRichTextSerializer,
-	VueShorthand,
+	InternalVueRichTextComponents,
+	VueRichTextComponent,
+	VueRichTextComponents,
 } from "./types"
 
+import { usePrismic } from "../createPrismic"
+
 import PrismicRichTextDefaultComponent from "./PrismicRichTextDefaultComponent.vue"
 import PrismicRichTextSerialize from "./PrismicRichTextSerialize.vue"
 
-/**
- * Props for `<PrismicRichText />`.
- */
+/** 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
 
 	/**
-	 * A link resolver function used to resolve link 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
 
 	/**
-	 * 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
+	components?: VueRichTextComponents
 
 	/**
 	 * The value to be rendered when the field is empty. If a fallback is not
-	 * given, `null` (nothing) will be rendered.
+	 * given, `null` will be rendered.
 	 */
 	fallback?: ComponentOrTagName
 }
@@ -77,12 +80,21 @@ const props = defineProps({
 })
 defineOptions({ name: "PrismicRichText" })
 
+const { componentsConfig } = usePrismic()
+
+const resolvedComponents = computed<VueRichTextComponents>(() => {
+	return { ...componentsConfig?.defaultComponents, ...props.components }
+})
+
 const children = computed(() => {
 	return asTree(props.field || []).children
 })
 
 function getInternalComponent(type: keyof typeof RichTextNodeType) {
-	const maybeComponentOrShorthand = props.components?.[type]
+	const maybeComponentOrShorthand = resolvedComponents.value?.[type] as
+		| VueRichTextComponent
+		| VueComponentShorthand
+		| undefined
 
 	if (isVueComponent(maybeComponentOrShorthand)) {
 		return { is: maybeComponentOrShorthand }
@@ -90,14 +102,12 @@ function getInternalComponent(type: keyof typeof RichTextNodeType) {
 
 	return {
 		is: PrismicRichTextDefaultComponent,
-		props: {
-			linkResolver: props.linkResolver,
-			shorthand: maybeComponentOrShorthand as VueShorthand,
-		},
+		linkResolver: props.linkResolver,
+		shorthand: maybeComponentOrShorthand,
 	}
 }
 
-const internalComponents = computed<InternalVueRichTextComponent>(() => {
+const internalComponents = computed<InternalVueRichTextComponents>(() => {
 	return {
 		heading1: getInternalComponent("heading1"),
 		heading2: getInternalComponent("heading2"),

package/src/PrismicRichText/PrismicRichTextDefaultComponent.vue

@@ -2,7 +2,8 @@
 import type { LinkResolverFunction } from "@prismicio/client"
 import { computed } from "vue"
 
-import type { RichTextComponentProps, VueShorthand } from "./types"
+import type { VueComponentShorthand } from "../types"
+import type { RichTextComponentProps } from "./types"
 
 import PrismicImage from "../PrismicImage.vue"
 import PrismicLink from "../PrismicLink.vue"
@@ -10,13 +11,16 @@ import PrismicLink from "../PrismicLink.vue"
 const props = defineProps<
 	RichTextComponentProps & {
 		linkResolver?: LinkResolverFunction
-		shorthand?: VueShorthand
+		shorthand?: VueComponentShorthand
 	}
 >()
 defineOptions({ name: "PrismicRichTextDefaultComponent" })
 
 const as = computed(() => {
-	return props.node.type !== "image" && props.node.type !== "span"
+	return props.node.type !== "image" &&
+		props.node.type !== "hyperlink" &&
+		props.node.type !== "label" &&
+		props.node.type !== "span"
 		? props.shorthand?.as
 		: undefined
 })
@@ -74,7 +78,7 @@ const dir = computed(() => {
 	</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" v-bind="attrs" />
 	</p>

package/src/PrismicRichText/PrismicRichTextSerialize.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import type { asTree } from "@prismicio/client/richtext"
 
-import type { InternalVueRichTextComponent } from "./types"
+import type { InternalVueRichTextComponents } from "./types"
 
 type PrismicRichTextSerializeProps = {
 	children: ReturnType<typeof asTree>["children"]
-	internalComponents: InternalVueRichTextComponent
+	internalComponents: InternalVueRichTextComponents
 }
 
 const props = defineProps<PrismicRichTextSerializeProps>()
@@ -18,7 +18,8 @@ defineOptions({ name: "PrismicRichTextSerialize" })
 		:key="JSON.stringify(child)"
 		:is="internalComponents[child.type].is"
 		:node="child.node"
-		v-bind="internalComponents[child.type].props"
+		:link-resolver="internalComponents[child.type].linkResolver"
+		:shorthand="internalComponents[child.type].shorthand"
 		><PrismicRichTextSerialize
 			v-if="child.children.length"
 			:children="child.children"

package/src/PrismicRichText/index.ts

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

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,36 +2,36 @@
 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.
-	 */
+	/** The Prismic table field to render. */
 	field: TableField | undefined
 
 	/**
-	 * 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?: 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,37 +79,37 @@ 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>
 	</component>
-	<component v-else-if="fallback" :is="fallback" />
+	<component v-else-if="fallback" :is="fallback" v-bind="$attrs" />
 </template>

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,13 +6,9 @@ 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.
-	 */
+	/** The Prismic rich text field to render. */
 	field: RichTextField | null | undefined
 
 	/**

package/src/SliceZone/SliceZone.vue

@@ -16,31 +16,20 @@ import { TODOSliceComponent } from "./TODOSliceComponent"
  * @typeParam TContext - Arbitrary data made available to all Slice components
  */
 export type SliceZoneProps<TContext = unknown> = {
-	/**
-	 * List of Slice data from the Slice Zone.
-	 */
+	/** List of slice data from the slice zone. */
 	slices: SliceZoneLike<SliceLike | (SliceLike & Record<string, unknown>)>
 
-	/**
-	 * A record mapping Slice types to Vue components.
-	 */
+	/** A record mapping slice types to React components. */
 	components?: SliceZoneComponents
 
 	/**
 	 * The Vue component rendered if a component mapping from the `components`
 	 * prop cannot be found.
-	 *
-	 * @remarks
-	 * Components will be rendered using the {@link SliceComponentProps} interface.
-	 *
-	 * @defaultValue The Slice Zone default component provided to `@prismicio/vue` plugin if configured, otherwise `null` when `process.env.NODE_ENV === "production"` else {@link TODOSliceComponent}.
 	 */
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	defaultComponent?: SliceComponentType<any, TContext>
 
-	/**
-	 * Arbitrary data made available to all Slice components.
-	 */
+	/** Arbitrary data made available to all slice components. */
 	context?: TContext
 }