@tinyfx/runtime 0.1.0

package/README.md

@@ -0,0 +1,99 @@
+# @tinyfx/runtime
+
+> The minimal, browser-side runtime for tinyfx.
+
+A lightweight collection of helpers for reactivity, DOM manipulation, and typed HTTP communication. Designed to be used standalone or as part of the `tinyfx` build pipeline.
+
+## Features
+
+- **Signals** — Explicit reactivity without Proxies.
+- **DOM Helpers** — One-way bindings for text, attributes, and classes.
+- **Typed HTTP** — Minimal wrapper over `fetch` with response typing.
+- **Tiny** — No dependencies, tree-shakeable, and extremely fast.
+
+## Installation
+
+```sh
+npm install @tinyfx/runtime
+```
+
+## Usage
+
+### Signals (Reactivity)
+
+Signals provide a simple way to manage state that triggers effects when changed.
+
+```ts
+import { signal, effect } from "@tinyfx/runtime";
+
+const count = signal(0);
+
+// Runs immediately, and re-runs whenever count() changes
+effect(() => {
+  console.log("The count is:", count());
+});
+
+count.set(1); // logs: "The count is: 1"
+count.set(count() + 1); // logs: "The count is: 2"
+```
+
+### DOM Bindings
+
+Keep your JS decoupled from the DOM while maintaining reactive updates.
+
+```ts
+import { signal, bindText, bindClass, bindAttr } from "@tinyfx/runtime";
+
+const count = signal(0);
+const isActive = signal(false);
+
+const el = document.getElementById("counter");
+const btn = document.querySelector("button");
+
+bindText(el, () => `Count: ${count()}`);
+bindClass(btn, "active", isActive);
+bindAttr(btn, "disabled", () => count() > 10);
+```
+
+### Typed HTTP Client
+
+A thin wrapper over `fetch` that returns typed responses.
+
+```ts
+import { createHttp } from "@tinyfx/runtime";
+
+interface User {
+  id: number;
+  name: string;
+}
+
+const api = createHttp({ baseUrl: "/api" });
+
+// Fully typed response
+const users = await api.get<User[]>("/users");
+
+// POST with data
+await api.post("/users", { name: "Alice" });
+```
+
+## API Overview
+
+### Signals
+- `signal<T>(value: T): Signal<T>`
+- `effect(fn: () => void): void`
+
+### DOM
+- `bindText(el: HTMLElement, source: Signal<any> | (() => any)): void`
+- `bindAttr(el: HTMLElement, attr: string, source: Signal<any> | (() => any)): void`
+- `bindClass(el: HTMLElement, className: string, source: Signal<boolean> | (() => boolean)): void`
+
+### HTTP
+- `createHttp(config: HttpConfig): HttpClient`
+- `client.get<T>(url: string): Promise<T>`
+- `client.post<T>(url: string, data?: any): Promise<T>`
+- `client.put<T>(url: string, data?: any): Promise<T>`
+- `client.del<T>(url: string): Promise<T>`
+
+## License
+
+MIT

package/dist/dom.d.ts

@@ -0,0 +1,3 @@
+export declare function bindText(el: HTMLElement, get: () => any): void;
+export declare function bindAttr(el: HTMLElement, attr: string, get: () => string): void;
+export declare function bindClass(el: HTMLElement, cls: string, get: () => boolean): void;

package/dist/dom.js

@@ -0,0 +1,18 @@
+// @tinyfx/runtime — DOM helpers
+// Helpers for binding reactive state to the DOM.
+import { effect } from "./signals";
+export function bindText(el, get) {
+    effect(() => {
+        el.textContent = String(get());
+    });
+}
+export function bindAttr(el, attr, get) {
+    effect(() => {
+        el.setAttribute(attr, get());
+    });
+}
+export function bindClass(el, cls, get) {
+    effect(() => {
+        el.classList.toggle(cls, get());
+    });
+}

package/dist/http.d.ts

@@ -0,0 +1,10 @@
+export interface HttpConfig {
+    baseUrl?: string;
+    headers?: Record<string, string>;
+}
+export declare function createHttp(config?: HttpConfig): {
+    get: <T>(url: string) => Promise<T>;
+    post: <T>(url: string, body?: unknown) => Promise<T>;
+    put: <T>(url: string, body?: unknown) => Promise<T>;
+    del: <T>(url: string) => Promise<T>;
+};

package/dist/http.js

@@ -0,0 +1,38 @@
+// @tinyfx/runtime — HTTP client
+// Thin, typed wrapper over fetch.
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+export function createHttp(config = {}) {
+    var _a, _b;
+    const base = (_a = config.baseUrl) !== null && _a !== void 0 ? _a : "";
+    const defaultHeaders = (_b = config.headers) !== null && _b !== void 0 ? _b : {};
+    function request(method, url, body) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const headers = Object.assign({}, defaultHeaders);
+            if (body !== undefined) {
+                headers["Content-Type"] = "application/json";
+            }
+            const res = yield fetch(base + url, {
+                method,
+                headers,
+                body: body !== undefined ? JSON.stringify(body) : undefined,
+            });
+            if (!res.ok)
+                throw new Error(`${method} ${url}: ${res.status} ${res.statusText}`);
+            return res.json();
+        });
+    }
+    return {
+        get: (url) => request("GET", url),
+        post: (url, body) => request("POST", url, body),
+        put: (url, body) => request("PUT", url, body),
+        del: (url) => request("DELETE", url),
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { signal, effect, Signal } from "./signals";
+export { bindText, bindAttr, bindClass } from "./dom";
+export { createHttp } from "./http";
+export type { HttpConfig } from "./http";

package/dist/index.js

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

package/dist/signals.d.ts

@@ -0,0 +1,11 @@
+export declare class Signal<T> {
+    private value;
+    private subs;
+    constructor(v: T);
+    get(): T;
+    set(v: T): void;
+}
+export declare function signal<T>(v: T): (() => T) & {
+    set(v: T): void;
+};
+export declare function effect(fn: () => void): void;

package/dist/signals.js

@@ -0,0 +1,40 @@
+// @tinyfx/runtime — signals
+// Minimal, explicit reactivity — no proxies, no magic.
+const effectStack = [];
+export class Signal {
+    constructor(v) {
+        this.subs = new Set();
+        this.value = v;
+    }
+    get() {
+        const running = effectStack[effectStack.length - 1];
+        if (running) {
+            this.subs.add(running);
+        }
+        return this.value;
+    }
+    set(v) {
+        if (Object.is(v, this.value))
+            return;
+        this.value = v;
+        this.subs.forEach((fn) => fn());
+    }
+}
+export function signal(v) {
+    const s = new Signal(v);
+    const fn = () => s.get();
+    fn.set = (v) => s.set(v);
+    return fn;
+}
+export function effect(fn) {
+    const run = () => {
+        effectStack.push(run);
+        try {
+            fn();
+        }
+        finally {
+            effectStack.pop();
+        }
+    };
+    run();
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@tinyfx/runtime",
+  "version": "0.1.0",
+  "description": "Minimal frontend runtime — signals, DOM helpers, typed HTTP, DTO mapping",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./signals": "./dist/signals.js",
+    "./dom": "./dist/dom.js",
+    "./http": "./dist/http.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  },
+  "license": "MIT"
+}