# on-to-me

> Connect web components together declaratively.

Latest version **0.0.49** (published 2021-09-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install on-to-me
pnpm add on-to-me
yarn add on-to-me
bun add on-to-me
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.49 |
| Published | 2021-09-29 |
| First published | 2020-11-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 32 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | anderson.bruce.b@gmail.com |
| Maintainers | bahrus |
| Keywords | web components, web component, custom elements, custom element |

## Links

- npm: https://www.npmjs.com/package/on-to-me
- Repository: https://github.com/bahrus/on-to-me
- Homepage: https://github.com/bahrus/on-to-me#readme
- Issues: https://github.com/bahrus/on-to-me/issues
- npm.io page: https://npm.io/package/on-to-me

## Dependencies (1)

- [trans-render](https://npm.io/package/trans-render.md) 0.0.414

## Recent versions

- 0.0.49 (latest) — 2021-09-29
- 0.0.48 — 2021-09-29
- 0.0.47 — 2021-09-29
- 0.0.46 — 2021-09-29
- 0.0.45 — 2021-09-29
- 0.0.44 — 2021-09-28
- 0.0.43 — 2021-09-25
- 0.0.42 — 2021-09-25
- 0.0.41 — 2021-09-25
- 0.0.40 — 2021-09-19
- 0.0.39 — 2021-09-15
- 0.0.38 — 2021-09-15
- 0.0.37 — 2021-09-14
- 0.0.36 — 2021-09-14
- 0.0.35 — 2021-08-15
- … 35 more at https://npm.io/package/on-to-me/versions

## README

# on-to-me

<a href="https://nodei.co/npm/on-to-me/"><img src="https://nodei.co/npm/on-to-me.png"></a>

<img src="https://badgen.net/bundlephobia/minzip/on-to-me@0.0.35">

on-to-me is a small (~1kb) bare-bones version of [p-d](https://github.com/bahrus/p-et-alia).

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:

```html
<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>
```

[Demo](https://jsfiddle.net/bahrus/5d7t064q/)

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](https://github.com/bahrus/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:

1.  Ability to stop blocking propagation -- always blocks propagation
2.  Using properties instead of attributes to define the orchestration.
3.  Debugging support
4.  Ability to override value from event, filter events.
5.  More

## Running Locally

1.  Install node.js, git
2.  git clone https://github.com/bahrus/on-to-me
3.  Open command / terminal, cd to folder git was cloned to in step 2, run npm install
4.  Run npm install
5.  run npm run serve
6.  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](https://raw.githubusercontent.com/bahrus/on-to-me/baseline/dist/on-to-me.min.js) directly in index.html (or the equivalent):

```html
<!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

1.  npm install --save on-to-me
2.  import on-to-me/on-to-me.js

## CDN

```html
<script type=module src=https://cdn.jsdelivr.net/npm/on-to-me@0.0.4/dist/on-to-me.min.js></script>
```

---
_Source: https://npm.io/package/on-to-me · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._