# be-exportable

> Make exports from inside a script tag accessible from the DOM.

Latest version **0.0.130** (published 2024-09-01) · MIT license · 0 weekly downloads

## Install

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

## 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.130 |
| Published | 2024-09-01 |
| First published | 2021-10-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 12.4 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, decorate, enhancement, behavior, directive |

## Links

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

## Dependencies (4)

- [be-hive](https://npm.io/package/be-hive.md) 0.0.207
- [blow-dry](https://npm.io/package/blow-dry.md) 0.0.11
- [be-enhanced](https://npm.io/package/be-enhanced.md) 0.0.138
- [trans-render](https://npm.io/package/trans-render.md) 0.0.833

## Alternatives

- [localforage](https://npm.io/package/localforage.md) — 6.2M weekly downloads
- [localforage-observable](https://npm.io/package/localforage-observable.md) — 30.8K weekly downloads
- [@y/y](https://npm.io/package/@y/y.md) — 30.1K weekly downloads
- [@metaobjectsdev/render](https://npm.io/package/@metaobjectsdev/render.md) — 3.5K weekly downloads
- [@ledgerhq/coin-algorand](https://npm.io/package/@ledgerhq/coin-algorand.md) — 1.1K weekly downloads

## Recent versions

- 0.0.130 (latest) — 2024-09-01
- 0.0.129 — 2024-09-01
- 0.0.128 — 2024-09-01
- 0.0.127 — 2024-08-11
- 0.0.126 — 2024-08-09
- 0.0.125 — 2024-07-21
- 0.0.124 — 2024-07-20
- 0.0.123 — 2024-07-15
- 0.0.122 — 2024-07-14
- 0.0.121 — 2024-07-13
- 0.0.120 — 2024-07-08
- 0.0.119 — 2024-07-04
- 0.0.118 — 2024-07-01
- 0.0.117 — 2024-06-30
- 0.0.116 — 2024-06-29
- … 115 more at https://npm.io/package/be-exportable/versions

## README

# be-exportable (📦)

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

## Inline scripts

Make exports from inside a script tag accessible from the DOM.

```html
<script nomodule be-exportable>
    export const foo = 'bar';
</script>
```

The script tag ends up with a custom field:  oScript.beEnhanced.beExportable.exports that exposes each of the export const's. 

To wait for the script to load:

```JavaScript
const {emc} = await import('be-exportable/behivior.js);
const enhancement = await oScript.beEnhanced.whenResolved(emc);
const {foo} = enhancement.exports;
```

Inline scripts can reference the script tag with the keyword "selfish".

Inline scripts are quite limited in the syntax.  Only "export const blah"'s are exported.

If used repeatedly in a casual setting, you can reference 📦.js and then replace be-exportable with 📦:

```html
<script nomodule 📦>
    export const foo = 'bar';
</script>
```

## External scripts

External scripts are far more flexible, but cannot reference the script tag with the keyword "selfish".

```html
<script nomodule src="blah/blah.js" be-exportable>
</script>
```

## Repeating script tag

If the adorned script tag is inside a template / shadowDOM realm that is repeated throughout the page, the script tag can share  the same export constants by setting the id to something starting with "shared-". To be extra safe, use a guid after the shared- prefix.

## Integration with blow-dry

If using this enhancement with xtal-element, to avoid the repeated and parsing of script issue, add attribute blow-dry to the script element:

```html
<script blow-dry nomodule be-exportable>
    export const greeting = 'hello';
</script>
```

## 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/ in a modern browser.

## Importing in ES Modules:

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

## Using from CDN:

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

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