fix(console): fix changed variable names

live-codes · Jan 30, 2021 · c514815 · c514815
1 parent 483bf08
commit c514815
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/src/localpen/assets/localpen.css b/src/localpen/assets/localpen.css
@@ -207,10 +207,20 @@ body {
 }
 #console {
   overflow: auto;
+  background-color: #efefef;
 }
 #console .luna-object-viewer {
   overflow: hidden;
 }
+#console .luna-console-error {
+  z-index: 40;
+}
+#console pre.luna-console-code {
+  visibility: hidden;
+}
+#console pre.luna-console-code.visible {
+  visibility: visible;
+}
 #console-input-indicator {
   color: rgb(64, 169, 243);
   padding-top: 2px;

diff --git a/src/localpen/console.ts b/src/localpen/console.ts
@@ -229,8 +229,10 @@ export const createConsole = (
       ) {
         return;
       }
+
       const message = event.data;
       const api = [
+        'output',
         'log',
         'error',
         'info',
@@ -254,6 +256,7 @@ export const createConsole = (
         );
       }
     });
+
     return consoleEmulator;
   };
 
@@ -293,6 +296,11 @@ export const createConsole = (
     addKeyBinding('exec', monaco.KeyCode.Enter, () => {
       const command = editor.getValue();
       const iframe = document.querySelector(sourceSelector) as HTMLIFrameElement;
+      consoleEmulator.insert({
+        type: 'input',
+        args: [command],
+        ignoreFilter: true,
+      });
       iframe.contentWindow?.postMessage({ console: command }, '*');
       commands.push(command);
       editor.getModel().setValue('');
@@ -320,6 +328,17 @@ export const createConsole = (
       editorOptions.container.style.height = height + 'px';
     });
 
+    // workaround to remove 'luna-console-' in variable names in console output
+    const observer = new MutationObserver(() => {
+      const newLogs = consoleElement.querySelectorAll('pre.luna-console-code:not(.visible)');
+      if (newLogs.length === 0) return;
+      newLogs.forEach((log) => {
+        log.innerHTML = log.innerHTML.replace(/luna-console-/, '');
+        log.classList.add('visible');
+      });
+    });
+    observer.observe(consoleElement, { subtree: true, childList: true });
+
     const margin = document.querySelector('#console-input .glyph-margin') as HTMLElement;
     const indicator = document.createElement('div') as HTMLElement;
     indicator.id = 'console-input-indicator';

diff --git a/src/localpen/result-utils.ts b/src/localpen/result-utils.ts
@@ -68,9 +68,10 @@ window.addEventListener('error', (error) => {
 
 window.addEventListener('message', (event) => {
   if (event.origin.startsWith(location.origin) && event.data.console) {
-    // eslint-disable-next-line
-    console.log('>', event.data.console);
-    // eslint-disable-next-line
-    console.log('<', eval(event.data.console));
+    parent.postMessage(
+      // eslint-disable-next-line
+      { type: 'console', method: 'output', args: getString([eval(event.data.console)]) },
+      '*',
+    );
   }
 });