rumious 2.1.5 → 2.1.6

package/dist/jsx/template.js

@@ -1,281 +0,0 @@
-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

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

package/dist/ref/index.js

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

package/dist/ref/ref.js

@@ -1,147 +0,0 @@
-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

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

package/dist/render/index.js

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

package/dist/render/list.js

@@ -1,96 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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.js

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