@prismicio/vue 3.1.4 → 3.2.1

package/src/components/PrismicRichText.ts

@@ -1,36 +1,39 @@
+import {
+	HTMLFunctionSerializer,
+	HTMLMapSerializer,
+	LinkResolverFunction,
+	asHTML,
+	isFilled,
+} from "@prismicio/helpers";
 import {
 	AllowedComponentProps,
 	Component,
 	ComponentCustomProps,
-	computed,
 	ComputedRef,
 	ConcreteComponent,
+	DefineComponent,
+	PropType,
+	Raw,
+	VNodeProps,
+	computed,
 	defineComponent,
 	h,
 	inject,
 	nextTick,
 	onBeforeUnmount,
-	PropType,
 	ref,
 	unref,
-	VNodeProps,
 	watch,
 } from "vue";
 import { routerKey } from "vue-router";
 
-import {
-	asHTML,
-	HTMLFunctionSerializer,
-	HTMLMapSerializer,
-	isFilled,
-	LinkResolverFunction,
-} from "@prismicio/helpers";
-import { RichTextField } from "@prismicio/types";
+import { isInternalURL } from "../lib/isInternalURL";
+import { simplyResolveComponent } from "../lib/simplyResolveComponent";
 
 import { VueUseOptions } from "../types";
+import { RichTextField } from "@prismicio/types";
+
 import { usePrismic } from "../usePrismic";
-import { simplyResolveComponent } from "../lib/simplyResolveComponent";
-import { isInternalURL } from "../lib/isInternalURL";
 
 /**
  * The default component rendered to wrap the HTML output.
@@ -63,6 +66,17 @@ export type PrismicRichTextProps = {
 	 *
 	 * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}
 	 */
+	serializer?: HTMLFunctionSerializer | HTMLMapSerializer;
+
+	/**
+	 * An HTML serializer to customize the way rich text fields are rendered.
+	 *
+	 * @deprecated Use `serializer` 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}
+	 */
 	htmlSerializer?: HTMLFunctionSerializer | HTMLMapSerializer;
 
 	/**
@@ -71,7 +85,7 @@ export type PrismicRichTextProps = {
 	 *
 	 * @defaultValue `"div"`
 	 */
-	wrapper?: string | ConcreteComponent;
+	wrapper?: string | ConcreteComponent | Raw<DefineComponent>;
 
 	/**
 	 * The HTML value to be rendered when the field is empty. If a fallback is not
@@ -118,10 +132,13 @@ export const usePrismicRichText = (
 		}
 
 		const linkResolver = unref(props.linkResolver) ?? options.linkResolver;
-		const htmlSerializer =
-			unref(props.htmlSerializer) ?? options.htmlSerializer;
+		const serializer =
+			unref(props.serializer) ??
+			unref(props.htmlSerializer) ??
+			options.richTextSerializer ??
+			options.htmlSerializer;
 
-		return asHTML(unref(field), linkResolver, htmlSerializer);
+		return asHTML(unref(field), linkResolver, serializer);
 	});
 
 	return {
@@ -147,6 +164,13 @@ export const PrismicRichTextImpl = /*#__PURE__*/ defineComponent({
 			default: undefined,
 			required: false,
 		},
+		serializer: {
+			type: [Function, Object] as PropType<
+				HTMLFunctionSerializer | HTMLMapSerializer
+			>,
+			default: undefined,
+			required: false,
+		},
 		htmlSerializer: {
 			type: [Function, Object] as PropType<
 				HTMLFunctionSerializer | HTMLMapSerializer
@@ -155,7 +179,9 @@ export const PrismicRichTextImpl = /*#__PURE__*/ defineComponent({
 			required: false,
 		},
 		wrapper: {
-			type: [String, Object, Function] as PropType<string | ConcreteComponent>,
+			type: [String, Object, Function] as PropType<
+				string | ConcreteComponent | Raw<DefineComponent>
+			>,
 			default: undefined,
 			required: false,
 		},

package/src/components/PrismicText.ts

@@ -1,22 +1,24 @@
+import { asText, isFilled } from "@prismicio/helpers";
 import {
 	AllowedComponentProps,
 	ComponentCustomProps,
-	computed,
 	ComputedRef,
 	ConcreteComponent,
-	defineComponent,
-	h,
+	DefineComponent,
 	PropType,
-	unref,
+	Raw,
 	VNode,
 	VNodeProps,
+	computed,
+	defineComponent,
+	h,
+	unref,
 } from "vue";
 
-import { asText, isFilled } from "@prismicio/helpers";
-import { RichTextField } from "@prismicio/types";
+import { simplyResolveComponent } from "../lib/simplyResolveComponent";
 
 import { VueUseOptions } from "../types";
-import { simplyResolveComponent } from "../lib/simplyResolveComponent";
+import { RichTextField } from "@prismicio/types";
 
 /**
  * The default component rendered to wrap the text output.
@@ -44,7 +46,7 @@ export type PrismicTextProps = {
 	 *
 	 * @defaultValue `"div"`
 	 */
-	wrapper?: string | ConcreteComponent;
+	wrapper?: string | ConcreteComponent | Raw<DefineComponent>;
 
 	/**
 	 * The string value to be rendered when the field is empty. If a fallback is
@@ -116,7 +118,9 @@ export const PrismicTextImpl = /*#__PURE__*/ defineComponent({
 			required: false,
 		},
 		wrapper: {
-			type: [String, Object, Function] as PropType<string | ConcreteComponent>,
+			type: [String, Object, Function] as PropType<
+				string | ConcreteComponent | Raw<DefineComponent>
+			>,
 			default: undefined,
 			required: false,
 		},

package/src/components/SliceZone.ts

@@ -1,22 +1,24 @@
 import {
 	AllowedComponentProps,
 	ComponentCustomProps,
-	computed,
 	ConcreteComponent,
 	DefineComponent,
-	defineComponent,
 	FunctionalComponent,
-	h,
-	markRaw,
 	PropType,
+	Raw,
 	VNodeProps,
+	computed,
+	defineComponent,
+	h,
+	markRaw,
 	watchEffect,
 } from "vue";
 
+import { __PRODUCTION__ } from "../lib/__PRODUCTION__";
+import { simplyResolveComponent } from "../lib/simplyResolveComponent";
+
 import { Slice } from "@prismicio/types";
 
-import { simplyResolveComponent } from "../lib/simplyResolveComponent";
-import { __PRODUCTION__ } from "../lib/__PRODUCTION__";
 import { usePrismic } from "../usePrismic";
 
 /**
@@ -442,7 +444,7 @@ export type SliceZoneProps<TContext = unknown> = {
 	 * An HTML tag name, a component, or a functional component used to wrap the
 	 * output. The Slice Zone is not wrapped by default.
 	 */
-	wrapper?: string | ConcreteComponent;
+	wrapper?: string | ConcreteComponent | Raw<DefineComponent>;
 };
 
 /**
@@ -478,7 +480,9 @@ export const SliceZoneImpl = /*#__PURE__*/ defineComponent({
 			required: false,
 		},
 		wrapper: {
-			type: [String, Object, Function] as PropType<string | ConcreteComponent>,
+			type: [String, Object, Function] as PropType<
+				string | ConcreteComponent | Raw<DefineComponent>
+			>,
 			default: undefined,
 			required: false,
 		},

package/src/composables.ts

@@ -1,18 +1,15 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-
 // Imports for @link references:
-
 import type { Client } from "@prismicio/client";
 
 /* eslint-enable @typescript-eslint/no-unused-vars */
-
 import { PrismicDocument, Query } from "@prismicio/types";
 
 import {
-	ClientMethodParameters,
 	ClientComposableReturnType,
-	useStatefulPrismicClientMethod,
+	ClientMethodParameters,
 	ComposableOnlyParameters,
+	useStatefulPrismicClientMethod,
 } from "./useStatefulPrismicClientMethod";
 
 // Composables

package/src/createPrismic.ts

@@ -1,22 +1,28 @@
-import { App } from "vue";
-
 import {
-	createClient,
-	predicate,
-	cookie,
 	Client,
 	FetchLike,
+	cookie,
+	createClient,
+	predicate,
 } from "@prismicio/client";
 import {
-	asText,
-	asHTML,
-	asLink,
 	asDate,
+	asHTML,
+	asImagePixelDensitySrcSet,
 	asImageSrc,
 	asImageWidthSrcSet,
-	asImagePixelDensitySrcSet,
+	asLink,
+	asText,
 	documentToLinkField,
 } from "@prismicio/helpers";
+import { App } from "vue";
+
+import type {
+	PrismicPlugin,
+	PrismicPluginClient,
+	PrismicPluginHelpers,
+	PrismicPluginOptions,
+} from "./types";
 
 import {
 	PrismicEmbed,
@@ -27,12 +33,6 @@ import {
 	SliceZone,
 } from "./components";
 import { prismicKey } from "./injectionSymbols";
-import type {
-	PrismicPlugin,
-	PrismicPluginClient,
-	PrismicPluginHelpers,
-	PrismicPluginOptions,
-} from "./types";
 
 /**
  * Creates a `@prismicio/vue` plugin instance that can be used by a Vue app.
@@ -54,12 +54,9 @@ export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
 			fetch: async (endpoint, options) => {
 				let fetchFunction: FetchLike;
 				if (typeof globalThis.fetch === "function") {
-					// TODO: Remove after https://github.com/prismicio/prismic-client/issues/254
-					fetchFunction = globalThis.fetch as FetchLike;
+					fetchFunction = globalThis.fetch;
 				} else {
-					// TODO: Remove after https://github.com/prismicio/prismic-client/issues/254
-					fetchFunction = (await import("isomorphic-unfetch"))
-						.default as FetchLike;
+					fetchFunction = (await import("isomorphic-unfetch")).default;
 				}
 
 				return await fetchFunction(endpoint, options);
@@ -81,7 +78,7 @@ export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
 			return asHTML(
 				richTextField,
 				linkResolver || options.linkResolver,
-				htmlSerializer || options.htmlSerializer,
+				htmlSerializer || options.richTextSerializer || options.htmlSerializer,
 			);
 		},
 		asLink: (linkField, linkResolver) => {

package/src/injectionSymbols.ts

@@ -3,9 +3,7 @@ import type { InjectionKey } from "vue";
 import type { PrismicPlugin } from "./types";
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
-
 // Imports for @link references:
-
 import type { usePrismic } from "./usePrismic";
 
 /* eslint-enable @typescript-eslint/no-unused-vars */

package/src/lib/simplyResolveComponent.ts

@@ -1,4 +1,10 @@
-import { ConcreteComponent, resolveDynamicComponent, VNode } from "vue";
+import {
+	ConcreteComponent,
+	DefineComponent,
+	Raw,
+	VNode,
+	resolveDynamicComponent,
+} from "vue";
 
 /**
  * A stricter version of {@link resolveDynamicComponent} that resolves only type
@@ -11,7 +17,7 @@ import { ConcreteComponent, resolveDynamicComponent, VNode } from "vue";
  * @internal
  */
 export const simplyResolveComponent = (
-	component: string | ConcreteComponent,
+	component: string | ConcreteComponent | Raw<DefineComponent>,
 ): string | VNode => {
 	return resolveDynamicComponent(component) as string | VNode;
 };

package/src/types.ts

@@ -1,29 +1,26 @@
-import type { App, ConcreteComponent, Ref } from "vue";
-
 import type {
-	Client,
 	ClientConfig,
+	CreateClient,
 	cookie,
 	predicate,
 } from "@prismicio/client";
 import type {
-	asText,
-	asHTML,
-	asLink,
-	asDate,
-	documentToLinkField,
 	HTMLFunctionSerializer,
 	HTMLMapSerializer,
 	LinkResolverFunction,
+	asDate,
+	asHTML,
+	asImagePixelDensitySrcSet,
 	asImageSrc,
 	asImageWidthSrcSet,
-	asImagePixelDensitySrcSet,
+	asLink,
+	asText,
+	documentToLinkField,
 } from "@prismicio/helpers";
+import type { App, ConcreteComponent, DefineComponent, Raw, Ref } from "vue";
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
-
 // Imports for @link references:
-
 import type { RouterLink } from "vue-router";
 
 import type {
@@ -60,7 +57,7 @@ type PrismicPluginComponentsOptions = {
 	 * (`to` props).
 	 * @defaultValue {@link RouterLink}
 	 */
-	linkInternalComponent?: string | ConcreteComponent;
+	linkInternalComponent?: string | ConcreteComponent | Raw<DefineComponent>;
 
 	/**
 	 * An HTML tag name, a component, or a functional component used to render
@@ -74,7 +71,7 @@ type PrismicPluginComponentsOptions = {
 	 * (`to` props).
 	 * @defaultValue `"a"`
 	 */
-	linkExternalComponent?: string | ConcreteComponent;
+	linkExternalComponent?: string | ConcreteComponent | Raw<DefineComponent>;
 
 	/**
 	 * An HTML tag name, a component, or a functional component used to render
@@ -86,7 +83,7 @@ type PrismicPluginComponentsOptions = {
 	 * additional `copyright` props.
 	 * @defaultValue `"img"`
 	 */
-	imageComponent?: string | ConcreteComponent;
+	imageComponent?: string | ConcreteComponent | Raw<DefineComponent>;
 
 	/**
 	 * Default widths to use when rendering an image with `widths="defaults"`
@@ -138,6 +135,17 @@ type PrismicPluginOptionsBase = {
 	 *
 	 * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}
 	 */
+	richTextSerializer?: HTMLFunctionSerializer | HTMLMapSerializer;
+
+	/**
+	 * An optional HTML serializer to customize the way rich text fields are
+	 * rendered.
+	 *
+	 * @deprecated Use `richTextSerializer` instead.
+	 *
+	 * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}
+	 */
+	// TODO: Remove in v5
 	htmlSerializer?: HTMLFunctionSerializer | HTMLMapSerializer;
 
 	/**
@@ -171,7 +179,7 @@ type PrismicPluginOptionsWithClient = PrismicPluginOptionsBase & {
 	 * `usePrismic().client`.
 	 * @see Prismic client documentation {@link https://prismic.io/docs/technologies/javascript}
 	 */
-	client: Client;
+	client: ReturnType<CreateClient>;
 
 	/**
 	 * Ensures type union is a strict or.
@@ -276,7 +284,7 @@ export type PrismicPluginClient = {
 	/**
 	 * A `@prismicio/client` instance.
 	 */
-	client: Client;
+	client: ReturnType<CreateClient>;
 
 	/**
 	 * Query predicates from `@prismicio/client`.

package/src/usePrismic.ts

@@ -1,8 +1,9 @@
 import { inject } from "vue";
 
-import { prismicKey } from "./injectionSymbols";
 import { PrismicPlugin } from "./types";
 
+import { prismicKey } from "./injectionSymbols";
+
 /**
  * Accesses `@prismicio/vue` plugin interface.
  *

package/src/useStatefulPrismicClientMethod.ts

@@ -1,15 +1,15 @@
-import { isRef, ref, Ref, shallowRef, unref, watch } from "vue";
-
 import {
 	Client,
 	ForbiddenError,
 	ParsingError,
 	PrismicError,
 } from "@prismicio/client";
+import { Ref, isRef, ref, shallowRef, unref, watch } from "vue";
 
-import { usePrismic } from "./usePrismic";
 import { PrismicClientComposableState, VueUseParameters } from "./types";
 
+import { usePrismic } from "./usePrismic";
+
 // Helpers
 type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/vetur/attributes.json

@@ -7,7 +7,6 @@
 		"type": "string | object | function",
 		"description": "An HTML tag name, a component, or a functional component used to wrap the output. Defaults to `\"div\"`."
 	},
-
 	"prismic-image/field": {
 		"type": "object",
 		"description": "The Prismic image field to render."
@@ -28,7 +27,6 @@
 		"type": "array | string",
 		"description": "Adds an additional `srcset` attribute to the image following giving pixel densities."
 	},
-
 	"prismic-link/field": {
 		"type": "object",
 		"description": "The Prismic link field or document to render."
@@ -57,7 +55,6 @@
 		"type": "string | object | function",
 		"description": "An HTML tag name, a component, or a functional component used to render external links. Defaults to the one provided to `@prismicio/vue` plugin if configured, `\"a\"` otherwise."
 	},
-
 	"prismic-rich-text/field": {
 		"type": "array",
 		"description": "The Prismic rich text or title field to render."
@@ -66,7 +63,7 @@
 		"type": "function",
 		"description": "A link resolver function used to resolve links when not using the route resolver parameter with `@prismicio/client`. Defaults to the link resolver provided to `@prismicio/vue` plugin if configured."
 	},
-	"prismic-rich-text/html-serializer": {
+	"prismic-rich-text/serializer": {
 		"type": "function | object",
 		"description": "An HTML serializer to customize the way rich text fields are rendered. Defaults to the HTML serializer provided to `@prismicio/vue` plugin if configured."
 	},
@@ -78,7 +75,6 @@
 		"type": "string",
 		"description": "The HTML value to be rendered when the field is empty. If a fallback is not given, `\"\"` (nothing) will be rendered."
 	},
-
 	"prismic-text/field": {
 		"type": "array",
 		"description": "The Prismic rich text or title field to render."
@@ -95,7 +91,6 @@
 		"type": "string",
 		"description": "The string value to be rendered when the field is empty. If a fallback is not given, `\"\"` (nothing) will be rendered."
 	},
-
 	"slice-zone/slices": {
 		"type": "array",
 		"description": "List of Slice data from the Slice Zone."

package/vetur/tags.json

@@ -1,6 +1,9 @@
 {
 	"prismic-embed": {
-		"attributes": ["field", "wrapper"],
+		"attributes": [
+			"field",
+			"wrapper"
+		],
 		"description": "Component to render a Prismic embed field."
 	},
 	"prismic-image": {
@@ -26,11 +29,22 @@
 		"description": "Component to render a Prismic link field."
 	},
 	"prismic-rich-text": {
-		"attributes": ["field", "link-resolver", "html-serializer", "wrapper", "fallback"],
+		"attributes": [
+			"field",
+			"link-resolver",
+			"serializer",
+			"wrapper",
+			"fallback"
+		],
 		"description": "Component to render a Prismic rich text field as HTML."
 	},
 	"prismic-text": {
-		"attributes": ["field", "separator", "wrapper", "fallback"],
+		"attributes": [
+			"field",
+			"separator",
+			"wrapper",
+			"fallback"
+		],
 		"description": "Component to render a Prismic rich text field as plain text."
 	},
 	"slice-zone": {