Loading some middleware and diffHTML with ES Modules in Chromium 60

es-modules-diffhtml.html

<style>
  body { display: flex; align-items: center; justify-content: center; }
  h1 { font-size: 60px; font-family: Helvetica; }
</style>

<script type="module">
  import { innerHTML, html, use } from 'https://diffhtml.org/master/diffhtml';
  import createLogger from 'https://diffhtml.org/master/diffhtml-middleware-logger';
  import inlineTransitions from 'https://diffhtml.org/master/diffhtml-middleware-inline-transitions';

  use(createLogger());
  use(inlineTransitions());

  const onattached = domNode => domNode.animate([
    { opacity: '0.0' },
    { opacity: '1.0' },
  ], { duration: 1000 });

  innerHTML(document.body, html`
    <h1 onattached=${onattached}>Hello world!</h1>
  `);
</script>

screencast.md

Click For Fullscreen