@prismicio/vue 5.3.0-canary.5d9ea4c → 5.3.0-canary.87748cc

package/dist/types.d.cts

@@ -1,357 +1,8 @@
-import { VueRichTextSerializer } from "./PrismicRichText/types.cjs";
-import { SliceComponentType } from "./SliceZone/types.cjs";
-import { App, ConcreteComponent, DefineComponent, Raw } from "vue";
-import { AsLinkAttrsConfig, ClientConfig, CreateClient, HTMLRichTextFunctionSerializer, HTMLRichTextMapSerializer, LinkResolverFunction, asDate, asHTML, asImagePixelDensitySrcSet, asImageSrc, asImageWidthSrcSet, asLink, asLinkAttrs, asText, cookie, documentToLinkField, filter, isFilled } from "@prismicio/client";
+import { ConcreteComponent, DefineComponent, FunctionalComponent, Raw, defineAsyncComponent } from "vue";
 
 //#region src/types.d.ts
-
-/**
- * Options used by `@prismicio/vue` components.
- */
-type PrismicPluginComponentsOptions = {
-  /**
-   * The `rel` attribute to apply on links. This prop can be provided a function
-   * to use the link's metadata to determine the `rel` value.
-   *
-   * @defaultValue `"noreferrer"` for external links.
-   */
-  linkRel?: AsLinkAttrsConfig["rel"];
-  /**
-   * An HTML tag name or a component used to render internal links.
-   *
-   * @remarks
-   * HTML tag names will be rendered using the anchor tag interface (`href`,
-   * `target`, and `rel` attributes).
-   * @remarks
-   * Components will be rendered using Vue Router {@link RouterLink} interface
-   * (`to` props).
-   *
-   * @defaultValue {@link RouterLink}
-   */
-  linkInternalComponent?: ComponentOrTagName;
-  /**
-   * An HTML tag name or a component used to render external links.
-   *
-   * @remarks
-   * HTML tag names will be rendered using the anchor tag interface (`href`,
-   * `target`, and `rel` attributes).
-   * @remarks
-   * Components will be rendered using Vue Router {@link RouterLink} interface
-   * (`to` props).
-   *
-   * @defaultValue `"a"`
-   */
-  linkExternalComponent?: ComponentOrTagName;
-  /**
-   * 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/client` defaults
-   */
-  imageWidthSrcSetDefaults?: number[];
-  /**
-   * Default pixel densities to use when rendering an image with
-   * `pixel-densities="defaults"`
-   *
-   * @defaultValue `@prismicio/client` defaults
-   */
-  imagePixelDensitySrcSetDefaults?: number[];
-  /**
-   * An optional map of Rich Text block types to Vue Components. It is used to
-   * render rich text or title fields.
-   *
-   * @see Templating Rich Text and title fields from Prismic {@link https://prismic.io/docs/rich-text}
-   */
-  richTextComponents?: VueRichTextSerializer;
-  /**
-   * 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;
-};
-/**
- * Common options supported by `@prismicio/vue` plugin.
- */
-type PrismicPluginOptionsBase = {
-  /**
-   * An optional link resolver function used to resolve links to Prismic
-   * documents when not using the route resolver parameter with
-   * `@prismicio/client`.
-   *
-   * @see Link resolver documentation {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver#link-resolver}
-   */
-  linkResolver?: LinkResolverFunction;
-  /**
-   * An optional HTML serializer to customize the way rich text fields are
-   * rendered.
-   *
-   * @remarks
-   * To provide global components for the `<PrismicRichText />` component, use
-   * the `components.richTextComponents` option instead.
-   *
-   * @deprecated Use `components.richTextComponents` instead.
-   *
-   * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}
-   */
-  richTextSerializer?: HTMLRichTextFunctionSerializer | HTMLRichTextMapSerializer;
-  /**
-   * Whether or not to inject components globally.
-   *
-   * @defaultValue `true`
-   */
-  injectComponents?: boolean;
-  /**
-   * Options used by Prismic Vue components.
-   *
-   * @see Components options {@link PrismicPluginComponentsOptions}
-   */
-  components?: PrismicPluginComponentsOptions;
-};
-/**
- * Options to init `@prismicio/vue` plugin with a client instance.
- *
- * @see {@link PrismicPluginOptionsBase} for shared options
- */
-type PrismicPluginOptionsWithClient = PrismicPluginOptionsBase & {
-  /**
-   * A `@prismicio/client` instance used to fetch content from a Prismic
-   * repository to configure the plugin with.
-   *
-   * @remarks
-   * The client will be used by `@prismicio/vue` composables, such as
-   * {@link usePrismicDocuments} and exposed through `this.$prismic.client` and
-   * `usePrismic().client`.
-   *
-   * @see Prismic client documentation {@link https://prismic.io/docs/technologies/javascript}
-   */
-  client: ReturnType<CreateClient>;
-  /**
-   * Ensures type union is a strict or.
-   *
-   * @internal
-   */
-  endpoint?: never;
-  /**
-   * Ensures type union is a strict or.
-   *
-   * @internal
-   */
-  clientConfig?: never;
-};
-/**
- * Options to init `@prismicio/vue` plugin with a repository ID or API endpoint.
- *
- * @see {@link PrismicPluginOptionsBase} for shared options
- */
-type PrismicPluginOptionsWithEndpoint = PrismicPluginOptionsBase & {
-  /**
-   * A Prismic repository endpoint to init the plugin's `@prismicio/client`
-   * instance used to fetch content from a Prismic repository with.
-   *
-   * @remarks
-   * Said client will be used by `@prismicio/vue` composables, such as
-   * {@link usePrismicDocuments} and exposed through `this.$prismic.client` and
-   * `usePrismic().client`.
-   *
-   * @example
-   *
-   * ```javascript
-   * // A repository ID
-   * "my-repo"
-   *
-   * //A full repository endpoint
-   * "https://my-repo.cdn.prismic.io/api/v2"
-   * ```
-   *
-   * @see Prismic client documentation {@link https://prismic.io/docs/technologies/javascript}
-   */
-  endpoint: string;
-  /**
-   * An optional object to configure `@prismicio/client` instance further.
-   *
-   * @example
-   *
-   * ```javascript
-   * // Accessing a private private repository
-   * {
-   * 	"accessToken": "abc"
-   * }
-   * ```
-   *
-   * @example
-   *
-   * ```javascript
-   * // Using a route resolver
-   * {
-   * 	"defaultParams": {
-   * 		"routes": [
-   * 			{
-   * 				"type": "page",
-   * 				"path": "/:uid"
-   * 			},
-   * 			{
-   * 				"type": "post",
-   * 				"path": "/blog/:uid"
-   * 			}
-   * 		]
-   * 	}
-   * }
-   * ```
-   *
-   * @see Prismic client documentation {@link https://prismic.io/docs/technologies/javascript}
-   * @see Route resolver documentation {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver#route-resolver}
-   */
-  clientConfig?: ClientConfig;
-  /**
-   * Ensures type union is a strict or.
-   *
-   * @internal
-   */
-  client?: never;
-};
-/**
- * `@prismicio/vue` plugin options.
- *
- * @see Prismic Official Vue.js documentation: {@link https://prismic.io/docs/technologies/vuejs}
- * @see Plugin repository: {@link https://github.com/prismicio/prismic-vue}
- */
-type PrismicPluginOptions = PrismicPluginOptionsWithClient | PrismicPluginOptionsWithEndpoint;
-/**
- * `@prismicio/client` related methods and properties exposed by
- * `@prismicio/vue` plugin and accessible through `this.$prismic` and
- * `usePrismic()`.
- */
-type PrismicPluginClient = {
-  /**
-   * A `@prismicio/client` instance.
-   */
-  client: ReturnType<CreateClient>;
-  /**
-   * Query filters from `@prismicio/client`.
-   */
-  filter: typeof filter;
-  /**
-   * Prismic cookies from `@prismicio/client`.
-   */
-  cookie: typeof cookie;
-};
-/**
- * `@prismicio/client` related methods exposed by `@prismicio/vue` plugin and
- * accessible through `this.$prismic` and `usePrismic()`.
- */
-type PrismicPluginHelpers = {
-  /**
-   * Serializes a rich text or title field to a plain text string. This is
-   * `@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}
-   */
-  asText: typeof asText;
-  /**
-   * Serializes a rich text or title field to an HTML string. This is
-   * `@prismicio/client` {@link asHTML} function.
-   *
-   * @remarks
-   * If no `linkResolver` is provided the function will use the one provided to
-   * the plugin at {@link PrismicPluginOptions.linkResolver} if available.
-   * @remarks
-   * If no `htmlSerializer` is provided the function will use the one provided
-   * to the plugin at {@link PrismicPluginOptions.htmlSerializer} if available.
-   *
-   * @see Templating rich text and title fields {@link https://prismic.io/docs/technologies/vue-template-content#rich-text-and-titles}
-   */
-  asHTML: typeof asHTML;
-  /**
-   * Resolves any type of link field or document to a URL. This is
-   * `@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}
-   */
-  asLinkAttrs: typeof asLinkAttrs;
-  /**
-   * Transforms a date or timestamp field into a JavaScript Date object. This is
-   * `@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/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/client`
-   * {@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/client` {@link asImagePixelDensitySrcSet} function.
-   */
-  asImagePixelDensitySrcSet: typeof asImagePixelDensitySrcSet;
-  /**
-   * Helpers to determine if a field is filled. This is `@prismicio/client`
-   * {@link isFilled} object.
-   */
-  isFilled: typeof isFilled;
-  /**
-   * Converts a document into a link field. This is `@prismicio/client`
-   * {@link documentToLinkField} function.
-   *
-   * @internal
-   */
-  documentToLinkField: typeof documentToLinkField;
-};
-/**
- * Methods and properties exposed by `@prismicio/vue` plugin and accessible
- * through `this.$prismic` and `usePrismic()`.
- */
-type PrismicPlugin = {
-  /**
-   * Options uses to initialize the plugin.
-   *
-   * @see `@prismicio/vue` plugin options {@link PrismicPluginOptions}
-   */
-  readonly options: PrismicPluginOptions;
-  /**
-   * `@prismicio/vue` plugin install function used by Vue.
-   *
-   * @internal
-   */
-  install: (app: App) => void;
-} & PrismicPluginClient & PrismicPluginHelpers;
-/**
- * A component or a tag name to be used as props.
- *
- * @internal
- */
 type ComponentOrTagName = string | ConcreteComponent | Raw<DefineComponent>;
+type VueComponent<TProps> = DefineComponent<{}, {}, any> | ReturnType<typeof defineAsyncComponent> | DefineComponent<TProps> | FunctionalComponent<TProps>;
 //#endregion
-export { ComponentOrTagName, PrismicPlugin, PrismicPluginOptions };
+export { ComponentOrTagName, VueComponent };
 //# sourceMappingURL=types.d.cts.map

package/dist/types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.cts","names":[],"sources":["../src/types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;AA+BoB;KAOf,8BAAA,GAOM;EAcc;;;;;AAqDsB;EAc/B,OAAA,CAAA,EAjFL,iBAiFK,CAAA,KAAA,CAAA;EAeZ;;;;AAewC;;;;;AAoBzB;AAiGnB;AASA;EAIoB,qBAAA,CAAA,EAnOK,kBAmOL;EAAX;;;;AAiBT;;;;;;;;EAyEmC,qBAAA,CAAA,EA/SV,kBA+SU;EAMjB;;;AAelB;;;;;;AA2CA;EAEG,wBAAA,CAAA,EAAA,MAAA,EAAA;EACI;;;;;;;;;;;;;uBAtVe;;;;;;;;;;8BAWO;;;;;KAMxB,wBAAA;;;;;;;;iBAQW;;;;;;;;;;;;;uBAeZ,iCACA;;;;;;;;;;;;eAcU;;;;;;;KAQT,8BAAA,GAAiC;;;;;;;;;;;;UAY7B,WAAW;;;;;;;;;;;;;;;;;;;KAsBf,gCAAA,GAAmC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA2DxB;;;;;;;;;;;;;;KAgBJ,oBAAA,GACT,iCACA;;;;;;KAOS,mBAAA;;;;UAIH,WAAW;;;;iBAKJ;;;;iBAKA;;;;;;KAOJ,oBAAA;;;;;;;iBAOI;;;;;;;;;;;;;;iBAeA;;;;;;;;;;;iBAYA;;;;;;;;;;;sBAYK;;;;;iBAML;;;;;;qBAOI;;;;;;6BAOQ;;;;;;oCAOO;;;;;mBAMjB;;;;;;;8BAQW;;;;;;KAOjB,aAAA;;;;;;oBAMO;;;;;;iBAOH;IACZ,sBACH;;;;;;KA4BW,kBAAA,YAET,oBACA,IAAI"}
+{"version":3,"file":"types.d.cts","names":[],"sources":["../src/types.ts"],"sourcesContent":[],"mappings":";;;KAQY,kBAAA,YAET,oBACA,IAAI;KAEK,uBAGT,+BAEA,kBAAkB,wBAClB,gBAAgB,UAChB,oBAAoB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/vue",
-	"version": "5.3.0-canary.5d9ea4c",
+	"version": "5.3.0-canary.87748cc",
 	"description": "Vue plugin, components, and composables to fetch and present Prismic content",
 	"keywords": [
 		"typescript",
@@ -44,11 +44,10 @@
 		"test": "npm run lint && npm run types && npm run unit && npm run build"
 	},
 	"dependencies": {
-		"@prismicio/client": "^7.21.0",
-		"esm-env": "^1.2.2",
-		"vue-router": "^4.6.3"
+		"esm-env": "^1.2.2"
 	},
 	"devDependencies": {
+		"@prismicio/client": "^7.21.0",
 		"@prismicio/mock": "^0.7.1",
 		"@trivago/prettier-plugin-sort-imports": "^6.0.0",
 		"@types/jsdom-global": "^3.0.7",
@@ -65,10 +64,12 @@
 		"vite": "^7.2.7",
 		"vitest": "^4.0.15",
 		"vue": "^3.5.25",
+		"vue-router": "^4.6.3",
 		"vue-tsc": "^3.1.8"
 	},
 	"peerDependencies": {
-		"vue": "^3.0.0"
+		"@prismicio/client": "^7",
+		"vue": "^3"
 	},
 	"engines": {
 		"node": ">=20"

package/src/PrismicImage.vue

@@ -10,15 +10,11 @@ import { computed, watchEffect } from "vue"
 
 import { devMsg } from "./lib/devMsg"
 
-import { usePrismic } from "./usePrismic"
-
 /**
  * Props for `<PrismicImage />`.
  */
 export type PrismicImageProps = {
-	/**
-	 * The Prismic image field or thumbnail to render.
-	 */
+	/** The Prismic image field or thumbnail to render. */
 	field: ImageField | ImageField<string>
 
 	/**
@@ -63,29 +59,23 @@ export type PrismicImageProps = {
 } & (
 	| {
 			/**
-			 * Widths used to build a `srcset` value for the image field.
+			 * Widths (in pixels) used to build a `srcset` value for the image
+			 * field.
 			 *
-			 * If a `widths` prop is not given or `"defaults"` is passed, the
-			 * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048,
-			 * 3840.
+			 * If omitted or set to `"defaults"`, the following widths will be used:
+			 * 640, 750, 828, 1080, 1200, 1920, 2048, 3840.
 			 *
-			 * If the image field contains responsive views, each responsive view can
-			 * be used as a width in the resulting `srcset` by passing `"thumbnails"`
-			 * as the `widths` prop.
+			 * If the image field contains responsive views, each responsive view
+			 * can be used as a width in the resulting `srcset` by passing
+			 * `"thumbnails"` as the `widths` prop.
 			 */
 			widths?:
 				| NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"]
 				| "thumbnails"
 				| "defaults"
-			/**
-			 * Not used when the `widths` prop is used.
-			 */
 			pixelDensities?: never
 	  }
 	| {
-			/**
-			 * Not used when the `widths` prop is used.
-			 */
 			widths?: never
 			/**
 			 * Pixel densities used to build a `srcset` value for the image field.
@@ -104,8 +94,6 @@ export type PrismicImageProps = {
 const props = defineProps<PrismicImageProps>()
 defineOptions({ name: "PrismicImage" })
 
-const { options } = usePrismic()
-
 if (DEV) {
 	watchEffect(() => {
 		if (typeof props.alt === "string" && props.alt !== "") {
@@ -156,10 +144,7 @@ const image = computed(() => {
 	if (props.widths || !props.pixelDensities) {
 		const res = asImageWidthSrcSet(props.field, {
 			...props.imgixParams,
-			widths:
-				props.widths === "defaults"
-					? options.components?.imageWidthSrcSetDefaults
-					: props.widths,
+			widths: props.widths === "defaults" ? undefined : props.widths,
 		})
 
 		src = res.src
@@ -168,9 +153,7 @@ const image = computed(() => {
 		const res = asImagePixelDensitySrcSet(props.field, {
 			...props.imgixParams,
 			pixelDensities:
-				props.pixelDensities === "defaults"
-					? options.components?.imagePixelDensitySrcSetDefaults
-					: props.pixelDensities,
+				props.pixelDensities === "defaults" ? undefined : props.pixelDensities,
 		})
 
 		src = res.src

package/src/PrismicLink.vue

@@ -12,8 +12,6 @@ import { isInternalURL } from "./lib/isInternalURL"
 
 import type { ComponentOrTagName } from "./types"
 
-import { usePrismic } from "./usePrismic"
-
 /**
  * The default component rendered for internal URLs.
  */
@@ -34,12 +32,13 @@ const defaultExternalRelAttribute = "noreferrer"
  */
 export type PrismicLinkProps = {
 	/**
-	 * A link resolver function used to resolve links when not using the route
-	 * resolver parameter with `@prismicio/client`.
+	 * The link resolver used to resolve links.
 	 *
-	 * @defaultValue The link resolver provided to `@prismicio/vue` plugin if configured.
+	 * @remarks
+	 * If your app uses route resolvers when querying for your Prismic
+	 * repository's content, a link resolver does not need to be provided.
 	 *
-	 * @see Link resolver documentation {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver#link-resolver}
+	 * @see Learn about link resolvers and route resolvers {@link https://prismic.io/docs/routes}
 	 */
 	linkResolver?: LinkResolverFunction
 
@@ -47,50 +46,33 @@ export type PrismicLinkProps = {
 	 * The `rel` attribute for the link. By default, `"noreferrer"` is provided if
 	 * the link's URL is external. This prop can be provided a function to use the
 	 * link's metadata to determine the `rel` value.
-	 *
-	 * @defaultValue The one provided to `@prismicio/vue` plugin if configured.
 	 */
 	rel?: string | AsLinkAttrsConfig["rel"]
 
 	/**
-	 * An HTML tag name or a component used to render internal links.
+	 * The component rendered for internal URLs.
 	 *
-	 * @remarks
-	 * HTML tag names will be rendered using the anchor tag interface (`href`,
-	 * `target`, and `rel` attributes).
-	 * @remarks
-	 * Components will be rendered using Vue Router {@link RouterLink} interface
-	 * (`to` props).
+	 * If your app uses a client-side router that requires a special Link
+	 * component, provide the Link component to this prop.
 	 *
-	 * @defaultValue The one provided to `@prismicio/vue` plugin if configured, {@link RouterLink} otherwise.
+	 * @defaultValue `<RouterLink>`
 	 */
 	internalComponent?: ComponentOrTagName
 
 	/**
-	 * An HTML tag name or a component used to render external links.
+	 * The component rendered for external URLs.
 	 *
-	 * @remarks
-	 * HTML tag names will be rendered using the anchor tag interface (`href`,
-	 * `target`, and `rel` attributes).
-	 * @remarks
-	 * Components will be rendered using Vue Router {@link RouterLink} interface
-	 * (`to` props).
-	 *
-	 * @defaultValue The one provided to `@prismicio/vue` plugin if configured, `"a"` otherwise.
+	 * @defaultValue `<a>`
 	 */
 	externalComponent?: ComponentOrTagName
 } & (
 	| {
-			/**
-			 * The Prismic link field to render.
-			 */
+			/** The Prismic link field to render. */
 			field: LinkField
 			document?: never
 	  }
 	| {
-			/**
-			 * The Prismic document to render as a link.
-			 */
+			/** The Prismic document to render as a link. */
 			document: PrismicDocument
 			field?: never
 	  }
@@ -99,15 +81,12 @@ export type PrismicLinkProps = {
 const props = defineProps<PrismicLinkProps>()
 defineOptions({ name: "PrismicLink" })
 
-const { options } = usePrismic()
-
 const rawAttrs = computed(() => {
 	return asLinkAttrs(props.field || props.document, {
-		linkResolver: props.linkResolver || options.linkResolver,
+		linkResolver: props.linkResolver,
 		rel(args) {
-			const maybeRel = props.rel || options.components?.linkRel
-			if (maybeRel) {
-				return typeof maybeRel === "function" ? maybeRel(args) : maybeRel
+			if (props.rel) {
+				return typeof props.rel === "function" ? props.rel(args) : props.rel
 			}
 
 			return args.isExternal ? defaultExternalRelAttribute : undefined
@@ -117,12 +96,8 @@ const rawAttrs = computed(() => {
 
 const component = computed(() => {
 	return isInternalURL(rawAttrs.value.href || "")
-		? props.internalComponent ||
-				options.components?.linkInternalComponent ||
-				defaultInternalComponent
-		: props.externalComponent ||
-				options.components?.linkExternalComponent ||
-				defaultExternalComponent
+		? props.internalComponent || defaultInternalComponent
+		: props.externalComponent || defaultExternalComponent
 })
 
 // Match Vue Router's `<RouterLink />` interface unless the component is an anchor tag.