@prismicio/vue 3.0.0-alpha.5 → 3.0.0-alpha.6

package/src/components/SliceZone.ts

@@ -254,11 +254,11 @@ export type SliceZoneComponents<
  * @example Defining a slice components:
  *
  * ```javascript
- * import { getSliceZoneComponents } from "@prismicio/vue";
+ * import { defineSliceZoneComponents } from "@prismicio/vue";
  *
  * export default {
  *   data() {
- *     components: getSliceZoneComponents({
+ *     components: defineSliceZoneComponents({
  *       foo: Foo,
  *       bar: defineAsyncComponent(
  *         () => new Promise((res) => res(Bar)),
@@ -275,7 +275,7 @@ export type SliceZoneComponents<
  *
  * @returns A new optimized record of {@link SliceZoneComponents}
  */
-export const getSliceZoneComponents = <
+export const defineSliceZoneComponents = <
 	TSlice extends SliceLike = SliceLike,
 	TContext = unknown,
 >(
@@ -300,6 +300,43 @@ export const getSliceZoneComponents = <
 	return result;
 };
 
+/**
+ * Arguments for a `<SliceZone>` `resolver` function.
+ */
+export type SliceZoneResolverArgs<TSlice extends SliceLike = SliceLike> = {
+	/**
+	 * The Slice to resolve to a Vue component..
+	 */
+	slice: TSlice;
+
+	/**
+	 * The name of the Slice.
+	 */
+	sliceName: TSlice["slice_type"];
+
+	/**
+	 * The index of the Slice in the Slice Zone.
+	 */
+	i: number;
+};
+
+/**
+ * A function that determines the rendered Vue component for each Slice in the
+ * Slice Zone. If a nullish value is returned, the component will fallback to
+ * the `components` or `defaultComponent` props to determine the rendered component.
+ *
+ * @deprecated Use the `components` prop instead.
+ * @param args - Arguments for the resolver function.
+ *
+ * @returns The Vue component to render for a Slice.
+ */
+export type SliceZoneResolver<
+	TSlice extends SliceLike = SliceLike,
+	TContext = unknown,
+> = (
+	args: SliceZoneResolverArgs<TSlice>,
+) => SliceComponentType<TSlice, TContext> | string | undefined | null;
+
 /**
  * Props for `<SliceZone />`.
  *
@@ -318,7 +355,18 @@ export type SliceZoneProps<
 	/**
 	 * A record mapping Slice types to Vue components.
 	 */
-	components: SliceZoneComponents;
+	components?: SliceZoneComponents;
+
+	/**
+	 * A function that determines the rendered Vue component for each Slice in the
+	 * Slice Zone.
+	 *
+	 * @deprecated Use the `components` prop instead.
+	 * @param args - Arguments for the resolver function.
+	 *
+	 * @returns The Vue component to render for a Slice.
+	 */
+	resolver?: SliceZoneResolver<TSlice, TContext>;
 
 	/**
 	 * Arbitrary data made available to all Slice components.
@@ -356,7 +404,13 @@ export const SliceZoneImpl = /*#__PURE__*/ defineComponent({
 		},
 		components: {
 			type: Object as PropType<SliceZoneComponents>,
-			required: true,
+			default: undefined,
+			required: false,
+		},
+		resolver: {
+			type: Function as PropType<SliceZoneResolver>,
+			default: undefined,
+			required: false,
 		},
 		context: {
 			type: null,
@@ -384,14 +438,28 @@ export const SliceZoneImpl = /*#__PURE__*/ defineComponent({
 
 		const renderedSlices = computed(() => {
 			return props.slices.map((slice, index) => {
-				const component =
-					slice.slice_type in props.components
+				let component =
+					props.components && slice.slice_type in props.components
 						? props.components[slice.slice_type]
 						: props.defaultComponent ||
 						  options.components?.sliceZoneDefaultComponent ||
 						  TODOSliceComponent;
 
+				// TODO: Remove `resolver` in v3 in favor of `components`.
+				if (props.resolver) {
+					const resolvedComponent = props.resolver({
+						slice,
+						sliceName: slice.slice_type,
+						i: index,
+					});
+
+					if (resolvedComponent) {
+						component = resolvedComponent;
+					}
+				}
+
 				const p = {
+					key: `${slice.slice_type}-${index}`,
 					slice,
 					index,
 					context: props.context,

package/src/components/index.ts

@@ -23,7 +23,7 @@ export type {
 export {
 	getSliceComponentProps,
 	TODOSliceComponent,
-	getSliceZoneComponents,
+	defineSliceZoneComponents,
 	SliceZoneImpl,
 	SliceZone,
 } from "./SliceZone";
@@ -33,6 +33,8 @@ export type {
 	SliceComponentType,
 	SliceLike,
 	SliceZoneComponents,
+	SliceZoneResolverArgs,
+	SliceZoneResolver,
 	SliceZoneLike,
 	SliceZoneProps,
 } from "./SliceZone";

package/src/index.ts

@@ -15,7 +15,7 @@ export {
 	// Slice Zone
 	getSliceComponentProps,
 	TODOSliceComponent,
-	getSliceZoneComponents,
+	defineSliceZoneComponents,
 	SliceZoneImpl,
 	SliceZone,
 } from "./components";
@@ -36,6 +36,7 @@ export type {
 	SliceComponentType,
 	SliceLike,
 	SliceZoneComponents,
+	SliceZoneResolver,
 	SliceZoneLike,
 	SliceZoneProps,
 } from "./components";

package/src/types.ts

@@ -25,6 +25,7 @@ import type { RouterLink } from "vue-router";
 
 import type {
 	SliceComponentProps,
+	SliceComponentType,
 	TODOSliceComponent,
 } from "./components/SliceZone";
 
@@ -90,7 +91,7 @@ type PrismicPluginComponentsOptions = {
 	 * Components will be rendered using the {@link SliceComponentProps} interface.
 	 * @defaultValue `null` when `process.env.NODE_ENV === "production"` else {@link TODOSliceComponent}
 	 */
-	sliceZoneDefaultComponent?: string | ConcreteComponent;
+	sliceZoneDefaultComponent?: SliceComponentType;
 };
 
 /**