blow-dry

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.

<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

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:

<template blow-dry></template>

What it will leave behind is a breadcrumb:

<template data-blow-dry-ref="blow-dry-src-1234"></template>

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

const clone = window['blow-dry-src-1234'].content.cloneNode(true);

Same for inline script elements

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

winds up with a breadcrumb:

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

import 'blow-dry/blow-dry.js';

Using from CDN:

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