# allenelguira16/vynn architecture

> Architecture diagram of the GitHub repository allenelguira16/vynn, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/allenelguira16/vynn
- Repository: https://github.com/allenelguira16/vynn

## Overview

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: [`packages/vite-plugin/src/index.ts`](https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/index.ts) (Vite Plugin), [`packages/vite-plugin/src/plugins/app/index.ts`](https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/plugins/app/index.ts) (SSR App Plugin), [`packages/vynn-core/src/render`](https://github.com/allenelguira16/vynn/tree/master/packages/vynn-core/src/render) (DOM Rendering), [`packages/vynn-router/src/create-router.ts`](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-router/src/create-router.ts) (Router Instance)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_compiler["Compilation"]
  node_compiler["JSX Compiler<br/>[index.ts]"]
  node_compiler_ast["Compiler AST<br/>[ast.ts]"]
  node_server_transform["Server Transform<br/>[transform.ts]"]
end

subgraph group_integration["Vite Integration"]
  node_vite["Vite Plugin<br/>[index.ts]"]
  node_app_plugin["SSR App Plugin<br/>[index.ts]"]
  node_app_documents["Client Documents<br/>[documents.ts]"]
  node_app_http["HTTP Handling<br/>[http.ts]"]
  node_file_plugin["File Router Plugin<br/>[file-router.ts]"]
  node_server_plugin["Server Function Plugin<br/>[index.ts]"]
  node_ssr_css["SSR CSS<br/>[ssr-css.ts]"]
  node_ssr_preload["SSR Preload<br/>[ssr-preload.ts]"]
end

subgraph group_runtime["Framework Runtime"]
  node_reactivity["Reactive State"]
  node_rendering["DOM Rendering"]
  node_hydration["Client Hydration<br/>[hydration.ts]"]
  node_server_render["Server Rendering"]
  node_owner["Component Ownership<br/>[owner.ts]"]
  node_sf_client["Function Client<br/>[client.ts]"]
  node_sf_server["Function Server<br/>[server.ts]"]
  node_sf_serialization["Value Serialization<br/>[serialization.ts]"]
  node_sf_context["Function Context"]
end

subgraph group_routing["Routing"]
  node_router["Router Component<br/>[router.tsx]"]
  node_router_create["Router Instance<br/>[create-router.ts]"]
  node_router_history["Navigation History<br/>[history.ts]"]
  node_router_location["Location State<br/>[location.ts]"]
  node_router_outlet["Route Outlet<br/>[outlet.tsx]"]
  node_file_routes["File Route Builder<br/>[file-router.ts]"]
end

node_developer(("Application Author"))
node_request(("HTTP Request"))
node_browser(("Browser"))

node_developer -.->|"writes JSX"| node_compiler
node_vite -->|"registers"| node_app_plugin
node_vite -->|"registers"| node_file_plugin
node_vite -->|"registers"| node_server_plugin
node_vite -->|"registers"| node_ssr_css
node_vite -->|"registers"| node_ssr_preload
node_compiler -->|"uses"| node_compiler_ast
node_server_plugin -->|"transforms with"| node_server_transform
node_app_plugin -->|"creates shell"| node_app_documents
node_app_plugin -->|"handles requests"| node_app_http
node_request -->|"initiates SSR"| node_app_plugin
node_router -->|"creates instance"| node_router_create
node_router -->|"renders"| node_router_outlet
node_router_create -->|"subscribes to"| node_router_history
node_router_create -->|"updates"| node_router_location
node_file_routes -->|"uses route types"| node_router_history
node_file_plugin -.->|"generates routes"| node_file_routes
node_rendering -.->|"reads state"| node_reactivity
node_hydration -.->|"hydrates output"| node_rendering
node_server_render -.->|"renders components"| node_rendering
node_owner -.->|"tracks lifecycle"| node_reactivity
node_browser -.->|"hydrates page"| node_hydration
node_sf_client -->|"serializes values"| node_sf_serialization
node_sf_server -->|"serializes values"| node_sf_serialization
node_sf_server -->|"runs in context"| node_sf_context
node_sf_client -.->|"sends invocation"| node_request
node_app_plugin -.->|"dispatches SSR"| node_server_render
node_router_outlet -.->|"renders route content"| node_rendering

click node_compiler "https://github.com/allenelguira16/vynn/blob/master/packages/vynn-compiler/src/index.ts"
click node_compiler_ast "https://github.com/allenelguira16/vynn/blob/master/packages/vynn-compiler/src/ast.ts"
click node_server_transform "https://github.com/allenelguira16/vynn/blob/master/packages/vynn-compiler/src/server-functions/transform.ts"
click node_vite "https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/index.ts"
click node_app_plugin "https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/plugins/app/index.ts"
click node_app_documents "https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/plugins/app/documents.ts"
click node_app_http "https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/plugins/app/http.ts"
click node_file_plugin "https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/plugins/file-router.ts"
click node_server_plugin "https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/plugins/server-functions/index.ts"
click node_ssr_css "https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/plugins/ssr-css.ts"
click node_ssr_preload "https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/plugins/ssr-preload.ts"
click node_reactivity "https://github.com/allenelguira16/vynn/tree/master/packages/vynn-core/src/reactivity"
click node_rendering "https://github.com/allenelguira16/vynn/tree/master/packages/vynn-core/src/render"
click node_hydration "https://github.com/allenelguira16/vynn/blob/master/packages/vynn-core/src/client/hydration.ts"
click node_server_render "https://github.com/allenelguira16/vynn/blob/master/packages/vynn-core/src/server/render-to-server.ts"
click node_owner "https://github.com/allenelguira16/vynn/blob/master/packages/vynn-core/src/life-cycle/owner.ts"
click node_sf_client "https://github.com/allenelguira16/vynn/blob/master/packages/vynn-core/src/server-functions/client.ts"
click node_sf_server "https://github.com/allenelguira16/vynn/blob/master/packages/vynn-core/src/server-functions/server.ts"
click node_sf_serialization "https://github.com/allenelguira16/vynn/blob/master/packages/vynn-core/src/server-functions/serialization.ts"
click node_sf_context "https://github.com/allenelguira16/vynn/blob/master/packages/vynn-core/src/server/server-function-context.ts"
click node_router "https://github.com/allenelguira16/vynn/blob/master/packages/vynn-router/src/router.tsx"
click node_router_create "https://github.com/allenelguira16/vynn/blob/master/packages/vynn-router/src/create-router.ts"
click node_router_history "https://github.com/allenelguira16/vynn/blob/master/packages/vynn-router/src/history.ts"
click node_router_location "https://github.com/allenelguira16/vynn/blob/master/packages/vynn-router/src/location.ts"
click node_router_outlet "https://github.com/allenelguira16/vynn/blob/master/packages/vynn-router/src/outlet.tsx"
click node_file_routes "https://github.com/allenelguira16/vynn/blob/master/packages/vynn-router/src/file-router.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_compiler,node_compiler_ast,node_server_transform,node_browser toneBlue
class node_vite,node_app_plugin,node_app_documents,node_app_http,node_file_plugin,node_server_plugin,node_ssr_css,node_ssr_preload toneAmber
class node_reactivity,node_rendering,node_hydration,node_server_render,node_owner,node_sf_client,node_sf_server,node_sf_serialization,node_sf_context,node_request toneMint
class node_router,node_router_create,node_router_history,node_router_location,node_router_outlet,node_file_routes toneRose
class node_developer toneIndigo
```

## Components

### Compilation

- [JSX Compiler](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-compiler/src/index.ts): `packages/vynn-compiler/src/index.ts`
- [Compiler AST](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-compiler/src/ast.ts): `packages/vynn-compiler/src/ast.ts`
- [Server Transform](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-compiler/src/server-functions/transform.ts): `packages/vynn-compiler/src/server-functions/transform.ts`

### Vite Integration

- [Vite Plugin](https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/index.ts): `packages/vite-plugin/src/index.ts`
- [SSR App Plugin](https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/plugins/app/index.ts): `packages/vite-plugin/src/plugins/app/index.ts`
- [Client Documents](https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/plugins/app/documents.ts): `packages/vite-plugin/src/plugins/app/documents.ts`
- [HTTP Handling](https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/plugins/app/http.ts): `packages/vite-plugin/src/plugins/app/http.ts`
- [File Router Plugin](https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/plugins/file-router.ts): `packages/vite-plugin/src/plugins/file-router.ts`
- [Server Function Plugin](https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/plugins/server-functions/index.ts): `packages/vite-plugin/src/plugins/server-functions/index.ts`
- [SSR CSS](https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/plugins/ssr-css.ts): `packages/vite-plugin/src/plugins/ssr-css.ts`
- [SSR Preload](https://github.com/allenelguira16/vynn/blob/master/packages/vite-plugin/src/plugins/ssr-preload.ts): `packages/vite-plugin/src/plugins/ssr-preload.ts`

### Framework Runtime

- [Reactive State](https://github.com/allenelguira16/vynn/tree/master/packages/vynn-core/src/reactivity): `packages/vynn-core/src/reactivity`
- [DOM Rendering](https://github.com/allenelguira16/vynn/tree/master/packages/vynn-core/src/render): `packages/vynn-core/src/render`
- [Client Hydration](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-core/src/client/hydration.ts): `packages/vynn-core/src/client/hydration.ts`
- [Server Rendering](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-core/src/server/render-to-server.ts): `packages/vynn-core/src/server/render-to-server.ts`
- [Component Ownership](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-core/src/life-cycle/owner.ts): `packages/vynn-core/src/life-cycle/owner.ts`
- [Function Client](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-core/src/server-functions/client.ts): `packages/vynn-core/src/server-functions/client.ts`
- [Function Server](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-core/src/server-functions/server.ts): `packages/vynn-core/src/server-functions/server.ts`
- [Value Serialization](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-core/src/server-functions/serialization.ts): `packages/vynn-core/src/server-functions/serialization.ts`
- [Function Context](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-core/src/server/server-function-context.ts): `packages/vynn-core/src/server/server-function-context.ts`

### Routing

- [Router Component](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-router/src/router.tsx): `packages/vynn-router/src/router.tsx`
- [Router Instance](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-router/src/create-router.ts): `packages/vynn-router/src/create-router.ts`
- [Navigation History](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-router/src/history.ts): `packages/vynn-router/src/history.ts`
- [Location State](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-router/src/location.ts): `packages/vynn-router/src/location.ts`
- [Route Outlet](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-router/src/outlet.tsx): `packages/vynn-router/src/outlet.tsx`
- [File Route Builder](https://github.com/allenelguira16/vynn/blob/master/packages/vynn-router/src/file-router.ts): `packages/vynn-router/src/file-router.ts`

### Other components

- **Application Author**
- **HTTP Request**
- **Browser**

## Connections

- Application Author → JSX Compiler: writes JSX
- Vite Plugin → SSR App Plugin: registers (evidence: `packages/vite-plugin/src/index.ts`)
- Vite Plugin → File Router Plugin: registers (evidence: `packages/vite-plugin/src/index.ts`)
- Vite Plugin → Server Function Plugin: registers (evidence: `packages/vite-plugin/src/index.ts`)
- Vite Plugin → SSR CSS: registers (evidence: `packages/vite-plugin/src/index.ts`)
- Vite Plugin → SSR Preload: registers (evidence: `packages/vite-plugin/src/index.ts`)
- JSX Compiler → Compiler AST: uses (evidence: `packages/vynn-compiler/src/index.ts`)
- Server Function Plugin → Server Transform: transforms with (evidence: `packages/vite-plugin/src/plugins/server-functions/index.ts`)
- SSR App Plugin → Client Documents: creates shell (evidence: `packages/vite-plugin/src/plugins/app/index.ts`)
- SSR App Plugin → HTTP Handling: handles requests (evidence: `packages/vite-plugin/src/plugins/app/index.ts`)
- HTTP Request → SSR App Plugin: initiates SSR (evidence: `packages/vite-plugin/src/plugins/app/index.ts`)
- Router Component → Router Instance: creates instance (evidence: `packages/vynn-router/src/router.tsx`)
- Router Component → Route Outlet: renders (evidence: `packages/vynn-router/src/router.tsx`)
- Router Instance → Navigation History: subscribes to (evidence: `packages/vynn-router/src/create-router.ts`)
- Router Instance → Location State: updates (evidence: `packages/vynn-router/src/create-router.ts`)
- File Route Builder → Navigation History: uses route types (evidence: `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 (evidence: `packages/vynn-core/src/server-functions/client.ts`)
- Function Server → Value Serialization: serializes values (evidence: `packages/vynn-core/src/server-functions/server.ts`)
- Function Server → Function Context: runs in context (evidence: `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