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"}}]
        }
    }
}'></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>