redweb 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -1,4 +1,15 @@
-# Changelog
+# Changelog
+
+## 0.12.0
+
+- Added `npx redweb init [directory]` to create a minimal TypeScript + TSX application without overwriting existing files.
+- Added the reusable `redweb/tsconfig.json` preset so TypeScript builds and editors resolve Redweb's JSX runtime consistently.
+- Updated the Live HTML examples to inherit the shared preset and added real-filesystem CLI, generated-project compilation, and packed-package verification.
+
+## 0.11.0
+
+- Added dependency-free server-side TSX rendering through `redweb/jsx-runtime` and `redweb/jsx-dev-runtime`, with fragments, function components, automatic text and attribute escaping, safe URL validation, boolean attributes, and direct interoperability with existing `HtmlFragment` values.
+- Added a compiled TSX Live HTML example plus real HTTP, WebSocket, type-checking, and packed-consumer verification.
 
 ## 0.10.0
 

package/README.md

@@ -7,8 +7,18 @@ Version 0.9 adds production-minded multiplayer building blocks while preserving
 ## Install
 
 ```bash
-npm install redweb
-```
+npm install redweb
+```
+
+Start a TypeScript + TSX project with Redweb's compiler preset and a small server-rendered page:
+
+```bash
+npx redweb init
+npm install
+npm run dev
+```
+
+Pass a directory to create a new project there: `npx redweb init my-app`. Existing files are never overwritten, so rerunning the command is safe.
 
 ## Exports
 
@@ -41,7 +51,60 @@ const {
 
 ## Live HTML
 
-`start(PageClass)` combines server-rendered `.html` templates and Redweb WebSockets on one listener. Decorated plain classes hold the behavior; templates remain declarative HTML. Redweb injects a small browser runtime backed by [`redweb-client`](https://www.npmjs.com/package/redweb-client), binds the HTTP render to an expiring page token, and disposes connection-owned state after disconnect.
+`start(PageClass)` combines server-rendered TSX or `.html` templates and Redweb WebSockets on one listener. Decorated plain classes hold the behavior. Redweb injects a small browser runtime backed by [`redweb-client`](https://www.npmjs.com/package/redweb-client), binds the HTTP render to an expiring page token, and disposes connection-owned state after disconnect.
+
+TSX is the concise default for new pages. It renders straight to Redweb's existing `HtmlFragment`; there is no React dependency, virtual DOM, hydration pass, or client component runtime:
+
+Extend Redweb's TypeScript preset so builds and editors use the dependency-free JSX runtime consistently:
+
+```json
+{
+  "extends": "redweb/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}
+```
+
+```tsx
+import { LivePage, action, component, page, start, state } from 'redweb';
+import type { Child } from 'redweb/jsx-runtime';
+
+const Card = component((props: { title: string; children?: Child }) => (
+  <article class="card">
+    <h2>{props.title}</h2>
+    {props.children}
+  </article>
+));
+
+@page('/', { css: 'counter.css' })
+class CounterPage extends LivePage {
+  @state() count = 0;
+
+  @action()
+  increment() { this.count += 1; }
+
+  render() {
+    return (
+      <main>
+        <Card title="Server counter">
+          <button rw-click="increment">
+            Count <output data-rw-state="count">{this.count}</output>
+          </button>
+        </Card>
+      </main>
+    );
+  }
+}
+
+start(CounterPage, { port: 8181 });
+```
+
+Text and attribute values are escaped automatically. URL attributes use Redweb's existing safe-protocol policy. `on*`, inline `style`, `srcdoc`, `srcset`, and executable `<script>` or `<style>` children are rejected; use `rw-*` server directives and external CSS or JavaScript assets. Existing `html` fragments can be nested in TSX, and TSX fragments can be nested in `html`, so migration can be incremental.
+
+Ordinary declarative `.html` templates remain available when separating markup into a standalone file is preferable:
 
 ```ts
 import { page, start, state } from 'redweb';
@@ -162,7 +225,7 @@ An `html` fragment returned by `render()` is final safe markup, so documentation
 
 The same API serves HTTPS/WSS when `ssl` is provided. For private pages, an optional `authenticate(request)` callback binds the page token to the same stable user identity across the HTTP render and WebSocket upgrade. Initial connections and reconnects always receive a complete authoritative state snapshot.
 
-See the [Live HTML guide](docs/LIVE_HTML.md), runnable TypeScript [server counter](examples/live-html/counter.ts), component-based [chatroom](examples/live-html/chatroom.ts), and [persistent card collection](examples/live-html/cards.ts). The chatroom separates joining from its stable message composer, tracks online members, preserves bounded history, restores identity and missed messages after reconnect, and creates an isolated room for every server. The cards page uses `shared: true`, so additions survive reloads, reconnects, and new visitors while its server is running. Run the examples with `npm run example:counter`, `npm run example:chatroom`, and `npm run example:cards`. The decorated sources are compiled and exercised unchanged by mock-free HTTP/WebSocket integration tests and a real-Chromium DOM gate.
+See the [Live HTML guide](docs/LIVE_HTML.md), runnable [TSX page](examples/live-html/jsx-page.tsx), TypeScript [server counter](examples/live-html/counter.ts), component-based [chatroom](examples/live-html/chatroom.ts), and [persistent card collection](examples/live-html/cards.ts). The chatroom separates joining from its stable message composer, tracks online members, preserves bounded history, restores identity and missed messages after reconnect, and creates an isolated room for every server. The cards page uses `shared: true`, so additions survive reloads, reconnects, and new visitors while its server is running. Run the examples with `npm run example:jsx`, `npm run example:counter`, `npm run example:chatroom`, and `npm run example:cards`. The decorated sources are compiled and exercised unchanged by mock-free HTTP/WebSocket integration tests and a real-Chromium DOM gate.
 
 Reusable snippets can own server behavior without page-level forwarding methods. Decorate a class with `@component()`, put instances in page fields, and interpolate them directly: `` html`<main>${this.primary}${this.secondary}</main>` ``. Each instance gets isolated `@state()`, scoped `@action()` methods, nested-component support, and page-owned lifecycle cleanup. See the runnable [component counters](examples/live-html/components.ts) or run `npm run example:components`.
 

package/bin/redweb.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+'use strict';
+
+const path = require('path');
+const ProjectInitializer = require('../src/cli/ProjectInitializer');
+const { version } = require('../package.json');
+
+const [command, target = '.', ...extra] = process.argv.slice(2);
+
+if (command === 'init' && extra.length === 0) {
+    const result = new ProjectInitializer(version).initialize(path.resolve(process.cwd(), target));
+    console.log(`Redweb project ready in ${result.root}`);
+    if (result.created.length) console.log(`Created: ${result.created.join(', ')}`);
+    if (result.skipped.length) console.log(`Kept existing: ${result.skipped.join(', ')}`);
+    console.log('Next: npm install && npm run dev');
+} else {
+    const stream = command === undefined || command === '--help' || command === '-h' ? process.stdout : process.stderr;
+    stream.write('Usage: redweb init [directory]\n');
+    if (stream === process.stderr) process.exitCode = 1;
+}

package/config/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "jsx": "react-jsx",
+    "jsxImportSource": "redweb",
+    "strict": true,
+    "experimentalDecorators": false,
+    "useDefineForClassFields": true,
+    "skipLibCheck": false
+  }
+}

package/docs/LIVE_HTML.md

@@ -2,6 +2,57 @@
 
 Live HTML is Redweb's decorator-first server-rendering layer. It uses the existing `HttpServer`, `SocketRoute`, admission, protocol, ordering, backpressure, and shutdown implementations rather than maintaining a second network stack.
 
+## TSX rendering
+
+New pages can return TSX directly. Run `npx redweb init` for a starter project, or extend `redweb/tsconfig.json` from an existing project's root `tsconfig.json`. The preset makes builds and editors use Redweb's dependency-free JSX runtime consistently:
+
+```json
+{
+  "extends": "redweb/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}
+```
+
+Redweb renders TSX immediately to `HtmlFragment` values:
+
+```tsx
+import { LivePage, action, component, page, state } from 'redweb';
+import type { Child } from 'redweb/jsx-runtime';
+
+const Panel = component((props: { title: string; children?: Child }) => (
+  <section class="panel">
+    <h2>{props.title}</h2>
+    {props.children}
+  </section>
+));
+
+@page('/counter', { css: 'counter.css' })
+class CounterPage extends LivePage {
+  @state() count = 0;
+
+  @action()
+  increment() { this.count += 1; }
+
+  render() {
+    return (
+      <Panel title="Server counter">
+        <button rw-click="increment">
+          Count <output data-rw-state="count">{this.count}</output>
+        </button>
+      </Panel>
+    );
+  }
+}
+```
+
+Intrinsic elements, fragments (`<>...</>`), nested readonly arrays, and synchronous function components are supported. Strings, numbers, and attributes are escaped once; null, undefined, and boolean children render nothing. Safe existing `html` fragments compose in either direction.
+
+JSX intentionally remains a server serializer rather than a React compatibility layer. It retains no tree and provides no hooks, refs, hydration, client event functions, or object-style API. Use `rw-click`, `rw-submit`, `rw-bind`, and the other Redweb directives for server actions, and use `@page({ css })` or external assets for styling and scripts. Unsafe URL protocols, `on*`, dynamic `style`, `srcdoc`, `srcset`, children on void elements, and executable `<script>` or `<style>` children are rejected.
+
 This layer deliberately owns page concerns only: `@page`, `@state`, `@view`, and `@action`. It does not clone jax.on's `@get`/`@post` controller API. Continue using Redweb's `services` option for ordinary HTTP APIs; a unified controller decorator surface is a separate compatibility decision rather than hidden behavior in the rendering layer.
 
 ## Page model
@@ -250,8 +301,9 @@ The internal paths and application page paths must be unique.
 - `examples/live-html/chatroom.ts` uses a connection-scoped `@component()` backed by a room service created by `createChatroomPage()`, so separate server instances cannot leak history or names. Visitors join once, receive a stable dedicated composer, see a capped presence list with the total online count, share bounded history, and recover their identity and missed messages after reconnect.
 - `examples/live-html/cards.ts` uses a shared decorated page, `@view()`, and `rw-each` to prove server-rendered collection SSR, realtime replacement, and persistence across reloads and reconnects while the server is running.
 - `examples/live-html/components.ts` uses two instances of one `@component()` class to prove reusable markup, isolated server state, scoped actions, and component CSS composition.
+- `examples/live-html/jsx-page.tsx` uses Redweb's automatic JSX runtime, a function component, decorated state, and a server action without HTML template strings.
 
-Run the examples immediately with `npm run example:counter`, `npm run example:chatroom`, `npm run example:cards`, and `npm run example:components`. Their checked-in JavaScript artifacts are generated from the decorated TypeScript sources, and every test and package build rejects stale output. The artifacts are launched unchanged by `tests/integration/live-html.integration.test.js` over real loopback HTTP and WebSocket connections. Run the focused gate with `npm run verify:live-html`, or the complete 100% coverage suite with `npm test`.
+Run the examples immediately with `npm run example:counter`, `npm run example:chatroom`, `npm run example:cards`, `npm run example:components`, and `npm run example:jsx`. Their checked-in JavaScript artifacts are generated from the decorated TypeScript or TSX sources, and every test and package build rejects stale output. The artifacts are launched unchanged by `tests/integration/live-html.integration.test.js` over real loopback HTTP and WebSocket connections. Run the focused gate with `npm run verify:live-html`, or the complete 100% coverage suite with `npm test`.
 
 ## Static pages and documentation export
 

package/examples/live-html/chatroom.js

@@ -1,205 +1,205 @@
-"use strict";
-var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-};
-var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
-    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-    var _, done = false;
-    for (var i = decorators.length - 1; i >= 0; i--) {
-        var context = {};
-        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
-        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
-        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-        if (kind === "accessor") {
-            if (result === void 0) continue;
-            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
-            if (_ = accept(result.get)) descriptor.get = _;
-            if (_ = accept(result.set)) descriptor.set = _;
-            if (_ = accept(result.init)) initializers.unshift(_);
-        }
-        else if (_ = accept(result)) {
-            if (kind === "field") initializers.unshift(_);
-            else descriptor[key] = _;
-        }
-    }
-    if (target) Object.defineProperty(target, contextIn.name, descriptor);
-    done = true;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatroomComponent = void 0;
-exports.createChatroomPage = createChatroomPage;
-const redweb_1 = require('../..');
-const MAX_VISIBLE_MEMBERS = 100;
-const UNSAFE_TEXT = /[\p{Cc}\p{Cf}]/u;
-function messageView(messages) {
-    return messages.length
-        ? (0, redweb_1.each)([...messages], entry => (0, redweb_1.html) `<li><strong>${entry.sender}</strong><p>${entry.text}</p></li>`)
-        : (0, redweb_1.html) `<li class="empty-message">No messages yet. Say hello.</li>`;
-}
-function presenceView(members) {
-    const visible = members.slice(0, MAX_VISIBLE_MEMBERS);
-    const remaining = members.length - visible.length;
+"use strict";
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatroomComponent = void 0;
+exports.createChatroomPage = createChatroomPage;
+const redweb_1 = require('../..');
+const MAX_VISIBLE_MEMBERS = 100;
+const UNSAFE_TEXT = /[\p{Cc}\p{Cf}]/u;
+function messageView(messages) {
+    return messages.length
+        ? (0, redweb_1.each)([...messages], entry => (0, redweb_1.html) `<li><strong>${entry.sender}</strong><p>${entry.text}</p></li>`)
+        : (0, redweb_1.html) `<li class="empty-message">No messages yet. Say hello.</li>`;
+}
+function presenceView(members) {
+    const visible = members.slice(0, MAX_VISIBLE_MEMBERS);
+    const remaining = members.length - visible.length;
     return (0, redweb_1.html) `
         <p class="eyebrow">Online · ${members.length}</p>
         <ul>
             ${(0, redweb_1.each)([...visible], member => (0, redweb_1.html) `<li>${member}</li>`)}
             ${remaining ? (0, redweb_1.html) `<li class="more-members">+${remaining} more</li>` : (0, redweb_1.html) ``}
         </ul>
-    `;
-}
-class ChatRoom {
-    history = [];
-    participants = new Set();
-    online = new Set();
-    join(participant) {
-        const name = participant.displayName.toLocaleLowerCase();
-        if ([...this.participants].some(member => member !== participant && member.displayName.toLocaleLowerCase() === name)) {
-            return false;
-        }
-        this.participants.add(participant);
-        this.online.add(participant);
-        participant.updateMessages(messageView(this.history));
-        this.publishPresence();
-        return true;
-    }
-    disconnect(participant) {
-        if (!this.online.delete(participant))
-            return;
-        this.publishPresence();
-    }
-    leave(participant) {
-        this.online.delete(participant);
-        if (!this.participants.delete(participant))
-            return;
-        this.publishPresence();
-    }
-    send(participant, text) {
-        if (!this.online.has(participant))
-            return false;
-        this.history = [...this.history, { sender: participant.displayName, text }].slice(-100);
-        const messages = messageView(this.history);
-        for (const member of this.participants)
-            member.updateMessages(messages);
-        return true;
-    }
-    publishPresence() {
-        const members = [...this.online].map(participant => participant.displayName);
-        const presence = presenceView(members);
-        for (const participant of this.participants)
-            participant.updatePresence(presence);
-    }
-}
-let ChatroomComponent = (() => {
-    let _classDecorators = [(0, redweb_1.component)()];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _instanceExtraInitializers = [];
-    let _screen_decorators;
-    let _screen_initializers = [];
-    let _screen_extraInitializers = [];
-    let _messages_decorators;
-    let _messages_initializers = [];
-    let _messages_extraInitializers = [];
-    let _presence_decorators;
-    let _presence_initializers = [];
-    let _presence_extraInitializers = [];
-    let _join_decorators;
-    let _send_decorators;
-    let _leave_decorators;
-    var ChatroomComponent = class {
-        static { _classThis = this; }
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _screen_decorators = [(0, redweb_1.state)()];
-            _messages_decorators = [(0, redweb_1.state)()];
-            _presence_decorators = [(0, redweb_1.state)()];
-            _join_decorators = [(0, redweb_1.action)()];
-            _send_decorators = [(0, redweb_1.action)()];
-            _leave_decorators = [(0, redweb_1.action)()];
-            __esDecorate(this, null, _join_decorators, { kind: "method", name: "join", static: false, private: false, access: { has: obj => "join" in obj, get: obj => obj.join }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _send_decorators, { kind: "method", name: "send", static: false, private: false, access: { has: obj => "send" in obj, get: obj => obj.send }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _leave_decorators, { kind: "method", name: "leave", static: false, private: false, access: { has: obj => "leave" in obj, get: obj => obj.leave }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(null, null, _screen_decorators, { kind: "field", name: "screen", static: false, private: false, access: { has: obj => "screen" in obj, get: obj => obj.screen, set: (obj, value) => { obj.screen = value; } }, metadata: _metadata }, _screen_initializers, _screen_extraInitializers);
-            __esDecorate(null, null, _messages_decorators, { kind: "field", name: "messages", static: false, private: false, access: { has: obj => "messages" in obj, get: obj => obj.messages, set: (obj, value) => { obj.messages = value; } }, metadata: _metadata }, _messages_initializers, _messages_extraInitializers);
-            __esDecorate(null, null, _presence_decorators, { kind: "field", name: "presence", static: false, private: false, access: { has: obj => "presence" in obj, get: obj => obj.presence, set: (obj, value) => { obj.presence = value; } }, metadata: _metadata }, _presence_initializers, _presence_extraInitializers);
-            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-            ChatroomComponent = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
-        }
-        room = __runInitializers(this, _instanceExtraInitializers);
-        displayName = '';
-        screen = __runInitializers(this, _screen_initializers, this.joinScreen());
-        messages = (__runInitializers(this, _screen_extraInitializers), __runInitializers(this, _messages_initializers, messageView([])));
-        presence = (__runInitializers(this, _messages_extraInitializers), __runInitializers(this, _presence_initializers, presenceView([])));
-        constructor(room) {
-            __runInitializers(this, _presence_extraInitializers);
-            this.room = room;
-        }
-        connected() {
-            if (this.displayName)
-                this.room.join(this);
-        }
-        disconnected() {
-            this.room.disconnect(this);
-        }
-        disposed() {
-            this.room.leave(this);
-        }
-        join({ name }) {
-            if (this.displayName)
-                return false;
-            if (typeof name !== 'string') {
-                this.screen = this.joinScreen('Display name must be text.');
-                return false;
-            }
-            const displayName = name.normalize('NFKC').trim();
-            if (!displayName || displayName.length > 40 || UNSAFE_TEXT.test(displayName)) {
-                this.screen = this.joinScreen('Choose a visible display name of at most 40 characters.');
-                return false;
-            }
-            this.displayName = displayName;
-            if (this.room.join(this)) {
-                this.screen = this.roomScreen();
-                return true;
-            }
-            this.displayName = '';
-            this.screen = this.joinScreen('That display name is already in use.');
-            return false;
-        }
-        send({ message }) {
-            if (typeof message !== 'string')
-                return false;
-            const text = message.normalize('NFKC').trim();
-            if (!text || text.length > 500 || UNSAFE_TEXT.test(text))
-                return false;
-            return this.room.send(this, text);
-        }
-        leave() {
-            this.room.leave(this);
-            this.displayName = '';
-            this.screen = this.joinScreen();
-        }
-        updateMessages(messages) {
-            this.messages = messages;
-        }
-        updatePresence(presence) {
-            this.presence = presence;
-        }
-        render() {
-            return (0, redweb_1.html) `<section class="chatroom" data-rw-state="screen">${this.screen}</section>`;
-        }
-        joinScreen(error = '') {
-            const feedback = error ? (0, redweb_1.html) `<p class="form-error" role="alert">${error}</p>` : (0, redweb_1.html) ``;
+    `;
+}
+class ChatRoom {
+    history = [];
+    participants = new Set();
+    online = new Set();
+    join(participant) {
+        const name = participant.displayName.toLocaleLowerCase();
+        if ([...this.participants].some(member => member !== participant && member.displayName.toLocaleLowerCase() === name)) {
+            return false;
+        }
+        this.participants.add(participant);
+        this.online.add(participant);
+        participant.updateMessages(messageView(this.history));
+        this.publishPresence();
+        return true;
+    }
+    disconnect(participant) {
+        if (!this.online.delete(participant))
+            return;
+        this.publishPresence();
+    }
+    leave(participant) {
+        this.online.delete(participant);
+        if (!this.participants.delete(participant))
+            return;
+        this.publishPresence();
+    }
+    send(participant, text) {
+        if (!this.online.has(participant))
+            return false;
+        this.history = [...this.history, { sender: participant.displayName, text }].slice(-100);
+        const messages = messageView(this.history);
+        for (const member of this.participants)
+            member.updateMessages(messages);
+        return true;
+    }
+    publishPresence() {
+        const members = [...this.online].map(participant => participant.displayName);
+        const presence = presenceView(members);
+        for (const participant of this.participants)
+            participant.updatePresence(presence);
+    }
+}
+let ChatroomComponent = (() => {
+    let _classDecorators = [(0, redweb_1.component)()];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _instanceExtraInitializers = [];
+    let _screen_decorators;
+    let _screen_initializers = [];
+    let _screen_extraInitializers = [];
+    let _messages_decorators;
+    let _messages_initializers = [];
+    let _messages_extraInitializers = [];
+    let _presence_decorators;
+    let _presence_initializers = [];
+    let _presence_extraInitializers = [];
+    let _join_decorators;
+    let _send_decorators;
+    let _leave_decorators;
+    var ChatroomComponent = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _screen_decorators = [(0, redweb_1.state)()];
+            _messages_decorators = [(0, redweb_1.state)()];
+            _presence_decorators = [(0, redweb_1.state)()];
+            _join_decorators = [(0, redweb_1.action)()];
+            _send_decorators = [(0, redweb_1.action)()];
+            _leave_decorators = [(0, redweb_1.action)()];
+            __esDecorate(this, null, _join_decorators, { kind: "method", name: "join", static: false, private: false, access: { has: obj => "join" in obj, get: obj => obj.join }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _send_decorators, { kind: "method", name: "send", static: false, private: false, access: { has: obj => "send" in obj, get: obj => obj.send }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _leave_decorators, { kind: "method", name: "leave", static: false, private: false, access: { has: obj => "leave" in obj, get: obj => obj.leave }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _screen_decorators, { kind: "field", name: "screen", static: false, private: false, access: { has: obj => "screen" in obj, get: obj => obj.screen, set: (obj, value) => { obj.screen = value; } }, metadata: _metadata }, _screen_initializers, _screen_extraInitializers);
+            __esDecorate(null, null, _messages_decorators, { kind: "field", name: "messages", static: false, private: false, access: { has: obj => "messages" in obj, get: obj => obj.messages, set: (obj, value) => { obj.messages = value; } }, metadata: _metadata }, _messages_initializers, _messages_extraInitializers);
+            __esDecorate(null, null, _presence_decorators, { kind: "field", name: "presence", static: false, private: false, access: { has: obj => "presence" in obj, get: obj => obj.presence, set: (obj, value) => { obj.presence = value; } }, metadata: _metadata }, _presence_initializers, _presence_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            ChatroomComponent = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        room = __runInitializers(this, _instanceExtraInitializers);
+        displayName = '';
+        screen = __runInitializers(this, _screen_initializers, this.joinScreen());
+        messages = (__runInitializers(this, _screen_extraInitializers), __runInitializers(this, _messages_initializers, messageView([])));
+        presence = (__runInitializers(this, _messages_extraInitializers), __runInitializers(this, _presence_initializers, presenceView([])));
+        constructor(room) {
+            __runInitializers(this, _presence_extraInitializers);
+            this.room = room;
+        }
+        connected() {
+            if (this.displayName)
+                this.room.join(this);
+        }
+        disconnected() {
+            this.room.disconnect(this);
+        }
+        disposed() {
+            this.room.leave(this);
+        }
+        join({ name }) {
+            if (this.displayName)
+                return false;
+            if (typeof name !== 'string') {
+                this.screen = this.joinScreen('Display name must be text.');
+                return false;
+            }
+            const displayName = name.normalize('NFKC').trim();
+            if (!displayName || displayName.length > 40 || UNSAFE_TEXT.test(displayName)) {
+                this.screen = this.joinScreen('Choose a visible display name of at most 40 characters.');
+                return false;
+            }
+            this.displayName = displayName;
+            if (this.room.join(this)) {
+                this.screen = this.roomScreen();
+                return true;
+            }
+            this.displayName = '';
+            this.screen = this.joinScreen('That display name is already in use.');
+            return false;
+        }
+        send({ message }) {
+            if (typeof message !== 'string')
+                return false;
+            const text = message.normalize('NFKC').trim();
+            if (!text || text.length > 500 || UNSAFE_TEXT.test(text))
+                return false;
+            return this.room.send(this, text);
+        }
+        leave() {
+            this.room.leave(this);
+            this.displayName = '';
+            this.screen = this.joinScreen();
+        }
+        updateMessages(messages) {
+            this.messages = messages;
+        }
+        updatePresence(presence) {
+            this.presence = presence;
+        }
+        render() {
+            return (0, redweb_1.html) `<section class="chatroom" data-rw-state="screen">${this.screen}</section>`;
+        }
+        joinScreen(error = '') {
+            const feedback = error ? (0, redweb_1.html) `<p class="form-error" role="alert">${error}</p>` : (0, redweb_1.html) ``;
             return (0, redweb_1.html) `
             <section class="join-panel">
                 <p class="eyebrow">Live room</p>
@@ -214,9 +214,9 @@ let ChatroomComponent = (() => {
                     </div>
                 </form>
             </section>
-        `;
-        }
-        roomScreen() {
+        `;
+        }
+        roomScreen() {
             return (0, redweb_1.html) `
             <div class="room-layout">
                 <section class="conversation">
@@ -233,36 +233,36 @@ let ChatroomComponent = (() => {
                 </section>
                 <aside class="presence" aria-label="People in the room" data-rw-state="presence">${this.presence}</aside>
             </div>
-        `;
-        }
-    };
-    return ChatroomComponent = _classThis;
-})();
-exports.ChatroomComponent = ChatroomComponent;
-function createChatroomPage() {
-    const room = new ChatRoom();
-    let ChatroomPage = (() => {
-        let _classDecorators = [(0, redweb_1.page)('/', { css: 'chatroom.css' })];
-        let _classDescriptor;
-        let _classExtraInitializers = [];
-        let _classThis;
-        var ChatroomPage = class {
-            static { _classThis = this; }
-            static {
-                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-                __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-                ChatroomPage = _classThis = _classDescriptor.value;
-                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                __runInitializers(_classThis, _classExtraInitializers);
-            }
-            chat = new ChatroomComponent(room);
-            render() {
-                return (0, redweb_1.html) `<main>${this.chat}</main>`;
-            }
-        };
-        return ChatroomPage = _classThis;
-    })();
-    return ChatroomPage;
-}
-if (require.main === module)
-    (0, redweb_1.start)(createChatroomPage(), { port: 8080 });
+        `;
+        }
+    };
+    return ChatroomComponent = _classThis;
+})();
+exports.ChatroomComponent = ChatroomComponent;
+function createChatroomPage() {
+    const room = new ChatRoom();
+    let ChatroomPage = (() => {
+        let _classDecorators = [(0, redweb_1.page)('/', { css: 'chatroom.css' })];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        var ChatroomPage = class {
+            static { _classThis = this; }
+            static {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+                __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                ChatroomPage = _classThis = _classDescriptor.value;
+                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                __runInitializers(_classThis, _classExtraInitializers);
+            }
+            chat = new ChatroomComponent(room);
+            render() {
+                return (0, redweb_1.html) `<main>${this.chat}</main>`;
+            }
+        };
+        return ChatroomPage = _classThis;
+    })();
+    return ChatroomPage;
+}
+if (require.main === module)
+    (0, redweb_1.start)(createChatroomPage(), { port: 8080 });

package/examples/live-html/jsx-page.js

@@ -0,0 +1,81 @@
+"use strict";
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JsxPage = void 0;
+const jsx_runtime_1 = require('../../jsx-runtime');
+const redweb_1 = require('../..');
+const Card = (0, redweb_1.component)(({ title, children }) => ((0, jsx_runtime_1.jsxs)("article", { class: "counter-card", children: [(0, jsx_runtime_1.jsx)("h2", { children: title }), children] })));
+let JsxPage = (() => {
+    let _classDecorators = [(0, redweb_1.page)('/jsx', { css: 'components.css' })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = redweb_1.LivePage;
+    let _instanceExtraInitializers = [];
+    let _count_decorators;
+    let _count_initializers = [];
+    let _count_extraInitializers = [];
+    let _increment_decorators;
+    var JsxPage = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _count_decorators = [(0, redweb_1.state)()];
+            _increment_decorators = [(0, redweb_1.action)()];
+            __esDecorate(this, null, _increment_decorators, { kind: "method", name: "increment", static: false, private: false, access: { has: obj => "increment" in obj, get: obj => obj.increment }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _count_decorators, { kind: "field", name: "count", static: false, private: false, access: { has: obj => "count" in obj, get: obj => obj.count, set: (obj, value) => { obj.count = value; } }, metadata: _metadata }, _count_initializers, _count_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            JsxPage = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        count = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _count_initializers, 0));
+        increment() {
+            this.count += 1;
+        }
+        render() {
+            return ((0, jsx_runtime_1.jsxs)("main", { class: "page-shell", children: [(0, jsx_runtime_1.jsx)("h1", { children: "Redweb JSX" }), (0, jsx_runtime_1.jsxs)(Card, { title: "Server rendered", children: [(0, jsx_runtime_1.jsx)("p", { children: "Plain TSX, escaped by default, with no browser framework." }), (0, jsx_runtime_1.jsxs)("button", { type: "button", "rw-click": "increment", children: ["Count ", (0, jsx_runtime_1.jsx)("output", { "data-rw-state": "count", children: this.count })] })] })] }));
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _count_extraInitializers);
+        }
+    };
+    return JsxPage = _classThis;
+})();
+exports.JsxPage = JsxPage;
+if (require.main === module)
+    (0, redweb_1.start)(JsxPage, { port: 8181 });

package/examples/live-html/jsx-page.tsx

@@ -0,0 +1,41 @@
+import { LivePage, action, component, page, start, state } from 'redweb';
+import type { Child } from 'redweb/jsx-runtime';
+
+interface CardProperties {
+    title: string;
+    children?: Child;
+}
+
+const Card = component(({ title, children }: CardProperties) => (
+    <article class="counter-card">
+        <h2>{title}</h2>
+        {children}
+    </article>
+));
+
+@page('/jsx', { css: 'components.css' })
+export class JsxPage extends LivePage {
+    @state()
+    count = 0;
+
+    @action()
+    increment() {
+        this.count += 1;
+    }
+
+    render() {
+        return (
+            <main class="page-shell">
+                <h1>Redweb JSX</h1>
+                <Card title="Server rendered">
+                    <p>Plain TSX, escaped by default, with no browser framework.</p>
+                    <button type="button" rw-click="increment">
+                        Count <output data-rw-state="count">{this.count}</output>
+                    </button>
+                </Card>
+            </main>
+        );
+    }
+}
+
+if (require.main === module) start(JsxPage, { port: 8181 });

package/examples/live-html/tsconfig.json

@@ -1,16 +1,13 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "CommonJS",
-    "moduleResolution": "Node",
-    "strict": true,
-    "experimentalDecorators": false,
-    "useDefineForClassFields": true,
-    "skipLibCheck": false,
-    "baseUrl": "../..",
+{
+  "extends": "../../config/tsconfig.json",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "baseUrl": "../..",
     "paths": {
-      "redweb": ["."]
+      "redweb": ["."],
+      "redweb/*": ["*"]
     }
   },
-  "files": ["counter.ts", "chatroom.ts", "cards.ts", "components.ts"]
+  "files": ["counter.ts", "chatroom.ts", "cards.ts", "components.ts", "jsx-page.tsx"]
 }

package/jsx-dev-runtime.d.ts

@@ -0,0 +1,13 @@
+export { Fragment } from './jsx-runtime';
+export type { Child, ElementType, IntrinsicAttributes, IntrinsicProperties, JSX } from './jsx-runtime';
+import type { HtmlFragment } from 'redweb';
+import type { ElementType, IntrinsicProperties } from './jsx-runtime';
+
+export function jsxDEV(
+    type: ElementType,
+    properties: IntrinsicProperties | null,
+    key?: string | number,
+    isStaticChildren?: boolean,
+    source?: unknown,
+    self?: unknown,
+): HtmlFragment;

package/jsx-dev-runtime.js

@@ -0,0 +1,9 @@
+'use strict';
+
+const { Fragment, createElement } = require('./src/htmx/Jsx');
+
+function jsxDEV(type, properties) {
+    return createElement(type, properties);
+}
+
+module.exports = { Fragment, jsxDEV };

package/jsx-runtime.d.ts

@@ -0,0 +1,28 @@
+import type { HtmlFragment } from 'redweb';
+
+export type Child = HtmlFragment | string | number | bigint | boolean | null | undefined | readonly Child[];
+
+export interface IntrinsicAttributes {
+    key?: string | number;
+}
+
+export interface IntrinsicProperties extends IntrinsicAttributes {
+    children?: Child;
+    class?: string;
+    className?: string;
+    id?: string;
+    htmlFor?: string;
+    [name: string]: unknown;
+}
+
+export namespace JSX {
+    type Element = HtmlFragment;
+    interface ElementChildrenAttribute { children: {}; }
+    interface IntrinsicAttributes { key?: string | number; }
+    interface IntrinsicElements { [name: string]: IntrinsicProperties; }
+}
+
+export const Fragment: unique symbol;
+export type ElementType = string | typeof Fragment | ((properties: any) => HtmlFragment | readonly HtmlFragment[]);
+export function jsx(type: ElementType, properties: IntrinsicProperties | null, key?: string | number): HtmlFragment;
+export const jsxs: typeof jsx;

package/jsx-runtime.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const { Fragment, createElement } = require('./src/htmx/Jsx');
+
+module.exports = { Fragment, jsx: createElement, jsxs: createElement };

package/package.json

@@ -1,16 +1,48 @@
 {
   "name": "redweb",
-  "version": "0.10.0",
-  "description": "A way to quickly set up an express server",
+  "version": "0.12.0",
+  "description": "A small Node.js foundation for HTTP, WebSockets, multiplayer services, and server-rendered HTML",
   "main": "index.js",
   "types": "index.d.ts",
+  "bin": {
+    "redweb": "bin/redweb.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.js",
+      "default": "./index.js"
+    },
+    "./client": {
+      "types": "./client.d.ts",
+      "import": "./client.js",
+      "require": "./client.js",
+      "default": "./client.js"
+    },
+    "./jsx-runtime": {
+      "types": "./jsx-runtime.d.ts",
+      "import": "./jsx-runtime.js",
+      "require": "./jsx-runtime.js",
+      "default": "./jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./jsx-dev-runtime.d.ts",
+      "import": "./jsx-dev-runtime.js",
+      "require": "./jsx-dev-runtime.js",
+      "default": "./jsx-dev-runtime.js"
+    },
+    "./tsconfig.json": "./config/tsconfig.json",
+    "./package.json": "./package.json"
+  },
   "scripts": {
-    "pretest": "node scripts/build-live-html-examples.js --check && node scripts/generate-protocol-types.js --check && tsc -p tests/types/tsconfig.json && tsc -p tests/types/tsconfig.standard.json",
+    "pretest": "node scripts/build-live-html-examples.js --check && node scripts/generate-protocol-types.js --check && tsc -p tests/types/tsconfig.json && tsc -p tests/types/tsconfig.jsxdev.json && tsc -p tests/types/tsconfig.standard.json",
     "prepack": "node scripts/build-live-html-examples.js --check",
     "example:counter": "node examples/live-html/counter.js",
     "example:chatroom": "node examples/live-html/chatroom.js",
     "example:cards": "node examples/live-html/cards.js",
     "example:components": "node examples/live-html/components.js",
+    "example:jsx": "node examples/live-html/jsx-page.js",
     "generate:protocol-types": "node scripts/generate-protocol-types.js",
     "verify:overhead": "node scripts/verify-disabled-overhead.js",
     "verify:soak": "node --expose-gc scripts/verify-soak.js",
@@ -20,13 +52,20 @@
     "verify:live-html": "node scripts/build-live-html-examples.js --check && npx jest tests/integration/live-html.integration.test.js --runInBand --coverage=false",
     "verify:live-html:browser": "node scripts/build-live-html-examples.js --check && node scripts/verify-live-html-browser.js",
     "verify:live-html:load": "node scripts/build-live-html-examples.js --check && node --expose-gc scripts/verify-live-html-load.js",
+    "verify:jsx:performance": "node --expose-gc scripts/verify-jsx-performance.js",
     "verify:live-html:package": "node scripts/verify-live-html-package.js",
     "test": "npx jest"
   },
   "files": [
+    "bin",
+    "config",
     "src/*",
     "client.js",
     "client.d.ts",
+    "jsx-runtime.js",
+    "jsx-runtime.d.ts",
+    "jsx-dev-runtime.js",
+    "jsx-dev-runtime.d.ts",
     "CHANGELOG.md",
     "index.d.ts",
     "docs",

package/src/cli/ProjectInitializer.js

@@ -0,0 +1,30 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const { projectFiles } = require('./templates');
+
+class ProjectInitializer {
+    constructor(version) {
+        this.files = projectFiles(version);
+    }
+
+    initialize(target) {
+        const root = path.resolve(target);
+        const created = [];
+        const skipped = [];
+        for (const file of this.files) {
+            const destination = path.join(root, file.path);
+            fs.mkdirSync(path.dirname(destination), { recursive: true });
+            if (fs.existsSync(destination)) {
+                skipped.push(file.path);
+                continue;
+            }
+            fs.writeFileSync(destination, file.content, { encoding: 'utf8', flag: 'wx' });
+            created.push(file.path);
+        }
+        return Object.freeze({ root, created: Object.freeze(created), skipped: Object.freeze(skipped) });
+    }
+}
+
+module.exports = ProjectInitializer;

package/src/cli/templates.js

@@ -0,0 +1,87 @@
+'use strict';
+
+const TYPESCRIPT_CONFIG = `${JSON.stringify({
+    extends: 'redweb/tsconfig.json',
+    compilerOptions: { rootDir: 'src', outDir: 'dist' },
+    include: ['src/**/*.ts', 'src/**/*.tsx'],
+}, null, 2)}\n`;
+
+const APP_SOURCE = `import path from 'node:path';
+import { page, start } from 'redweb';
+
+@page('/', { css: 'app.css', live: false })
+class HomePage {
+  render() {
+    return (
+      <main class="home">
+        <span class="eyebrow">Redweb</span>
+        <h1>Your server-rendered app is ready.</h1>
+        <p>Edit <code>src/app.tsx</code>, then build again.</p>
+      </main>
+    );
+  }
+}
+
+start(HomePage, {
+  port: Number(process.env.PORT ?? 8181),
+  templateRoot: path.resolve('src'),
+});
+`;
+
+const APP_STYLES = `:root {
+  color-scheme: dark;
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  background: #08090d;
+  color: #fff;
+}
+
+body { margin: 0; }
+
+.home {
+  width: min(42rem, calc(100% - 2rem));
+  margin: 18vh auto 0;
+}
+
+.eyebrow {
+  color: #ff5064;
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin: 0.75rem 0;
+  font-size: clamp(2.5rem, 8vw, 5rem);
+  line-height: 0.98;
+}
+
+p { color: rgb(255 255 255 / 65%); }
+code { color: #ff8795; }
+`;
+
+function projectManifest(version) {
+    return `${JSON.stringify({
+        name: 'redweb-app',
+        private: true,
+        version: '0.0.0',
+        scripts: {
+            build: 'tsc',
+            start: 'node dist/app.js',
+            dev: 'npm run build && npm start',
+        },
+        dependencies: { redweb: `^${version}` },
+        devDependencies: { typescript: '^5.9.3' },
+    }, null, 2)}\n`;
+}
+
+function projectFiles(version) {
+    return Object.freeze([
+        Object.freeze({ path: 'package.json', content: projectManifest(version) }),
+        Object.freeze({ path: 'tsconfig.json', content: TYPESCRIPT_CONFIG }),
+        Object.freeze({ path: 'src/app.tsx', content: APP_SOURCE }),
+        Object.freeze({ path: 'src/app.css', content: APP_STYLES }),
+    ]);
+}
+
+module.exports = { projectFiles };

package/src/htmx/Html.js

@@ -27,8 +27,9 @@ function markHtml(value, toString) {
 }
 
 function trustedHtml(value) {
-    const fragment = {};
-    markHtml(fragment, () => String(value));
+    const rendered = String(value);
+    const fragment = { toString: () => rendered };
+    markHtml(fragment, fragment.toString);
     return Object.freeze(fragment);
 }
 
@@ -67,21 +68,7 @@ function renderValue(value) {
 function renderInterpolation(source, value) {
     const context = interpolationContext(source);
     if (context.kind === 'attribute') {
-        const name = context.name;
-        if (name.startsWith('on') || FORBIDDEN_ATTRIBUTES.has(name)) {
-            throw new TypeError(`Dynamic ${name} attributes are not allowed.`);
-        }
-        if (URL_ATTRIBUTES.has(name)) {
-            if (!value?.[HTML_URL]) {
-                if (value?.[HTML_ATTRIBUTE]) throw new TypeError(`The ${name} attribute requires url().`);
-                value = safeUrl(value);
-            }
-        } else if (!value?.[HTML_ATTRIBUTE]) {
-            if (value?.[HTML_URL]) throw new TypeError(`The ${name} attribute requires attribute().`);
-            if (isHtml(value)) throw new TypeError(`The ${name} attribute requires a primitive value.`);
-            value = attribute(value);
-        }
-        return escapeHtml(value.value);
+        return renderAttributeValue(context.name, value);
     }
     if (context.kind !== 'text') throw new TypeError('html interpolations are only allowed in element text.');
     if (value?.[HTML_ATTRIBUTE] || value?.[HTML_URL]) {
@@ -90,6 +77,23 @@ function renderInterpolation(source, value) {
     return renderValue(value);
 }
 
+function renderAttributeValue(name, value) {
+    if (name.startsWith('on') || FORBIDDEN_ATTRIBUTES.has(name)) {
+        throw new TypeError(`Dynamic ${name} attributes are not allowed.`);
+    }
+    if (URL_ATTRIBUTES.has(name)) {
+        if (!value?.[HTML_URL]) {
+            if (value?.[HTML_ATTRIBUTE]) throw new TypeError(`The ${name} attribute requires url().`);
+            value = safeUrl(value);
+        }
+    } else if (!value?.[HTML_ATTRIBUTE]) {
+        if (value?.[HTML_URL]) throw new TypeError(`The ${name} attribute requires attribute().`);
+        if (isHtml(value)) throw new TypeError(`The ${name} attribute requires a primitive value.`);
+        value = attribute(value);
+    }
+    return escapeHtml(value.value);
+}
+
 function html(strings, ...values) {
     if (!Array.isArray(strings) || !Object.prototype.hasOwnProperty.call(strings, 'raw')) {
         throw new TypeError('html must be used as a tagged template literal.');
@@ -130,4 +134,4 @@ function codeBlock(code, options = {}) {
     return html`<figure class="redweb-code">${caption}<pre><code class="${attribute(`language-${language}`)}">${content}</code></pre></figure>`;
 }
 
-module.exports = { attribute, codeBlock, each, escapeHtml, html, isHtml, markHtml, renderValue, safeUrl, trustedHtml };
+module.exports = { attribute, codeBlock, each, escapeHtml, html, isHtml, markHtml, renderAttributeValue, renderValue, safeUrl, trustedHtml };

package/src/htmx/Jsx.js

@@ -0,0 +1,86 @@
+'use strict';
+
+const { isHtml, renderAttributeValue, renderValue, trustedHtml } = require('./Html');
+const synchronous = require('./synchronous');
+
+const Fragment = Symbol('redweb.Fragment');
+const NAME = /^[A-Za-z][A-Za-z0-9:._-]*$/;
+const VOID_ELEMENTS = new Set([
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link',
+    'meta', 'param', 'source', 'track', 'wbr',
+]);
+const RAW_TEXT_ELEMENTS = new Set(['script', 'style']);
+const TERMINAL_ELEMENTS = new Set(['plaintext']);
+const BOOLEAN_VALUE_ATTRIBUTES = new Set(['contenteditable', 'draggable', 'spellcheck', 'writingsuggestions']);
+const ATTRIBUTE_ALIASES = Object.freeze({ className: 'class', htmlFor: 'for' });
+
+function renderChild(value) {
+    if (value === null || value === undefined || typeof value === 'boolean') return '';
+    if (Array.isArray(value)) return value.map(renderChild).join('');
+    if (isHtml(value)) return renderValue(value);
+    if (['string', 'number', 'bigint'].includes(typeof value)) return renderValue(value);
+    throw new TypeError('JSX children must be text, numbers, HtmlFragment values, or arrays of those values.');
+}
+
+function renderAttributes(properties) {
+    const attributes = [];
+    const renderedNames = new Set();
+    for (const originalName of Object.keys(properties)) {
+        if (originalName === 'children' || originalName === 'key') continue;
+        const name = Object.hasOwn(ATTRIBUTE_ALIASES, originalName) ? ATTRIBUTE_ALIASES[originalName] : originalName;
+        if (!NAME.test(name)) throw new TypeError(`Invalid JSX attribute name: ${name}.`);
+        const normalizedName = name.toLowerCase();
+        if (renderedNames.has(normalizedName)) throw new TypeError(`Duplicate JSX attribute: ${name}.`);
+        renderedNames.add(normalizedName);
+        let value = properties[originalName];
+        if (normalizedName === 'translate' && typeof value === 'boolean') value = value ? 'yes' : 'no';
+        const preservesFalse = normalizedName.startsWith('aria-') || normalizedName.startsWith('data-') ||
+            BOOLEAN_VALUE_ATTRIBUTES.has(normalizedName);
+        if (value === null || value === undefined || (value === false && !preservesFalse)) continue;
+        if (value === true && !preservesFalse) {
+            renderAttributeValue(normalizedName, value);
+            attributes.push(name);
+            continue;
+        }
+        attributes.push(`${name}="${renderAttributeValue(normalizedName, value)}"`);
+    }
+    return attributes.length ? ` ${attributes.join(' ')}` : '';
+}
+
+function renderIntrinsic(name, properties) {
+    if (!NAME.test(name)) throw new TypeError(`Invalid JSX element name: ${name}.`);
+    const normalizedName = name.toLowerCase();
+    if (TERMINAL_ELEMENTS.has(normalizedName)) throw new TypeError(`JSX <${name}> is not supported because it prevents subsequent HTML from rendering.`);
+    const attributes = renderAttributes(properties);
+    const children = properties.children;
+    const renderedChildren = renderChild(children);
+    if (VOID_ELEMENTS.has(normalizedName)) {
+        if (renderedChildren) {
+            throw new TypeError(`JSX void element <${name}> cannot have children.`);
+        }
+        return trustedHtml(`<${name}${attributes}>`);
+    }
+    if (RAW_TEXT_ELEMENTS.has(normalizedName) && renderedChildren) {
+        throw new TypeError(`JSX <${name}> children are not supported; use an external asset.`);
+    }
+    return trustedHtml(`<${name}${attributes}>${renderedChildren}</${name}>`);
+}
+
+function renderComponent(Component, properties) {
+    const result = synchronous(Component(properties), 'JSX components must render synchronously.');
+    if (!isHtml(result)) throw new TypeError('JSX components must return an HtmlFragment.');
+    return Array.isArray(result) ? trustedHtml(renderValue(result)) : result;
+}
+
+function createElement(type, properties) {
+    const props = properties == null ? {} : properties;
+    if (!props || typeof props !== 'object' || Array.isArray(props)) {
+        throw new TypeError('JSX properties must be an object.');
+    }
+    if (type === Fragment) return trustedHtml(renderChild(props.children));
+    if (typeof type === 'string') return renderIntrinsic(type, props);
+    if (typeof type === 'function') return renderComponent(type, props);
+    throw new TypeError('JSX element types must be intrinsic names or function components.');
+}
+
+module.exports = { Fragment, createElement, renderChild };