mirror of
https://github.com/amark/gun.git
synced 2026-02-28 14:13:25 +00:00
4221c24e84
Change `Gun.logs` to `Gun.traces` and `Gun._log` to `Gun._trace`. Overload get,put,on,map
135 lines
3.6 KiB
HTML
135 lines
3.6 KiB
HTML
<html>
|
|
<head>
|
|
<title>Gun Msg Trace</title>
|
|
<style>
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0 0;
|
|
font-family: monospace;
|
|
padding: 10px 15px;
|
|
}
|
|
body {
|
|
background: rgba(0,0,0,0.7);
|
|
}
|
|
#trace {
|
|
}
|
|
#editor {
|
|
width: 90%;
|
|
height: 90%;
|
|
background: gray;
|
|
}
|
|
|
|
#diagram {
|
|
/* width: 100%; */
|
|
/* height: 100%; */
|
|
margin: 0 auto;
|
|
/* background: #d2d2d2; */
|
|
/* position: absolute; */
|
|
top:0;
|
|
left:0;
|
|
}
|
|
/*#diagram svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}*/
|
|
#diagram svg text {
|
|
fill: #79ce7f;
|
|
}
|
|
#diagram svg text:hover {
|
|
fill: #20ff3b;
|
|
cursor: pointer;
|
|
}
|
|
#diagram svg .note rect, #diagram svg .note path {
|
|
fill: #666666;
|
|
}
|
|
#diagram svg .title rect,
|
|
#diagram svg .title path,
|
|
#diagram svg .actor rect,
|
|
#diagram svg .actor path {
|
|
fill: #ffffff;
|
|
}
|
|
#diagram svg .actor text {
|
|
fill: #000000;
|
|
}
|
|
#diagram svg .actor line {
|
|
fill: #000000;
|
|
stroke-width: 5px;
|
|
}
|
|
#diagram svg line {
|
|
stroke: rgba(0,0,0,0.5);
|
|
/* stroke-width: 5px; */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="trace">
|
|
<h1>GUN internals</h1>
|
|
<!-- <h3>Chain Log</h3> -->
|
|
<!-- <div id="logschain"></div> -->
|
|
<h2></h2>
|
|
<div id="diagram"></div>
|
|
</div>
|
|
<script src="../gun.js"></script>
|
|
<script src="../sea.js"></script>
|
|
<script src="./trace.js"></script>
|
|
|
|
<script src="../examples/jquery.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/gh/bramp/js-sequence-diagrams/test/webfont-mock.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/snapsvg@0.5.1/dist/snap.svg.min.js"></script>
|
|
<script src="https://pagecdn.io/lib/underscore/1.11.0/underscore.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/gh/bramp/js-sequence-diagrams/dist/sequence-diagram-min.js"></script>
|
|
<script>
|
|
;(function(){
|
|
// OVERLOAD GUN FUNCTIONS THAT WE WANT TO TRACE:
|
|
var _get = Gun.on._get;
|
|
Gun.on._get = function(a,b,c,d,e){ Gun._trace('_GET', a); _get.call(this, a,b,c,d,e) }
|
|
var get = Gun.chain.get;
|
|
Gun.chain.get = function(a,b,c,d,e){ Gun._trace('GET', a); return get.call(this, a,b,c,d,e) }
|
|
var put = Gun.chain.put;
|
|
Gun.chain.put = function(a,b,c,d,e){ Gun._trace('PUT', a); put.call(this, a,b,c,d,e) }
|
|
|
|
var on = Gun.chain.on;
|
|
Gun.chain.on = function(a,b,c,d,e){ Gun._trace('ON', a); on.call(this, a,b,c,d,e) }
|
|
|
|
var map = Gun.chain.map;
|
|
Gun.chain.map = function(a,b,c,d,e){ Gun._trace('MAP', a); map.call(this, a,b,c,d,e) }
|
|
|
|
var input = Gun.on.in;
|
|
Gun.on.in = function(a,b,c,d,e){ Gun._trace('input', a); input.call(this, a,b,c,d,e) }
|
|
|
|
var output = Gun.on.out;
|
|
Gun.on.out = function(a,b,c,d,e){ Gun._trace('output', a); output.call(this, a,b,c,d,e) }
|
|
}());
|
|
|
|
;(function(){ // PASTE YOUR UNIT TEST INTO HERE TO TRACE IT!
|
|
var gun = window.gun = Gun();
|
|
var data = {
|
|
levelA2: { levelA3: { levelA4: { levelA5: "hello" } } },
|
|
//levelB2: { levelB3: { levelB4: { levelB5: "world" } } }
|
|
};
|
|
//gun.get('level1').put(data);
|
|
//gun.get('level1').map().map().on(function(v,k){ console.log('level3', k, v); check[k] = v });
|
|
// gun.get('level2').put({D1: 'hello!!', C1: 'world!!'})
|
|
gun.get('level1').put({A1: 'hello', B1: 'world'}, function(ack){
|
|
Gun._trace('ACKED')
|
|
//console.log('ack!', ack);
|
|
gun.get('level1').on(function(data){
|
|
Gun._trace('READ')
|
|
//console.log("read!", data);
|
|
});
|
|
});
|
|
}());
|
|
|
|
Gun.on('trace.end', function(msg){
|
|
var code = msg.code, id;
|
|
console.log('_____TOTAL LOGS: ',Gun.traces.length, new Date());
|
|
$('h2:first').text(`Total of steps: ${Gun.traces.length}`);
|
|
$('title:first').text(`(${Gun.traces.length}) steps | Gun Msg Trace`);
|
|
var diagram = Diagram.parse(code);
|
|
diagram.drawSVG(id||'diagram', {theme: 'simple'});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|