gem-hunter

rollup-plugin-html-imports

What you get

Declare dependencies on HTML resources from Javascript

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

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

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>
    )
  }
}

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

<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

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

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';

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

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

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(...)