rumious 2.0.2 → 2.1.1

package/dist/app/app.js

@@ -0,0 +1,20 @@
+import { RumiousRenderContext, render } from '../render/index.js';
+export class RumiousApp {
+    config;
+    modules = [];
+    context = new RumiousRenderContext(this, this);
+    constructor(config) {
+        this.config = config;
+    }
+    addModule(ModuleClass, options) {
+        const instance = ModuleClass.init(this, options);
+        this.modules.push(instance);
+        return instance;
+    }
+    render(content) {
+        render(content, this.config.root, this.context);
+    }
+}
+export function createApp(config) {
+    return new RumiousApp(config);
+}

package/dist/app/index.js

@@ -0,0 +1 @@
+export * from './app.js';

package/dist/component/component.js

@@ -0,0 +1,38 @@
+import { RumiousRenderContext, render, createViewControl } from '../render/index.js';
+export class RumiousComponent {
+    props;
+    app;
+    element;
+    context;
+    slot = null;
+    static tagName = 'rumious-component';
+    constructor() { }
+    createViewControl() {
+        return createViewControl();
+    }
+    mountTo(template, target) {
+        return render(template, target, this.context);
+    }
+    prepare(props, context, element) {
+        this.app = context.app;
+        this.element = element;
+        this.props = props;
+        this.context = new RumiousRenderContext(context.app, this);
+    }
+    template() {
+        throw new Error(`RumiousRenderError: Cannot render empty component !`);
+    }
+    requestRender() {
+        let template = this.template();
+        render(template, this.element, this.context);
+    }
+    remove() {
+        this.element.remove();
+    }
+    onCreate() { }
+    onRender() { }
+    onDestroy() { }
+    beforeRender() { }
+}
+export class Fragment extends RumiousComponent {
+}

package/dist/component/element.js

@@ -0,0 +1,50 @@
+export class RumiousComponentElement extends HTMLElement {
+    component;
+    props;
+    context;
+    instance;
+    slotTempl = null;
+    constructor() {
+        super();
+    }
+    setContext(context) {
+        this.context = context;
+    }
+    async connectedCallback() {
+        let instance = new this.component();
+        this.instance = instance;
+        this.instance.slot = this.slotTempl;
+        instance.prepare(this.props, this.context, this);
+        instance.onCreate();
+        await instance.beforeRender();
+        instance.requestRender();
+        instance.onRender();
+    }
+    disconnectedCallback() {
+        this.instance.onDestroy();
+    }
+    setSlot(templ) {
+        this.slotTempl = templ;
+    }
+}
+export function createComponentElement(context, component, props) {
+    if (!window.customElements.get(component.tagName)) {
+        window.customElements.define(component.tagName, class extends RumiousComponentElement {
+        });
+    }
+    const element = document.createElement(component.tagName);
+    element.component = component;
+    element.props = props;
+    element.context = context;
+    return [element];
+}
+export function renderComponent(component, props) {
+    if (!window.customElements.get(component.tagName)) {
+        window.customElements.define(component.tagName, class extends RumiousComponentElement {
+        });
+    }
+    const element = document.createElement(component.tagName);
+    element.component = component;
+    element.props = props;
+    return element;
+}

package/dist/component/index.js

@@ -0,0 +1,2 @@
+export * from './component.js';
+export * from './element.js';

package/dist/context/context.d.ts

@@ -0,0 +1,11 @@
+export declare class RumiousContext<T extends {}> {
+    values: T;
+    events: Record<string, Set<(...args: any[]) => void>>;
+    constructor(values: T);
+    set<K extends keyof T>(key: K, value: T[K]): void;
+    get<K extends keyof T>(key: K): T[K];
+    emit(event: string, ...args: any[]): void;
+    on(event: string, fn: (...args: any[]) => void): void;
+    off(event: string, fn?: (...args: any[]) => void): void;
+}
+export declare function createContext<T extends {}>(values: T): RumiousContext<T>;

package/dist/context/index.d.ts

@@ -0,0 +1 @@
+export * from "./context.js";

package/dist/global.js

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

package/dist/index.d.ts

@@ -8,3 +8,4 @@ export * from './component/index.js';
 export * from './ref/index.js';
 export * from './jsx/index.js';
 export * from './module/index.js';
+export * from './context/index.js';

package/dist/index.js

@@ -303,6 +303,9 @@ class RumiousState {
     toJSON() {
         return JSON.stringify(this.value);
     }
+    equal(value) {
+        return value === this.value;
+    }
     trigger() {
         this.reactor?.notify({
             type: 'set',
@@ -402,6 +405,45 @@ function createListState(values) {
     return new RumiousListState(values);
 }
 
+class RumiousStore {
+    value;
+    states = {};
+    constructor(value) {
+        this.value = value;
+        for (const key in value) {
+            this.states[key] = createState(value[key]);
+        }
+    }
+    get(key) {
+        return this.states[key];
+    }
+    set(value) {
+        this.value = value;
+        for (const key in value) {
+            if (this.states[key]) {
+                this.states[key].value = value[key];
+            }
+            else {
+                this.states[key] = createState(value[key]);
+            }
+        }
+    }
+    map(fn) {
+        const results = [];
+        for (const key in this.states) {
+            results.push(fn(this.states[key], key));
+        }
+        return results;
+    }
+    remove(key) {
+        delete this.states[key];
+        delete this.value[key];
+    }
+}
+function createStore(value) {
+    return new RumiousStore(value);
+}
+
 class RumiousComponent {
     props;
     app;
@@ -868,6 +910,12 @@ const directives = {
                         element.value = String(state.get());
                 };
                 break;
+            case 'show':
+                reactive = () => element.style.display = state.get() ? '' : 'none';
+                break;
+            case 'hide':
+                reactive = () => element.style.display = state.get() ? 'none' : '';
+                break;
             default:
                 throw new Error(`Unknown bind directive modifier: ${modifier}`);
         }
@@ -1038,6 +1086,47 @@ function createComponent(root, context, component, props) {
 class RumiousModule {
 }
 
+class RumiousContext {
+    values;
+    events = {};
+    constructor(values) {
+        this.values = values;
+    }
+    set(key, value) {
+        this.values[key] = value;
+    }
+    get(key) {
+        return this.values[key];
+    }
+    emit(event, ...args) {
+        const listeners = this.events[event];
+        if (listeners) {
+            for (const fn of listeners) {
+                fn(...args);
+            }
+        }
+    }
+    on(event, fn) {
+        if (!this.events[event]) {
+            this.events[event] = new Set();
+        }
+        this.events[event].add(fn);
+    }
+    off(event, fn) {
+        if (!this.events[event])
+            return;
+        if (fn) {
+            this.events[event].delete(fn);
+        }
+        else {
+            delete this.events[event];
+        }
+    }
+}
+function createContext(values) {
+    return new RumiousContext(values);
+}
+
 const __version__ = "2.x";
 
-export { Fragment, RumiousApp, RumiousComponent, RumiousComponentElement, RumiousListState, RumiousModule, RumiousPagination, RumiousRef, RumiousRenderContext, RumiousState, RumiousViewControl, __version__, appendChild, createApp, createComponent, createComponentElement, createDynamicValue, createEvent, createListState, createRef, createState, createTemplate, createViewControl, delegateEvents, directives, element, html, render, renderComponent, renderFrag, replaceNode, unwatch, watch };
+export { Fragment, RumiousApp, RumiousComponent, RumiousComponentElement, RumiousContext, RumiousListState, RumiousModule, RumiousPagination, RumiousRef, RumiousRenderContext, RumiousState, RumiousStore, RumiousViewControl, __version__, appendChild, createApp, createComponent, createComponentElement, createContext, createDynamicValue, createEvent, createListState, createRef, createState, createStore, createTemplate, createViewControl, delegateEvents, directives, element, html, render, renderComponent, renderFrag, replaceNode, unwatch, watch };

package/dist/jsx/component.js

@@ -0,0 +1,6 @@
+import { createComponentElement } from '../component/index.js';
+export function createComponent(root, context, component, props) {
+    let [element] = createComponentElement(context, component, props);
+    root.appendChild(element);
+    return [element];
+}

package/dist/jsx/dynamic.js

@@ -0,0 +1,65 @@
+import { isTemplate } from '../utils/checker.js';
+import { RumiousState } from '../state/index.js';
+import { RumiousComponentElement } from '../component/index.js';
+function handleReactiveNode(node, value, context) {
+    let currentNode = node;
+    const update = () => {
+        if (!document.contains(currentNode) && value.reactor) {
+            value.reactor.removeBinding(update);
+            return;
+        }
+        const newNode = value.value;
+        if (newNode instanceof RumiousComponentElement) {
+            newNode.setContext(context);
+        }
+        currentNode.parentNode?.replaceChild(newNode, currentNode);
+        currentNode = newNode;
+    };
+    context.onRendered.push(() => {
+        update();
+        if (!value.reactor)
+            return;
+        value.reactor.addBinding(update);
+    });
+    return node;
+}
+function isPrimitive(value) {
+    return value === null || (typeof value !== 'object' && typeof value !== 'function');
+}
+export function createDynamicValue(context, value) {
+    if (Array.isArray(value)) {
+        const fragment = document.createDocumentFragment();
+        for (const item of value) {
+            if (isTemplate(item)) {
+                const rendered = item(document.createDocumentFragment(), context);
+                fragment.appendChild(rendered);
+            }
+            else if (isPrimitive(item)) {
+                if (item !== null && item !== undefined && item !== false) {
+                    fragment.appendChild(document.createTextNode(String(item)));
+                }
+            }
+        }
+        return fragment;
+    }
+    if (isTemplate(value)) {
+        return value(document.createDocumentFragment(), context);
+    }
+    if (value instanceof RumiousState && value.value instanceof Node) {
+        return handleReactiveNode(document.createTextNode(''), value, context);
+    }
+    if (value instanceof RumiousState && value.reactor) {
+        let node = document.createTextNode('');
+        context.onRendered.push(() => {
+            node.textContent = String(value.get());
+            if (!value.reactor)
+                return;
+            value.reactor.addBinding((commit) => node.textContent = String(commit.state.get()));
+        });
+        return node;
+    }
+    if (isPrimitive(value) && value !== null && value !== undefined && value !== false) {
+        return document.createTextNode(String(value));
+    }
+    return document.createTextNode('');
+}

package/dist/jsx/element.js

@@ -0,0 +1,50 @@
+export function appendChild(parent, node) {
+    if (typeof node === 'string')
+        parent.appendChild(document.createTextNode(node));
+    else
+        parent.appendChild(node);
+}
+export function element(parent, tagName, attrs) {
+    const el = document.createElement(tagName);
+    if (attrs) {
+        for (let key in attrs) {
+            el.setAttribute(key, attrs[key]);
+        }
+    }
+    parent.appendChild(el);
+    return el;
+}
+export function replaceNode(oldNode, newNode) {
+    const parent = oldNode.parentNode;
+    if (parent) {
+        parent.replaceChild(newNode, oldNode);
+    }
+    else {
+        console.warn('replaceNode: oldNode has no parent. Cannot replace.');
+    }
+}
+export function createEvent(target, name, callback) {
+    if (!target.__rumiousEvents) {
+        target.__rumiousEvents = {};
+    }
+    target.__rumiousEvents[name] = callback;
+}
+function triggerEvent(name, event) {
+    const path = (event.composedPath?.() ?? [event.target]);
+    for (const target of path) {
+        if (target instanceof HTMLElement &&
+            '__rumiousEvents' in target) {
+            const element = target;
+            const handler = element.__rumiousEvents?.[name];
+            if (handler) {
+                handler(event);
+                break;
+            }
+        }
+    }
+}
+export function delegateEvents(events) {
+    for (const name of events) {
+        window.addEventListener(name, (e) => triggerEvent(name, e));
+    }
+}

package/dist/jsx/index.js

@@ -0,0 +1,4 @@
+export * from './element.js';
+export * from './dynamic.js';
+export * from './template.js';
+export * from './component.js';

package/dist/jsx/template.js

@@ -0,0 +1,281 @@
+import { RumiousRenderContext, renderFrag } from '../render/index.js';
+import { RumiousRef } from '../ref/index.js';
+import { createEvent } from './element.js';
+export function createTemplate(fn) {
+    return Object.assign(fn, {
+        __isTemplate: true
+    });
+}
+export function html(h) {
+    let template = document.createElement('template');
+    template.innerHTML = h;
+    return template.content.cloneNode(true);
+}
+export const directives = {
+    ref(context, modifier, target, value) {
+        if (value instanceof RumiousRef) {
+            value.setTarget(target);
+        }
+        else {
+            throw new Error("Cannot setup element reference for non-RumiousRef object !");
+        }
+    },
+    model(context, modifier, element, state) {
+        const tag = element.tagName, type = element.type;
+        if (tag === "TEXTAREA") {
+            element.addEventListener("input", () => state.set(element.value));
+        }
+        else if (tag === "SELECT") {
+            element.addEventListener("change", () => {
+                const s = element;
+                state.set(s.multiple ? Array.from(s.selectedOptions).map(o => o.value) : s.value);
+            });
+        }
+        else if (tag === "INPUT") {
+            if (type === "checkbox") {
+                element.addEventListener("change", () => state.set(element.checked));
+            }
+            else if (type === "radio") {
+                element.addEventListener("change", () => {
+                    const i = element;
+                    if (i.checked)
+                        state.set(i.value);
+                });
+            }
+            else if (type === "file") {
+                element.addEventListener("change", () => {
+                    const f = element.files;
+                    state.set(element.hasAttribute("multiple") ? f : f?.[0] ?? null);
+                });
+            }
+            else {
+                element.addEventListener("input", () => {
+                    const val = element.value;
+                    state.set(type === "number" ? (val === "" ? null : +val) : val);
+                });
+            }
+        }
+    },
+    on(context, event, element, callback) {
+        createEvent(element, event, callback);
+    },
+    bind(context, modifier, element, state) {
+        let reactive = () => { };
+        switch (modifier) {
+            case 'text':
+                reactive = () => { element.textContent = String(state.get()); };
+                break;
+            case 'html':
+                reactive = () => { element.innerHTML = String(state.get()); };
+                break;
+            case 'style':
+                reactive = () => {
+                    const styles = state.get();
+                    if (typeof styles === 'string') {
+                        element.setAttribute('style', styles);
+                    }
+                    else if (typeof styles === 'object') {
+                        Object.assign(element.style, styles);
+                    }
+                };
+                break;
+            case 'class':
+                reactive = () => {
+                    const cls = state.get();
+                    if (typeof cls === 'string')
+                        element.className = cls;
+                    else if (Array.isArray(cls))
+                        element.className = cls.join(' ');
+                    else if (typeof cls === 'object') {
+                        element.className = Object.entries(cls)
+                            .filter(([_, active]) => active)
+                            .map(([name]) => name)
+                            .join(' ');
+                    }
+                };
+                break;
+            case 'disabled':
+                reactive = () => {
+                    if ('disabled' in element)
+                        element.disabled = Boolean(state.get());
+                };
+                break;
+            case 'checked':
+                reactive = () => {
+                    if (element instanceof HTMLInputElement || element instanceof HTMLInputElement) {
+                        element.checked = Boolean(state.get());
+                    }
+                };
+                break;
+            case 'value':
+                reactive = () => {
+                    if ('value' in element)
+                        element.value = String(state.get());
+                };
+                break;
+            case 'show':
+                reactive = () => element.style.display = state.get() ? '' : 'none';
+                break;
+            case 'hide':
+                reactive = () => element.style.display = state.get() ? 'none' : '';
+                break;
+            default:
+                throw new Error(`Unknown bind directive modifier: ${modifier}`);
+        }
+        function onStateChange(commit) {
+            if (!document.contains(element) && state.reactor) {
+                state.reactor.removeInternalBinding(onStateChange);
+                return;
+            }
+            reactive();
+        }
+        context.onRendered.push(() => {
+            reactive();
+            if (!state.reactor)
+                return;
+            state.reactor.addInternalBinding(onStateChange);
+        });
+    },
+    attr(context, attrName, element, state) {
+        function onStateChange(commit) {
+            if (!document.contains(element) && state.reactor) {
+                state.reactor.removeInternalBinding(onStateChange);
+                return;
+            }
+            element.setAttribute(attrName, String(state.get()));
+        }
+        context.onRendered.push(() => {
+            onStateChange();
+            if (!state.reactor)
+                return;
+            state.reactor.addInternalBinding(onStateChange);
+        });
+    },
+    prop(context, name, element, state) {
+        function onStateChange(commit) {
+            if (!document.contains(element) && state.reactor) {
+                state.reactor.removeInternalBinding(onStateChange);
+                return;
+            }
+            element[name] = state.get();
+        }
+        context.onRendered.push(() => {
+            onStateChange();
+            if (!state.reactor)
+                return;
+            state.reactor.addInternalBinding(onStateChange);
+        });
+    },
+    html(context, modifier, element, state) {
+        function onStateChange(commit) {
+            if (!document.contains(element) && state.reactor) {
+                state.reactor.removeInternalBinding(onStateChange);
+                return;
+            }
+            element.innerHTML = String(state.get());
+        }
+        context.onRendered.push(() => {
+            onStateChange();
+            if (!state.reactor)
+                return;
+            state.reactor.addInternalBinding(onStateChange);
+        });
+    },
+    show(context, modifier, element, state) {
+        function onStateChange(commit) {
+            if (!document.contains(element) && state.reactor) {
+                state.reactor.removeInternalBinding(onStateChange);
+                return;
+            }
+            element.style.display = Boolean(state.get()) ? 'block' : 'none';
+        }
+        context.onRendered.push(() => {
+            onStateChange();
+            if (!state.reactor)
+                return;
+            state.reactor.addInternalBinding(onStateChange);
+        });
+    },
+    hide(context, modifier, element, state) {
+        function onStateChange(commit) {
+            if (!document.contains(element) && state.reactor) {
+                state.reactor.removeInternalBinding(onStateChange);
+                return;
+            }
+            element.style.display = !Boolean(state.get()) ? 'block' : 'none';
+        }
+        context.onRendered.push(() => {
+            onStateChange();
+            if (!state.reactor)
+                return;
+            state.reactor.addInternalBinding(onStateChange);
+        });
+    },
+    each(context, modifier, element, configs) {
+        context = new RumiousRenderContext(context.app, context.target);
+        const keyToNode = new Map();
+        const nodeOrder = [];
+        for (const item of configs.value.value) {
+            const key = configs.key(item);
+            const templ = renderFrag(configs.templ(item, key), context);
+            const dom = templ.childNodes[0];
+            keyToNode.set(key, dom);
+            nodeOrder.push(key);
+            element.appendChild(dom);
+        }
+        if (!configs.value.reactor)
+            return;
+        configs.value.reactor.addInternalBinding((commit) => {
+            const value = commit.value;
+            const key = configs.key(value);
+            if (commit.type === 'remove') {
+                const oldDom = keyToNode.get(key);
+                if (oldDom) {
+                    element.removeChild(oldDom);
+                    keyToNode.delete(key);
+                    const index = nodeOrder.indexOf(key);
+                    if (index !== -1)
+                        nodeOrder.splice(index, 1);
+                }
+                return;
+            }
+            const templ = renderFrag(configs.templ(value, key), context);
+            const dom = templ.childNodes[0];
+            switch (commit.type) {
+                case 'append':
+                    keyToNode.set(key, dom);
+                    nodeOrder.push(key);
+                    element.appendChild(dom);
+                    break;
+                case 'prepend':
+                    keyToNode.set(key, dom);
+                    nodeOrder.unshift(key);
+                    element.prepend(dom);
+                    break;
+                case 'update': {
+                    const oldDom = keyToNode.get(key);
+                    if (oldDom) {
+                        keyToNode.set(key, dom);
+                        element.replaceChild(dom, oldDom);
+                    }
+                    break;
+                }
+                case 'insert': {
+                    const index = commit.key;
+                    const anchorKey = nodeOrder[index];
+                    const anchorNode = keyToNode.get(anchorKey) ?? null;
+                    keyToNode.set(key, dom);
+                    nodeOrder.splice(index, 0, key);
+                    element.insertBefore(dom, anchorNode);
+                    break;
+                }
+            }
+        });
+    },
+    view(context, modifier, element, configs) {
+        configs.addTarget({
+            element,
+            context
+        });
+    }
+};

package/dist/module/index.js

@@ -0,0 +1,2 @@
+export class RumiousModule {
+}

package/dist/ref/index.js

@@ -0,0 +1 @@
+export * from './ref.js';

package/dist/ref/ref.js

@@ -0,0 +1,147 @@
+import { RumiousComponentElement } from '../component/index.js';
+export class RumiousRef {
+    element;
+    _mounted = false;
+    _onMountCallbacks = [];
+    _onUnmountCallbacks = [];
+    constructor() { }
+    setTarget(element) {
+        this.element = element;
+        this._mounted = true;
+        for (const cb of this._onMountCallbacks) {
+            cb(element);
+        }
+    }
+    reset() {
+        if (this._mounted) {
+            for (const cb of this._onUnmountCallbacks) {
+                cb();
+            }
+        }
+        this.element = undefined;
+        this._mounted = false;
+    }
+    get() {
+        return this._mounted ? this.element : undefined;
+    }
+    isMounted() {
+        return this._mounted;
+    }
+    has() {
+        return this.isMounted();
+    }
+    onMount(cb) {
+        this._onMountCallbacks.push(cb);
+        if (this._mounted)
+            cb(this.element);
+    }
+    onUnmount(cb) {
+        this._onUnmountCallbacks.push(cb);
+    }
+    toString() {
+        return `[RumiousRef ${this._mounted ? "mounted" : "not mounted"}]`;
+    }
+    focus() {
+        this.assertMounted();
+        this.element.focus();
+    }
+    addClass(className) {
+        this.assertMounted();
+        this.element.classList.add(className);
+    }
+    removeClass(className) {
+        this.assertMounted();
+        this.element.classList.remove(className);
+    }
+    toggleClass(className) {
+        this.assertMounted();
+        this.element.classList.toggle(className);
+    }
+    setAttr(key, value) {
+        this.assertMounted();
+        this.element.setAttribute(key, value);
+    }
+    removeAttr(key) {
+        this.assertMounted();
+        this.element.removeAttribute(key);
+    }
+    query(selector) {
+        this.assertMounted();
+        return this.element.querySelector(selector);
+    }
+    queryAll(selector) {
+        this.assertMounted();
+        return this.element.querySelectorAll(selector);
+    }
+    get value() {
+        this.assertMounted();
+        return 'value' in this.element ? this.element.value : undefined;
+    }
+    set value(val) {
+        this.assertMounted();
+        if ('value' in this.element) {
+            this.element.value = val;
+        }
+        else {
+            throw new Error("RumiousRefError: Element has no 'value' property.");
+        }
+    }
+    get text() {
+        this.assertMounted();
+        return this.element.textContent;
+    }
+    set text(val) {
+        this.assertMounted();
+        this.element.textContent = val;
+    }
+    get html() {
+        this.assertMounted();
+        return this.element.innerHTML;
+    }
+    set html(val) {
+        this.assertMounted();
+        this.element.innerHTML = val;
+    }
+    get checked() {
+        this.assertMounted();
+        return 'checked' in this.element ? Boolean(this.element.checked) : false;
+    }
+    set checked(val) {
+        this.assertMounted();
+        if ('checked' in this.element) {
+            this.element.checked = val;
+        }
+        else {
+            throw new Error("RumiousRefError: Element has no 'checked' property.");
+        }
+    }
+    get disabled() {
+        this.assertMounted();
+        return 'disabled' in this.element ? Boolean(this.element.disabled) : false;
+    }
+    set disabled(val) {
+        this.assertMounted();
+        if ('disabled' in this.element) {
+            this.element.disabled = val;
+        }
+        else {
+            throw new Error("RumiousRefError: Element has no 'disabled' property.");
+        }
+    }
+    get component() {
+        if (this.element instanceof RumiousComponentElement) {
+            return this.element.instance;
+        }
+        else {
+            return null;
+        }
+    }
+    assertMounted() {
+        if (!this._mounted) {
+            throw new Error("RumiousRefError: Element is not mounted.");
+        }
+    }
+}
+export function createRef() {
+    return new RumiousRef();
+}

package/dist/render/context.js

@@ -0,0 +1,9 @@
+export class RumiousRenderContext {
+    app;
+    target;
+    onRendered = [];
+    constructor(app, target) {
+        this.app = app;
+        this.target = target;
+    }
+}

package/dist/render/index.js

@@ -0,0 +1,4 @@
+export * from './context.js';
+export * from './render.js';
+export * from './view.js';
+export * from './list.js';

package/dist/render/list.js

@@ -0,0 +1,96 @@
+export class RumiousPagination {
+    view;
+    data;
+    templFn;
+    keyFn;
+    currentPage = 0;
+    limit = 50;
+    pos = [0, 0];
+    constructor(view, data, templFn, keyFn) {
+        this.view = view;
+        this.data = data;
+        this.templFn = templFn;
+        this.keyFn = keyFn;
+    }
+    show() {
+        let [start, end] = this.calcPos();
+        let list = this.data.value.slice(start, end);
+        this.pos = [start, end];
+        for (let data of list) {
+            let key = this.keyFn(data);
+            let templ = this.templFn(data);
+            this.view.addChild(templ);
+        }
+        if (!this.data.reactor)
+            return;
+        this.data.reactor.addInternalBinding(this.onDataChange.bind(this));
+    }
+    calcPos() {
+        const size = this.data.value.length;
+        const totalPage = Math.ceil(size / this.limit);
+        const currentPage = Math.max(0, Math.min(this.currentPage, totalPage - 1));
+        const start = currentPage * this.limit;
+        const end = Math.min(start + this.limit, size);
+        return [start, end];
+    }
+    onDataChange(commit) {
+        const [start, end] = this.calcPos();
+        const total = this.data.value.length;
+        const { type, key, value } = commit;
+        if (type === 'set') {
+            this.view.emptyAll();
+            this.show();
+            return;
+        }
+        if (typeof key === 'number' && key < start) {
+            this.view.emptyAll();
+            this.show();
+            return;
+        }
+        if (typeof key === 'number' && key >= start && key < end) {
+            const indexInView = key - start;
+            switch (type) {
+                case 'update': {
+                    const item = this.data.value[key];
+                    const templ = this.templFn(item);
+                    this.view.updateChild(indexInView, templ);
+                    break;
+                }
+                case 'remove': {
+                    this.view.removeChild(indexInView);
+                    const extraIndex = end - 1;
+                    if (extraIndex < total) {
+                        const extraItem = this.data.value[extraIndex];
+                        const extraTemplate = this.templFn(extraItem);
+                        this.view.addChild(extraTemplate);
+                    }
+                    break;
+                }
+                case 'insert':
+                case 'prepend': {
+                    const item = this.data.value[key];
+                    const templ = this.templFn(item);
+                    this.view.addChild(templ, true);
+                    const currentViewSize = end - start + 1;
+                    if (currentViewSize > this.limit) {
+                        this.view.removeChild(this.limit);
+                    }
+                    break;
+                }
+                case 'append': {
+                    if (key < start + this.limit) {
+                        const item = this.data.value[key];
+                        const templ = this.templFn(item);
+                        this.view.addChild(templ);
+                        const currentViewSize = end - start + 1;
+                        if (currentViewSize > this.limit) {
+                            this.view.removeChild(0);
+                        }
+                    }
+                    break;
+                }
+            }
+            return;
+        }
+    }
+}

package/dist/render/render.js

@@ -0,0 +1,17 @@
+export function render(content, container, context) {
+    context.onRendered = [];
+    let result = content(container, context);
+    for (var i = 0; i < context.onRendered.length; i++) {
+        context.onRendered[i]();
+    }
+    return result;
+}
+export function renderFrag(content, context) {
+    let container = document.createDocumentFragment();
+    context.onRendered = [];
+    let result = content(container, context);
+    for (var i = 0; i < context.onRendered.length; i++) {
+        context.onRendered[i]();
+    }
+    return result;
+}

package/dist/render/view.js

@@ -0,0 +1,76 @@
+import { render, renderFrag } from './render.js';
+export class RumiousViewControl {
+    targets = [];
+    constructor() { }
+    addTarget(target) {
+        this.targets.push(target);
+    }
+    setView(template) {
+        const targets = this.targets;
+        if (targets.length === 0) {
+            throw new Error(`RumiousRenderError: No target assigned to ViewControl`);
+        }
+        for (let i = 0; i < targets.length; i++) {
+            render(template, targets[i].element, targets[i].context);
+        }
+    }
+    removeChild(index) {
+        for (let i = 0; i < this.targets.length; i++) {
+            let parent = this.targets[i].element.parentElement;
+            if (!parent)
+                return;
+            let element = parent.children[index];
+            if (element)
+                parent.removeChild(element);
+        }
+    }
+    addChild(template, prepend = false) {
+        const targets = this.targets;
+        if (targets.length === 0) {
+            throw new Error(`RumiousRenderError: No target assigned to ViewControl`);
+        }
+        for (let i = 0; i < targets.length; i++) {
+            let templ = renderFrag(template, targets[i].context);
+            if (!prepend)
+                targets[i].element.appendChild(templ);
+            else
+                targets[i].element.prepend(templ);
+        }
+    }
+    each(callback) {
+        for (let target of this.targets) {
+            callback(target);
+        }
+    }
+    emptyAll() {
+        const targets = this.targets;
+        for (let i = 0; i < targets.length; i++) {
+            targets[i].element.textContent = '';
+        }
+    }
+    empty(target) {
+        const targets = this.targets;
+        for (let i = 0; i < targets.length; i++) {
+            if (targets[i].element === target) {
+                target.textContent = '';
+                return;
+            }
+        }
+    }
+    updateChild(index, template) {
+        for (let i = 0; i < this.targets.length; i++) {
+            const { element, context } = this.targets[i];
+            const parent = element.parentElement;
+            if (!parent)
+                continue;
+            const oldChild = parent.children[index];
+            const newNode = renderFrag(template, context);
+            if (oldChild) {
+                parent.replaceChild(newNode, oldChild);
+            }
+        }
+    }
+}
+export function createViewControl() {
+    return new RumiousViewControl();
+}

package/dist/state/index.d.ts

@@ -1,2 +1,3 @@
 export * from './state.js';
 export * from './list.js';
+export * from './store.js';

package/dist/state/index.js

@@ -0,0 +1,3 @@
+export * from './state.js';
+export * from './list.js';
+export * from './store.js';

package/dist/state/list.js

@@ -0,0 +1,79 @@
+import { RumiousState } from './state.js';
+export class RumiousListState extends RumiousState {
+    constructor(value = [], reactor) {
+        super(value, reactor);
+    }
+    append(value) {
+        this.value.push(value);
+        this.reactor?.notify({
+            type: 'append',
+            state: this,
+            key: this.value.length - 1,
+            value
+        });
+    }
+    prepend(value) {
+        this.value.unshift(value);
+        this.reactor?.notify({
+            type: 'prepend',
+            state: this,
+            key: 0,
+            value
+        });
+    }
+    insert(pos, value) {
+        this.value.splice(pos, 0, value);
+        this.reactor?.notify({
+            type: 'insert',
+            state: this,
+            value,
+            key: pos
+        });
+    }
+    updateAt(pos, value) {
+        this.value[pos] = value;
+        this.reactor?.notify({
+            type: 'update',
+            state: this,
+            value,
+            key: pos
+        });
+    }
+    remove(pos) {
+        let currentValue = this.value[pos];
+        this.value.splice(pos, 1);
+        this.reactor?.notify({
+            type: 'remove',
+            state: this,
+            value: currentValue,
+            key: pos
+        });
+    }
+    clear() {
+        this.value.length = 0;
+        this.reactor?.notify({
+            type: 'set',
+            state: this,
+            value: []
+        });
+    }
+    reverse() {
+        this.value.reverse();
+        this.reactor?.notify({
+            type: 'set',
+            state: this,
+            value: this.value
+        });
+    }
+    filter(predicate) {
+        this.value = this.value.filter(predicate);
+        this.reactor?.notify({
+            type: 'set',
+            state: this,
+            value: this.value
+        });
+    }
+}
+export function createListState(values) {
+    return new RumiousListState(values);
+}

package/dist/state/reactor.js

@@ -0,0 +1,53 @@
+export class RumiousReactor {
+    target;
+    bindings = [];
+    internal = [];
+    isUIBatch = true;
+    scheduled = false;
+    queuedCommits = [];
+    constructor(target) {
+        this.target = target;
+    }
+    addBinding(binding) {
+        this.bindings.push(binding);
+    }
+    removeBinding(binding) {
+        this.bindings = this.bindings.filter(b => b !== binding);
+    }
+    addInternalBinding(binding) {
+        this.internal.push(binding);
+    }
+    removeInternalBinding(binding) {
+        this.internal = this.internal.filter(b => b !== binding);
+    }
+    notify(commit) {
+        for (const binding of this.bindings) {
+            binding(commit);
+        }
+        if (this.isUIBatch) {
+            this.scheduleInternalUpdate(commit);
+        }
+        else {
+            for (const binding of this.internal) {
+                binding(commit);
+            }
+        }
+    }
+    scheduleInternalUpdate(commit) {
+        this.queuedCommits.push(commit);
+        if (!this.scheduled) {
+            this.scheduled = true;
+            queueMicrotask(() => {
+                this.flushInternal();
+            });
+        }
+    }
+    flushInternal() {
+        const lastCommit = this.queuedCommits[this.queuedCommits.length - 1];
+        for (const binding of this.internal) {
+            binding(lastCommit); // chỉ gửi commit cuối cùng
+        }
+        this.queuedCommits = [];
+        this.scheduled = false;
+    }
+}

package/dist/state/state.d.ts

@@ -9,6 +9,7 @@ export declare class RumiousState<T> {
     slientUpdate(value: T): void;
     update(updater: (value: T) => T): void;
     toJSON(): string;
+    equal(value: T): boolean;
     trigger(): void;
 }
 export declare function createState<T>(value: T): RumiousState<T>;

package/dist/state/state.js

@@ -0,0 +1,53 @@
+import { RumiousReactor } from './reactor.js';
+export class RumiousState {
+    value;
+    reactor;
+    constructor(value, reactor) {
+        this.value = value;
+        this.reactor = reactor;
+        if (!this.reactor) {
+            this.reactor = new RumiousReactor(this);
+        }
+    }
+    set(value) {
+        this.value = value;
+        this.reactor?.notify({
+            type: 'set',
+            value: value,
+            state: this
+        });
+    }
+    get() {
+        return this.value;
+    }
+    slientUpdate(value) {
+        this.value = value;
+    }
+    update(updater) {
+        this.set(updater(this.value));
+    }
+    toJSON() {
+        return JSON.stringify(this.value);
+    }
+    equal(value) {
+        return value === this.value;
+    }
+    trigger() {
+        this.reactor?.notify({
+            type: 'set',
+            value: this.value,
+            state: this
+        });
+    }
+}
+export function createState(value) {
+    return new RumiousState(value);
+}
+export function watch(state, callback) {
+    if (state.reactor)
+        state.reactor.addBinding(callback);
+}
+export function unwatch(state, callback) {
+    if (state.reactor)
+        state.reactor.removeBinding(callback);
+}

package/dist/state/store.d.ts

@@ -0,0 +1,14 @@
+import { RumiousState } from './state.js';
+export type RumiousStoreReactiveMap<T> = {
+    [K in keyof T]: RumiousState<T[K]>;
+};
+export declare class RumiousStore<T extends {}> {
+    value: T;
+    states: RumiousStoreReactiveMap<T>;
+    constructor(value: T);
+    get<K extends keyof T>(key: K): RumiousState<T[K]>;
+    set(value: T): void;
+    map<U>(fn: <K extends keyof T>(state: RumiousState<T[K]>, key: K) => U): U[];
+    remove<K extends keyof T>(key: K): void;
+}
+export declare function createStore<T extends {}>(value: T): RumiousStore<T>;

package/dist/state/store.js

@@ -0,0 +1,17 @@
+import { RumiousState, createState } from './state.js';
+T;
+RumiousState;
+;
+export class RumiousStore {
+    value;
+    map = {};
+    constructor(value) {
+        this.value = value;
+        for (const key in value) {
+            this.map[key] = createState(value[key]);
+        }
+    }
+}
+export function createStore(value) {
+    return new RumiousStore(value);
+}

package/dist/types/component.js

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

package/dist/types/index.js

@@ -0,0 +1,3 @@
+export * from './template.js';
+export * from './component.js';
+export * from './state.js';

package/dist/types/state.js

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

package/dist/types/template.js

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

package/dist/utils/checker.js

@@ -0,0 +1,3 @@
+export function isTemplate(fn) {
+    return typeof fn === 'function' && fn.__isTemplate === true;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rumious",
-  "version": "2.0.2",
+  "version": "2.1.1",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",