Huchi OS v2.4 Runtime
Zero-Build Native Web Engine
A lightweight JavaScript application framework with MutationObserver dynamic module hydration, isolated sandboxed lifecycles, global event bus request routing, and automatic HTTP request deduplication.
Dom.js Engine
Fluent DOM selector wrapper with batch element chaining, attribute patching, and micro-reactivity updates.
Explore Dom.js →
Component & SandBox
State-driven UI components with isolated SandBox execution contexts that auto-purge memory on node removal.
Explore Components →
Event Bus System
System-wide message distribution queue supporting asynchronous publish/subscribe and request/handle RPC patterns.
Explore Events →
HTTP Request Transport
Concurrency-locked fetch client featuring request deduplication, signature generation, and path resolution circuits.
Explore HTTP Client →
Architectural Foundations
Huchi OS eliminates complex JS bundling (like Vite or Webpack) in favor of evergreen browser standards (ES Modules, MutationObserver, and Proxy states). Here is how the engine coordinates runtime execution:
| Subsystem |
Primary Class |
Architectural Role |
| Hydration Observer |
Page |
Monitors DOM tree additions. When an element with data-x-mod="path/to/Module" is inserted, Page dynamically imports and boots the controller. |
| Isolation Enclosure |
SandBox |
Wraps each active component instance. Tracks all attached event listeners, network hooks, and child references for 100% leak-free destruction when nodes unmount. |
| Messaging Bus |
Events / Binder |
Decouples components using two communication models: emit/on for broadcast events and request/handle for direct RPC calls between modules. |
| Transport Circuit |
Call / call() |
Executes network requests with internal hashing. If identical API calls trigger simultaneously, second calls block until the active request returns. |
Package Layout & Export Standard
The entire frontend engine resides inside /frontend/index.js as an ES module package:
-
Dom.js
Exports
Dom, dom, dm
-
Page.js
Exports
Page observer core
-
Component.js
Exports base
Component class
-
SandBox.js
Exports module
SandBox enclosure
-
Events.js & Binder.js
Exports
Events, Binder bus
-
Request.js
Exports
Call builder, call()
Bootstrapping an Application
Initialize the root runtime page instance. Any element marked with data-x-mod will be dynamically resolved and hydrated:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">
import { Page } from './frontend/index.js';
// Bootstraps runtime observer & system heartbeat
const app = Page.init(document.getElementById('app'));
await app.populate();
</script>
</head>
<body>
<div id="app">
<!-- Automatically fetches and boots /js/App/Components/user/UserWallet.js -->
<div data-x-mod="user/UserWallet"></div>
</div>
</body>
</html>