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 && cloneId in pendingCallbacks) {
    var callback = pendingCallbacks[cloneId];
    delete pendingCallbacks[cloneId];
    callback(clonedValue);
  }
});

var asyncStructuredClone = function(o, callback) {
  var cloneId = String(Math.random());
  pendingCallbacks[cloneId] = callback;
  window.postMessage({ value: o, cloneId: cloneId }, '*');
};

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

asyncStructuredClone(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));
});