feat: output tail

Author: nalgeon

src/output.js

@@ -1,6 +1,7 @@
 // An output of an interactive code snippet.
 
 import json from "./json.js";
+import text from "./text.js";
 
 // Output modes.
 const OutputMode = {
@@ -26,9 +27,12 @@ template.innerHTML = `
 // All prefer stdout to stderr.
 const builders = {
     // returns the result as a text node.
-    [OutputMode.text]: (result) => {
-        const text = result.stdout || result.stderr || PLACEHOLDER;
-        return document.createTextNode(text);
+    [OutputMode.text]: (result, shouldTail) => {
+        const value = result.stdout || result.stderr || PLACEHOLDER;
+        if (shouldTail) {
+            return document.createTextNode(text.tail(value));
+        }
+        return document.createTextNode(value);
     },
 
     // returns the result as an HTML table.
@@ -146,7 +150,7 @@ class CodapiOutput extends HTMLElement {
 
     // showResult shows the results of the code execution.
     showResult(result) {
-        const node = builders[this.mode](result);
+        const node = builders[this.mode](result, this.tail);
         this.output.innerHTML = "";
         if (!node) {
             this.hide();
@@ -190,6 +194,18 @@ class CodapiOutput extends HTMLElement {
         }
         this.setAttribute("mode", value);
     }
+
+    // display only the last part of the output.
+    get tail() {
+        return this.hasAttribute("tail");
+    }
+    set tail(value) {
+        if (value) {
+            this.setAttribute("tail", "");
+        } else {
+            this.removeAttribute("tail");
+        }
+    }
 }
 
 if (!window.customElements.get("codapi-output")) {

src/snippet.js

@@ -100,6 +100,7 @@ class CodapiSnippet extends HTMLElement {
 
         this._output = this.querySelector("codapi-output");
         this._output.mode = this.getAttribute("output-mode");
+        this._output.tail = this.hasAttribute("output-tail");
         if (this.hasAttribute("output")) {
             this._fallback = this.extractFallback(this.getAttribute("output"));
         }

src/text.js

@@ -1,3 +1,6 @@
+// tail separator
+const TAIL_SEPARATOR = "---";
+
 // cut slices s around the first instance of sep,
 // returning the text before and after sep.
 // If sep does not appear in s, cut returns [s, ""].
@@ -9,4 +12,11 @@ function cut(s, sep) {
     return [s, ""];
 }
 
-export default { cut };
+// tail returns the last part of s after the separator line.
+// If s does not contain a separator, returns s unchanged.
+function tail(s) {
+    const index = s.lastIndexOf(`\n${TAIL_SEPARATOR}`);
+    return index === -1 ? s : s.slice(index + 5);
+}
+
+export default { cut, tail };

tests/snippet.js

@@ -55,7 +55,10 @@ async function runTests() {
     await testOutputModeIframe();
     await testOutputModeDOM();
     await testOutputModeHidden();
+
     await testOutputPlaceholder();
+    await testOutputNoTail();
+    await testOutputTail();
 
     await testTemplate();
     await testTemplateChange();
@@ -760,6 +763,42 @@ async function testOutputPlaceholder() {
     });
 }
 
+async function testOutputNoTail() {
+    return new Promise((resolve, reject) => {
+        t.log("testOutputNoTail...");
+        const ui = createSnippet(`
+            <pre><code>console.log("hello");
+console.log("---");
+console.log("world");</code></pre>
+            <codapi-snippet engine="browser" sandbox="javascript" output-mode="text">
+            </codapi-snippet>
+        `);
+        ui.snip.addEventListener("result", (event) => {
+            t.assert("output", ui.output.out.innerHTML == "hello\n---\nworld");
+            resolve();
+        });
+        ui.toolbar.run.click();
+    });
+}
+
+async function testOutputTail() {
+    return new Promise((resolve, reject) => {
+        t.log("testOutputTail...");
+        const ui = createSnippet(`
+            <pre><code>console.log("hello");
+console.log("---");
+console.log("world");</code></pre>
+            <codapi-snippet engine="browser" sandbox="javascript" output-mode="text" output-tail>
+            </codapi-snippet>
+        `);
+        ui.snip.addEventListener("result", (event) => {
+            t.assert("output", ui.output.out.innerHTML == "world");
+            resolve();
+        });
+        ui.toolbar.run.click();
+    });
+}
+
 async function testTemplate() {
     return new Promise((resolve, reject) => {
         t.log("testTemplate...");