# be-pute

> Compute values from other HTML signals via local script tags.

Latest version **0.0.2** (published 2023-09-29) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2023-09-29 |
| First published | 2023-09-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 17.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | anderson.bruce.b@gmail.com |
| Maintainers | bahrus |
| Keywords | web-components, web-component, custom-element, custom-elements, template, bind, observe, conditional |

## Links

- npm: https://www.npmjs.com/package/be-pute
- npm.io page: https://npm.io/package/be-pute

## Dependencies (8)

- [be-hive](https://npm.io/package/be-hive.md) 0.0.123
- [be-linked](https://npm.io/package/be-linked.md) 0.0.50
- [be-enhanced](https://npm.io/package/be-enhanced.md) 0.0.53
- [trans-render](https://npm.io/package/trans-render.md) 0.0.706
- [xtal-element](https://npm.io/package/xtal-element.md) 0.0.579
- [be-exportable](https://npm.io/package/be-exportable.md) 0.0.93
- [be-propagating](https://npm.io/package/be-propagating.md) 0.0.26
- [be-value-added](https://npm.io/package/be-value-added.md) 0.0.7

## Recent versions

- 0.0.2 (latest) — 2023-09-29
- 0.0.1 — 2023-09-28
- 0.0.0 — 2023-09-28

## README

# be-pute


<!-- [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/be-switched)  -->
[![Playwright Tests](https://github.com/bahrus/be-pute/actions/workflows/CI.yml/badge.svg)](https://github.com/bahrus/be-pute/actions/workflows/CI.yml) 
[![NPM version](https://badge.fury.io/js/be-pute.png)](http://badge.fury.io/js/be-pute)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/be-pute?style=for-the-badge)](https://bundlephobia.com/result?p=be-pute)
<img src="http://img.badgesize.io/https://cdn.jsdelivr.net/npm/be-pute?compression=gzip">

Compute values from other HTML signals via local script tags.

## Example 1a

```html
<div itemscope>
    <link itemprop=isHappy>
    <link itemprop=isWealthy>

    ...

    <script nomodule>
        isHappy && !isWealthy
    </script>
    <link itemprop=isInNirvana be-pute='Value from $isHappy, $isWealthy.'>
</div>
```


## Example 1b

```html
<form itemscope>
    <link itemprop=isHappy href=https://schema.org/True>
    <input type=checkbox name=isWealthy>
    <div contenteditable id=liberated>abc</div>
    ...

    <script nomodule>
        isHappy && !isWealthy && liberated.length > 17
    </script>
    <link itemprop=isInNirvana be-pute='Value from $isHappy, @isWealthy, #liberated.'>
</form>
```

## Example 1c

Add more context to the scripting

```html
<form itemscope>
    <link itemprop=isHappy href=https://schema.org/True>
    <input type=checkbox name=isWealthy>
    <div contenteditable id=liberated>abc</div>
    ...

    <script nomodule>
        ({isHappy, isWealthy, liberated}) => {
            console.log({isHappy, isWealthy, liberated});
            return isHappy && !isWealthy && liberated.length > 17;
        }
    </script>
    <link itemprop=isInNirvana be-pute='Value from $isHappy, @isWealthy, #liberated.'>
</form>
```

## Example 1d

Values coming from host (/)

```html
<my-custom-element>
    #shadow
        <script nomodule>
            myProp ** 2
        </script>
        <data itemprop=squared be-pute='Value from /myProp.'>
        <be-hive></be-hive>
</my-custom-element>
```

## Example 1e

Value coming from marker

```html
<form itemscope>
    <my-custom-element -num-value></my-custom-element>
    

    <script nomodule>
        numValue ** 2
    </script>
    <meta itemprop=square be-pute='Value from -num-value.'>
</form>
```

## Example 2a

```html
<form itemscope>
    <link itemprop=isHappy href=https://schema.org/True>
    <input type=checkbox name=isWealthy>
    <div contenteditable id=liberated>abc</div>
    ...

    <script nomodule>
        ({
            prop1: isHappy && !isWealthy && liberated.length > 17,
            prop2: liberated.blink(),
        })
    </script>
    <any-element itemprop=isInNirvana be-pute='Props from $isHappy, @isWealthy, #liberated.'></any-element>
</form>
```

## Viewing Your Element Locally

Any web server that can serve static files will do, but...

1.  Install git.
2.  Fork/clone this repo.
3.  Install node.js.
4.  Open command window to folder where you cloned this repo.
5.  > npm install
6.  > npm run serve
7.  Open http://localhost:3030/demo/ in a modern browser.

## Running Tests

```
> npm run test
```

## Using from ESM Module:

```JavaScript
import 'be-pute/be-pute.js';
```

## Using from CDN:

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

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