hydro-js-integrations
v0.1.5
Published
Integrations for Vite and Astro and more TBC
Downloads
38
Maintainers
krutschReadme
Integrations Documention
Getting started
npm i hydro-js-integrationsVite
vite.config.ts
import hydroJS from "hydro-js-integrations/vite";
...
plugins: [hydroJS()],
...Have a look here for an Integration with Vite: https://github.com/Krutsch/vite-ssr-hydrojs
Astro
Either start a new project like:
npm create astro@latest -- --template krutsch/astro-hydro-jsor add the changes to the config:
astro.config.ts
import hydroJS from "hydro-js-integrations/astro";
...
integrations: [hydroJS()],
...Fresh
- TBC, after 2.0 Release
Server (Deno + Hono example)
- In general is being done via happy-dom preferably or jsdom alternately. Have a look at the src/server.ts file.
Example
Server file
import type { HtmlEscapedString } from "hono/utils/html";
import { Hono } from "hono";
import { serveStatic } from "hono/deno";
import { renderToReadableStream } from "hono/jsx/streaming";
import "./ssr.ts";
import { renderRootToString } from "hydro-js-integrations/server";
const app = new Hono();
app.use("*", serveStatic({ root: "/build" })); // Optional: where the static files are
app.get("/", (c) => {
const stream = renderToReadableStream(
("<!DOCTYPE html>" + renderRootToString()) as HtmlEscapedString
);
return c.body(stream, {
headers: {
"Content-Type": "text/html; charset=UTF-8",
"Transfer-Encoding": "chunked",
},
});
});
Deno.serve({ port: 3000 }, app.fetch);ssr.ts
import { renderRootToString, getLibrary } from "hydro-js-integrations/server";
const { render, html } = await getLibrary();
try {
const decoder = new TextDecoder("utf-8");
const data = await Deno.readFile("build/index.html");
render(html`${decoder.decode(data)}`, document.documentElement, false);
// ...
} catch (err) {
console.error(err);
}Roadmap
- add Fresh and Next.js