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: 4 days 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 5 years ago)
• Default Branch: master
• Last Pushed: 2021-05-10T15:40:59.000Z (over 3 years ago)
• Last Synced: 2024-10-15T06:32:49.755Z (3 months 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`