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

• 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

    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

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