# esaQute

## 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 
```