https://github.com/jdvivar/eleventy-plugin-add-web-component-definitions
This Eleventy plugin will add Web Component definitions automatically by reading custom tags from HTML pages.
https://github.com/jdvivar/eleventy-plugin-add-web-component-definitions
eleventy eleventy-plugin static-site-generator web-component web-components
Last synced: 13 days ago
JSON representation
This Eleventy plugin will add Web Component definitions automatically by reading custom tags from HTML pages.
- Host: GitHub
- URL: https://github.com/jdvivar/eleventy-plugin-add-web-component-definitions
- Owner: jdvivar
- License: mit
- Created: 2020-07-04T21:27:07.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T22:45:21.000Z (almost 2 years ago)
- Last Synced: 2025-03-24T11:56:53.448Z (30 days ago)
- Topics: eleventy, eleventy-plugin, static-site-generator, web-component, web-components
- Language: JavaScript
- Homepage:
- Size: 1.84 MB
- Stars: 20
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
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
```
The plugin will transform it, with default options, into:
```html
```
## How to use
First, install it:
```bash
npm install --save-dev eleventy-plugin-add-web-component-definitions
```
Then, in your `.eleventy.js` configuration file, add:
```js
// 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 `{: }` 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: `import "js/components/custom-tag.js;` |
| `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:
```js
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:
```js
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:
```js
eleventyConfig.addPlugin(addWebComponentDefinitions, { verbose: true })
```
### Demo
Please find a demo at `/demo`, to see it working live just:
```sh
npm run demo
```
### Questions? Feature requests?
Please [open an issue](https://github.com/jdvivar/eleventy-plugin-add-web-component-definitions/issues/new) and I'll get back to you ASAP!