First commit
This commit is contained in:
parent
9bc362d2e7
commit
5c21246a27
|
@ -0,0 +1,186 @@
|
|||
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);
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="./core.js"></script>
|
||||
<script src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue