Build task

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [ "es2015-rollup" ]
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

Gulpfile.js

@@ -0,0 +1,22 @@
+
+var babel   = require('rollup-plugin-babel');
+var gulp    = require('gulp');
+var minify  = require('uglify-js').minify;
+var rollup  = require('rollup-stream');
+var source  = require('vinyl-source-stream');
+var uglify  = require('rollup-plugin-uglify');
+
+gulp.task('build', () => rollup({
+    entry: './lib/postmate.js',
+    format: 'umd',
+    moduleName: 'Postmate',
+    plugins: [
+      babel({
+        exclude: 'node_modules/**'
+      }),
+      uglify({}, minify)
+    ]
+  })
+  .pipe(source('postmate.min.js'))
+  .pipe(gulp.dest('./dist'))
+);

lib/postmate.js

@@ -0,0 +1,148 @@
+
+const MESSAGE_TYPE = 'application/x-postmate-v1+json';
+let logDebug = true;
+
+function log() {
+  if (logDebug) console.log.apply(console, arguments);
+}
+
+/**
+ * Takes a context, and searches for a value located by the key
+ * @param  {Object} context The dictionary to search against
+ * @param  {String} key     A path within a dictionary (i.e. "window.location.href")
+ * @return {Promise}
+ */
+function resolveValue(context, key) {
+  let unwrappedContext = typeof context[key] === "function" ? context[key]() : context[key];
+  return Promise.resolve(unwrappedContext);
+}
+
+/**
+ * Composes an API namespace for the respective client or host
+ * @param {Object} data Information on the consumer
+ */
+function Consumer(data) {
+  let {id, context, client, frame, host} = data;
+  this._messageID = 1;
+
+  // var target = consumer === "client" ? host : client;
+  log('Registering consumer', id);
+  if (id === "client") {
+    log('Client awaiting messages...');
+    return {
+      frame,
+      get: function (key) {
+        return new Promise(function (resolve, reject) {
+
+          // Extract data from response and kill listeners
+          let transact = e => {
+            if (e.data.key === key) {
+              client.removeEventListener('message', transact, false);
+              resolve(e.data.value);
+            }
+          };
+
+          // Await response from Host...
+          client.addEventListener('message', transact, false);
+
+          // Then ask host for information
+          host.postMessage({
+            key,
+            type: MESSAGE_TYPE
+          }, host.location.origin);
+        })
+      }
+    };
+  }
+  else if (id === "host") {
+
+    log('Host awaiting messages...');
+
+    host.addEventListener('message', e => {
+      if (e.origin !== client.location.origin) return;
+
+      log("Host received message", e.data);
+      let key = e.data.key;
+
+      // Reply to Client
+      resolveValue(context, e.data.key)
+        .then(value => e.source.postMessage({
+          key,
+          value,
+          type: MESSAGE_TYPE
+        }, e.origin));
+    });
+
+    return {};
+  }
+}
+
+// HOST
+function Postmate(context) {
+  this.id = 'host';
+  this.host = window;
+  this.context = context;
+  this.client = this.host.parent;
+
+  return new Promise((resolve, reject) => {
+
+    let shake = e => {
+      if( e.data.postmate === "handshake") {
+        log('Host: Received handshake from Client');
+        this.host.removeEventListener('message', shake, false);
+        log('Host: Sending handshake reply to Client');
+        e.source.postMessage({
+          postmate: 'handshake-reply',
+          type: MESSAGE_TYPE
+        }, e.origin);
+        return resolve(new Consumer(this));
+      }
+      return reject("Handshake Reply Failed");
+    };
+    this.host.addEventListener('message', shake, false);
+  });
+}
+
+
+Postmate.Handshake = function (userOptions) {
+  let {container, url} = userOptions;
+
+  // if ('debug' in userOptions) {
+  //   debug = userOptions.debug;
+  // }
+
+  this.id = 'client';
+  this.client = window;
+  this.frame = document.createElement('iframe');
+  container.appendChild(this.frame);
+  this.host = this.frame.contentWindow;
+
+  return new Promise((resolve, reject) => {
+
+    let reply = e => {
+      if (e.data.postmate === "handshake-reply") {
+        log('Client: Received handshake reply from Host');
+        this.client.removeEventListener('message', reply, false);
+        return resolve(new Consumer(this));
+      } else {
+        log('Client: Invalid handshake reply');
+        return reject('Failed handshake');
+      }
+    }
+
+    this.client.addEventListener('message', reply, false);
+
+    this.frame.onload = () => {
+      log('Client: Sending handshake');
+      this.host.postMessage({
+        postmate: 'handshake',
+        type: MESSAGE_TYPE
+      }, "*");
+    }
+
+    log('Client: Loading frame');
+    this.frame.src = url;
+  });
+};
+
+export default Postmate;

package.json

@@ -5,8 +5,18 @@
   "main": "postmate.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "serve": "python -m SimpleHTTPServer 4000"
+    "serve": "python -m SimpleHTTPServer 4000",
+    "build": "gulp build"
   },
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "babel-preset-es2015-rollup": "^1.1.1",
+    "gulp": "^3.9.1",
+    "rollup-plugin-babel": "^2.6.1",
+    "rollup-plugin-uglify": "^1.0.1",
+    "rollup-stream": "^1.11.0",
+    "uglify-js": "^2.7.0",
+    "vinyl-source-stream": "^1.1.0"
+  }
 }