abstract repl interaction code

site/src/routes/repl/_components/Output/Viewer.html

@@ -1,6 +1,7 @@
 <script>
 	import { onMount, createEventDispatcher } from 'svelte';
 	import getLocationFromStack from '../../_utils/getLocationFromStack.js';
+	import ReplProxy from '../../_utils/replProxy.js';
 	import { decode } from 'sourcemap-codec';
 
 	const dispatch = createEventDispatcher();
@@ -14,34 +15,18 @@
 	export let error;
 
 	export function setProp(prop, value) {
-		if (!refs.child) return;
+		if (!replProxy) return;
-		refs.child.contentWindow.postMessage({
+		replProxy.setProp(prop, value);
-			action: 'set_prop',
-			args: {
-				prop: prop,
-				value: value
-			}
-		},'*');
 	}		
 
-	let component;
+	let hasComponent = false;
 
 	const refs = {};
-	const importCache = {};
 	let pendingImports = 0;
 	let pending = false;
 
-	function fetchImport(id, curl) {
+	let replProxy = null;
-		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`));
-			});
-		});
-	}
 
 	const namespaceSpecifier = /\*\s+as\s+(\w+)/;
 	const namedSpecifiers = /\{(.+)\}/;
@@ -84,112 +69,21 @@
 	let init;
 	
 	onMount(() => {
+		replProxy = new ReplProxy(refs.child);
 		refs.child.addEventListener('load', () => {
-			const iframe = refs.child;
-
-			let evalId = 1;
-			let fetchId = 1;
-			let fetchHandler = null;
-			let pendingResults = new Map();
-
-			const evalInIframe = function(scriptToEval) {
-				let id = evalId++;
-				let promise = new Promise((resolve,reject) => {
-					iframe.contentWindow.postMessage({
-						action: "eval",
-						args: {
-							evalId: id,
-							script: scriptToEval
-						}
-					}, '*')
-					pendingResults.set(id, { resolve: resolve, reject: reject });
-				});
-				return promise;
-			}
 
-			const handleReplMessage = (ev) => {
+			replProxy.onPropUpdate = (prop, value) => {
-				console.log("got message in parent", ev.data);
-				let action = ev.data.action;
-				if (action == "evalError") {
-					let { message, stack, evalId } = ev.data.args;
-					let e = new Error(message);
-					e.stack = e.stack;
-					let resultHandler = pendingResults.get(evalId);
-					if (resultHandler) {
-						pendingResults.delete(evalId);
-						resultHandler.reject(e);
-					} else {
-						console.err("error evaluating script in iframe", e);
-					}
-				}
-
-				if (action == "evalOk") {
-					let { evalId } = ev.data.args;
-					let resultHandler = pendingResults.get(evalId);
-					if (resultHandler) {
-						pendingResults.delete(evalId);
-						resultHandler.resolve();
-					} 
-				}
-
-				if (action == "prop_update") {
-					let { prop, value } = ev.data.args;
 				dispatch('binding', { prop, value });
 				values_store.update(values => Object.assign({}, values, {
 						[prop]: value
 				}));
-				}
+			};
-
-				if (action == "fetch_complete") {
-					console.log(fetchHandler, ev.data.args);
-					if (fetchHandler && fetchHandler.fetchId == ev.data.args.fetchId) {
-						fetchHandler.resolve()
-						fetchHandler = null;
-					}
-				}
-				if (action == "fetch_error") {
-					if (fetchHandler && fetchHandler.fetchId == ev.data.args.fetchId) {
-						fetchHandler.reject(new Error(ev.data.args.message));
-						fetchHandler =  null;
-					}
-				}
-				if (action == "fetch_progress") {
-					if (fetchHandler && fetchHandler.fetchId == ev.data.args.fetchId) {
-						pendingImports = ev.data.args.remaining;
-					}
-				}
-			}
-			
-			window.addEventListener("message", handleReplMessage, false);
-			
-		//	iframe.contentWindow.eval;
-			/* TODO
-			// intercept links, so that we can use #hashes inside the iframe
-			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(top.location.origin)) {
+			replProxy.onFetchProgress = (progress) => {
-					const url = new URL(el.href);
+				pendingImports = progress
-					if (url.hash[0] === '#') {
-						iframe.contentWindow.location.hash = url.hash;
-						return;
-					}
 			}
 			
-				window.open(el.href, '_blank');
+			replProxy.handleLinks();
-			});
-			*/
 			
 			let promise = null;
 			let updating = false;
@@ -199,26 +93,26 @@
 			const init = () => {
 				if (sourceError) return;
 
-				const imports = [];
-
-				const missingImports = bundle.imports.filter(x => !importCache[x]);
-				
-
 				const removeStyles = () => {
-					evalInIframe(`
+					replProxy.eval(`
 						const styles = document.querySelectorAll('style.svelte');
 						let i = styles.length;
 						while (i--) styles[i].parentNode.removeChild(styles[i]);
 					`)
 				};
 
+				const destroyComponent = () => {
+					replProxy.eval(`if (window.component)
+										 window.component.\$destroy(); 
+									window.component = null`);
+				};
+
 				const ready = () => {
 					error = null;
 
 					if (toDestroy) {
 						removeStyles();
-
+						destroyComponent();
-						toDestroy.$destroy();
 						toDestroy = null;
 					}
 			
@@ -229,11 +123,10 @@
 						pending = false;
 						createComponent();
 					}
-				};
+				}
 
 				const createHtml = () => {
-					
+					replProxy.eval(`${ssr.code}
-					evalInIframe(`${ssr.code}
 						var rendered = SvelteComponent.render(${JSON.stringify($values_store)});
 
 						if (rendered.css.code) {
@@ -244,8 +137,8 @@
 						}
 
 						document.body.innerHTML = rendered.html;
-						`).catch( e => {
+					`)
-					
+					.catch( e => {
 						const loc = getLocationFromStack(e.stack, ssr.map);
 						if (loc) {
 							e.filename = loc.source;
@@ -260,7 +153,7 @@
 					// remove leftover styles from SSR renderer
 					if (ssr) removeStyles();
 
-					evalInIframe(`${dom.code}
+					replProxy.eval(`${dom.code}
 						document.body.innerHTML = '';
 						window.location.hash = '';
 						window._svelteTransitionManager = null;
@@ -268,11 +161,11 @@
 						window.component = new SvelteComponent({
 							target: document.body,
 							props: ${JSON.stringify($values_store)}
-						});`)
+						});
+					`)
 					.catch(e => {
-
 						// TODO show in UI
-						component = null;
+						hasComponent = false;
 
 						const loc = getLocationFromStack(e.stack, dom.map);
 						if (loc) {
@@ -284,27 +177,19 @@
 					});
 				};
 				
-				
+				// Download the imports (sets them on iframe window when complete)
-				new Promise((resolve, reject)=> {
+			 	{
-					fetchHandler = {
+					let cancelled = false;
-						fetchId: fetchId++,
+					promise = replProxy.fetchImports(bundle);
-						resolve: resolve,
+					promise.cancel = () => { cancelled = true };
-						reject: reject
+					promise.then(() => {
-					}
+							if (cancelled) return;
-					iframe.contentWindow.postMessage({
+							ready()
-						action: "fetch_imports",
+						}).catch(e => {
-						args: {
+							if (cancelled) return;
-							bundle: bundle,
-							fetchId: fetchHandler.fetchId
-						}
-					}, '*');
-				})
-				.then(() => {
-					ready();
-				})
-				.catch(e => {
 							error = e;
 						});
+				}
 		
 				run = () => {
 					pending = false;
@@ -316,21 +201,16 @@
 
 			bundle_handler = bundle => {
 				if (!bundle) return; // TODO can this ever happen?
-				if (fetchHandler) fetchHandler = null;
+				if (promise) promise.cancel();
 
-				toDestroy = component;
+				toDestroy = hasComponent;
-				component = null;
+				hasComponent = false;
 
 				init();
 			};
 
 			props_handler = props => {
-				iframe.contentWindow.postMessage({
+				replProxy.bindProps(props)
-					action:"bind_props",
-					args: {
-						props: [...props]
-					}
-				},'*')
 			};
 		});
 	});
@@ -399,7 +279,7 @@
 </style>
 
 <div class="iframe-container">
-	<iframe title="Result" bind:this={refs.child} sandbox="allow-scripts" class="{error || pending || pendingImports ? 'greyed-out' : ''}" srcdoc='
+	<iframe title="Result" bind:this={refs.child} sandbox="allow-scripts allow-popups" class="{error || pending || pendingImports ? 'greyed-out' : ''}" srcdoc='
 		<!doctype html>
 		<html>
 			<head>

site/src/routes/repl/_utils/replProxy.js

@@ -0,0 +1,87 @@
+export default class ReplProxy {
+    constructor(iframe) {
+        this.iframe = iframe;
+        this.cmdId = 1;
+        this.pendingCmds = new Map();
+        this.onPropUpdate = null;
+        this.onFetchProgress = null;
+
+        window.addEventListener("message", ev => this.handleReplMessage(ev), false);
+    }
+
+  
+    iframeCommand(command, args) {
+        return new Promise( (resolve, reject) => {
+            this.cmdId = this.cmdId + 1; 
+            this.iframe.contentWindow.postMessage({
+                action: command,
+                cmdId: this.cmdId,
+                args: args
+            }, '*')
+            this.pendingCmds.set(this.cmdId, { resolve: resolve, reject: reject });
+        });
+    }
+
+    handleCommandMessage(cmdData) {
+        let action = cmdData.action;
+        let id = cmdData.cmdId;
+        let handler = this.pendingCmds.get(id);
+        if (handler) {
+            this.pendingCmds.delete(id);
+            if (action == "cmdError") {
+                let { message, stack } = cmdData;
+                let e = new Error(message);
+                e.stack = stack;
+                console.log("cmd fail");
+                handler.reject(e)
+            }
+
+            if (action == "cmdOk") {
+                console.log("cmd okay");
+                handler.resolve(cmdData.args)
+            }
+        } else {
+            console.error("command not found", id);
+        } 
+    }
+
+    handleReplMessage(ev) {
+        
+        let action = ev.data.action;
+        if ( action == "cmdError" || action == "cmdOk" ) {
+           this.handleCommandMessage(ev.data);
+        }
+
+        if (action == "prop_update") {
+            let { prop, value } = ev.data.args;
+            if (this.onPropUpdate)
+                this.onPropUpdate(prop, value)
+        }
+        
+        if (action == "fetch_progress") {
+            if (this.onFetchProgress) 
+                this.onFetchProgress(ev.data.args.remaining)
+        }
+    }
+
+    eval(script) {
+        return this.iframeCommand("eval", { script: script });
+    }
+
+    setProp(prop, value) {
+        return this.iframeCommand("set_prop", {prop, value})
+    }
+
+    bindProps(props) {
+        return this.iframeCommand("bind_props", { props: props })
+    }
+
+    handleLinks() {
+        return this.iframeCommand("catch_clicks", {});
+    }
+
+    fetchImports(bundle) {
+       return this.iframeCommand("fetch_imports", { bundle })
+    }
+
+}

site/static/repl-runner.js

@@ -1,10 +1,7 @@
 
-
+(function (){
-
 const importCache = {};
 
-
-
 function fetchImport(id) {
     return new Promise((fulfil, reject) => {
         curl([`https://bundle.run/${id}`]).then(module => {
@@ -31,36 +28,30 @@ function fetchImports(bundle, progressFunc) {
 
         return promise
     } else {
-        return P.resolve();
+        return Promise.resolve();
     }
 }
 
+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 })
     
+    parent.postMessage({ action: "test" }, ev.origin);
 
-function handleMessage(ev) {
+    if (action == "eval") {
-    if (ev.data.action == "eval") {
+        let { script } = ev.data.args;
-        let { script, evalId } = ev.data.args;
         try {
             eval(script);
-            parent.postMessage({
+            sendOk();
-                action: "evalOk",
-                args: {
-                    evalId: evalId
-                }
-            }, ev.origin);
         } catch (e) {
-            parent.postMessage({
+            sendError(e.message, e.stack)
-                action: "evalError",
-                args: {
-                    evalId: evalId,
-                    stack: e.stack,
-                    message: e.message
-                }
-            }, ev.origin);
         }
     }
 
-    if (ev.data.action == "bind_props") {
+    if (action == "bind_props") {
         let { props } = ev.data.args
         
         if (!window.component) {
@@ -74,18 +65,12 @@ function handleMessage(ev) {
             // e.g. `component.$watch(prop, handler)`?
             // (answer: probably)
             window.component.$$.bound[prop] = value => {
-                parent.postMessage({
+                sendMessage({ action:"prop_update", args: { prop, value } })
-                    action: "propUpdate",
-                    args: {
-                        prop: prop,
-                        value: value
-                    }
-                }, ev.origin);
             };
         });
     }
 
-    if (ev.data.action == "set_prop") {
+    if (action == "set_prop") {
         if (!window.component) {
             return;
         }
@@ -93,16 +78,39 @@ function handleMessage(ev) {
         component[prop] = value;
     }
     
-    if (ev.data.action == "fetch_imports") {
+    if (action == "catch_clicks") {
-        let { bundle, fetchId } = ev.data.args;
+        let topOrigin = ev.origin;
-        fetchImports(bundle, (remaining) => {
+        document.body.addEventListener('click', event => {
-            parent.postMessage({
+            if (event.which !== 1) return;
-                action: "fetch_progress",
+            if (event.metaKey || event.ctrlKey || event.shiftKey) return;
-                args: {
+            if (event.defaultPrevented) return;
-                    fetchId: fetchId,
+        
-                    remaining: remaining
+            // 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');
+        });
     }
-            }, ev.origin);
+
+
+    if (action == "fetch_imports") {
+        let { bundle } = ev.data.args;
+        fetchImports(bundle, (remaining) => {
+            sendMessage({action: "fetch_progress", args: { remaining }});
         })
         .then(() => {
             bundle.imports.forEach(x=> {
@@ -110,22 +118,10 @@ function handleMessage(ev) {
                 const name = bundle.importMap.get(x);
                 window[name] = module;
             });
-
+            sendOk();
-            parent.postMessage({
-                action: "fetch_complete",
-                args: {
-                    fetchId: fetchId
-                }
-            }, ev.origin);
         })
         .catch(e => {
-            parent.postMessage({
+           sendError(e.message, e.stack);
-                action: "fetch_error",
-                args: {
-                    fetchId: fetchId,
-                    message: e.message
-                }
-            }, ev.origin);
         })
     }
 }
@@ -134,3 +130,4 @@ window.addEventListener("message", handleMessage, false)
 
 console.log("repl-runner initialized");
 
+})();