# be-based

> be-based is a package that contains a client-side web component decorator, a trans-render transformer [TODO], and a HTMLRewriter class [TODO].

Latest version **0.0.74** (published 2025-10-04) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 40/100 (D)** — status: maintenance-mode.

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

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.74 |
| Published | 2025-10-04 |
| First published | 2022-01-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 8.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | anderson.bruce.b@gmail.com |
| Maintainers | bahrus |
| Keywords | web components, web component, custom elements, custom element |

## Links

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

## Dependencies (4)

- [be-hive](https://npm.io/package/be-hive.md) 0.0.267
- [be-enhanced](https://npm.io/package/be-enhanced.md) 0.0.189
- [trans-render](https://npm.io/package/trans-render.md) 0.0.960
- [mount-observer](https://npm.io/package/mount-observer.md) 0.0.105

## Recent versions

- 0.0.74 (latest) — 2025-10-04
- 0.0.73 — 2025-08-30
- 0.0.72 — 2024-12-08
- 0.0.71 — 2024-12-07
- 0.0.70 — 2024-07-28
- 0.0.69 — 2024-07-28
- 0.0.68 — 2024-07-27
- 0.0.67 — 2024-07-27
- 0.0.66 — 2024-07-25
- 0.0.65 — 2024-06-12
- 0.0.64 — 2024-06-02
- 0.0.63 — 2024-06-02
- 0.0.62 — 2024-05-12
- 0.0.61 — 2024-05-11
- 0.0.60 — 2024-05-11
- … 60 more at https://npm.io/package/be-based/versions

## README

# be-based [WIP]


be-based is a package that allows a DOM document fragment filled with relative URL paths, to be adjusted based on a base URL. This is quite critical when streaming HTML from a third-party element to a DOM node contained within the Live DOM tree.  be-based plays a critical role in combination with [be-written](https://github.com/bahrus/be-written).

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

## The syntax:

```html
<div be-based="https://www.supremecourt.gov/about/">
    <a href="biographies.aspx#SOConnor">O'Connor, Sandra Day</a>
<div>
```

is shorthand for:

```html
<div be-based='{
    "base": "https://www.supremecourt.gov/about/",
    "forAll": ["href", "src", "xlink:href"]
}'>
    <a href="biographies.aspx#SOConnor">O'Connor, Sandra Day</a>
</div>
```

be-based rewrites the attribute within:

```html
<div is-based="https://www.supremecourt.gov/about/">
    <a href="https://www.supremecourt.gov/about/biographies.aspx#SOConnor">O'Connor, Sandra Day</a>
</div>
```


### As a custom attribute / decorator / behavior

be-based is one of a growing family of [be-hive](https://github.com/bahrus/be-hive)/[be-enhanced](https://github.com/bahrus/be-enhanced) web component based custom attributes /  behaviors / decorators / directives.

By referencing behivior.js, elements with attribute be-based will be discovered and transformed.



If using [stream-orator](https://github.com/bahrus/stream-orator) to stream HTML to a target element, be-based can be used to watch all new elements, and apply all the rules as they are discovered.

This seems to work quite well with Chromium based browsers running on windows (rewriting image url's before the browser tries the original, invalid url), but isn't so effective with Firefox.

Update:  Well, on Chromium based browsers, it doesn't seem so reliable either, at least depending on when I try.

### As a cloudflare HTMLRewriter Class [TODO]

### As a service worker helper [TODO]

W3C [willing](https://discourse.wicg.io/t/proposal-support-cloudflares-htmlrewriter-api-in-workers/5721).

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