be-computed [WIP]



Hydrate and compute values reactively from other (server side rendered/generated) HTML signals via local script tags.

be-computed is very close in purpose to be-overloading. be-overloading focuses more on user-initiated event driven reactions. be-computed is more focused on observing peer elements (and/or the host) and calculating values based on these dependencies reactively.

Obscure note (ignore if it not understanding the context): This behavior probably doesn't make sense to be used where it makes sense to use the trans-render web component. For that reason, not separating the be-hive registration from the be-computed class.

Special Symbols

In the examples below, we will encounter special symbols used in order to keep the statements small, as far as identifying which elements to pull in property values from, and observing those elements for property value changes:

| Symbol | Meaning | Notes |
|-------------|----------------------|---------------------------------------------------------------------------------------------------------------------------------------------|
| /propName |"Hostish" | Attaches listeners to getters/setters on properties of "hostish". |
| @propName |Name attribute | Listens for input events on form elements based on matching the name attribute. |
| |propName |Itemprop attribute | Matches element based on matching itemprop attribute. If contenteditible, listens for input events. Otherwise, uses be-value-added. |
| #propName |Id attribute | Matches element based on id within ShadowDOM realm. Listens for input events. |
| -prop-name |Marker indicates prop | Matches elements based on finding the exact attribute starting with a dash. Attaches listeners to getters/setters. |


"Hostish" means:

1. First, do a "closest" for an element with attribute itemscope, where the tag name has a dash in it. Do that search recursively.
2. If no match found, use getRootNode().host.

Example 1a -- Locality of behavior notation with inline expression

``html

...

onload="isHappy && !isWealthy"
be-computed='from onload expression, passing in |isHappy, |isWealthy.'
>

`

What this does:

1. Since the onload attribute expression doesn't start with export const ..., and doesn't start with an open parenthesis, be-computed wraps the expression like so:

`JavaScript
export const expr = async ({isHappy, isWealthy}) => {
return isHappy && !isWealthy;
}
`

2. Since the return statement returns a primitive, it applies the value to the adorned element, based on context. In this case, it sets:

`html

`

if the conditions are met, and attaches the be-value-added enhancement.

The value of the computation can be obtained via oLink.beEnhanced.beValueAdded.value.

Example 1b -- Verbose notation with external script tag

`html

...

`

Advantages of using script element -- less issues with characters that cause problems inside an attribute, may get better IDE support. Disadvantages -- a little further away, a little more verbose, if you need to move the element, need to remember to move the associated script element along with it.

Example 1c -- compact notation with inline expression

`html

...

onload="isHappy && !isWealthy"
be-computed='from |isHappy, |isWealthy.'
>

`

Example 1d -- compact notation with external script tag

`html

...

`

Example 1e -- bind to named elements and id'd elements

`html

abc

...
onload="isHappy && !isWealthy && liberated?.length > 17"
be-computed='from |isHappy, @isWealthy, #liberated.'
>

`

Example 1f -- Add more context to the scripting

`html

abc

...

onload="
({isHappy, isWealthy, liberated}) => {
console.log({isHappy, isWealthy, liberated});
return isHappy && !isWealthy && liberated?.length > 17;
}
"
be-computed='from |isHappy, @isWealthy, #liberated.'
>

`

Since the expression starts with open parenthesis, wrapping is more lightweight. Just adds export const default.

Example 1g

Specify export symbol

`html

abc

...

onload="
export const calculateInNirvana = ({isHappy, isWealthy, liberated}) => {
console.log({isHappy, isWealthy, liberated});
return isHappy && !isWealthy && liberated?.length > 17;
}
"
be-computed='from onload export of calculateInNirvana, passing in |isHappy, @isWealthy, #liberated.'
>

`

This allows for multiple expressions that can be used by different enhancements.

Example 1h -- Values coming from host.

`html

#shadow




`

The slash is optional, so this will also work:

Example 1i -- Values coming from host, take II.

`html

#shadow




`

Example 1j

Value coming from marker

`html

onload="numValue ** 2"
be-computed='from -num-value.'>

`

Example 2a Assigning objects, verbose notation, external script

`html

abc

...

`

Detecting such expressions: Starts and ends with ({...}), no arrow. If need to use arrow functions inside, need to provide the context.

Example 2b Assigning objects, compact notation, external script

`html

abc

...

`

Example 2c Assigning objects, verbose notation, inline attribute

`html

abc

...

onload="({
prop1: isHappy && !isWealthy && liberated?.length > 17,
prop2: liberated?.blink()
})"
be-computed='from onload expression, passing in |isHappy, @isWealthy, #liberated, and assign result.'>

`

Example 2d Assigning objects, compact notation, inline attribute

`html

abc

...
onload="
{
prop1: isHappy && !isWealthy && liberated?.length > 17,
prop2: liberated?.blink()
}
"
be-computed='from |isHappy, @isWealthy, #liberated, and assign result.'>

`

Example 2e Assigning object to sub property [TODO]

Example 2f Assigning object to be-scoped enhancement

This would allow transforms to be based on.

We can assign the result of a computation to an enhancement, or the "stateProp" property of an enhancement (as defined in the static config property of the enhancement). So one prominent use case is assigning to local "scope" of an element:

`html

abc

...

onload="
{
prop1: isHappy && !isWealthy && liberated?.length > 17,
prop2: liberated?.blink()
}
"
be-computed='from |isHappy, @isWealthy, #liberated, and assign result to $0+beScoped.'>

`

Viewing Your Element 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:

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

Using from CDN:

`html

``