How rawfox-js/rawfox works
RawFox JS is a small declarative browser UI framework. User code creates element and text nodes, configures element attributes, styles, and events through chainable methods, then invokes the app returned by BuildApp to render those nodes into a selected DOM mount. The README also documents custom components and global, body, root, and HTML styling. The architecture follows the documented runtime flow; source excerpts do not include Text.ts or Div.ts implementations, so their internal details are not expanded.
Main entry points: app.ts BuildApp · renderer.ts render · main.ts Exports · elements Element helpers
Components 18
Public API
- Exports
src/main.ts - BuildApp
src/core/app.ts - App mount
src/core/app.ts - Global styles
src/core/app.ts
Node Construction
- Element helpers
src/elements - P
src/elements/P.ts - Br
src/elements/Br.ts - Text
src/elements/Text.ts - Div
src/elements/Div.ts - BuildRNode
src/core/rnode.ts - Chainable properties
src/module/properties.ts - Custom components
src/core/rnode.ts
DOM Rendering
- render
src/core/renderer.ts - Element renderer
src/core/renderer.ts - Text/comment renderers
src/core/renderer.ts - CSS name conversion
src/core/tools.ts
Other components
- Application code
- Browser DOM
Connections 22
- Application code → Exports: imports
- Exports → BuildApp: exports
- Exports → Element helpers: exports
- Application code → BuildApp: configures
- BuildApp → Global styles: injects styles
- BuildApp → App mount: creates
- BuildApp → Browser DOM: selects mount
- Application code → Element helpers: creates nodes
- Element helpers → BuildRNode: builds nodes
- BuildRNode → Chainable properties: injects methods
- Application code → Custom components: defines components
- Custom components → BuildRNode: builds nodes
- Application code → App mount: supplies nodes
- App mount → render: mounts via
- render → Text/comment renderers: dispatches
- render → Element renderer: dispatches
- Element renderer → render: renders children
- Element renderer → CSS name conversion: converts CSS names
- Global styles → CSS name conversion: converts CSS names
- render → Browser DOM: creates DOM nodes
- Element renderer → Browser DOM: sets attributes and events
- Global styles → Browser DOM: injects CSS