isomorphic uhtml
Tiny wrapper that imports uhtml in the browser and uhtml/ssr in Node.js/Bun
for quick & easy client and server-side rendering (SSR/SSG).
All credits to Andrea Giammarchi for creating this little mighty lib.
This runs in both browsers and runtimes like Node.js:
import { document, html, render } from 'isum';
export class App {
constructor() {
this.render();
}
handleEvent(event) {
console.log(event);
}
render() {
const view = html`<button @click=${this.handleEvent}>Hello!</button>`;
render(document.getElementById('app'), view);
}
}
Bootstrap in index.js:
import { App } from './app.ts';
new App();
Initial template/container index.html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main id="app"></main>
<script type="module" src="index.js"></script>
</body>
</html>
Read template, render application, write result:
import { readFileSync, writeFileSync } from 'node:fs';
import initSSR from 'isum';
import { App } from './app.js';
const template = readFileSync('index.html', 'utf-8');
const { document } = initSSR(template);
new App();
writeFileSync('index.html', document.toString());
This renders the <button> inside <main>.
Run the app in the browser without a build step:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<script type="importmap">
{
"imports": {
"isum": "https://unpkg.com/isum@1.0.0/browser.js",
"udomdiff": "https://unpkg.com/udomdiff@1.1.2/min.js",
"uhtml": "https://unpkg.com/uhtml@4.7.1/keyed.js"
}
}
</script>
</head>
<body>
<main id="app"></main>
<script type="module" src="index.js"></script>
</body>
</html>
Ignore any CSS imports in JS modules:
node --import isum/no-css build.js
Useful when using e.g. Vite. isum pairs great with Vite.
FAQs
isomorphic uhtml
We found that isum demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
AI agents are writing more code than ever, and that's creating new supply chain risks. Feross joins the Risky Business Podcast to break down what that means for open source security.
Research
/Security News
Socket uncovered four malicious NuGet packages targeting ASP.NET apps, using a typosquatted dropper and localhost proxy to steal Identity data and backdoor apps.
Research
An emerging npm supply chain attack that infects repos, steals CI secrets, and targets developer AI toolchains for further compromise.