@prismicio/vue 3.0.0-beta.1 → 3.0.0-beta.4

package/src/createPrismic.ts

@@ -2,17 +2,19 @@ import { App } from "vue";
 
 import {
 	createClient,
-	getEndpoint,
 	predicate,
 	cookie,
 	Client,
 	FetchLike,
 } from "@prismicio/client";
 import {
-	asDate,
+	asText,
 	asHTML,
 	asLink,
-	asText,
+	asDate,
+	asImageSrc,
+	asImageWidthSrcSet,
+	asImagePixelDensitySrcSet,
 	documentToLinkField,
 } from "@prismicio/helpers";
 
@@ -38,6 +40,7 @@ import type {
  * @param options - {@link PrismicPluginOptions}
  *
  * @returns `@prismicio/vue` plugin instance {@link PrismicPlugin}
+ *
  * @see Prismic Official Vue.js documentation: {@link https://prismic.io/docs/technologies/vuejs}
  * @see Plugin repository: {@link https://github.com/prismicio/prismic-vue}
  */
@@ -47,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);
-
-		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;
-					}
+		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;
+				}
 
-					return await fetchFunction(endpoint, options);
-				},
-			});
-		}
+				return await fetchFunction(endpoint, options);
+			},
+			...options.clientConfig,
+		});
 	}
 
 	const prismicClient: PrismicPluginClient = {
@@ -97,7 +85,9 @@ export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
 			return asLink(linkField, linkResolver || options.linkResolver);
 		},
 		asDate,
-
+		asImageSrc,
+		asImageWidthSrcSet,
+		asImagePixelDensitySrcSet,
 		documentToLinkField,
 	};
 

package/src/index.ts

@@ -3,6 +3,7 @@ export { usePrismic } from "./usePrismic";
 
 export {
 	// Composables
+	usePrismicImage,
 	usePrismicLink,
 	usePrismicText,
 	usePrismicRichText,
@@ -16,11 +17,11 @@ export {
 	getSliceComponentProps,
 	TODOSliceComponent,
 	defineSliceZoneComponents,
-	SliceZoneImpl,
 	SliceZone,
 } from "./components";
 export type {
 	// Composables
+	UsePrismicImageOptions,
 	UsePrismicLinkOptions,
 	UsePrismicTextOptions,
 	UsePrismicRichTextOptions,

package/src/lib/getSlots.ts

@@ -9,6 +9,7 @@ import { ConcreteComponent, Slots, VNode } from "vue";
  * @param defaultParams - The parameters to provide to the default slot
  *
  * @returns The appropriate slots object/array
+ *
  * @internal
  */
 export const getSlots = (

package/src/lib/simplyResolveComponent.ts

@@ -7,6 +7,7 @@ import { ConcreteComponent, resolveDynamicComponent, VNode } from "vue";
  * @param component - An HTML tag name, a component, or a functional component
  *
  * @returns Resolved component as a {@link VNode} or provided `string`.
+ *
  * @internal
  */
 export const simplyResolveComponent = (

package/src/types.ts

@@ -15,6 +15,9 @@ import type {
 	HTMLFunctionSerializer,
 	HTMLMapSerializer,
 	LinkResolverFunction,
+	asImageSrc,
+	asImageWidthSrcSet,
+	asImagePixelDensitySrcSet,
 } from "@prismicio/helpers";
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -83,12 +86,32 @@ 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.
 	 *
 	 * @remarks
 	 * Components will be rendered using the {@link SliceComponentProps} interface.
+	 *
 	 * @defaultValue `null` when `process.env.NODE_ENV === "production"` else {@link TODOSliceComponent}
 	 */
 	sliceZoneDefaultComponent?: SliceComponentType;
@@ -308,6 +331,26 @@ export type PrismicPluginHelpers = {
 	 */
 	asDate: typeof asDate;
 
+	/**
+	 * Returns the URL of an Image field with optional image transformations (via
+	 * Imgix URL parameters). This is `@prismicio/helpers` {@link asImageSrc} function.
+	 */
+	asImageSrc: typeof asImageSrc;
+
+	/**
+	 * Creates a width-based `srcset` from an Image field with optional image
+	 * transformations (via Imgix URL parameters). This is `@prismicio/helpers`
+	 * {@link asImageWidthSrcSet} function.
+	 */
+	asImageWidthSrcSet: typeof asImageWidthSrcSet;
+
+	/**
+	 * Creates a pixel-density-based `srcset` from an Image field with optional
+	 * image transformations (via Imgix URL parameters). This is
+	 * `@prismicio/helpers` {@link asImagePixelDensitySrcSet} function.
+	 */
+	asImagePixelDensitySrcSet: typeof asImagePixelDensitySrcSet;
+
 	/**
 	 * Converts a document into a link field. This is `@prismicio/helpers`
 	 * {@link documentToLinkField} function.

package/src/useStatefulPrismicClientMethod.ts

@@ -91,10 +91,12 @@ const isParams = (
  * @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 const useStatefulPrismicClientMethod = <

package/vetur/attributes.json

@@ -16,9 +16,17 @@
 		"type": "string | object | function",
 		"description": "An HTML tag name, a component, or a functional component used to render images. Defaults to the one provided to `@prismicio/vue` plugin if configured, `\"img\"` otherwise."
 	},
-	"prismic-image/image-component-additional-props": {
+	"prismic-image/imgix-params": {
 		"type": "object",
-		"description": "A map of additional props to pass to the component used to render images when using one."
+		"description": "An object of Imgix URL API parameters."
+	},
+	"prismic-image/widths": {
+		"type": "array | string",
+		"description": "Adds an additional `srcset` attribute to the image following given widths."
+	},
+	"prismic-image/pixel-densities": {
+		"type": "array | string",
+		"description": "Adds an additional `srcset` attribute to the image following giving pixel densities."
 	},
 
 	"prismic-link/field": {

package/vetur/tags.json

@@ -7,7 +7,9 @@
 		"attributes": [
 			"field",
 			"image-component",
-			"image-component-additional-props"
+			"imgix-params",
+			"widths",
+			"pixel-densities"
 		],
 		"description": "Component to render a Prismic image field."
 	},