function render(...entries)
{
    let content = {};
    let domContainer = document.createElement('div');
    renderTreeQueQue(
        domContainer,
        entries,
        content
    );
    return domContainer;
};

function renderTreeQueQue(domContainer, entries, content)
{
    if(!content._renderPlanned)
    {
        requestAnimationFrame(()=>{
            createTree(
                domContainer,
                entries,
                content
            )
        });
        content._renderPlanned = true;
    }
};

function createTree(domContainer, entries, content)
{
    let vdom = renderTree(entries, content);
    for (const vnode of vdom) {
        domContainer.append(vnode)
    }
}

function * renderTree(entries,content)
{
    let fragment = document.createDocumentFragment();
    for (const entry of entries) {
        fragment.appendChild(é(entry).render(content))
    };
    return fragment;
}

function élement(...args)
{
    this._args = args;
    let _stateIndex = [];
    let _requireedRender = true;
    let _previousCopy = [];
    let _shadow = null;
    this.hooks = [];
    let _currentCopy = [];
    this.getState = function(n){
        return _stateIndex[n];
    };
    this.setCurrentCopy = function(shadow){
        _previousCopy = _currentCopy;
        _currentCopy = shadow;
    };
    this.setState = function(n,o){
        if(
            Object.is(_stateIndex[n], o)
        )
        {
            _requireedRender = true;
            _stateIndex[n]=o;
        }
    };
    this.render = function(ctx) {
        if(_requireedRender)
        {
            if(this._args[0] instanceof Function)
            {
                _shadow = document.createDocumentFragment();
                RenderCompanent(
                    this,
                    ctx,
                    this._args[1]
                );
                for (const entry of _currentCopy) {
                    _shadow.appendChild(é(entry).render(ctx))
                };
            }else{
                _shadow = RenderElement(this._args[0], ctx);
            }
        };
        return _shadow || [];
    };
};

function RenderElement(data)
{
    let elem = document.createElement(data.$ || "div");
    for (const [name,value] of Object.entries(data)) {
        switch(name)
        {
            case "$":
                break;
            case "in":
                break;
            default:{
                if(name.startsWith('on'))
                {
                    elem.addEventListener(name.slice(2),value)
                }else{
                    elem.setAttribute(name, value)
                }
            };
        }
    };
    if(data.in instanceof Array)
    {
        for (const companent of (data.in||[])) {
            if(
                typeof companent != élement &&
                typeof companent == "string"
            )
            {
                elem.append(document.createTextNode(companent));
            }else{
                elem.append(
                    é(companent).render()
                );
            }
        }
    }else{
        if(
            typeof data.in != élement &&
            typeof data.in == "string"
        )
        {
            elem.append(document.createTextNode(data.in));
        }else{
            elem.append(
                é(data.in).render()
            );
        }
    }
    return elem;
}

let currentCompanent;
let currentStateIndex = 0;
function RenderCompanent(élement, context, attr)
{
    currentCompanent = élement;
    currentStateIndex = 0;
    let vshadow = élement._args[0].apply(context,[attr]);
    élement.setCurrentCopy(vshadow instanceof Array ? vshadow : [vshadow]);
};
function Update()
{
    //
}
function Var(value)
{
    let index = currentStateIndex++;
    let state = currentCompanent.getState();
    if(state.length)
    {
        state[index] = value;
    };
    return [
        state[index],
        (newValue) => {
            if(newValue instanceof Function)
            {
                newValue = newValue(state[index]);
            };
            if(Object.is(
                state[index],
                newValue
            ))
            {
                currentCompanent._requireedRender = true;
            };
        }
    ]
    return [value, () => {}];
};

function é(a,b)
{
    return a instanceof élement ? a : new élement(a,b);
}