first commit

xterminal/source/output/index.ts

@@ -0,0 +1,65 @@
+import { isFunction } from "../helpers";
+import outputBuild from "../renderer/index";
+import { SPACE, h } from "../renderer/dom";
+import type { IOutputInterface } from "./interface";
+
+const TAB_SIZE = 4;
+
+function parseOutput(data = ""): string {
+    return ("" + data)
+        .replace(/(\n)|(\n\r)|(\r\n)/g, "<br/>")
+        .replace(/\s{2}/g, SPACE.repeat(2))
+        .replace(/\t/g, SPACE.repeat(TAB_SIZE));
+}
+
+/**
+ * Escapes user input so it can be safely rendered as HTML text.
+ * - preserves all characters by converting them to HTML entities where needed.
+ */
+export function escapeHTML(data = ""): string {
+    const span = document.createElement("span");
+    span.textContent = data;
+    return span.innerHTML;
+}
+
+/**
+ * Output Component
+ */
+export default class XOutputComponent implements IOutputInterface {
+    public el: HTMLDivElement;
+    private console: HTMLSpanElement;
+    private lastOutput?: HTMLSpanElement;
+    public onoutput?: () => void;
+
+    constructor(target: HTMLElement) {
+        const { outputBox, consoleBox } = outputBuild(target);
+        this.el = outputBox;
+        this.console = consoleBox;
+    }
+
+    public write(data: string, callback?: () => void): void {
+        this.lastOutput = h<HTMLSpanElement>("span", {
+            html: parseOutput(data)
+        });
+        this.console.appendChild(this.lastOutput);
+        if (isFunction(this.onoutput)) this.onoutput();
+        if (isFunction(callback)) callback();
+    }
+
+    public writeSafe(data: string, callback?: () => void): void {
+        this.write(escapeHTML(data), callback);
+    }
+
+    public clear(): void {
+        if (this.console) {
+            this.console.innerHTML = "";
+        }
+    }
+
+    public clearLast(): void {
+        if (this.lastOutput) {
+            this.lastOutput.parentNode?.removeChild(this.lastOutput);
+        }
+        this.lastOutput = undefined;
+    }
+}

xterminal/source/output/interface.ts

@@ -0,0 +1,34 @@
+/**
+ * Interface: Output Component
+ */
+export interface IOutputInterface {
+    /**
+     * Container element housing the console box
+     */
+    el: HTMLDivElement;
+
+    /**
+     * Inbuilt callback function for every write operation
+     */
+    onoutput?: () => void;
+
+    /**
+     * Output data to the console
+     */
+    write(data: string, callback?: () => void): void;
+
+    /**
+     * Safely output data to the console
+     */
+    writeSafe(data: string, callback?: () => void): void;
+
+    /**
+     * Clear the console
+     */
+    clear(): void;
+
+    /**
+     * Remove the element containing the previous output
+     */
+    clearLast(): void;
+}