https://github.com/bahrus/be-eventful

https://github.com/bahrus/be-eventful

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/bahrus/be-eventful
• Owner: bahrus
• License: mit
• Created: 2023-02-16T22:43:13.000Z (over 2 years ago)
• Default Branch: baseline
• Last Pushed: 2023-06-01T01:26:21.000Z (almost 2 years ago)
• Last Synced: 2025-01-13T08:11:57.009Z (5 months ago)
• Language: TypeScript
• Size: 102 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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)



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



    30

    
hello



    export const customFunction = ({event, target}) => {

    }

```

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



    30

    
hello



```

## JavaScriptObjectNotation

```html



    30



```

## 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

    import 'https://esm.run/be-eventful';

```