186 lines
4.3 KiB
JavaScript
186 lines
4.3 KiB
JavaScript
|
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);
|
||
|
}
|