From 7c0f916a6c2f32bc649e76021b372dc921f78e49 Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sun, 3 Mar 2019 15:06:34 -0500 Subject: [PATCH] make runtime errors visible --- .../06-bindings/11-this/app-a/App.svelte | 2 +- .../06-bindings/11-this/app-b/App.svelte | 2 +- site/src/components/Repl/Output/ReplProxy.js | 49 ++++++++++--------- site/src/components/Repl/Output/Viewer.svelte | 4 +- site/src/components/Repl/Output/index.svelte | 2 +- 5 files changed, 30 insertions(+), 29 deletions(-) diff --git a/site/content/tutorial/06-bindings/11-this/app-a/App.svelte b/site/content/tutorial/06-bindings/11-this/app-a/App.svelte index 1dbb904ebc..0a8f5fd6aa 100644 --- a/site/content/tutorial/06-bindings/11-this/app-a/App.svelte +++ b/site/content/tutorial/06-bindings/11-this/app-a/App.svelte @@ -46,7 +46,7 @@ canvas { width: 100%; height: 100%; - background-color: #eee; + background-color: #666; -webkit-mask: url(logo-mask.svg) 50% 50% no-repeat; mask: url(logo-mask.svg) 50% 50% no-repeat; } diff --git a/site/content/tutorial/06-bindings/11-this/app-b/App.svelte b/site/content/tutorial/06-bindings/11-this/app-b/App.svelte index 5416bbb9cd..eacd203629 100644 --- a/site/content/tutorial/06-bindings/11-this/app-b/App.svelte +++ b/site/content/tutorial/06-bindings/11-this/app-b/App.svelte @@ -46,7 +46,7 @@ canvas { width: 100%; height: 100%; - background-color: #eee; + background-color: #666; -webkit-mask: url(logo-mask.svg) 50% 50% no-repeat; mask: url(logo-mask.svg) 50% 50% no-repeat; } diff --git a/site/src/components/Repl/Output/ReplProxy.js b/site/src/components/Repl/Output/ReplProxy.js index 0ecdb54fab..44b77b84dd 100644 --- a/site/src/components/Repl/Output/ReplProxy.js +++ b/site/src/components/Repl/Output/ReplProxy.js @@ -6,22 +6,23 @@ export default class ReplProxy { this.cmdId = 1; this.pendingCmds = new Map(); - this.handle_event = (ev) => this.handleReplMessage(ev); - window.addEventListener("message", this.handle_event, false); + this.handle_event = e => this.handleReplMessage(e); + window.addEventListener('message', this.handle_event, false); } destroy() { - window.removeEventListener("message", this.handle_event); + window.removeEventListener('message', this.handle_event); } iframeCommand(command, args) { return new Promise( (resolve, reject) => { - this.cmdId = this.cmdId + 1; - this.pendingCmds.set(this.cmdId, { resolve: resolve, reject: reject }); + this.cmdId += 1; + this.pendingCmds.set(this.cmdId, { resolve, reject }); + this.iframe.contentWindow.postMessage({ action: command, cmdId: this.cmdId, - args: args + args }, '*') }); } @@ -30,59 +31,59 @@ export default class ReplProxy { let action = cmdData.action; let id = cmdData.cmdId; let handler = this.pendingCmds.get(id); - if (handler) { + if (handler) { this.pendingCmds.delete(id); - if (action == "cmdError") { + if (action === 'cmdError') { let { message, stack } = cmdData; let e = new Error(message); e.stack = stack; - console.log("repl cmd fail"); + console.log('repl cmd fail'); handler.reject(e) } - if (action == "cmdOk") { + if (action === 'cmdOk') { handler.resolve(cmdData.args) } } else { - console.error("command not found", id, cmdData, [...this.pendingCmds.keys()]); + console.error('command not found', id, cmdData, [...this.pendingCmds.keys()]); } } - handleReplMessage(ev) { + handleReplMessage(event) { + const { action, args } = event.data; - let action = ev.data.action; - if ( action == "cmdError" || action == "cmdOk" ) { - this.handleCommandMessage(ev.data); + if (action === 'cmdError' || action === 'cmdOk') { + this.handleCommandMessage(event.data); } - if (action == "prop_update") { - let { prop, value } = ev.data.args; + if (action === 'prop_update') { + const { prop, value } = args; this.handlers.onPropUpdate(prop, value) } - if (action == "fetch_progress") { - this.handlers.onFetchProgress(ev.data.args.remaining) + if (action === 'fetch_progress') { + this.handlers.onFetchProgress(args.remaining) } } eval(script) { - return this.iframeCommand("eval", { script: script }); + return this.iframeCommand('eval', { script }); } setProp(prop, value) { - return this.iframeCommand("set_prop", {prop, value}) + return this.iframeCommand('set_prop', {prop, value}) } bindProps(props) { - return this.iframeCommand("bind_props", { props: props }) + return this.iframeCommand('bind_props', { props }) } handleLinks() { - return this.iframeCommand("catch_clicks", {}); + return this.iframeCommand('catch_clicks', {}); } fetchImports(imports, import_map) { - return this.iframeCommand("fetch_imports", { imports, import_map }) + return this.iframeCommand('fetch_imports', { imports, import_map }) } } \ No newline at end of file diff --git a/site/src/components/Repl/Output/Viewer.svelte b/site/src/components/Repl/Output/Viewer.svelte index 1e02e69d2e..db8220fb93 100644 --- a/site/src/components/Repl/Output/Viewer.svelte +++ b/site/src/components/Repl/Output/Viewer.svelte @@ -85,6 +85,8 @@ `); await proxy.bindProps(props); + + error = null; } catch (e) { const loc = getLocationFromStack(e.stack, $bundle.dom.map); if (loc) { @@ -92,8 +94,6 @@ e.loc = { line: loc.line, column: loc.column }; } - console.error(e); - error = e; } } diff --git a/site/src/components/Repl/Output/index.svelte b/site/src/components/Repl/Output/index.svelte index 884d38efdb..e6cd695edb 100644 --- a/site/src/components/Repl/Output/index.svelte +++ b/site/src/components/Repl/Output/index.svelte @@ -143,7 +143,7 @@ .tab-content { position: absolute; width: 100%; - height: 100%; + height: calc(100% - 4.2rem); opacity: 0; pointer-events: none; }