Add the ability to reload the iframe (#21)

* First pass at allowing reloading * Build after installing, so we can use GitHub branches as dependencies * Use npm instead of make for postinstall * Try using postinstall-build for postinstall? * Package: need to include index.js, so it can be built. * Package: need to include Makefile, too. * Wait for a message from the iframe to trigger onload() * Run the test suite twice - once normally, then once after reload. * Add myself as a contributor * Fix some code formatting bugs * Let prepublish build the lib when installed as a dependency * Bump package version to v4.0.0 * Don't add index.js and Makefile to npm package
Automattic · Feb 18, 2020 · f7670ba · f7670ba
1 parent eaa2224
commit f7670ba
Show file tree

Hide file tree

Showing 3 changed files with 252 additions and 218 deletions.
diff --git a/packages/wpcom-proxy-request/index.js b/packages/wpcom-proxy-request/index.js
@@ -335,9 +335,6 @@ function install() {
 	// create the <iframe>
 	iframe = document.createElement( 'iframe' );
 
-	// set `loaded` to true once the "load" event happens
-	event.bind( iframe, 'load', onload );
-
 	// set `src` and hide the iframe
 	iframe.src = proxyOrigin + '/wp-admin/rest-proxy/#' + origin;
 	iframe.style.display = 'none';
@@ -346,6 +343,15 @@ function install() {
 	document.body.appendChild( iframe );
 }
 
+/**
+ * Reloads the proxy iframe.
+ *
+ * @api public
+ */
+const reloadProxy = () => {
+	install();
+};
+
 /**
  * Removes the <iframe> proxy instance from the <body> of the page.
  *
@@ -354,6 +360,7 @@ function install() {
 function uninstall() {
 	debug( 'uninstall()' );
 	document.body.removeChild( iframe );
+	loaded = false;
 	iframe = null;
 }
 
@@ -401,6 +408,13 @@ function onmessage( e ) {
 		data = JSON.parse( data );
 	}
 
+	// Once the iframe is loaded, we can start using it.
+	// The proxy iframe defaults to sending as a string, so test both string and array.
+	if ( 'ready' === data[0] || '["ready",null,null]' === data ) {
+		onload();
+		return;
+	}
+
 	// check if we're receiving a "progress" event
 	if ( data.upload || data.download ) {
 		return onprogress( data );
@@ -531,4 +545,4 @@ function reject( xhr, err, headers ) {
  * Export `request` function.
  */
 export default request;
-
+export { reloadProxy };
diff --git a/packages/wpcom-proxy-request/package.json b/packages/wpcom-proxy-request/package.json
@@ -12,12 +12,13 @@
   "scripts": {
     "prepublish": "make build"
   },
-  "version": "3.1.0",
+  "version": "4.0.0",
   "author": "Automattic, Inc.",
   "contributors": [
     "Damian Suarez <rdsuarez@gmail.com>",
     "Nathan Rajlich <nathan@automattic.com>",
-    "Andy Skelton <andy@automattic.com>"
+    "Andy Skelton <andy@automattic.com>",
+    "Gary Pendergast <gary@pento.net>"
   ],
   "files": [
     "build",
@@ -36,8 +37,10 @@
   },
   "devDependencies": {
     "babel-eslint": "^6.1.0",
+    "chai": "^4.1.0",
     "chokidar-cli": "^1.2.0",
     "eslint": "^3.0.0",
+    "mocha": "^3.4.2",
     "n8-make": "^1.4.0",
     "serve": "^1.4.0",
     "webpack": "^1.13.1"