@martel/hyperload

Hyperload

A higher-order app and component for dynamic import of Hyperapp v2 components. Requires support (or polyfill) for dynamic imports.

Installation

Node.js

Install with npm / Yarn.

npm i hyperload

Then with a module bundler like rollup or webpack, use as you would anything else.

import { withHyperload, Hyperload } from "hyperload";

Or using require.

const { withHyperload, Hyperload } = require("hyperload");

Browser

Download the minified library from the CDN.

<script src="https://unpkg.com/hyperload"></script>

You can find the library in window.hyperload.

Example

import { app, h } from "hyperapp";
import { withHyperload, Hyperload } from "hyperload";

const Loading = ({ error, otherProp }) => (
  <span>{error ? `Error! ${error}` : `loading ${otherProps}...`}</span>
);

withHyperload(app)({
  view: () => (
    <main>
      <Hyperload
        // These are the required props
        key="my-component"
        module={() => import("./my-component")}
        loading={Loading}
        otherProps="will be passed to the loading and imported components"
      />
    </main>
  ),
  container: document.body
});

Both the loading component and the dynamically imported module will receive the props that you pass to the Hyperload component. Errors encountered while importing your module will be passed to your loading component as the error prop.

License

Hyperload is MIT licensed. See LICENSE.