@prismicio/vue 4.0.3 → 4.2.0

package/dist/usePrismic.d.ts

@@ -1,22 +1,22 @@
-import { PrismicPlugin } from "./types";
-/**
- * Accesses `@prismicio/vue` plugin interface.
- *
- * @example
- *
- * ```javascript
- * // With the composition API
- * 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
+ *
+ * ```javascript
+ * // With the composition API
+ * 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 { Client, ForbiddenError, ParsingError, PrismicError } from "@prismicio/client";
-import { Ref } from "vue";
-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 { Client, ForbiddenError, ParsingError, PrismicError } from "@prismicio/client";
+import { Ref } from "vue";
+import { PrismicClientComposableState, VueUseParameters } from "./types";
+declare type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
+declare type ClientMethodLike = (...args: any[]) => Promise<any> | any;
+declare type ClientMethods = typeof Client.prototype;
+declare type ClientError = PrismicError<unknown> | ParsingError | ForbiddenError;
+/**
+ * @internal
+ */
+export declare type ClientMethodParameters<TMethodName extends keyof ClientMethods> = ClientMethods[TMethodName] extends ClientMethodLike ? VueUseParameters<Parameters<ClientMethods[TMethodName]>> : never;
+/**
+ * @internal
+ */
+export declare type ClientMethodReturnType<TMethodName extends keyof ClientMethods> = ClientMethods[TMethodName] extends ClientMethodLike ? ReturnType<ClientMethods[TMethodName]> : never;
+/**
+ * @internal
+ */
+export declare 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 declare 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": "4.0.3",
+	"version": "4.2.0",
 	"description": "Vue plugin, components, and composables to fetch and present Prismic content",
 	"keywords": [
 		"typescript",
@@ -57,38 +57,38 @@
 		"test": "npm run lint && npm run types && npm run unit && npm run build && npm run size"
 	},
 	"dependencies": {
-		"@prismicio/client": "^7.2.0",
+		"@prismicio/client": "^7.4.0",
 		"isomorphic-unfetch": "^3.1.0",
-		"vue-router": "^4.2.4"
+		"vue-router": "^4.3.0"
 	},
 	"devDependencies": {
 		"@prismicio/mock": "^0.3.1",
 		"@size-limit/preset-small-lib": "^8.2.6",
-		"@trivago/prettier-plugin-sort-imports": "^4.2.0",
-		"@types/jsdom-global": "^3.0.4",
-		"@typescript-eslint/eslint-plugin": "^5.61.0",
-		"@typescript-eslint/parser": "^5.61.0",
-		"@vitejs/plugin-vue": "^4.3.4",
-		"@vitest/coverage-v8": "^0.34.3",
-		"@vue/compiler-sfc": "^3.3.4",
+		"@trivago/prettier-plugin-sort-imports": "^4.3.0",
+		"@types/jsdom-global": "^3.0.7",
+		"@typescript-eslint/eslint-plugin": "^5.62.0",
+		"@typescript-eslint/parser": "^5.62.0",
+		"@vitejs/plugin-vue": "^4.6.2",
+		"@vitest/coverage-v8": "^0.34.6",
+		"@vue/compiler-sfc": "^3.4.21",
 		"@vue/eslint-config-typescript": "^11.0.3",
-		"@vue/test-utils": "^2.4.1",
-		"eslint": "^8.48.0",
-		"eslint-config-prettier": "^8.8.0",
+		"@vue/test-utils": "^2.4.5",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^8.10.0",
 		"eslint-plugin-prettier": "^4.2.1",
 		"eslint-plugin-tsdoc": "^0.2.17",
-		"eslint-plugin-vue": "^9.15.1",
-		"jsdom": "^22.1.0",
+		"eslint-plugin-vue": "^9.24.0",
+		"jsdom": "^24.0.0",
 		"jsdom-global": "^3.0.2",
 		"prettier": "^2.8.8",
 		"prettier-plugin-jsdoc": "^0.4.2",
 		"size-limit": "^8.2.6",
 		"standard-version": "^9.5.0",
-		"typescript": "^5.2.2",
-		"vite": "^4.4.9",
-		"vite-plugin-sdk": "^0.1.1",
-		"vitest": "^0.34.3",
-		"vue": "^3.3.4"
+		"typescript": "^5.4.3",
+		"vite": "^4.5.3",
+		"vite-plugin-sdk": "^0.1.2",
+		"vitest": "^0.34.6",
+		"vue": "^3.4.21"
 	},
 	"peerDependencies": {
 		"vue": "^3.0.0"

package/src/components/SliceZone.ts

@@ -41,10 +41,10 @@ type ExtractSliceType<TSlice extends SliceLike> = TSlice extends SliceLikeRestV2
  *
  * @typeParam TSliceType - Type name of the Slice.
  */
-export type SliceLikeRestV2<TSliceType extends string = string> = {
-	slice_type: Slice<TSliceType>["slice_type"];
-	id?: string;
-};
+export type SliceLikeRestV2<TSliceType extends string = string> = Pick<
+	Slice<TSliceType>,
+	"id" | "slice_type"
+>;
 
 /**
  * The minimum required properties to represent a Prismic Slice from the Prismic
@@ -60,14 +60,23 @@ export type SliceLikeGraphQL<TSliceType extends string = string> = {
  * The minimum required properties to represent a Prismic Slice for the
  * `<SliceZone />` component.
  *
- * If using Prismic's REST API, use the `Slice` export from `@prismicio/client`
- * for a full interface.
+ * If using Prismic's Rest API V2, use the `Slice` export from
+ * `@prismicio/client` for a full interface.
  *
  * @typeParam TSliceType - Type name of the Slice
  */
-export type SliceLike<TSliceType extends string = string> =
+export type SliceLike<TSliceType extends string = string> = (
 	| SliceLikeRestV2<TSliceType>
-	| SliceLikeGraphQL<TSliceType>;
+	| SliceLikeGraphQL<TSliceType>
+) & {
+	/**
+	 * If `true`, this Slice has been modified from its original value using a
+	 * mapper and `@prismicio/client`'s `mapSliceZone()`.
+	 *
+	 * @internal
+	 */
+	__mapped?: true;
+};
 
 /**
  * A looser version of the `SliceZone` type from `@prismicio/client` using
@@ -78,8 +87,9 @@ export type SliceLike<TSliceType extends string = string> =
  *
  * @typeParam TSlice - The type(s) of slices in the Slice Zone
  */
-export type SliceZoneLike<TSlice extends SliceLike = SliceLike> =
-	readonly TSlice[];
+export type SliceZoneLike<
+	TSlice extends SliceLike = SliceLike & Record<string, unknown>,
+> = readonly TSlice[];
 
 /**
  * Vue props for a component rendering content from a Prismic Slice using the
@@ -90,8 +100,7 @@ export type SliceZoneLike<TSlice extends SliceLike = SliceLike> =
  *   available to all Slice components
  */
 export type SliceComponentProps<
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	TSlice extends SliceLike = any,
+	TSlice extends SliceLike = SliceLike,
 	TContext = unknown,
 > = {
 	/**
@@ -111,7 +120,9 @@ export type SliceComponentProps<
 	// reference limtiations. If we had another generic to determine the full
 	// union of Slice types, it would include TSlice. This causes TypeScript to
 	// throw a compilation error.
-	slices: SliceZoneLike<SliceLike>;
+	slices: SliceZoneLike<
+		TSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2
+	>;
 
 	/**
 	 * Arbitrary data passed to `<SliceZone />` and made available to all Slice
@@ -246,19 +257,29 @@ export const TODOSliceComponent = __PRODUCTION__
 	? ((() => null) as FunctionalComponent<SliceComponentProps>)
 	: /*#__PURE__*/ (defineComponent({
 			name: "TODOSliceComponent",
-			props: getSliceComponentProps(),
-			setup(props) {
+			props: [],
+			inheritAttrs: false,
+			setup(_props, { attrs }) {
 				const type = computed(() =>
-					"slice_type" in props.slice
-						? props.slice.slice_type
-						: props.slice.type,
+					attrs.slice && typeof attrs.slice === "object"
+						? "slice_type" in attrs.slice
+							? (attrs.slice as Record<string, unknown>).slice_type
+							: "type" in attrs.slice
+							? (attrs.slice as Record<string, unknown>).type
+							: null
+						: null,
 				);
 
 				watchEffect(() => {
-					console.warn(
-						`[SliceZone] Could not find a component for Slice type "${type.value}"`,
-						props.slice,
-					);
+					type.value
+						? console.warn(
+								`[SliceZone] Could not find a component for Slice type "${type.value}"`,
+								attrs.slice,
+						  )
+						: console.warn(
+								"[SliceZone] Could not find a component for mapped Slice",
+								attrs,
+						  );
 				});
 
 				return () => {
@@ -266,9 +287,13 @@ export const TODOSliceComponent = __PRODUCTION__
 						"section",
 						{
 							"data-slice-zone-todo-component": "",
-							"data-slice-type": type.value,
+							"data-slice-type": type.value ? type.value : null,
 						},
-						[`Could not find a component for Slice type "${type.value}"`],
+						[
+							type.value
+								? `Could not find a component for Slice type "${type.value}"`
+								: "Could not find a component for mapped Slice",
+						],
 					);
 				};
 			},
@@ -426,6 +451,7 @@ export type SliceZoneProps<TContext = unknown> = {
 	 *
 	 * @returns The Vue component to render for a Slice.
 	 */
+	// TODO: Remove in v5 when the `resolver` prop is removed.
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	resolver?: SliceZoneResolver<any, TContext>;
 
@@ -499,11 +525,21 @@ export const SliceZoneImpl = /*#__PURE__*/ defineComponent({
 			return () => null;
 		}
 
+		// TODO: Remove in v3 when the `resolver` prop is removed.
+		if (!__PRODUCTION__) {
+			if (props.resolver) {
+				console.warn(
+					"The `resolver` prop is deprecated. Please replace it with a components map using the `components` prop.",
+				);
+			}
+		}
+
 		const { options } = usePrismic();
 
 		const renderedSlices = computed(() => {
 			return props.slices.map((slice, index) => {
-				const type = "slice_type" in slice ? slice.slice_type : slice.type;
+				const type =
+					"slice_type" in slice ? (slice.slice_type as string) : slice.type;
 
 				let component =
 					props.components && type in props.components
@@ -512,7 +548,7 @@ export const SliceZoneImpl = /*#__PURE__*/ defineComponent({
 						  options.components?.sliceZoneDefaultComponent ||
 						  TODOSliceComponent;
 
-				// TODO: Remove `resolver` in v3 in favor of `components`.
+				// TODO: Remove `resolver` in v5 in favor of `components`.
 				if (props.resolver) {
 					const resolvedComponent = props.resolver({
 						slice,
@@ -526,17 +562,23 @@ export const SliceZoneImpl = /*#__PURE__*/ defineComponent({
 				}
 
 				const key =
-					"id" in slice && slice.id
+					"id" in slice && typeof slice.id === "string"
 						? slice.id
 						: `${index}-${JSON.stringify(slice)}`;
 
-				const p = {
-					key,
-					slice,
-					index,
-					context: props.context,
-					slices: props.slices,
-				};
+				let p;
+				if (slice.__mapped) {
+					const { __mapped, ...mappedProps } = slice;
+					p = { key, ...mappedProps };
+				} else {
+					p = {
+						key,
+						slice,
+						index,
+						context: props.context,
+						slices: props.slices,
+					};
+				}
 
 				return h(simplyResolveComponent(component as ConcreteComponent), p);
 			});

package/src/createPrismic.ts

@@ -14,6 +14,7 @@ import {
 	createClient,
 	documentToLinkField,
 	filter,
+	isFilled,
 } from "@prismicio/client";
 import { App } from "vue";
 
@@ -120,6 +121,7 @@ export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
 		asImageSrc,
 		asImageWidthSrcSet,
 		asImagePixelDensitySrcSet,
+		isFilled,
 		documentToLinkField,
 	};
 

package/src/types.ts

@@ -15,6 +15,7 @@ import type {
 	cookie,
 	documentToLinkField,
 	filter,
+	isFilled,
 } from "@prismicio/client";
 import type { App, ConcreteComponent, DefineComponent, Raw, Ref } from "vue";
 
@@ -378,6 +379,12 @@ export type PrismicPluginHelpers = {
 	 */
 	asImagePixelDensitySrcSet: typeof asImagePixelDensitySrcSet;
 
+	/**
+	 * Helpers to determine if a field is filled. This is `@prismicio/client`
+	 * {@link isFilled} object.
+	 */
+	isFilled: typeof isFilled;
+
 	/**
 	 * Converts a document into a link field. This is `@prismicio/client`
 	 * {@link documentToLinkField} function.