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

package/src/components/PrismicImage.ts

@@ -63,7 +63,7 @@ export type PrismicImageProps = {
 	 * coming from the API.
 	 * @remarks
 	 * A special value of `"defaults"` is accepted to automatically use image
-	 * widths coming from `@prismicio/helpers`
+	 * widths coming from the plugin configuration.
 	 * @remarks
 	 * This prop is not compatible with the `pixelDensities` prop. When both are
 	 * used the `pixelDensities` prop will be ignored.
@@ -78,7 +78,7 @@ export type PrismicImageProps = {
 	 *
 	 * @remarks
 	 * A special value of `"defaults"` is accepted to automatically use image
-	 * pixel densities coming from `@prismicio/helpers`
+	 * pixel densities coming from the plugin configuration.
 	 * @remarks
 	 * This prop is not compatible with the `widths` prop. When both are used, the
 	 * `pixelDensities` prop will be ignored.
@@ -114,7 +114,7 @@ export type UsePrismicImageReturnType = {
 	/**
 	 * Resolved image `alt` value.
 	 */
-	alt: ComputedRef<string | null>;
+	alt: ComputedRef<string>;
 
 	/**
 	 * Resolved image `copyright` value.
@@ -132,6 +132,8 @@ export type UsePrismicImageReturnType = {
 export const usePrismicImage = (
 	props: UsePrismicImageOptions,
 ): UsePrismicImageReturnType => {
+	const { options } = usePrismic();
+
 	const asImage = computed(() => {
 		const field = unref(props.field);
 
@@ -164,7 +166,10 @@ export const usePrismicImage = (
 					{ url, dimensions, alt, copyright },
 					{
 						...imgixParams,
-						widths: widths === "defaults" ? undefined : widths,
+						widths:
+							widths === "defaults"
+								? options.components?.imageWidthSrcSetDefaults
+								: widths,
 					},
 				);
 			}
@@ -172,7 +177,9 @@ export const usePrismicImage = (
 			return asImagePixelDensitySrcSet(field, {
 				...imgixParams,
 				pixelDensities:
-					pixelDensities === "defaults" ? undefined : pixelDensities,
+					pixelDensities === "defaults"
+						? options.components?.imagePixelDensitySrcSetDefaults
+						: pixelDensities,
 			});
 		} else {
 			return {
@@ -189,7 +196,7 @@ export const usePrismicImage = (
 		return asImage.value.srcset;
 	});
 	const alt = computed(() => {
-		return unref(props.field).alt || null;
+		return unref(props.field).alt || "";
 	});
 	const copyright = computed(() => {
 		return unref(props.field).copyright || null;

package/src/components/PrismicRichText.ts

@@ -106,8 +106,7 @@ export const usePrismicRichText = (
 		const htmlSerializer =
 			unref(props.htmlSerializer) ?? options.htmlSerializer;
 
-		// TODO: Update after https://github.com/prismicio/prismic-helpers/pull/43
-		return asHTML(unref(props.field), linkResolver, htmlSerializer) || "";
+		return asHTML(unref(props.field), linkResolver, htmlSerializer);
 	});
 
 	return {

package/src/components/PrismicText.ts

@@ -74,8 +74,7 @@ export const usePrismicText = (
 	props: UsePrismicTextOptions,
 ): UsePrismicTextReturnType => {
 	const text = computed(() => {
-		// TODO: Update after https://github.com/prismicio/prismic-helpers/pull/43
-		return asText(unref(props.field), unref(props.separator)) || "";
+		return asText(unref(props.field), unref(props.separator));
 	});
 
 	return {

package/src/components/SliceZone.ts

@@ -193,7 +193,7 @@ export type SliceComponentType<
 export const TODOSliceComponent = __PRODUCTION__
 	? ((() => null) as FunctionalComponent<SliceComponentProps>)
 	: /*#__PURE__*/ (defineComponent({
-			name: "TODOSliceCOmponent",
+			name: "TODOSliceComponent",
 			props: getSliceComponentProps(),
 			setup(props) {
 				watchEffect(() => {

package/src/createPrismic.ts

@@ -2,7 +2,6 @@ import { App } from "vue";
 
 import {
 	createClient,
-	getEndpoint,
 	predicate,
 	cookie,
 	Client,
@@ -51,34 +50,19 @@ export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
 	if (options.client) {
 		client = options.client;
 	} else {
-		const endpoint =
-			/**
-			 * @see Regex101 expression: {@link https://regex101.com/r/GT2cl7/1}
-			 */
-			/^(https?:)?\/\//gim.test(options.endpoint)
-				? options.endpoint
-				: getEndpoint(options.endpoint);
+		client = createClient(options.endpoint, {
+			fetch: async (endpoint, options) => {
+				let fetchFunction: FetchLike;
+				if (typeof globalThis.fetch === "function") {
+					fetchFunction = globalThis.fetch;
+				} else {
+					fetchFunction = (await import("isomorphic-unfetch")).default;
+				}
 
-		if (
-			options.clientConfig &&
-			typeof options.clientConfig.fetch === "function"
-		) {
-			client = createClient(endpoint, options.clientConfig);
-		} else {
-			client = createClient(endpoint, {
-				...options.clientConfig,
-				fetch: async (endpoint, options) => {
-					let fetchFunction: FetchLike;
-					if (typeof globalThis.fetch === "function") {
-						fetchFunction = globalThis.fetch;
-					} else {
-						fetchFunction = (await import("isomorphic-unfetch")).default;
-					}
-
-					return await fetchFunction(endpoint, options);
-				},
-			});
-		}
+				return await fetchFunction(endpoint, options);
+			},
+			...options.clientConfig,
+		});
 	}
 
 	const prismicClient: PrismicPluginClient = {

package/src/index.ts

@@ -17,7 +17,6 @@ export {
 	getSliceComponentProps,
 	TODOSliceComponent,
 	defineSliceZoneComponents,
-	SliceZoneImpl,
 	SliceZone,
 } from "./components";
 export type {

package/src/types.ts

@@ -86,6 +86,25 @@ type PrismicPluginComponentsOptions = {
 	 */
 	imageComponent?: string | ConcreteComponent;
 
+	/**
+	 * Default widths to use when rendering an image with `widths="defaults"`
+	 *
+	 * @remarks
+	 * Consider configuring image widths within your content type definition and
+	 * using `widths="auto"` instead to give content writers the ability to crop
+	 * images in the editor.
+	 * @defaultValue `@prismicio/helpers` defaults
+	 */
+	imageWidthSrcSetDefaults?: number[];
+
+	/**
+	 * Default pixel densities to use when rendering an image with
+	 * `pixel-densities="defaults"`
+	 *
+	 * @defaultValue `@prismicio/helpers` defaults
+	 */
+	imagePixelDensitySrcSetDefaults?: number[];
+
 	/**
 	 * A component or a functional component rendered if a component mapping from
 	 * the `components` prop cannot be found.