h2o-tf v0.0.5

h2o-tf

HTML to Object Transform

For performance-oriented sites, where content is primarily, but not exclusively, HTML-based, it's useful to be able to take incoming HTML, and, off the main thread, "reverse-engineer" the underlying data, and store it outside of RAM.

We may want the server to render an initial list of items in a format that is fast and SEO-friendly. I.e. just send HTML to the browser. If the content is particularly large, perhaps only a portion can be displayed, the rest hidden via styling. Assume the total DOM tree(displayed and hidden) has, embedded in it, all the needed data for a richer view. Once the necessary dependencies needed to generate this richer view are downloaded, containing some expensive renderer (tree, chart, or grid, etc), we can then pass the Plain Old JavaScript Object (POJO) to the fancy renderer.

Service Worker: h2o-sw.js

If you have a main service worker that takes care of traditional PWA functionality, you can import this service (and other) service worker(s) using:

importScripts('./h2o-sw.js');

Listens for postMessages of the form:

{
    "command": "h2o-intercept",
    "message":{
        "requestUrl": "https://mydomain.com/myResource/",
        "storageKey":"a.b.c",
        "rootType": "array",
        "transform":{
            "li": {
                "type": "object",
                "prop": "item",
                "div[data-type='whatever']":{
                    "type": "object",
                    "prop": "whatever"
                } 
            }
        } 
    } 
}