@prismicio/vue 3.2.1 → 4.0.0

package/src/createPrismic.ts

@@ -1,20 +1,20 @@
 import {
 	Client,
 	FetchLike,
-	cookie,
-	createClient,
-	predicate,
-} from "@prismicio/client";
-import {
+	LinkResolverFunction,
 	asDate,
 	asHTML,
 	asImagePixelDensitySrcSet,
 	asImageSrc,
 	asImageWidthSrcSet,
 	asLink,
+	asLinkAttrs,
 	asText,
+	cookie,
+	createClient,
 	documentToLinkField,
-} from "@prismicio/helpers";
+	filter,
+} from "@prismicio/client";
 import { App } from "vue";
 
 import type {
@@ -67,22 +67,54 @@ export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
 
 	const prismicClient: PrismicPluginClient = {
 		client,
-		predicate,
+		filter,
 		cookie,
 	};
 
 	// Create plugin helpers
 	const prismicHelpers: PrismicPluginHelpers = {
 		asText,
-		asHTML: (richTextField, linkResolver, htmlSerializer) => {
+		asHTML: (richTextField, ...config) => {
+			const [configOrLinkResolver, maybeHTMLSerializer] = config;
+
 			return asHTML(
 				richTextField,
-				linkResolver || options.linkResolver,
-				htmlSerializer || options.richTextSerializer || options.htmlSerializer,
+				typeof configOrLinkResolver === "function" ||
+					configOrLinkResolver == null
+					? {
+							linkResolver: configOrLinkResolver || options.linkResolver,
+							serializer:
+								maybeHTMLSerializer ||
+								options.richTextSerializer ||
+								options.htmlSerializer,
+					  }
+					: {
+							linkResolver: options.linkResolver,
+							serializer: options.richTextSerializer || options.htmlSerializer,
+							...config,
+					  },
+			);
+		},
+		asLink: (linkField, config) => {
+			return asLink(
+				linkField,
+				typeof config === "function"
+					? { linkResolver: config }
+					: {
+							linkResolver: options.linkResolver,
+							// TODO: For some reasons, TypeScript narrows the type to "unknown" where it's supposed to be a union
+							// eslint-disable-next-line @typescript-eslint/no-explicit-any
+							...(config as any),
+					  },
 			);
 		},
-		asLink: (linkField, linkResolver) => {
-			return asLink(linkField, linkResolver || options.linkResolver);
+		asLinkAttrs: (linkField, config) => {
+			return asLinkAttrs(linkField, {
+				// TODO: We can't really retrieve the generic type here, this might cause some unexpected type error in some edge-case scenario
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				linkResolver: options.linkResolver as LinkResolverFunction<any>,
+				...config,
+			});
 		},
 		asDate,
 		asImageSrc,

package/src/types.ts

@@ -1,12 +1,8 @@
 import type {
 	ClientConfig,
 	CreateClient,
-	cookie,
-	predicate,
-} from "@prismicio/client";
-import type {
-	HTMLFunctionSerializer,
-	HTMLMapSerializer,
+	HTMLRichTextFunctionSerializer,
+	HTMLRichTextMapSerializer,
 	LinkResolverFunction,
 	asDate,
 	asHTML,
@@ -14,9 +10,12 @@ import type {
 	asImageSrc,
 	asImageWidthSrcSet,
 	asLink,
+	asLinkAttrs,
 	asText,
+	cookie,
 	documentToLinkField,
-} from "@prismicio/helpers";
+	filter,
+} from "@prismicio/client";
 import type { App, ConcreteComponent, DefineComponent, Raw, Ref } from "vue";
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -92,7 +91,7 @@ type PrismicPluginComponentsOptions = {
 	 * 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
+	 * @defaultValue `@prismicio/client` defaults
 	 */
 	imageWidthSrcSetDefaults?: number[];
 
@@ -100,7 +99,7 @@ type PrismicPluginComponentsOptions = {
 	 * Default pixel densities to use when rendering an image with
 	 * `pixel-densities="defaults"`
 	 *
-	 * @defaultValue `@prismicio/helpers` defaults
+	 * @defaultValue `@prismicio/client` defaults
 	 */
 	imagePixelDensitySrcSetDefaults?: number[];
 
@@ -135,7 +134,9 @@ type PrismicPluginOptionsBase = {
 	 *
 	 * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}
 	 */
-	richTextSerializer?: HTMLFunctionSerializer | HTMLMapSerializer;
+	richTextSerializer?:
+		| HTMLRichTextFunctionSerializer
+		| HTMLRichTextMapSerializer;
 
 	/**
 	 * An optional HTML serializer to customize the way rich text fields are
@@ -146,7 +147,7 @@ type PrismicPluginOptionsBase = {
 	 * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}
 	 */
 	// TODO: Remove in v5
-	htmlSerializer?: HTMLFunctionSerializer | HTMLMapSerializer;
+	htmlSerializer?: HTMLRichTextFunctionSerializer | HTMLRichTextMapSerializer;
 
 	/**
 	 * Whether or not to inject components globally.
@@ -287,9 +288,9 @@ export type PrismicPluginClient = {
 	client: ReturnType<CreateClient>;
 
 	/**
-	 * Query predicates from `@prismicio/client`.
+	 * Query filters from `@prismicio/client`.
 	 */
-	predicate: typeof predicate;
+	filter: typeof filter;
 
 	/**
 	 * Prismic cookies from `@prismicio/client`.
@@ -298,13 +299,13 @@ export type PrismicPluginClient = {
 };
 
 /**
- * `@prismicio/helpers` related methods exposed by `@prismicio/vue` plugin and
+ * `@prismicio/client` related methods exposed by `@prismicio/vue` plugin and
  * accessible through `this.$prismic` and `usePrismic()`.
  */
 export type PrismicPluginHelpers = {
 	/**
 	 * Serializes a rich text or title field to a plain text string. This is
-	 * `@prismicio/helpers` {@link asText} function.
+	 * `@prismicio/client` {@link asText} function.
 	 *
 	 * @see Templating rich text and title fields {@link https://prismic.io/docs/technologies/vue-template-content#rich-text-and-titles}
 	 */
@@ -312,7 +313,7 @@ export type PrismicPluginHelpers = {
 
 	/**
 	 * Serializes a rich text or title field to an HTML string. This is
-	 * `@prismicio/helpers` {@link asHTML} function.
+	 * `@prismicio/client` {@link asHTML} function.
 	 *
 	 * @remarks
 	 * If no `linkResolver` is provided the function will use the one provided to
@@ -326,34 +327,42 @@ export type PrismicPluginHelpers = {
 
 	/**
 	 * Resolves any type of link field or document to a URL. This is
-	 * `@prismicio/helpers` {@link asLink} function.
+	 * `@prismicio/client` {@link asLink} function.
+	 *
+	 * @remarks
+	 * If no `linkResolver` is provided the function will use the one provided to
+	 * the plugin at {@link PrismicPluginOptions.linkResolver} if available.
+	 * @see Templating link fields {@link https://prismic.io/docs/technologies/vue-template-content#links-and-content-relationships}
+	 */
+	asLink: typeof asLink;
+
+	/**
+	 * Resolves any type of link field or document to a set of link attributes.
+	 * This is `@prismicio/client` {@link asLinkAttrs} function.
 	 *
 	 * @remarks
 	 * If no `linkResolver` is provided the function will use the one provided to
 	 * the plugin at {@link PrismicPluginOptions.linkResolver} if available.
 	 * @see Templating link fields {@link https://prismic.io/docs/technologies/vue-template-content#links-and-content-relationships}
 	 */
-	asLink: (
-		linkField: Parameters<typeof asLink>[0],
-		linkResolver?: LinkResolverFunction,
-	) => string | null;
+	asLinkAttrs: typeof asLinkAttrs;
 
 	/**
 	 * Transforms a date or timestamp field into a JavaScript Date object. This is
-	 * `@prismicio/helpers` {@link asDate} function.
+	 * `@prismicio/client` {@link asDate} function.
 	 */
 	asDate: typeof asDate;
 
 	/**
 	 * Returns the URL of an Image field with optional image transformations (via
-	 * Imgix URL parameters). This is `@prismicio/helpers` {@link asImageSrc}
+	 * Imgix URL parameters). This is `@prismicio/client` {@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`
+	 * transformations (via Imgix URL parameters). This is `@prismicio/client`
 	 * {@link asImageWidthSrcSet} function.
 	 */
 	asImageWidthSrcSet: typeof asImageWidthSrcSet;
@@ -361,12 +370,12 @@ export type PrismicPluginHelpers = {
 	/**
 	 * 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.
+	 * `@prismicio/client` {@link asImagePixelDensitySrcSet} function.
 	 */
 	asImagePixelDensitySrcSet: typeof asImagePixelDensitySrcSet;
 
 	/**
-	 * Converts a document into a link field. This is `@prismicio/helpers`
+	 * Converts a document into a link field. This is `@prismicio/client`
 	 * {@link documentToLinkField} function.
 	 *
 	 * @internal