hyperapp-loadable

hyperapp-loadable

WIP This package is inspired be react-loadable. The main difference between the two packages is that this package targets hyperapp instead of react and thus does not have stateful components.

To work around this difference we use a mixin to provide a { loadable: {} } in the state as well as add actions: { loadable: { loaded: () => any }} for triggering an update/re-render after lazy-loaded module is available.

/* src/Test.js */
import { h } from "hyperapp";

export function Test(state, actions) {
  return (
    <div>{"Testing lazy-loaded component!"}</div>
  );
}

import { h, app } from "hyperapp";
import Loadable from "hyperapp-loadable";

const Loading = (state, actions) => <div>{"Loading..."}</div>;

app({
  view: (state, actions) => {
    return (<Loadable 
      state={state}
      actions={actions}
      name={"/Test"}
      loader={() => import("./Test")}
      loading={Loading}
      loaded={actions.loadable.loaded} /* not required defaults too actions.loadable.loaded */
    />);
  },
  mixins: [Loadable]
});

License

hyperapp-loadable is MIT licensed. See LICENSE.