@prismicio/vue 4.1.0 → 4.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/vue",
-	"version": "4.1.0",
+	"version": "4.2.1",
 	"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.5"
+		"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.5",
+		"@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.3.4",
-		"@vitest/coverage-v8": "^0.34.5",
-		"@vue/compiler-sfc": "^3.3.4",
+		"@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.50.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.17.0",
-		"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
@@ -243,16 +254,23 @@ export type SliceComponentType<
  * cannot be found in `<SliceZone />`.
  */
 export const TODOSliceComponent = __PRODUCTION__
-	? ((() => null) as FunctionalComponent<SliceComponentProps>)
+	? ((() => null) as FunctionalComponent<{
+			slice: SliceLike;
+	  }>)
 	: /*#__PURE__*/ (defineComponent({
 			name: "TODOSliceComponent",
-			props: getSliceComponentProps(),
+			props: {
+				slice: {
+					type: Object as PropType<SliceLike>,
+					required: true,
+				},
+			},
 			setup(props) {
-				const type = computed(() =>
-					"slice_type" in props.slice
+				const type = computed(() => {
+					return "slice_type" in props.slice
 						? props.slice.slice_type
-						: props.slice.type,
-				);
+						: props.slice.type;
+				});
 
 				watchEffect(() => {
 					console.warn(
@@ -426,6 +444,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,20 +518,29 @@ 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
 						? props.components[type]
 						: props.defaultComponent ||
-						  options.components?.sliceZoneDefaultComponent ||
-						  TODOSliceComponent;
+						  options.components?.sliceZoneDefaultComponent;
 
-				// 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,19 +554,33 @@ 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,
-				};
+				if (component) {
+					if (slice.__mapped) {
+						const { __mapped, ...mappedProps } = slice;
+
+						return h(simplyResolveComponent(component as ConcreteComponent), {
+							key,
+							...mappedProps,
+						});
+					}
 
-				return h(simplyResolveComponent(component as ConcreteComponent), p);
+					return h(simplyResolveComponent(component as ConcreteComponent), {
+						key,
+						slice,
+						index,
+						context: props.context,
+						slices: props.slices,
+					});
+				} else {
+					return h(
+						simplyResolveComponent(TODOSliceComponent as ConcreteComponent),
+						{ key, slice },
+					);
+				}
 			});
 		});