brumate

A component language and compiler for resumable web apps.

brumate compiles single-file .brm components into server-rendered HTML and small client modules. The browser does not hydrate. It reads the state that the server wrote into the page, and loads the code of the components on the page when it starts.

Install

pnpm add brumate
pnpm add -D vite @brumate/tsc typescript

brumate needs Node 22.18 or newer, and Vite.

// vite.config.ts
import brumate from 'brumate/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [brumate()],
  build: {
    manifest: true,
    rolldownOptions: { input: 'src/client.ts' },
  },
});

// src/client.ts
import 'virtual:brumate/start';

A component

<script>
  import { $memo, $signal } from 'brumate/signals';

  let count = $signal(0);
  const double = $memo(count * 2);
</script>

<button onClick=(() => count++)>Clicked {count} times</button>
<p>Double: {double}</p>

The server renders the button and the text. The browser loads the code of the click handler, and of the updates it causes, when the page starts. It does not render the page again.

What it includes

• brumate/signals: the compile-time functions, such as $signal, $memo, $effect, $props, $action and $optimistic.
• brumate/vite: the Vite plugin. It compiles .brm files, splits client code per handler, serves server function calls in development, and can prerender pages.
• brumate/server: rendering, streaming, routes, server functions, sessions, cookies, and validation with Standard Schema.
• brumate/loader and brumate/client: the loader and the core that run in the browser.
• brumate/testing: mounting components in a DOM test, with the real server functions.

Documentation

• Getting started
• Your first app
• All guides and reference

brumate is at 0.x. The page format can change between versions, so the server and the client must come from the same version.

License

MIT © lxsmnsyc