A central hub for processing and managing complex data sets
npm install hyperionsHyperions is a library that allow you to make changes to the HTML content by using a mix of and JSON Reponse from API endpoints
``bash`
npm i hyperion
`js`
import Hyperions from 'hyperion'
Hyperions.setup()
`html
data-input="/api/v1/" <-- get from a remote source (result MUST be in JSON)
data-input="delete:/api/v1/" <-- the method is chosen by using a method
data-input="run:action" <-- will run with param0 being the HTMLElement & param1 being the input data in JSON (form only)
-- IO --
data-path="path" <-- run the output on a child instead of the base object
data-multiple <-- (ONLY if response object is an array) will display multiple elements instead of one
data-output="template location|body|this{location} inner|outer|append" <-- Will fill the template, and display it in the location (inner,outer define if it replace or is a child)
data-output="run:action" <-- will run with param0 being the HTMLElement & param1 being the data in JSON
data-output="hyp:query" <-- Will run another Hyperions element by the query
>
`
- Template
it MUST only have one child
`html
hyp:attr="html:key" <-- set the inner HTML of the element
hyp:attr="outertext:key" <-- set the outer text of the element
hyp:attr="outerhtml:key" <-- set the outer HTML of the element
hyp:attr="any-other-attribute:key" <-- set the attribute of the element
hyp:loop="key" <-- child elements will loop through each items of the array defined by key
hyp
>
References
$3
one of the
or data-output MUST be set so that everything work.#### data-trigger: (optionnal)
the different trigger available (default: 'submit' for
force is true)
- after:xx: trigger will defer until xx time of ms passed (allow to dedup requests)
- HTMLListenerEvent: any HTMLElement event available#### data-input: (optionnal)
if data-input is not set it will directly got for data-output with an empty object
- url: will query the URL using a GET method for JSON data
-
method:url: will query the URL using the method for JSON data
- run:action: Get informations by running an action#### data-path: (optionnal)
a Subpath of the input data to lessen strain on the output
#### data-multiple: (optionnal)
if the input is an array and data-multiple is set, the output will be using array
#### data-output: (optionnal)
- template: The template used to display
- location: the location to display the element (default: this)
note: by using
this as a prefix it will query relative to the current element (ex: this#pouet)
- replace|child: replace or append as child (default: child)
$3
Actions are elements defined in Hyperions that run code to fetch informations or run custom code
there is two types of actions:
- input Action
An input Action MUST return a JSON object and will have access to the HTMLElement that was triggered
(element?: HTMLElement, input?: object) => Promise