stear/main.js

var counter = 0;

var globalStyle = document.createElement("style");
document.head.appendChild(globalStyle);

String.prototype.map = Array.prototype.map;

function toCssAttr(txt){
    return txt.map(d => (d.toUpperCase() === d && d !== d.toLowerCase()) ? "-" + d.toLowerCase(): d ).join("");
}

export class Stear{

    elem;
    #childs = {};

    constructor(elem){
        this.elem = elem;
        elem.style.position="relative";
    }

    style(css){
        Object.entries(css).forEach(([k, d]) => {
            this.elem.style[k] = d;
        });
    }

    addElement (id,elem){
        if(!(elem instanceof SFrame))throw new TypeError("Cannot add Element not extending from SFrame");
        this.#childs[id] = elem;
    }

    getElement (id) {
        return this.g(id);
    }
    
    g(id){
        return this.#childs[id];
    }

    async call (elem, args, layer = 1){
        return await elem.call(this, args, layer);
    }

    static addGlobalStyleText(text){
        globalStyle.innerHTML+="\n"+text;
    }

    static addAnimation(steps, name = "stearAnimation_" + counter++){
        Stear.addGlobalStyleText(`@keyframes ${name} {
${
Object.entries(steps).map(([k,d])=>
`   ${k} {
${Object.entries(d).map(d => "      " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")}
    }`).join("\n")
}
}`);

        return name;
    }
    static addGlobalStyleJSON(json, name = ".stearClass_" + counter++){
        Stear.addGlobalStyleText(`
${name} {
${Object.entries(json).map(d => "    " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")} 
}
        `)
        return name;
    }
}

export class SFrame{
    #preRender;
    #render;
    #call;
    #find = {};

    #lastRender;
    constructor({ preRender, render, call }){
        this.#preRender = preRender;
        this.#render = render;
        this.#call = call;
        if(this.#preRender){
            this.render();
        }
    }

    render(args={}){
        this.#lastRender = this.#render({ find: this.#find }, args);
        this.#lastRender.render;
        for (var member in this.#find) delete this.#find[member];
        Object.assign(this.#find, this.#lastRender.find);
        return this.#lastRender;
    }

    async call(stear, args, layer = 1){
        if(this.#preRender){
            stear.elem.appendChild(this.#lastRender._);
            this.#lastRender._.style.zIndex = layer;
        }
        return new Promise((res,rej)=>{
            this.#call(stear,{
                find: this.#find,
                render: (args) => {
                    this.render(args);
                    /*for (var member in find) delete find[member];
                    Object.assign(find, (this.#lastRender?.find) ?? {});*/
                    if ([...(stear.elem.children)].indexOf(this.#lastRender._) >= 0) stear.elem.removeChild(this.#lastRender._);
                    stear.elem.appendChild(this.#lastRender._);
                    this.#lastRender._.style.zIndex = layer;
                    return this.#find;
                },
                resolve: (r,close=true)=>{
                    if (close&&this.#lastRender&&[...(stear.elem.children)].indexOf(this.#lastRender._) >= 0) stear.elem.removeChild(this.#lastRender._);
                    res(r);
                },
                call: (elem, args)=>{
                    return stear.call(elem,args,layer+1);
                },
                close: ()=>{
                    if (close && this.#lastRender && [...(stear.elem.children)].indexOf(this.#lastRender._) >= 0) stear.elem.removeChild(this.#lastRender._);
                }
            }, args);
        });
    }

}

export class SWindow extends SFrame{

    #Frame;

    constructor({ preRender, render, call, backgroundColor = "transparent"}){
        var Frame = _({
            style: {
                top: "0px",
                left: "0px",
                position: "absolute",
                height: "100%",
                width: "100%",
                display: "block",
                backgroundColor,
                //overflow:"scroll"
            },
            find:"main"
        }, []);
        super({
            preRender, render: (settings, args) => {
                Frame.childs = [render(settings, args)];
                return Frame;
            }, call
        });
        this.#Frame = Frame;
    }
    
}

export class class_ {
    #elem;
    #childs;
    #find;

    constructor(settings,childs){
        this.#elem = document.createElement(settings.type ?? "div");
        this.#childs = childs;
        var keys = Object.keys(settings);
        for (let i = 0; i < keys.length; i++) {
            const key = keys[i];
            if(key == "type"){} else if (key == "style"){
                Object.entries(settings[key]).forEach(([k,d])=>{
                    this.#elem.style[k] = d;
                });
            } else if (key == "find"){
                this.#find = settings[key];
            } else if (key == "event"){
                Object.entries(settings[key]).forEach(([k, d]) => {
                    this.#elem.addEventListener(k,d);
                });
            } else {
                this.#elem.setAttribute(key,settings[key]);
            }
        }
    }

    set childs(childs){
        this.#childs = Array.isArray(childs) ? childs : [childs];
    }
    
    set settings(settings){
        var keys = Object.keys(settings);
        for (let i = 0; i < keys.length; i++) {
            const key = keys[i];
            if (key == "type") { } else if (key == "style") {
                Object.entries(settings[key]).forEach(([k, d]) => {
                    this.#elem.style[k] = d;
                });
            } else if (key == "find") {
                this.#find = settings[key];
            } else {
                this.#elem.setAttribute(key, settings[key]);
            }
        }
    }

    get render (){
        this.#elem.innerHTML = "";
        for (let i = 0; i < this.#childs.length; i++) {
            const elem = this.#childs[i];
            if(typeof elem == "string"){
                this.#elem.appendChild(document.createTextNode(elem));
            }else{
                this.#elem.appendChild(elem.render);
            }
        }
        return this.#elem;
    }

    get _ (){
        return this.#elem;
    }

    get find (){
        var out = {};
        this.#childs.forEach(d=>{
            Object.assign(out,d.find);
        });
        if (this.#find) out[this.#find]=this;
        return out;
    }
}
export const _ = (settings = {}, childs = []) => new class_(settings, Array.isArray(childs) ? childs : [childs]);