# be-transformative

> Transform DOM on demand.

Latest version **0.0.51** (published 2022-10-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install be-transformative
pnpm add be-transformative
yarn add be-transformative
bun add be-transformative
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.51 |
| Published | 2022-10-18 |
| First published | 2021-10-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 12.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | anderson.bruce.b@gmail.com |
| Maintainers | bahrus |
| Keywords | web-components, web-component, custom-element, custom-elements, JSON, bind, notify, transform |

## Links

- npm: https://www.npmjs.com/package/be-transformative
- Repository: https://github.com/bahrus/be-transformative
- Homepage: https://github.com/bahrus/be-transformative#readme
- Issues: https://github.com/bahrus/be-transformative/issues
- npm.io page: https://npm.io/package/be-transformative

## Dependencies (3)

- [be-hive](https://npm.io/package/be-hive.md) 0.0.76
- [be-decorated](https://npm.io/package/be-decorated.md) 0.0.182
- [trans-render](https://npm.io/package/trans-render.md) 0.0.628

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.0.51 (latest) — 2022-10-18
- 0.0.50 — 2022-10-16
- 0.0.49 — 2022-09-10
- 0.0.48 — 2022-09-07
- 0.0.47 — 2022-08-28
- 0.0.46 — 2022-08-24
- 0.0.45 — 2022-08-18
- 0.0.44 — 2022-08-15
- 0.0.43 — 2022-08-08
- 0.0.42 — 2022-05-02
- 0.0.41 — 2022-04-13
- 0.0.40 — 2022-04-11
- 0.0.39 — 2022-04-09
- 0.0.38 — 2022-04-08
- 0.0.37 — 2022-04-08
- … 37 more at https://npm.io/package/be-transformative/versions

## README

# be-transformative

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

[![Playwright Tests](https://github.com/bahrus/be-transformative/actions/workflows/CI.yml/badge.svg?branch=baseline)](https://github.com/bahrus/be-transformative/actions/workflows/CI.yml)

<a href="https://nodei.co/npm/be-transformative/"><img src="https://nodei.co/npm/be-transformative.png"></a>

[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/be-transformative?style=for-the-badge)](https://bundlephobia.com/result?p=be-transformative)

<img src="http://img.badgesize.io/https://cdn.jsdelivr.net/npm/be-transformative?compression=gzip">

The syntax for the transformations are based on [declarative trans-render syntax](https://github.com/bahrus/trans-render).

Example:

```html
<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](https://marketplace.visualstudio.com/items?itemName=andersonbruceb.json-in-html) is available which provides syntax coloring and catches most JSON errors.

And the [may-it-be compiler](https://github.com/bahrus/may-it-be) 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

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

<!--in contrast to be-transformed -- which uses capture, and transform is only inside that element.-->

## 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:

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

## Using from CDN:

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

---
_Source: https://npm.io/package/be-transformative · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._