# be-eventful

> Add event handling to a region of DOM using easy to read/write notation.

Latest version **0.0.5** (published 2023-04-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install be-eventful
pnpm add be-eventful
yarn add be-eventful
bun add be-eventful
```

## 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.5 |
| Published | 2023-04-16 |
| First published | 2023-02-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 18.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | bahrus |
| Keywords | web-components, web-component, custom-element, custom-elements |

## Links

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

## Dependencies (5)

- [be-hive](https://npm.io/package/be-hive.md) 0.0.82
- [be-decorated](https://npm.io/package/be-decorated.md) 0.0.238
- [trans-render](https://npm.io/package/trans-render.md) 0.0.671
- [be-exportable](https://npm.io/package/be-exportable.md) 0.0.68
- [be-propagating](https://npm.io/package/be-propagating.md) 0.0.5

## Recent versions

- 0.0.5 (latest) — 2023-04-16
- 0.0.4 — 2023-03-12
- 0.0.3 — 2023-03-11
- 0.0.2 — 2023-03-04
- 0.0.1 — 2023-02-20
- 0.0.0 — 2023-02-17

## README

# be-eventful

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/be-eventful)
[![Playwright Tests](https://github.com/bahrus/be-importing/actions/workflows/CI.yml/badge.svg?branch=baseline)](https://github.com/bahrus/be-eventful/actions/workflows/CI.yml)
[![NPM version](https://badge.fury.io/js/be-eventful.png)](http://badge.fury.io/js/be-eventful)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/be-eventful?style=for-the-badge)](https://bundlephobia.com/result?p=be-eventful)
<img src="http://img.badgesize.io/https://cdn.jsdelivr.net/npm/be-eventful?compression=gzip">

Add event handling to a region of DOM using easy to read/write notation.

be-eventful is one decorator among a triumvirate of decorators that roll up to [be-hydrated](https://github.com/bahrus/be-hydrated).

## Hemingway Notation

```html
<div be-scoped>
    <button>30</button>
    <div data-d=9>hello</div>
</div>
<script nomodule be-eventful='
    Capture previous element sibling events. //This is the default.
    Affect previous element sibling. //This is the default.
    Target beScoped:scope. //Not set by default.  //Special intervention for properties that start with be[\s] or be[A-Z].
    On click of button increment count.
    On click of button trigger custom function.
'
>
    export const customFunction = ({event, target}) => {

    }
</script>
```

If there are no custom functions inside the script tag, leave off the nomodule attribute.

In this scenario, it may be more convenient to adorn a template element with the eventful instructions, rather than a script element.  Particularly, when combining forces with [be-derived](https://github.com/bahrus/be-derived).  That is also supported:

```html
<div be-scoped>
    <button>30</button>
    <div data-d=9>hello</div>
</div>
<template nomodule be-eventful='
    Capture previous element sibling events. //This is the default.
    Affect previous element sibling. //This is the default.
    Target beScoped:scope. //Not set by default.  //Special intervention for properties that start with be[\s] or be[A-Z].
    On click of button increment count.
'
>
</template>
```

## JavaScriptObjectNotation

```html
<div be-scoped>
    <button>30</button>
</div>
<script be-eventful='{
    "capture": "previousElementSibling",
    "affect": "previousElementSibling",
    "target": "beDecorated.scoped.scope",
    "on": {
        "click": [{
            "of": "button",
            "do": [{
                "increment": "count"
            }]
        }]
    }
}'
></script>
```

## Viewing Locally

1.  Install git.
2.  Fork/clone this repo.
3.  Install node.
4.  Open command window to folder where you cloned this repo.
5.  > npm install
6.  > npm run serve
7.  Open http://localhost:3030/demo/dev in a modern browser.

## Importing in ES Modules:

```JavaScript
import 'be-importing/be-eventful.js';

```

## Using from CDN:

```html
<script type=module crossorigin=anonymous>
    import 'https://esm.run/be-eventful';
</script>
```

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