be-hydrated is a DOM (custom) element decorator / behavior. It assists with hydrating nearby elements.
Configuring be-hydrated can be done as a combination of two notation styles: JavaScriptObjectNotation, and/or what we refer to as "Hemingway Notation":
<div be-scoped>
<button>30</button>
</div>
<template be-hydrated='
Hydrate beScoped:scope.
Derive count as number from button.
On click of button increment count.
Share count to button as text content.
'>
</template>be-hydrated can adorn both template and script elements, whichever is more convenient.
The JSON equivalent, discussed later[TODO], 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. It is the equivalent of markdown for JavaScript.
The configuration above is shorthand for:
<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 increment count.
Share count to button as text content.
'>
</template>Breaking down the (hidden) meaning further, the configuration above is shorthand for:
<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 increment count.
'
be-sharing='
Scrutinize beScope:scope.
Share count to button as text content.
'
>
</template>each of which is described in more detail: