be-transformative

be-transformative is a custom element / DOM decorator that allows for css-like transformations to be performed on demand.

The syntax for the transformations are based on declarative trans-render syntax.

Example:

<button be-transformative='{
    "click":{
        "transform":{
            ":host": [{"treeView": false, "textView": true}],
            ".tree-view-selector":[{"style": {"display":"inline-block"}}],
            ".text-view-selector": [{"style": {"display":"none"}}]
        }
    },
    "myProp:onSet":{
        "transform":{
            ...
        }
    }
}'></button>

One potential objection to the syntax shown above is that JSON is quite finicky about allowed syntax, giving the developer a potentially frustrating experience.

However, a VSCode plugin is available which provides syntax coloring and catches most JSON errors.

And the may-it-be compiler allows us to use .mjs/.mts files as our editing canvas, and compile to syntax as shown above.

Running a transform immediately.

This can be useful for hydrating

<button be-transformative='{
    "":{
        "transform":{
            ":host": [{"treeView": false, "textView": true}],
            ".tree-view-selector":[{"style": {"display":"inline-block"}}],
            ".text-view-selector": [{"style": {"display":"none"}}]
        }
    }
}'></button>

Viewing Locally

1. Install git.
2. Fork/clone this repo.
3. Install node.
4. Open command window to folder where you cloned this repo.

5. npm install

6. npm run serve

7. Open http://localhost:3030/demo/dev in a modern browser.

Importing in ES Modules:

import 'be-exportable/be-transformative.js';

Using from CDN:

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