JSFiddle - React, Tailwind, and code Playground

by Jeremy Banks

JavaScript

var pendingCallbacks = {};

window.addEventListener('message', function(e) {
    var cloneId = e.data.cloneId,
        clonedValue = e.data.value;

    if (e.source === window && cloneId != null && cloneId in pendingCallbacks) {
        var callback = pendingCallbacks[cloneId];
        delete pendingCallbacks[cloneId];
        callback(clonedValue);
    }
});

var asyncStructuredClone_windowPostMessage = function(o, callback) {
    var cloneId = asyncStructuredClone_windowPostMessage.nextCloneId_++;
    pendingCallbacks[cloneId] = callback;
    window.postMessage({ value: o, cloneId: cloneId }, '*');
};
asyncStructuredClone_windowPostMessage.nextCloneId_ = 0;

var original = { date: new Date(), number: Math.random() };
original.self = original;

asyncStructuredClone_windowPostMessage(original, function(clone) {
    // They're different objects:
    console.log(original !== clone);
    console.log(original.date !== clone.date);

    // They're cyclical:
    console.log(original.self === original);
    console.log(clone.self === clone);

    // They contain equivalent values:
    console.log(original.number === clone.number);
    console.log(Number(original.date) === Number(clone.date));
});