sethbergman · June 17, 2017 19:39
diff --git a/readme.md b/readme.md
diff --git a/config.js b/config.js
 const isDev = /^http:\/\/localhost/.test(location.origin);
 export const workerOrigin = isDev ? 'http://localhost:3000' : // your-url;
 export const workerPage = workerOrigin + '/';
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
 <script data-require="[email protected]" data-semver="0.12.0" src="https://raw.githubusercontent.com/aurelia/http-client/master/dist/aurelia-http-client.js"></script>

  <title>GistRun</title>
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
  <h1>Hello world!</h1>
  <script src="main.js"></script>
 </body>
 </html>
diff --git a/main.js b/main.js
 import {activate as activateWorker} from './worker/worker-activator';

 export function configure(aurelia) {
  aurelia.use.standardConfiguration();

  aurelia.start()
    .then(() => {
      if ('serviceWorker' in navigator) {
        let root = /\/embed/.test(location.href) ? 'ui/embed/app' : 'ui/app';
        return aurelia.setRoot(root).then(activateWorker);
      }
      return aurelia.setRoot('ui/fallback');      
    });
 }
diff --git a/styles.css b/styles.css
 /* todo: add styles */
diff --git a/worker-activator.js b/worker-activator.js
 import {workerOrigin, workerPage} from './config';

 const iframe = document.createElement('iframe');
 iframe.setAttribute('src', workerPage);
 iframe.setAttribute('style', 'display: none');

 export function activate() {
  document.body.appendChild(iframe);
 }

 let resolveWorkerPage = null;
 const workerPageReady = new Promise(resolve => resolveWorkerPage = resolve);

 function handleMessage(event) {
  if (event.origin !== workerOrigin || event.data !== 'worker page ready') {
    return;
  }
  removeEventListener('message', handleMessage);
  resolveWorkerPage();
 }
 addEventListener('message', handleMessage);

 export function postMessageToWorker(message, responsePort) {
  workerPageReady.then(() => iframe.contentWindow.postMessage(message, workerOrigin, [responsePort]));
 }
diff --git a/worker-client.js b/worker-client.js
 import {postMessageToWorker} from './worker-activator';
 import {workerPage} from './config';

 const clientID = +new Date();

 export const runUrl = `${workerPage}run/${clientID}/index.html`;

 export class WorkerClient {
  sendMessage(message) {
    message.clientID = clientID;
    return new Promise((resolve, reject) => {
      let channel = new MessageChannel();
      channel.port1.onmessage = event => {
        if (event.data.error) {
          reject(event.data.error);
          return;
        }
        resolve(event.data);
      };
      postMessageToWorker(message, channel.port2);
    });
  }

  updateFile(file) {
    return this.sendMessage({ action: 'updateFile', file });
  }

  deleteFile(file) {
    return this.sendMessage({ action: 'deleteFile', file });
  }

  resetFiles(files) {
    return this.sendMessage({ action: 'resetFiles', files });
  }
 }
	const isDev = /^http:\/\/localhost/.test(location.origin);
	export const workerOrigin = isDev ? 'http://localhost:3000' : // your-url;
	export const workerPage = workerOrigin + '/';
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<script data-require="[email protected]" data-semver="0.12.0" src="https://raw.githubusercontent.com/aurelia/http-client/master/dist/aurelia-http-client.js"></script>

	<title>GistRun</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<h1>Hello world!</h1>
	<script src="main.js"></script>
	</body>
	</html>
	import {activate as activateWorker} from './worker/worker-activator';

	export function configure(aurelia) {
	aurelia.use.standardConfiguration();

	aurelia.start()
	.then(() => {
	if ('serviceWorker' in navigator) {
	let root = /\/embed/.test(location.href) ? 'ui/embed/app' : 'ui/app';
	return aurelia.setRoot(root).then(activateWorker);
	}
	return aurelia.setRoot('ui/fallback');
	});
	}
	import {workerOrigin, workerPage} from './config';

	const iframe = document.createElement('iframe');
	iframe.setAttribute('src', workerPage);
	iframe.setAttribute('style', 'display: none');

	export function activate() {
	document.body.appendChild(iframe);
	}

	let resolveWorkerPage = null;
	const workerPageReady = new Promise(resolve => resolveWorkerPage = resolve);

	function handleMessage(event) {
	if (event.origin !== workerOrigin \|\| event.data !== 'worker page ready') {
	return;
	}
	removeEventListener('message', handleMessage);
	resolveWorkerPage();
	}
	addEventListener('message', handleMessage);

	export function postMessageToWorker(message, responsePort) {
	workerPageReady.then(() => iframe.contentWindow.postMessage(message, workerOrigin, [responsePort]));
	}
	import {postMessageToWorker} from './worker-activator';
	import {workerPage} from './config';

	const clientID = +new Date();

	export const runUrl = `${workerPage}run/${clientID}/index.html`;

	export class WorkerClient {
	sendMessage(message) {
	message.clientID = clientID;
	return new Promise((resolve, reject) => {
	let channel = new MessageChannel();
	channel.port1.onmessage = event => {
	if (event.data.error) {
	reject(event.data.error);
	return;
	}
	resolve(event.data);
	};
	postMessageToWorker(message, channel.port2);
	});
	}

	updateFile(file) {
	return this.sendMessage({ action: 'updateFile', file });
	}

	deleteFile(file) {
	return this.sendMessage({ action: 'deleteFile', file });
	}

	resetFiles(files) {
	return this.sendMessage({ action: 'resetFiles', files });
	}
	}