https://github.com/vagusx/html-imports-loader

HTML Imports Loader for Webpack
https://github.com/vagusx/html-imports-loader

html-imports vulcanize webcomponents webpack

Last synced: about 1 month ago
JSON representation

HTML Imports Loader for Webpack

• Host: GitHub
• URL: https://github.com/vagusx/html-imports-loader
• Owner: vagusX
• License: mit
• Created: 2017-03-27T12:51:18.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-25T14:08:10.000Z (over 6 years ago)
• Last Synced: 2024-10-05T02:08:32.662Z (about 2 months ago)
• Topics: html-imports, vulcanize, webcomponents, webpack
• Language: JavaScript
• Homepage:
• Size: 53.7 KB
• Stars: 2
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# HTML Imports Loader for Webpack

![NPM](https://img.shields.io/npm/v/html-imports-loader.svg)

[![Build Status](https://travis-ci.org/vagusX/html-imports-loader.svg)](https://travis-ci.org/vagusX/html-imports-loader)

## Installation

```bash

$ npm install html-imports-loader

```

## Usage

### Use it in Vanilla JS

Webpack config when dev

```js

  {

    test: /\.html$/,

    use: [

      {

        loader: 'html-imports-loader'

      }

    ],

    include: /bower_components/,

    exclude: /public/

  }

```

```js

  import paperButton from '../bower_components/paper-button/paper-button.html'

  console.log(paperButton)

  /**

    * you will get a object like this

    * {

    *   tagName: 'paper-button',

    *   url: '/Users/someone/CurrentProject/bower_components/paper-button/paper-button.html'

    * }

    */

```

```js

  // we can load it by using `link` tag

  const link = document.createElement('link')

  link.rel = 'import'

  link.href = PxTimeseries.url

  document.head.appendChild(link)

  // we can create a dom instance by `createElement` method

  const PaperBtn = document.createElement(paperButton.tagName)

  // set `innerText`

  PaperBtn.innerText = 'Click it'

  // set some properties for it

  const paperBtnProps = {

    disabled: false,

    toggles: true,

    raised: true

  }

  Object.keys(paperBtnProps).map(prop => {

    PaperBtn[prop] = paperBtnProps[prop]

  })

  // mount it to specific root element when `WebComponentsReady`

  window.addEventListener('WebComponentsReady', function() {

    document.querySelector('#root').appendChild(PaperBtn)

  })

```

And pls serve the bower_components folder in your static server at the same time for better dev exprience.

Here's a sample in `express`

```js

  // serve bower components

  app.use('/bower_components', express.static('./bower_components'))

```

Webpack config when production

```js

  {

    test: /\.html$/,

    use: [

      {

        loader: 'html-imports-loader',

        options: {

          emitFile: true

        }

      }

    ],

    include: /bower_components/,

    exclude: /public/

  }

```

With the config `emitFile:true` you can get a vulcanized html modules.

### Use it in ReactJS

We now support React 💪💪💪

## Todos

* User config for vulcanize

* Emit as a Vue/Ng Component

[![JavaScript Style Guide](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)