# be-hydrated

> be-hydrated is a DOM (custom) element decorator / behavior. It assists with hydrating the element it adorns.

Latest version **0.0.3** (published 2023-03-12) · MIT license · 0 weekly downloads

## Install

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

## 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.3 |
| Published | 2023-03-12 |
| First published | 2021-10-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 9.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | anderson.bruce.b@gmail.com |
| Maintainers | bahrus |
| Keywords | web-components, web-component, custom-element, custom-elements |

## Links

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

## Dependencies (6)

- [be-hive](https://npm.io/package/be-hive.md) 0.0.82
- [be-derived](https://npm.io/package/be-derived.md) 0.0.3
- [be-sharing](https://npm.io/package/be-sharing.md) 0.0.3
- [be-eventful](https://npm.io/package/be-eventful.md) 0.0.4
- [be-decorated](https://npm.io/package/be-decorated.md) 0.0.235
- [trans-render](https://npm.io/package/trans-render.md) 0.0.670

## Recent versions

- 0.0.3 (latest) — 2023-03-12
- 0.0.2 — 2022-01-08
- 0.0.1 — 2021-12-27
- 0.0.0 — 2021-10-11

## README

# be-hydrated

be-hydrated is a DOM (custom) element decorator / behavior.   It assists with hydrating the element it adorns.  

## Hemingway Notation

Configuring the be-hydrated can be done as a combination of two notation styles:  JavaScriptObjectNotation, and/or what we refer to as ["Hemingway Notation"](https://bookanalysis.com/ernest-hemingway/writing-style/):

```html
<div be-scoped>
    <button>30</button>
</div>
<template be-hydrated='
    Affect previous element sibling.//Default setting.
    Target beScoped:scope. //Target is a second level setting sitting atop the Affect setting.
    Observe previous element sibling.//Default setting.
    Scrutinize beScoped:scope. //Scrutinize is a second level setting sitting atop the Observe setting.
    Derive count as number from button.
    On click of button do increment count.
    Share count to button as text content.
'>
</template>
```

The JSON equivalent, discussed later, may be more convenient for the JavaScript crowd who prefer editing a pre-build *.mts/*.mjs file that compiles to *.html, benefitting from TypeScript compile checks.  Hemingway notation is more optimized for regular Joe's and Jill's editing HTML files.  

## Small short cut [TODO]:

```html
<div be-scoped>
    <button>30</button>
</div>
<template be-hydrated='
    Hydrate beScoped:scope.
    Derive count as number from button.
    On click of button do increment count.
    Share count to button as text content.
'>
</template>
```

which can be broken down to:

```html
<div be-scoped>
    <button>30</button>
</div>
<template  
    be-derived='
    Target beScoped.scope.
    Derive count as number from button.
    ' 
    be-eventful='
    Target beScope.scope.
    On click of button do increment count.
    '
    be-sharing='
    Scrutinize beScope.scope.
    Share count to button as text content.
    '
>
</template>
```

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