@tinyfx/runtime 0.1.2 → 0.1.4

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/http/helper.d.ts

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

@@ -1,5 +1,4 @@
-"use strict";
-function buildUrl(url, base, params) {
+export function buildUrl(url, base, params) {
     const fullUrl = base + url;
     if (!params || Object.keys(params).length === 0)
         return fullUrl;
@@ -9,6 +8,6 @@ function buildUrl(url, base, params) {
     });
     return urlObj.toString().replace(urlObj.origin, '');
 }
-async function sleep(ms) {
+export async function sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }

package/dist/http/http.js

@@ -1,6 +1,7 @@
 // @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 : "";
@@ -51,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/package.json

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