@prismicio/vue 3.1.1 → 3.1.3

package/dist/types.d.ts

@@ -0,0 +1,357 @@
+import type { App, ConcreteComponent, Ref } from "vue";
+import type { Client, ClientConfig, cookie, predicate } from "@prismicio/client";
+import type { asText, asHTML, asLink, asDate, documentToLinkField, HTMLFunctionSerializer, HTMLMapSerializer, LinkResolverFunction, asImageSrc, asImageWidthSrcSet, asImagePixelDensitySrcSet } from "@prismicio/helpers";
+import type { SliceComponentType } from "./components/SliceZone";
+/**
+ * Options used by `@prismicio/vue` components.
+ */
+type PrismicPluginComponentsOptions = {
+    /**
+     * Value of the `rel` attribute to use on links rendered with
+     * `target="_blank"`
+     *
+     * @defaultValue `"noopener noreferrer"`
+     */
+    linkBlankTargetRelAttribute?: string;
+    /**
+     * An HTML tag name, a component, or a functional 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?: string | ConcreteComponent;
+    /**
+     * An HTML tag name, a component, or a functional 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?: string | ConcreteComponent;
+    /**
+     * An HTML tag name, a component, or a functional component used to render
+     * images.
+     *
+     * @remarks
+     * HTML tag names and components will be rendered using the `img` tag
+     * interface (`src` and `alt` attribute). Components will also receive an
+     * additional `copyright` props.
+     * @defaultValue `"img"`
+     */
+    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;
+};
+/**
+ * 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.
+     *
+     * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}
+     */
+    htmlSerializer?: HTMLFunctionSerializer | HTMLMapSerializer;
+    /**
+     * 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: Client;
+    /**
+     * 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 A repository ID:
+     *
+     *     "my-repo";
+     *
+     * @example 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 Accessing a private private repository:
+     *
+     * ```javascript
+     * {
+     * 	"accessToken": "abc"
+     * }
+     * ```
+     *
+     * @example Using a route resolver:
+     *
+     * ```javascript
+     * {
+     * 	"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}
+ */
+export type PrismicPluginOptions = PrismicPluginOptionsWithClient | PrismicPluginOptionsWithEndpoint;
+/**
+ * `@prismicio/client` related methods and properties exposed by
+ * `@prismicio/vue` plugin and accessible through `this.$prismic` and
+ * `usePrismic()`.
+ */
+export type PrismicPluginClient = {
+    /**
+     * A `@prismicio/client` instance.
+     */
+    client: Client;
+    /**
+     * Query predicates from `@prismicio/client`.
+     */
+    predicate: typeof predicate;
+    /**
+     * Prismic cookies from `@prismicio/client`.
+     */
+    cookie: typeof cookie;
+};
+/**
+ * `@prismicio/helpers` 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.
+     *
+     * @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/helpers` {@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/helpers` {@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: (linkField: Parameters<typeof asLink>[0], linkResolver?: LinkResolverFunction) => string | null;
+    /**
+     * Transforms a date or timestamp field into a JavaScript Date object. This is
+     * `@prismicio/helpers` {@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}
+     * 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.
+     *
+     * @internal
+     */
+    documentToLinkField: typeof documentToLinkField;
+};
+/**
+ * Methods and properties exposed by `@prismicio/vue` plugin and accessible
+ * through `this.$prismic` and `usePrismic()`.
+ */
+export 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;
+/**
+ * States of a `@prismicio/client` composable.
+ */
+export declare const enum PrismicClientComposableState {
+    /**
+     * The composable has not started fetching.
+     */
+    Idle = "idle",
+    /**
+     * The composable is fetching data.
+     */
+    Pending = "pending",
+    /**
+     * The composable sucessfully fetched data.
+     */
+    Success = "success",
+    /**
+     * The composable failed to fetch data.
+     */
+    Error = "error"
+}
+/**
+ * Type to transform a static object into one that allows passing Refs as
+ * values.
+ *
+ * @internal
+ */
+export type VueUseOptions<T> = {
+    [K in keyof T]: Ref<T[K]> | T[K];
+};
+/**
+ * Type to transform a static tuple into one that allows passing Refs as values.
+ *
+ * @internal
+ */
+export type VueUseParameters<T> = {
+    [K in keyof T]: T extends number ? Ref<T[K]> | T[K] : T[K];
+};
+export {};

package/dist/usePrismic.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const injectionSymbols = require("./injectionSymbols.cjs");
+const usePrismic = () => {
+  return vue.inject(injectionSymbols.prismicKey, { options: { endpoint: "" } });
+};
+exports.usePrismic = usePrismic;
+//# sourceMappingURL=usePrismic.cjs.map

package/dist/usePrismic.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrismic.cjs","sources":["../../src/usePrismic.ts"],"sourcesContent":["import { inject } from \"vue\";\n\nimport { prismicKey } from \"./injectionSymbols\";\nimport { PrismicPlugin } from \"./types\";\n\n/**\n * Accesses `@prismicio/vue` plugin interface.\n *\n * @example With the composition API:\n *\n * ```javascript\n * import { usePrismic } from \"@prismicio/vue\";\n *\n * export default {\n * \tsetup() {\n * \t\tconst prismic = usePrismic();\n *\n * \t\treturn {};\n * \t},\n * };\n * ```\n *\n * @returns The interface {@link PrismicPlugin}\n */\nexport const usePrismic = (): PrismicPlugin => {\n\treturn inject(prismicKey, { options: { endpoint: \"\" } } as PrismicPlugin);\n};\n"],"names":["inject","prismicKey"],"mappings":";;;;AAwBO,MAAM,aAAa,MAAoB;AACtC,SAAAA,IAAAA,OAAOC,iBAAAA,YAAY,EAAE,SAAS,EAAE,UAAU,MAAuB;AACzE;;"}

package/dist/usePrismic.d.ts

@@ -0,0 +1,21 @@
+import { PrismicPlugin } from "./types";
+/**
+ * Accesses `@prismicio/vue` plugin interface.
+ *
+ * @example With the composition API:
+ *
+ * ```javascript
+ * import { usePrismic } from "@prismicio/vue";
+ *
+ * export default {
+ * 	setup() {
+ * 		const prismic = usePrismic();
+ *
+ * 		return {};
+ * 	},
+ * };
+ * ```
+ *
+ * @returns The interface {@link PrismicPlugin}
+ */
+export declare const usePrismic: () => PrismicPlugin;

package/dist/usePrismic.js

@@ -0,0 +1,9 @@
+import { inject } from "vue";
+import { prismicKey } from "./injectionSymbols.js";
+const usePrismic = () => {
+  return inject(prismicKey, { options: { endpoint: "" } });
+};
+export {
+  usePrismic
+};
+//# sourceMappingURL=usePrismic.js.map

package/dist/usePrismic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrismic.js","sources":["../../src/usePrismic.ts"],"sourcesContent":["import { inject } from \"vue\";\n\nimport { prismicKey } from \"./injectionSymbols\";\nimport { PrismicPlugin } from \"./types\";\n\n/**\n * Accesses `@prismicio/vue` plugin interface.\n *\n * @example With the composition API:\n *\n * ```javascript\n * import { usePrismic } from \"@prismicio/vue\";\n *\n * export default {\n * \tsetup() {\n * \t\tconst prismic = usePrismic();\n *\n * \t\treturn {};\n * \t},\n * };\n * ```\n *\n * @returns The interface {@link PrismicPlugin}\n */\nexport const usePrismic = (): PrismicPlugin => {\n\treturn inject(prismicKey, { options: { endpoint: \"\" } } as PrismicPlugin);\n};\n"],"names":[],"mappings":";;AAwBO,MAAM,aAAa,MAAoB;AACtC,SAAA,OAAO,YAAY,EAAE,SAAS,EAAE,UAAU,MAAuB;AACzE;"}

package/dist/useStatefulPrismicClientMethod.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const usePrismic = require("./usePrismic.cjs");
+const isParams = (value) => {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+};
+const useStatefulPrismicClientMethod = (methodName, args) => {
+  const { client } = usePrismic.usePrismic();
+  const state = vue.ref(
+    "idle"
+    /* PrismicClientComposableState.Idle */
+  );
+  const data = vue.shallowRef(null);
+  const error = vue.ref(null);
+  const refresh = async () => {
+    const lastArg = vue.unref(args[args.length - 1]);
+    const { client: explicitClient, ...params } = isParams(lastArg) ? lastArg : {};
+    const argsWithoutParams = isParams(lastArg) ? args.slice(0, -1) : args;
+    state.value = "pending";
+    data.value = null;
+    error.value = null;
+    try {
+      data.value = await (vue.unref(explicitClient) || client)[methodName](...argsWithoutParams.map((arg) => vue.unref(arg)), params);
+      state.value = "success";
+    } catch (err) {
+      state.value = "error";
+      error.value = err;
+    }
+  };
+  const refArgs = args.filter((arg) => vue.isRef(arg));
+  if (refArgs.length) {
+    vue.watch(refArgs, refresh, { deep: true });
+  }
+  refresh();
+  return { state, data, error, refresh };
+};
+exports.useStatefulPrismicClientMethod = useStatefulPrismicClientMethod;
+//# sourceMappingURL=useStatefulPrismicClientMethod.cjs.map

package/dist/useStatefulPrismicClientMethod.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStatefulPrismicClientMethod.cjs","sources":["../../src/useStatefulPrismicClientMethod.ts"],"sourcesContent":["import { isRef, ref, Ref, shallowRef, unref, watch } from \"vue\";\n\nimport {\n\tClient,\n\tForbiddenError,\n\tParsingError,\n\tPrismicError,\n} from \"@prismicio/client\";\n\nimport { usePrismic } from \"./usePrismic\";\nimport { PrismicClientComposableState, VueUseParameters } from \"./types\";\n\n// Helpers\ntype UnwrapPromise<T> = T extends Promise<infer U> ? U : T;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype ClientMethodLike = (...args: any[]) => Promise<any> | any;\ntype ClientMethods = typeof Client.prototype;\ntype ClientError = PrismicError<unknown> | ParsingError | ForbiddenError;\n\n// Interfaces\n\n/**\n * @internal\n */\nexport type ClientMethodParameters<TMethodName extends keyof ClientMethods> =\n\tClientMethods[TMethodName] extends ClientMethodLike\n\t\t? VueUseParameters<Parameters<ClientMethods[TMethodName]>>\n\t\t: never;\n\n/**\n * @internal\n */\nexport type ClientMethodReturnType<TMethodName extends keyof ClientMethods> =\n\tClientMethods[TMethodName] extends ClientMethodLike\n\t\t? ReturnType<ClientMethods[TMethodName]>\n\t\t: never;\n\n/**\n * @internal\n */\nexport type ComposableOnlyParameters = {\n\tclient?: Ref<Client> | Client;\n};\n\n/**\n * The return type of a `@prismicio/client` Vue composable.\n *\n * @typeParam TData - The expected format of the `data` property of the returned\n *   object\n */\nexport type ClientComposableReturnType<TData = unknown> = {\n\t/**\n\t * The current state of the composable's client method call.\n\t */\n\tstate: Ref<PrismicClientComposableState>;\n\n\t/**\n\t * Data returned by the client.\n\t */\n\tdata: Ref<TData | null>;\n\n\t/**\n\t * Error returned by the composable's client method call if in an errror\n\t * state.\n\t */\n\terror: Ref<ClientError | Error | null>;\n\n\t/**\n\t * Perform the composable's client method call again.\n\t */\n\trefresh: () => Promise<void>;\n};\n\n/**\n * Determines if a value is a `@prismicio/client` params object.\n *\n * @param value - The value to check\n *\n * @returns `true` if `value` is a `@prismicio/client` params object, `false`\n *   otherwise\n */\nconst isParams = (\n\tvalue: unknown,\n): value is ClientMethodParameters<\"get\">[0] & ComposableOnlyParameters => {\n\t// This is a *very* naive check.\n\treturn typeof value === \"object\" && value !== null && !Array.isArray(value);\n};\n\n/**\n * A low level Vue composable that uses provided method name on plugin or\n * provided client with given arguments. The composable has its own internal\n * state manager to report async status, such as pending or error statuses.\n *\n * @typeParam TClientMethodName - A method name from `@prismicio/client`\n * @typeParam TClientMethodArguments - The method expected arguments\n * @typeParam TClientMethodReturnType - The method expected return type\n *\n * @param method - The `@prismicio/client` method name to use\n * @param args - The arguments to use with requested method\n *\n * @returns The composable payload {@link ClientComposableReturnType}\n *\n * @internal\n */\nexport const useStatefulPrismicClientMethod = <\n\tTClientMethodName extends keyof ClientMethods,\n\tTClientMethodArguments extends ClientMethodParameters<TClientMethodName>,\n\tTClientMethodReturnType extends UnwrapPromise<\n\t\tClientMethodReturnType<TClientMethodName>\n\t>,\n>(\n\tmethodName: TClientMethodName,\n\targs: TClientMethodArguments,\n): ClientComposableReturnType<TClientMethodReturnType> => {\n\tconst { client } = usePrismic();\n\n\tconst state = ref<PrismicClientComposableState>(\n\t\tPrismicClientComposableState.Idle,\n\t);\n\tconst data = shallowRef<TClientMethodReturnType | null>(null);\n\tconst error = ref<ClientError | Error | null>(null);\n\tconst refresh = async (): Promise<void> => {\n\t\tconst lastArg = unref(args[args.length - 1]);\n\t\tconst { client: explicitClient, ...params } = isParams(lastArg)\n\t\t\t? (lastArg as ClientMethodParameters<\"get\">[0] & ComposableOnlyParameters)\n\t\t\t: ({} as ComposableOnlyParameters);\n\t\tconst argsWithoutParams = isParams(lastArg) ? args.slice(0, -1) : args;\n\n\t\tstate.value = PrismicClientComposableState.Pending;\n\t\tdata.value = null;\n\t\terror.value = null;\n\t\ttry {\n\t\t\tdata.value = await (\n\t\t\t\t(unref(explicitClient) || client)[methodName] as ClientMethodLike\n\t\t\t)(\n\t\t\t\t...argsWithoutParams.map((arg: Ref<unknown> | unknown) => unref(arg)),\n\t\t\t\tparams,\n\t\t\t);\n\t\t\tstate.value = PrismicClientComposableState.Success;\n\t\t} catch (err) {\n\t\t\tstate.value = PrismicClientComposableState.Error;\n\t\t\terror.value = err as ClientError | Error;\n\t\t}\n\t};\n\n\t// Watch reactive args\n\tconst refArgs = args.filter((arg) => isRef(arg));\n\tif (refArgs.length) {\n\t\twatch(refArgs, refresh, { deep: true });\n\t}\n\n\t// Fetch once\n\trefresh();\n\n\treturn { state, data, error, refresh };\n};\n"],"names":["usePrismic","ref","shallowRef","unref","isRef","watch"],"mappings":";;;;AAiFA,MAAM,WAAW,CAChB,UACyE;AAElE,SAAA,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK;AAC3E;AAkBa,MAAA,iCAAiC,CAO7C,YACA,SACwD;AAClD,QAAA,EAAE,WAAWA,WAAAA;AAEnB,QAAM,QAAQC,IAAA;AAAA,IAAG;AAAA;AAAA,EAAA;AAGX,QAAA,OAAOC,eAA2C,IAAI;AACtD,QAAA,QAAQD,QAAgC,IAAI;AAClD,QAAM,UAAU,YAA0B;AACzC,UAAM,UAAUE,IAAAA,MAAM,KAAK,KAAK,SAAS,CAAC,CAAC;AACrC,UAAA,EAAE,QAAQ,gBAAgB,GAAG,OAAA,IAAW,SAAS,OAAO,IAC1D,UACA;AACE,UAAA,oBAAoB,SAAS,OAAO,IAAI,KAAK,MAAM,GAAG,EAAE,IAAI;AAElE,UAAM,QAAK;AACX,SAAK,QAAQ;AACb,UAAM,QAAQ;AACV,QAAA;AACH,WAAK,QAAQ,OACXA,IAAAA,MAAM,cAAc,KAAK,QAAQ,UAAU,EAE5C,GAAG,kBAAkB,IAAI,CAAC,QAAgCA,IAAAA,MAAM,GAAG,CAAC,GACpE,MAAM;AAEP,YAAM,QAAK;AAAA,aACH;AACR,YAAM,QAAK;AACX,YAAM,QAAQ;AAAA,IACd;AAAA,EAAA;AAIF,QAAM,UAAU,KAAK,OAAO,CAAC,QAAQC,IAAA,MAAM,GAAG,CAAC;AAC/C,MAAI,QAAQ,QAAQ;AACnBC,QAAA,MAAM,SAAS,SAAS,EAAE,MAAM,KAAM,CAAA;AAAA,EACtC;;AAKD,SAAO,EAAE,OAAO,MAAM,OAAO,QAAO;AACrC;;"}

package/dist/useStatefulPrismicClientMethod.d.ts

@@ -0,0 +1,64 @@
+import { Ref } from "vue";
+import { Client, ForbiddenError, ParsingError, PrismicError } from "@prismicio/client";
+import { PrismicClientComposableState, VueUseParameters } from "./types";
+type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
+type ClientMethodLike = (...args: any[]) => Promise<any> | any;
+type ClientMethods = typeof Client.prototype;
+type ClientError = PrismicError<unknown> | ParsingError | ForbiddenError;
+/**
+ * @internal
+ */
+export type ClientMethodParameters<TMethodName extends keyof ClientMethods> = ClientMethods[TMethodName] extends ClientMethodLike ? VueUseParameters<Parameters<ClientMethods[TMethodName]>> : never;
+/**
+ * @internal
+ */
+export type ClientMethodReturnType<TMethodName extends keyof ClientMethods> = ClientMethods[TMethodName] extends ClientMethodLike ? ReturnType<ClientMethods[TMethodName]> : never;
+/**
+ * @internal
+ */
+export type ComposableOnlyParameters = {
+    client?: Ref<Client> | Client;
+};
+/**
+ * The return type of a `@prismicio/client` Vue composable.
+ *
+ * @typeParam TData - The expected format of the `data` property of the returned
+ *   object
+ */
+export type ClientComposableReturnType<TData = unknown> = {
+    /**
+     * The current state of the composable's client method call.
+     */
+    state: Ref<PrismicClientComposableState>;
+    /**
+     * Data returned by the client.
+     */
+    data: Ref<TData | null>;
+    /**
+     * Error returned by the composable's client method call if in an errror
+     * state.
+     */
+    error: Ref<ClientError | Error | null>;
+    /**
+     * Perform the composable's client method call again.
+     */
+    refresh: () => Promise<void>;
+};
+/**
+ * A low level Vue composable that uses provided method name on plugin or
+ * provided client with given arguments. The composable has its own internal
+ * state manager to report async status, such as pending or error statuses.
+ *
+ * @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 declare const useStatefulPrismicClientMethod: <TClientMethodName extends keyof Client<any>, TClientMethodArguments extends ClientMethodParameters<TClientMethodName>, TClientMethodReturnType extends UnwrapPromise<ClientMethodReturnType<TClientMethodName>>>(methodName: TClientMethodName, args: TClientMethodArguments) => ClientComposableReturnType<TClientMethodReturnType>;
+export {};

package/dist/useStatefulPrismicClientMethod.js

@@ -0,0 +1,39 @@
+import { ref, shallowRef, isRef, watch, unref } from "vue";
+import { usePrismic } from "./usePrismic.js";
+const isParams = (value) => {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+};
+const useStatefulPrismicClientMethod = (methodName, args) => {
+  const { client } = usePrismic();
+  const state = ref(
+    "idle"
+    /* PrismicClientComposableState.Idle */
+  );
+  const data = shallowRef(null);
+  const error = ref(null);
+  const refresh = async () => {
+    const lastArg = unref(args[args.length - 1]);
+    const { client: explicitClient, ...params } = isParams(lastArg) ? lastArg : {};
+    const argsWithoutParams = isParams(lastArg) ? args.slice(0, -1) : args;
+    state.value = "pending";
+    data.value = null;
+    error.value = null;
+    try {
+      data.value = await (unref(explicitClient) || client)[methodName](...argsWithoutParams.map((arg) => unref(arg)), params);
+      state.value = "success";
+    } catch (err) {
+      state.value = "error";
+      error.value = err;
+    }
+  };
+  const refArgs = args.filter((arg) => isRef(arg));
+  if (refArgs.length) {
+    watch(refArgs, refresh, { deep: true });
+  }
+  refresh();
+  return { state, data, error, refresh };
+};
+export {
+  useStatefulPrismicClientMethod
+};
+//# sourceMappingURL=useStatefulPrismicClientMethod.js.map

package/dist/useStatefulPrismicClientMethod.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStatefulPrismicClientMethod.js","sources":["../../src/useStatefulPrismicClientMethod.ts"],"sourcesContent":["import { isRef, ref, Ref, shallowRef, unref, watch } from \"vue\";\n\nimport {\n\tClient,\n\tForbiddenError,\n\tParsingError,\n\tPrismicError,\n} from \"@prismicio/client\";\n\nimport { usePrismic } from \"./usePrismic\";\nimport { PrismicClientComposableState, VueUseParameters } from \"./types\";\n\n// Helpers\ntype UnwrapPromise<T> = T extends Promise<infer U> ? U : T;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype ClientMethodLike = (...args: any[]) => Promise<any> | any;\ntype ClientMethods = typeof Client.prototype;\ntype ClientError = PrismicError<unknown> | ParsingError | ForbiddenError;\n\n// Interfaces\n\n/**\n * @internal\n */\nexport type ClientMethodParameters<TMethodName extends keyof ClientMethods> =\n\tClientMethods[TMethodName] extends ClientMethodLike\n\t\t? VueUseParameters<Parameters<ClientMethods[TMethodName]>>\n\t\t: never;\n\n/**\n * @internal\n */\nexport type ClientMethodReturnType<TMethodName extends keyof ClientMethods> =\n\tClientMethods[TMethodName] extends ClientMethodLike\n\t\t? ReturnType<ClientMethods[TMethodName]>\n\t\t: never;\n\n/**\n * @internal\n */\nexport type ComposableOnlyParameters = {\n\tclient?: Ref<Client> | Client;\n};\n\n/**\n * The return type of a `@prismicio/client` Vue composable.\n *\n * @typeParam TData - The expected format of the `data` property of the returned\n *   object\n */\nexport type ClientComposableReturnType<TData = unknown> = {\n\t/**\n\t * The current state of the composable's client method call.\n\t */\n\tstate: Ref<PrismicClientComposableState>;\n\n\t/**\n\t * Data returned by the client.\n\t */\n\tdata: Ref<TData | null>;\n\n\t/**\n\t * Error returned by the composable's client method call if in an errror\n\t * state.\n\t */\n\terror: Ref<ClientError | Error | null>;\n\n\t/**\n\t * Perform the composable's client method call again.\n\t */\n\trefresh: () => Promise<void>;\n};\n\n/**\n * Determines if a value is a `@prismicio/client` params object.\n *\n * @param value - The value to check\n *\n * @returns `true` if `value` is a `@prismicio/client` params object, `false`\n *   otherwise\n */\nconst isParams = (\n\tvalue: unknown,\n): value is ClientMethodParameters<\"get\">[0] & ComposableOnlyParameters => {\n\t// This is a *very* naive check.\n\treturn typeof value === \"object\" && value !== null && !Array.isArray(value);\n};\n\n/**\n * A low level Vue composable that uses provided method name on plugin or\n * provided client with given arguments. The composable has its own internal\n * state manager to report async status, such as pending or error statuses.\n *\n * @typeParam TClientMethodName - A method name from `@prismicio/client`\n * @typeParam TClientMethodArguments - The method expected arguments\n * @typeParam TClientMethodReturnType - The method expected return type\n *\n * @param method - The `@prismicio/client` method name to use\n * @param args - The arguments to use with requested method\n *\n * @returns The composable payload {@link ClientComposableReturnType}\n *\n * @internal\n */\nexport const useStatefulPrismicClientMethod = <\n\tTClientMethodName extends keyof ClientMethods,\n\tTClientMethodArguments extends ClientMethodParameters<TClientMethodName>,\n\tTClientMethodReturnType extends UnwrapPromise<\n\t\tClientMethodReturnType<TClientMethodName>\n\t>,\n>(\n\tmethodName: TClientMethodName,\n\targs: TClientMethodArguments,\n): ClientComposableReturnType<TClientMethodReturnType> => {\n\tconst { client } = usePrismic();\n\n\tconst state = ref<PrismicClientComposableState>(\n\t\tPrismicClientComposableState.Idle,\n\t);\n\tconst data = shallowRef<TClientMethodReturnType | null>(null);\n\tconst error = ref<ClientError | Error | null>(null);\n\tconst refresh = async (): Promise<void> => {\n\t\tconst lastArg = unref(args[args.length - 1]);\n\t\tconst { client: explicitClient, ...params } = isParams(lastArg)\n\t\t\t? (lastArg as ClientMethodParameters<\"get\">[0] & ComposableOnlyParameters)\n\t\t\t: ({} as ComposableOnlyParameters);\n\t\tconst argsWithoutParams = isParams(lastArg) ? args.slice(0, -1) : args;\n\n\t\tstate.value = PrismicClientComposableState.Pending;\n\t\tdata.value = null;\n\t\terror.value = null;\n\t\ttry {\n\t\t\tdata.value = await (\n\t\t\t\t(unref(explicitClient) || client)[methodName] as ClientMethodLike\n\t\t\t)(\n\t\t\t\t...argsWithoutParams.map((arg: Ref<unknown> | unknown) => unref(arg)),\n\t\t\t\tparams,\n\t\t\t);\n\t\t\tstate.value = PrismicClientComposableState.Success;\n\t\t} catch (err) {\n\t\t\tstate.value = PrismicClientComposableState.Error;\n\t\t\terror.value = err as ClientError | Error;\n\t\t}\n\t};\n\n\t// Watch reactive args\n\tconst refArgs = args.filter((arg) => isRef(arg));\n\tif (refArgs.length) {\n\t\twatch(refArgs, refresh, { deep: true });\n\t}\n\n\t// Fetch once\n\trefresh();\n\n\treturn { state, data, error, refresh };\n};\n"],"names":[],"mappings":";;AAiFA,MAAM,WAAW,CAChB,UACyE;AAElE,SAAA,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK;AAC3E;AAkBa,MAAA,iCAAiC,CAO7C,YACA,SACwD;AAClD,QAAA,EAAE,WAAW;AAEnB,QAAM,QAAQ;AAAA,IAAG;AAAA;AAAA,EAAA;AAGX,QAAA,OAAO,WAA2C,IAAI;AACtD,QAAA,QAAQ,IAAgC,IAAI;AAClD,QAAM,UAAU,YAA0B;AACzC,UAAM,UAAU,MAAM,KAAK,KAAK,SAAS,CAAC,CAAC;AACrC,UAAA,EAAE,QAAQ,gBAAgB,GAAG,OAAA,IAAW,SAAS,OAAO,IAC1D,UACA;AACE,UAAA,oBAAoB,SAAS,OAAO,IAAI,KAAK,MAAM,GAAG,EAAE,IAAI;AAElE,UAAM,QAAK;AACX,SAAK,QAAQ;AACb,UAAM,QAAQ;AACV,QAAA;AACH,WAAK,QAAQ,OACX,MAAM,cAAc,KAAK,QAAQ,UAAU,EAE5C,GAAG,kBAAkB,IAAI,CAAC,QAAgC,MAAM,GAAG,CAAC,GACpE,MAAM;AAEP,YAAM,QAAK;AAAA,aACH;AACR,YAAM,QAAK;AACX,YAAM,QAAQ;AAAA,IACd;AAAA,EAAA;AAIF,QAAM,UAAU,KAAK,OAAO,CAAC,QAAQ,MAAM,GAAG,CAAC;AAC/C,MAAI,QAAQ,QAAQ;AACnB,UAAM,SAAS,SAAS,EAAE,MAAM,KAAM,CAAA;AAAA,EACtC;;AAKD,SAAO,EAAE,OAAO,MAAM,OAAO,QAAO;AACrC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/vue",
-	"version": "3.1.1",
+	"version": "3.1.3",
 	"description": "Vue plugin, components, and composables to fetch and present Prismic content",
 	"keywords": [
 		"typescript",
@@ -32,8 +32,8 @@
 		"vetur"
 	],
 	"scripts": {
-		"build": "siroc build",
-		"dev": "siroc build --watch",
+		"build": "vite build",
+		"dev": "vite build --watch",
 		"format": "prettier --write .",
 		"lint": "eslint --ext .js,.ts .",
 		"playground:build": "vite build playground",
@@ -50,40 +50,39 @@
 		"unit:watch": "vitest watch"
 	},
 	"dependencies": {
-		"@prismicio/client": "^6.7.1",
-		"@prismicio/helpers": "^2.3.5",
-		"@prismicio/types": "^0.2.3",
+		"@prismicio/client": "^6.7.3",
+		"@prismicio/helpers": "^2.3.9",
+		"@prismicio/types": "^0.2.7",
 		"isomorphic-unfetch": "^3.1.0",
-		"vue-router": "^4.1.5"
+		"vue-router": "^4.1.6"
 	},
 	"devDependencies": {
-		"@prismicio/mock": "^0.1.1",
-		"@size-limit/preset-small-lib": "^8.1.0",
-		"@types/escape-html": "^1.0.2",
+		"@prismicio/mock": "^0.2.0",
+		"@size-limit/preset-small-lib": "^8.2.4",
 		"@types/jsdom-global": "^3.0.4",
-		"@typescript-eslint/eslint-plugin": "^5.39.0",
-		"@typescript-eslint/parser": "^5.39.0",
-		"@vitejs/plugin-vue": "^3.1.2",
-		"@vitest/coverage-c8": "^0.23.4",
-		"@vue/compiler-sfc": "^3.2.40",
+		"@typescript-eslint/eslint-plugin": "^5.54.1",
+		"@typescript-eslint/parser": "^5.54.1",
+		"@vitejs/plugin-vue": "^4.0.0",
+		"@vitest/coverage-c8": "^0.29.2",
+		"@vue/compiler-sfc": "^3.2.47",
 		"@vue/eslint-config-typescript": "^11.0.2",
-		"@vue/test-utils": "^2.1.0",
-		"eslint": "^8.24.0",
-		"eslint-config-prettier": "^8.5.0",
+		"@vue/test-utils": "^2.3.1",
+		"eslint": "^8.36.0",
+		"eslint-config-prettier": "^8.7.0",
 		"eslint-plugin-prettier": "^4.2.1",
 		"eslint-plugin-tsdoc": "^0.2.17",
-		"eslint-plugin-vue": "^9.6.0",
-		"jsdom": "^20.0.1",
+		"eslint-plugin-vue": "^9.9.0",
+		"jsdom": "^21.1.1",
 		"jsdom-global": "^3.0.2",
-		"prettier": "^2.7.1",
+		"prettier": "^2.8.4",
 		"prettier-plugin-jsdoc": "^0.4.2",
-		"siroc": "^0.16.0",
-		"size-limit": "^8.1.0",
+		"size-limit": "^8.2.4",
 		"standard-version": "^9.5.0",
-		"typescript": "^4.8.4",
-		"vite": "^3.1.4",
-		"vitest": "^0.23.4",
-		"vue": "^3.2.40"
+		"typescript": "^4.9.5",
+		"vite": "^4.1.4",
+		"vite-plugin-sdk": "^0.1.1",
+		"vitest": "^0.29.2",
+		"vue": "^3.2.47"
 	},
 	"peerDependencies": {
 		"vue": "^3.0.0"