penpal - npm Package Compare versions

Comparing version 6.2.1 to 6.2.2

dist/penpal.js

@@ -48,3 +48,3 @@ var Penpal = (function () {
           destroyed = true;
-          log("".concat(localName, ": Destroying connection"));
+          log(`${localName}: Destroying connection`);
           callbacks.forEach(callback => {
@@ -116,4 +116,4 @@ callback(error);
 
-    const portSuffix = port && port !== DEFAULT_PORT_BY_PROTOCOL[protocol] ? ":".concat(port) : '';
-    return "".concat(protocol, "//").concat(hostname).concat(portSuffix);
+    const portSuffix = port && port !== DEFAULT_PORT_BY_PROTOCOL[protocol] ? `:${port}` : '';
+    return `${protocol}//${hostname}${portSuffix}`;
   });
@@ -165,3 +165,3 @@
       if (originForReceiving !== '*' && event.origin !== originForReceiving) {
-        log("".concat(localName, " received message from origin ").concat(event.origin, " which did not match expected origin ").concat(originForReceiving));
+        log(`${localName} received message from origin ${event.origin} which did not match expected origin ${originForReceiving}`);
         return;
@@ -176,7 +176,7 @@ }
       } = callMessage;
-      log("".concat(localName, ": Received ").concat(methodName, "() call"));
+      log(`${localName}: Received ${methodName}() call`);
 
       const createPromiseHandler = resolution => {
         return returnValue => {
-          log("".concat(localName, ": Sending ").concat(methodName, "() reply"));
+          log(`${localName}: Sending ${methodName}() reply`);
 
@@ -189,3 +189,3 @@ if (destroyed) {
             // the value of doing so is questionable. Instead, we'll just log a message.
-            log("".concat(localName, ": Unable to send ").concat(methodName, "() reply due to destroyed connection"));
+            log(`${localName}: Unable to send ${methodName}() reply due to destroyed connection`);
             return;
@@ -346,7 +346,7 @@ }
     let destroyed = false;
-    log("".concat(localName, ": Connecting call sender"));
+    log(`${localName}: Connecting call sender`);
 
     const createMethodProxy = methodName => {
       return (...args) => {
-        log("".concat(localName, ": Sending ").concat(methodName, "() call")); // This handles the case where the iframe has been removed from the DOM
+        log(`${localName}: Sending ${methodName}() call`); // This handles the case where the iframe has been removed from the DOM
         // (and therefore its window closed), the consumer has not yet
@@ -376,3 +376,3 @@ // called destroy(), and the user calls a method exposed by
         if (destroyed) {
-          const error = new Error("Unable to send ".concat(methodName, "() call due ") + "to destroyed connection");
+          const error = new Error(`Unable to send ${methodName}() call due ` + `to destroyed connection`);
           error.code = ErrorCode.ConnectionDestroyed;
@@ -391,3 +391,3 @@ throw error;
             if (originForReceiving !== '*' && event.origin !== originForReceiving) {
-              log("".concat(localName, " received message from origin ").concat(event.origin, " which did not match expected origin ").concat(originForReceiving));
+              log(`${localName} received message from origin ${event.origin} which did not match expected origin ${originForReceiving}`);
               return;
@@ -397,3 +397,3 @@ }
             const replyMessage = event.data;
-            log("".concat(localName, ": Received ").concat(methodName, "() reply"));
+            log(`${localName}: Received ${methodName}() reply`);
             local.removeEventListener(NativeEventType.Message, handleMessageEvent);
@@ -452,3 +452,3 @@ let returnValue = replyMessage.returnValue;
       if (childOrigin !== '*' && event.origin !== childOrigin) {
-        log("Parent: Handshake - Received ACK message from origin ".concat(event.origin, " which did not match expected origin ").concat(childOrigin));
+        log(`Parent: Handshake - Received ACK message from origin ${event.origin} which did not match expected origin ${childOrigin}`);
         return;
@@ -494,4 +494,12 @@ }
     return event => {
+      // Under specific timing circumstances, we can receive an event
+      // whose source is null. This seems to happen when the child iframe is
+      // removed from the DOM about the same time it has sent the SYN event.
+      // https://github.com/Aaronius/penpal/issues/85
+      if (!event.source) {
+        return;
+      }
+
       if (childOrigin !== '*' && event.origin !== childOrigin) {
-        log("Parent: Handshake - Received SYN message from origin ".concat(event.origin, " which did not match expected origin ").concat(childOrigin));
+        log(`Parent: Handshake - Received SYN message from origin ${event.origin} which did not match expected origin ${childOrigin}`);
         return;
@@ -546,3 +554,3 @@ }
       timeoutId = window.setTimeout(() => {
-        const error = new Error("Connection timed out after ".concat(timeout, "ms"));
+        const error = new Error(`Connection timed out after ${timeout}ms`);
         error.code = ErrorCode.ConnectionTimeout;
@@ -657,3 +665,3 @@ callback(error);
       if (!originQualifies) {
-        log("Child: Handshake - Received SYN-ACK from origin ".concat(event.origin, " which did not match expected origin ").concat(parentOrigin));
+        log(`Child: Handshake - Received SYN-ACK from origin ${event.origin} which did not match expected origin ${parentOrigin}`);
         return;
@@ -660,0 +668,0 @@ }

dist/penpal.min.js

@@ -1,1 +0,1 @@
-var Penpal=function(){"use strict";var e;(function(e){e["Call"]="call";e["Reply"]="reply";e["Syn"]="syn";e["SynAck"]="synAck";e["Ack"]="ack"})(e||(e={}));var n;(function(e){e["Fulfilled"]="fulfilled";e["Rejected"]="rejected"})(n||(n={}));var t;(function(e){e["ConnectionDestroyed"]="ConnectionDestroyed";e["ConnectionTimeout"]="ConnectionTimeout";e["NoIframeSrc"]="NoIframeSrc"})(t||(t={}));var o;(function(e){e["DataCloneError"]="DataCloneError"})(o||(o={}));var r;(function(e){e["Message"]="message"})(r||(r={}));var c=(e,n)=>{const t=[];let o=false;return{destroy(r){if(!o){o=true;n("".concat(e,": Destroying connection"));t.forEach(e=>{e(r)})}},onDestroy(e){o?e():t.push(e)}}};var s=e=>(...n)=>{if(e){console.log("[Penpal]",...n)}};const i={"http:":"80","https:":"443"};const a=/^(https?:)?\/\/([^/:]+)?(:(\d+))?/;const d=["file:","data:"];var l=e=>{if(e&&d.find(n=>e.startsWith(n))){return"null"}const n=document.location;const t=a.exec(e);let o;let r;let c;if(t){o=t[1]?t[1]:n.protocol;r=t[2];c=t[4]}else{o=n.protocol;r=n.hostname;c=n.port}const s=c&&c!==i[o]?":".concat(c):"";return"".concat(o,"//").concat(r).concat(s)};const u=({name:e,message:n,stack:t})=>({name:e,message:n,stack:t});const f=e=>{const n=new Error;Object.keys(e).forEach(t=>n[t]=e[t]);return n};var g=(t,c,s)=>{const{localName:i,local:a,remote:d,originForSending:l,originForReceiving:f}=t;let g=false;const m=t=>{if(t.source!==d||t.data.penpal!==e.Call){return}if(f!=="*"&&t.origin!==f){s("".concat(i," received message from origin ").concat(t.origin," which did not match expected origin ").concat(f));return}const r=t.data;const{methodName:a,args:m,id:p}=r;s("".concat(i,": Received ").concat(a,"() call"));const h=t=>r=>{s("".concat(i,": Sending ").concat(a,"() reply"));if(g){s("".concat(i,": Unable to send ").concat(a,"() reply due to destroyed connection"));return}const c={penpal:e.Reply,id:p,resolution:t,returnValue:r};if(t===n.Rejected&&r instanceof Error){c.returnValue=u(r);c.returnValueIsError=true}try{d.postMessage(c,l)}catch(t){if(t.name===o.DataCloneError){const o={penpal:e.Reply,id:p,resolution:n.Rejected,returnValue:u(t),returnValueIsError:true};d.postMessage(o,l)}throw t}};new Promise(e=>e(c[a].apply(c,m))).then(h(n.Fulfilled),h(n.Rejected))};a.addEventListener(r.Message,m);return()=>{g=true;a.removeEventListener(r.Message,m)}};let m=0;var p=()=>++m;const h=".";const v=e=>e?e.split(h):[];const y=e=>e.join(h);const w=(e,n)=>{const t=v(n||"");t.push(e);return y(t)};const C=(e,n,t)=>{const o=v(n);o.reduce((e,n,r)=>{if(typeof e[n]==="undefined"){e[n]={}}if(r===o.length-1){e[n]=t}return e[n]},e);return e};const E=(e,n)=>{const t={};Object.keys(e).forEach(o=>{const r=e[o];const c=w(o,n);if(typeof r==="object"){Object.assign(t,E(r,c))}if(typeof r==="function"){t[c]=r}});return t};const k=e=>{const n={};for(const t in e){C(n,t,e[t])}return n};var R=(o,c,s,i,a)=>{const{localName:d,local:l,remote:u,originForSending:g,originForReceiving:m}=c;let h=false;a("".concat(d,": Connecting call sender"));const v=o=>(...c)=>{a("".concat(d,": Sending ").concat(o,"() call"));let s;try{if(u.closed){s=true}}catch(e){s=true}if(s){i()}if(h){const e=new Error("Unable to send ".concat(o,"() call due ")+"to destroyed connection");e.code=t.ConnectionDestroyed;throw e}return new Promise((t,s)=>{const i=p();const h=c=>{if(c.source!==u||c.data.penpal!==e.Reply||c.data.id!==i){return}if(m!=="*"&&c.origin!==m){a("".concat(d," received message from origin ").concat(c.origin," which did not match expected origin ").concat(m));return}const g=c.data;a("".concat(d,": Received ").concat(o,"() reply"));l.removeEventListener(r.Message,h);let p=g.returnValue;if(g.returnValueIsError){p=f(p)}(g.resolution===n.Fulfilled?t:s)(p)};l.addEventListener(r.Message,h);const v={penpal:e.Call,id:i,methodName:o,args:c};u.postMessage(v,g)})};const y=s.reduce((e,n)=>{e[n]=v(n);return e},{});Object.assign(o,k(y));return()=>{h=true}};var S=(e,n,t,o,r)=>{const{destroy:c,onDestroy:s}=o;let i;let a;const d={};return o=>{if(n!=="*"&&o.origin!==n){r("Parent: Handshake - Received ACK message from origin ".concat(o.origin," which did not match expected origin ").concat(n));return}r("Parent: Handshake - Received ACK");const l={localName:"Parent",local:window,remote:o.source,originForSending:t,originForReceiving:n};if(i){i()}i=g(l,e,r);s(i);if(a){a.forEach(e=>{delete d[e]})}a=o.data.methodNames;const u=R(d,l,a,c,r);s(u);return d}};var N=(n,t,o,r)=>c=>{if(o!=="*"&&c.origin!==o){n("Parent: Handshake - Received SYN message from origin ".concat(c.origin," which did not match expected origin ").concat(o));return}n("Parent: Handshake - Received SYN, responding with SYN-ACK");const s={penpal:e.SynAck,methodNames:Object.keys(t)};c.source.postMessage(s,r)};const M=6e4;var A=(e,n)=>{const{destroy:t,onDestroy:o}=n;const r=setInterval(()=>{if(!e.isConnected){clearInterval(r);t()}},M);o(()=>{clearInterval(r)})};var P=(e,n)=>{let o;if(e!==undefined){o=window.setTimeout(()=>{const o=new Error("Connection timed out after ".concat(e,"ms"));o.code=t.ConnectionTimeout;n(o)},e)}return()=>{clearTimeout(o)}};var j=e=>{if(!e.src&&!e.srcdoc){const e=new Error("Iframe must have src or srcdoc property defined.");e.code=t.NoIframeSrc;throw e}};var D=n=>{let{iframe:t,methods:o={},childOrigin:i,timeout:a,debug:d=false}=n;const u=s(d);const f=c("Parent",u);const{onDestroy:g,destroy:m}=f;if(!i){j(t);i=l(t.src)}const p=i==="null"?"*":i;const h=E(o);const v=N(u,h,i,p);const y=S(h,i,p,f,u);const w=new Promise((n,o)=>{const c=P(a,m);const s=o=>{if(o.source!==t.contentWindow||!o.data){return}if(o.data.penpal===e.Syn){v(o);return}if(o.data.penpal===e.Ack){const e=y(o);if(e){c();n(e)}return}};window.addEventListener(r.Message,s);u("Parent: Awaiting handshake");A(t,f);g(e=>{window.removeEventListener(r.Message,s);if(e){o(e)}})});return{promise:w,destroy(){m()}}};var b=(n,t,o,r)=>{const{destroy:c,onDestroy:s}=o;return o=>{let i=n instanceof RegExp?n.test(o.origin):n==="*"||n===o.origin;if(!i){r("Child: Handshake - Received SYN-ACK from origin ".concat(o.origin," which did not match expected origin ").concat(n));return}r("Child: Handshake - Received SYN-ACK, responding with ACK");const a=o.origin==="null"?"*":o.origin;const d={penpal:e.Ack,methodNames:Object.keys(t)};window.parent.postMessage(d,a);const l={localName:"Child",local:window,remote:window.parent,originForSending:a,originForReceiving:o.origin};const u=g(l,t,r);s(u);const f={};const m=R(f,l,o.data.methodNames,c,r);s(m);return f}};const F=()=>{try{clearTimeout()}catch(e){return false}return true};var I=(n={})=>{const{parentOrigin:t="*",methods:o={},timeout:i,debug:a=false}=n;const d=s(a);const l=c("Child",d);const{destroy:u,onDestroy:f}=l;const g=E(o);const m=b(t,g,l,d);const p=()=>{d("Child: Handshake - Sending SYN");const n={penpal:e.Syn};const o=t instanceof RegExp?"*":t;window.parent.postMessage(n,o)};const h=new Promise((n,t)=>{const o=P(i,u);const c=t=>{if(!F()){return}if(t.source!==parent||!t.data){return}if(t.data.penpal===e.SynAck){const e=m(t);if(e){window.removeEventListener(r.Message,c);o();n(e)}}};window.addEventListener(r.Message,c);p();f(e=>{window.removeEventListener(r.Message,c);if(e){t(e)}})});return{promise:h,destroy(){u()}}};var L={connectToChild:D,connectToParent:I,ErrorCode:t};return L}();
+var Penpal=function(){"use strict";var e;(function(e){e["Call"]="call";e["Reply"]="reply";e["Syn"]="syn";e["SynAck"]="synAck";e["Ack"]="ack"})(e||(e={}));var n;(function(e){e["Fulfilled"]="fulfilled";e["Rejected"]="rejected"})(n||(n={}));var t;(function(e){e["ConnectionDestroyed"]="ConnectionDestroyed";e["ConnectionTimeout"]="ConnectionTimeout";e["NoIframeSrc"]="NoIframeSrc"})(t||(t={}));var o;(function(e){e["DataCloneError"]="DataCloneError"})(o||(o={}));var r;(function(e){e["Message"]="message"})(r||(r={}));var s=(e,n)=>{const t=[];let o=false;return{destroy(r){if(!o){o=true;n(`${e}: Destroying connection`);t.forEach(e=>{e(r)})}},onDestroy(e){o?e():t.push(e)}}};var i=e=>(...n)=>{if(e){console.log("[Penpal]",...n)}};const c={"http:":"80","https:":"443"};const a=/^(https?:)?\/\/([^/:]+)?(:(\d+))?/;const d=["file:","data:"];var l=e=>{if(e&&d.find(n=>e.startsWith(n))){return"null"}const n=document.location;const t=a.exec(e);let o;let r;let s;if(t){o=t[1]?t[1]:n.protocol;r=t[2];s=t[4]}else{o=n.protocol;r=n.hostname;s=n.port}const i=s&&s!==c[o]?`:${s}`:"";return`${o}//${r}${i}`};const u=({name:e,message:n,stack:t})=>({name:e,message:n,stack:t});const f=e=>{const n=new Error;Object.keys(e).forEach(t=>n[t]=e[t]);return n};var g=(t,s,i)=>{const{localName:c,local:a,remote:d,originForSending:l,originForReceiving:f}=t;let g=false;const m=t=>{if(t.source!==d||t.data.penpal!==e.Call){return}if(f!=="*"&&t.origin!==f){i(`${c} received message from origin ${t.origin} which did not match expected origin ${f}`);return}const r=t.data;const{methodName:a,args:m,id:p}=r;i(`${c}: Received ${a}() call`);const h=t=>r=>{i(`${c}: Sending ${a}() reply`);if(g){i(`${c}: Unable to send ${a}() reply due to destroyed connection`);return}const s={penpal:e.Reply,id:p,resolution:t,returnValue:r};if(t===n.Rejected&&r instanceof Error){s.returnValue=u(r);s.returnValueIsError=true}try{d.postMessage(s,l)}catch(t){if(t.name===o.DataCloneError){const o={penpal:e.Reply,id:p,resolution:n.Rejected,returnValue:u(t),returnValueIsError:true};d.postMessage(o,l)}throw t}};new Promise(e=>e(s[a].apply(s,m))).then(h(n.Fulfilled),h(n.Rejected))};a.addEventListener(r.Message,m);return()=>{g=true;a.removeEventListener(r.Message,m)}};let m=0;var p=()=>++m;const h=".";const v=e=>e?e.split(h):[];const y=e=>e.join(h);const w=(e,n)=>{const t=v(n||"");t.push(e);return y(t)};const $=(e,n,t)=>{const o=v(n);o.reduce((e,n,r)=>{if(typeof e[n]==="undefined"){e[n]={}}if(r===o.length-1){e[n]=t}return e[n]},e);return e};const C=(e,n)=>{const t={};Object.keys(e).forEach(o=>{const r=e[o];const s=w(o,n);if(typeof r==="object"){Object.assign(t,C(r,s))}if(typeof r==="function"){t[s]=r}});return t};const E=e=>{const n={};for(const t in e){$(n,t,e[t])}return n};var k=(o,s,i,c,a)=>{const{localName:d,local:l,remote:u,originForSending:g,originForReceiving:m}=s;let h=false;a(`${d}: Connecting call sender`);const v=o=>(...s)=>{a(`${d}: Sending ${o}() call`);let i;try{if(u.closed){i=true}}catch(e){i=true}if(i){c()}if(h){const e=new Error(`Unable to send ${o}() call due `+`to destroyed connection`);e.code=t.ConnectionDestroyed;throw e}return new Promise((t,i)=>{const c=p();const h=s=>{if(s.source!==u||s.data.penpal!==e.Reply||s.data.id!==c){return}if(m!=="*"&&s.origin!==m){a(`${d} received message from origin ${s.origin} which did not match expected origin ${m}`);return}const g=s.data;a(`${d}: Received ${o}() reply`);l.removeEventListener(r.Message,h);let p=g.returnValue;if(g.returnValueIsError){p=f(p)}(g.resolution===n.Fulfilled?t:i)(p)};l.addEventListener(r.Message,h);const v={penpal:e.Call,id:c,methodName:o,args:s};u.postMessage(v,g)})};const y=i.reduce((e,n)=>{e[n]=v(n);return e},{});Object.assign(o,E(y));return()=>{h=true}};var R=(e,n,t,o,r)=>{const{destroy:s,onDestroy:i}=o;let c;let a;const d={};return o=>{if(n!=="*"&&o.origin!==n){r(`Parent: Handshake - Received ACK message from origin ${o.origin} which did not match expected origin ${n}`);return}r("Parent: Handshake - Received ACK");const l={localName:"Parent",local:window,remote:o.source,originForSending:t,originForReceiving:n};if(c){c()}c=g(l,e,r);i(c);if(a){a.forEach(e=>{delete d[e]})}a=o.data.methodNames;const u=k(d,l,a,s,r);i(u);return d}};var S=(n,t,o,r)=>s=>{if(!s.source){return}if(o!=="*"&&s.origin!==o){n(`Parent: Handshake - Received SYN message from origin ${s.origin} which did not match expected origin ${o}`);return}n("Parent: Handshake - Received SYN, responding with SYN-ACK");const i={penpal:e.SynAck,methodNames:Object.keys(t)};s.source.postMessage(i,r)};const N=6e4;var M=(e,n)=>{const{destroy:t,onDestroy:o}=n;const r=setInterval(()=>{if(!e.isConnected){clearInterval(r);t()}},N);o(()=>{clearInterval(r)})};var A=(e,n)=>{let o;if(e!==undefined){o=window.setTimeout(()=>{const o=new Error(`Connection timed out after ${e}ms`);o.code=t.ConnectionTimeout;n(o)},e)}return()=>{clearTimeout(o)}};var P=e=>{if(!e.src&&!e.srcdoc){const e=new Error("Iframe must have src or srcdoc property defined.");e.code=t.NoIframeSrc;throw e}};var j=n=>{let{iframe:t,methods:o={},childOrigin:c,timeout:a,debug:d=false}=n;const u=i(d);const f=s("Parent",u);const{onDestroy:g,destroy:m}=f;if(!c){P(t);c=l(t.src)}const p=c==="null"?"*":c;const h=C(o);const v=S(u,h,c,p);const y=R(h,c,p,f,u);const w=new Promise((n,o)=>{const s=A(a,m);const i=o=>{if(o.source!==t.contentWindow||!o.data){return}if(o.data.penpal===e.Syn){v(o);return}if(o.data.penpal===e.Ack){const e=y(o);if(e){s();n(e)}return}};window.addEventListener(r.Message,i);u("Parent: Awaiting handshake");M(t,f);g(e=>{window.removeEventListener(r.Message,i);if(e){o(e)}})});return{promise:w,destroy(){m()}}};var D=(n,t,o,r)=>{const{destroy:s,onDestroy:i}=o;return o=>{let c=n instanceof RegExp?n.test(o.origin):n==="*"||n===o.origin;if(!c){r(`Child: Handshake - Received SYN-ACK from origin ${o.origin} which did not match expected origin ${n}`);return}r("Child: Handshake - Received SYN-ACK, responding with ACK");const a=o.origin==="null"?"*":o.origin;const d={penpal:e.Ack,methodNames:Object.keys(t)};window.parent.postMessage(d,a);const l={localName:"Child",local:window,remote:window.parent,originForSending:a,originForReceiving:o.origin};const u=g(l,t,r);i(u);const f={};const m=k(f,l,o.data.methodNames,s,r);i(m);return f}};const b=()=>{try{clearTimeout()}catch(e){return false}return true};var F=(n={})=>{const{parentOrigin:t="*",methods:o={},timeout:c,debug:a=false}=n;const d=i(a);const l=s("Child",d);const{destroy:u,onDestroy:f}=l;const g=C(o);const m=D(t,g,l,d);const p=()=>{d("Child: Handshake - Sending SYN");const n={penpal:e.Syn};const o=t instanceof RegExp?"*":t;window.parent.postMessage(n,o)};const h=new Promise((n,t)=>{const o=A(c,u);const s=t=>{if(!b()){return}if(t.source!==parent||!t.data){return}if(t.data.penpal===e.SynAck){const e=m(t);if(e){window.removeEventListener(r.Message,s);o();n(e)}}};window.addEventListener(r.Message,s);p();f(e=>{window.removeEventListener(r.Message,s);if(e){t(e)}})});return{promise:h,destroy(){u()}}};var I={connectToChild:j,connectToParent:F,ErrorCode:t};return I}();

es5/child/handleSynAckMessageFactory.js

@@ -28,3 +28,3 @@ "use strict";
     if (!originQualifies) {
-      log("Child: Handshake - Received SYN-ACK from origin ".concat(event.origin, " which did not match expected origin ").concat(parentOrigin));
+      log(`Child: Handshake - Received SYN-ACK from origin ${event.origin} which did not match expected origin ${parentOrigin}`);
       return;
@@ -31,0 +31,0 @@ }

es5/connectCallReceiver.js

@@ -32,3 +32,3 @@ "use strict";
     if (originForReceiving !== '*' && event.origin !== originForReceiving) {
-      log("".concat(localName, " received message from origin ").concat(event.origin, " which did not match expected origin ").concat(originForReceiving));
+      log(`${localName} received message from origin ${event.origin} which did not match expected origin ${originForReceiving}`);
       return;
@@ -43,7 +43,7 @@ }
     } = callMessage;
-    log("".concat(localName, ": Received ").concat(methodName, "() call"));
+    log(`${localName}: Received ${methodName}() call`);
 
     const createPromiseHandler = resolution => {
       return returnValue => {
-        log("".concat(localName, ": Sending ").concat(methodName, "() reply"));
+        log(`${localName}: Sending ${methodName}() reply`);
 
@@ -56,3 +56,3 @@ if (destroyed) {
           // the value of doing so is questionable. Instead, we'll just log a message.
-          log("".concat(localName, ": Unable to send ").concat(methodName, "() reply due to destroyed connection"));
+          log(`${localName}: Unable to send ${methodName}() reply due to destroyed connection`);
           return;
@@ -59,0 +59,0 @@ }

es5/connectCallSender.js

@@ -38,7 +38,7 @@ "use strict";
   let destroyed = false;
-  log("".concat(localName, ": Connecting call sender"));
+  log(`${localName}: Connecting call sender`);
 
   const createMethodProxy = methodName => {
     return (...args) => {
-      log("".concat(localName, ": Sending ").concat(methodName, "() call")); // This handles the case where the iframe has been removed from the DOM
+      log(`${localName}: Sending ${methodName}() call`); // This handles the case where the iframe has been removed from the DOM
       // (and therefore its window closed), the consumer has not yet
@@ -68,3 +68,3 @@ // called destroy(), and the user calls a method exposed by
       if (destroyed) {
-        const error = new Error("Unable to send ".concat(methodName, "() call due ") + "to destroyed connection");
+        const error = new Error(`Unable to send ${methodName}() call due ` + `to destroyed connection`);
         error.code = _enums.ErrorCode.ConnectionDestroyed;
@@ -83,3 +83,3 @@ throw error;
           if (originForReceiving !== '*' && event.origin !== originForReceiving) {
-            log("".concat(localName, " received message from origin ").concat(event.origin, " which did not match expected origin ").concat(originForReceiving));
+            log(`${localName} received message from origin ${event.origin} which did not match expected origin ${originForReceiving}`);
             return;
@@ -89,3 +89,3 @@ }
           const replyMessage = event.data;
-          log("".concat(localName, ": Received ").concat(methodName, "() reply"));
+          log(`${localName}: Received ${methodName}() reply`);
           local.removeEventListener(_enums.NativeEventType.Message, handleMessageEvent);
@@ -92,0 +92,0 @@ let returnValue = replyMessage.returnValue;

es5/createDestructor.js

@@ -15,3 +15,3 @@ "use strict";
         destroyed = true;
-        log("".concat(localName, ": Destroying connection"));
+        log(`${localName}: Destroying connection`);
         callbacks.forEach(callback => {
@@ -18,0 +18,0 @@ callback(error);

es5/parent/getOriginFromSrc.js

@@ -49,6 +49,6 @@ "use strict";
 
-  const portSuffix = port && port !== DEFAULT_PORT_BY_PROTOCOL[protocol] ? ":".concat(port) : '';
-  return "".concat(protocol, "//").concat(hostname).concat(portSuffix);
+  const portSuffix = port && port !== DEFAULT_PORT_BY_PROTOCOL[protocol] ? `:${port}` : '';
+  return `${protocol}//${hostname}${portSuffix}`;
 };
 
 exports.default = _default;

es5/parent/handleAckMessageFactory.js

@@ -31,3 +31,3 @@ "use strict";
     if (childOrigin !== '*' && event.origin !== childOrigin) {
-      log("Parent: Handshake - Received ACK message from origin ".concat(event.origin, " which did not match expected origin ").concat(childOrigin));
+      log(`Parent: Handshake - Received ACK message from origin ${event.origin} which did not match expected origin ${childOrigin}`);
       return;
@@ -34,0 +34,0 @@ }

es5/parent/handleSynMessageFactory.js

@@ -15,4 +15,12 @@ "use strict";
   return event => {
+    // Under specific timing circumstances, we can receive an event
+    // whose source is null. This seems to happen when the child iframe is
+    // removed from the DOM about the same time it has sent the SYN event.
+    // https://github.com/Aaronius/penpal/issues/85
+    if (!event.source) {
+      return;
+    }
+
     if (childOrigin !== '*' && event.origin !== childOrigin) {
-      log("Parent: Handshake - Received SYN message from origin ".concat(event.origin, " which did not match expected origin ").concat(childOrigin));
+      log(`Parent: Handshake - Received SYN message from origin ${event.origin} which did not match expected origin ${childOrigin}`);
       return;
@@ -19,0 +27,0 @@ }

es5/startConnectionTimeout.js

@@ -19,3 +19,3 @@ "use strict";
     timeoutId = window.setTimeout(() => {
-      const error = new Error("Connection timed out after ".concat(timeout, "ms"));
+      const error = new Error(`Connection timed out after ${timeout}ms`);
       error.code = _enums.ErrorCode.ConnectionTimeout;
@@ -22,0 +22,0 @@ callback(error);

lib/parent/handleSynMessageFactory.js

@@ -7,2 +7,9 @@ import { MessageType } from '../enums';
     return (event) => {
+        // Under specific timing circumstances, we can receive an event
+        // whose source is null. This seems to happen when the child iframe is
+        // removed from the DOM about the same time it has sent the SYN event.
+        // https://github.com/Aaronius/penpal/issues/85
+        if (!event.source) {
+            return;
+        }
         if (childOrigin !== '*' && event.origin !== childOrigin) {
@@ -9,0 +16,0 @@ log(`Parent: Handshake - Received SYN message from origin ${event.origin} which did not match expected origin ${childOrigin}`);

package.json

 {
   "name": "penpal",
-  "version": "6.2.1",
+  "version": "6.2.2",
   "description": "A promise-based library for communicating with iframes via postMessage.",
@@ -5,0 +5,0 @@ "author": "Aaron Hardy <[e-mail]>",

README.md

@@ -128,3 +128,3 @@ [![npm version](https://badge.fury.io/js/penpal.svg)](https://badge.fury.io/js/penpal)
 
-In the vast majority of cases, Penpal can automatically determine the child origin based on the `src` or `srcdoc` property that you have set on the iframe. This will automatically restrict communication to that origin.
+In the vast majority of cases, Penpal can automatically determine the child origin based on the `src` or `srcdoc` property that you have set on the iframe. Communication will automatically be restricted to that origin.
 
@@ -253,2 +253,6 @@ In some rare cases, particularly when using the `file://` protocol on various devices, browsers are inconsistent in how they report and handle origins. If you receive an error saying that the parent received a handshake from an unexpected origin, you may need to manually pass the child origin using this option.
 
+## React
+
+If you're using Penpal within a React app, please check out [react-penpal](https://github.com/Lunuy/react-penpal).
+
 ## Supported Browsers
@@ -255,0 +259,0 @@

No alert changes

Improved metrics

Total package byte prevSize

131324

increased by0.05%

Lines of code

2516

increased by0.84%

Number of lines in readme file

272

increased by1.49%

No dependency changes