How allenelguira16/vynn works
Vynn is a TypeScript JSX framework with reactive rendering, server rendering and hydration, file-based routing, server functions, and Vite integration. A typical application is compiled and integrated by the Vite plugins, routed to a page, rendered on the server or in the browser, and hydrated for client interaction. The graph emphasizes those product stages and the runtime layers they rely on. Some plugin and runtime internals are unsampled, so their detailed connections are omitted.
Main entry points: src/index.ts Vite Plugin · app/index.ts SSR App Plugin · render DOM Rendering · create-router.ts Router Instance
Components 29
Compilation
- JSX Compiler
packages/vynn-compiler/src/index.ts - Compiler AST
packages/vynn-compiler/src/ast.ts - Server Transform
packages/vynn-compiler/src/server-functions/transform.ts
Vite Integration
- Vite Plugin
packages/vite-plugin/src/index.ts - SSR App Plugin
packages/vite-plugin/src/plugins/app/index.ts - Client Documents
packages/vite-plugin/src/plugins/app/documents.ts - HTTP Handling
packages/vite-plugin/src/plugins/app/http.ts - File Router Plugin
packages/vite-plugin/src/plugins/file-router.ts - Server Function Plugin
packages/vite-plugin/src/plugins/server-functions/index.ts - SSR CSS
packages/vite-plugin/src/plugins/ssr-css.ts - SSR Preload
packages/vite-plugin/src/plugins/ssr-preload.ts
Framework Runtime
- Reactive State
packages/vynn-core/src/reactivity - DOM Rendering
packages/vynn-core/src/render - Client Hydration
packages/vynn-core/src/client/hydration.ts - Server Rendering
packages/vynn-core/src/server/render-to-server.ts - Component Ownership
packages/vynn-core/src/life-cycle/owner.ts - Function Client
packages/vynn-core/src/server-functions/client.ts - Function Server
packages/vynn-core/src/server-functions/server.ts - Value Serialization
packages/vynn-core/src/server-functions/serialization.ts - Function Context
packages/vynn-core/src/server/server-function-context.ts
Routing
- Router Component
packages/vynn-router/src/router.tsx - Router Instance
packages/vynn-router/src/create-router.ts - Navigation History
packages/vynn-router/src/history.ts - Location State
packages/vynn-router/src/location.ts - Route Outlet
packages/vynn-router/src/outlet.tsx - File Route Builder
packages/vynn-router/src/file-router.ts
Other components
- Application Author
- HTTP Request
- Browser
Connections 28
- Application Author → JSX Compiler: writes JSX
- Vite Plugin → SSR App Plugin: registers
packages/vite-plugin/src/index.ts - Vite Plugin → File Router Plugin: registers
packages/vite-plugin/src/index.ts - Vite Plugin → Server Function Plugin: registers
packages/vite-plugin/src/index.ts - Vite Plugin → SSR CSS: registers
packages/vite-plugin/src/index.ts - Vite Plugin → SSR Preload: registers
packages/vite-plugin/src/index.ts - JSX Compiler → Compiler AST: uses
packages/vynn-compiler/src/index.ts - Server Function Plugin → Server Transform: transforms with
packages/vite-plugin/src/plugins/server-functions/index.ts - SSR App Plugin → Client Documents: creates shell
packages/vite-plugin/src/plugins/app/index.ts - SSR App Plugin → HTTP Handling: handles requests
packages/vite-plugin/src/plugins/app/index.ts - HTTP Request → SSR App Plugin: initiates SSR
packages/vite-plugin/src/plugins/app/index.ts - Router Component → Router Instance: creates instance
packages/vynn-router/src/router.tsx - Router Component → Route Outlet: renders
packages/vynn-router/src/router.tsx - Router Instance → Navigation History: subscribes to
packages/vynn-router/src/create-router.ts - Router Instance → Location State: updates
packages/vynn-router/src/create-router.ts - File Route Builder → Navigation History: uses route types
packages/vynn-router/src/file-router.ts - File Router Plugin → File Route Builder: generates routes
- DOM Rendering → Reactive State: reads state
- Client Hydration → DOM Rendering: hydrates output
- Server Rendering → DOM Rendering: renders components
- Component Ownership → Reactive State: tracks lifecycle
- Browser → Client Hydration: hydrates page
- Function Client → Value Serialization: serializes values
packages/vynn-core/src/server-functions/client.ts - Function Server → Value Serialization: serializes values
packages/vynn-core/src/server-functions/server.ts - Function Server → Function Context: runs in context
packages/vynn-core/src/server-functions/server.ts - Function Client → HTTP Request: sends invocation
- SSR App Plugin → Server Rendering: dispatches SSR
- Route Outlet → DOM Rendering: renders route content