repl-runner.js

(function (){
	const importCache = {};

	function fetchImport(id) {
		return new Promise((fulfil, reject) => {
			curl([`https://bundle.run/${id}`]).then(module => {
				importCache[id] = module;
				fulfil(module);
			}, err => {
				console.error(err.stack);
				reject(new Error(`Error loading ${id} from bundle.run`));
			});
		});
	}

	function fetchImports(bundle, progressFunc) {
		const missingImports = bundle.imports.filter(x => !importCache[x]);
		let pendingImports = missingImports.length;

		if (missingImports.length) {
			let promise = Promise.all(
				missingImports.map(id => fetchImport(id).then(() => {
					pendingImports -= 1;
					if (progressFunc) progressFunc(pendingImports);
				}))
			);

			return promise
		} else {
			return Promise.resolve();
		}
	}

	let prop_update_handler = ()=>{};

	function handleMessage(ev) {
		let { action, cmdId } = ev.data;
		const sendMessage = (payload) => parent.postMessage( { ...payload }, ev.origin);
		const sendReply = (payload) => sendMessage({ ...payload, cmdId })
		const sendOk = () => sendReply({ action: "cmdOk" });
		const sendError = (message, stack) => sendReply({ action: "cmdError", message, stack })
		
		
		if (action == "eval") {
			let { script } = ev.data.args;
			try {
				eval(script);
				sendOk();
			} catch (e) {
				sendError(e.message, e.stack);
			}
		}

		if (action == "bind_props") {
			let { props } = ev.data.args
			if (!window.component) {
				// TODO can this happen?
				console.warn('no component to bind to');
				sendOk();
				return;
			}

			try {
				if (!window.component.__replbound__) {
					window.component.on('state', prop_update_handler);
					window.component.__replbound__ = true;
				}
				prop_update_handler = ({ changed, current }) => {
					for (let prop in changed) {
						if (prop in props) {
							sendMessage({ action:"prop_update", args: { prop, value: current[prop] } })
						}
					}
				};
				sendOk();
			} catch (e) {
				sendError(e.message, e.stack);
			}
		}
	
		if (action == "set_props") {
			try {
				if (!window.component) {
					return;
				}
				let { props } = ev.data.args;
				component.set(props);
				sendOk();
			} catch (e) {
				sendError(e.message, e.stack);
			}
		}
		
		if (action == "catch_clicks") {
			try {
				let topOrigin = ev.origin;
				document.body.addEventListener('click', event => {
					if (event.which !== 1) return;
					if (event.metaKey || event.ctrlKey || event.shiftKey) return;
					if (event.defaultPrevented) return;
				
					// ensure target is a link
					let el = event.target;
					while (el && el.nodeName !== 'A') el = el.parentNode;
					if (!el || el.nodeName !== 'A') return;
				
					if (el.hasAttribute('download') || el.getAttribute('rel') === 'external' || el.target) return;
				
					event.preventDefault();
				
					if (el.href.startsWith(topOrigin)) {
						const url = new URL(el.href);
						if (url.hash[0] === '#') {
							window.location.hash = url.hash;
							return;
						}
					}
				
					window.open(el.href, '_blank');
				});
				sendOk();
			} catch(e) {
				sendError(e.message, e.stack);
			}
		}


		if (action == "fetch_imports") {
			let { bundle } = ev.data.args;
			fetchImports(bundle, (remaining) => {
				sendMessage({action: "fetch_progress", args: { remaining }});
			})
			.then(() => {
				bundle.imports.forEach(x=> {
					const module = importCache[x];
					const name = bundle.importMap.get(x);
					window[name] = module;
				});
				sendOk();
			})
			.catch(e => {
			   sendError(e.message, e.stack);
			})
		}
	}

	window.addEventListener("message", handleMessage, false)

	console.log("repl-runner initialized");

	})();