be-joined v0.0.3

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>

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

"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.

HTML5 compliance TODO

To be HTML5 compliant, use data-- 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 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>