Structure Updated

2023-05-21 21:32:29 +03:00 · 2023-05-21 21:32:29 +03:00 · b6f60c7ade
parent dd05b030b7
commit b6f60c7ade
3 changed files with 242 additions and 162 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@saqut/wirejs",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "type": "commonjs",
  "private": false,
  "description": "Dont use variable, use smart variable wires !",
--- a/readme.md
+++ b/readme.md
@ -2,7 +2,7 @@

 ## Açıklama

-WiréS, ReactJS kütüphanesinin useState ve useEffect kancalarından ilham alınarak browser ortamı için tekrar yazılmış bir kütüphanedir. 
+WiréS, ReactJS kütüphanesinin useState ve watch kancalarından ilham alınarak browser ortamı için tekrar yazılmış bir kütüphanedir. 
 Verileri getter/setter fonksiyonlarıyla sararak gerçek değişikleri algılayan özelliği sayesinde gereksiz güncellemeleri göz ardı eder.

 Veri ilişkilerini önceden belirleyerek değişiklik olduğunda okunacak ve yazılacak verileri koşullara bağlayabilir, okuma ve yazma öncesi ara katmanlar ekleyebilirsiniz
@ -36,18 +36,18 @@ currency.get(); // --> 25

 ## Değişimler

-Bir kablonun değerinin değiştiğini `useEffect` özelliğiyle dinleyebilirsiniz veya birden fazla kablonun değişimini aynı anda dinlemek için `é.useEffect` fonksiyonunu kullanabilirsiniz
+Bir kablonun değerinin değiştiğini `watch` özelliğiyle dinleyebilirsiniz veya birden fazla kablonun değişimini aynı anda dinlemek için `é.watch` fonksiyonunu kullanabilirsiniz

 ```javascript
 let a = é(0);
 let b = é(0);
-a.useEffect(()=>{
+a.watch(()=>{
    // a kablosu değiştiğinde burası çalışacak
 })
-b.useEffect(()=>{
+b.watch(()=>{
    // b kablosu değiştiğinde burası çalışacak
 })
-é.useEffect(()=>{
+é.watch(()=>{
    // a veya b değiştiğinde burası çalışacak
 },[a, b])
 ```
@ -57,17 +57,17 @@ let toplayan = é(0);
 let toplanan = é(0);
 let sonuc = é(0);

-é.useEffect(()=>{
+é.watch(()=>{
    sonuc.set( toplayan.get() + toplanan.get() )
 },[toplayan, toplanan])

-toplayan.useEffect(()=>{
+toplayan.watch(()=>{
    console.log("Toplayan: ",toplayan.get())
 })
-toplanan.useEffect(()=>{
+toplanan.watch(()=>{
    console.log("Toplanan: ",toplanan.get())
 })
-sonuc.useEffect(()=>{
+sonuc.watch(()=>{
    console.log("Değişen Sonuç: ",sonuc.get())
 })

--- a/wire.js
+++ b/wire.js
@ -1,82 +1,97 @@
-function é(defaultValue)
-{
-    let value = undefined;
-    let effects = [];
-    let piping = é.pipeLine();
-    let flag = 0;
-    let version = 0;
-    let diff = é.diff;
-    let get = () => {
-        return (flag & 2) ? piping.get(value) : value;
+/*
+    Flags
+    0x01  01 watch enabled
+    0x02  02 read layer enabled
+    0x04  04 write layer enable
+    0x08  08 initial state
+    0x10  16 changing state
+    0x20  32 immediate change
+ */
+(()=>{
+    let pipeLine = function(){
+        this.reads = [];
+        this.writes = [];
+        this.read = (fn,pr) => reads.push({fn,pr});
+        this.write = (fn,pr) => writes.push({fn,pr});
+        this.get = (val) => {
+            let fns = reads.sort((a,b) => (a?.pr|0) - (b?.pr|0)),
+            real = val;
+            for (const { fn } of fns) {
+                fn( real, e => real = e );
            };
-    let set = (newValue) => {
-        newValue = é.extract(newValue, value);
-        (flag & 4) && (newValue = piping.set(newValue));
-        if(diff(newValue,value))
+            return real;
+        };
+        this.set = () => {
+            let fns = writes.sort((a,b) => (a?.pr|0) - (b?.pr|0)),
+            real = val;
+            for (const { fn } of fns) {
+                fn( real, e => real = e );
+            };
+            return real;
+        };
+    }
+    pipeLine.prototype.read = function(fn,pr){
+        this.reads.push({fn,pr})
+    }
+    pipeLine.prototype.write = function(fn,pr){
+        this.writes.writes({fn,pr})
+    }
+    pipeLine.prototype.get = function(val){
+        let fns = this.reads.sort((a,b) => (a?.pr|0) - (b?.pr|0)),
+        real = val;
+        for (const { fn } of fns) {
+            fn( real, e => real = e );
+        };
+        return real;
+    }
+    pipeLine.prototype.set = function(val){
+        let fns = this.writes.sort((a,b) => (a?.pr|0) - (b?.pr|0)),
+        real = val;
+        for (const { fn } of fns) {
+            fn( real, e => real = e );
+        };
+        return real;
+    }
+    function é(defaultValue)
    {
-            (flag & 1) && effects.filter(e => e.o).forEach(k => k());
-            value = newValue;
-            version++;
-            (flag & 1) && effects.map(e => e.f());
-        }
-    };
-    let useEffect = (e) => {
-        flag = flag | 1;
-        let k = {
-            f:e,
-            o:undefined
-        };
-        requestAnimationFrame(()=> {
-            k.o = e();
-        })
-        effects.push(k);
-    }
-    value = é.extract(defaultValue, value);
-    return {
-        get,
-        set,
-        useEffect,
-        fp: é.fingerPrint,
-        getVersion: () => version,
-        equalTo: n => é.isSame(n, value),
-        readLayer: (a,b) => {
-            flag = flag | 2;
-            piping.read(a,b)
-        },
-        writeLayer: (a,b) => {
-            flag = flag | 4;
-            piping.write(a,b)
+        if(this instanceof é)
+        {
+            this.value = é.extract(defaultValue);
+            this.version = 0;
+            this.effects = [];
+            this.piping = new pipeLine();
+            this.flag = 8;
+        }else{
+            return new é(defaultValue)
        }
    }
-}
-é.isWire = n => n?.fp == é.fingerPrint;
-é.extract = (e,v) => typeof e=='function'?e(v):e;
-é.isSame = (a,b) => !é.diff(a,b);
-é.fingerPrint = Symbol("wire");
-é.useEffect = (fn, assoc) => 
-{
+    é.fingerPrint = Symbol("wire");
+    é.isWire = n => n?.fp == é.fingerPrint;
+    é.extract = (e,v) => typeof e=='function'?e(v):e;
+    é.isSame = (a,b) => !é.diff(a,b);
+    é.watch = (fn, assoc) => {
        for (const wireVar of assoc)
        {
            if(é.isWire(wireVar))
            {
-            wireVar.useEffect(fn);
+                wireVar.watch(fn);
            }
        }
-};
-é.diff = (a,b,c) => {
-    let cursoryDiffResult = é.cDiff(a,b);
-    if(cursoryDiffResult == é.cDiff.adiff)
+    };
+    é.diff = (a,b,c) => {
+        let cursoryDiffResult = cDiff(a,b);
+        if(cursoryDiffResult == cDiff.adiff)
        {
-        return é.adiff(a,b,c||[])
+            return adiff(a,b,c||[])
        }else{
-        return cursoryDiffResult == é.cDiff.some ? false : true;
+            return cursoryDiffResult == cDiff.some ? false : true;
        }
-}
-é.adiff = (a,b,c) => {
+    }
+    const adiff = (a,b,c) => {
        if(c.includes(a) && c.includes(b))
        {
            console.error("Circular object detected !")
-        return é.cObjectDiff(a,b);
+            return cObjectDiff(a,b);
        }
        let typea = a instanceof Array ? 0 : a.byteLength ? 1 : 2;
        let typeb = b instanceof Array ? 0 : b.byteLength ? 1 : 2;
@ -119,17 +134,17 @@ function é(defaultValue)
            }
            return false
        }
-}
-é.cArrDiff = (a,b) => {
+    }
+    const cArrDiff = (a,b) => {
        return a.length != b.length || !a.every((v,i) => a[i] === v)
-};
-é.cObjectDiff = (a,b) => {
-    return é.cArrDiff(
+    };
+    const cObjectDiff = (a,b) => {
+        return cArrDiff(
            Object.keys(a),
            Object.keys(b)
        );
-};
-é.cDiff = (a,b) => {
+    };
+    const cDiff = (a,b) => {
        switch(typeof a)
        {
            case "undefined":
@ -147,31 +162,96 @@ function é(defaultValue)
                return é.cDiff.adiff;
            }
        };
-}
-é.cDiff.adiff = -1;
-é.cDiff.some = 0;
-é.cDiff.different = 1;
-é.pipeLine = () => {
-    let k = {};
-    let reads = [];
-    let writes = [];
-    k.read = (fn,pr) => reads.push({fn,pr});
-    k.write = (fn,pr) => writes.push({fn,pr});
-    k.get = (val) => {
-        let fns = reads.sort((a,b) => (a?.pr|0) - (b?.pr|0)),
-        real = val;
-        for (const { fn } of fns) {
-            fn( real, e => real = e );
+    }
+    cDiff.adiff = -1;
+    cDiff.some = 0;
+    cDiff.different = 1;
+
+    é.prototype.fp = é.fingerPrint;
+    é.prototype.diff = é.diff;
+    é.prototype.get = function(){
+        if(this.flag & 2)
+        {
+            return this.piping.get(this.value)
+        }else{
+            return this.value
+        }
    };
-        return real;
+    é.prototype.set = function(newValue){
+        if(this.flag & 16)
+        {
+            return;
+        }
+        newValue = é.extract(newValue, this.value);
+        if(this.flag & 4)
+        {
+            newValue = this.piping.set(newValue)
        };
-    k.set = (val) => {
-        let fns = writes.sort((a,b) => (a?.pr|0) - (b?.pr|0)),
-        real = val;
-        for (const { fn } of fns) {
-            fn( real, e => real = e );
+        if(this.diff(newValue,this.value))
+        {
+            this.flag = this.flag | 16;
+            if(this.flag & 1)
+            {
+                schedule((()=>{
+                    this.effects.filter(e => e.o).forEach(k => k())
+                }));
+            }
+            this.value = newValue;
+            this.version++;
+            if(this.flag & 1)
+            {
+                schedule((()=>{
+                    this.effects.map(e => e.f());
+                }));
+            }
+            this.flag = this.flag ^ 16;
+        }
    };
-        return real;
+    const schedule = function(fn){
+        schedule.jobs.push(fn)
+        if(!é.schedule.executing)
+        {
+            requestAnimationFrame(()=>{
+                for (const fn of schedule.jobs) {
+                    try{
+                        fn()
+                    }catch(e){
+                        console.error(e)
+                    }
+                }
+            })
+        }
    };
-    return k;
-}
+    schedule.executing = false;
+    schedule.jobs = [];
+    é.prototype.watch = function(fn){
+        this.flag = this.flag | 1;
+        let k = {
+            f:fn,
+            o:undefined
+        };
+        requestAnimationFrame(()=> {
+            k.o = fn();
+        })
+        this.effects.push(k);
+    };
+    é.prototype.getVersion = function(){
+        return this.version;
+    }
+    é.prototype.equalTo = function(value){
+        return é.isSame(value, this.value)
+    }
+    é.prototype.readLayer = function(value){
+        this.flag = this.flag | 2;
+        this.piping.read(a,b)
+    }
+    é.prototype.writeLayer = function(value){
+        this.flag = this.flag | 4;
+        this.piping.write(a,b)
+    }
+    try{
+        module.exports = é;
+    }catch{
+        window.é = é;
+    }
+})();