Plan added

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