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

package/dist/types.js

@@ -0,0 +1,8 @@
+//#region src/types.ts
+const isComponent = (component) => {
+	return !!component && (typeof component === "function" || typeof component === "object" && ("render" in component && typeof component.render === "function" || "setup" in component && typeof component.setup === "function" || "__file" in component && !!component.__file || "__name" in component && !!component.__name || "props" in component && typeof component.props === "object"));
+};
+
+//#endregion
+export { isComponent };
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../src/types.ts"],"sourcesContent":["import type { Component as _Component } from \"vue\"\n\nexport type ComponentOrTagName = string | _Component\n\n// For reference within TypeScript files when `*.vue` type cannot be inferred\nexport type Component<TProps> = _Component | _Component<TProps>\n\n/**\n * A shorthand definition for `<PrismicRichText />` and `<PrismicTable />`\n * component types.\n */\nexport type ComponentShorthand = {\n\t/** The HTML element type rendered for this node type. */\n\tas?: string\n\n\t/** Other attributes to apply to the element type. */\n\t[Attribute: string]: string | boolean | null | undefined\n}\n\nexport const isComponent = <T>(\n\tcomponent: Component<T> | ComponentShorthand | undefined,\n): component is Component<T> => {\n\treturn (\n\t\t!!component &&\n\t\t(typeof component === \"function\" ||\n\t\t\t(typeof component === \"object\" &&\n\t\t\t\t((\"render\" in component && typeof component.render === \"function\") ||\n\t\t\t\t\t(\"setup\" in component && typeof component.setup === \"function\") ||\n\t\t\t\t\t(\"__file\" in component && !!component.__file) ||\n\t\t\t\t\t(\"__name\" in component && !!component.__name) ||\n\t\t\t\t\t(\"props\" in component && typeof component.props === \"object\"))))\n\t)\n}\n"],"mappings":";AAmBA,MAAa,eACZ,cAC+B;AAC/B,QACC,CAAC,CAAC,cACD,OAAO,cAAc,cACpB,OAAO,cAAc,aACnB,YAAY,aAAa,OAAO,UAAU,WAAW,cACrD,WAAW,aAAa,OAAO,UAAU,UAAU,cACnD,YAAY,aAAa,CAAC,CAAC,UAAU,UACrC,YAAY,aAAa,CAAC,CAAC,UAAU,UACrC,WAAW,aAAa,OAAO,UAAU,UAAU"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/vue",
-	"version": "5.3.0",
+	"version": "6.0.0-canary.331d154",
 	"description": "Vue plugin, components, and composables to fetch and present Prismic content",
 	"keywords": [
 		"typescript",
@@ -18,84 +18,60 @@
 	"type": "module",
 	"exports": {
 		".": {
-			"require": {
-				"types": "./dist/index.d.ts",
-				"default": "./dist/index.cjs"
-			},
-			"import": {
-				"types": "./dist/index.d.ts",
-				"default": "./dist/index.js"
-			}
+			"require": "./dist/index.cjs",
+			"import": "./dist/index.js"
 		},
 		"./package.json": "./package.json"
 	},
-	"main": "dist/index.cjs",
-	"module": "dist/index.js",
-	"types": "dist/index.d.ts",
+	"main": "./dist/index.cjs",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.cts",
 	"files": [
-		"dist",
-		"src",
-		"vetur"
+		"./dist",
+		"./src"
 	],
 	"scripts": {
-		"build": "vite build",
-		"dev": "vite build --watch",
+		"build": "tsdown",
+		"dev": "tsdown --watch",
 		"format": "prettier --write .",
-		"playground:build": "vite build playground",
-		"playground:dev": "vite playground",
 		"prepare": "npm run build",
-		"release": "npm run test && standard-version && git push --follow-tags && npm run build && npm publish",
-		"release:dry": "standard-version --dry-run",
-		"release:alpha": "npm run test && standard-version --release-as major --prerelease alpha && git push --follow-tags && npm run build && npm publish --tag alpha",
-		"release:alpha:dry": "standard-version --release-as major --prerelease alpha --dry-run",
-		"lint": "eslint",
-		"types": "vitest --typecheck.only --run && vue-tsc --noEmit",
-		"types:watch": "vitest --typecheck.only",
+		"lint": "oxlint --deny-warnings",
+		"types": "vue-tsc --noEmit",
 		"unit": "vitest run --coverage",
 		"unit:watch": "vitest watch",
-		"size": "size-limit",
-		"test": "npm run lint && npm run types && npm run unit && npm run build && npm run size"
+		"test": "npm run lint && npm run types && npm run unit && npm run build"
 	},
 	"dependencies": {
-		"@prismicio/client": "^7.17.1",
-		"esm-env": "^1.2.2",
-		"vue-router": "^4.5.0"
+		"@prismicio/simulator": "^0.2.0",
+		"esm-env": "^1.2.2"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.23.0",
+		"@prismicio/client": "^7.21.3",
 		"@prismicio/mock": "^0.7.1",
-		"@size-limit/preset-small-lib": "^11.2.0",
-		"@trivago/prettier-plugin-sort-imports": "^5.2.2",
+		"@trivago/prettier-plugin-sort-imports": "^6.0.2",
 		"@types/jsdom-global": "^3.0.7",
-		"@vitejs/plugin-vue": "^5.2.3",
-		"@vitest/coverage-v8": "^3.0.9",
-		"@vue/eslint-config-typescript": "^14.5.0",
+		"@vitejs/plugin-vue": "^6.0.3",
+		"@vitest/coverage-v8": "^4.0.17",
 		"@vue/test-utils": "^2.4.6",
-		"eslint": "^9.23.0",
-		"eslint-config-prettier": "^10.1.1",
-		"eslint-plugin-prettier": "^5.2.5",
-		"eslint-plugin-tsdoc": "^0.4.0",
-		"eslint-plugin-vue": "^10.0.0",
-		"jsdom": "^26.0.0",
+		"jsdom": "^27.4.0",
 		"jsdom-global": "^3.0.2",
-		"prettier": "^3.5.3",
-		"prettier-plugin-jsdoc": "^1.3.2",
-		"size-limit": "^11.2.0",
-		"standard-version": "^9.5.0",
-		"typescript": "^5.8.2",
-		"typescript-eslint": "^8.28.0",
-		"vite": "^6.2.3",
-		"vite-plugin-dts": "^4.5.3",
-		"vite-plugin-sdk": "^0.1.3",
-		"vitest": "^3.0.9",
-		"vue": "^3.5.13",
-		"vue-tsc": "^2.2.8"
+		"oxlint": "1.39.0",
+		"prettier": "^3.7.4",
+		"prettier-plugin-jsdoc": "^1.8.0",
+		"tsdown": "^0.19.0",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1",
+		"vitest": "^4.0.17",
+		"vue": "^3.5.26",
+		"vue-router": "^4.6.4",
+		"vue-tsc": "^3.2.2"
 	},
 	"peerDependencies": {
-		"vue": "^3.0.0"
+		"@prismicio/client": "^7",
+		"vue": "^3"
 	},
 	"engines": {
-		"node": ">=16.10.0"
+		"node": ">=20"
 	},
 	"publishConfig": {
 		"access": "public"

package/src/PrismicImage.vue

@@ -10,15 +10,9 @@ import { computed, watchEffect } from "vue"
 
 import { devMsg } from "./lib/devMsg"
 
-import { usePrismic } from "./usePrismic"
-
-/**
- * Props for `<PrismicImage />`.
- */
+/** Props for `<PrismicImage />`. */
 export type PrismicImageProps = {
-	/**
-	 * The Prismic image field or thumbnail to render.
-	 */
+	/** The Prismic image field or thumbnail to render. */
 	field: ImageField | ImageField<string>
 
 	/**
@@ -63,11 +57,10 @@ export type PrismicImageProps = {
 } & (
 	| {
 			/**
-			 * Widths used to build a `srcset` value for the image field.
+			 * Widths (in pixels) used to build a `srcset` value for the image field.
 			 *
-			 * If a `widths` prop is not given or `"defaults"` is passed, the
-			 * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,
-			 * 3840.
+			 * If omitted or set to `"defaults"`, the following widths will be used:
+			 * 640, 750, 828, 1080, 1200, 1920, 2048, 3840.
 			 *
 			 * If the image field contains responsive views, each responsive view can
 			 * be used as a width in the resulting `srcset` by passing `"thumbnails"`
@@ -77,15 +70,9 @@ export type PrismicImageProps = {
 				| NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"]
 				| "thumbnails"
 				| "defaults"
-			/**
-			 * Not used when the `widths` prop is used.
-			 */
 			pixelDensities?: never
 	  }
 	| {
-			/**
-			 * Not used when the `widths` prop is used.
-			 */
 			widths?: never
 			/**
 			 * Pixel densities used to build a `srcset` value for the image field.
@@ -104,8 +91,6 @@ export type PrismicImageProps = {
 const props = defineProps<PrismicImageProps>()
 defineOptions({ name: "PrismicImage" })
 
-const { options } = usePrismic()
-
 if (DEV) {
 	watchEffect(() => {
 		if (typeof props.alt === "string" && props.alt !== "") {
@@ -156,10 +141,7 @@ const image = computed(() => {
 	if (props.widths || !props.pixelDensities) {
 		const res = asImageWidthSrcSet(props.field, {
 			...props.imgixParams,
-			widths:
-				props.widths === "defaults"
-					? options.components?.imageWidthSrcSetDefaults
-					: props.widths,
+			widths: props.widths === "defaults" ? undefined : props.widths,
 		})
 
 		src = res.src
@@ -168,9 +150,7 @@ const image = computed(() => {
 		const res = asImagePixelDensitySrcSet(props.field, {
 			...props.imgixParams,
 			pixelDensities:
-				props.pixelDensities === "defaults"
-					? options.components?.imagePixelDensitySrcSetDefaults
-					: props.pixelDensities,
+				props.pixelDensities === "defaults" ? undefined : props.pixelDensities,
 		})
 
 		src = res.src

package/src/PrismicLink.vue

@@ -12,34 +12,27 @@ import { isInternalURL } from "./lib/isInternalURL"
 
 import type { ComponentOrTagName } from "./types"
 
-import { usePrismic } from "./usePrismic"
+import { usePrismic } from "./createPrismic"
 
-/**
- * The default component rendered for internal URLs.
- */
+/** The default component rendered for internal URLs. */
 const defaultInternalComponent = "router-link"
 
-/**
- * The default component rendered for external URLs.
- */
+/** The default component rendered for external URLs. */
 const defaultExternalComponent = "a"
 
-/**
- * The default rel attribute rendered for external URLs.
- */
+/** The default rel attribute rendered for external URLs. */
 const defaultExternalRelAttribute = "noreferrer"
 
-/**
- * Props for `<PrismicLink />`.
- */
+/** Props for `<PrismicLink />`. */
 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 {@link https://prismic.io/docs/routes}
 	 */
 	linkResolver?: LinkResolverFunction
 
@@ -47,50 +40,33 @@ 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.
-	 *
-	 * @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).
+	 * The component rendered for external URLs.
 	 *
-	 * @defaultValue The one provided to `@prismicio/vue` plugin if configured, `"a"` otherwise.
+	 * @defaultValue `<a>`
 	 */
 	externalComponent?: ComponentOrTagName
 } & (
 	| {
-			/**
-			 * The Prismic link field to render.
-			 */
+			/** The Prismic link field to render. */
 			field: LinkField
 			document?: never
 	  }
 	| {
-			/**
-			 * The Prismic document to render as a link.
-			 */
+			/** The Prismic document to render as a link. */
 			document: PrismicDocument
 			field?: never
 	  }
@@ -99,15 +75,14 @@ export type PrismicLinkProps = {
 const props = defineProps<PrismicLinkProps>()
 defineOptions({ name: "PrismicLink" })
 
-const { options } = usePrismic()
+const { linkResolver, components } = usePrismic()
 
 const rawAttrs = computed(() => {
 	return asLinkAttrs(props.field || props.document, {
-		linkResolver: props.linkResolver || options.linkResolver,
+		linkResolver: props.linkResolver || 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
@@ -118,10 +93,10 @@ const rawAttrs = computed(() => {
 const component = computed(() => {
 	return isInternalURL(rawAttrs.value.href || "")
 		? props.internalComponent ||
-				options.components?.linkInternalComponent ||
+				components?.linkInternalComponent ||
 				defaultInternalComponent
 		: props.externalComponent ||
-				options.components?.linkExternalComponent ||
+				components?.linkExternalComponent ||
 				defaultExternalComponent
 })
 

package/src/PrismicRichText/PrismicRichText.vue

@@ -1,83 +1,63 @@
 <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, ComponentShorthand } from "../types"
+import { isComponent } from "../types"
+import type {
+	InternalRichTextComponents,
+	RichTextComponent,
+	RichTextComponents,
+} from "./types"
 
-import type { ComponentOrTagName } from "../types"
-import type { VueRichTextSerializer } from "./types"
+import { usePrismic } from "../createPrismic"
 
-import { usePrismic } from "../usePrismic"
-
-import DeprecatedPrismicRichText from "./DeprecatedPrismicRichText.vue"
+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
 
 	/**
-	 * 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
+	components?: RichTextComponents
 
 	/**
-	 * 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 +66,77 @@ 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 { components: { richTextComponents } } = usePrismic()
 
-const resolvedLinkResolver = computed(() => {
-	return props.linkResolver || options.linkResolver
+const resolvedComponents = computed<RichTextComponents>(() => {
+	return { ...richTextComponents, ...props.components }
 })
 
 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 = resolvedComponents.value?.[type] as
+		| RichTextComponent
+		| ComponentShorthand
+		| undefined
 
-	// Explicit serializer prop
-	if (props.serializer) {
-		return false
+	if (isComponent(maybeComponentOrShorthand)) {
+		return { is: maybeComponentOrShorthand }
 	}
 
-	// Global components option
-	if (options.components?.richTextComponents) {
-		return true
+	return {
+		is: PrismicRichTextDefaultComponent,
+		linkResolver: props.linkResolver,
+		shorthand: maybeComponentOrShorthand,
 	}
+}
 
-	// Global serializer option
-	if (options.richTextSerializer) {
-		return false
+const internalComponents = computed<InternalRichTextComponents>(() => {
+	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>