changes

packages/interactivity/src/index.ts

@@ -64,28 +64,16 @@ if (
 	document.prerendering
 ) {
 	document.addEventListener( 'prerenderingchange', () => {
-		const token = window.sessionStorage.getItem( 'interactivity-token' );
-		const bc = new BroadcastChannel( token );
-		bc.addEventListener( 'message', ( event ) => {
-			// First, populate the state from the previous page.
-			populateInitialData( JSON.parse( event.data ) );
-			// Then, overwrite it with the state from the new HTML.
-			const data = parseInitialData();
-			populateInitialData( data );
-		} );
-		bc.postMessage( 'state_request' );
+		const store = window.sessionStorage.getItem(
+			'interactivity-api-store'
+		);
+		populateInitialData( JSON.parse( store ) );
 	} );
 } else {
-	// Create a unique token for this session.
-	// eslint-disable-next-line no-restricted-syntax
-	const token = Math.random().toString( 36 ).slice( 2 );
-	window.sessionStorage.setItem( 'interactivity-token', token );
-
-	// Now, listen to the message event that
-	const bc = new BroadcastChannel( token );
-	bc.addEventListener( 'message', ( event ) => {
-		if ( event.data === 'state_request' ) {
-			bc.postMessage( serializeStore() );
-		}
+	window.addEventListener( 'beforeunload', () => {
+		window.sessionStorage.setItem(
+			'interactivity-api-store',
+			serializeStore()
+		);
 	} );
 }

packages/interactivity/src/store.ts

@@ -349,11 +349,63 @@ export const populateInitialData = ( data?: {
 const data = parseInitialData();
 populateInitialData( data );
 
+function createFilteredReplacer( object ) {
+	const propertiesWithGettersSetters = {};
+
+	// Loop over each property to find getters or setters
+	for ( const key of Object.keys( object ) ) {
+		const descriptor = Object.getOwnPropertyDescriptor( object, key );
+		if ( descriptor.get || descriptor.set ) {
+			propertiesWithGettersSetters[ key ] = true;
+		}
+	}
+
+	// Return a replacer function that checks against this list
+	return function ( key, value ) {
+		if ( propertiesWithGettersSetters[ key ] ) {
+			// Replace getter/setter with undefined or any custom value
+			return undefined;
+		}
+		// Pass other values through
+		return value;
+	};
+}
+
+function replacer( key, value ) {
+	// Determine the type of the value
+	const type = typeof value;
+
+	// Handle arrays explicitly to keep them in the output
+	if ( Array.isArray( value ) ) {
+		return value;
+	}
+
+	// Check for objects, ignore null, functions, and others
+	if ( type === 'object' && value !== null ) {
+		// Skip getters and setters (functions within objects)
+		const plainObject = {};
+		for ( const [ k, v ] of Object.entries( value ) ) {
+			if ( ! Object.getOwnPropertyDescriptor( value, k ).get ) {
+				plainObject[ k ] = v;
+			}
+		}
+		return plainObject;
+	}
+
+	// Allow only strings and numbers, ignore functions and symbols
+	if ( type === 'string' || type === 'number' ) {
+		return value;
+	}
+
+	// Ignore functions, symbols, undefined
+	return undefined;
+}
+
 // Serialize the current store.
 export const serializeStore = () => {
 	const stateData = { state: {} };
 	for ( const [ namespace, value ] of stores.entries() ) {
-		stateData.state[ namespace ] = JSON.stringify( value.state );
+		stateData.state[ namespace ] = JSON.stringify( value.state, replacer );
 	}
 
 	return JSON.stringify( stateData );