be-fetching [WIP]

be-fetch provides fetch support to the adorned element in a number of different ways:

Example 1 - Enhancing the input element with type url

<input type=url be-fetching>

When a valid url is entered, be-fetching fetches it. Result goes to oInput.beEnhanced.beFetching.value. oInput fires non bubbling event "enh-by-be-fetching.value-changed" when value changes. While fetch is in progress, adds css class "be-fetching-fetch-in-progress" to the adorned element.

Example 2 - Same as example 1, but specifying the url before and after the input element.

Suppose we want the input element be-fetching adorns to use the input element to only provide a part of the url it should fetch?

be-fetching supports that as well:

<input be-fetching='{
    "pre": "https://cdn.jsdelivr.net/npm",
    "post": "/dist/custom-elements.json"
}' value=/@shoelace-style/shoelace>

Example 3 -- specify a target [TODO]

<input be-fetching='{
    "pre": "https://cdn.jsdelivr.net/npm",
    "post": "/dist/custom-elements.json",
    "target": "json-viewer[-object]"
}' value=/@shoelace-style/shoelace>
...

<json-viewer -object aria-live=polite></json-viewer>

When a target is specified (as above), it will automatically set the target's aria-busy to true until the fetch is complete, and also set aria-live=polite if no other value is specified.

Running locally

Any web server than 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-fetching
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:

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

Using from CDN:

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