How ripple-ts/ripple works
Ripple is a TypeScript-first UI framework for authoring .tsrx components, compiling them into fine-grained DOM behavior, and running them in browsers or through server rendering. The main workflow is component authoring → TSRX transformation → Vite integration → client mount or server-rendered response, with hydration connecting server output to browser execution. The README documents reactivity, collections, template control flow, scoped CSS, streaming SSR, and hydration; some plugin, adapter, and compiler wiring is inferred only at subsystem level because their source was not sampled.
Main entry points: src/index.js TSRX compiler · src/index.js Vite integration · src/index.js Adapter interface · client/index.js DOM runtime
Components 26
Authoring and compilation
- TSRX compiler
packages/tsrx-ripple/src/index.js - Client transform
packages/tsrx-ripple/src/transform/client/index.js - Server transform
packages/tsrx-ripple/src/transform/server/index.js - Ripple compiler
packages/ripple/src/compiler/index.js
Ripple runtime
- Client entry
packages/ripple/src/runtime/index-client.js - DOM runtime
packages/ripple/src/runtime/internal/client/index.js - Reactive state
packages/ripple/src/runtime/reactive-value.js - Reactive collections
packages/ripple/src/runtime/array.js - Server renderer
packages/ripple/src/runtime/internal/server/index.js - Server API
packages/ripple/src/server/index.js
Web integration
- Vite integration
packages/vite-plugin/src/index.js - Route definitions
packages/vite-plugin/src/routes.js - Request router
packages/vite-plugin/src/server/router.js - SSR route handler
packages/vite-plugin/src/server/render-route.js - API route handler
packages/vite-plugin/src/server/server-route.js - Stream response
packages/vite-plugin/src/server/stream-response.js - Adapter interface
packages/adapter/src/index.js - Node adapter
packages/adapter-node/src/index.js - Bun adapter
packages/adapter-bun/src/index.js - Vercel adapter
packages/adapter-vercel/src/index.js
Project setup
- Project creator
packages/create-ripple/src/index.js - CLI commands
packages/cli/src/commands/create.js
Other components
- Application developer
- TSRX application
- Browser
- HTTP client
Connections 23
- Application developer → TSRX application: authors
- TSRX application → TSRX compiler: compiles
- TSRX compiler → Client transform: transforms client
- TSRX compiler → Server transform: transforms server
- TSRX application → Vite integration: integrates via
- Vite integration → TSRX compiler: invokes compiler
- Client entry → DOM runtime: renders components
- DOM runtime → Reactive state: tracks state
- DOM runtime → Reactive collections: exposes collections
- Browser → Client entry: mounts or hydrates
- Server API → Server renderer: renders components
- Vite integration → Route definitions: registers routes
- Route definitions → Request router: supplies route table
- Request router → SSR route handler: dispatches render
- Request router → API route handler: dispatches API
- SSR route handler → Server API: renders page
- SSR route handler → Stream response: builds response
- HTTP client → Vite integration: sends request
- Adapter interface → Node adapter: implemented by
- Adapter interface → Bun adapter: implemented by
- Adapter interface → Vercel adapter: implemented by
- Application developer → CLI commands: creates project
- CLI commands → Project creator: delegates creation