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: 5 months 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 9 years ago)
- Default Branch: master
- Last Pushed: 2018-04-25T14:08:10.000Z (about 8 years ago)
- Last Synced: 2025-03-28T18:51:53.140Z (over 1 year 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
[](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
[](https://github.com/feross/standard)