saqut
/
wirejs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Structure Updated

This commit is contained in:
Abdussamed 2023-05-21 21:32:29 +03:00
parent dd05b030b7
commit b6f60c7ade
3 changed files with 242 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@saqut/wirejs", "name": "@saqut/wirejs",
"version": "0.1.0", "version": "0.2.0",
"type": "commonjs", "type": "commonjs",
"private": false, "private": false,
"description": "Dont use variable, use smart variable wires !", "description": "Dont use variable, use smart variable wires !",

18
readme.md
View File

@ -2,7 +2,7 @@
## Açıklama ## 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. 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 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 ## 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 ```javascript
let a = é(0); let a = é(0);
let b = é(0); let b = é(0);
a.useEffect(()=>{ a.watch(()=>{
// a kablosu değiştiğinde burası çalışacak // a kablosu değiştiğinde burası çalışacak
}) })
b.useEffect(()=>{ b.watch(()=>{
// b kablosu değiştiğinde burası çalışacak // b kablosu değiştiğinde burası çalışacak
}) })
é.useEffect(()=>{ é.watch(()=>{
// a veya b değiştiğinde burası çalışacak // a veya b değiştiğinde burası çalışacak
},[a, b]) },[a, b])
``` ```
@ -57,17 +57,17 @@ let toplayan = é(0);
let toplanan = é(0); let toplanan = é(0);
let sonuc = é(0); let sonuc = é(0);
é.useEffect(()=>{ é.watch(()=>{
sonuc.set( toplayan.get() + toplanan.get() ) sonuc.set( toplayan.get() + toplanan.get() )
},[toplayan, toplanan]) },[toplayan, toplanan])
toplayan.useEffect(()=>{ toplayan.watch(()=>{
console.log("Toplayan: ",toplayan.get()) console.log("Toplayan: ",toplayan.get())
}) })
toplanan.useEffect(()=>{ toplanan.watch(()=>{
console.log("Toplanan: ",toplanan.get()) console.log("Toplanan: ",toplanan.get())
}) })
sonuc.useEffect(()=>{ sonuc.watch(()=>{
console.log("Değişen Sonuç: ",sonuc.get()) console.log("Değişen Sonuç: ",sonuc.get())
}) })

384
wire.js
View File

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