Plan added
This commit is contained in:
parent
5c21246a27
commit
74d7806e7c
113
README.md
113
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
|
||||
```
|
||||
|
|
Loading…
Reference in New Issue