# be-promising

> Apply be-decorated element decorators / behaviors in a particular order.

Latest version **0.0.9** (published 2023-08-19) · MIT license · 0 weekly downloads

## Install

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

## 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.9 |
| Published | 2023-08-19 |
| First published | 2022-08-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Bruce Anderson |
| Maintainers | bahrus |
| Keywords | web-components, web-component, custom-element, custom-elements |

## Links

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

## Dependencies (4)

- [be-hive](https://npm.io/package/be-hive.md) 0.0.116
- [be-enhanced](https://npm.io/package/be-enhanced.md) 0.0.41
- [trans-render](https://npm.io/package/trans-render.md) 0.0.702
- [xtal-element](https://npm.io/package/xtal-element.md) 0.0.577

## Recent versions

- 0.0.9 (latest) — 2023-08-19
- 0.0.8 — 2023-08-18
- 0.0.7 — 2023-07-26
- 0.0.6 — 2023-07-26
- 0.0.5 — 2022-10-17
- 0.0.4 — 2022-09-16
- 0.0.3 — 2022-09-06
- 0.0.2 — 2022-08-29
- 0.0.1 — 2022-08-29
- 0.0.0 — 2022-08-27

## README

# be-promising

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

be-promising aims to address two tricky issues when it comes to custom enhancements:

## Issue 1:  Applying multiple enhancements in a proscribed order.

[be-enhanced](https://github.com/bahrus/be-enhanced) [be-hiviors](https://github.com/bahrus/be-hive) provide the ability to apply multiple cross-cutting enhancements to a single element.  Sometimes, though, we need to apply them in a particular order.

be-promising provides this capability.

```html
<input be-promising='{
    "be":[ "typed", "clonable", "delible"]
}'>
```

Idea influenced by [this discussion](https://twitter.com/dan_abramov/status/1563307506482696192).

For this to work, be-decorated adopts a convention of using property "resolved" / event "resolved" to indicate when it has "done its thing", whatever that is.

### Applying settings

```html
<input be-promising='{
    "be":[ "typed", 
        {
            "clonable": {
                "clonableSettings": "..."
            },
        },
        {
            "delible": {
                "delibleSettings": "..."
            }
        }
    ]
}'>
```

## Specify attribute value instead:

```html
<label for=url>Enter Url</label>
<input id=url be-promising='{
    "be": [{
        "committed": "to-change"
    }]
}'>
<button id=to-change>Search</button>
```



### Apply some enhancements in parallel [TODO]

```html
<input be-promising='{
    "be":[ "typed", {
            "clonable": {
                "clonableSettings": "..."
            },
            "delible": {
                "delibleSettings": "..."
            }
    }]
}'>
```

This would "resolve" the "be-typed" enhancement first, then launch be-clonable and be-delible.

## Issue 2

One problem I've been struggling with is how to take DOM in the live DOM tree, and (declaratively) [define](https://github.com/bahrus/be-definitive) a web component out of it.  The three fundamental questions to grapple with:

1.  When to take the "snapshot" of the dom, and turn it into a template.
2.  What content it is safe to remove from that template in order to optimize the clone.
3.  How to capture the needed element enhancements when some of those enhancements are only applicable to hydrating from server-rendered content.

be-promising leaves behind a "breadcrumb" for server-rendered HTML, using guid's.  Used by be-definitive [TODO].

## Running locally

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

1.  Install git.
2.  Do a git clone or a git fork of repository https://github.com/bahrus/be-promising
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.

## Using from CDN:

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

## Referencing via ESM Modules:

```JavaScript
import 'be-promising/be-promising.js';
```

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