Skip to content

Instantly share code, notes, and snippets.

@tbranyen
Last active June 1, 2017 17:50
Show Gist options
  • Save tbranyen/fc048d257557725c32988d1d69123886 to your computer and use it in GitHub Desktop.
Save tbranyen/fc048d257557725c32988d1d69123886 to your computer and use it in GitHub Desktop.
Loading some middleware and diffHTML with ES Modules in Chromium 60
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment