hyperapp-events
Advanced tools
hyperapp-events is an app decorator (a k a "higher order app") which adds an event bus to your app. Hyperapp modules are isolated from one another and can only communicate "top-down". An event bus allows dependency-free communcation between modules where that would otherwise be impossible.
In your project folder:
npm install hyperapp-events
Then import/require appEvents in your project, and use it to decorate your app:
const appEvents = require('hyperapp-events')
appEvents(app)({
...
})
Add the following script tag to the <head>...</head> section of your html page:
<script src="https://unpkg.com/hyperapp-events"></script>
... that will export appEvents in your global scope, which you use to decorate your app:
appEvents(app)({
...
})
With appEvents enabled in your hyperapp-app, all actions will receive an emit function as the
fourth argument.
{
...,
actions: {
doFoo: (state, actions, data, emit) { ... },
doBar: (state, actions, data, emit) { ...}
}
}
The emit function is used to broadcast a message (string) that something happened, along with an payload (any) to provide detail.
emit('fire!', 'south hallway')
Any module (or the app itself) that cares about such messages, declares it in their events property, which is an object containing all the events the module cares about as property keys, and "event handlers" as values, i e functions for what to do when that event occurs.
Event handlers are passed the state and actions (scoped to the module), and the payload the event was broadcast with as third argument.
const sprinklerSystem = {
actions: {
turnOn: (state, actions, room, emit) => {
...
emit('fire out', room)
}
},
events: {
'fire!': (state, actions, room) => { actions.turnOn(room) }
}
}
const person = {
actions: {
runFrom: (state, actions, room) => { ... }
walkTo: (state, actions, room) => { ... }
},
events: {
'fire!': (state, actions, room) => { actions.runFrom(room) },
'fire out': (state, actions, room) => { actions.walkTo(room) }
}
}
As demonstrated by the example above, any number of modules could be listening for a single event.
The call to emit will return whatever the handler of the event (if any) returns. If there are multiple event handlers for a given event, the returned value will be from the handler called last (highest up in the module tree)
FAQs
Adds an event bus to hyperapp
The npm package hyperapp-events receives a total of 0 weekly downloads. As such, hyperapp-events popularity was classified as not popular.
We found that hyperapp-events demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.