From 5c21246a27931490145c607363f5ba2cc30b4ead Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Abdussamed=20ULUTA=C5=9E?= Date: Thu, 12 Jan 2023 23:48:50 +0300 Subject: [PATCH] First commit --- core.js | 186 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 13 ++++ index.js | 23 +++++++ 3 files changed, 222 insertions(+) create mode 100644 core.js create mode 100644 index.html create mode 100644 index.js diff --git a/core.js b/core.js new file mode 100644 index 0000000..26ce494 --- /dev/null +++ b/core.js @@ -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); +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..38899c4 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..645a50f --- /dev/null +++ b/index.js @@ -0,0 +1,23 @@ +function BoldText({text}) +{ + return { + $:"b", + in: text + } +} +let e = é({ + $:"div", + style:"width: 200px", + onclick:()=>{ + alert("Clicked ") + }, + in:[ + "Hi !", + é(BoldText,{ + text: "Bold Hi!" + }) + ] +}); + +e = e.render(); +document.body.appendChild(e); \ No newline at end of file