@prismicio/vue 3.0.0-alpha.2 → 3.0.0-alpha.6

package/src/components/PrismicImage.ts

@@ -22,50 +22,36 @@ const defaultImageComponent = "img";
 /**
  * Props for `<PrismicImage />`.
  */
-export type PrismicImageProps =
-	| {
-			/** The Prismic image field to render. */
-			field: ImageField;
+export type PrismicImageProps = {
+	/**
+	 * The Prismic image field to render.
+	 */
+	field: ImageField;
 
-			/**
-			 * Ensures type union is a strict or.
-			 *
-			 * @internal
-			 */
-			imageComponent?: never;
+	/**
+	 * 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 The one provided to `@prismicio/vue` plugin if configured, `"img"` otherwise.
+	 */
+	imageComponent?: string | ConcreteComponent;
 
-			/**
-			 * Ensures type union is a strict or.
-			 *
-			 * @internal
-			 */
-			imageComponentAdditionalProps?: never;
-	  }
-	| {
-			/** The Prismic image field to render. */
-			field: ImageField;
-
-			/**
-			 * 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 The one provided to `@prismicio/vue` plugin if configured, `"img"` otherwise.
-			 */
-			imageComponent: string | ConcreteComponent;
-
-			/**
-			 * A map of additional props to pass to the component used to render images when using one.
-			 */
-			imageComponentAdditionalProps?: Record<string, unknown>;
-	  };
+	/**
+	 * A map of additional props to pass to the component used to render images
+	 * when using one.
+	 */
+	imageComponentAdditionalProps?: Record<string, unknown>;
+};
 
 /**
  * `<PrismicImage />` implementation.
  *
  * @internal
  */
-export const PrismicImageImpl = defineComponent({
+export const PrismicImageImpl = /*#__PURE__*/ defineComponent({
 	name: "PrismicImage",
 	props: {
 		field: {

package/src/components/PrismicLink.ts

@@ -12,11 +12,7 @@ import {
 	ComputedRef,
 } from "vue";
 
-import {
-	asLink,
-	documentAsLink,
-	LinkResolverFunction,
-} from "@prismicio/helpers";
+import { asLink, LinkResolverFunction } from "@prismicio/helpers";
 import { LinkField, PrismicDocument } from "@prismicio/types";
 
 import { isInternalURL } from "../lib/isInternalURL";
@@ -44,14 +40,16 @@ const defaultBlankTargetRelAttribute = "noopener noreferrer";
  * Props for `<PrismicLink />`.
  */
 export type PrismicLinkProps = {
-	/** The Prismic link field or document to render. */
+	/**
+	 * The Prismic link field or document to render.
+	 */
 	field: LinkField | PrismicDocument;
 
 	/**
-	 * A link resolver function used to resolve links when not using the route resolver parameter with `@prismicio/client`.
+	 * A link resolver function used to resolve links when not using the route
+	 * resolver parameter with `@prismicio/client`.
 	 *
 	 * @defaultValue The link resolver provided to `@prismicio/vue` plugin if configured.
-	 *
 	 * @see Link resolver documentation {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver#link-resolver}
 	 */
 	linkResolver?: LinkResolverFunction;
@@ -59,38 +57,44 @@ export type PrismicLinkProps = {
 	/**
 	 * An explicit `target` attribute to apply to the rendered link.
 	 */
-	target?: string;
+	target?: string | null;
 
 	/**
 	 * An explicit `rel` attribute to apply to the rendered link.
 	 */
-	rel?: string;
+	rel?: string | null;
 
 	/**
 	 * Value of the `rel` attribute to use on links rendered with `target="_blank"`.
 	 *
 	 * @defaultValue The one provided to `@prismicio/vue` plugin if configured, `"noopener noreferrer"` otherwise.
 	 */
-	blankTargetRelAttribute?: string;
+	blankTargetRelAttribute?: string | null;
 
 	/**
-	 * 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).
+	 * 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 The one provided to `@prismicio/vue` plugin if configured, {@link RouterLink} otherwise.
 	 */
 	internalComponent?: 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).
+	 * 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 The one provided to `@prismicio/vue` plugin if configured, `"a"` otherwise.
 	 */
 	externalComponent?: string | ConcreteComponent;
@@ -105,16 +109,24 @@ export type UsePrismicLinkOptions = VueUseOptions<PrismicLinkProps>;
  * Return type of {@link usePrismicLink}.
  */
 export type UsePrismicLinkReturnType = {
-	/** Suggested component to render for provided link field. */
+	/**
+	 * Suggested component to render for provided link field.
+	 */
 	type: ComputedRef<string | ConcreteComponent>;
 
-	/** Resolved anchor `href` value. */
+	/**
+	 * Resolved anchor `href` value.
+	 */
 	href: ComputedRef<string>;
 
-	/** Resolved anchor `target` value. */
+	/**
+	 * Resolved anchor `target` value.
+	 */
 	target: ComputedRef<string | null>;
 
-	/** Resolved anchor `rel` value. */
+	/**
+	 * Resolved anchor `rel` value.
+	 */
 	rel: ComputedRef<string | null>;
 };
 
@@ -149,29 +161,37 @@ export const usePrismicLink = (
 		const field = unref(props.field);
 		const linkResolver = unref(props.linkResolver) ?? options.linkResolver;
 
-		return "data" in field && field.data
-			? documentAsLink(field, linkResolver) ?? ""
-			: asLink(field, linkResolver) ?? "";
+		return asLink(field, linkResolver) ?? "";
 	});
 	const target = computed(() => {
 		const field = unref(props.field);
+		const target = unref(props.target);
 
-		return (
-			unref(props.target) ||
-			(field && "target" in field && field.target ? field.target : null)
-		);
+		if (typeof target !== "undefined") {
+			return target;
+		} else {
+			return field && "target" in field && field.target ? field.target : null;
+		}
 	});
 	const rel = computed(() => {
-		const field = unref(props.field);
+		const rel = unref(props.rel);
+
+		if (typeof rel !== "undefined") {
+			return rel;
+		} else if (target.value === "_blank") {
+			const blankTargetRelAttribute = unref(props.blankTargetRelAttribute);
 
-		return (
-			unref(props.rel) ||
-			(target.value === "_blank" && field && "target" in field && field
-				? unref(props.blankTargetRelAttribute) ||
-				  options.components?.linkBlankTargetRelAttribute ||
-				  defaultBlankTargetRelAttribute
-				: null)
-		);
+			if (typeof blankTargetRelAttribute !== "undefined") {
+				return blankTargetRelAttribute;
+			} else {
+				return typeof options.components?.linkBlankTargetRelAttribute !==
+					"undefined"
+					? options.components.linkBlankTargetRelAttribute
+					: defaultBlankTargetRelAttribute;
+			}
+		} else {
+			return null;
+		}
 	});
 
 	return {
@@ -187,7 +207,7 @@ export const usePrismicLink = (
  *
  * @internal
  */
-export const PrismicLinkImpl = defineComponent({
+export const PrismicLinkImpl = /*#__PURE__*/ defineComponent({
 	name: "PrismicLink",
 	props: {
 		field: {

package/src/components/PrismicRichText.ts

@@ -17,22 +17,18 @@ import {
 	watch,
 } from "vue";
 import { routerKey } from "vue-router";
-import escapeHTML from "escape-html";
 
 import {
 	asHTML,
-	asLink,
 	HTMLFunctionSerializer,
 	HTMLMapSerializer,
 	LinkResolverFunction,
-	Element,
 } from "@prismicio/helpers";
-import { LinkType, RichTextField, RTLinkNode } from "@prismicio/types";
+import { RichTextField } from "@prismicio/types";
 
 import { VueUseOptions } from "../types";
 import { usePrismic } from "../usePrismic";
 import { simplyResolveComponent } from "../lib/simplyResolveComponent";
-import { composeSerializers, wrapMapSerializer } from "@prismicio/richtext";
 import { isInternalURL } from "../lib/isInternalURL";
 
 /**
@@ -44,14 +40,16 @@ const defaultWrapper = "div";
  * Props for `<PrismicRichText />`.
  */
 export type PrismicRichTextProps = {
-	/** The Prismic rich text or title field to render. */
+	/**
+	 * The Prismic rich text or title field to render.
+	 */
 	field: RichTextField;
 
 	/**
-	 * A link resolver function used to resolve link when not using the route resolver parameter with `@prismicio/client`.
+	 * A link resolver function used to resolve link when not using the route
+	 * resolver parameter with `@prismicio/client`.
 	 *
 	 * @defaultValue The link resolver provided to `@prismicio/vue` plugin if configured.
-	 *
 	 * @see Link resolver documentation {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver#link-resolver}
 	 */
 	linkResolver?: LinkResolverFunction;
@@ -60,7 +58,6 @@ export type PrismicRichTextProps = {
 	 * An HTML serializer to customize the way rich text fields are rendered.
 	 *
 	 * @defaultValue The HTML serializer provided to `@prismicio/vue` plugin if configured.
-	 *
 	 * @see HTML serializer documentation {@link https://prismic.io/docs/core-concepts/html-serializer}
 	 */
 	htmlSerializer?: HTMLFunctionSerializer | HTMLMapSerializer;
@@ -84,44 +81,12 @@ export type UsePrismicRichTextOptions = VueUseOptions<
  * Return type of {@link usePrismicRichText}.
  */
 export type UsePrismicRichTextReturnType = {
-	/** Serialized rich text field as HTML. */
+	/**
+	 * Serialized rich text field as HTML.
+	 */
 	html: ComputedRef<string>;
 };
 
-/**
- * Serializes hyperlink for Vue, applying `data-router-link` attribute to internal links for usage with Vue Router.
- *
- * @param linkResolver - A link resolver function to use
- * @param node - The link node to serialize
- * @param children - The children of the link node
- *
- * @returns Serialized hyperlink
- */
-const serializeVueHyperlink = (
-	linkResolver: LinkResolverFunction | undefined,
-	node: RTLinkNode,
-	children: string[],
-) => {
-	switch (node.data.link_type) {
-		case LinkType.Web: {
-			return `<a href="${escapeHTML(node.data.url)}" target="${
-				node.data.target
-			}" rel="noopener noreferrer">${children.join("")}</a>`;
-		}
-
-		case LinkType.Document: {
-			return `<a data-router-link href="${asLink(
-				node.data,
-				linkResolver,
-			)}">${children.join("")}</a>`;
-		}
-
-		case LinkType.Media: {
-			return `<a href="${node.data.url}">${children.join("")}</a>`;
-		}
-	}
-};
-
 /**
  * A low level composable that returns a serialized rich text field as HTML.
  *
@@ -136,34 +101,10 @@ export const usePrismicRichText = (
 
 	const html = computed(() => {
 		const linkResolver = unref(props.linkResolver) ?? options.linkResolver;
-
-		const maybeSerializer =
+		const htmlSerializer =
 			unref(props.htmlSerializer) ?? options.htmlSerializer;
-		// Extends default HTML serializer to handle Vue Router links
-		let serializer: HTMLFunctionSerializer = (
-			_type,
-			node,
-			_content,
-			children,
-			_key,
-		) => {
-			switch (node.type) {
-				case Element.hyperlink:
-					return serializeVueHyperlink(linkResolver, node, children);
-				default:
-					return null;
-			}
-		};
-		if (maybeSerializer) {
-			serializer = composeSerializers(
-				typeof maybeSerializer === "object"
-					? wrapMapSerializer(maybeSerializer)
-					: maybeSerializer,
-				serializer,
-			);
-		}
 
-		return asHTML(unref(props.field), linkResolver, serializer);
+		return asHTML(unref(props.field), linkResolver, htmlSerializer);
 	});
 
 	return {
@@ -176,11 +117,11 @@ export const usePrismicRichText = (
  *
  * @internal
  */
-export const PrismicRichTextImpl = defineComponent({
+export const PrismicRichTextImpl = /*#__PURE__*/ defineComponent({
 	name: "PrismicRichText",
 	props: {
 		field: {
-			type: Array as PropType<RichTextField>,
+			type: Array as unknown as PropType<RichTextField>,
 			required: true,
 		},
 		linkResolver: {
@@ -209,53 +150,51 @@ export const PrismicRichTextImpl = defineComponent({
 
 		const { html } = usePrismicRichText(props);
 
-		const root = ref<HTMLElement | Component | null>(null);
+		const root = ref<HTMLElement | Comment | Component | null>(null);
 
 		const maybeRouter = inject(routerKey, null);
 		if (maybeRouter) {
-			let links: NodeList | null = null;
-
-			const navigate: EventListener = (event: Event) => {
-				let target = event.target as (Node & ParentNode) | null;
-				let i = 0;
-				// Go throught 5 parents max to find a tag
-				while (
-					i < 5 &&
-					target &&
-					!(target instanceof HTMLAnchorElement) &&
-					target.parentNode
-				) {
-					target = target.parentNode;
-					i++;
-				}
-
-				// If target is still not a link, ignore
-				if (!(target instanceof HTMLAnchorElement)) {
-					return;
-				}
-
-				const href = target.getAttribute("href");
-				// Get link target, if internal link, navigate with router link
-				if (href && isInternalURL(href)) {
-					event.preventDefault();
-					maybeRouter.push(href);
-				}
+			type InternalLink = {
+				element: HTMLAnchorElement;
+				listener: EventListener;
+			};
+			let links: InternalLink[] = [];
+
+			const navigate: EventListener = function (
+				this: { href: string },
+				event: Event,
+			) {
+				event.preventDefault();
+				maybeRouter.push(this.href);
 			};
 
 			const addListeners = () => {
-				const node: HTMLElement | null =
+				const node: HTMLElement | Comment | null =
 					root.value && "$el" in root.value ? root.value.$el : root.value;
-				links =
-					node &&
-					node.querySelectorAll &&
-					node.querySelectorAll("a[data-router-link]");
-				links &&
-					links.forEach((link) => link.addEventListener("click", navigate));
+				if (node && "querySelectorAll" in node) {
+					// Get all internal link tags and add listeners on them
+					links = Array.from(node.querySelectorAll("a"))
+						.map((element) => {
+							const href = element.getAttribute("href");
+
+							if (href && isInternalURL(href)) {
+								const listener = navigate.bind({ href });
+								element.addEventListener("click", listener);
+
+								return { element, listener };
+							} else {
+								return false;
+							}
+						})
+						.filter((link): link is InternalLink => link as boolean);
+				}
 			};
 
 			const removeListeners = () => {
-				links?.forEach((link) => link.removeEventListener("click", navigate));
-				links = null;
+				links.forEach(({ element, listener }) =>
+					element.removeEventListener("click", listener),
+				);
+				links = [];
 			};
 
 			watch(

package/src/components/PrismicText.ts

@@ -4,11 +4,11 @@ import {
 	computed,
 	ComputedRef,
 	ConcreteComponent,
-	DefineComponent,
 	defineComponent,
 	h,
 	PropType,
 	unref,
+	VNode,
 	VNodeProps,
 } from "vue";
 
@@ -27,7 +27,9 @@ const defaultWrapper = "div";
  * Props for `<PrismicText />`.
  */
 export type PrismicTextProps = {
-	/** The Prismic rich text or title field to render. */
+	/**
+	 * The Prismic rich text or title field to render.
+	 */
 	field: RichTextField;
 
 	/**
@@ -56,7 +58,9 @@ export type UsePrismicTextOptions = VueUseOptions<
  * Return type of {@link usePrismicText}.
  */
 export type UsePrismicTextReturnType = {
-	/** Serialized rich text field as plain text. */
+	/**
+	 * Serialized rich text field as plain text.
+	 */
 	text: ComputedRef<string>;
 };
 
@@ -84,11 +88,11 @@ export const usePrismicText = (
  *
  * @internal
  */
-export const PrismicTextImpl = defineComponent({
+export const PrismicTextImpl = /*#__PURE__*/ defineComponent({
 	name: "PrismicText",
 	props: {
 		field: {
-			type: Array as PropType<RichTextField>,
+			type: Array as unknown as PropType<RichTextField>,
 			required: true,
 		},
 		separator: {
@@ -120,7 +124,7 @@ export const PrismicTextImpl = defineComponent({
 			// 	return h(parent, null, { default: () => text.value });
 			// }
 
-			return h(parent as DefineComponent, null, {
+			return h(parent as VNode, null, {
 				default: () => text.value,
 			});
 		};