be-reformable (🍺)

be-reformable is a custom enhancement that progressively enhances the built-in form element, making attributes/properties like action dynamic. It does not do anything fetch related, leaving that for other components / enhancements. It provides the mechanics of specifying what the fetch parameters should be, and quietly suggests the appropriate time to perform said fetch.

It uses be-enhanced as the underpinning approach, as opposed to the controversial "is" extension.

Demo

Example 1: Making the action property dynamic

Let's see how we can use be-reformable to work bind input elements to the action property. These input elements should not have a name attribute, as we don't want them to affect the query string. Instead we use a custom attribute starting with ":". We bind to th e newton advanced math micro service, declaratively. By itself, this enhancement will not make the form fully functional for this service (as it doesn't) do a fetch or anything.

<link id=newton-microservice rel=preconnect href=https://newton.now.sh/ >

<form
    be-reformable='{
        "baseLink": "newton-microservice",
        "path": "api/v2/:operation/:expression",
    }'
>
    <label for=operation>
        Operation:
        <input :operation value=integrate>
    </label>
    
    <label for=expression>
        Expression:
        <input :expression value="x^2">
    </label>
    
    <noscript>
        <button type=submit>Submit</button>
    </noscript>
</form>

The "path" value follows the URL Pattern syntax.

"base-link" is optional, but allows for easy management of common base API URL's across the application. The link tag should probably go in the head tag of index.html (typically).

What be-reformable does is:

1. Be default, adds "input" event to the adorned form element.
2. If the form's checkValidity() is false, ignores the event.
3. When the event occurs, and checkValidity() is true, it uses the baseLink + path to set the action value of the form element.
   1. It pulls in all the form associated custom elements and/or built-in input elements referenced by the path property.
   2. Forms the compound string and sets the action property/attribute.
4. Triggers event "fetch-ready" which provides the recommended url and options parameters.

Editing JSON-in-HTML

Note

A VSCode plug-in is available to make editing json-in-html more pleasant. This extension works with the web interface of vscode.

be-reformable is a rather lengthy name, and if it appears frequently within an application, could get tiresome to have to type. It is the canonical name, but developers can easily define alternative names. This package provides one such alternative:

<form
    🍺='{
        "baseLink": "newton-microservice",
        "path": "api/v2/:operation/:expression",
    }'
>...</form>

More semantic markup

This is also supported:

<form
    🍺-base-link=newton-microservice 🍺-path=api/v2/:operation/:expression
>...</form>

Support for headers and body

Hardcoded:

<script type=module>
    (await import('trans-render/lib/weave.js'))
        .weave({
            Authorization: "sessionStorage://auth?.bearerToken",
            "Content-Type": "indexedDB://db/store?.key",
            "User-Agent": "globalThis://navigator?.userAgent",
            Accept: "application/json"
        })
        .into('rPpwNLcYsUOjFcg+N8lmOA')
        .andWeave({
            baseURL:  "globalThis://newton-microservice/href"
        })
        .into('qmywdO1vr0SwyuIe4fvzxQ');
</script>

<form 
    method="post" 
    be-reformable='{
        "...": "qmywdO1vr0SwyuIe4fvzxQ",
        "headerFields":["#warning", "%accept-language"],
        "headers": {
            "...": "rPpwNLcYsUOjFcg+N8lmOA",
        }
}'>
    <input id=warning value="199 Miscellaneous warning">
    <input part=accept-language value="de; q=1.0, en; q=0.5">
    <label>
        <textarea name=hello></textarea>
    </label>
    
    <button type='submit'>submit</button>
</form>

<div -innerHTML>

</div>

The baseURL and headers settings that are weaved in above make use of Uniform Source Path syntax.

These are asynchronous and may not already be set when the rest of the form is ready for submitting. be-reformable, by default, won't issue the "fetch-ready" event until all the values have been retrieved (and are truthy).

To indicate that a header is optional, add a question mark at the end of the key:

"Content-Type?": "indexedDB://db/store?.key",

Note

Other components / enhancements that leverage this enhancement, and actually perform the fetch should consider use of be-hashing-out or some other security mechanism if there's any sense of danger that justifies adding that security check.

Support for emitting "fetch-ready" event only after a button click [Untested]:

<link id=newton-microservice rel=preconnect href=https://newton.now.sh/ >

<form
    be-reformable='{
        "baseLink": "newton-microservice",
        "path": "api/v2/:operation/:expression",
        "submitOptions":{
            "onlyAfter": "@submit::click",
            "nudges": true,
            "disableIfNotAllConditionsAreMet": true
        }
        
    }'
>
    <label for=operation>
        Operation:
        <input :operation value=integrate>
    </label>
    
    <label for=expression>
        Expression:
        <input :expression value="x^2">
    </label>
    
    <noscript>
        <button type=submit>Submit</button>
    </noscript>
    <button disabled type=button name=submit>Submit</button>
</form>

Import Maps

Viewing Locally

To view this element locally:

1. Install git, npm
2. Clone or fork this git repo.
3. Open a terminal from the folder created in step 2.
4. Install Python v3 or later
5. Run npm install
6. Run npm run serve
7. Open http://localhost:8000/demo/dev

Importing in ES Modules:

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

Using from CDN:

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