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>First, install it:
npm install --save-dev eleventy-plugin-add-web-component-definitionsThen, 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)
}| 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 |
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 })Please find a demo at /demo, to see it working live just:
npm run demoPlease open an issue and I'll get back to you ASAP!