README

be-reformable

be-reformable is a web component that progressively enhances the built-in form element. It uses be-decorated as the underpinning approach, as opposed to the controversial "is" approach.

Demo

Syntax example - Using a Micro Service API

Let's see how we can use be-reformable, to work with the newton advanced math micro service, declaratively.

<link id=newton-microservice rel=preconnect href=https://newton.now.sh/ >
<form be-reformable='{
    "base-link": "newton-microservice",
    "path": ["api/v2/", "operation", "/", "expression"],
    "autoSubmit": true,
    "as": "json"
}'
    target="json-viewer[-object]"
>
    <label for=operation>Operation:</label>
    <input id=operation value=integrate>
    <label for=expression>Expression:</label>
    <input id=expression value="x^2">
</form>
<json-viewer -object></json-viewer>
<iframe name="json-viewer[-object]"><!-- backup if no JS --></iframe>

The "path" value is an "interpolation from a distance" expression -- it alternates between hardcoded strings, and names of input elements it expects to find in oForm.elements.

The "as" property defaults to json, so isn't actually needed to be specified. The other option is "text", if the desire is to set the innerHTML of a target element.

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

Another optional parameter not shown above is "reqInit" which allows for specifying details about the fetch request.

[TODO] Support POST with body

Staying Kosher

The attribute be-reformable can be replaced with data-be-reformable.

Editing JSON-in-HTML

A web-friendly VSCode plug-in is available to make editing json-in-html more pleasant.

Import Maps

The following import map is needed for non-bundling environments:

<script type=importmap>
    {
        "imports": {
            "trans-render/": "../node_modules/trans-render/",
            "xtal-element/": "../node_modules/xtal-element/",
            "be-decorated/": "../node_modules/be-decorated/"
        }
    }
</script>

Viewing Locally

To view this element locally:

Install git, npm
Clone or fork this git repo.
Open a terminal from the folder created in step 2.
Run npm install
Run npm run serve
Open http://localhost:3030/demo/dev

Usage no npm install needed!