Mite/src/Mite.js

/**
 * Signal
 *
 * Creates a signal for reactive state management
 *
 * @param {any} value - Initial value for the signal
 *
 * @returns {Object} Signal object with getter, setter, and subscription methods
 */
function signal(value) {
    const subscribers = new Set();
    return {
        // gets current signal value
        get value() {
            return value;
        },

        // sets a new value for the signal, notifying all subscribers
        set value(newValue) {
            value = newValue;
            subscribers.forEach(fn => fn());
        },

        // subscribe to value changes
        subscribe(fn) {
            subscribers.add(fn);
            return () => subscribers.delete(fn);
        }
    };
}

export class Mite {
    constructor(selector, options) {
        this.root = document.querySelector(selector);
        if (!this.root) throw new Error(`Element ${selector} not found`);

        this.data = {};
        for (const key in options.data) {
            this.data[key] = signal(options.data[key]);
        }

        this.methods = options || {};
        this.lifecycle = {
            mounted: options.mounted || (() => {}),
            unmounted: options.unmounted || (() => {})
        };

        for (const key in this.methods) {
            if (typeof this.methods[key] === "function") {
                this.methods[key] = this.methods[key].bind(this);
            }
        }

        this.template = this.root.cloneNode(true);
        this.bindings = new Map();

        this.render();
        this.lifecycle.mounted.call(this);
    }

    render() {
        this.bindings.forEach(binding => binding.forEach(b => b.unsubscribe?.()));
        this.bindings.clear();

        const fragment = this.template.cloneNode(true);
        this.root.innerHTML = "";
        this.root.appendChild(fragment);

        this.scanAndBind(this.root);

        for (const key in this.data) {
            this.update(key);
        }
    }

    scanAndBind(root) {
        const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
        let node;
        while ((node = walker.nextNode())) {
            if (node.nodeType === Node.TEXT_NODE && node.textContent.includes("{")) {
                const matches = node.textContent.match(/{(\w+)}/g);
                if (matches) {
                    matches.forEach(token => {
                        const key = token.slice(1, -1);
                        if (this.data[key]) {
                            if (!this.bindings.has(key)) this.bindings.set(key, []);
                            const updateFn = () => this.update(key);
                            const unsubscribe = this.data[key].subscribe(updateFn);
                            this.bindings.get(key).push({ node, type: "text", original: node.textContent, unsubscribe });
                        }
                    });
                }
            } else if (node.nodeType === Node.ELEMENT_NODE) {
                for (const attr of node.attributes) {
                    const matches = attr.value.match(/{(\w+)}/g);
                    if (matches) {
                        if (attr.name.startsWith("@")) {
                            const eventName = attr.name.slice(1);
                            const methodName = attr.value.slice(1, -1);
                            if (this.methods[methodName]) {
                                node.addEventListener(eventName, this.methods[methodName]);
                            }
                        } else {
                            matches.forEach(token => {
                                const key = token.slice(1, -1);
                                if (this.data[key]) {
                                    if (!this.bindings.has(key)) this.bindings.set(key, []);
                                    const updateFn = () => this.update(key);
                                    const unsubscribe = this.data[key].subscribe(updateFn);
                                    this.bindings.get(key).push({ node, type: "attr", attrName: attr.name, original: attr.value, unsubscribe });
                                }
                            });
                        }
                    }
                }

                const rif = node.getAttribute("r-if");
                if (rif && rif.match(/{(\w+)}$/)) {
                    const key = rif.slice(1, -1);
                    if (this.data[key]) {
                        if (!this.bindings.has(key)) this.bindings.set(key, []);
                        const updateFn = () => this.update(key);
                        const unsubscribe = this.data[key].subscribe(updateFn);
                        this.bindings.get(key).push({ node, type: "if", unsubscribe });
                    }
                }

                const reach = node.getAttribute("r-each");
                if (reach) {
                    const match = reach.match(/{(.+?)}/);
                    if (!match) {
                        console.error(`Invalid r-each syntax: ${reach}`);
                        continue;
                    }
                    const content = match[1];

                    const parts = content.split(" in ");
                    if (parts.length !== 2) {
                        console.error(`Invalid r-each split on " in ": ${content}, parts: ${parts}`);
                        continue;
                    }
                    let [names, listName] = parts;

                    names = names.trim();
                    listName = listName.trim();
                    const nameParts = names.split(",").map(part => part.trim());
                    const itemName = nameParts[0];
                    const indexName = nameParts.length > 1 ? nameParts[1] : undefined;

                    if (this.data[listName]) {
                        if (!this.bindings.has(listName)) this.bindings.set(listName, []);
                        const updateFn = () => this.update(listName);
                        const unsubscribe = this.data[listName].subscribe(updateFn);
                        this.bindings.get(listName).push({
                            node,
                            type: "each",
                            itemName,
                            indexName,
                            unsubscribe,
                            originalReach: reach,
                            parentSelector: node.parentNode.tagName.toLowerCase()
                        });
                    } else {
                        console.error(`data key not found: ${listName}`);
                    }
                }
            }
        }
    }

    update(key) {
        const bindings = this.bindings.get(key) || [];
        bindings.forEach(binding => {
            // Remove the parentNode check for "each" bindings since we use parentSelector
            if (!binding.node) return;

            switch (binding.type) {
                case "text":
                    if (!binding.node.parentNode) return;
                    binding.node.textContent = binding.original.replace(/{(\w+)}/g, (_, k) => {
                        return this.data[k] ? this.data[k].value : `{${k}}`;
                    });
                    break;

                case "attr":
                    if (!binding.node.parentNode) return;
                    binding.node.setAttribute(binding.attrName, binding.original.replace(/{(\w+)}/g, (_, k) => {
                        return this.data[k] ? this.data[k].value : `{${k}}`;
                    }));
                    break;

                case "if":
                    if (!binding.node.parentNode) return;
                    binding.node.style.display = this.data[key].value ? "" : "none";
                    break;

                case "each": {
                    const parent = this.root.querySelector(binding.parentSelector);
                    if (!parent) {
                        console.error(`Parent node (${binding.parentSelector}) not found for r-each="${binding.originalReach}"`);
                        return;
                    }
                    const template = this.template.querySelector(`[r-each="${binding.originalReach}"]`);
                    if (!template) {
                        console.error(`Template not found for r-each="${binding.originalReach}"`);
                        return;
                    }
                    const items = this.data[key].value || [];

                    parent.innerHTML = "";

                    items.forEach((item, index) => {
                        const clone = template.cloneNode(true);
                        clone.removeAttribute("r-each");
                        const walker = document.createTreeWalker(clone, NodeFilter.SHOW_TEXT);
                        let textNode;
                        while ((textNode = walker.nextNode())) {
                            if (textNode.textContent.includes("{")) {
                                textNode.textContent = textNode.textContent.replace(/{(\w+)}/g, (_, k) => {
                                    if (k === binding.itemName) return item;
                                    if (k === binding.indexName) return index;
                                    return this.data[k] ? this.data[k].value : `{${k}}`;
                                });
                            }
                        }
                        const eventElements = clone.querySelectorAll("[\\@click]");
                        eventElements.forEach(el => {
                            const clickAttr = el.getAttribute("@click");
                            if (clickAttr && clickAttr.match(/{(\w+),\s*(\w+)}/)) {
                                const [, methodName, param] = clickAttr.match(/{(\w+),\s*(\w+)}/);
                                if (this.methods[methodName] && param === binding.indexName) {
                                    el.addEventListener("click", (e) => this.methods[methodName](e, index));
                                }
                            }
                        });
                        parent.appendChild(clone);
                    });
                    break;
                }
            }
        });
    }

    destroy() {
        this.lifecycle.unmounted.call(this);
        this.bindings.forEach(binding => binding.forEach(b => b.unsubscribe?.()));
        this.root.innerHTML = this.template.innerHTML;
    }
}

export default Mite;