@prismicio/vue 5.3.0-canary.320f423 → 5.3.0-canary.553482e

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 VueRichTextSerializer = {
+	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,8 +2,8 @@
 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"
@@ -11,13 +11,9 @@ import type { VueRichTextSerializer } from "../PrismicRichText"
 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
 
 	/**
@@ -55,11 +51,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"),
@@ -74,34 +70,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/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/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 &&