@prismicio/vue 3.1.3 → 3.2.0

package/dist/usePrismic.d.ts

@@ -1,21 +1,21 @@
-import { PrismicPlugin } from "./types";
-/**
- * Accesses `@prismicio/vue` plugin interface.
- *
- * @example With the composition API:
- *
- * ```javascript
- * import { usePrismic } from "@prismicio/vue";
- *
- * export default {
- * 	setup() {
- * 		const prismic = usePrismic();
- *
- * 		return {};
- * 	},
- * };
- * ```
- *
- * @returns The interface {@link PrismicPlugin}
- */
-export declare const usePrismic: () => PrismicPlugin;
+import { PrismicPlugin } from "./types";
+/**
+ * Accesses `@prismicio/vue` plugin interface.
+ *
+ * @example With the composition API:
+ *
+ * ```javascript
+ * import { usePrismic } from "@prismicio/vue";
+ *
+ * export default {
+ * 	setup() {
+ * 		const prismic = usePrismic();
+ *
+ * 		return {};
+ * 	},
+ * };
+ * ```
+ *
+ * @returns The interface {@link PrismicPlugin}
+ */
+export declare const usePrismic: () => PrismicPlugin;

package/dist/useStatefulPrismicClientMethod.d.ts

@@ -1,64 +1,64 @@
-import { Ref } from "vue";
-import { Client, ForbiddenError, ParsingError, PrismicError } from "@prismicio/client";
-import { PrismicClientComposableState, VueUseParameters } from "./types";
-type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
-type ClientMethodLike = (...args: any[]) => Promise<any> | any;
-type ClientMethods = typeof Client.prototype;
-type ClientError = PrismicError<unknown> | ParsingError | ForbiddenError;
-/**
- * @internal
- */
-export type ClientMethodParameters<TMethodName extends keyof ClientMethods> = ClientMethods[TMethodName] extends ClientMethodLike ? VueUseParameters<Parameters<ClientMethods[TMethodName]>> : never;
-/**
- * @internal
- */
-export type ClientMethodReturnType<TMethodName extends keyof ClientMethods> = ClientMethods[TMethodName] extends ClientMethodLike ? ReturnType<ClientMethods[TMethodName]> : never;
-/**
- * @internal
- */
-export type ComposableOnlyParameters = {
-    client?: Ref<Client> | Client;
-};
-/**
- * The return type of a `@prismicio/client` Vue composable.
- *
- * @typeParam TData - The expected format of the `data` property of the returned
- *   object
- */
-export type ClientComposableReturnType<TData = unknown> = {
-    /**
-     * The current state of the composable's client method call.
-     */
-    state: Ref<PrismicClientComposableState>;
-    /**
-     * Data returned by the client.
-     */
-    data: Ref<TData | null>;
-    /**
-     * Error returned by the composable's client method call if in an errror
-     * state.
-     */
-    error: Ref<ClientError | Error | null>;
-    /**
-     * Perform the composable's client method call again.
-     */
-    refresh: () => Promise<void>;
-};
-/**
- * A low level Vue composable that uses provided method name on plugin or
- * provided client with given arguments. The composable has its own internal
- * state manager to report async status, such as pending or error statuses.
- *
- * @typeParam TClientMethodName - A method name from `@prismicio/client`
- * @typeParam TClientMethodArguments - The method expected arguments
- * @typeParam TClientMethodReturnType - The method expected return type
- *
- * @param method - The `@prismicio/client` method name to use
- * @param args - The arguments to use with requested method
- *
- * @returns The composable payload {@link ClientComposableReturnType}
- *
- * @internal
- */
-export declare const useStatefulPrismicClientMethod: <TClientMethodName extends keyof Client<any>, TClientMethodArguments extends ClientMethodParameters<TClientMethodName>, TClientMethodReturnType extends UnwrapPromise<ClientMethodReturnType<TClientMethodName>>>(methodName: TClientMethodName, args: TClientMethodArguments) => ClientComposableReturnType<TClientMethodReturnType>;
-export {};
+import { Ref } from "vue";
+import { Client, ForbiddenError, ParsingError, PrismicError } from "@prismicio/client";
+import { PrismicClientComposableState, VueUseParameters } from "./types";
+type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
+type ClientMethodLike = (...args: any[]) => Promise<any> | any;
+type ClientMethods = typeof Client.prototype;
+type ClientError = PrismicError<unknown> | ParsingError | ForbiddenError;
+/**
+ * @internal
+ */
+export type ClientMethodParameters<TMethodName extends keyof ClientMethods> = ClientMethods[TMethodName] extends ClientMethodLike ? VueUseParameters<Parameters<ClientMethods[TMethodName]>> : never;
+/**
+ * @internal
+ */
+export type ClientMethodReturnType<TMethodName extends keyof ClientMethods> = ClientMethods[TMethodName] extends ClientMethodLike ? ReturnType<ClientMethods[TMethodName]> : never;
+/**
+ * @internal
+ */
+export type ComposableOnlyParameters = {
+    client?: Ref<Client> | Client;
+};
+/**
+ * The return type of a `@prismicio/client` Vue composable.
+ *
+ * @typeParam TData - The expected format of the `data` property of the returned
+ *   object
+ */
+export type ClientComposableReturnType<TData = unknown> = {
+    /**
+     * The current state of the composable's client method call.
+     */
+    state: Ref<PrismicClientComposableState>;
+    /**
+     * Data returned by the client.
+     */
+    data: Ref<TData | null>;
+    /**
+     * Error returned by the composable's client method call if in an errror
+     * state.
+     */
+    error: Ref<ClientError | Error | null>;
+    /**
+     * Perform the composable's client method call again.
+     */
+    refresh: () => Promise<void>;
+};
+/**
+ * A low level Vue composable that uses provided method name on plugin or
+ * provided client with given arguments. The composable has its own internal
+ * state manager to report async status, such as pending or error statuses.
+ *
+ * @typeParam TClientMethodName - A method name from `@prismicio/client`
+ * @typeParam TClientMethodArguments - The method expected arguments
+ * @typeParam TClientMethodReturnType - The method expected return type
+ *
+ * @param method - The `@prismicio/client` method name to use
+ * @param args - The arguments to use with requested method
+ *
+ * @returns The composable payload {@link ClientComposableReturnType}
+ *
+ * @internal
+ */
+export declare const useStatefulPrismicClientMethod: <TClientMethodName extends keyof Client<any>, TClientMethodArguments extends ClientMethodParameters<TClientMethodName>, TClientMethodReturnType extends UnwrapPromise<ClientMethodReturnType<TClientMethodName>>>(methodName: TClientMethodName, args: TClientMethodArguments) => ClientComposableReturnType<TClientMethodReturnType>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/vue",
-	"version": "3.1.3",
+	"version": "3.2.0",
 	"description": "Vue plugin, components, and composables to fetch and present Prismic content",
 	"keywords": [
 		"typescript",
@@ -60,28 +60,28 @@
 		"@prismicio/mock": "^0.2.0",
 		"@size-limit/preset-small-lib": "^8.2.4",
 		"@types/jsdom-global": "^3.0.4",
-		"@typescript-eslint/eslint-plugin": "^5.54.1",
-		"@typescript-eslint/parser": "^5.54.1",
-		"@vitejs/plugin-vue": "^4.0.0",
-		"@vitest/coverage-c8": "^0.29.2",
+		"@typescript-eslint/eslint-plugin": "^5.59.5",
+		"@typescript-eslint/parser": "^5.59.5",
+		"@vitejs/plugin-vue": "^4.2.1",
+		"@vitest/coverage-c8": "^0.31.0",
 		"@vue/compiler-sfc": "^3.2.47",
-		"@vue/eslint-config-typescript": "^11.0.2",
-		"@vue/test-utils": "^2.3.1",
-		"eslint": "^8.36.0",
-		"eslint-config-prettier": "^8.7.0",
+		"@vue/eslint-config-typescript": "^11.0.3",
+		"@vue/test-utils": "^2.3.2",
+		"eslint": "^8.40.0",
+		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-prettier": "^4.2.1",
 		"eslint-plugin-tsdoc": "^0.2.17",
-		"eslint-plugin-vue": "^9.9.0",
-		"jsdom": "^21.1.1",
+		"eslint-plugin-vue": "^9.11.1",
+		"jsdom": "^22.0.0",
 		"jsdom-global": "^3.0.2",
-		"prettier": "^2.8.4",
+		"prettier": "^2.8.8",
 		"prettier-plugin-jsdoc": "^0.4.2",
 		"size-limit": "^8.2.4",
 		"standard-version": "^9.5.0",
-		"typescript": "^4.9.5",
-		"vite": "^4.1.4",
+		"typescript": "^5.0.4",
+		"vite": "^4.3.5",
 		"vite-plugin-sdk": "^0.1.1",
-		"vitest": "^0.29.2",
+		"vitest": "^0.31.0",
 		"vue": "^3.2.47"
 	},
 	"peerDependencies": {

package/src/components/PrismicEmbed.ts

@@ -2,9 +2,11 @@ import {
 	AllowedComponentProps,
 	ComponentCustomProps,
 	ConcreteComponent,
+	DefineComponent,
 	defineComponent,
 	h,
 	PropType,
+	Raw,
 	VNodeProps,
 } from "vue";
 
@@ -31,7 +33,7 @@ export type PrismicEmbedProps = {
 	 *
 	 * @defaultValue `"div"`
 	 */
-	wrapper?: string | ConcreteComponent;
+	wrapper?: string | ConcreteComponent | Raw<DefineComponent>;
 };
 
 /**
@@ -47,7 +49,9 @@ export const PrismicEmbedImpl = /*#__PURE__*/ defineComponent({
 			required: true,
 		},
 		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/PrismicImage.ts

@@ -9,6 +9,8 @@ import {
 	PropType,
 	VNodeProps,
 	unref,
+	DefineComponent,
+	Raw,
 } from "vue";
 
 import { ImageField } from "@prismicio/types";
@@ -48,7 +50,7 @@ export type PrismicImageProps = {
 	 * receive an additional `copyright` props.
 	 * @defaultValue The one provided to `@prismicio/vue` plugin if configured, `"img"` otherwise.
 	 */
-	imageComponent?: string | ConcreteComponent;
+	imageComponent?: string | ConcreteComponent | Raw<DefineComponent>;
 
 	/**
 	 * An object of Imgix URL API parameters.
@@ -217,7 +219,9 @@ export const PrismicImageImpl = /*#__PURE__*/ defineComponent({
 			required: true,
 		},
 		imageComponent: {
-			type: [String, Object] as PropType<string | ConcreteComponent>,
+			type: [String, Object] as PropType<
+				string | ConcreteComponent | Raw<DefineComponent>
+			>,
 			default: undefined,
 			required: false,
 		},

package/src/components/PrismicLink.ts

@@ -10,6 +10,8 @@ import {
 	ConcreteComponent,
 	computed,
 	ComputedRef,
+	Raw,
+	DefineComponent,
 } from "vue";
 
 import { asLink, LinkResolverFunction } from "@prismicio/helpers";
@@ -85,7 +87,7 @@ export type PrismicLinkProps = {
 	 * (`to` props).
 	 * @defaultValue The one provided to `@prismicio/vue` plugin if configured, {@link RouterLink} otherwise.
 	 */
-	internalComponent?: string | ConcreteComponent;
+	internalComponent?: string | ConcreteComponent | Raw<DefineComponent>;
 
 	/**
 	 * An HTML tag name, a component, or a functional component used to render
@@ -99,7 +101,7 @@ export type PrismicLinkProps = {
 	 * (`to` props).
 	 * @defaultValue The one provided to `@prismicio/vue` plugin if configured, `"a"` otherwise.
 	 */
-	externalComponent?: string | ConcreteComponent;
+	externalComponent?: string | ConcreteComponent | Raw<DefineComponent>;
 };
 
 /**
@@ -114,7 +116,7 @@ export type UsePrismicLinkReturnType = {
 	/**
 	 * Suggested component to render for provided link field.
 	 */
-	type: ComputedRef<string | ConcreteComponent>;
+	type: ComputedRef<string | ConcreteComponent | Raw<DefineComponent>>;
 
 	/**
 	 * Resolved anchor `href` value.
@@ -238,12 +240,16 @@ export const PrismicLinkImpl = /*#__PURE__*/ defineComponent({
 			required: false,
 		},
 		internalComponent: {
-			type: [String, Object, Function] as PropType<string | ConcreteComponent>,
+			type: [String, Object, Function] as PropType<
+				string | ConcreteComponent | Raw<DefineComponent>
+			>,
 			default: undefined,
 			required: false,
 		},
 		externalComponent: {
-			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/PrismicRichText.ts

@@ -5,12 +5,14 @@ import {
 	computed,
 	ComputedRef,
 	ConcreteComponent,
+	DefineComponent,
 	defineComponent,
 	h,
 	inject,
 	nextTick,
 	onBeforeUnmount,
 	PropType,
+	Raw,
 	ref,
 	unref,
 	VNodeProps,
@@ -63,6 +65,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 +84,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 +131,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 +163,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 +178,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

@@ -4,9 +4,11 @@ import {
 	computed,
 	ComputedRef,
 	ConcreteComponent,
+	DefineComponent,
 	defineComponent,
 	h,
 	PropType,
+	Raw,
 	unref,
 	VNode,
 	VNodeProps,
@@ -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

@@ -9,6 +9,7 @@ import {
 	h,
 	markRaw,
 	PropType,
+	Raw,
 	VNodeProps,
 	watchEffect,
 } from "vue";
@@ -222,6 +223,9 @@ export type SliceComponentType<
 	TSlice extends SliceLike = any,
 	TContext = unknown,
 > =
+	// For reference within TypeScript files when `*.vue` type cannot be inferred
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+	| DefineComponent<{}, {}, any>
 	| DefineComponent<SliceComponentProps<TSlice, TContext>>
 	| FunctionalComponent<SliceComponentProps<TSlice, TContext>>;
 
@@ -439,7 +443,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>;
 };
 
 /**
@@ -475,7 +479,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/createPrismic.ts

@@ -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/lib/simplyResolveComponent.ts

@@ -1,4 +1,10 @@
-import { ConcreteComponent, resolveDynamicComponent, VNode } from "vue";
+import {
+	ConcreteComponent,
+	DefineComponent,
+	Raw,
+	resolveDynamicComponent,
+	VNode,
+} 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,4 +1,4 @@
-import type { App, ConcreteComponent, Ref } from "vue";
+import type { App, ConcreteComponent, DefineComponent, Raw, Ref } from "vue";
 
 import type {
 	Client,
@@ -60,7 +60,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 +74,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 +86,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 +138,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;
 
 	/**