be-joined

Allow values from microdata and form elements and host properties to be combined together (interpolated).

Example 1:

<form>
  <div itemscope>
    <meta itemprop=protocol content=https>
    <meta itemprop=domain content=docs.joshatz.com>
    <meta itemprop=articleType content=cheatsheets>
    <!-- <meta itemprop=language content=js> -->
    <input id=language value=js>
    <!-- <meta itemprop=topic content=classes> -->
    <input name=topic value=classes>

    <meta itemprop=section content=basic-improved---prototype-definition>
    <a -href="{$protocol}://{$domain}/{@articleType}/{#language}/{#language}-{@topic}/#{$section}" be-joined
    >Basic, Improved - Prototype Definition</a>
  </div>
</form>

results in:

<a href=https://docs.joshuatz.com/cheatsheets/js/js-classes/#basic-improved---prototype-definition>Basic, Improved - Prototype Definition</a>

Note

From a performance point of view, this enhancement works best with dynamic (client-side) content that derives from a template (for example, for a repeating web component) as opposed to server-rendered content. To work effectively with server-rendered content, see be-itemized, which (may, tbd) use be-joined behind the scenes.

Special Symbols

As we've seen above, we will encounter special symbols used in order to keep the statements small. A summary of those symbols is shown below

Symbol	Meaning	Notes
/propName	"Hostish"	Pulls in values from the "host".
@propName	Name attribute	Pulls in values from form elements using name attribute.
$propName	Itemprop attribute	Pulls in values from microdata elements with itemprop attribute.
#propName	Id attribute	Pulls in values from elements identified ia the id.
-prop-name	Marker indicates prop	Pulls in values from nearest "upsearch" element matching the attribute.

"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 HTML5 compliance

To be HTML5 compliant, use data-derive-*-from instead:

<form>
  <div itemscope>
    <meta itemprop=protocol content=https>
    <meta itemprop=domain content=docs.joshatz.com>
    <meta itemprop=articleType content=cheatsheets>
    <!-- <meta itemprop=language content=js> -->
    <input id=language value=js>
    <!-- <meta itemprop=topic content=classes> -->
    <input name=topic value=classes>

    <meta itemprop=section content=basic-improved---prototype-definition>
    <a data-derive-href-from="{$protocol}://{$domain}/{@articleType}/{#language}/{#language}-{@topic}/#{$section}" be-joined
    >Basic, Improved - Prototype Definition</a>
  </div>
</form>

Example 1c - Single property binding (including non string)

<div itemscope>
  <link itemprop="isVegetarian" href="https://schema.org/True">
  <input -disabled=$isVegetarian be-joined>

</div>

Example 2 [Untested]

<my-custom-element>
  #shadow
      <a -href="{protocol}://{domain}/{articleType}/{language}/{language}-{topic}/#{section}" be-joined
      >Basic, Improved - Prototype Definition</a>
</my-custom-element>

In this example, when no symbols are provided (or slash is used), we assume the property values should come from the host (ish)

Viewing Demos 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:

import 'be-joined/be-joined.js';

Using from CDN:

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