Messaging abstraction

src/extension/content/index.js

@@ -83,7 +83,6 @@ const insertViaWpRestApi = async () => {
 		// 'page': '/wp-json/wp/v2/pages',
 	};
 	for ( const postType in postTypes ) {
-		console.log( postTypes[ postType ] );
 		let page = 1,
 			total = 1;
 		do {

src/extension/sidebar/index.js

@@ -6,7 +6,6 @@ const iframeId = 'playground';
 window.playground = await initPlayground( iframeId );
 
 const relayToPlayground = function ( response ) {
-	console.log( response, chrome.runtime.lastError );
 	if ( response && response.stepId ) {
 		document.getElementById( iframeId ).contentWindow.postMessage(
 			{
@@ -17,8 +16,7 @@ const relayToPlayground = function ( response ) {
 		);
 	}
 	if ( response && response.code && window.playground ) {
-		console.log( response.code );
-		console.log( window.playground.run( response ) );
+		window.playground.run( response );
 	}
 };
 

src/plugin/scripts/index.js

@@ -1,96 +1,98 @@
-if ( document.getElementById( 'try-wordpress-import' ) ) {
-	document
-		.getElementById( 'try-wordpress-import' )
-		.addEventListener( 'click', function () {
-			const progressContainer =
-				document.getElementById( 'progress-container' );
-			progressContainer.style.display = 'block';
+import { EventBus } from '../../shared/event-bus';
 
-			const progressBar = document.getElementById( 'progress-bar' );
-			const progressText = document.getElementById( 'progress-text' );
-			progressBar.style.width = '1%';
-			progressText.textContent = '1%';
+const progressContainer = document.getElementById( 'progress-container' );
+const progressBar = document.getElementById( 'progress-bar' );
+const progressText = document.getElementById( 'progress-text' );
 
-			window.parent.postMessage(
-				{
-					type: 'relay',
-					data: {
-						type: 'try-wordpress-message',
-						action: 'start-import',
-					},
-				},
-				'*'
-			);
+const startImportButton = document.getElementById( 'try-wordpress-import' );
+if ( startImportButton ) {
+	const eventBus = new EventBus( { targetWindow: window.parent } );
+	// TODO.
+	eventBus.addListener( 'foo', () => {} );
 
-			window.addEventListener( 'message', function ( event ) {
-				console.log( event );
-				if (
-					typeof event.data !== 'object' ||
-					event.data.type !== 'relay'
-				) {
-					return;
-				}
-				const data = event.data.data;
+	window.addEventListener( 'message', handleStartImportResponse );
+	window.addEventListener( 'message', handleMessage );
+	startImportButton.addEventListener( 'click', startImport );
+}
+
+function startImport() {
+	progressContainer.style.display = 'block';
+	progressBar.style.width = '1%';
+	progressText.textContent = '1%';
 
-				if ( typeof data.percent !== 'undefined' ) {
-					const percent = data.percent;
-					if ( data.percent < parseInt( progressBar.style.width ) ) {
-						return;
-					}
+	window.parent.postMessage(
+		{
+			type: 'relay',
+			data: {
+				type: 'try-wordpress-message',
+				action: 'start-import',
+			},
+		},
+		'*'
+	);
+}
 
-					progressBar.style.width = percent + '%';
-					progressText.textContent = percent + '%';
+function handleStartImportResponse( event ) {
+	if ( typeof event.data !== 'object' || event.data.type !== 'relay' ) {
+		return;
+	}
+	const data = event.data.data;
+	if ( typeof data.siteTitle !== 'undefined' ) {
+		document.getElementById( 'site-title' ).value = data.siteTitle;
+	}
 
-					if ( percent >= 100 ) {
-						progressBar.className = 'done';
-						progressText.textContent = 'Import Complete!';
-					}
-				}
-			} );
-		} );
+	const todoList = document.getElementById( 'todo-list' );
+	if ( ! todoList ) {
+		return;
+	}
 
-	window.addEventListener( 'message', function ( event ) {
-		console.log( event );
-		if ( typeof event.data !== 'object' || event.data.type !== 'relay' ) {
-			return;
+	if ( typeof data.stepId !== 'undefined' ) {
+		let stepElement = document.getElementById( 'step-' + data.stepId );
+		if ( ! stepElement ) {
+			stepElement = document.createElement( 'li' );
+			stepElement.id = 'step-' + data.stepId;
+			if ( todoList.firstChild ) {
+				todoList.insertBefore( stepElement, todoList.firstChild );
+			} else {
+				todoList.appendChild( stepElement );
+			}
+		}
+		if ( typeof data.stepText !== 'undefined' ) {
+			stepElement.textContent = data.stepText;
 		}
-		const data = event.data.data;
-		console.log( data );
-		if ( typeof data.siteTitle !== 'undefined' ) {
-			document.getElementById( 'site-title' ).value = data.siteTitle;
+		if ( typeof data.stepCssClass !== 'undefined' ) {
+			stepElement.className = data.stepCssClass;
 		}
+	}
 
-		const todoList = document.getElementById( 'todo-list' );
-		if ( ! todoList ) {
-			return;
+	if ( typeof data.removeStepId !== 'undefined' ) {
+		const stepElement = document.getElementById(
+			'step-' + data.removeStepId
+		);
+		if ( stepElement ) {
+			stepElement.parentNode.removeChild( stepElement );
 		}
+	}
+}
 
-		if ( typeof data.stepId !== 'undefined' ) {
-			let stepElement = document.getElementById( 'step-' + data.stepId );
-			if ( ! stepElement ) {
-				stepElement = document.createElement( 'li' );
-				stepElement.id = 'step-' + data.stepId;
-				if ( todoList.firstChild ) {
-					todoList.insertBefore( stepElement, todoList.firstChild );
-				} else {
-					todoList.appendChild( stepElement );
-				}
-			}
-			if ( typeof data.stepText !== 'undefined' ) {
-				stepElement.textContent = data.stepText;
-			}
-			if ( typeof data.stepCssClass !== 'undefined' ) {
-				stepElement.className = data.stepCssClass;
-			}
+function handleMessage( event ) {
+	if ( typeof event.data !== 'object' || event.data.type !== 'relay' ) {
+		return;
+	}
+	const data = event.data.data;
+
+	if ( typeof data.percent !== 'undefined' ) {
+		const percent = data.percent;
+		if ( data.percent < parseInt( progressBar.style.width ) ) {
+			return;
 		}
 
-		if ( typeof data.removeStepId !== 'undefined' ) {
-			const stepElement = document.getElementById(
-				'step-' + data.removeStepId
-			);
-			if ( stepElement ) {
-				stepElement.parentNode.removeChild( stepElement );
-			}
+		progressBar.style.width = percent + '%';
+		progressText.textContent = percent + '%';
+
+		if ( percent >= 100 ) {
+			progressBar.className = 'done';
+			progressText.textContent = 'Import Complete!';
 		}
-	} );
+	}
 }

src/shared/event-bus.js

@@ -0,0 +1,25 @@
+export class EventBus {
+	#window;
+	#targetWindow;
+	#listeners;
+
+	constructor( options = {} ) {
+		if ( ! options.targetWindow ) {
+			throw Error( 'targetWindow option must be set' );
+		}
+		this.#targetWindow = options.targetWindow;
+		this.#window = options.window || window;
+		this.#listeners = [];
+		this.#window.addEventListener( 'message', this.handleEvent );
+	}
+
+	addListener( type, callback ) {
+		// TODO.
+		console.log( type, callback );
+	}
+
+	handleEvent( event ) {
+		// TODO.
+		console.log( event.target );
+	}
+}