rollup-plugin-wcbuilder

npm install @author.io/rollup-plugin-wcbbuilder

This rollup plugin will build an <author-element> custom element, outputting a single JavaScript module.

An example rollup.config.js file might look like this:

import wcbuilder from '@author.io/rollup-plugin-wcbuilder'

export default {
	input: 'src/tag.js',
	plugins: [ wcbuilder() ],
	output: [
		{ file: 'myfile.cjs.js', format: 'cjs' },
		{ file: 'myfile.es.js', format: 'es' }
	]
}

Build Options

There are two possible build options:

requiresBaseElement | boolean (true by default)

This will inject a warning into the web component code if the base class is required and not loaded/present at runtime. This almost never needs to be set, since all <author-*> elements require the base element (except the base element itself).

import wcbuilder from '@author.io/rollup-plugin-wcbuilder'

export default {
	input: 'src/tag.js',
	plugins: [
		wcbuilder({
			requiresBaseElement: true  // (default)
		})
	],
	output: [
		{ file: 'myfile.cjs.js', format: 'cjs' },
		{ file: 'myfile.es.js', format: 'es' }
	]
}

dependencies | array

Sometimes custom elements are built with or upon other <author-*> elements. These "nested" elements are considered dependencies, since they are required for the primary element to function correctly. Similar to the requiresBaseElement attribute above, dependencies will inject a warning/help message if one of the dependencies in the list is missing.

Take the <author-select> tag as an example. This is an advanced tag that uses <author-option>, <author-options>, <author-optgroup>, <author-optgroup-label> and <author-selected-options> under the hood. The build configuration for <author-select> may therefore look like:

import wcbuilder from '@author.io/rollup-plugin-wcbuilder'

export default {
	input: 'src/tag.js',
	plugins: [
		wcbuilder({
			dependencies: [
				'author-option',
				'author-options',
				'author-optgroup',
				'author-optgroup-label',
				'author-selected-options'
			]
		})
	],
	output: [
		{ file: 'myfile.cjs.js', format: 'cjs' },
		{ file: 'myfile.es.js', format: 'es' }
	]
}

If any of the dependencies are missing, an error will be thrown. A help message will also provide a URL where each missing dependency can be acquired.