diff --git a/README.md b/README.md index 7a607ed..c793872 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,114 @@ # esaQute -saQütJS élement Plugin +## Neden ésaQuté + +### Gereksinim + +- Reactı (veya preact) standolune (kurulumsuz) kullanmak gereksiz kod uzunluğuna ve verimsiz yüke sebep oluyor +- Nodejs üzerinden derlenmeden browserda babel olmadan çalışabilen bir örnek gerekiyor +- Nodejs ve babel gerekmeden React (veya preact) konforunu ve işlevselliğini sağlayacak hızlı bir kütüphane geliştirilmesi gerekiyor + +## İzlenecek yok + +### Adım 1 + +- [x] Verilen companenti sıfırdan oluşturacak ve bir kompanent için gerçek element oluşturan bir render sistemi yazılacak +- [ ] Kancalar oluşturulacak ve kancalar bir nodenin ağaçda değişime sebep olup olmayacağına karar veren sistem yazılacak + + +### Adım 2 + +- [ ] Tüm kompanentler sanal ağaçta bir node oluşturacak ve tüm ağaç bir render sistemi içerisinde tutulacak +- [ ] Derleme esnasında tüm kompanent değişkenleri önceki durumundan tekrar geri alınacak +- [ ] İlk derlemede tüm ağaç, gerçek dom ağacına derlenecek +- [ ] Sonraki derlemelerde sadece değişikliğe sebep olan kompanent karşılaştırma olmaksızın derlenecek ve dal önce sanal domda daha sonra (sadece ilgili dal) gerçek doma aktarılacak + +### Adım 3 + +- [ ] Karşılaştırma algoritması geliştirilecek + - [ ] Prop bazlı karşılaştırma algoritması sadece kompanentin sonucunda değişen stil ve özellikleri uygulayacak + - [ ] Çocuk bazlı karşılaştırma değişen kompanentin sonucu ile sanal domdaki sonuç ile karşılaştıracak, eklenen nodeleri oluşturacak, silinen nodeleri kaldıracak ve değişen nodeler için yine Prop bazlı karşılaştırma algoritmasını çalıştıracak + +### Adım 4 +- [ ] Context yapısı oluşturulacak üst kompanentlerin alt kompanentler ile iletişimi kolaylaştırılacak, context değiştiğinde ilgili tüm kompanentler tekrar çağrılacak ve değişmesi gereken için gerekirse tüm ağaç üzerinde karşılaştırma işlemi çalıştıracak + + +## Proje Hedefi + +```javascript + let root = é(App); + + function App() + { + let [count, setCount] = useState(0); + + useEffect(()=>{ + console.log("Count is ", count) + },[count]); + + return { + $:"div", + style:{ + maxWidth: "1000px", + margin: "auto" + }, + in:[ + { + $:"h1", + class: "header", + in:[ + "saQut" + ] + }, + é(Button,{ + click: () => { + setCount(n => n + 1) + }, + text: "Count is " + count + }), + ] + }; + }; + + function Button({click, text}) + { + return { + $:"button", + class: "btn btn-success", + in: text, + onclick: click + } + } + + document.body.appendChild(root.render()) +``` + + +## Anlık çalışan durumu + +```javascript +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); +// it showing screen on `Hi! [Bold Hİ]` and after click showing clicked +```