@prismicio/vue 2.0.11 → 2.1.0-alpha.0

package/src/components/Link.js

@@ -1,51 +1,87 @@
-import PrismicDom from 'prismic-dom'
-
-export default ({
-  component = 'a'
-}) => ({
-  name: 'PrismicLink',
-  functional: true,
-  props: {
-    field: {
-      type: Object,
-      required: true,
-    },
-    linkResolver: {
-      type: Function,
-      required: false
-    }
-  },
-  render(h, { props, data, children, parent }) {
-    const { field, linkResolver } = props
-
-    if (!field) {
-      return null
-    }
-
-    const url = parent.$prismic
-      ? parent.$prismic.asLink(field, linkResolver)
-      : PrismicDom.Link.url(field, linkResolver || function() { return null; })
-
-    if (url.indexOf('/') === 0) {
-      data.props = data.props || {};
-      data.props.to = url;
-
-      return h(component, data, children);
-    }
-
-    data.attrs = {
-      ...data.attrs,
-      href: url,
-      ...field.target && {
-        target: field.target,
-        rel: 'noopener',
-      },
-    }
-
-    return h(
-      'a',
-      data,
-      children,
-    );
-  }
-})
+import PrismicDom from "prismic-dom";
+
+const isInternalURL = (url) => {
+	/**
+	 * @see Regex101 expression: {@link https://regex101.com/r/1y7iod/1}
+	 */
+	const isInternal = /^\/(?!\/)/.test(url);
+	/**
+	 * @see Regex101 expression: {@link https://regex101.com/r/RnUseS/1}
+	 */
+	const isSpecialLink = !isInternal && !/^https?:\/\//i.test(url);
+
+	return isInternal && !isSpecialLink;
+};
+
+export default ({ component = "a" }) => ({
+	name: "PrismicLink",
+	functional: true,
+	props: {
+		field: {
+			type: Object,
+			required: true,
+		},
+		linkResolver: {
+			type: Function,
+			required: false,
+		},
+		target: {
+			type: String,
+			default: undefined,
+			required: false,
+		},
+		rel: {
+			type: String,
+			default: undefined,
+			required: false,
+		},
+		blankTargetRelAttribute: {
+			type: String,
+			default: "noopener",
+			required: false,
+		},
+	},
+	render(h, { props, data, children, parent }) {
+		const { field, linkResolver } = props;
+
+		if (!field) {
+			return null;
+		}
+
+		const url = parent.$prismic
+			? parent.$prismic.asLink(field, linkResolver)
+			: PrismicDom.Link.url(
+					field,
+					linkResolver ||
+						function () {
+							return null;
+						}
+			  );
+
+		if (isInternalURL(url) && !props.target) {
+			data.props = data.props || {};
+			data.props.to = url;
+
+			return h(component, data, children);
+		}
+
+		data.attrs = {
+			...data.attrs,
+			href: url,
+		};
+
+		if (typeof props.target !== "undefined" || field.target) {
+			data.attrs.target =
+				typeof props.target !== "undefined" ? props.target : field.target;
+
+			if (data.attrs.target === "_blank") {
+				data.attrs.rel =
+					typeof props.rel !== "undefined"
+						? props.rel
+						: props.blankTargetRelAttribute;
+			}
+		}
+
+		return h("a", data, children);
+	},
+});

package/src/components/RichText.js

@@ -1,45 +1,44 @@
-import { RichText } from 'prismic-dom'
+import { RichText } from "prismic-dom";
 
 export default {
-  name: 'PrismicRichText',
-  functional: true,
-  props: {
-    field: {
-      type: Array,
-      required: true,
-    },
-    htmlSerializer: {
-      type: Function,
-      required: false,
-    },
-    wrapper: {
-      type: String,
-      required: false,
-      default: 'div',
-    }
-  },
-  render(h, {
-    props, data, children, parent
-  }) {
-    const { field, htmlSerializer, wrapper } = props
+	name: "PrismicRichText",
+	functional: true,
+	props: {
+		field: {
+			type: Array,
+			required: true,
+		},
+		linkResolver: {
+			type: Function,
+			required: false,
+		},
+		htmlSerializer: {
+			type: Function,
+			required: false,
+		},
+		wrapper: {
+			type: String,
+			required: false,
+			default: "div",
+		},
+	},
+	render(h, { props, data, parent }) {
+		const { field, linkResolver, htmlSerializer, wrapper } = props;
 
-    if (!field) {
-      return null
-    }
-    const innerHTML = RichText.asHtml(
-      field,
-      parent.$prismic.linkResolver,
-      htmlSerializer || parent.$prismic.htmlSerializer
-    )
+		if (!field) {
+			return null;
+		}
+		const innerHTML = RichText.asHtml(
+			field,
+			linkResolver || parent.$prismic.linkResolver,
+			htmlSerializer || parent.$prismic.htmlSerializer
+		);
 
-    return h(
-      wrapper,
-      {
-        ...data,
-        domProps: {
-          innerHTML
-        },
-      },
-    )
-  }
-}
+		return h(wrapper, {
+			...data,
+			domProps: {
+				innerHTML,
+			},
+		});
+	},
+};

package/src/components/SliceZone.js

@@ -0,0 +1,144 @@
+// We need to polyfill process if it doesn't exist, such as in the browser.
+if (typeof process === "undefined") {
+	globalThis.process = { env: {} };
+}
+
+/**
+ * `true` if in the production environment, `false` otherwise.
+ *
+ * This boolean can be used to perform actions only in development environments,
+ * such as logging.
+ */
+const __PRODUCTION__ = process.env.NODE_ENV === "production";
+
+export const getSliceComponentProps = (propsHint) => ({
+	slice: {
+		type: Object,
+		required: true,
+	},
+	index: {
+		type: Number,
+		required: true,
+	},
+	slices: {
+		type: Array,
+		required: true,
+	},
+	context: {
+		type: null,
+		required: true,
+	},
+});
+
+export const TODOSliceComponent = __PRODUCTION__
+	? () => null
+	: {
+			name: "TODOSliceCOmponent",
+			functional: true,
+			props: getSliceComponentProps(),
+			renfer(h, { props, data }) {
+				console.warn(
+					`[SliceZone] Could not find a component for Slice type "${props.slice.slice_type}"`,
+					props.slice
+				);
+
+				return () => {
+					return h(
+						"section",
+						{
+							...data,
+							"data-slice-zone-todo-component": "",
+							"data-slice-type": props.slice.slice_type,
+						},
+						[
+							`Could not find a component for Slice type "${props.slice.slice_type}"`,
+						]
+					);
+				};
+			},
+	  };
+
+// Just mimiced to prevent confusion but doesn't provide any value with version 2 of this kit
+export const defineSliceZoneComponents = (components) => components;
+
+export const SliceZone = {
+	name: "SliceZone",
+	functional: true,
+	props: {
+		slices: {
+			type: Array,
+			required: true,
+		},
+		components: {
+			type: Object,
+			default: undefined,
+			required: false,
+		},
+		resolver: {
+			type: Function,
+			default: undefined,
+			required: false,
+		},
+		context: {
+			type: null,
+			default: undefined,
+			required: false,
+		},
+		defaultComponent: {
+			type: Object,
+			default: undefined,
+			required: false,
+		},
+		wrapper: {
+			type: [String, Object, Function],
+			default: "div",
+			required: false,
+		},
+	},
+	render(h, { props, data }) {
+		// Prevent fatal if user didn't check for field, throws `Invalid prop` warn
+		if (!props.slices) {
+			return () => null;
+		}
+
+		const renderedSlices = computed(() => {
+			return props.slices.map((slice, index) => {
+				let component =
+					props.components && slice.slice_type in props.components
+						? props.components[slice.slice_type]
+						: props.defaultComponent || TODOSliceComponent;
+
+				// TODO: Remove `resolver` in v3 in favor of `components`.
+				if (props.resolver) {
+					const resolvedComponent = props.resolver({
+						slice,
+						sliceName: slice.slice_type,
+						i: index,
+					});
+
+					if (resolvedComponent) {
+						component = resolvedComponent;
+					}
+				}
+
+				const p = {
+					key: `${slice.slice_type}-${index}`,
+					slice,
+					index,
+					context: props.context,
+					slices: props.slices,
+				};
+
+				return h(component, p);
+			});
+		});
+
+		const parent = props.wrapper;
+
+		if (typeof parent === "string") {
+			return h(parent, data, renderedSlices.value);
+		} else {
+			return h(parent, data, { default: () => renderedSlices.value });
+		}
+	},
+};

package/src/components/Text.js

@@ -0,0 +1,37 @@
+import { RichText } from "prismic-dom";
+
+export default {
+	name: "PrismicText",
+	functional: true,
+	props: {
+		field: {
+			type: Array,
+			required: true,
+		},
+		separator: {
+			type: String,
+			default: undefined,
+			required: false,
+		},
+		wrapper: {
+			type: String,
+			required: false,
+			default: "div",
+		},
+	},
+	render(h, { props, data, children, parent }) {
+		const { field, separator, wrapper } = props;
+
+		if (!field) {
+			return null;
+		}
+		const innerHTML = RichText.asText(field, separator);
+
+		return h(wrapper, {
+			...data,
+			domProps: {
+				innerHTML,
+			},
+		});
+	},
+};

package/src/components/index.js

@@ -1,27 +1,31 @@
-import Embed from './Embed'
-import Image from './Image'
-import Link from './Link'
-import RichText from './RichText'
+import Embed from "./Embed";
+import Image from "./Image";
+import Link from "./Link";
+import RichText from "./RichText";
+import Text from "./Text";
+import { SliceZone } from "./SliceZone";
 
-const NuxtLink = Link({ component: 'nuxt-link' })
-const VueRouterLink = Link({ component: 'router-link' })
+const NuxtLink = Link({ component: "nuxt-link" });
+const VueRouterLink = Link({ component: "router-link" });
 
 const exp = {
-  common: {
-    Embed,
-    Image,
-    RichText,
-  },
-  nuxt: {
-    Link: NuxtLink,
-  },
-  vueRouter: {
-    Link: VueRouterLink,
-  }
-}
+	common: {
+		Embed,
+		Image,
+		RichText,
+		Text,
+		SliceZone,
+	},
+	nuxt: {
+		Link: NuxtLink,
+	},
+	vueRouter: {
+		Link: VueRouterLink,
+	},
+};
 
-export const common = exp.common
-export const nuxt = exp.nuxt
-export const vueRouter = exp.vueRouter
+export const common = exp.common;
+export const nuxt = exp.nuxt;
+export const vueRouter = exp.vueRouter;
 
-export default exp
+export default exp;

package/src/components-bundler.js

@@ -1,7 +1,12 @@
-import exp from './components'
+import exp from "./components";
 
-export const common = exp.common
-export const nuxt = exp.nuxt
-export const vueRouter = exp.vueRouter
+export {
+	getSliceComponentProps,
+	defineSliceZoneComponents,
+} from "./components/SliceZone";
 
-export default exp
+export const common = exp.common;
+export const nuxt = exp.nuxt;
+export const vueRouter = exp.vueRouter;
+
+export default exp;

package/src/index.js

@@ -1,49 +1,56 @@
-import prismicJS from '@prismicio/client'
+import prismicJS from "@prismicio/client";
 
-import Components from './components'
-import { asHtml, asText, asDate, asLink } from './methods'
+import Components from "./components";
+import { asHtml, asText, asDate, asLink } from "./methods";
 
 function attachMethods(Vue, options) {
-  Vue.prototype.$prismic.asHtml = function(richText, linkResolver, htmlSerializer) {
-    return asHtml(
-      richText,
-      linkResolver || options.linkResolver,
-      htmlSerializer || options.htmlSerializer
-    )
-  }
-  Vue.prototype.$prismic.asText = asText
-  Vue.prototype.$prismic.richTextAsPlain = asText
-  Vue.prototype.$prismic.asDate = asDate
-  Vue.prototype.$prismic.asLink = function(link, linkResolver) {
-    return asLink(link, linkResolver || options.linkResolver)
-  }
+	Vue.prototype.$prismic.asHtml = function(
+		richText,
+		linkResolver,
+		htmlSerializer
+	) {
+		return asHtml(
+			richText,
+			linkResolver || options.linkResolver,
+			htmlSerializer || options.htmlSerializer
+		);
+	};
+	Vue.prototype.$prismic.asHTML = Vue.prototype.$prismic.asHtml;
+	Vue.prototype.$prismic.asText = asText;
+	Vue.prototype.$prismic.richTextAsPlain = asText;
+	Vue.prototype.$prismic.asDate = asDate;
+	Vue.prototype.$prismic.asLink = function(link, linkResolver) {
+		return asLink(link, linkResolver || options.linkResolver);
+	};
 }
 
 const PrismicVue = {
-  install: function (Vue, options) {
-    const { linkType = 'vueRouter' } = options
-    Vue.prototype.$prismic = prismicJS
-    Vue.prototype.$prismic.endpoint = options.endpoint
-    Vue.prototype.$prismic.linkResolver = options.linkResolver
-    Vue.prototype.$prismic.htmlSerializer = options.htmlSerializer
-    Vue.prototype.$prismic.client = prismicJS.client(options.endpoint, options.apiOptions)
+	install: function(Vue, options) {
+		const { linkType = "vueRouter" } = options;
+		Vue.prototype.$prismic = prismicJS;
+		Vue.prototype.$prismic.endpoint = options.endpoint;
+		Vue.prototype.$prismic.linkResolver = options.linkResolver;
+		Vue.prototype.$prismic.htmlSerializer = options.htmlSerializer;
+		Vue.prototype.$prismic.client = prismicJS.client(
+			options.endpoint,
+			options.apiOptions
+		);
 
-    attachMethods(Vue, options)
+		attachMethods(Vue, options);
 
-    const components = {
-      ...Components.common,
-      ...Components[linkType]
-    }
+		const components = {
+			...Components.common,
+			...Components[linkType]
+		};
 
-    /**
-     * Global registration of common components + stack specific components.
-     * Currently, only Nuxt links differ though. Use `linkType: 'nuxt'` in that case.
-     */
-    Object.entries(components)
-    .forEach(([_, c]) => {
-      Vue.component(c.name, c)
-    })
-  }
-}
+		/**
+		 * Global registration of common components + stack specific components.
+		 * Currently, only Nuxt links differ though. Use `linkType: 'nuxt'` in that case.
+		 */
+		Object.entries(components).forEach(([_, c]) => {
+			Vue.component(c.name, c);
+		});
+	}
+};
 
-export default PrismicVue
+export default PrismicVue;