peteblois/rollup-plugin-html-imports

README

rollup-plugin-html-imports

Seamless integration between Rollup and Polymer HTML resources.

This plugin exposes the contents of HTML imports to the Rollup dependency management system to allow both HTML and Javascript dependencies to be managed by Rollup.

What you get

Declare dependencies on HTML resources from Javascript

The transitive closure of dependencies for an HTML import can be referenced directly from javascript, from locations such as NPM modules.

From vanilla Javascript:

import {} from '@polymer/paper-input/paper-input.html';

const input = document.createElement('paper-input');
document.body.appendChild(input);

Or with React:

import React from 'react'
import {} from '@polymer/paper-button/paper-button.html';

export class ReactComponent extends React.Component {
  render () {
    return (
      <paper-button raised>ok</paper-button>
    )
  }
}

Because the dependencies between individual HTML resources are also handled by Rollup, overlapping imports only pull in the additional dependencies.

import {} from '@polymer/paper-button/paper-button.html';
import {} from '@polymer/paper-dropdown-menu/paper-dropdown-menu.html';
import {} from '@polymer/paper-input/paper-input.html';

// Did not pull in the framework 3 times!

Use ES6 imports from inline script tags

Inline scripts are extracted from the HTML file and can have their own set of dependencies which are managed by Rollup.

<link rel='import' href='@polymer/polymer/polymer.html'>
<dom-module id='polymer-component'>
  <template>
    <div id='react'></div>
  </template>
</dom-module>

<script>
  import React from 'react';
  import ReactDOM from 'react-dom';
  import { ReactComponent } from './react-component.jsx';

  Polymer({
    is: 'polymer-component',
    attached() {
      ReactDOM.render(<ReactComponent />, this.$.react);
    }
  });
</script>

How it works

Given an HTML document such as:

<link rel='import' href='foo.html'>
<script>
 ...
</script>
<dom-module>
  ...
</dom-module>
<script src='foo.js'></script>

When it is imported, the plugin generates Javascript which looks like:

import {} from 'foo.html';
import {} from 'component.html.0.js'; // the first inlined script
import {} from 'component.html.0.html'; // the first HTML fragment
import {} from 'foo.js';

Where component.html.0.html is essentially:

const html = `
  <dom-module>
  ...
  </dom-module>`;
const range = document.createRange();
const fragment = range.createContextualFragment(html);

const link = document.createElement('link');
link.appendChild(fragment);
document.head.appendChild(link);

Installation

(Once it's actually published)

yarn add rollup-plugin-html-imports -dev
yarn add @polymer/paper-input
yarn install --flat

config

import { rollup } from 'rollup';
import htmlImports from 'rollup-plugin-html-imports';

rollup({
  entry: 'main.js',
  plugins: [
    htmlImports(),
    nodeResolve({ jsnext: true }),
    commonjs(),
    babel({
      exclude: 'node_modules/**',
    }),
  ]
}).then(...)