Hyperapp-Lazy-Components
Lazyload your Hyperapp Modules with their own view, actions and state.
The Gist
import h app from "hyperapp"import Route location Switch from "@hyperapp/router"import Lazy createLazy from 'hyperapp-lazy-modules' // Module signatureconst modules = count: view: import'./modules/count/index.js' actions: import'./modules/countactions.js' state: import'./modules/state.js' add: view: import'/add.js' actions: import'./add-actions.js' state: import'./add-state.js' const actions state = modules <h1>Fetching...</h1> const container = document const appstate = count: 0 ...state const appActions = ...actions const view = state actions <div> <Switch> <Route ="/" =/> <Route ="/about" =/> </Switch> </div> const main = ;location;
Your application state will be your root state and the loaded module state. The same to actions.
The Lazy Module State is a plain object with the lazy
key, and it is avaiable in your app state:
appStatelazy = fetching: true|false props
Hyperapp Lazy Modules consists of a two-function API. createLazy to create the container that will mount your lazy modules and the Lazy that you will be load your lazy modules.
Installation
Install with npm or Yarn.
npm i hyperapp-lazy-modules
Overview
Your application module consist of three interconnected parts: the state, view, and actions.
Your modules with their own actions and state will be loaded dynamiclly. The state and actions will be merged into your root state.
Module State
The signature is the same as hyperapp.
The state is a plain JavaScript object that describes your entire program. It consists of all the dynamic data that is moved around in the application during its execution. The state cannot be mutated once it is created. We must use actions to update it.
const state = count: 0// will be available as rootState.state // or count: 0 // will be avaiable as rootState.count
Module Actions
The signature is the same as hyperapp.
The only way to change the state is via actions. An action is a unary function (accepts a single argument) expecting a payload. The payload can be anything you want to pass into the action.
To update the state, an action must return a partial state object. The new state will be the result of a shallow merge between this object and the current state. Under the hood, Hyperapp wires every function from your actions to schedule a view redraw whenever the state changes.
const actions = value // will be available as rootActions.actions.setValue count: statecount + value // will be avaiable as rootActions.setValue
API
createLazy
are a HOC thar you need to pass the hyperapp.app
function and the element that your modules are be mounted.
You need to pass your modules and the fetching handler that will be called when your module are fetching and not cached.
Your modules are cached once its loaded.
/** * @name createLazy * @description The container that will create the lazy modules * @param * @param * * @example * * const { actions, state } = createLazy(app, container)(modules, fetching => <Loading fetching={fetching}/>) * * @returns * @param * @param */ const modules = count: component: import'./modules/count/index.js' actions: import'./modules/count/actions.js' state: import'./modules/state.js' add: component: import'./modules/add/index.js' actions: import'./modules/add/actions.js' state: import'./modules/add/state.js' // When your component are fetching, the fetching function will be called.const actions state = modules <h1>Fetching...</h1>
Lazy
is your component that will render your module and merge the module actions and the module state to your app state and actions.
You can only return one Lazy Module inside your view and your views cannot have two Lazy Modules loaded at the same time.
/** * * @param * @param * * @return */ const view = <Lazy module='count' /> // appState.lazy.props = { text: 'Lazy modules.' } const view = <div> <Lazy module='count' props= text: 'Lazy modules.' /> </div>
License
MIT licensed. See LICENSE.