How vobsjs/vobs works
vobs is a signal-first TypeScript UI framework and a broad set of companion application packages. Its main workflow compiles JSX into targeted runtime bindings, creates and mounts an app through the umbrella entry, and updates DOM bindings through signals rather than component rerenders. The packages also provide routing, server rendering, data and auth services, UI composition, and developer diagnostics. Links for unsampled packages reflect README descriptions; source-level wiring is included only where shown. The playground demonstrates integration, not the framework’s production runtime.
Main entry points: router.ts Example routes · app.ts App lifecycle · main.ts Example app startup · src Routing
Components 34
Framework Core
- App lifecycle
packages/vobs/src/app.ts - Signals and effects
packages/reactivity/src - DOM runtime ops
packages/runtime/src/ops.ts - Hot reload
packages/runtime/src/hmr.ts - DOM renderer
packages/dom/src - SSR and hydration
packages/ssr/src
Compilation and Rendering
- JSX compiler
packages/compiler/src/compile.ts - Vite integration
packages/vite-plugin/src
App Services
- Routing
packages/router/src - Async resources
packages/resource/src - HTTP and streams
packages/http/src/index.ts - Auth and JWT
packages/auth/src/index.ts - Storage and sync
packages/storage/src - Task queue
packages/queue/src - Payment adapters
packages/payment/src - Uploads
packages/upload/src
UI and Diagnostics
- Forms and validation
packages/forms/src - App composition kit
packages/kit/src - UI and layout
packages/ui/src - Data tables
packages/table/src - Debug instrumentation
packages/devtools/src/index.ts - Devtools panel
packages/devtools-ui/src/panel.tsx
Playground
- Example app startup
playground/basic/src/main.ts - Example routes
playground/basic/src/router.ts - Example app view
playground/basic/src/App.tsx - Theme plugin
playground/basic/src/plugins/theme.ts - Storage plugin
playground/basic/src/plugins/storage.ts - Login example
playground/basic/src/pages/auth/LoginPage.tsx - Captcha example
playground/basic/src/pages/captcha/CaptchaPage.tsx - Async example
playground/basic/src/pages/async/AsyncPage.tsx - Data example
playground/basic/src/pages/data/DataPage.tsx - Payment example
playground/basic/src/pages/payment/PaymentPage.tsx - Resource table example
playground/basic/src/pages/users/ResourceTablePage.tsx
Other components
- App developer
Connections 40
- App developer → Vite integration: configures build
- Vite integration → JSX compiler: transforms TSX
- JSX compiler → DOM runtime ops: emits bindings
- App developer → App lifecycle: creates app
- App lifecycle → Signals and effects: creates owner
packages/vobs/src/app.ts - App lifecycle → DOM renderer: creates renderer
packages/vobs/src/app.ts - App lifecycle → DOM runtime ops: sets renderer and inserts
packages/vobs/src/app.ts - DOM runtime ops → Signals and effects: tracks owner
- App lifecycle → Hot reload: supports hot reload
- App lifecycle → SSR and hydration: supports hydration
- App developer → Routing: configures routes
- Routing → Async resources: supports route data
- App developer → HTTP and streams: makes requests
- App developer → Auth and JWT: manages sessions
- App developer → Storage and sync: stores client state
- App developer → Task queue: enqueues tasks
- App developer → Payment adapters: integrates payments
- App developer → Uploads: uploads files
- App developer → Forms and validation: builds forms
- App developer → App composition kit: composes app UI
- App composition kit → UI and layout: composes components
- App composition kit → Data tables: composes tables
- App developer → Debug instrumentation: inspects runtime
- Devtools panel → Debug instrumentation: reads snapshots
packages/devtools-ui/src/panel.tsx - Example app startup → App lifecycle: creates and mounts
playground/basic/src/main.ts - Example app startup → Example app view: renders
playground/basic/src/main.ts - Example app startup → Example routes: installs router
playground/basic/src/main.ts - Example app view → Routing: renders RouterView
playground/basic/src/App.tsx - Example app view → Devtools panel: renders widget
playground/basic/src/App.tsx - Example routes → Routing: creates router
playground/basic/src/router.ts - Example routes → Async resources: registers resource router
playground/basic/src/router.ts - Example routes → Login example: routes to
playground/basic/src/router.ts - Example routes → Captcha example: routes to
playground/basic/src/router.ts - Example routes → Async example: routes to
playground/basic/src/router.ts - Example routes → Data example: routes to
playground/basic/src/router.ts - Example routes → Payment example: routes to
playground/basic/src/router.ts - Example routes → Resource table example: routes to
playground/basic/src/router.ts - Example app startup → Theme plugin: installs plugin
playground/basic/src/main.ts - Example app startup → Storage plugin: installs plugin
playground/basic/src/main.ts - Storage plugin → Storage and sync: configures storage
playground/basic/src/plugins/storage.ts