$ show beenotung/ts-liveview
ts-liveview is a full-stack real-time web application framework written in TypeScript, inspired by Phoenix LiveView. It enables building reactive user interfaces with minimal client-side JavaScript (~13KB gzipped) by rendering HTML on the server and applying incremental DOM updates over WebSocket. The architecture is a monolith: an Express server handles HTTP/WebSocket, SQLite (via better-sqlite3-proxy) persists data, and a custom JSX runtime serializes UI components into HTML strings. Client-side logic is limited to a lightweight WebSocket client (`ws-lite`) that interprets server-issued DOM commands (update text, attributes, append/remove nodes) by CSS selectors—no virtual DOM is involved. The framework supports multiple rendering modes (SSG, SSR, streaming, hybrid MPA/SPA), includes a rich set of reusable UI components (Router, Page, Navbar, Pagination, DataTable, Chart, ComboBox, etc.), built-in localization and i18n, rate limiting, geolocation logging, and PWA manifests. A suite of demo pages (thermostat, chatroom, form, upload, pagination, timeline) demonstrate real-time state synchronization across clients. External dependencies include Express, ws, knex, better-sqlite3, chart.js, swiper, ionic, and Prism.js for syntax highlighting. While the framework is functionally complete and exhibits strong engineering in its JSX AST handling and WebSocket update protocol, the repository includes many demo artifacts, placeholder templates, and a large surface area that may drift over time. The custom build pipeline (esbuild) is bespoke, and several components show code comments or `console.log` calls indicating development-stage code.
The LLM identified 4 files worth highlighting for reuse:
Custom JSX runtime that serializes typed AST nodes (Node, Element, Component, Fragment, Raw) directly into HTML strings. Supports streaming via Express `res.write`, proper HTML escaping, and attribute normalization (className→class). Demonstrates a clean, explicit abstraction over raw HTML generation without relying on React, making it a self-contained pattern for building any SSR application or alternative JSX framework.
A minimal WebSocket client (~2.3KB gzipped) that automatically reconnects, handles binary/text messages, and dispatches typed server messages (update, redirect, eval, etc.) to the DOM. It is wholly independent of the server code and can be extracted as a standalone low-footprint WebSocket relay for any real-time web project.
Implements a generic token-bucket rate limiter with configurable capacity, fill rate, and multiple key dimensions (IP, user, target, global). The class is self-contained, testable in isolation, and can be dropped into any Express/Node.js server to prevent abuse without coupling to the application's data model.
Client-side DOM mutation engine that applies `updateText`, `updateAttrs`, `appendNode`, `removeNode` operations based on CSS selectors. Avoids a virtual DOM, relying on precise server-generated instructions. The pattern is reusable for any system where a server dictates fine-grained DOM changes, independent of the specific framework.