on-to-me
v0.0.49
Published
Connect web components together declaratively.
Downloads
39
Maintainers
bahrusReadme
on-to-me
on-to-me is a small (~1kb) bare-bones version of p-d.
Like p-et-alia components, one of the goals of on-to-me is to reduce, as much as possible, the gap between "First Meaningful Paint" and "Time to Interactive". on-to-me focuses squarely on that problem, whereas p-et-alia addresses larger issues. on-to-me will, in the future, provide some common functions used by p-et-alia.
Sample syntax:
<button data-test=hello>My button</button>
<on-to-me on=click to=[-text-content] me=1 val=target.dataset.test ></on-to-me>
<div -text-content></div>Features supported:
Attributes: on, to, val, me, care-of, from, init-val, mutate-event, parse-val-as, init-event
mutate-event is used in conjunction with a web component like mut-obs, which can raise events when mutations occur.
init-val allows us to pass an initial value from the observed element (e.g. init-val=value for an input element) just before attaching the event handler.
init-event allows us to specify an event which the observed element fires, to (re-)apply the initVal.
Features not supported:
- Ability to stop blocking propagation -- always blocks propagation
- Using properties instead of attributes to define the orchestration.
- Debugging support
- Ability to override value from event, filter events.
- More
Running Locally
- Install node.js, git
- git clone https://github.com/bahrus/on-to-me
- Open command / terminal, cd to folder git was cloned to in step 2, run npm install
- Run npm install
- run npm run serve
- open http://localhost:3030/demo/dev.html
Bootstrapping
This component was designed to be small and simple, with no dependencies, a kind of "bootup" component that could, if needed, be replaced by a more sophisticated component, like p-d, once the download for p-d is complete. As such, it might be best to inline the minified version directly in index.html (or the equivalent):
<!DOCTYPE html>
<html lang="en">
<head>
<script type=module>export function getPreviousSib(t){let e=t;for(;e&&e.hasAttribute("on");)e=e.previousElementSibling,null===e&&(e=t.parentElement);return e}export function nudge(t)...</script>
</head>
...
</html>Bare import specifiers / bundling / import maps
- npm install --save on-to-me
- import on-to-me/on-to-me.js
CDN
<script type=module src=https://cdn.jsdelivr.net/npm/[email protected]/dist/on-to-me.min.js></script>