be-invoking (🕹️)

Invoke method on upstream peer element or the host.

Note

This element enhancement took some inspiration from the original form that the invoker commands proposal adopted as well as countless frameworks. Once that becomes built into the platform (hopefully), definitely consider adopting that built-in technique before using this as a last resort.

Example 1a Invoking a host method on most common event (depending on context)

<mood-stone>
    #shadow
        <input disabled be-invoking='howAmIFeelingAboutToday'>
</mood-stone>

What this does:

1. Removes the disabled attribute after hydrating.
2. Listens by default for "input" events.
3. Invokes host-element's howAmIFeelingToday method only when the input element dispatches "input" event. If adorning a button element, it will invoke the method on clicking.

It passes in two arguments:

1. The instance of whatever element is being invoked, just in case that is helpful.
2. The event that triggered the action.

Note that the word "be-invoking" is a bit long. It is easy to choose your own name, as demonstrated by this file.

In the rest of the examples, we will use the emoji 🕹️ to represent "be-invoking" just for the fun of it.

To specify a different event to act on:

Example 1b

<mood-stone>
    #shadow
        <input disabled 🕹️='howAmIFeelingAboutToday on change'>
</mood-stone>

Example 1c

<mood-stone>
    #shadow
        <soul-searcher -engage-in-second-guessing></soul-searcher>
        <input disabled 🕹️='-engage-in-second-guessing'>
</mood-stone>

Example 1d

<mood-stone>
    #shadow
        <soul-searcher></soul-searcher>
        <input 🕹️='~soulSearcher:engageInSecondGuessing'>
</mood-stone>

Viewing Demos Locally

Any web server that can serve static files will do, but...

1. Install git.
2. Fork/clone this repo.
3. Install node.js.
4. Open command window to folder where you cloned this repo.

5. npm install

6. npm run serve

7. Open http://localhost:3030/demo/ in a modern browser.

Running Tests

> npm run test

Using from ESM Module:

import 'be-invoking/be-invoking.js';

Using from CDN:

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