@prismicio/vue 3.2.0 → 4.0.0

package/src/types.ts

@@ -1,29 +1,25 @@
-import type { App, ConcreteComponent, DefineComponent, Raw, Ref } from "vue";
-
 import type {
-	Client,
 	ClientConfig,
-	cookie,
-	predicate,
-} from "@prismicio/client";
-import type {
-	asText,
-	asHTML,
-	asLink,
-	asDate,
-	documentToLinkField,
-	HTMLFunctionSerializer,
-	HTMLMapSerializer,
+	CreateClient,
+	HTMLRichTextFunctionSerializer,
+	HTMLRichTextMapSerializer,
 	LinkResolverFunction,
+	asDate,
+	asHTML,
+	asImagePixelDensitySrcSet,
 	asImageSrc,
 	asImageWidthSrcSet,
-	asImagePixelDensitySrcSet,
-} from "@prismicio/helpers";
+	asLink,
+	asLinkAttrs,
+	asText,
+	cookie,
+	documentToLinkField,
+	filter,
+} from "@prismicio/client";
+import type { App, ConcreteComponent, DefineComponent, Raw, Ref } from "vue";
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
-
 // Imports for @link references:
-
 import type { RouterLink } from "vue-router";
 
 import type {
@@ -95,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[];
 
@@ -103,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[];
 
@@ -138,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
@@ -149,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.
@@ -182,7 +180,7 @@ type PrismicPluginOptionsWithClient = PrismicPluginOptionsBase & {
 	 * `usePrismic().client`.
 	 * @see Prismic client documentation {@link https://prismic.io/docs/technologies/javascript}
 	 */
-	client: Client;
+	client: ReturnType<CreateClient>;
 
 	/**
 	 * Ensures type union is a strict or.
@@ -287,12 +285,12 @@ export type PrismicPluginClient = {
 	/**
 	 * A `@prismicio/client` instance.
 	 */
-	client: Client;
+	client: ReturnType<CreateClient>;
 
 	/**
-	 * Query predicates from `@prismicio/client`.
+	 * Query filters from `@prismicio/client`.
 	 */
-	predicate: typeof predicate;
+	filter: typeof filter;
 
 	/**
 	 * Prismic cookies from `@prismicio/client`.
@@ -301,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}
 	 */
@@ -315,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
@@ -329,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;
@@ -364,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

package/src/usePrismic.ts

@@ -1,8 +1,9 @@
 import { inject } from "vue";
 
-import { prismicKey } from "./injectionSymbols";
 import { PrismicPlugin } from "./types";
 
+import { prismicKey } from "./injectionSymbols";
+
 /**
  * Accesses `@prismicio/vue` plugin interface.
  *

package/src/useStatefulPrismicClientMethod.ts

@@ -1,15 +1,15 @@
-import { isRef, ref, Ref, shallowRef, unref, watch } from "vue";
-
 import {
 	Client,
 	ForbiddenError,
 	ParsingError,
 	PrismicError,
 } from "@prismicio/client";
+import { Ref, isRef, ref, shallowRef, unref, watch } from "vue";
 
-import { usePrismic } from "./usePrismic";
 import { PrismicClientComposableState, VueUseParameters } from "./types";
 
+import { usePrismic } from "./usePrismic";
+
 // Helpers
 type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/vetur/attributes.json

@@ -7,7 +7,6 @@
 		"type": "string | object | function",
 		"description": "An HTML tag name, a component, or a functional component used to wrap the output. Defaults to `\"div\"`."
 	},
-
 	"prismic-image/field": {
 		"type": "object",
 		"description": "The Prismic image field to render."
@@ -28,7 +27,6 @@
 		"type": "array | string",
 		"description": "Adds an additional `srcset` attribute to the image following giving pixel densities."
 	},
-
 	"prismic-link/field": {
 		"type": "object",
 		"description": "The Prismic link field or document to render."
@@ -57,7 +55,6 @@
 		"type": "string | object | function",
 		"description": "An HTML tag name, a component, or a functional component used to render external links. Defaults to the one provided to `@prismicio/vue` plugin if configured, `\"a\"` otherwise."
 	},
-
 	"prismic-rich-text/field": {
 		"type": "array",
 		"description": "The Prismic rich text or title field to render."
@@ -66,7 +63,7 @@
 		"type": "function",
 		"description": "A link resolver function used to resolve links when not using the route resolver parameter with `@prismicio/client`. Defaults to the link resolver provided to `@prismicio/vue` plugin if configured."
 	},
-	"prismic-rich-text/html-serializer": {
+	"prismic-rich-text/serializer": {
 		"type": "function | object",
 		"description": "An HTML serializer to customize the way rich text fields are rendered. Defaults to the HTML serializer provided to `@prismicio/vue` plugin if configured."
 	},
@@ -78,7 +75,6 @@
 		"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",
 		"description": "The Prismic rich text or title field to render."
@@ -95,7 +91,6 @@
 		"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",
 		"description": "List of Slice data from the Slice Zone."

package/vetur/tags.json

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