be-transformative
v0.0.51
Published
Transform DOM on demand.
Downloads
33
Maintainers
Readme
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
- Install git.
- Fork/clone this repo.
- Install node.
- Open command window to folder where you cloned this repo.
npm install
npm run serve
- 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>