118 lines
3.5 KiB
Markdown
118 lines
3.5 KiB
Markdown
# esaQute
|
||
|
||
## Açıklama
|
||
|
||
Browser üzerinde sanal dom ile karşılaştırma ve State sistemleri ile çalışan yüksek hızlı framework oluşturulması
|
||
## 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
|
||
```
|