❤
npm
Sign UpSign In

rollup-plugin-web-components
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

rollup-plugin-web-components

This plugin provides a loader for single file web components, and injects their templates into html files.

Install

yarn add rollup-plugin-web-components --dev

or

npm install rollup-plugin-web-components -D

Usage

This plugin only injects component templates to assets emitted with the emitFile() plugin context method and having .html as extension.

The following example uses rollup-plugin-emit-files to emit html pages to rollup bundle.

// 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'
    })
  ]
}
<!-- src/components/x-button.html !-->
 
<template id="x-button">
  <span>
    <slot></slot>
  </span>
</template>
 
<!-- The style element can be either inside or outside the template element !-->
 
<style>
  :host {
    border: 1px solid black;
    cursor: pointer;
  }
</style> 
 
<script>
  export class XButton extends HTMLElement {
    constructor() {
      super()
 
      const template = document.getElementById('x-button')
 
      this
        .attachShadow({ mode: 'open' })
        .appendChild(template.content.cloneNode(true))
    }
  }
</script> 
// 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)
<!-- src/pages/index.html !-->
 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page with web components</title>
  </head>
  <body>
    <x-button>hey</x-button>
    <script src="index.js"></script> 
  </body>
</html>

The output folder will contain the following index.html file:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page with web components</title>
  </head>
  <body>
    <template id="x-button">
      <style>
        :host {
          border: 1px solid black;
          cursor: pointer;
        }
      </style> 
      <span>
        <slot></slot>
      </span>
    </template>
 
    <x-button>hey</x-button>
    <script src="index.js"></script> 
  </body>
</html>

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

{
  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

Readme

Keywords

none

Package Sidebar

Install

npm i rollup-plugin-web-components

Repository

github.com/juliendargelos/rollup-plugin-web-components

Homepage

github.com/juliendargelos/rollup-plugin-web-components#readme

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

9.19 kB

Total Files

9

Last publish

Collaborators

  • juliendargelos
Try on RunKit
Report malware