# blow-dry

> Turn some (server) expanded HTML into the smallest, optimized HTML representation so it can be rapidly cloned (via web components, for example) on the client

Latest version **0.0.15** (published 2025-10-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install blow-dry
pnpm add blow-dry
yarn add blow-dry
bun add blow-dry
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.0.15 |
| Published | 2025-10-23 |
| First published | 2023-12-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 17.1 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 |

## Links

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

## Dependencies (1)

- [mount-observer](https://npm.io/package/mount-observer.md) 0.0.105

## Recent versions

- 0.0.15 (latest) — 2025-10-23
- 0.0.14 — 2025-10-04
- 0.0.13 — 2025-10-04
- 0.0.12 — 2025-09-25
- 0.0.11 — 2024-07-15
- 0.0.10 — 2024-07-14
- 0.0.9 — 2024-06-17
- 0.0.8 — 2024-02-04
- 0.0.7 — 2024-01-17
- 0.0.6 — 2024-01-17
- 0.0.5 — 2024-01-14
- 0.0.4 — 2024-01-14
- 0.0.3 — 2024-01-11
- 0.0.2 — 2023-12-31
- 0.0.1 — 2023-12-31
- … 1 more at https://npm.io/package/blow-dry/versions

## README

# blow-dry

[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/blow-dry?style=for-the-badge)](https://bundlephobia.com/result?p=blow-dry)
<img src="http://img.badgesize.io/https://cdn.jsdelivr.net/npm/blow-dry?compression=gzip">
[![NPM version](https://badge.fury.io/js/blow-dry.png)](http://badge.fury.io/js/blow-dry)

Turn some (server) expanded HTML into the smallest, optimized HTML representation so it can be rapidly cloned (via web components, for example) on the client.

This allows a server rendered web component to serve also as a template for the definition of the web component, without having to package that separately.

```html
<my-ssr-web-component>
    <template shadowrootmode=open>
        <span itemprop>some dynamic data</span>
        <table>
            <thead>
            </thead>
            <tbody>
            </tbody>
        </table>
        <template onload=blow-dry-to-head>
            <script>
                import 'be-bound/be-bound.js';
            </script>
            <link rel=stylesheet href=https://fonts.googleapis.com/css?family=Indie+Flower>
        </template>
        <blow-dry></blow-dry>
    </template>
</my-ssr-web-component>
```

Users can customize what adjustments are made to the ssr rendered web component by a combination of:

1.  Setting attributes "remove-inner", "remove-outer".
2.  Extend this web component, and override getters removeInner, removeOuter, for starters.

The "cleansed" template can be obtained via oBlowDryInstance.canonicalTemplate.

If the component hasn't loaded yet, can listen for event "resolved" to be fired, and then pull in the template.

## Templates inside of templates [WIP]

My performance measurements indicate that if a template has a nested template inside, it is faster to extract out the template to a shared location, clone the reduced size template, and reference the shared template.

To instruct blow-dry to make this happen, add attribute blow-dry (or data-blow-dry) to the template:

```html
<template blow-dry></template>
```

What it will leave behind is a breadcrumb that has been [proposed](https://github.com/WICG/webcomponents/issues/896) as a [standard](https://github.com/bahrus/mount-observer/blob/baseline/README.md#applying-dry-to-templates):

```html
<template id=myTemplate rel=preload src="#blow-dry-src-1234"></template>
```

The content of the original template can then be obtained via:

```JavaScript
const clone = (myTemplate.remoteContent || window['blow-dry-src-1234'].content).cloneNode(true);
```

## Same for inline script elements

```html
<script blow-dry>
    export const blah='blah';
</script>
```

winds up with a breadcrumb:

```html
<script data-blow-dry-ref="blow-dry-src-5678"></script>
```

The script contents are available accessible via head['']


## Viewing Demos 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 'blow-dry/blow-dry.js';
```

## Using from CDN:

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

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