iframe.io 0.0.8 → 0.0.10

package/dist/index.d.ts

@@ -0,0 +1,40 @@
+export declare type PeerType = 'WINDOW' | 'IFRAME';
+export declare type CallbackFunction = (error: boolean | string, ...args: any[]) => void;
+export declare type Listener = (payload?: any, callback?: CallbackFunction) => void;
+export declare type Options = {
+    type?: PeerType;
+    debug?: boolean;
+};
+export interface RegisteredEvents {
+    [index: string]: Listener[];
+}
+export declare type Peer = {
+    type: PeerType;
+    source?: Window;
+    origin?: string;
+};
+export declare type MessageData = {
+    _event: string;
+    payload: any;
+    callback: boolean;
+};
+export declare type Message = {
+    origin: string;
+    data: MessageData;
+    source: Window;
+};
+export default class IOF {
+    Events: RegisteredEvents;
+    peer: Peer;
+    options: Options;
+    constructor(options: Options);
+    debug(...args: any[]): void;
+    initiate(contentWindow: MessageEventSource, iframeOrigin: string): this;
+    listen(hostOrigin?: string): this;
+    fire(_event: string, payload?: MessageData['payload'], callback?: boolean): void;
+    emit(_event: string, payload?: MessageData['payload'], fn?: Listener): this;
+    on(_event: string, fn: Listener): this;
+    once(_event: string, fn: Listener): this;
+    off(_event: string, fn: Listener): this;
+    removeListeners(fn: Listener): this;
+}

package/dist/index.js

@@ -23,8 +23,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 function newObject(data) {
     return JSON.parse(JSON.stringify(data));
 }
-var IFrameIO = /** @class */ (function () {
-    function IFrameIO(options) {
+var IOF = /** @class */ (function () {
+    function IOF(options) {
         if (options && typeof options !== 'object')
             throw new Error('Invalid Options');
         this.options = options;
@@ -33,14 +33,14 @@ var IFrameIO = /** @class */ (function () {
         if (options.type)
             this.peer.type = options.type.toUpperCase();
     }
-    IFrameIO.prototype.debug = function () {
+    IOF.prototype.debug = function () {
         var args = [];
         for (var _i = 0; _i < arguments.length; _i++) {
             args[_i] = arguments[_i];
         }
         this.options && this.options.debug && console.log.apply(console, args);
     };
-    IFrameIO.prototype.initiate = function (contentWindow, iframeOrigin) {
+    IOF.prototype.initiate = function (contentWindow, iframeOrigin) {
         var _this = this;
         // Establish a connection with an iframe containing in the current window
         if (!contentWindow || !iframeOrigin)
@@ -62,17 +62,17 @@ var IFrameIO = /** @class */ (function () {
             // Handshake or availability check events
             if (_event == 'pong') {
                 // Content Window is connected to iframe
-                _this.trigger('connect');
+                _this.fire('connect');
                 return _this.debug("[".concat(_this.peer.type, "] connected"));
             }
-            // Trigger available event listeners
-            _this.trigger(_event, payload, callback);
+            // Fire available event listeners
+            _this.fire(_event, payload, callback);
         }, false);
         this.debug("[".concat(this.peer.type, "] Initiate connection: IFrame origin <").concat(iframeOrigin, ">"));
         this.emit('ping');
         return this;
     };
-    IFrameIO.prototype.listen = function (hostOrigin) {
+    IOF.prototype.listen = function (hostOrigin) {
         // Listening to connection from the content window
         var _this = this;
         this.peer.type = 'IFRAME'; // iframe.io connection listener is automatically set as IFRAME
@@ -101,15 +101,15 @@ var IFrameIO = /** @class */ (function () {
             if (_event == 'ping') {
                 _this.emit('pong');
                 // Iframe is connected to content window
-                _this.trigger('connect');
+                _this.fire('connect');
                 return _this.debug("[".concat(_this.peer.type, "] connected"));
             }
-            // Trigger available event listeners
-            _this.trigger(_event, payload, callback);
+            // Fire available event listeners
+            _this.fire(_event, payload, callback);
         }, false);
         return this;
     };
-    IFrameIO.prototype.trigger = function (_event, payload, callback) {
+    IOF.prototype.fire = function (_event, payload, callback) {
         var _this = this;
         // Volatile event
         if (!this.Events[_event]
@@ -129,15 +129,15 @@ var IFrameIO = /** @class */ (function () {
             // Once triggable event
             _event += '--@once';
             listeners = this.Events[_event];
-            // Delete once event listeners after triggered
+            // Delete once event listeners after fired
             delete this.Events[_event];
         }
         else
             listeners = this.Events[_event];
-        // Trigger listeners
+        // Fire listeners
         listeners.map(function (fn) { return payload ? fn(payload, callbackFn) : fn(callbackFn); });
     };
-    IFrameIO.prototype.emit = function (_event, payload, fn) {
+    IOF.prototype.emit = function (_event, payload, fn) {
         if (!this.peer.source)
             throw new Error('No Connection initiated');
         if (typeof payload == 'function') {
@@ -157,7 +157,7 @@ var IFrameIO = /** @class */ (function () {
         this.peer.source.postMessage(newObject({ _event: _event, payload: payload, callback: hasCallback }), this.peer.origin);
         return this;
     };
-    IFrameIO.prototype.on = function (_event, fn) {
+    IOF.prototype.on = function (_event, fn) {
         // Add Event listener
         if (!this.Events[_event])
             this.Events[_event] = [];
@@ -165,7 +165,7 @@ var IFrameIO = /** @class */ (function () {
         this.debug("[".concat(this.peer.type, "] New <").concat(_event, "> listener on"));
         return this;
     };
-    IFrameIO.prototype.once = function (_event, fn) {
+    IOF.prototype.once = function (_event, fn) {
         // Add Once Event listener
         _event += '--@once';
         if (!this.Events[_event])
@@ -174,20 +174,20 @@ var IFrameIO = /** @class */ (function () {
         this.debug("[".concat(this.peer.type, "] New <").concat(_event, " once> listener on"));
         return this;
     };
-    IFrameIO.prototype.off = function (_event, fn) {
+    IOF.prototype.off = function (_event, fn) {
         // Remove Event listener
         delete this.Events[_event];
         typeof fn == 'function' && fn();
         this.debug("[".concat(this.peer.type, "] <").concat(_event, "> listener off"));
         return this;
     };
-    IFrameIO.prototype.removeListeners = function (fn) {
+    IOF.prototype.removeListeners = function (fn) {
         // Clear all event listeners
         this.Events = {};
         typeof fn == 'function' && fn();
         this.debug("[".concat(this.peer.type, "] All listeners removed"));
         return this;
     };
-    return IFrameIO;
+    return IOF;
 }());
-exports.default = IFrameIO;
+exports.default = IOF;

package/package.json

@@ -1,16 +1,9 @@
 {
   "name": "iframe.io",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Easy and friendly API to connect and interact between content window and its containing iframe",
   "main": "./dist/index.js",
-  "types": "./src/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js",
-      "types": "./src/index.d.ts"
-    }
-  },
+  "types": "./dist/index.d.ts",
   "private": false,
   "scripts": {
     "compile": "rimraf ./dist && tsc",
@@ -27,7 +20,8 @@
     "typescript": "^4.5.5"
   },
   "files": [
-    "dist/"
+    "dist/",
+    "src/"
   ],
   "directories": {
     "example": "example/",

package/src/index.ts

@@ -0,0 +1,229 @@
+
+export type PeerType = 'WINDOW' | 'IFRAME'
+
+export type CallbackFunction = ( error: boolean | string, ...args: any[] ) => void
+export type Listener = ( payload?: any, callback?: CallbackFunction ) => void
+
+export type Options = {
+  type?: PeerType
+  debug?: boolean
+}
+
+export interface RegisteredEvents {
+  [index: string]: Listener[]
+}
+
+export type Peer = {
+  type: PeerType
+  source?: Window
+  origin?: string
+}
+
+export type MessageData = {
+  _event: string
+  payload: any
+  callback: boolean
+}
+
+export type Message = {
+  origin: string
+  data: MessageData,
+  source: Window
+}
+
+function newObject( data: object ){
+  return JSON.parse( JSON.stringify( data ) )
+}
+
+export default class IOF {
+
+  Events: RegisteredEvents
+  peer: Peer
+  options: Options
+
+  constructor( options: Options ){
+
+    if( options && typeof options !== 'object' )
+      throw new Error('Invalid Options')
+    
+    this.options = options
+	  this.Events = {}
+    this.peer = { type: 'IFRAME' }
+
+    if( options.type ) 
+      this.peer.type = options.type.toUpperCase() as PeerType
+  }
+
+  debug( ...args: any[] ){ this.options && this.options.debug && console.log( ...args ) }
+
+  initiate( contentWindow: MessageEventSource, iframeOrigin: string ){
+    // Establish a connection with an iframe containing in the current window
+    if( !contentWindow || !iframeOrigin )
+      throw new Error('Invalid Connection initiation arguments')
+    
+    if( this.peer.type === 'IFRAME' )
+      throw new Error('Expect IFRAME to <listen> and WINDOW to <initiate> a connection')
+
+    this.peer.source = contentWindow as Window
+    this.peer.origin = iframeOrigin
+    
+    window.addEventListener( 'message', ({ origin, data, source }) => {
+      // Check valid message
+      if( origin !== this.peer.origin
+          || !source
+          || typeof data !== 'object'
+          || !data.hasOwnProperty('_event') ) return
+          
+      const { _event, payload, callback } = data as Message['data']
+      this.debug( `[${this.peer.type}] Message: ${_event}`, payload || '' )
+
+      // Handshake or availability check events
+      if( _event == 'pong' ){
+        // Content Window is connected to iframe
+        this.fire('connect')
+        return this.debug(`[${this.peer.type}] connected`)
+      }
+
+      // Fire available event listeners
+      this.fire( _event, payload, callback )
+    }, false )
+
+    this.debug(`[${this.peer.type}] Initiate connection: IFrame origin <${iframeOrigin}>`)
+    this.emit('ping')
+
+    return this
+  }
+
+  listen( hostOrigin?: string ){
+    // Listening to connection from the content window
+    
+    this.peer.type = 'IFRAME' // iframe.io connection listener is automatically set as IFRAME
+    this.debug(`[${this.peer.type}] Listening to connect${hostOrigin ? `: Host <${hostOrigin}>` : ''}`)
+
+    window.addEventListener( 'message', ({ origin, data, source }) => {
+      // Check host origin where event must only come from.
+      if( hostOrigin && hostOrigin !== origin )
+        throw new Error('Invalid Event Origin')
+        
+      // Check valid message
+      if( !source
+          || typeof data !== 'object'
+          || !data.hasOwnProperty('_event') ) return
+
+      // Define peer source window and origin
+      if( !this.peer.source ){
+        this.peer = { ...this.peer, source: source as Window, origin }
+        this.debug(`[${this.peer.type}] Connect to ${origin}`)
+      }
+
+      // Origin different from handshaked source origin
+      else if( origin !== this.peer.origin )
+        throw new Error('Invalid Origin')
+      
+      const { _event, payload, callback } = data
+      this.debug( `[${this.peer.type}] Message: ${_event}`, payload || '' )
+
+      // Handshake or availability check events
+      if( _event == 'ping' ){
+        this.emit('pong')
+
+        // Iframe is connected to content window
+        this.fire('connect')
+        return this.debug(`[${this.peer.type}] connected`)
+      }
+
+      // Fire available event listeners
+      this.fire( _event, payload, callback )
+    }, false )
+
+    return this
+  }
+
+  fire( _event: string, payload?: MessageData['payload'], callback?: boolean ){
+    // Volatile event
+    if( !this.Events[ _event ] 
+        && !this.Events[ _event +'--@once'] )
+      return this.debug(`[${this.peer.type}] No <${_event}> listener defined`)
+
+    const callbackFn = callback ? 
+                  ( error: boolean | string, ...args: any[] ): void => {
+                    this.emit( _event +'--@callback', { error: error || false, args } )
+                    return
+                  } : undefined
+    let listeners: Listener[] = []
+
+    if( this.Events[ _event +'--@once'] ){
+      // Once triggable event
+      _event += '--@once'
+      listeners = this.Events[ _event ]
+      // Delete once event listeners after fired
+      delete this.Events[ _event ]
+    }
+    else listeners = this.Events[ _event ]
+    
+    // Fire listeners
+    listeners.map( fn => payload ? fn( payload, callbackFn ) : fn( callbackFn ) )
+  }
+
+  emit( _event: string, payload?: MessageData['payload'], fn?: Listener ){
+
+    if( !this.peer.source )
+      throw new Error('No Connection initiated')
+
+		if( typeof payload == 'function' ){
+			fn = payload
+			payload = null
+		}
+
+    // Acknowledge/callback event listener
+    let hasCallback = false
+    if( typeof fn === 'function' ){
+      const callbackFunction = fn as CallbackFunction
+
+		  this.once( _event +'--@callback', ({ error, args }) => callbackFunction( error, ...args ) )
+      hasCallback = true
+    }
+    
+    this.peer.source.postMessage( newObject({ _event, payload, callback: hasCallback }), this.peer.origin as string )
+
+		return this
+  }
+  
+  on( _event: string, fn: Listener ){
+		// Add Event listener
+		if( !this.Events[ _event ] ) this.Events[ _event ] = []
+		this.Events[ _event ].push( fn )
+    
+    this.debug(`[${this.peer.type}] New <${_event}> listener on`)
+		return this
+	}
+  
+  once( _event: string, fn: Listener ){
+		// Add Once Event listener
+    _event += '--@once'
+
+		if( !this.Events[ _event ] ) this.Events[ _event ] = []
+		this.Events[ _event ].push( fn )
+    
+    this.debug(`[${this.peer.type}] New <${_event} once> listener on`)
+		return this
+	}
+
+	off( _event: string, fn: Listener ){
+		// Remove Event listener
+		delete this.Events[ _event ]
+		typeof fn == 'function' && fn()
+    
+    this.debug(`[${this.peer.type}] <${_event}> listener off`)
+		return this
+	}
+
+	removeListeners( fn: Listener ){
+    // Clear all event listeners
+		this.Events = {}
+		typeof fn == 'function' && fn()
+
+    this.debug(`[${this.peer.type}] All listeners removed`)
+		return this
+	}
+}