https://github.com/bahrus/be-value-added
Enhances some built-in elements with a "value" property, which other enhancements use to provide formatting and binding support.
https://github.com/bahrus/be-value-added
Last synced: 4 months ago
JSON representation
Enhances some built-in elements with a "value" property, which other enhancements use to provide formatting and binding support.
- Host: GitHub
- URL: https://github.com/bahrus/be-value-added
- Owner: bahrus
- License: mit
- Created: 2023-08-12T17:32:21.000Z (almost 2 years ago)
- Default Branch: baseline
- Last Pushed: 2024-08-10T22:55:18.000Z (10 months ago)
- Last Synced: 2024-12-31T23:11:49.896Z (5 months ago)
- Language: JavaScript
- Homepage:
- Size: 347 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# be-value-added (📶)
(The name of that emoji is "antenna bars").
[](https://bundlephobia.com/result?p=be-value-added)
[](http://badge.fury.io/js/be-value-added)
[](https://github.com/bahrus/be-value-added/actions/workflows/CI.yml)
*be-value-added* is a [be-enhanced](https://github.com/bahrus/be-enhanced) based enhancement that enhances most built-in elements with a "value" property, and which adds support for formatting when semantically appropriate. It adds two-way binding support between this "value" property and a key property of the enhanced element, in some cases.
The [output element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output) provides an example of a built-in element that "outputs" its value. It's a bit of a strange creature, given that it displays the exact value passed in, but the "value-add" proposition the output element provides may be a bit esoteric (a11y related).
## HTML signals
Anyway, the model / precedent that the output element provides seems quite useful, when applied to elements that may do a bit more than simply display the value. In particular, elements that format the value, based on Intl.* settings, or elements that reflect values to metadata attributes (meta, link tags).
The "value" property this enhancement adds is accessible via oElement.beEnhanced.beValueAdded.value, and changes to the value can be subscribed to using addEventListener.
The elements be-value-added adds formatting support are many of the special elements used by microdata:
| Element | Binding property/attribute
|----------------|------------------------------------|
| a | href/href |
| time | datetime/dateTime |
| meta | content/content |
| data | value/value |
## Setting the value programmatically
```html
...
const {emc} = await import('be-value-added/behivior.js');
(await time[be].whenResolved(emc)).value = new Date();
(await data[be].whenResolved(emc)).value = 13456789;
(await meta[be].whenResolved(emc)).value = 'hello';
(await link[be].whenResolved(emc)).value = true;
```
There are other ways to set the value programmatically, if you wait for the dependencies to load, such as:
```JavaScript
time.beEnhanced.by.beValueAdded.value = new Date();
```
Note that other binding-related enhancements in the *be-enhanced* family of enhancements, such as [be-observant](https://github.com/bahrus/be-observant) or [be-switched](https://github.com/bahrus/be-switched) automatically attaches the enhancement when applicable, so it is quite possible to use this enhancement in a declarative way.
Where values are displayed (for the data and time tags above), the user will see the .toLocale... value. To customize the international settings, use [https://github.com/bahrus/be-intl](be-intl) enhancement that enhances this enhancement.
This is the canonical name. In less formal settings, where there is little chance of collision with other libraries, you can reference [📶.js](https://github.com/bahrus/be-value-added/blob/baseline/%F0%9F%93%B6.js) instead and use the much shorter syntax:
```html
...
const {emc} = await import('be-value-added/📶.js');
(await time[be].whenResolved(emc)).value = new Date();
(await data[be].whenResolved(emc)).value = 13456789;
(await meta[be].whenResolved(emc)).value = 'hello';
(await link[be].whenResolved(emc)).value = true;
```
The link above demonstrates how easy it is to define your own name.
This will display the date and number in locale string format, and the meta and link tags in a microdata compatible way.
This package contains a base class that helps implement such features in userland using custom [enhancements](https://github.com/bahrus/be-enhanced). This package also provide end-user capabilities in its own right.
Note that this does *not* add or modify the value property onto the enhanced element (top level). It just provides a uniform interface for multiple enhancements, all of which need to:
1. Be able to be passed a value
2. Reflect that value in some way to an attribute and/or text content of the element.
3. Optionally be able to observe the attribute (or text content -- todo) for modifications from other sources, and sync that back up with the value.
## Running locally
Any web server that 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-value-added
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 ESM Module:
For just the enhancement without attribute support:
```JavaScript
import 'be-value-added/be-value-added.js';
```
For attribute/behivior support as well:
```JavaScript
import 'be-value-added/behivior.js';
```
## Using from CDN:
```html
import 'https://esm.run/be-value-added';
```