@tinyfx/runtime 0.1.3 → 0.1.6

package/dist/di.d.ts

@@ -2,7 +2,7 @@
 export type Token<T> = (new (...args: any[]) => T) | symbol;
 /** Create a unique symbol token with a debug description. */
 export declare function createToken<T>(description: string): Token<T>;
-/** Context passed to every component's init() function. */
+/** Context passed to every component's mount() factory function. */
 export interface TinyFxContext {
     container: Container;
 }

package/dist/http/http.js

@@ -52,7 +52,7 @@ export function createHttp(config = {}) {
                 fetchOptions.signal = combinedSignal;
                 let res;
                 try {
-                    res = await fetch(base + requestUrl, fetchOptions);
+                    res = await fetch(requestUrl, fetchOptions);
                 }
                 catch (err) {
                     clearTimeout(timeoutId);

package/dist/index.d.ts

@@ -4,3 +4,8 @@ export { createHttp } from "./http/http";
 export type { HttpConfig } from "./http/data";
 export { Container, createToken } from "./di";
 export type { Token, TinyFxContext } from "./di";
+export { initRouter } from "./router/index";
+export { getParam } from "./router/params";
+export { onMount, onDestroy } from "./router/lifecycle";
+export { navigate, goBack } from "./router/navigate";
+export type { RouteMap, RouteMeta } from "./router/types";

package/dist/index.js

@@ -3,3 +3,8 @@ export { signal, effect, Signal } from "./signals";
 export { bindText, bindAttr, bindClass } from "./dom";
 export { createHttp } from "./http/http";
 export { Container, createToken } from "./di";
+// Router — hard file-based router
+export { initRouter } from "./router/index";
+export { getParam } from "./router/params";
+export { onMount, onDestroy } from "./router/lifecycle";
+export { navigate, goBack } from "./router/navigate";

package/dist/router/active-links.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Mark anchor tags whose `href` pathname matches `pathname` with
+ * `data-active="true"`, removing the attribute from all others.
+ *
+ * Only the pathname portion of each href is compared (query strings and
+ * fragments are ignored).
+ *
+ * @example
+ * // In a nav: <a href="/blog">Blog</a>
+ * // On the /blog page this element will get data-active="true"
+ * highlightActiveLinks("/blog");
+ */
+export declare function highlightActiveLinks(pathname: string): void;

package/dist/router/active-links.js

@@ -0,0 +1,31 @@
+// @tinyfx/runtime — active link highlighting
+/**
+ * Mark anchor tags whose `href` pathname matches `pathname` with
+ * `data-active="true"`, removing the attribute from all others.
+ *
+ * Only the pathname portion of each href is compared (query strings and
+ * fragments are ignored).
+ *
+ * @example
+ * // In a nav: <a href="/blog">Blog</a>
+ * // On the /blog page this element will get data-active="true"
+ * highlightActiveLinks("/blog");
+ */
+export function highlightActiveLinks(pathname) {
+    const links = document.querySelectorAll("a[href]");
+    links.forEach((link) => {
+        try {
+            // Resolve href against the current origin to normalise relative URLs
+            const url = new URL(link.getAttribute("href"), window.location.origin);
+            if (url.pathname === pathname) {
+                link.setAttribute("data-active", "true");
+            }
+            else {
+                link.removeAttribute("data-active");
+            }
+        }
+        catch (_a) {
+            // Ignore malformed / external hrefs
+        }
+    });
+}

package/dist/router/index.d.ts

@@ -0,0 +1,21 @@
+import type { RouteMap } from "./types";
+export type { RouteMap };
+/**
+ * Initialise the TinyFX router for the current page.
+ *
+ * Called automatically from the compiler-generated `tinyfx.gen.ts` on every
+ * page load.  Matches `window.location.pathname` against the compiled route
+ * map, resolves URL params, starts lifecycle hooks, and highlights active
+ * navigation links.
+ *
+ * @param routes - The route map emitted by `tinyfx build`.
+ *
+ * @example
+ * // tinyfx.gen.ts (auto-generated — do not edit)
+ * initRouter({
+ *   "/":          { page: "home",      path: "/" },
+ *   "/blog":      { page: "blog",      path: "/blog" },
+ *   "/blog/:slug":{ page: "blog-post", path: "/blog/:slug" },
+ * });
+ */
+export declare function initRouter(routes: RouteMap): void;

package/dist/router/index.js

@@ -0,0 +1,36 @@
+// @tinyfx/runtime — router entry point
+import { resolveParams } from "./params";
+import { initLifecycle } from "./lifecycle";
+import { highlightActiveLinks } from "./active-links";
+/**
+ * Initialise the TinyFX router for the current page.
+ *
+ * Called automatically from the compiler-generated `tinyfx.gen.ts` on every
+ * page load.  Matches `window.location.pathname` against the compiled route
+ * map, resolves URL params, starts lifecycle hooks, and highlights active
+ * navigation links.
+ *
+ * @param routes - The route map emitted by `tinyfx build`.
+ *
+ * @example
+ * // tinyfx.gen.ts (auto-generated — do not edit)
+ * initRouter({
+ *   "/":          { page: "home",      path: "/" },
+ *   "/blog":      { page: "blog",      path: "/blog" },
+ *   "/blog/:slug":{ page: "blog-post", path: "/blog/:slug" },
+ * });
+ */
+export function initRouter(routes) {
+    const pathname = window.location.pathname;
+    for (const pattern of Object.keys(routes)) {
+        if (resolveParams(pattern, pathname)) {
+            // Match found
+            initLifecycle();
+            highlightActiveLinks(pathname);
+            return;
+        }
+    }
+    // No route matched — log a warning and do nothing else.
+    console.warn(`[tinyfx] No route matched for pathname: "${pathname}". ` +
+        "Check that a page file exists for this URL in src/pages/.");
+}

package/dist/router/lifecycle.d.ts

@@ -0,0 +1,24 @@
+type LifecycleCallback = () => void;
+/**
+ * Register a callback to run when the page has mounted (DOM ready).
+ *
+ * - If the document is still loading, the callback runs after DOMContentLoaded.
+ * - If the document is already loaded, the callback runs immediately.
+ */
+export declare function onMount(fn: LifecycleCallback): void;
+/**
+ * Register a callback to run when the user navigates away from this page.
+ * Fires on the browser's `pagehide` event.
+ */
+export declare function onDestroy(fn: LifecycleCallback): void;
+/**
+ * Trigger all registered `onMount` callbacks.
+ * Called by `initRouter` after matching the current route.
+ */
+export declare function flushMount(): void;
+/**
+ * Wire up registered `onDestroy` callbacks to the `pagehide` event.
+ * Called by `initRouter` after matching the current route.
+ */
+export declare function initLifecycle(): void;
+export {};

package/dist/router/lifecycle.js

@@ -0,0 +1,40 @@
+// @tinyfx/runtime — page lifecycle hooks
+const mountCallbacks = [];
+const destroyCallbacks = [];
+/**
+ * Register a callback to run when the page has mounted (DOM ready).
+ *
+ * - If the document is still loading, the callback runs after DOMContentLoaded.
+ * - If the document is already loaded, the callback runs immediately.
+ */
+export function onMount(fn) {
+    mountCallbacks.push(fn);
+}
+/**
+ * Register a callback to run when the user navigates away from this page.
+ * Fires on the browser's `pagehide` event.
+ */
+export function onDestroy(fn) {
+    destroyCallbacks.push(fn);
+}
+/**
+ * Trigger all registered `onMount` callbacks.
+ * Called by `initRouter` after matching the current route.
+ */
+export function flushMount() {
+    const run = () => mountCallbacks.forEach((fn) => fn());
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", run, { once: true });
+    }
+    else {
+        run();
+    }
+}
+/**
+ * Wire up registered `onDestroy` callbacks to the `pagehide` event.
+ * Called by `initRouter` after matching the current route.
+ */
+export function initLifecycle() {
+    flushMount();
+    window.addEventListener("pagehide", () => destroyCallbacks.forEach((fn) => fn()), { once: true });
+}

package/dist/router/navigate.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Navigate to the given path.
+ * This is a full browser navigation — not a DOM swap.
+ *
+ * @example
+ * navigate("/blog/hello-world");
+ */
+export declare function navigate(path: string): void;
+/**
+ * Go back one step in the browser history.
+ */
+export declare function goBack(): void;

package/dist/router/navigate.js

@@ -0,0 +1,18 @@
+// @tinyfx/runtime — navigation helpers
+// Hard router: navigation is always a real browser page load.
+/**
+ * Navigate to the given path.
+ * This is a full browser navigation — not a DOM swap.
+ *
+ * @example
+ * navigate("/blog/hello-world");
+ */
+export function navigate(path) {
+    window.location.href = path;
+}
+/**
+ * Go back one step in the browser history.
+ */
+export function goBack() {
+    window.history.go(-1);
+}

package/dist/router/params.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Match `pattern` (e.g. "/blog/:slug") against `pathname` (e.g. "/blog/hello").
+ *
+ * Returns true if they match, and stores any `:param` captures in the
+ * module-level store so `getParam()` can retrieve them.
+ *
+ * Static segments must match exactly; `:param` segments match any non-empty
+ * path segment.
+ */
+export declare function resolveParams(pattern: string, pathname: string): boolean;
+/**
+ * Retrieve a URL parameter resolved for the current page.
+ *
+ * @example
+ * // On the page with route "/blog/:slug" and URL "/blog/hello-world"
+ * getParam("slug"); // → "hello-world"
+ */
+export declare function getParam(key: string): string | undefined;

package/dist/router/params.js

@@ -0,0 +1,42 @@
+// @tinyfx/runtime — route param resolution
+/** Module-level store for the current page's resolved params. */
+let currentParams = {};
+/**
+ * Match `pattern` (e.g. "/blog/:slug") against `pathname` (e.g. "/blog/hello").
+ *
+ * Returns true if they match, and stores any `:param` captures in the
+ * module-level store so `getParam()` can retrieve them.
+ *
+ * Static segments must match exactly; `:param` segments match any non-empty
+ * path segment.
+ */
+export function resolveParams(pattern, pathname) {
+    const patternParts = pattern.split("/").filter(Boolean);
+    const pathParts = pathname.split("/").filter(Boolean);
+    if (patternParts.length !== pathParts.length)
+        return false;
+    const captured = {};
+    for (let i = 0; i < patternParts.length; i++) {
+        const seg = patternParts[i];
+        if (seg.startsWith(":")) {
+            // Dynamic segment — capture the value
+            captured[seg.slice(1)] = decodeURIComponent(pathParts[i]);
+        }
+        else if (seg !== pathParts[i]) {
+            // Static segment mismatch
+            return false;
+        }
+    }
+    currentParams = captured;
+    return true;
+}
+/**
+ * Retrieve a URL parameter resolved for the current page.
+ *
+ * @example
+ * // On the page with route "/blog/:slug" and URL "/blog/hello-world"
+ * getParam("slug"); // → "hello-world"
+ */
+export function getParam(key) {
+    return currentParams[key];
+}

package/dist/router/types.d.ts

@@ -0,0 +1,9 @@
+/** Metadata for a single route, produced by the compiler. */
+export interface RouteMeta {
+    /** The page name, derived from the source filename. */
+    page: string;
+    /** The declared URL pattern, e.g. "/blog/:slug". */
+    path: string;
+}
+/** The full route map emitted by `tinyfx build` into tinyfx.gen.ts. */
+export type RouteMap = Record<string, RouteMeta>;

package/dist/router/types.js

@@ -0,0 +1,2 @@
+// @tinyfx/runtime — router types
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinyfx/runtime",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "description": "Minimal frontend runtime — signals, DOM helpers, typed HTTP, DTO mapping",
   "type": "module",
   "main": "./dist/index.js",
@@ -10,7 +10,8 @@
     "./signals": "./dist/signals.js",
     "./dom": "./dist/dom.js",
     "./http": "./dist/http.js",
-    "./di": "./dist/di.js"
+    "./di": "./dist/di.js",
+    "./router": "./dist/router/index.js"
   },
   "files": [
     "dist"