SkateJS code-splitting with Webpack 2

readme.md

Code-splitting and deferred upgrades in SkateJS

This is an example of code splitting and deferred upgrades in using SkateJS.

The key here is the call to System.import('./deferred') which tells Webpack 2 to bundle ./deferred and all of its dependencies into a separate bundle. When the button is clicked, the loading of that bundle is executed.

In the ./deferred bundle, the definition for <x-deferred /> is defined, thus causing the element to upgrade.

I tried using just import('./deferred'), which is the preferred way to do it, but got a syntax error.

deferred.js

import { Component, h } from 'skatejs';

class Deferred extends Component {
  renderCallback () {
    return <span>Yay! Loaded!!!</span>;
  }
}

customElements.define('x-deferred', Deferred);

index.js

// Don't forget the polyfills!
import { Component, h } from 'skatejs';

class App extends Component {
  renderCallback () {
    return [
      <button onClick={() => System.import('./deferred')}>Load deferred</button>,
      <x-deferred>Not loaded yet :(</x-deferred>
    ];
  }
}

customElements.define('x-app', App);

document.body.appendChild(new App());