https://github.com/juliendargelos/rollup-plugin-web-components
Import and inject web component styles and templates with rollup
https://github.com/juliendargelos/rollup-plugin-web-components
rollup rollup-plugin web-components
Last synced: about 1 month ago
JSON representation
Import and inject web component styles and templates with rollup
- Host: GitHub
- URL: https://github.com/juliendargelos/rollup-plugin-web-components
- Owner: juliendargelos
- License: mit
- Created: 2019-09-23T23:03:59.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-05-10T15:40:59.000Z (about 5 years ago)
- Last Synced: 2024-10-15T06:32:49.755Z (over 1 year ago)
- Topics: rollup, rollup-plugin, web-components
- Language: JavaScript
- Size: 12.7 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# rollup-plugin-web-components
This plugin provides a loader for single file web components, and injects their templates into html files.
## Install
```bash
yarn add rollup-plugin-web-components --dev
```
or
```bash
npm install rollup-plugin-web-components -D
```
## Usage
This plugin only injects component templates to assets emitted with the [emitFile()](https://rollupjs.org/guide/en/#thisemitfileemittedfile-emittedchunk--emittedasset--string) plugin context method and having `.html` as extension.
The following example uses [rollup-plugin-emit-files](https://github.com/juliendargelos/rollup-plugin-emit-files) to emit html pages to rollup bundle.
```javascript
// rollup.config.js
import webComponents from 'rollup-plugin-web-components'
import emitFiles from 'rollup-plugin-emit-files'
export default {
// ...
plugins: [
webComponents(),
emitFiles({
src: 'src/pages',
include: '**/*.html'
})
]
}
```
```html
:host {
border: 1px solid black;
cursor: pointer;
}
export class XButton extends HTMLElement {
constructor() {
super()
const template = document.getElementById('x-button')
this
.attachShadow({ mode: 'open' })
.appendChild(template.content.cloneNode(true))
}
}
```
```javascript
// src/index.js
import {
template, // template as string
style, // style as string
XButton // Anything else exported from the script tag is also available
} from './components/x-button.html'
customElements.define('x-button', XButton)
```
```html
Page with web components
hey
```
The output folder will contain the following `index.html` file:
```html
Page with web components
:host {
border: 1px solid black;
cursor: pointer;
}
hey
```
No matter wether the style element is inside or outside the template element:
- It will always be **inside** when injected into html
- It will always be **removed** and **exported separatly** when imported from javascript
## Options
```typescript
{
extension?: string
inject?: boolean
}
```
### extension
The extension which must be loaded with the web-components loader.
Default: `'.html'`
### inject
If set to true, the plugin will inject all templates from imported components to all html files emitted in the rollup bundle.
Default: `true`