ryupold/vode-ssr
Watch
1
1
Fork
You've already forked vode-ssr
 0
Code Issues Pull requests Projects Releases 1 Packages 1 Wiki Activity Actions
1 release 1 tag
  • 0.1.0 0fa69233cf

    0.1.0
    Some checks failed
    Publish release to NPM, GitHub & Chimps Packages / Verify Release and Run Tests (release) Failing after 12s
    Details
    Publish release to NPM, GitHub & Chimps Packages / Publish to NPM (release) Has been skipped
    Details
    Publish release to NPM, GitHub & Chimps Packages / Publish to GitHub Packages (release) Has been skipped
    Details
    Publish release to NPM, GitHub & Chimps Packages / Publish to Chimps Packages (release) Has been skipped
    Details
    Unit Tests / Check Unit Tests (push) Failing after 16s
    Details
    Stable

    michi released this 2026-08-17 20:27:10 +02:00 | 0 commits to main since this release

    initial vode-ssr release

    Server-side rendering utilities for vode apps.

    Note: this is a very early/untested implementation

    Usage

    There are 2 main render functions.

    renderURL(options, req)

    Vode independent rendering of a url inside an isolated window.
    Waits for all asynchronous operations to settle (with timeout)
    and the returnes the full html document as string.

    Hono Example

    import { Context } from "hono";
import { H } from "hono/types";
import { renderURL, ForwardedRequest, RequestBasedRenderOptions } from "@ryupold/vode-ssr";

/**
 * Creates a Hono endpoint that performs server-side rendering (SSR) for a given request URL.
 * @param { RequestBasedRenderOptions } options
 * @returns Hono endpoint handler function
 */
export function createSSREndpoint(options: RequestBasedRenderOptions): H {
    return async (c: Context) => {
        if (c.req.method !== "POST") {
            return new Response("Method Not Allowed. You must POST with a ForwardedRequest ({url: string, headers?: Record<string, string>;}) as JSON body.", { status: 405 });
        }

        const forwardedRequest: ForwardedRequest = JSON.parse(await c.req.text());

        if (typeof forwardedRequest.url !== "string")
            return new Response("forwarded request must contain a { url: string }", { status: 400 });

        if (forwardedRequest.headers && typeof forwardedRequest.headers !== "object")
            return new Response("forwarded request contained invalid headers. must be: { url: string, headers?: Record<string, string> }", { status: 400 });

        const renderedHTML = await renderURL(options, forwardedRequest);

        return new Response(renderedHTML, {
            headers: { "Content-Type": "text/html" },
        });
    };
}

    Then use it in your api backend.

    const app = new Hono();

app.post('/ssr', createSSREndpoint({
    baseUrl: "https://ryupold.de",
    ssrHeader: { "X-SSR": "IGNORE" }
}));

    renderVodeApp(options, state, view, initialPatches = [])

    Specific to vode and with more control
    you can render a vode view as app for a specific state (+ patches)
    in a given HTML shell

    renderVodeApp(
    // Render Options
    {
        shell: {
            html: `<html>
                    <head><meta charset="utf-8"></head>
                    <body><div id="app"></div></body>
                    </html>`,
            containerSelector: '#app',
        },
        prefersColorScheme: 'dark',
        windowSize: { width: 1024, height: 768 },
        timeoutMs: 30000,
    },
    
    // App State
    { name: "World" },
    
    // App View
    (s) => [DIV, { id: 'app' }, [H1, "Hello"], [P, s.name]],

    // you can add an optional array of patches that will be applied after the first render
    // ...
)

    Thanks

    I'm very thankful that we live in a world where libraries like happy-dom
    exist for free to use and tinker with.

    License

    License: MIT

    Downloads