JSFiddle - React, Tailwind, and code Playground
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 ];
var clonePrototype = Object.getPrototypeOf(clonedValue);
var originalPrototype = Object.getPrototypeOf(original);
if(clonePrototype !== originalPrototype) {
var clone = Object.create(originalPrototype);
Object.getOwnPropertyNames(clonedValue).forEach(function(key) {
clone[key] = (clonedValue[key] === clonedValue ? clone : clonedValue[key]);
});
clonedValue = clone;
}
callback( clonedValue );
}
});
var structuredClone = function( o, callback ) {
var cloneId = String( Math.random() );
pendingCallbacks[ cloneId ] = callback;
window.postMessage({ value: o, cloneId: cloneId }, "*");
};
function a(d){$.extend(this,d)}
var original = new a({ date: new Date(), number: Math.random() });
original.self = original;
structuredClone( original, function( clone ) {
// They're different objects:
print( original !== clone );
print( original.date !== clone.date );
// They're cyclical:
print( original.self === original );
print( clone.self === clone );
console.log(original);
console.log(clone);
// They contain equivalent values:
print( original.number === clone.number );
print( Number(original.date) === Number(clone.date) );
});
function print(msg) {
var el = document.createElement( "div" );
el.textContent = String( msg );
document.body.appendChild( el );
}