@prismicio/vue 3.0.0-beta.5 → 3.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/vue",
-	"version": "3.0.0-beta.5",
+	"version": "3.0.0-beta.8",
 	"description": "Vue plugin, components, and composables to fetch and present Prismic content",
 	"keywords": [
 		"typescript",
@@ -45,52 +45,50 @@
 		"release:dry": "standard-version --dry-run",
 		"size": "size-limit",
 		"test": "npm run lint && npm run unit && npm run build && npm run size",
-		"unit": "nyc --reporter=lcovonly --reporter=text --exclude-after-remap=false ava"
+		"unit": "vitest run --coverage",
+		"unit:watch": "vitest watch"
 	},
 	"dependencies": {
-		"@prismicio/client": "^6.3.0",
-		"@prismicio/helpers": "^2.2.0",
-		"@prismicio/types": "^0.1.26",
+		"@prismicio/client": "^6.5.1",
+		"@prismicio/helpers": "^2.3.1",
+		"@prismicio/types": "^0.1.28",
 		"isomorphic-unfetch": "^3.1.0",
-		"vue-router": "^4.0.13"
+		"vue-router": "^4.0.15"
 	},
 	"devDependencies": {
-		"@prismicio/mock": "^0.0.8",
+		"@prismicio/mock": "^0.0.10",
 		"@size-limit/preset-small-lib": "^7.0.8",
-		"@types/escape-html": "^1.0.1",
-		"@types/jsdom-global": "3.0.2",
-		"@types/sinon": "10.0.11",
-		"@typescript-eslint/eslint-plugin": "^5.13.0",
-		"@typescript-eslint/parser": "^5.13.0",
-		"@vitejs/plugin-vue": "^2.2.4",
-		"@vue/compiler-sfc": "^3.2.31",
+		"@types/escape-html": "^1.0.2",
+		"@types/jsdom-global": "^3.0.2",
+		"@typescript-eslint/eslint-plugin": "^5.27.1",
+		"@typescript-eslint/parser": "^5.27.1",
+		"@vitejs/plugin-vue": "^2.3.3",
+		"@vue/compiler-sfc": "^3.2.37",
 		"@vue/eslint-config-typescript": "^10.0.0",
-		"@vue/test-utils": "2.0.0-rc.17",
-		"ava": "^3.15.0",
-		"eslint": "^8.10.0",
-		"eslint-config-prettier": "^8.4.0",
+		"@vue/test-utils": "^2.0.0",
+		"c8": "^7.11.3",
+		"eslint": "^8.17.0",
+		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-prettier": "^4.0.0",
-		"eslint-plugin-tsdoc": "^0.2.14",
-		"eslint-plugin-vue": "^8.5.0",
+		"eslint-plugin-tsdoc": "^0.2.16",
+		"eslint-plugin-vue": "^9.1.0",
 		"jsdom": "^19.0.0",
 		"jsdom-global": "^3.0.2",
-		"nyc": "^15.1.0",
-		"prettier": "^2.5.1",
-		"prettier-plugin-jsdoc": "^0.3.30",
-		"sinon": "^13.0.1",
+		"prettier": "^2.6.2",
+		"prettier-plugin-jsdoc": "^0.3.38",
 		"siroc": "^0.16.0",
 		"size-limit": "^7.0.8",
-		"standard-version": "^9.3.2",
-		"ts-eager": "^2.0.2",
-		"typescript": "^4.6.2",
-		"vite": "^2.8.6",
-		"vue": "^3.2.31"
+		"standard-version": "^9.5.0",
+		"typescript": "^4.7.3",
+		"vite": "^2.9.10",
+		"vitest": "^0.14.1",
+		"vue": "^3.2.37"
 	},
 	"peerDependencies": {
 		"vue": "^3.0.0"
 	},
 	"engines": {
-		"node": ">=12.7.0"
+		"node": ">=14.15.0"
 	},
 	"publishConfig": {
 		"access": "public"

package/src/components/PrismicImage.ts

@@ -19,9 +19,10 @@ import {
 	isFilled,
 } from "@prismicio/helpers";
 
+import { simplyResolveComponent } from "../lib/simplyResolveComponent";
+import { __PRODUCTION__ } from "../lib/__PRODUCTION__";
 import { usePrismic } from "../usePrismic";
 import { VueUseOptions } from "../types";
-import { simplyResolveComponent } from "../lib/simplyResolveComponent";
 
 /**
  * The default component rendered for images.
@@ -59,8 +60,8 @@ export type PrismicImageProps = {
 	 * Adds an additional `srcset` attribute to the image following given widths.
 	 *
 	 * @remarks
-	 * A special value of `"auto"` is accepted to automatically use image widths
-	 * coming from the API.
+	 * A special value of `"thumbnails"` is accepted to automatically use image
+	 * widths coming from the API.
 	 * @remarks
 	 * A special value of `"defaults"` is accepted to automatically use image
 	 * widths coming from the plugin configuration.
@@ -70,7 +71,7 @@ export type PrismicImageProps = {
 	 */
 	widths?:
 		| NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"]
-		| "auto"
+		| "thumbnails"
 		| "defaults";
 
 	/**
@@ -149,30 +150,20 @@ export const usePrismicImage = (
 		const pixelDensities = unref(props.pixelDensities);
 
 		if (widths) {
-			if (pixelDensities) {
+			if (!__PRODUCTION__ && pixelDensities) {
 				console.warn(
-					"[PrismicImage] `widths` and `pixelDensities` props should not be use alongside each others, only `widths` will be applied",
+					"[PrismicImage] Only one of `widths` or `pixelDensities` props can be provided. You can resolve this warning by removing either the `widths` or `pixelDensities` prop. `widths` will be used in this case.",
 					props,
 				);
 			}
 
-			if (widths === "auto") {
-				return asImageWidthSrcSet(field, imgixParams);
-			} else {
-				// Remove potential thumbnails when using manual widths
-				const { url, dimensions, alt, copyright } = field;
-
-				return asImageWidthSrcSet(
-					{ url, dimensions, alt, copyright },
-					{
-						...imgixParams,
-						widths:
-							widths === "defaults"
-								? options.components?.imageWidthSrcSetDefaults
-								: widths,
-					},
-				);
-			}
+			return asImageWidthSrcSet(field, {
+				...imgixParams,
+				widths:
+					widths === "defaults"
+						? options.components?.imageWidthSrcSetDefaults
+						: widths,
+			});
 		} else if (pixelDensities) {
 			return asImagePixelDensitySrcSet(field, {
 				...imgixParams,
@@ -235,7 +226,7 @@ export const PrismicImageImpl = /*#__PURE__*/ defineComponent({
 		widths: {
 			type: [String, Object] as PropType<
 				| NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"]
-				| "auto"
+				| "thumbnails"
 				| "defaults"
 			>,
 			default: undefined,

package/src/components/PrismicRichText.ts

@@ -22,6 +22,7 @@ import {
 	asHTML,
 	HTMLFunctionSerializer,
 	HTMLMapSerializer,
+	isFilled,
 	LinkResolverFunction,
 } from "@prismicio/helpers";
 import { RichTextField } from "@prismicio/types";
@@ -43,7 +44,7 @@ export type PrismicRichTextProps = {
 	/**
 	 * The Prismic rich text or title field to render.
 	 */
-	field: RichTextField;
+	field: RichTextField | null | undefined;
 
 	/**
 	 * A link resolver function used to resolve link when not using the route
@@ -70,6 +71,12 @@ export type PrismicRichTextProps = {
 	 * @defaultValue `"div"`
 	 */
 	wrapper?: string | ConcreteComponent;
+
+	/**
+	 * The HTML value to be rendered when the field is empty. If a fallback is not
+	 * given, `""` (nothing) will be rendered.
+	 */
+	fallback?: string;
 };
 
 /**
@@ -102,11 +109,17 @@ export const usePrismicRichText = (
 	const { options } = usePrismic();
 
 	const html = computed(() => {
+		const field = unref(props.field);
+
+		if (!isFilled.richText(field)) {
+			return unref(props.fallback) ?? "";
+		}
+
 		const linkResolver = unref(props.linkResolver) ?? options.linkResolver;
 		const htmlSerializer =
 			unref(props.htmlSerializer) ?? options.htmlSerializer;
 
-		return asHTML(unref(props.field), linkResolver, htmlSerializer);
+		return asHTML(unref(field), linkResolver, htmlSerializer);
 	});
 
 	return {
@@ -123,8 +136,9 @@ export const PrismicRichTextImpl = /*#__PURE__*/ defineComponent({
 	name: "PrismicRichText",
 	props: {
 		field: {
-			type: Array as unknown as PropType<RichTextField>,
-			required: true,
+			type: Array as unknown as PropType<RichTextField | null | undefined>,
+			default: undefined,
+			required: false,
 		},
 		linkResolver: {
 			type: Function as PropType<LinkResolverFunction>,
@@ -143,19 +157,19 @@ export const PrismicRichTextImpl = /*#__PURE__*/ defineComponent({
 			default: undefined,
 			required: false,
 		},
+		fallback: {
+			type: String as PropType<string>,
+			default: undefined,
+			required: false,
+		},
 	},
 	setup(props) {
-		// Prevent fatal if user didn't check for field, throws `Invalid prop` warn
-		if (!props.field) {
-			return () => null;
-		}
-
 		const { html } = usePrismicRichText(props);
 
 		const root = ref<HTMLElement | Comment | Component | null>(null);
 
 		const maybeRouter = inject(routerKey, null);
-		if (maybeRouter) {
+		if (maybeRouter && html.value) {
 			type InternalLink = {
 				element: HTMLAnchorElement;
 				listener: EventListener;

package/src/components/PrismicText.ts

@@ -12,7 +12,7 @@ import {
 	VNodeProps,
 } from "vue";
 
-import { asText } from "@prismicio/helpers";
+import { asText, isFilled } from "@prismicio/helpers";
 import { RichTextField } from "@prismicio/types";
 
 import { VueUseOptions } from "../types";
@@ -29,7 +29,7 @@ export type PrismicTextProps = {
 	/**
 	 * The Prismic rich text or title field to render.
 	 */
-	field: RichTextField;
+	field: RichTextField | null | undefined;
 
 	/**
 	 * Separator used to join each element.
@@ -44,6 +44,12 @@ export type PrismicTextProps = {
 	 * @defaultValue `"div"`
 	 */
 	wrapper?: string | ConcreteComponent;
+
+	/**
+	 * The string value to be rendered when the field is empty. If a fallback is
+	 * not given, `""` (nothing) will be rendered.
+	 */
+	fallback?: string;
 };
 
 /**
@@ -74,7 +80,13 @@ export const usePrismicText = (
 	props: UsePrismicTextOptions,
 ): UsePrismicTextReturnType => {
 	const text = computed(() => {
-		return asText(unref(props.field), unref(props.separator));
+		const field = unref(props.field);
+
+		if (!isFilled.richText(field)) {
+			return unref(props.fallback) ?? "";
+		}
+
+		return asText(unref(field), unref(props.separator));
 	});
 
 	return {
@@ -91,8 +103,9 @@ export const PrismicTextImpl = /*#__PURE__*/ defineComponent({
 	name: "PrismicText",
 	props: {
 		field: {
-			type: Array as unknown as PropType<RichTextField>,
-			required: true,
+			type: Array as unknown as PropType<RichTextField | null | undefined>,
+			default: undefined,
+			required: false,
 		},
 		separator: {
 			type: String as PropType<string>,
@@ -104,13 +117,13 @@ export const PrismicTextImpl = /*#__PURE__*/ defineComponent({
 			default: undefined,
 			required: false,
 		},
+		fallback: {
+			type: String as PropType<string>,
+			default: undefined,
+			required: false,
+		},
 	},
 	setup(props) {
-		// Prevent fatal if user didn't check for field, throws `Invalid prop` warn
-		if (!props.field) {
-			return () => null;
-		}
-
 		const { text } = usePrismicText(props);
 
 		return () => {

package/src/components/SliceZone.ts

@@ -19,6 +19,40 @@ import { simplyResolveComponent } from "../lib/simplyResolveComponent";
 import { __PRODUCTION__ } from "../lib/__PRODUCTION__";
 import { usePrismic } from "../usePrismic";
 
+/**
+ * Returns the type of a `SliceLike` type.
+ *
+ * @typeParam TSlice - The Slice from which the type will be extracted.
+ */
+type ExtractSliceType<TSlice extends SliceLike> = TSlice extends SliceLikeRestV2
+	? TSlice["slice_type"]
+	: TSlice extends SliceLikeGraphQL
+	? TSlice["type"]
+	: never;
+
+/**
+ * The minimum required properties to represent a Prismic Slice from the Prismic
+ * Rest API V2 for the `<SliceZone>` component.
+ *
+ * If using Prismic's Rest API V2, use the `Slice` export from
+ * `@prismicio/types` for a full interface.
+ *
+ * @typeParam TSliceType - Type name of the Slice.
+ */
+export type SliceLikeRestV2<TSliceType extends string = string> = {
+	slice_type: Slice<TSliceType>["slice_type"];
+};
+
+/**
+ * The minimum required properties to represent a Prismic Slice from the Prismic
+ * GraphQL API for the `<SliceZone>` component.
+ *
+ * @typeParam TSliceType - Type name of the Slice.
+ */
+export type SliceLikeGraphQL<TSliceType extends string = string> = {
+	type: Slice<TSliceType>["slice_type"];
+};
+
 /**
  * The minimum required properties to represent a Prismic Slice for the
  * `<SliceZone />` component.
@@ -28,10 +62,9 @@ import { usePrismic } from "../usePrismic";
  *
  * @typeParam TSliceType - Type name of the Slice
  */
-export type SliceLike<TSliceType extends string = string> = Pick<
-	Slice<TSliceType>,
-	"slice_type"
->;
+export type SliceLike<TSliceType extends string = string> =
+	| SliceLikeRestV2<TSliceType>
+	| SliceLikeGraphQL<TSliceType>;
 
 /**
  * A looser version of the `SliceZone` type from `@prismicio/types` using `SliceLike`.
@@ -41,7 +74,8 @@ export type SliceLike<TSliceType extends string = string> = Pick<
  *
  * @typeParam TSlice - The type(s) of slices in the Slice Zone
  */
-export type SliceZoneLike<TSlice extends SliceLike> = readonly TSlice[];
+export type SliceZoneLike<TSlice extends SliceLike = SliceLike> =
+	readonly TSlice[];
 
 /**
  * Vue props for a component rendering content from a Prismic Slice using the
@@ -52,7 +86,8 @@ export type SliceZoneLike<TSlice extends SliceLike> = readonly TSlice[];
  *   available to all Slice components
  */
 export type SliceComponentProps<
-	TSlice extends SliceLike = SliceLike,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	TSlice extends SliceLike = any,
 	TContext = unknown,
 > = {
 	/**
@@ -89,7 +124,8 @@ export type SliceComponentProps<
  *   available to all Slice components
  */
 export type DefineComponentSliceComponentProps<
-	TSlice extends SliceLike = SliceLike,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	TSlice extends SliceLike = any,
 	TContext = unknown,
 > = {
 	slice: {
@@ -178,7 +214,8 @@ export const getSliceComponentProps = <
  * @typeParam TContext - Arbitrary data made available to all Slice components
  */
 export type SliceComponentType<
-	TSlice extends SliceLike = SliceLike,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	TSlice extends SliceLike = any,
 	TContext = unknown,
 > =
 	| DefineComponent<SliceComponentProps<TSlice, TContext>>
@@ -196,9 +233,15 @@ export const TODOSliceComponent = __PRODUCTION__
 			name: "TODOSliceComponent",
 			props: getSliceComponentProps(),
 			setup(props) {
+				const type = computed(() =>
+					"slice_type" in props.slice
+						? props.slice.slice_type
+						: props.slice.type,
+				);
+
 				watchEffect(() => {
 					console.warn(
-						`[SliceZone] Could not find a component for Slice type "${props.slice.slice_type}"`,
+						`[SliceZone] Could not find a component for Slice type "${type.value}"`,
 						props.slice,
 					);
 				});
@@ -208,11 +251,9 @@ export const TODOSliceComponent = __PRODUCTION__
 						"section",
 						{
 							"data-slice-zone-todo-component": "",
-							"data-slice-type": props.slice.slice_type,
+							"data-slice-type": type.value,
 						},
-						[
-							`Could not find a component for Slice type "${props.slice.slice_type}"`,
-						],
+						[`Could not find a component for Slice type "${type.value}"`],
 					);
 				};
 			},
@@ -239,7 +280,7 @@ export type SliceZoneComponents<
 	// signals to future developers that it is a placeholder and should be
 	// implemented.
 	{
-		[SliceType in keyof Record<TSlice["slice_type"], never>]:
+		[SliceType in ExtractSliceType<TSlice>]:
 			| SliceComponentType<Extract<TSlice, SliceLike<SliceType>>, TContext>
 			| string;
 	};
@@ -277,7 +318,8 @@ export type SliceZoneComponents<
  * @returns A new optimized record of {@link SliceZoneComponents}
  */
 export const defineSliceZoneComponents = <
-	TSlice extends SliceLike = SliceLike,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	TSlice extends SliceLike = any,
 	TContext = unknown,
 >(
 	components: SliceZoneComponents<TSlice, TContext>,
@@ -313,7 +355,7 @@ export type SliceZoneResolverArgs<TSlice extends SliceLike = SliceLike> = {
 	/**
 	 * The name of the Slice.
 	 */
-	sliceName: TSlice["slice_type"];
+	sliceName: ExtractSliceType<TSlice>;
 
 	/**
 	 * The index of the Slice in the Slice Zone.
@@ -333,26 +375,24 @@ export type SliceZoneResolverArgs<TSlice extends SliceLike = SliceLike> = {
  * @returns The Vue component to render for a Slice.
  */
 export type SliceZoneResolver<
-	TSlice extends SliceLike = SliceLike,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	TSlice extends SliceLike = any,
 	TContext = unknown,
 > = (
 	args: SliceZoneResolverArgs<TSlice>,
-) => SliceComponentType<TSlice, TContext> | string | undefined | null;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) => SliceComponentType<any, TContext> | string | undefined | null;
 
 /**
  * Props for `<SliceZone />`.
  *
- * @typeParam TSlice - The type(s) of slices in the Slice Zone
  * @typeParam TContext - Arbitrary data made available to all Slice components
  */
-export type SliceZoneProps<
-	TSlice extends SliceLike = SliceLike,
-	TContext = unknown,
-> = {
+export type SliceZoneProps<TContext = unknown> = {
 	/**
 	 * List of Slice data from the Slice Zone.
 	 */
-	slices: SliceZoneLike<TSlice>;
+	slices: SliceZoneLike;
 
 	/**
 	 * A record mapping Slice types to Vue components.
@@ -369,7 +409,8 @@ export type SliceZoneProps<
 	 *
 	 * @returns The Vue component to render for a Slice.
 	 */
-	resolver?: SliceZoneResolver<TSlice, TContext>;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	resolver?: SliceZoneResolver<any, TContext>;
 
 	/**
 	 * Arbitrary data made available to all Slice components.
@@ -385,7 +426,8 @@ export type SliceZoneProps<
 	 *
 	 * @defaultValue The Slice Zone default component provided to `@prismicio/vue` plugin if configured, otherwise `null` when `process.env.NODE_ENV === "production"` else {@link TODOSliceComponent}.
 	 */
-	defaultComponent?: SliceComponentType<TSlice, TContext>;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	defaultComponent?: SliceComponentType<any, TContext>;
 
 	/**
 	 * An HTML tag name, a component, or a functional component used to wrap the
@@ -403,7 +445,7 @@ export const SliceZoneImpl = /*#__PURE__*/ defineComponent({
 	name: "SliceZone",
 	props: {
 		slices: {
-			type: Array as PropType<SliceZoneLike<SliceLike>>,
+			type: Array as PropType<SliceZoneLike>,
 			required: true,
 		},
 		components: {
@@ -442,9 +484,11 @@ export const SliceZoneImpl = /*#__PURE__*/ defineComponent({
 
 		const renderedSlices = computed(() => {
 			return props.slices.map((slice, index) => {
+				const type = "slice_type" in slice ? slice.slice_type : slice.type;
+
 				let component =
-					props.components && slice.slice_type in props.components
-						? props.components[slice.slice_type]
+					props.components && type in props.components
+						? props.components[type]
 						: props.defaultComponent ||
 						  options.components?.sliceZoneDefaultComponent ||
 						  TODOSliceComponent;
@@ -453,7 +497,7 @@ export const SliceZoneImpl = /*#__PURE__*/ defineComponent({
 				if (props.resolver) {
 					const resolvedComponent = props.resolver({
 						slice,
-						sliceName: slice.slice_type,
+						sliceName: type,
 						i: index,
 					});
 
@@ -463,7 +507,7 @@ export const SliceZoneImpl = /*#__PURE__*/ defineComponent({
 				}
 
 				const p = {
-					key: `${slice.slice_type}-${index}`,
+					key: `${index}-${JSON.stringify(slice)}`,
 					slice,
 					index,
 					context: props.context,

package/src/components/index.ts

@@ -35,6 +35,8 @@ export type {
 	DefineComponentSliceComponentProps,
 	SliceComponentProps,
 	SliceComponentType,
+	SliceLikeRestV2,
+	SliceLikeGraphQL,
 	SliceLike,
 	SliceZoneComponents,
 	SliceZoneResolverArgs,

package/src/index.ts

@@ -35,6 +35,8 @@ export type {
 	DefineComponentSliceComponentProps,
 	SliceComponentProps,
 	SliceComponentType,
+	SliceLikeRestV2,
+	SliceLikeGraphQL,
 	SliceLike,
 	SliceZoneComponents,
 	SliceZoneResolver,

package/vetur/attributes.json

@@ -74,6 +74,10 @@
 		"type": "string | object | function",
 		"description": "An HTML tag name, a component, or a functional component used to wrap the output. Defaults to `\"div\"`."
 	},
+	"prismic-rich-text/fallback": {
+		"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",
@@ -87,6 +91,10 @@
 		"type": "string | object | function",
 		"description": "An HTML tag name, a component, or a functional component used to wrap the output. Defaults to `\"div\"`."
 	},
+	"prismic-text/fallback": {
+		"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",

package/vetur/tags.json

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