sibujs 1.0.0-beta.1

package/dist/src/core/htmlIf.js

@@ -0,0 +1,18 @@
+// src/core/htmlIf.ts
+import { bindChildNode } from "../reactivity/bindChildNode";
+/**
+ * Conditionally mounts a node subtree based on a reactive predicate.
+ * When the condition is true, the render function is invoked and its result is displayed.
+ * When false, the subtree is removed.
+ *
+ * @param condition - Reactive predicate that returns a boolean.
+ * @param render - Function that returns the NodeChild to mount.
+ * @returns A Comment node serving as the anchor point.
+ */
+export function htmlIf(condition, render) {
+    const anchor = document.createComment("htmlIf");
+    bindChildNode(anchor, () => {
+        return condition() ? render() : null;
+    });
+    return anchor;
+}

package/dist/src/core/lazy.d.ts

@@ -0,0 +1,7 @@
+import type { NodeChild } from "./types";
+/**
+ * Creates a lazy-loaded component.
+ */
+export declare function lazy<T extends {}>(loader: () => Promise<{
+    default: () => NodeChild;
+}>): () => NodeChild | null;

package/dist/src/core/lazy.js

@@ -0,0 +1,16 @@
+import { useState } from "../reactivity/useState";
+/**
+ * Creates a lazy-loaded component.
+ */
+export function lazy(loader) {
+    const [ComponentSignal, setComponent] = useState(null);
+    let loading = false;
+    return function LazyComponent() {
+        if (!loading) {
+            loading = true;
+            loader().then(mod => setComponent(() => mod.default));
+        }
+        const Comp = ComponentSignal();
+        return Comp ? Comp() : null;
+    };
+}

package/dist/src/core/mount.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Mounts a root component into a DOM element.
+ *
+ * @param component Function that returns an HTMLElement
+ * @param container Target DOM element to append the result
+ */
+export declare function mount(component: () => HTMLElement, container: HTMLElement | null): void;

package/dist/src/core/mount.js

@@ -0,0 +1,12 @@
+/**
+ * Mounts a root component into a DOM element.
+ *
+ * @param component Function that returns an HTMLElement
+ * @param container Target DOM element to append the result
+ */
+export function mount(component, container) {
+    if (!container) {
+        throw new Error("Mount target element not found.");
+    }
+    container.appendChild(component());
+}

package/dist/src/core/slots.d.ts

@@ -0,0 +1,3 @@
+export type SlotFn = () => HTMLElement | string | number | null | undefined;
+export type Slots = Record<string, SlotFn>;
+export declare function getSlot(slots: Slots | undefined, name?: string): SlotFn | undefined;

package/dist/src/core/slots.js

@@ -0,0 +1,3 @@
+export function getSlot(slots, name = "default") {
+    return slots?.[name];
+}

package/dist/src/core/suspense.d.ts

@@ -0,0 +1,10 @@
+import type { NodeChild } from "./types";
+/**
+ * Suspense:
+ *  - Uses a DocumentFragment with anchor and optional static node.
+ *  - If fallback is function, schedules reactive updates via bindChildNode.
+ */
+export declare function Suspense(props: {
+    fallback: NodeChild | (() => NodeChild);
+    children: () => NodeChild | null;
+}): DocumentFragment;

package/dist/src/core/suspense.js

@@ -0,0 +1,33 @@
+import { bindChildNode } from "../reactivity/bindChildNode";
+/**
+ * Suspense:
+ *  - Uses a DocumentFragment with anchor and optional static node.
+ *  - If fallback is function, schedules reactive updates via bindChildNode.
+ */
+export function Suspense(props) {
+    const anchor = document.createComment("suspense");
+    const frag = document.createDocumentFragment();
+    frag.appendChild(anchor);
+    const initial = props.children();
+    const hasStaticFallback = typeof props.fallback !== "function";
+    if (initial != null) {
+        const node = initial instanceof Node ? initial : document.createTextNode(String(initial));
+        frag.appendChild(node);
+    }
+    else if (hasStaticFallback) {
+        const fb = props.fallback;
+        const node = fb instanceof Node ? fb : document.createTextNode(String(fb));
+        frag.appendChild(node);
+    }
+    if (!hasStaticFallback) {
+        queueMicrotask(() => {
+            bindChildNode(anchor, () => {
+                const next = props.children();
+                if (next != null)
+                    return next;
+                return props.fallback();
+            });
+        });
+    }
+    return frag;
+}

package/dist/src/core/tagFactory.d.ts

@@ -0,0 +1,13 @@
+import type { NodeChildren } from "./types";
+export interface TagProps {
+    id?: string;
+    class?: string;
+    style?: Record<string, string | number> | string;
+    children?: NodeChildren;
+    on?: Record<string, (ev: Event) => void>;
+    [attr: string]: any;
+}
+/**
+ * Factory for creating HTML elements with reactive props and children
+ */
+export declare const tagFactory: (tag: string) => (props?: TagProps) => HTMLElement;

package/dist/src/core/tagFactory.js

@@ -0,0 +1,86 @@
+import { bindAttribute } from "../reactivity/bindAttribute";
+import { bindChildNode } from "../reactivity/bindChildNode";
+// Applies inline styles or style object
+function applyStyle(el, style) {
+    if (!style)
+        return;
+    if (typeof style === "string") {
+        el.setAttribute("style", style);
+    }
+    else {
+        for (const [prop, val] of Object.entries(style)) {
+            const name = prop.replace(/[A-Z]/g, m => "-" + m.toLowerCase());
+            el.style.setProperty(name, String(val));
+        }
+    }
+}
+// Renders a single child: static or reactive
+function renderChild(child) {
+    if (child == null) {
+        return document.createTextNode("");
+    }
+    if (typeof child === "function") {
+        const placeholder = document.createComment("bind:child");
+        queueMicrotask(() => bindChildNode(placeholder, child));
+        return placeholder;
+    }
+    if (child instanceof Node) {
+        return child;
+    }
+    // string or number
+    return document.createTextNode(String(child));
+}
+/**
+ * Factory for creating HTML elements with reactive props and children
+ */
+export const tagFactory = (tag) => (props = {}) => {
+    const el = document.createElement(tag);
+    // Process props
+    for (const [key, value] of Object.entries(props)) {
+        if (value == null)
+            continue;
+        switch (key) {
+            case "id":
+                el.id = String(value);
+                break;
+            case "class":
+                el.className = String(value);
+                break;
+            case "style":
+                applyStyle(el, value);
+                break;
+            case "on":
+                {
+                    const handlers = value;
+                    for (const [ev, handler] of Object.entries(handlers || {})) {
+                        el.addEventListener(ev, handler);
+                    }
+                }
+                break;
+            case "children":
+                {
+                    const childs = Array.isArray(value) ? value : [value];
+                    for (const c of childs) {
+                        if (Array.isArray(c)) {
+                            for (const nested of c) {
+                                el.appendChild(renderChild(nested));
+                            }
+                        }
+                        else {
+                            el.appendChild(renderChild(c));
+                        }
+                    }
+                }
+                break;
+            default:
+                // Other attributes
+                if (typeof value === "function") {
+                    bindAttribute(el, key, value);
+                }
+                else {
+                    el.setAttribute(key, String(value));
+                }
+        }
+    }
+    return el;
+};

package/dist/src/core/test.d.ts

@@ -0,0 +1,11 @@
+type ErrorHandler = (error: unknown, context?: any) => void;
+/**
+ * Wraps any function in a try/catch block and optionally passes error to a handler.
+ * This is used internally by components or boundaries.
+ */
+export declare function catchError(fn: () => any, onError?: ErrorHandler): any;
+/**
+ * Sets a global error handler used by default if no onError is provided.
+ */
+export declare function setGlobalErrorHandler(handler: ErrorHandler): void;
+export {};

package/dist/src/core/test.js

@@ -0,0 +1,28 @@
+let globalErrorHandler = null;
+/**
+ * Wraps any function in a try/catch block and optionally passes error to a handler.
+ * This is used internally by components or boundaries.
+ */
+export function catchError(fn, onError) {
+    try {
+        return fn();
+    }
+    catch (err) {
+        if (onError) {
+            onError(err);
+        }
+        else if (globalErrorHandler) {
+            globalErrorHandler(err);
+        }
+        else {
+            console.error("Unhandled error in Sibu.catch:", err);
+        }
+        return null;
+    }
+}
+/**
+ * Sets a global error handler used by default if no onError is provided.
+ */
+export function setGlobalErrorHandler(handler) {
+    globalErrorHandler = handler;
+}

package/dist/src/core/types.d.ts

@@ -0,0 +1,2 @@
+export type NodeChild = HTMLElement | Text | Comment | (() => NodeChild) | null;
+export type NodeChildren = NodeChild | NodeChild[] | string | (() => string);

package/dist/src/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/core/useComputed.d.ts

@@ -0,0 +1,6 @@
+/**
+ * useComputed creates a derived reactive signal whose value updates when dependencies change.
+ * @param getter Function returning computed value based on reactive signals.
+ * @returns Getter function for the computed value.
+ */
+export declare function useComputed<T>(getter: () => T): () => T;

package/dist/src/core/useComputed.js

@@ -0,0 +1,30 @@
+import { track, recordDependency, notifySubscribers } from "../reactivity/track";
+/**
+ * useComputed creates a derived reactive signal whose value updates when dependencies change.
+ * @param getter Function returning computed value based on reactive signals.
+ * @returns Getter function for the computed value.
+ */
+export function useComputed(getter) {
+    // Initial value computation
+    let value = getter();
+    // Signal object representing this computed's identity
+    const computedSignal = {};
+    // Recompute function subscribed to dependency changes
+    const recompute = () => {
+        const next = getter();
+        if (Object.is(next, value))
+            return;
+        value = next;
+        notifySubscribers(computedSignal);
+    };
+    // Track dependencies and register recompute callback
+    track(recompute, recompute);
+    /**
+     * Getter for the computed value.
+     * Registers a dependency on this computed signal and returns the current value.
+     */
+    return function computedGetter() {
+        recordDependency(computedSignal);
+        return value;
+    };
+}

package/dist/src/core/useEffect.d.ts

@@ -0,0 +1,6 @@
+/**
+ * useEffect runs the provided effectFn immediately and re-runs it whenever
+ * any reactive dependency changes.
+ * Returns a cleanup function to stop further executions.
+ */
+export declare function useEffect(effectFn: () => void): () => void;

package/dist/src/core/useEffect.js

@@ -0,0 +1,23 @@
+import { track } from "../reactivity/track";
+/**
+ * useEffect runs the provided effectFn immediately and re-runs it whenever
+ * any reactive dependency changes.
+ * Returns a cleanup function to stop further executions.
+ */
+export function useEffect(effectFn) {
+    // Internal cleanup handle for previous subscription
+    let cleanupHandle = () => { };
+    // Subscriber function that re-schedules the effect when dependencies notify
+    const subscriber = () => {
+        // Cleanup previous subscriptions before re-running
+        cleanupHandle();
+        // Track the effect and update cleanupHandle
+        cleanupHandle = track(effectFn, subscriber);
+    };
+    // Initial execution and subscription
+    cleanupHandle = track(effectFn, subscriber);
+    // Return a function to cleanup and stop any further effect runs
+    return () => {
+        cleanupHandle();
+    };
+}

package/dist/src/core/useState.d.ts

@@ -0,0 +1,10 @@
+type SetState<T> = (next: T | ((prev: T) => T)) => void;
+type StateTuple<T> = [() => T, SetState<T>];
+/**
+ * useState creates a reactive signal that holds a value of type T.
+ * Returns a tuple: [getter, setter].
+ * - getter(): registers dependency and returns the current state value.
+ * - setter(next): updates the state and notifies subscribers if changed.
+ */
+export declare function useState<T>(initial: T): StateTuple<T>;
+export {};

package/dist/src/core/useState.js

@@ -0,0 +1,34 @@
+import { recordDependency, notifySubscribers } from "../reactivity/track";
+/**
+ * useState creates a reactive signal that holds a value of type T.
+ * Returns a tuple: [getter, setter].
+ * - getter(): registers dependency and returns the current state value.
+ * - setter(next): updates the state and notifies subscribers if changed.
+ */
+export function useState(initial) {
+    // Internal state container acts as the ReactiveSignal
+    const state = { value: initial };
+    /**
+     * Getter for the state value.
+     * Registers this call as a dependency on the current subscriber.
+     */
+    function get() {
+        recordDependency(state);
+        return state.value;
+    }
+    /**
+     * Setter for the state value.
+     * Accepts a new value or an updater function.
+     * Notifies subscribers only if the new value is different (Object.is).
+     */
+    function set(next) {
+        const newValue = typeof next === "function"
+            ? next(state.value)
+            : next;
+        if (Object.is(newValue, state.value))
+            return;
+        state.value = newValue;
+        notifySubscribers(state);
+    }
+    return [get, set];
+}

package/dist/src/core/useStore.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Creates a global store with reactive properties.
+ *
+ * @param initialState Initial state object
+ * @returns A tuple [store, actions]:
+ *  - store: Proxy object with reactive getters for each state property
+ *  - actions:
+ *      - setState: apply a partial patch or updater function
+ *      - reset: revert to initial state
+ */
+export declare function useStore<T extends object>(initialState: T): [
+    store: {
+        readonly [K in keyof T]: T[K];
+    },
+    actions: {
+        setState: (patch: Partial<T> | ((state: T) => T)) => void;
+        reset: () => void;
+    }
+];

package/dist/src/core/useStore.js

@@ -0,0 +1,53 @@
+import { useState } from "./useState";
+/**
+ * Creates a global store with reactive properties.
+ *
+ * @param initialState Initial state object
+ * @returns A tuple [store, actions]:
+ *  - store: Proxy object with reactive getters for each state property
+ *  - actions:
+ *      - setState: apply a partial patch or updater function
+ *      - reset: revert to initial state
+ */
+export function useStore(initialState) {
+    // Create individual signals for each key
+    const signals = {};
+    // Initialize signals
+    Object.keys(initialState).forEach((key) => {
+        const [getter, setter] = useState(initialState[key]);
+        signals[key] = [getter, setter];
+    });
+    // Proxy to expose reactive getters
+    const store = new Proxy({}, {
+        get(_, prop) {
+            if (prop in signals) {
+                const getter = signals[prop][0];
+                return getter();
+            }
+            return undefined;
+        },
+        set() {
+            throw new Error("Direct mutation of store is not allowed. Use actions.setState.");
+        },
+    });
+    // Actions
+    const setState = (patch) => {
+        const current = {};
+        Object.keys(signals).forEach((key) => {
+            current[key] = signals[key][0]();
+        });
+        const nextState = typeof patch === "function" ? patch(current) : patch;
+        Object.entries(nextState).forEach(([key, value]) => {
+            if (key in signals) {
+                signals[key][1](value);
+            }
+        });
+    };
+    const reset = () => {
+        Object.keys(initialState).forEach((key) => {
+            const setter = signals[key][1];
+            setter(initialState[key]);
+        });
+    };
+    return [store, { setState, reset }];
+}

package/dist/src/core/useWatch.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Watches a reactive getter and calls callback with (newValue, oldValue) when it changes.
+ *
+ * @param getter Function that returns the value to watch (reads reactive signals).
+ * @param callback Function called when the watched value changes.
+ * @returns Teardown function to cancel the watcher.
+ */
+export declare function useWatch<T>(getter: () => T, callback: (value: T, prev: T | undefined) => void): () => void;

package/dist/src/core/useWatch.js

@@ -0,0 +1,23 @@
+import { track } from "../reactivity/track";
+/**
+ * Watches a reactive getter and calls callback with (newValue, oldValue) when it changes.
+ *
+ * @param getter Function that returns the value to watch (reads reactive signals).
+ * @param callback Function called when the watched value changes.
+ * @returns Teardown function to cancel the watcher.
+ */
+export function useWatch(getter, callback) {
+    // Get initial value without registering dependencies
+    let oldValue = getter();
+    // Subscriber function for track
+    const subscriber = () => {
+        const newValue = getter();
+        if (newValue !== oldValue) {
+            callback(newValue, oldValue);
+            oldValue = newValue;
+        }
+    };
+    // Track dependencies and return teardown for unsubscription
+    const teardown = track(subscriber, subscriber);
+    return teardown;
+}

package/dist/src/plugins/i18n.d.ts

@@ -0,0 +1,6 @@
+type Translations = Record<string, string>;
+type Params = Record<string, string | number>;
+export declare function setLocale(locale: string): void;
+export declare function registerTranslations(locale: string, messages: Translations): void;
+export declare function t(key: string, params?: Params): string;
+export {};

package/dist/src/plugins/i18n.js

@@ -0,0 +1,16 @@
+import { useState } from "../core/useState";
+const [currentLocale, setLocaleInternal] = useState("en");
+const locales = {};
+export function setLocale(locale) {
+    setLocaleInternal(locale);
+}
+export function registerTranslations(locale, messages) {
+    locales[locale] = messages;
+}
+export function t(key, params) {
+    const locale = currentLocale();
+    const message = locales[locale]?.[key] || key;
+    return params
+        ? message.replace(/\{(\w+)\}/g, (_, p) => String(params[p] ?? ""))
+        : message;
+}