bhooai-nexus-future

A futuristic, AI-ready, zero-build JavaScript full-stack framework.

One primitive — live() — defines a full-stack feature: server-rendered HTML + automatic live updates over WebSocket + AI token streaming into the DOM. Rendering uses a built-in html tagged-template engine (no VDOM, no hydration, no build step). autoui() turns a zod schema into a working CRUD UI. page() adds a zero-build SPA router sharing the same renderer.

Status — v1 complete (P1–P5)

• P1 — html template engine + signals runtime
• P2 — live(): HTTP + WS mount, RPC event delegation, DOM morphing, two-tab live sync
• P3 — ai() streaming (OpenAI-compatible built-in JS client) + token-level live patching + page() SPA router
• P4 — autoui(): zod schema → CRUD UI + collection() reactive store
• P5 — self-contained pages (live(path, render, { state }) auto-subscribes), createFutureApp() with live-file discovery + staticDir SPA hosting, zero-build SPA example

97 tests green · JSDoc typecheck clean · three E2Es passing.

Quick start

node examples/starter/server.js
# http://127.0.0.1:4300        — live counter (syncs across tabs)
# http://127.0.0.1:4300/chat   — live chat
# http://127.0.0.1:4300/ai     — AI streaming chat (any OpenAI-compatible server)
# http://127.0.0.1:4300/posts  — autoui CRUD (create/edit/delete, live sync)

node examples/spa/server.js
# http://127.0.0.1:4301        — zero-build SPA (raw ESM, no bundler) + /ticks live page

The whole framework in one page

A page is one self-contained file — state travels with the definition, discovery mounts it, mutations auto-patch every connected tab:

// src/live/counter.live.js — the entire full-stack feature
import { live, html, store } from 'bhooai-nexus-future';

const state = store({ count: 0, clicks: 0 });

export default live('/', ({ state }) => html`
  <p>Count: <strong>${state.count}</strong> (clicks: ${state.clicks})</p>
  <button onclick=${() => {
    state.count.set(state.count() + 1);
    state.clicks.set(state.clicks() + 1);
  }}>+1</button>
`, { state });

// server.js — the entire bootstrap
import { createFutureApp } from 'bhooai-nexus-future';

const app = await createFutureApp({ name: 'my-app' });
await app.listen();

What the framework does for you:

1. GET / → SSR HTML with per-render handler ids + a ~3KB browser runtime
2. Click → runtime sends { t:'rpc', rid, id } over WS
3. Server invokes the handler → the signal mutates
4. Server re-renders and pushes { t:'patch', rid, html }
5. Every connected tab morphs its DOM (keyed data-key items move, others patch in place)

No bundler. No hydration. No client-side state management. No manual wiring.

API surface

import {
  // live pages
  live, store, LiveServer, aiStream, streamThrottled,
  // rendering + reactivity (Node & browser)
  html, raw, thunk, on, signal, computed, effect, batch, untrack,
  // SPA (browser)
  page, mount, Link,
  // AI (OpenAI-compatible)
  ai, autoui, collection, introspect,
  // bootstrap
  createFutureApp,
} from 'bhooai-nexus-future';

live()

live(path, render, { state })   // state auto-subscribes: mutations patch all clients
// render receives { params, query, state, rid, server }
live('/posts/:id', ({ params, server }) => html`<h1>${params.id}</h1>`)
// server.patchPage('/posts/:id') — params from the last match are preserved

createFutureApp()

const app = await createFutureApp({
  name: 'my-app',
  port: 4300,
  liveDir: 'src/live',     // auto-discovers *.live.js — state travels with pages
  staticDir: 'public',     // serve files + SPA fallback to index.html
  httpServer: existing,    // OR co-mount onto a nexus-core server
  fallback: (req, res) => {}, // anything else
});

AI streaming

const brain = ai({ serverUrl: 'http://localhost:8000' }); // any OpenAI-compatible endpoint
aiStream({ server, page: '/ai', target: '#reply',
  stream: brain.tokens({ model: 'llama3', messages }),
  onDone: (full) => { state.reply.set(full); server.patchPage('/ai'); },
});
// tokens patch ONLY the target node — no re-render per token

autoui()

const Post = z.object({ title: z.string().min(3), body: z.string().min(1),
                        status: z.enum(['draft', 'published']), views: z.number().default(0) });
const posts = collection(Post, { rows: seed });
live('/posts', () => autoui(Post, { store: posts, title: 'Posts' }),
     { state: { rows: posts.rows, editing: posts.editing, errors: posts.errors } });
// → table + create/edit form + inline zod errors, live-synced

page() — zero-build SPA

import { page, mount, Link } from 'bhooai-nexus-future/page';
mount({ pages: [home, about], root: '#app' }); // pushState, layouts, View Transitions

Served raw from staticDir — raw ESM imports from node_modules, no bundler (see examples/spa).

Package layout

src/
├── html/    template.js (html``, raw, on, thunk, fx registry) · signals.js
├── live/    server.js (live(), store(), LiveServer) · rpc.js · morph.js
│            client.js (~3KB browser runtime) · stream.js (AI token streaming)
├── page/    index.js (page(), mount(), Link() SPA router)
├── ai/      index.js (ai() facade) · http.js (OpenAI-compatible client)
│            fields.js (zod introspection) · crud.js (collection) · autoui.js
├── server/  mount.js (createFutureApp(), discovery, static serving)
└── index.js public API

examples/
├── starter/ src/live/{counter,chat,ai,posts}.live.js + 15-line server.js
└── spa/     zero-build SPA (public/app.js raw ESM) + /ticks live page

Design guarantees

1. Zero client JS for live pages — the ~3KB runtime is served once, shared by every page.
2. Auto XSS-escaping — every html\`interpolation escaped unlessraw()`.
3. Token-granular AI patches — streaming updates only the target text node.
4. No build step — raw ESM everywhere; works in Node and modern browsers.
5. Self-contained pages — state travels with the page definition; discovery + auto-subscription do the wiring.

Scripts

npm test          # vitest (97 tests)
npm run typecheck # JSDoc strict typecheck (tsc --checkJs)

License

MIT