@prismicio/vue 2.0.10 → 2.1.0

package/package.json

@@ -1,48 +1,88 @@
 {
-  "name": "@prismicio/vue",
-  "version": "2.0.10",
-  "description": "Vue.js plugin to facilitate integration of content managed with Prismic",
-  "license": "Apache-2.0",
-  "repository": "github:prismicio/prismic-vue",
-  "author": "Prismic",
-  "components": "dist/components.esm.js",
-  "main": "dist/prismic-vue.common.js",
-  "module": "dist/prismic-vue.esm.js",
-  "unpkg": "dist/prismic-vue.min.js",
-  "jsdelivr": "dist/prismic-vue.min.js",
-  "files": [
-    "components",
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "build": "rollup -c --environment BUILD:production && uglifyjs dist/prismic-vue.js -o dist/prismic-vue.min.js",
-    "beauty": "rollup -c",
-    "dev": "rollup -c --watch --environment BUILD:development",
-    "visualize": "rollup -c --config-visualize"
-  },
-  "peerDependencies": {
-    "@prismicio/client": "^4.0.0",
-    "prismic-dom": "^2.2.5"
-  },
-  "engines": {
-    "node": ">= 6.0.0",
-    "npm": ">= 3.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.6.0",
-    "@babel/preset-env": "^7.6.0",
-    "@prismicio/client": "^4.0.0",
-    "postcss": "^7.0.35",
-    "prismic-dom": "^2.2.5",
-    "rollup": "^0.62.0",
-    "rollup-plugin-auto-named-exports": "^1.0.0-beta.3",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-node-resolve": "^3.3.0",
-    "rollup-plugin-visualizer": "^2.6.0",
-    "rollup-plugin-vue": "^4.3.0",
-    "uglify-js": "^3.4.3",
-    "vue-template-compiler": "^2.6.12"
-  }
+	"name": "@prismicio/vue",
+	"version": "2.1.0",
+	"description": "Vue plugin and components to fetch and present Prismic content",
+	"keywords": [
+		"prismic",
+		"vue",
+		"plugin"
+	],
+	"repository": {
+		"type": "git",
+		"url": "ssh://git@github.com/prismicio/prismic-vue.git"
+	},
+	"license": "Apache-2.0",
+	"author": "Prismic <contact@prismic.io> (https://prismic.io)",
+	"components": "dist/components.esm.js",
+	"main": "dist/prismic-vue.common.js",
+	"module": "dist/prismic-vue.esm.js",
+	"unpkg": "dist/prismic-vue.min.js",
+	"jsdelivr": "dist/prismic-vue.min.js",
+	"files": [
+		"components",
+		"dist",
+		"src",
+		"vetur"
+	],
+	"scripts": {
+		"build": "rollup -c --environment BUILD:production && uglifyjs dist/prismic-vue.js -o dist/prismic-vue.min.js",
+		"dev": "rollup -c --watch --environment BUILD:development",
+		"prepare": "npm run build",
+		"format": "prettier --write .",
+		"release": "npm run build && npm run test && standard-version && git push --follow-tags && npm run build && npm publish",
+		"release:dry": "standard-version --dry-run",
+		"release:alpha": "npm run build && npm run test && standard-version --release-as minor --prerelease alpha && git push --follow-tags && npm run build && npm publish --tag alpha",
+		"release:alpha:dry": "standard-version --release-as minor --prerelease alpha --dry-run",
+		"test": "npm run lint && npm run unit",
+		"lint": "eslint --ext .js,.ts .",
+		"unit": "nyc --reporter=lcovonly --reporter=text --exclude-after-remap=false ava"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.16.0",
+		"@babel/preset-env": "^7.16.4",
+		"@prismicio/client": "^5.1.0",
+		"@prismicio/mock": "^0.0.6",
+		"@prismicio/types": "^0.1.18",
+		"@vue/compiler-sfc": "^3.2.23",
+		"@vue/test-utils": "^1.3.0",
+		"ava": "^3.15.0",
+		"eslint": "^8.3.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-prettier": "^4.0.0",
+		"eslint-plugin-vue": "^8.1.1",
+		"esm": "^3.2.25",
+		"jsdom": "^18.1.1",
+		"jsdom-global": "^3.0.2",
+		"nyc": "^15.1.0",
+		"prettier": "^2.5.0",
+		"prismic-dom": "^2.2.6",
+		"rollup": "^2.60.2",
+		"rollup-plugin-auto-named-exports": "^1.0.0-beta.3",
+		"rollup-plugin-babel": "^4.4.0",
+		"rollup-plugin-commonjs": "^10.1.0",
+		"rollup-plugin-node-resolve": "^5.2.0",
+		"rollup-plugin-visualizer": "^5.5.2",
+		"rollup-plugin-vue": "^6.0.0",
+		"sinon": "^12.0.1",
+		"standard-version": "^9.3.2",
+		"uglify-js": "^3.14.3",
+		"vue": "^2.6.14",
+		"vue-router": "^3.5.3",
+		"vue-template-compiler": "2.6.14"
+	},
+	"peerDependencies": {
+		"@prismicio/client": "^4.0.0 || ^5.0.0",
+		"prismic-dom": "^2.2.0",
+		"vue": "^2.6.0"
+	},
+	"engines": {
+		"node": ">= 6.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"vetur": {
+		"tags": "vetur/tags.json",
+		"attributes": "vetur/attributes.json"
+	}
 }

package/src/components/Embed.js

@@ -1,37 +1,37 @@
 export default {
-  name: 'PrismicEmbed',
-  functional: true,
-  props: {
-    field: {
-      type: Object,
-      required: true
-    },
-    wrapper: {
-      type: String,
-      required: false,
-      default: 'div'
-    }
-  },
-  render(h, { props, data }) {
-    const { field, wrapper } = props
-    if (!field || !field.html) {
-      return null
-    }
+	name: 'PrismicEmbed',
+	functional: true,
+	props: {
+		field: {
+			type: Object,
+			required: true
+		},
+		wrapper: {
+			type: String,
+			required: false,
+			default: 'div'
+		}
+	},
+	render(h, { props, data }) {
+		const { field, wrapper } = props
+		if (!field || !field.html) {
+			return null
+		}
 
-    const { embed_url: embedUrl, type, provider_name: providerName } = field
+		const { embed_url: embedUrl, type, provider_name: providerName } = field
 
-    const attrs = {
-      ...data.attrs,
-      ...(embedUrl && { 'data-oembed': embedUrl }),
-      ...(type && { 'data-oembed-type': type }),
-      ...(providerName && { 'data-oembed-provider': providerName })
-    }
+		const attrs = {
+			...data.attrs,
+			...(embedUrl && { 'data-oembed': embedUrl }),
+			...(type && { 'data-oembed-type': type }),
+			...(providerName && { 'data-oembed-provider': providerName })
+		}
 
-    return h(wrapper, {
-      ...Object.assign(data, { attrs }),
-      domProps: {
-        innerHTML: field.html
-      }
-    })
-  }
+		return h(wrapper, {
+			...Object.assign(data, { attrs }),
+			domProps: {
+				innerHTML: field.html
+			}
+		})
+	}
 }

package/src/components/Image.js

@@ -1,25 +1,30 @@
 export default {
-  name: 'PrismicImage',
-  functional: true,
-  props: {
-    field: {
-      type: Object,
-      required: true,
-    },
-  },
-  render(h, { props, data }) {
-    const { url, alt, copyright } = props.field;
+	name: 'PrismicImage',
+	functional: true,
+	props: {
+		field: {
+			type: Object,
+			required: true,
+		},
+	},
+	render(h, { props, data }) {
+		const { field } = props;
+		if (!field) {
+			return null
+		}
 
-    return h(
-      'img',
-      Object.assign(data, {
-        attrs: {
-          ...data.attrs,
-          src: url,
-          alt,
-          copyright
-        }
-      })
-    );
-  },
+		const { url, alt, copyright } = field;
+
+		return h(
+			'img',
+			Object.assign(data, {
+				attrs: {
+					...data.attrs,
+					src: url,
+					alt,
+					copyright
+				}
+			})
+		);
+	},
 };

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 noreferrer",
+			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") {
+			data.attrs.target = props.target;
+		} else if (field.target) {
+			data.attrs.target = field.target;
+		}
+
+		if (typeof props.rel !== "undefined") {
+			data.attrs.rel = props.rel;
+		} else if (data.attrs.target === "_blank") {
+			data.attrs.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 ? linkResolver : parent.$prismic ? parent.$prismic.linkResolver : undefined,
+			htmlSerializer ? htmlSerializer : parent.$prismic ? parent.$prismic.htmlSerializer : undefined,
+		);
 
-    return h(
-      wrapper,
-      {
-        ...data,
-        domProps: {
-          innerHTML
-        },
-      },
-    )
-  }
-}
+		return h(wrapper, {
+			...data,
+			domProps: {
+				innerHTML,
+			},
+		});
+	},
+};

package/src/components/SliceZone.js

@@ -0,0 +1,145 @@
+// 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(),
+			render(h, { props, data }) {
+				console.warn(
+					`[SliceZone] Could not find a component for Slice type "${props.slice.slice_type}"`,
+					props.slice
+				);
+
+				return h(
+					"section",
+					{
+						...data,
+						attrs: {
+							...data.attrs,
+							"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",
+	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,
+		},
+	},
+	computed:{
+		renderedSlices() {
+			if (!this.slices) {
+				return null;
+			}
+
+			return this.slices.map((slice, index) => {
+				let component =
+					this.components && slice.slice_type in this.components
+						? this.components[slice.slice_type]
+						: this.defaultComponent || TODOSliceComponent;
+
+				// TODO: Remove `resolver` in v3 in favor of `components`.
+				if (this.resolver) {
+					const resolvedComponent = this.resolver({
+						slice,
+						sliceName: slice.slice_type,
+						i: index,
+					});
+
+					if (resolvedComponent) {
+						component = resolvedComponent;
+					}
+				}
+
+				const p = {
+					key: `${slice.slice_type}-${index}`,
+					props: {
+						slice,
+						index,
+						context: this.context,
+						slices: this.slices,
+					}
+				};
+
+				return { component, p };
+			});
+		}
+	},
+	render(h) {
+		// Prevent fatal if user didn't check for field, throws `Invalid prop` warn
+		if (!this.slices) {
+			return null;
+		}
+
+		return h(this.wrapper, this.renderedSlices.map(({ component, p }) => h(component, p)));
+	},
+};

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,
+			},
+		});
+	},
+};