Plugins
@wq/app provides a simple plugin API to facilitate the incorporation of arbitrary custom functionality beyond the built-in page rendering and offline storage APIs. A plugin is defined as a simple object that is registered via app.use(plugin) before calling app.init(). The properties of the object determine the type(s) of the plugin.
For example, if you wanted to provide a {date} variable for use in rendering, you could define the following plugin:
const datePlugin = {
context() {
return {'date': new Date().toDateString()}
}
}
app.use(datePlugin);
Plugin Types
A plugin can have multiple types depending on the properties. For example, many plugins define a reducer as well as one or more components.
| type | processed by | properties |
|---|---|---|
| AJAX/Fetch | @wq/store | ajax(url, data, method, headers) |
| Form Validation | @wq/outbox | validate(values, modelConf) |
| onsync | @wq/outbox | onsync() |
| postsaveurl | @wq/app | postsaveurl(item, alreadySynced) |
| Render Context | @wq/router | context(ctx, routeInfo) |
| Messages | @wq/react | messages{} |
| React Components | @wq/react | components{}, icons{}, inputs{}, views{} |
| Redux Reducer | @wq/store | name, actions{}, reducer() |
| Redux Thunks | @wq/router | thunks{} |
| Map Layers | @wq/map | overlays{}, basemaps{} |
Existing Plugins
wq.app ships with a selection of predefined plugins for common use cases. These plugins are already included in the default wq.js build.
| Module | Description |
|---|---|
| @wq/app auth plugin | Client support for wq.db.rest.auth |
| @wq/react + @wq/material | React renderer + Material UI components |
| @wq/map + @wq/map-gl | Map state and form integration + Mapbox GL JS vector tiles & geojson support |