JSFiddle - React, Tailwind, and code Playground
HTML
<div id="example">
</div>
JavaScript
// using https://gist.github.com/wentout/263f7e73ba4f14c1a125b40a1aafa8a0
'use strict';
// HOOKS EXAMPLE START
var counter = 0;
var currentId = 0;
var hooks = {
init: [],
before: [],
after: [],
// unable to implement real destroy
// cause no access to GC
destroy: []
};
// we wouldn't implement hookClearTimeout,
// cause it long for just an example
// in real life same code wraps setTimeout in node!!!
var hookSetTimeoout = function (cb, t, ...params) {
counter++;
hooks.init.forEach(function (hook) {
hook(counter, currentId, cb);
});
var runWrapper = function (hook) {
var destroyId = currentId;
hooks.destroy.forEach(function (hook) {
// need to skip one else frame
// before deleting
setTimeout(function () {
hook(this); // previous currentId
}.bind(destroyId), 0);
});
currentId = this;
hooks.before.forEach(function (hook) {
hook(currentId);
});
cb.call(null, ...params);
hooks.after.forEach(function (hook) {
hook(currentId);
});
}.bind(counter);
setTimeout(runWrapper, t);
};
// HOOKS EXAMPLE STOP
// [C|T]LS EXAMPLE START
// var context = {};
var context = new Map();
context.set(0, 'unreachable');
var stack = [0];
hooks.init.push(function (asyncId, triggerId) {
// context[asyncId] = context[triggerId];
context.set(asyncId, context.get(triggerId));
});
hooks.before.push(function (asyncId) {
stack.push(asyncId);
});
hooks.after.push(function () {
stack.pop();
});
hooks.destroy.push(function (asyncId) {
context.delete(asyncId);
// delete context[asyncId];
});
// wouldn't implement stop tracing!
var cls = {
getData() {
// return context[stack.slice(-1)[0]];
return context.get(stack.slice(-1)[0]);
},
setData(data) {
// context[stack.slice(-1)[0]] = data;
context.set(stack.slice(-1)[0], data);
}
};
// [C|T] EXAMPLE STOP
var logStore = document.getElementById('example');
var log = function (message) {
logStore.innerHTML += message + '<br>';
};
// WORKING EXAMPLE CODE...