@tinyfx/runtime 0.1.0 → 0.1.3

package/README.md

@@ -9,6 +9,7 @@ A lightweight collection of helpers for reactivity, DOM manipulation, and typed
 - **Signals** — Explicit reactivity without Proxies.
 - **DOM Helpers** — One-way bindings for text, attributes, and classes.
 - **Typed HTTP** — Minimal wrapper over `fetch` with response typing.
+- **DI Container** — Simple `provide()`/`inject()` registry for app services.
 - **Tiny** — No dependencies, tree-shakeable, and extremely fast.
 
 ## Installation
@@ -76,6 +77,82 @@ const users = await api.get<User[]>("/users");
 await api.post("/users", { name: "Alice" });
 ```
 
+### DI Container (provide / inject)
+
+TinyFX includes a small dependency injection container to avoid importing singleton instances everywhere.
+
+Import it from `@tinyfx/runtime/di`:
+
+```ts
+import { Container } from "@tinyfx/runtime/di";
+
+class Config {
+  constructor(public baseUrl: string) {}
+}
+
+const container = new Container();
+container.provide(Config, new Config("/api"));
+
+const cfg = container.inject(Config);
+console.log(cfg.baseUrl);
+```
+
+#### Using DI with tinyfx components
+
+When you use the tinyfx compiler, the generated glue calls your component behavior as:
+
+```ts
+init(el, { container })
+```
+
+So your component can inject services without importing global singletons:
+
+```ts
+import type { TinyFxContext } from "@tinyfx/runtime/di";
+import { HttpService } from "../lib/http.service";
+
+export function init(el: HTMLElement, ctx: TinyFxContext) {
+  const http = ctx.container.inject(HttpService);
+  http.getWeather().then((text) => {
+    el.textContent = text;
+  });
+}
+```
+
+#### Example: service that uses the HTTP helper
+
+```ts
+// src/lib/http.service.ts
+import { createHttp } from "@tinyfx/runtime";
+
+export class HttpService {
+  private readonly http;
+
+  constructor(baseUrl: string) {
+    this.http = createHttp({ baseUrl });
+  }
+
+  getWeather() {
+    // wttr.in can return plain text; your wrapper returns text when not JSON.
+    return this.http.get<string>("");
+  }
+}
+```
+
+```ts
+// src/main.ts
+import { Container } from "@tinyfx/runtime/di";
+import { setupComponents } from "./tinyfx.gen";
+import { HttpService } from "./lib/http.service";
+
+const container = new Container();
+container.provide(HttpService, new HttpService("https://wttr.in/tunisa"));
+
+document.addEventListener("DOMContentLoaded", () => {
+  setupComponents(container);
+});
+```
+
 ## API Overview
 
 ### Signals
@@ -94,6 +171,13 @@ await api.post("/users", { name: "Alice" });
 - `client.put<T>(url: string, data?: any): Promise<T>`
 - `client.del<T>(url: string): Promise<T>`
 
+### DI
+- `new Container()`
+- `container.provide(token, instance)`
+- `container.inject(token)`
+- `createToken<T>(description: string): symbol`
+- `TinyFxContext` (passed to component init via tinyfx glue)
+
 ## License
 
 MIT

package/dist/di.d.ts

@@ -0,0 +1,23 @@
+/** A token used to register and retrieve a service from the container. */
+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. */
+export interface TinyFxContext {
+    container: Container;
+}
+/**
+ * Lightweight DI container.
+ *
+ * Register services at bootstrap time with `provide()`,
+ * then retrieve them inside components via `inject()`.
+ */
+export declare class Container {
+    private readonly services;
+    /** Register a service instance under the given token. */
+    provide<T>(token: Token<T>, instance: T): void;
+    /** Retrieve a service instance. Throws if not registered. */
+    inject<T>(token: Token<T>): T;
+    /** Check whether a token has been provided. */
+    has<T>(token: Token<T>): boolean;
+}

package/dist/di.js

@@ -0,0 +1,32 @@
+// @tinyfx/runtime — Dependency Injection container
+/** Create a unique symbol token with a debug description. */
+export function createToken(description) {
+    return Symbol(description);
+}
+/**
+ * Lightweight DI container.
+ *
+ * Register services at bootstrap time with `provide()`,
+ * then retrieve them inside components via `inject()`.
+ */
+export class Container {
+    constructor() {
+        this.services = new Map();
+    }
+    /** Register a service instance under the given token. */
+    provide(token, instance) {
+        this.services.set(token, instance);
+    }
+    /** Retrieve a service instance. Throws if not registered. */
+    inject(token) {
+        var _a;
+        if (!this.services.has(token)) {
+            throw new Error(`TinyFX: No provider for ${typeof token === "symbol" ? token.toString() : (_a = token.name) !== null && _a !== void 0 ? _a : token}`);
+        }
+        return this.services.get(token);
+    }
+    /** Check whether a token has been provided. */
+    has(token) {
+        return this.services.has(token);
+    }
+}

package/dist/http/data.d.ts

@@ -0,0 +1,44 @@
+export declare class HttpError extends Error {
+    readonly status: number;
+    readonly statusText: string;
+    readonly url: string;
+    readonly method: string;
+    readonly response?: Response | undefined;
+    constructor(status: number, statusText: string, url: string, method: string, response?: Response | undefined);
+}
+export declare class HttpTimeoutError extends Error {
+    readonly url: string;
+    readonly timeout: number;
+    constructor(url: string, timeout: number);
+}
+export declare class HttpParseError extends Error {
+    readonly url: string;
+    constructor(message: string, url: string);
+}
+export interface RequestInterceptor {
+    (url: string, options: RequestInit): Promise<{
+        url: string;
+        options: RequestInit;
+    }> | {
+        url: string;
+        options: RequestInit;
+    };
+}
+export interface ResponseInterceptor {
+    (response: Response): Promise<Response> | Response;
+}
+export interface HttpConfig {
+    baseUrl?: string;
+    headers?: Record<string, string>;
+    timeout?: number;
+    retries?: number;
+    retryDelay?: number;
+    requestInterceptors?: RequestInterceptor[];
+    responseInterceptors?: ResponseInterceptor[];
+}
+export interface RequestOptions {
+    headers?: Record<string, string>;
+    timeout?: number;
+    signal?: AbortSignal;
+    params?: Record<string, string | number | boolean>;
+}

package/dist/http/data.js

@@ -0,0 +1,26 @@
+export class HttpError extends Error {
+    constructor(status, statusText, url, method, response) {
+        super(`HTTP ${status} ${statusText}: ${method} ${url}`);
+        this.status = status;
+        this.statusText = statusText;
+        this.url = url;
+        this.method = method;
+        this.response = response;
+        this.name = "HttpError";
+    }
+}
+export class HttpTimeoutError extends Error {
+    constructor(url, timeout) {
+        super(`Request timeout after ${timeout}ms: ${url}`);
+        this.url = url;
+        this.timeout = timeout;
+        this.name = "HttpTimeoutError";
+    }
+}
+export class HttpParseError extends Error {
+    constructor(message, url) {
+        super(message);
+        this.url = url;
+        this.name = "HttpParseError";
+    }
+}

package/dist/http/helper.d.ts

@@ -0,0 +1,2 @@
+export declare function buildUrl(url: string, base: string, params?: Record<string, string | number | boolean>): string;
+export declare function sleep(ms: number): Promise<void>;

package/dist/http/helper.js

@@ -0,0 +1,13 @@
+export function buildUrl(url, base, params) {
+    const fullUrl = base + url;
+    if (!params || Object.keys(params).length === 0)
+        return fullUrl;
+    const urlObj = new URL(fullUrl, typeof window !== 'undefined' ? window.location.href : 'http://localhost');
+    Object.entries(params).forEach(([key, value]) => {
+        urlObj.searchParams.append(key, String(value));
+    });
+    return urlObj.toString().replace(urlObj.origin, '');
+}
+export async function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}

package/dist/http/http.d.ts

@@ -0,0 +1,9 @@
+import { HttpConfig, RequestOptions } from "./data";
+export declare function createHttp(config?: HttpConfig): {
+    get: <T>(url: string, options?: RequestOptions) => Promise<T>;
+    post: <T>(url: string, body?: unknown, options?: RequestOptions) => Promise<T>;
+    put: <T>(url: string, body?: unknown, options?: RequestOptions) => Promise<T>;
+    patch: <T>(url: string, body?: unknown, options?: RequestOptions) => Promise<T>;
+    del: <T>(url: string, options?: RequestOptions) => Promise<T>;
+    delete: <T>(url: string, options?: RequestOptions) => Promise<T>;
+};

package/dist/http/http.js

@@ -0,0 +1,124 @@
+// @tinyfx/runtime — HTTP client
+// Thin, typed wrapper over fetch.
+import { HttpError, HttpParseError, HttpTimeoutError } from "./data";
+import { buildUrl, sleep } from "./helper";
+export function createHttp(config = {}) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const base = (_a = config.baseUrl) !== null && _a !== void 0 ? _a : "";
+    const defaultHeaders = (_b = config.headers) !== null && _b !== void 0 ? _b : {};
+    const defaultTimeout = (_c = config.timeout) !== null && _c !== void 0 ? _c : 30000;
+    const maxRetries = (_d = config.retries) !== null && _d !== void 0 ? _d : 0;
+    const retryDelay = (_e = config.retryDelay) !== null && _e !== void 0 ? _e : 1000;
+    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;
+        const fullUrl = buildUrl(url, base, options.params);
+        const timeoutMs = (_a = options.timeout) !== null && _a !== void 0 ? _a : defaultTimeout;
+        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"]) {
+                    headers["Content-Type"] = "application/json";
+                }
+                let fetchOptions = {
+                    method,
+                    headers,
+                    body: body !== undefined ? JSON.stringify(body) : undefined,
+                    signal: options.signal,
+                };
+                let requestUrl = fullUrl;
+                // Apply request interceptors
+                for (const interceptor of requestInterceptors) {
+                    const result = await interceptor(requestUrl, fetchOptions);
+                    requestUrl = result.url;
+                    fetchOptions = result.options;
+                }
+                // Create timeout controller
+                const timeoutController = new AbortController();
+                const timeoutId = setTimeout(() => timeoutController.abort(), timeoutMs);
+                // Combine signals if user provided one
+                let combinedSignal = timeoutController.signal;
+                if (options.signal) {
+                    const combinedController = new AbortController();
+                    const abortHandler = () => combinedController.abort();
+                    options.signal.addEventListener("abort", abortHandler, { once: true });
+                    timeoutController.signal.addEventListener("abort", abortHandler, { once: true });
+                    combinedSignal = combinedController.signal;
+                }
+                fetchOptions.signal = combinedSignal;
+                let res;
+                try {
+                    res = await fetch(base + requestUrl, fetchOptions);
+                }
+                catch (err) {
+                    clearTimeout(timeoutId);
+                    if (err instanceof Error && err.name === "AbortError") {
+                        if ((_b = options.signal) === null || _b === void 0 ? void 0 : _b.aborted) {
+                            throw err; // User cancelled
+                        }
+                        throw new HttpTimeoutError(requestUrl, timeoutMs);
+                    }
+                    throw err;
+                }
+                finally {
+                    clearTimeout(timeoutId);
+                }
+                // Apply response interceptors
+                for (const interceptor of responseInterceptors) {
+                    res = await interceptor(res);
+                }
+                if (!res.ok) {
+                    throw new HttpError(res.status, res.statusText, requestUrl, method, res);
+                }
+                // Parse response based on content type
+                const contentType = res.headers.get("content-type") || "";
+                if (contentType.includes("application/json")) {
+                    try {
+                        const text = await res.text();
+                        if (!text || text.trim().length === 0) {
+                            return undefined;
+                        }
+                        return JSON.parse(text);
+                    }
+                    catch (err) {
+                        throw new HttpParseError(`Failed to parse JSON response: ${err instanceof Error ? err.message : "Unknown error"}`, requestUrl);
+                    }
+                }
+                if (contentType.includes("text/")) {
+                    return (await res.text());
+                }
+                // For other content types, try to read as text
+                try {
+                    const text = await res.text();
+                    return (text || undefined);
+                }
+                catch (_c) {
+                    return undefined;
+                }
+            }
+            catch (err) {
+                // Retry logic for network errors or 5xx errors
+                const shouldRetry = attempts < maxAttempts &&
+                    (!(err instanceof HttpError) || (err.status >= 500 && err.status < 600));
+                if (shouldRetry) {
+                    await sleep(retryDelay * attempts);
+                    continue;
+                }
+                throw err;
+            }
+        }
+        throw new Error("Max retries exceeded");
+    }
+    return {
+        get: (url, options) => request("GET", url, undefined, options),
+        post: (url, body, options) => request("POST", url, body, options),
+        put: (url, body, options) => request("PUT", url, body, options),
+        patch: (url, body, options) => request("PATCH", url, body, options),
+        del: (url, options) => request("DELETE", url, undefined, options),
+        delete: (url, options) => request("DELETE", url, undefined, options),
+    };
+}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { signal, effect, Signal } from "./signals";
 export { bindText, bindAttr, bindClass } from "./dom";
-export { createHttp } from "./http";
-export type { HttpConfig } from "./http";
+export { createHttp } from "./http/http";
+export type { HttpConfig } from "./http/data";
+export { Container, createToken } from "./di";
+export type { Token, TinyFxContext } from "./di";

package/dist/index.js

@@ -1,4 +1,5 @@
 // @tinyfx/runtime — barrel export
 export { signal, effect, Signal } from "./signals";
 export { bindText, bindAttr, bindClass } from "./dom";
-export { createHttp } from "./http";
+export { createHttp } from "./http/http";
+export { Container, createToken } from "./di";

package/package.json

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