Deal with `permalink: false`

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!

jdvivar / eleventy-plugin-add-web-component-definitions Goto Github PK

eleventy-plugin-add-web-component-definitions's Introduction

eleventy-plugin-add-web-component-definitions

How to use

Options

Example

Demo

Questions? Feature requests?

eleventy-plugin-add-web-component-definitions's People

Contributors

Stargazers

Watchers

Forkers

eleventy-plugin-add-web-component-definitions's Issues

Recommend Projects

Recommend Topics

Recommend Org