@prismicio/vue 5.3.0 → 6.0.0-canary.331d154

package/src/PrismicText.vue

@@ -1,21 +1,14 @@
 <script lang="ts" setup>
 import type { RichTextField } from "@prismicio/client"
-import { asText, isFilled } from "@prismicio/client"
+import { asText } from "@prismicio/client"
 import { DEV } from "esm-env"
 import { watchEffect } from "vue"
 
-import Wrapper from "./lib/Wrapper.vue"
 import { devMsg } from "./lib/devMsg"
 
-import type { ComponentOrTagName } from "./types"
-
-/**
- * Props for `<PrismicText />`.
- */
+/** Props for `<PrismicText />`. */
 export type PrismicTextProps = {
-	/**
-	 * The Prismic rich text field to render.
-	 */
+	/** The Prismic rich text field to render. */
 	field: RichTextField | null | undefined
 
 	/**
@@ -30,14 +23,6 @@ export type PrismicTextProps = {
 	 * @defaultValue `" "` (a whitespace)
 	 */
 	separator?: string
-
-	/**
-	 * An HTML tag name or a component used to wrap the output. `<PrismicText />`
-	 * is not wrapped by default.
-	 *
-	 * @defaultValue `"template"` (no wrapper)
-	 */
-	wrapper?: ComponentOrTagName
 }
 
 const props = defineProps<PrismicTextProps>()
@@ -57,7 +42,5 @@ if (DEV) {
 </script>
 
 <template>
-	<Wrapper v-if="isFilled.richText(field) || fallback" :wrapper="wrapper">
-		{{ asText(field) || fallback }}
-	</Wrapper>
+	{{ asText(field) || fallback || "" }}
 </template>

package/src/SliceSimulator.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import {
+	getDefaultProps,
+	getDefaultSlices,
+	getDefaultMessage,
+	onClickHandler,
+	disableEventHandler,
+	simulatorClass,
+	simulatorRootClass,
+	StateEventType,
+	SimulatorManager,
+} from "@prismicio/simulator/kit";
+
+/** Props for `<SliceSimulator />`. */
+export type SliceSimulatorProps = {
+	/** The z-index value of the simulator so that it's displayed above layout elements. */
+	zIndex?: number
+	/** The background color of the simulator to match website design. */
+	background?: string
+}
+
+const props = defineProps<SliceSimulatorProps>()
+defineOptions({ name: "SliceSimulator" })
+
+const slices = ref(getDefaultSlices());
+const message = ref(getDefaultMessage());
+
+const simulatorManager = new SimulatorManager();
+
+onMounted(() => {
+	simulatorManager.state.on(
+		StateEventType.Slices,
+		(_slices) => { slices.value = _slices; },
+		"simulator-slices",
+	);
+	simulatorManager.state.on(
+		StateEventType.Message,
+		(_message) => { message.value = _message; },
+		"simulator-message",
+	);
+
+	simulatorManager.init();
+});
+
+onUnmounted(() => {
+	simulatorManager.state.off(StateEventType.Slices, "simulator-slices");
+
+	simulatorManager.state.off(StateEventType.Message, "simulator-message");
+});
+</script>
+
+<template>
+	<div
+		:class="simulatorClass"
+		:style="{
+			zIndex: props.zIndex || getDefaultProps().zIndex,
+			position: 'fixed',
+			top: 0,
+			left: 0,
+			width: '100%',
+			height: '100vh',
+			overflow: 'auto',
+			background: props.background || getDefaultProps().background,
+		}"
+	>
+		<article v-if="message" v-html="message" />
+		<div
+			v-else-if="slices.length"
+			id="root"
+			:class="simulatorRootClass"
+			@click.capture="onClickHandler"
+			@submit.capture="disableEventHandler"
+		>
+			<slot :slices="slices" />
+		</div>
+	</div>
+</template>

package/src/SliceZone/SliceZone.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import { computed } from "vue"
 
-import Wrapper from "../lib/Wrapper.vue"
-
 import type { ComponentOrTagName } from "../types"
 import type {
 	SliceComponentType,
@@ -11,8 +9,6 @@ import type {
 	SliceZoneLike,
 } from "./types"
 
-import { usePrismic } from "../usePrismic"
-
 import { TODOSliceComponent } from "./TODOSliceComponent"
 
 /**
@@ -21,48 +17,35 @@ import { TODOSliceComponent } from "./TODOSliceComponent"
  * @typeParam TContext - Arbitrary data made available to all Slice components
  */
 export type SliceZoneProps<TContext = unknown> = {
-	/**
-	 * List of Slice data from the Slice Zone.
-	 */
+	/** List of slice data from the slice zone. */
 	slices: SliceZoneLike<SliceLike | (SliceLike & Record<string, unknown>)>
 
-	/**
-	 * A record mapping Slice types to Vue components.
-	 */
+	/** A record mapping slice types to React components. */
 	components?: SliceZoneComponents
 
 	/**
 	 * The Vue component rendered if a component mapping from the `components`
 	 * prop cannot be found.
-	 *
-	 * @remarks
-	 * Components will be rendered using the {@link SliceComponentProps} interface.
-	 *
-	 * @defaultValue The Slice Zone default component provided to `@prismicio/vue` plugin if configured, otherwise `null` when `process.env.NODE_ENV === "production"` else {@link TODOSliceComponent}.
 	 */
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	defaultComponent?: SliceComponentType<any, TContext>
 
-	/**
-	 * Arbitrary data made available to all Slice components.
-	 */
+	/** Arbitrary data made available to all slice components. */
 	context?: TContext
-
-	/**
-	 * An HTML tag name or a component used to wrap the output. `<SliceZone />` is
-	 * not wrapped by default.
-	 *
-	 * @defaultValue `"template"` (no wrapper)
-	 */
-	wrapper?: ComponentOrTagName
 }
 
 const props = defineProps<SliceZoneProps>()
 defineOptions({ name: "SliceZone" })
 
-const { options } = usePrismic()
+const renderedSlices = computed<
+	{
+		is: ComponentOrTagName
+		key: string
+		props: Record<string, unknown>
+	}[]
+>(() => {
+	if (!props.slices) return []
 
-const renderedSlices = computed(() => {
 	return props.slices.map((slice, index) => {
 		const type =
 			"slice_type" in slice ? (slice.slice_type as string) : slice.type
@@ -72,10 +55,7 @@ const renderedSlices = computed(() => {
 				? slice.id
 				: `${index}-${JSON.stringify(slice)}`
 
-		const is =
-			props.components?.[type] ||
-			props.defaultComponent ||
-			options.components?.sliceZoneDefaultComponent
+		const is = props.components?.[type] || props.defaultComponent
 
 		if (!is) {
 			return { is: TODOSliceComponent, key, props: { slice } }
@@ -102,12 +82,10 @@ const renderedSlices = computed(() => {
 </script>
 
 <template>
-	<Wrapper v-if="slices" :wrapper="wrapper">
-		<component
-			v-for="renderedSlice in renderedSlices"
-			:is="renderedSlice.is"
-			:key="renderedSlice.key"
-			v-bind="renderedSlice.props"
-		/>
-	</Wrapper>
+	<component
+		v-for="renderedSlice in renderedSlices"
+		:is="renderedSlice.is"
+		:key="renderedSlice.key"
+		v-bind="renderedSlice.props"
+	/>
 </template>

package/src/SliceZone/TODOSliceComponent.ts

@@ -1,6 +1,6 @@
 import { DEV } from "esm-env"
-import type { PropType } from "vue"
 import { computed, defineComponent, h, watchEffect } from "vue"
+import type { PropType } from "vue"
 
 import type { SliceComponentType, SliceLike } from "./types"
 
@@ -11,6 +11,7 @@ import type { SliceComponentType, SliceLike } from "./types"
  * This is also the default Vue component rendered when a component mapping
  * cannot be found in `<SliceZone />`.
  */
+// oxlint-disable-next-line explicit-module-boundary-types
 export const TODOSliceComponent = DEV
 	? /*#__PURE__*/ (defineComponent({
 			name: "TODOSliceComponent",

package/src/SliceZone/types.ts

@@ -1,9 +1,6 @@
 import type { Slice } from "@prismicio/client"
-import type {
-	DefineComponent,
-	FunctionalComponent,
-	defineAsyncComponent,
-} from "vue"
+
+import type { Component } from "../types"
 
 /**
  * Returns the type of a `SliceLike` type.
@@ -83,19 +80,13 @@ export type SliceComponentProps<
 	TSlice extends SliceLike = SliceLike,
 	TContext = unknown,
 > = {
-	/**
-	 * Slice data for this component.
-	 */
+	/** Slice data for this component. */
 	slice: TSlice
 
-	/**
-	 * The index of the Slice in the Slice Zone.
-	 */
+	/** The index of the Slice in the Slice Zone. */
 	index: number
 
-	/**
-	 * All Slices from the Slice Zone to which the Slice belongs.
-	 */
+	/** All Slices from the Slice Zone to which the Slice belongs. */
 	// TODO: We have to keep this list of Slices general due to circular
 	// reference limtiations. If we had another generic to determine the full
 	// union of Slice types, it would include TSlice. This causes TypeScript to
@@ -121,14 +112,7 @@ export type SliceComponentType<
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	TSlice extends SliceLike = any,
 	TContext = unknown,
-> =
-	// For reference within TypeScript files when `*.vue` type cannot be inferred
-	// eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/no-explicit-any
-	| DefineComponent<{}, {}, any>
-	// Likewise, for reference with TypeScript files.
-	| ReturnType<typeof defineAsyncComponent>
-	| DefineComponent<SliceComponentProps<TSlice, TContext>>
-	| FunctionalComponent
+> = Component<SliceComponentProps<TSlice, TContext>>
 
 /**
  * A record of Slice types mapped to Vue components. Each components will be

package/src/createPrismic.ts

@@ -1,154 +1,105 @@
-import type {
-	Client,
-	HTMLRichTextFunctionSerializer,
-	HTMLRichTextMapSerializer,
-	LinkResolverFunction,
-} from "@prismicio/client"
-import {
-	asDate,
-	asHTML,
-	asImagePixelDensitySrcSet,
-	asImageSrc,
-	asImageWidthSrcSet,
-	asLink,
-	asLinkAttrs,
-	asText,
-	cookie,
-	createClient,
-	documentToLinkField,
-	filter,
-	isFilled,
-} from "@prismicio/client"
-import type { App } from "vue"
-
-import type {
-	PrismicPlugin,
-	PrismicPluginClient,
-	PrismicPluginHelpers,
-	PrismicPluginOptions,
-} from "./types"
-
-import PrismicRichText from "./PrismicRichText/PrismicRichText.vue"
-import PrismicTable from "./PrismicTable/PrismicTable.vue"
-import SliceZone from "./SliceZone/SliceZone.vue"
-
-import PrismicEmbed from "./PrismicEmbed.vue"
-import PrismicImage from "./PrismicImage.vue"
-import PrismicLink from "./PrismicLink.vue"
-import PrismicText from "./PrismicText.vue"
-import { prismicKey } from "./usePrismic"
+import type { CreateClient, LinkResolverFunction } from "@prismicio/client"
+import { isFilled } from "@prismicio/client"
+import type { App, InjectionKey } from "vue"
+import { inject } from "vue"
+
+import type { ComponentOrTagName } from "./types"
+
+import type { RichTextComponents } from "./PrismicRichText"
+import type { TableComponents } from "./PrismicTable"
+
+const prismicKey = Symbol.for(
+	"@prismicio/vue/plugin",
+) as InjectionKey<PrismicPlugin>
+
+/** Components configuration. */
+type ComponentsConfig = {
+	/** The default component rendered for internal URLs. */
+	linkInternalComponent?: ComponentOrTagName
+
+	/** The default component rendered for external URLs. */
+	linkExternalComponent?: ComponentOrTagName
+
+	/**
+	 * The default components or shorthand definitions for rich text and table
+	 * components.
+	 *
+	 * @see {@link https://prismic.io/docs/fields/rich-text}
+	 * @see {@link https://prismic.io/docs/fields/table}
+	 */
+	richTextComponents?: RichTextComponents & TableComponents
+}
+
+/** Prismic Vue plugin configuration. */
+export type PrismicPluginConfig = {
+	/** A Prismic client instance to inject into the Vue app. */
+	client: ReturnType<CreateClient>
+
+	/**
+	 * A default link resolver used to resolve links when route resolvers cannot be used.
+	 *
+	 * @see {@link https://prismic.io/docs/routes}
+	 */
+	linkResolver?: LinkResolverFunction
+
+	/** Components configuration. */
+	components?: ComponentsConfig
+}
 
 /**
- * Creates a `@prismicio/vue` plugin instance that can be used by a Vue app.
- *
- * @param options - {@link PrismicPluginOptions}
- *
- * @returns `@prismicio/vue` plugin instance {@link PrismicPlugin}
- *
- * @see Prismic Official Vue.js documentation: {@link https://prismic.io/docs/technologies/vuejs}
- * @see Plugin repository: {@link https://github.com/prismicio/prismic-vue}
+ * Prismic Vue plugin interface accessible through `usePrismic()` and
+ * `$prismic`.
  */
-export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
-	// Create plugin client
-	let client: Client
-	if (options.client) {
-		client = options.client
-	} else {
-		client = createClient(options.endpoint, options.clientConfig)
-	}
+export type PrismicPlugin = {
+	/** A Prismic client that can be used to query content from a repository. */
+	client: ReturnType<CreateClient>
 
-	const prismicClient: PrismicPluginClient = {
-		client,
-		filter,
-		cookie,
-	}
+	/** Helpers to determine if a field is filled. */
+	isFilled: typeof isFilled
 
-	// Create plugin helpers
-	const prismicHelpers: PrismicPluginHelpers = {
-		asText,
-		asHTML: (richTextField, ...config) => {
-			const [configOrLinkResolver, maybeHTMLSerializer] = config
-
-			return asHTML(
-				richTextField,
-				typeof configOrLinkResolver === "function" ||
-					configOrLinkResolver == null
-					? {
-							linkResolver: configOrLinkResolver || options.linkResolver,
-							serializer:
-								(maybeHTMLSerializer as
-									| HTMLRichTextFunctionSerializer
-									| HTMLRichTextMapSerializer) || options.richTextSerializer,
-						}
-					: {
-							linkResolver: options.linkResolver,
-							serializer: options.richTextSerializer,
-							...configOrLinkResolver,
-						},
-			)
-		},
-		asLink: (linkField, config) => {
-			return asLink(
-				linkField,
-				typeof config === "function"
-					? { linkResolver: config }
-					: {
-							linkResolver: options.linkResolver,
-							// TODO: For some reasons, TypeScript narrows the type to "unknown" where it's supposed to be a union
-							// eslint-disable-next-line @typescript-eslint/no-explicit-any
-							...(config as any),
-						},
-			)
-		},
-		asLinkAttrs: (linkField, config) => {
-			return asLinkAttrs(linkField, {
-				// TODO: We can't really retrieve the generic type here, this might cause some unexpected type error in some edge-case scenario
-				// eslint-disable-next-line @typescript-eslint/no-explicit-any
-				linkResolver: options.linkResolver as LinkResolverFunction<any>,
-				...config,
-			})
-		},
-		asDate,
-		asImageSrc,
-		asImageWidthSrcSet,
-		asImagePixelDensitySrcSet,
-		isFilled,
-		documentToLinkField,
-	}
+	/**
+	 * The default link resolver used to resolve links when route resolvers cannot be used.
+	 *
+	 * @see {@link https://prismic.io/docs/routes}
+	 */
+	linkResolver?: LinkResolverFunction
 
-	// Create plugin interface
-	const prismic: PrismicPlugin = {
-		options,
+	/** @internal */
+	readonly components: ComponentsConfig
 
-		...prismicClient,
-		...prismicHelpers,
+	/** @internal */
+	install: (app: App) => void
+}
 
+/** Creates a Prismic Vue plugin instance that can be used by a Vue app. */
+export const createPrismic = (config: PrismicPluginConfig): PrismicPlugin => {
+	return {
+		...config,
+		components: config.components || {},
+		isFilled,
 		install(app: App): void {
 			app.provide(prismicKey, this)
 			app.config.globalProperties.$prismic = this
-
-			if (options.injectComponents !== false) {
-				app.component(PrismicLink.name!, PrismicLink)
-				app.component(PrismicEmbed.name!, PrismicEmbed)
-				app.component(PrismicImage.name!, PrismicImage)
-				app.component(PrismicTable.name!, PrismicTable)
-				app.component(PrismicText.name!, PrismicText)
-				app.component(PrismicRichText.name!, PrismicRichText)
-				app.component(SliceZone.name!, SliceZone)
-			}
 		},
 	}
+}
 
-	return prismic
+/**
+ * Access the Prismic Vue plugin interface.
+ *
+ * @example
+ *
+ * ```typescript
+ * const { client, isFilled } = usePrismic()
+ * ```
+ */
+export const usePrismic = (): PrismicPlugin => {
+	return inject(prismicKey, { components: {} } as PrismicPlugin)
 }
 
 declare module "vue" {
 	export interface ComponentCustomProperties {
-		/**
-		 * `@prismicio/vue` plugin interface exposed on `this`.
-		 *
-		 * @see `@prismicio/vue` plugin interface {@link PrismicPlugin}
-		 */
+		/** The Prismic Vue plugin interface. */
 		$prismic: PrismicPlugin
 	}
 }

package/src/index.ts

@@ -1,39 +1,24 @@
-import PrismicRichText from "./PrismicRichText/PrismicRichText.vue"
-import PrismicTable from "./PrismicTable/PrismicTable.vue"
-import SliceZone from "./SliceZone/SliceZone.vue"
-
-import PrismicEmbed from "./PrismicEmbed.vue"
-import PrismicImage from "./PrismicImage.vue"
-import PrismicLink from "./PrismicLink.vue"
-import PrismicText from "./PrismicText.vue"
-
-export type { SliceZoneProps } from "./SliceZone/SliceZone.vue"
+export { default as PrismicRichText } from "./PrismicRichText/PrismicRichText.vue"
 export type { PrismicRichTextProps } from "./PrismicRichText/PrismicRichText.vue"
+export { getRichTextComponentProps } from "./PrismicRichText"
+export type { RichTextComponents, RichTextComponentProps } from "./PrismicRichText"
+
+export { default as PrismicTable } from "./PrismicTable/PrismicTable.vue"
 export type { PrismicTableProps } from "./PrismicTable/PrismicTable.vue"
+export { getTableComponentProps } from "./PrismicTable"
+export type { TableComponents } from "./PrismicTable"
 
-export type { PrismicEmbedProps } from "./PrismicEmbed.vue"
+export { default as PrismicImage } from "./PrismicImage.vue"
 export type { PrismicImageProps } from "./PrismicImage.vue"
-export type { PrismicLinkProps } from "./PrismicLink.vue"
-export type { PrismicTextProps } from "./PrismicText.vue"
 
-export {
-	SliceZone,
-	PrismicEmbed,
-	PrismicImage,
-	PrismicLink,
-	PrismicTable,
-	PrismicText,
-	PrismicRichText,
-}
-
-export { getRichTextComponentProps } from "./PrismicRichText"
-export type {
-	VueRichTextSerializer,
-	RichTextComponentProps,
-} from "./PrismicRichText"
+export { default as PrismicLink } from "./PrismicLink.vue"
+export type { PrismicLinkProps } from "./PrismicLink.vue"
 
-export { getTableComponentProps } from "./PrismicTable"
+export { default as PrismicText } from "./PrismicText.vue"
+export type { PrismicTextProps } from "./PrismicText.vue"
 
+export { default as SliceZone } from "./SliceZone/SliceZone.vue"
+export type { SliceZoneProps } from "./SliceZone/SliceZone.vue"
 export {
 	TODOSliceComponent,
 	defineSliceZoneComponents,
@@ -49,7 +34,8 @@ export type {
 	SliceZoneLike,
 } from "./SliceZone"
 
-export type { PrismicPluginOptions, PrismicPlugin } from "./types"
+export { default as SliceSimulator } from "./SliceSimulator.vue"
+export type { SliceSimulatorProps } from "./SliceSimulator.vue"
 
-export { createPrismic } from "./createPrismic"
-export { usePrismic, prismicKey } from "./usePrismic"
+export { createPrismic, usePrismic } from "./createPrismic"
+export type { PrismicPlugin, PrismicPluginConfig } from "./createPrismic"

package/src/lib/isInternalURL.ts

@@ -7,13 +7,9 @@
  */
 // TODO: This does not detect all relative URLs as internal, such as `about` or `./about`. This function assumes relative URLs start with a "/"`.
 export const isInternalURL = (url: string): boolean => {
-	/**
-	 * @see Regex101 expression: {@link https://regex101.com/r/1y7iod/1}
-	 */
+	/** @see Regex101 expression: {@link https://regex101.com/r/1y7iod/1} */
 	const isInternal = /^\/(?!\/)/.test(url)
-	/**
-	 * @see Regex101 expression: {@link https://regex101.com/r/RnUseS/1}
-	 */
+	/** @see Regex101 expression: {@link https://regex101.com/r/RnUseS/1} */
 	const isSpecialLink = !isInternal && !/^https?:\/\//i.test(url)
 
 	return isInternal && !isSpecialLink