kits
Okwolo is designed so that all functionality is provided by swappable modules. These modules can be used to add, modify or remove any features of the resulting apps. Kits represent different combinations of these modules which can be used to satisfy a wide variety of use cases. It is important to note that the order of modules can be important, especially in cases where one module depends on another. (ex. state and state.handler)
This page lists describes the three officially maintained kits and lists their included modules diffed with the default standard kit. All kits can be found in their transpiled/minified/gzipped forms in the dedicated repository . Most of the tools available to modules are also available after the app is instantiated and that the kit pattern exists primarily for usability/development ergonomics.
const okwolo = require('okwolo/{{kit-name}}}');
standard
const okwolo = require('okwolo/standard');
Standard is the default kit and it includes the fullest set of features. Notably, the router uses the familiar matching logic from express and the state can be manipulated using actions, watchers, middleware and undo/redo.
primary.router.builder
router
router.fetch
router.register
state
state.handler
state.handler.history
view
view.build
view.dom
lite
const okwolo = require('okwolo/lite');
The lite kit is a trimmed down version of okwolo for projects where bundle size is a priority. It drops the advanced state management provided by the state handler and uses a simplified route registering module. This means that actions are not supported and that path params are the only special syntax understood by the router.
primary.router.builder
router
router.fetch
- router.register
+ router.register-lite
state
- state.handler
- state.handler.history
view
view.build
view.dom
server
const okwolo = require('okwolo/server');
The server kit is meant to be used as a server-side rendering tool. Since it is only concerned with producing html from state, there is no need for the router module or the elaborate state handling. It's larger size is due to the built-in character escaping library which sanitizes rendered text nodes.
The following example shows the minimal setup.
// target is a callback which will receive the rendered html.
const app = okwolo((htmlString) => {
// ...
});
app.setState({})
app(() => () => (
['div.app', {}, [
// ...
]]
));
- primary.router.builder
- router
- router.fetch
- router.register
state
- state.handler
- state.handler.history
view
view.build
- view.dom
+ view.string
