https://github.com/w-lfpup/hyperevents-js
A hypertext extension for the browser
https://github.com/w-lfpup/hyperevents-js
esmodules html hypermedia hypertext json ui
Last synced: about 2 months ago
JSON representation
A hypertext extension for the browser
- Host: GitHub
- URL: https://github.com/w-lfpup/hyperevents-js
- Owner: w-lfpup
- License: bsd-3-clause
- Created: 2024-05-22T02:52:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-29T08:47:20.000Z (about 2 months ago)
- Last Synced: 2025-08-29T12:19:01.980Z (about 2 months ago)
- Topics: esmodules, html, hypermedia, hypertext, json, ui
- Language: TypeScript
- Homepage:
- Size: 132 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HyperEvents-js
A hypertext extension for the browser.
## About
HyperEvents enable HTML to declaratively:
- query JSON APIs
- fetch html fragments
- lazy-load esmodules
- dispatch action events (think redux actions)
HyperEvents are an alternative to bulky frontend frameworks. Rather than bother with setup and teardown of specific callbacks on specific elements, DOM UI events create "action" events. Developers can listen and derive local state from action events.
This makes HyperEvents ideal for:
- SSR
- SSG
- HTML template elements
- Shadow DOM
## Install
```html
npm install https://github.com/wolfpup-software/hyperevents-js
```
## Setup
Add a `target` and some `eventNames` on instantiation.
```ts
let _hyperEvents = new HyperEvents({
target: document,
connected: true,
eventNames: ["click", "pointerover", "pointerdown", "input"],
});
```
## Actions
Action events connect DOM Events to local state.
Dsipatch actions with the following syntax:
```html
```
Then listen for `#action` events in javascript-land.
```ts
document.addEventListener("#action", function (e: ActionEvent) {
let { action, sourceEvent } = e.actionParams;
});
```
## ES Modules
Fetch esmodules using the following syntax:
```html
```
Then listen for request state with `#esmodule` events in javascript-land.
```ts
document.addEventListener("#esmodule", function (e: EsModuleEvent) {
let { status, url } = e.requestState;
});
```
## HTML
Fetch html using the following syntax:
```html
```
Then listen for request state with `#html` events in javascript-land.
```ts
document.addEventListener("#html", function (e: HtmlEvent) {
let { requestState } = e;
let { status } = requestState;
if ("resolved" === status) {
let { html } = requestState;
}
});
```
## JSON
Fetch and dispatch JSON using the following syntax:
```html
```
Then listen for request state with `#json` events in javascript-land.
```ts
document.addEventListener("#json", function (e: JsonEvent) {
let { requestState } = e;
let { status } = requestState;
if ("resolved" === status) {
let { json } = requestState;
}
});
```
## Typescript
For typed events, please add the following to your app somewhere thoughtful.
```ts
import type {
ActionEventInterface,
EsModuleEventInterface,
HtmlEventInterface,
JsonEventInterface,
} from "hyperevents";
declare global {
interface GlobalEventHandlersEventMap {
["#action"]: ActionEventInterface;
["#esmodule"]: EsModuleEventInterface;
["#html"]: HtmlEventInterface;
["#json"]: JsonEventInterface;
}
}
```
## License
`HyperEvents-js` is released under the BSD 3-Clause License.