@prismicio/vue 4.3.1 → 5.0.0-alpha.1

package/src/components/PrismicLink.ts

@@ -1,324 +0,0 @@
-import type {
-	LinkField,
-	LinkResolverFunction,
-	PrismicDocument,
-} from "@prismicio/client"
-import { asLink } from "@prismicio/client"
-import type {
-	AllowedComponentProps,
-	ComponentCustomProps,
-	ComputedRef,
-	ConcreteComponent,
-	DefineComponent,
-	PropType,
-	Raw,
-	VNodeProps,
-} from "vue"
-import { computed, defineComponent, h, reactive, unref } from "vue"
-
-import { getSlots } from "../lib/getSlots"
-import { isInternalURL } from "../lib/isInternalURL"
-import { simplyResolveComponent } from "../lib/simplyResolveComponent"
-
-import type { VueUseOptions } from "../types"
-
-import { usePrismic } from "../usePrismic"
-
-/**
- * The default component rendered for internal URLs.
- */
-const defaultInternalComponent = "router-link"
-
-/**
- * The default component rendered for external URLs.
- */
-const defaultExternalComponent = "a"
-
-/**
- * The default rel attribute rendered for blank target URLs.
- */
-const defaultBlankTargetRelAttribute = "noopener noreferrer"
-
-/**
- * Props for `<PrismicLink />`.
- */
-export type PrismicLinkProps = {
-	/**
-	 * 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`.
-	 *
-	 * @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
-
-	/**
-	 * An explicit `target` attribute to apply to the rendered link.
-	 */
-	target?: string | null
-
-	/**
-	 * An explicit `rel` attribute to apply to the rendered link.
-	 */
-	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 | 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).
-	 *
-	 * @defaultValue The one provided to `@prismicio/vue` plugin if configured, {@link RouterLink} otherwise.
-	 */
-	internalComponent?: string | ConcreteComponent | Raw<DefineComponent>
-
-	/**
-	 * 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 | Raw<DefineComponent>
-}
-
-/**
- * Options for {@link usePrismicLink}.
- */
-export type UsePrismicLinkOptions = VueUseOptions<PrismicLinkProps>
-
-/**
- * Return type of {@link usePrismicLink}.
- */
-export type UsePrismicLinkReturnType = {
-	/**
-	 * Suggested component to render for provided link field.
-	 */
-	type: ComputedRef<string | ConcreteComponent | Raw<DefineComponent>>
-
-	/**
-	 * Resolved anchor `href` value.
-	 */
-	href: ComputedRef<string>
-
-	/**
-	 * Resolved anchor `target` value.
-	 */
-	target: ComputedRef<string | null>
-
-	/**
-	 * Resolved anchor `rel` value.
-	 */
-	rel: ComputedRef<string | null>
-
-	/**
-	 * Resolved link text.
-	 */
-	text: ComputedRef<string | undefined>
-}
-
-/**
- * A low level composable that returns resolved information about a Prismic link
- * field.
- *
- * @param props - {@link UsePrismicLinkOptions}
- *
- * @returns - Resolved link information {@link UsePrismicLinkReturnType}
- */
-export const usePrismicLink = (
-	props: UsePrismicLinkOptions,
-): UsePrismicLinkReturnType => {
-	const { options } = usePrismic()
-
-	const type = computed(() => {
-		const internalComponent =
-			unref(props.internalComponent) ||
-			options.components?.linkInternalComponent ||
-			defaultInternalComponent
-
-		const externalComponent =
-			unref(props.externalComponent) ||
-			options.components?.linkExternalComponent ||
-			defaultExternalComponent
-
-		return href.value && isInternalURL(href.value) && !target.value
-			? internalComponent
-			: externalComponent
-	})
-	const href = computed(() => {
-		const field = unref(props.field)
-		const linkResolver = unref(props.linkResolver) ?? options.linkResolver
-
-		return asLink(field, linkResolver) ?? ""
-	})
-	const target = computed(() => {
-		const field = unref(props.field)
-		const target = unref(props.target)
-
-		if (typeof target !== "undefined") {
-			return target
-		} else {
-			return field && "target" in field && field.target ? field.target : null
-		}
-	})
-	const rel = computed(() => {
-		const rel = unref(props.rel)
-
-		if (typeof rel !== "undefined") {
-			return rel
-		} else if (target.value === "_blank") {
-			const blankTargetRelAttribute = unref(props.blankTargetRelAttribute)
-
-			if (typeof blankTargetRelAttribute !== "undefined") {
-				return blankTargetRelAttribute
-			} else {
-				return typeof options.components?.linkBlankTargetRelAttribute !==
-					"undefined"
-					? options.components.linkBlankTargetRelAttribute
-					: defaultBlankTargetRelAttribute
-			}
-		} else {
-			return null
-		}
-	})
-
-	const text = computed(() => {
-		const field = unref(props.field)
-
-		return field && "text" in field ? field.text : undefined
-	})
-
-	return {
-		type,
-		href,
-		target,
-		rel,
-		text,
-	}
-}
-
-/**
- * `<PrismicLink />` implementation.
- *
- * @internal
- */
-export const PrismicLinkImpl = /*#__PURE__*/ defineComponent({
-	name: "PrismicLink",
-	props: {
-		field: {
-			type: Object as PropType<LinkField | PrismicDocument>,
-			required: true,
-		},
-		linkResolver: {
-			type: Function as PropType<LinkResolverFunction>,
-			default: undefined,
-			required: false,
-		},
-		target: {
-			type: String as PropType<string | null>,
-			default: undefined,
-			required: false,
-		},
-		rel: {
-			type: String as PropType<string | null>,
-			default: undefined,
-			required: false,
-		},
-		blankTargetRelAttribute: {
-			type: String as PropType<string | null>,
-			default: undefined,
-			required: false,
-		},
-		internalComponent: {
-			type: [String, Object, Function] as PropType<
-				string | ConcreteComponent | Raw<DefineComponent>
-			>,
-			default: undefined,
-			required: false,
-		},
-		externalComponent: {
-			type: [String, Object, Function] as PropType<
-				string | ConcreteComponent | Raw<DefineComponent>
-			>,
-			default: undefined,
-			required: false,
-		},
-	},
-	setup(props, { slots }) {
-		// Prevent fatal if user didn't check for field, throws `Invalid prop` warn
-		if (!props.field) {
-			return () => null
-		}
-
-		const { type, href, target, rel, text } = usePrismicLink(props)
-
-		return () => {
-			const parent =
-				type.value === "a" ? "a" : simplyResolveComponent(type.value)
-			const computedSlots = getSlots(
-				parent,
-				slots,
-				reactive({ href: href.value, text: text.value }),
-				text.value,
-			)
-
-			if (typeof parent === "string") {
-				// Fitting anchor tag interface
-				return h(
-					parent,
-					{ href: href.value, target: target.value, rel: rel.value },
-					computedSlots,
-				)
-			} else {
-				// Fitting Vue Router Link interface
-				return h(
-					parent,
-					{ to: href.value, target: target.value, rel: rel.value },
-					computedSlots,
-				)
-			}
-		}
-	},
-})
-
-// export the public type for h/tsx inference
-// also to avoid inline import() in generated d.ts files
-/**
- * Component to render a Prismic link field.
- *
- * @see Component props {@link PrismicLinkProps}
- * @see Templating link fields {@link https://prismic.io/docs/technologies/vue-template-content#links-and-content-relationships}
- */
-export const PrismicLink = PrismicLinkImpl as unknown as {
-	new (): {
-		$props: AllowedComponentProps &
-			ComponentCustomProps &
-			VNodeProps &
-			PrismicLinkProps
-	}
-}

package/src/components/PrismicRichText.ts

@@ -1,283 +0,0 @@
-import type {
-	HTMLFunctionSerializer,
-	HTMLMapSerializer,
-	LinkResolverFunction,
-	RichTextField,
-} from "@prismicio/client"
-import { asHTML, isFilled } from "@prismicio/client"
-import type {
-	AllowedComponentProps,
-	Component,
-	ComponentCustomProps,
-	ComputedRef,
-	ConcreteComponent,
-	DefineComponent,
-	PropType,
-	Raw,
-	VNodeProps,
-} from "vue"
-import {
-	computed,
-	defineComponent,
-	h,
-	inject,
-	nextTick,
-	onBeforeUnmount,
-	ref,
-	unref,
-	watch,
-} from "vue"
-import { routerKey } from "vue-router"
-
-import { isInternalURL } from "../lib/isInternalURL"
-import { simplyResolveComponent } from "../lib/simplyResolveComponent"
-
-import type { VueUseOptions } from "../types"
-
-import { usePrismic } from "../usePrismic"
-
-/**
- * The default component rendered to wrap the HTML output.
- */
-const defaultWrapper = "div"
-
-/**
- * Props for `<PrismicRichText />`.
- */
-export type PrismicRichTextProps = {
-	/**
-	 * The Prismic rich text or title field to render.
-	 */
-	field: RichTextField | null | undefined
-
-	/**
-	 * 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
-
-	/**
-	 * 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}
-	 */
-	serializer?: HTMLFunctionSerializer | HTMLMapSerializer
-
-	/**
-	 * An HTML serializer to customize the way rich text fields are rendered.
-	 *
-	 * @deprecated Use `serializer` instead.
-	 *
-	 * @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
-
-	/**
-	 * An HTML tag name, a component, or a functional component used to wrap the
-	 * output.
-	 *
-	 * @defaultValue `"div"`
-	 */
-	wrapper?: string | ConcreteComponent | Raw<DefineComponent>
-
-	/**
-	 * The HTML value to be rendered when the field is empty. If a fallback is not
-	 * given, `""` (nothing) will be rendered.
-	 */
-	fallback?: string
-}
-
-/**
- * Options for {@link usePrismicRichText}.
- */
-export type UsePrismicRichTextOptions = VueUseOptions<
-	Omit<PrismicRichTextProps, "wrapper">
->
-
-/**
- * Return type of {@link usePrismicRichText}.
- */
-export type UsePrismicRichTextReturnType = {
-	/**
-	 * Serialized rich text field as HTML.
-	 */
-	html: ComputedRef<string>
-}
-
-/**
- * A low level composable that returns a serialized rich text field as HTML.
- *
- * @param props - {@link UsePrismicRichTextOptions}
- *
- * @returns - Serialized rich text field as HTML
- *   {@link UsePrismicRichTextReturnType}
- */
-export const usePrismicRichText = (
-	props: UsePrismicRichTextOptions,
-): UsePrismicRichTextReturnType => {
-	const { options } = usePrismic()
-
-	const html = computed(() => {
-		const field = unref(props.field)
-
-		if (!isFilled.richText(field)) {
-			return unref(props.fallback) ?? ""
-		}
-
-		const linkResolver = unref(props.linkResolver) ?? options.linkResolver
-		const serializer =
-			unref(props.serializer) ??
-			unref(props.htmlSerializer) ??
-			options.richTextSerializer ??
-			options.htmlSerializer
-
-		return asHTML(unref(field), linkResolver, serializer)
-	})
-
-	return {
-		html,
-	}
-}
-
-/**
- * `<PrismicRichText />` implementation.
- *
- * @internal
- */
-export const PrismicRichTextImpl = /*#__PURE__*/ defineComponent({
-	name: "PrismicRichText",
-	props: {
-		field: {
-			type: Array as unknown as PropType<RichTextField | null | undefined>,
-			default: undefined,
-			required: false,
-		},
-		linkResolver: {
-			type: Function as PropType<LinkResolverFunction>,
-			default: undefined,
-			required: false,
-		},
-		serializer: {
-			type: [Function, Object] as PropType<
-				HTMLFunctionSerializer | HTMLMapSerializer
-			>,
-			default: undefined,
-			required: false,
-		},
-		htmlSerializer: {
-			type: [Function, Object] as PropType<
-				HTMLFunctionSerializer | HTMLMapSerializer
-			>,
-			default: undefined,
-			required: false,
-		},
-		wrapper: {
-			type: [String, Object, Function] as PropType<
-				string | ConcreteComponent | Raw<DefineComponent>
-			>,
-			default: undefined,
-			required: false,
-		},
-		fallback: {
-			type: String as PropType<string>,
-			default: undefined,
-			required: false,
-		},
-	},
-	setup(props) {
-		const { html } = usePrismicRichText(props)
-
-		const root = ref<HTMLElement | Comment | Component | null>(null)
-
-		const maybeRouter = inject(routerKey, null)
-		if (maybeRouter) {
-			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 | Comment | null =
-					root.value && "$el" in root.value ? root.value.$el : root.value
-				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(({ element, listener }) =>
-					element.removeEventListener("click", listener),
-				)
-				links = []
-			}
-
-			watch(
-				html,
-				() => {
-					removeListeners()
-					nextTick(addListeners)
-				},
-				{ immediate: true },
-			)
-
-			onBeforeUnmount(() => {
-				removeListeners()
-			})
-		}
-
-		return () => {
-			return h(simplyResolveComponent(props.wrapper || defaultWrapper), {
-				innerHTML: html.value,
-				ref: root,
-			})
-		}
-	},
-})
-
-// export the public type for h/tsx inference
-// also to avoid inline import() in generated d.ts files
-/**
- * Component to render a Prismic rich text field as HTML.
- *
- * @see Component props {@link PrismicRichTextProps}
- * @see Templating rich text and title fields {@link https://prismic.io/docs/technologies/vue-template-content#rich-text-and-titles}
- */
-export const PrismicRichText = PrismicRichTextImpl as unknown as {
-	new (): {
-		$props: AllowedComponentProps &
-			ComponentCustomProps &
-			VNodeProps &
-			PrismicRichTextProps
-	}
-}