@tinyfx/runtime 0.2.0 → 0.2.1

package/README.md

@@ -1,15 +1,20 @@
 # @tinyfx/runtime
 
-The TinyFX browser runtime: signals, DOM helpers, typed HTTP, and router lifecycle utilities.
+The TinyFX browser runtime: signals, DOM helpers, typed HTTP, router lifecycle utilities, and dynamic registration APIs.
 
 ## Features
 
 - Signals (`signal`, `effect`)
 - DOM binding helpers (`bindText`, `bindAttr`, `bindClass`)
-- Typed HTTP client (`createHttp`)
-- Router helpers (`initRouter`, `navigate`, `goBack`, `getParam`)
+- Typed HTTP client (`createHttp`) with discriminated error types
+- Router helpers (`getParam`, `getParams`, `navigate`, `goBack`)
 - Lifecycle hooks (`onMount`, `onDestroy`)
 - Lightweight `TinyFxContext` (`params`, `navigate`)
+- Dynamic component registration (`registerComponent`, `getComponentFactory`, `mountComponents`)
+- Dynamic page registration (`registerPage`, `getPageModule`, `runPageInit`)
+- Mount state tracking (`markMounted`, `isMounted`)
+- Path matching (`matchPath`, `splitPath`, `RouteDef`)
+- Unified initialization (`init`)
 
 ## Installation
 
@@ -33,7 +38,7 @@ effect(() => {
 count.set(count() + 1);
 ```
 
-### DOM bindings
+### DOM Bindings
 
 ```ts
 import { signal, bindText, bindClass, bindAttr } from "@tinyfx/runtime";
@@ -46,12 +51,12 @@ const btn = document.querySelector("button");
 
 if (el && btn) {
   bindText(el, () => `Count: ${count()}`);
-  bindClass(btn, "active", isActive);
+  bindClass(btn, "active", () => isActive());
   bindAttr(btn, "disabled", () => count() > 10);
 }
 ```
 
-### HTTP client
+### HTTP Client
 
 ```ts
 import { createHttp } from "@tinyfx/runtime";
@@ -65,20 +70,16 @@ const users = await http.get<{ id: number; name: string }[]>("/users");
 ```ts
 import type { TinyFxContext } from "@tinyfx/runtime";
 
-export function init(el: HTMLElement, ctx: TinyFxContext) {
+export function init(_el: HTMLElement, ctx: TinyFxContext) {
   console.log(ctx.params);
   ctx.navigate("/about");
 }
 ```
 
-### Router + lifecycle hooks
+### Router + Lifecycle Hooks
 
 ```ts
-import { initRouter, onMount, onDestroy } from "@tinyfx/runtime";
-
-initRouter({
-  "/": { page: "index", path: "/" },
-});
+import { onMount, onDestroy } from "@tinyfx/runtime";
 
 onMount(() => {
   console.log("mounted");
@@ -89,21 +90,66 @@ onDestroy(() => {
 });
 ```
 
-## API overview
-
-- `signal<T>(value: T)`
-- `effect(fn)`
-- `bindText(el, source)`
-- `bindAttr(el, attr, source)`
-- `bindClass(el, className, source)`
-- `createHttp(config?)`
-- `initRouter(routes)`
-- `getParam(name)`
-- `navigate(path)`
-- `goBack()`
-- `onMount(fn)`
-- `onDestroy(fn)`
-- `TinyFxContext`
+### Component Registration
+
+```ts
+import { registerComponent } from "@tinyfx/runtime";
+
+registerComponent("MyButton", (el, ctx) => {
+  el.addEventListener("click", () => console.log("clicked"));
+  return { el };
+});
+```
+
+### Page Registration
+
+```ts
+import { registerPage } from "@tinyfx/runtime";
+
+registerPage("/", {
+  init(_el, _ctx) {
+    console.log("home page loaded");
+  },
+});
+```
+
+### Initialization
+
+The compiler-generated `tinyfx.gen.ts` calls `init()` automatically. You typically do not need to call it yourself.
+
+```ts
+import { init } from "@tinyfx/runtime";
+
+init({ routes, setupDirectives });
+```
+
+## API Overview
+
+- `signal<T>(value: T)` — creates a reactive signal
+- `effect(fn)` — registers a reactive effect
+- `bindText(el, source)` — binds text content reactively
+- `bindAttr(el, attr, source)` — binds an attribute reactively
+- `bindClass(el, className, source)` — binds a class toggle reactively
+- `createHttp(config?)` — creates a typed HTTP client
+- `getParam(name)` — gets a single route parameter
+- `getParams()` — gets all route parameters
+- `navigate(path)` — triggers full browser navigation
+- `goBack()` — goes back in browser history
+- `onMount(fn)` — registers a mount callback
+- `onDestroy(fn)` — registers a destroy callback
+- `registerComponent(name, factory)` — registers a dynamic component
+- `getComponentFactory(name)` — retrieves a registered component factory
+- `mountComponents(ctx, root?)` — mounts all components in a root element
+- `registerPage(route, module)` — registers a page module
+- `getPageModule(route)` — retrieves a registered page module
+- `runPageInit(route, ctx)` — runs page init if registered
+- `markMounted(el)` — marks an element as mounted (returns true on first call)
+- `isMounted(el)` — checks if an element has been mounted
+- `matchPath(def, segments)` — matches a RouteDef against path segments
+- `splitPath(pathname)` — splits a pathname into segments
+- `init(config)` — unified bootstrap entry point
+- `TinyFxContext` — type for page/component context
+- `RouteMap`, `RouteMeta`, `RouteDef` — routing types
 
 ## License
 

package/dist/http/data.d.ts

@@ -108,4 +108,5 @@ export interface RequestOptions {
     timeout?: number;
     signal?: AbortSignal;
     params?: Record<string, string | number | boolean>;
+    json?: boolean;
 }

package/dist/http/http.js

@@ -25,22 +25,26 @@ export function createHttp(config = {}) {
     const requestInterceptors = (_f = config.requestInterceptors) !== null && _f !== void 0 ? _f : [];
     const responseInterceptors = (_g = config.responseInterceptors) !== null && _g !== void 0 ? _g : [];
     async function request(method, url, body, options = {}) {
-        var _a, _b;
+        var _a, _b, _c;
         const fullUrl = buildUrl(url, base, options.params);
         const timeoutMs = (_a = options.timeout) !== null && _a !== void 0 ? _a : defaultTimeout;
+        const useJson = (_b = options.json) !== null && _b !== void 0 ? _b : true;
         let attempts = 0;
         const maxAttempts = maxRetries + 1;
         while (attempts < maxAttempts) {
             attempts++;
             try {
                 const headers = Object.assign(Object.assign({}, defaultHeaders), options.headers);
-                if (body !== undefined && !headers["Content-Type"]) {
+                if (body !== undefined && useJson && !headers["Content-Type"]) {
                     headers["Content-Type"] = "application/json";
                 }
+                const serializedBody = body !== undefined
+                    ? (useJson ? JSON.stringify(body) : body)
+                    : undefined;
                 let fetchOptions = {
                     method,
                     headers,
-                    body: body !== undefined ? JSON.stringify(body) : undefined,
+                    body: serializedBody,
                     signal: options.signal,
                 };
                 let requestUrl = fullUrl;
@@ -70,7 +74,7 @@ export function createHttp(config = {}) {
                 catch (err) {
                     clearTimeout(timeoutId);
                     if (err instanceof Error && err.name === "AbortError") {
-                        if ((_b = options.signal) === null || _b === void 0 ? void 0 : _b.aborted) {
+                        if ((_c = options.signal) === null || _c === void 0 ? void 0 : _c.aborted) {
                             throw err; // User cancelled
                         }
                         throw timeoutError(requestUrl, timeoutMs);
@@ -109,7 +113,7 @@ export function createHttp(config = {}) {
                     const text = await res.text();
                     return (text || undefined);
                 }
-                catch (_c) {
+                catch (_d) {
                     return undefined;
                 }
             }

package/dist/init.js

@@ -25,8 +25,10 @@ export function init(config) {
         }
     }
     if (!matchedPath) {
-        console.warn(`[tinyfx] No route matched for pathname: "${pathname}". ` +
-            "Check that a page file exists for this URL in src/pages/.");
+        if (__DEV__) {
+            console.warn(`[tinyfx] No route matched for pathname: "${pathname}". ` +
+                "Check that a page file exists for this URL in src/pages/.");
+        }
         return null;
     }
     initLifecycle();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinyfx/runtime",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Minimal frontend runtime — signals, DOM helpers, typed HTTP, DTO mapping",
   "type": "module",
   "main": "./dist/index.js",