eleventy-plugin-add-web-component-definitions

This plugin will automatically add Web Component definitions to your HTML pages

Usage no npm install needed!

<script type="module">
  import eleventyPluginAddWebComponentDefinitions from 'https://cdn.skypack.dev/eleventy-plugin-add-web-component-definitions';
</script>

README

eleventy-plugin-add-web-component-definitions

This plugin will automatically add Web Component definitions to your HTML pages

Given a page with this structure:

<html>
  <body>
    <custom-tag></custom-tag>
  </body>
</html>

The plugin will transform it, with default options, into:

<html>
  <body>
    <custom-tag></custom-tag>
    <script type="module" src="/js/components/custom-tag/custom-tag.js"></script>
  </body>
</html>

How to use

First, install it:

npm install --save-dev eleventy-plugin-add-web-component-definitions

Then, in your .eleventy.js configuration file, add:

// Together with your other imports
const addWebComponentDefinitions = require('eleventy-plugin-add-web-component-definitions')

module.exports = function(eleventyConfig) {

  // Inside your eleventy configuration function
  eleventyConfig.addPlugin(addWebComponentDefinitions)
}

Options

name type default description
path Function or String function (tag) { return `/js/components/${tag}/${tag}.js\` Path where your components are published
specifiers Object {} Input with this format {<custom-tag>: <Function or String>} to override a specific tag path, see below an example
position String beforeend Position where the script tag will be put in regards to the body element, the other options being afterbegin
verbose Boolean false It will console log each step, for debug purposes
quiet Boolean false It won't console log anything. By default, a log of each Web Component definition is log out with this format: [add-web-component-definitions] Adding definition for tag: custom-tag
singleScript Boolean false If true, only one script with import statements will be output: <script type="module">import "js/components/custom-tag.js;</script>
modulePreload Boolean false If true (and singleScript is false), it will add modulepreload links to the head of the document using the path function

Example

Say your components live in /components/ with no subfolders for tags and that your published website lives in a sub-folder of the domain (such as what happens in Github Pages or Gitlab Pages), you can do this:

eleventyConfig.addPlugin(addWebComponentDefinitions, {
  path: tag => project.environment === 'production'
      ? `/my-project/components/${tag}.js`
      : `/components/${tag}.js`
  }
)

You can also specify a unique path for any custom-tag, which overrides the path configuration:

eleventyConfig.addPlugin(addWebComponentDefinitions, {
  specifiers: {
    'custom-tag-one': tag => project.environment === 'production'
      ? `/alpha-project/components/${tag}.js`
      : `/components/${tag}.js`,
    'custom-tag-two': 'my-module'
  }
)

For a verbose output, do this:

eleventyConfig.addPlugin(addWebComponentDefinitions, { verbose: true })

Demo

Please find a demo at /demo, to see it working live just:

npm run demo

Questions? Feature requests?

Please open an issue and I'll get back to you ASAP!