Code Monkey home page Code Monkey logo

html-imports-loader's Introduction

HTML Imports Loader for Webpack

NPM Build Status

Installation

$ npm install html-imports-loader

Usage

Use it in Vanilla JS

Webpack config when dev

  {
    test: /\.html$/,
    use: [
      {
        loader: 'html-imports-loader'
      }
    ],
    include: /bower_components/,
    exclude: /public/
  }
  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'
    * }
    */
  // 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

  // serve bower components
  app.use('/bower_components', express.static('./bower_components'))

Webpack config when production

  {
    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

html-imports-loader's People

Contributors

vagusx avatar yuluyi avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

justinmandac

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.