Tram-One / tram-one

🚋 Legacy View Framework For Vanilla Javascript
http://tram-one.io/
MIT License
36 stars 8 forks source link

Support server-side rendering #181

Open JRJurman opened 2 years ago

JRJurman commented 2 years ago

Summary

In version 11 (#175), we lost support for server-side rendering (mostly an artifact of removing domino from nanohtml - https://github.com/Tram-One/nanohtml/pull/20)

Ideally, we'd like to add this back in, with the support of the mutation observers that didn't quite exist before. This should be possible, but needs investigation.

JRJurman commented 2 years ago

Without changing Tram-One, we could also scaffold runkit with jsdom (similarly, it might be possible to support server-side-rendering with jsdom). The following example works but could potentially be cleaned up:

const { JSDOM } = require("jsdom"); 
const { registerHtml } = require('tram-one');

const dom = new JSDOM();
global.document = dom.window.document;

const html = registerHtml();
const home = () => {
    return html`
        <main>
            <h1>Tram-One</h1>
            <h2>A Modern View Framework for Vanilla Javascript</h2>
        </main>
    `;
};

home().outerHTML
JRJurman commented 2 years ago

Note, simply making Tram-One work on the server will not be enough to make SSR work - we need to figure out how we want to do hydration of elements, and since so much of Tram-One is about embedding the state of elements in their nodes, decorating existing HTML may be difficult.

We may need to serve a minimal amount of JS that just adds attributes to a served HTML template :thinking: