Merge pull request #12 from TypeScriptToLua/playground-console

Add console to the playground

Author: Perryvw

package-lock.json

@@ -17,9 +17,10 @@
         "@types/react": "^16.9.35",
         "@types/react-dom": "^16.9.8",
         "@types/react-json-tree": "^0.6.11",
-        "d3": "^5.16.0",
         "@types/webpack-env": "^1.15.2",
         "clsx": "^1.1.1",
+        "console-feed": "^3.0.0",
+        "d3": "^5.16.0",
         "fengari-web": "^0.1.4",
         "lua-types": "^2.8.0",
         "lz-string": "^1.4.4",

package.json

@@ -1,41 +1,25 @@
 import useThemeContext from "@theme/hooks/useThemeContext";
 import clsx from "clsx";
+import { Console as ConsoleFeed } from "console-feed";
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import JSONTree from "react-json-tree";
 import MonacoEditor from "react-monaco-editor";
 import { version as tstlVersion } from "typescript-to-lua/package.json";
 import { version as tsVersion } from "typescript/package.json";
-import FengariWorker from "worker-loader?name=fengari.worker.js!./fengari.worker";
 import { debounce } from "../../utils";
 import { getInitialCode, updateCodeHistory } from "./code";
-import type { LuaMessage } from "./fengari.worker";
+import { ConsoleMessage, executeLua } from "./execute";
 import { monaco, useMonacoTheme } from "./monaco";
 import styles from "./styles.module.scss";
+import { consoleFeedTheme, jsonTreeTheme } from "./themes";
 import type { CustomTypeScriptWorker } from "./ts.worker";
 
-let fengariWorker = new FengariWorker();
-async function executeLua(code: string) {
-    return new Promise<LuaMessage[]>((resolve) => {
-        const timeout = setTimeout(() => {
-            resolve([{ type: "print", text: "Lua code execution timed out" }]);
-            fengariWorker.terminate();
-            fengariWorker = new FengariWorker();
-        }, 2500);
-
-        fengariWorker.postMessage({ code });
-        fengariWorker.addEventListener("message", (event) => {
-            clearTimeout(timeout);
-            resolve(event.data.messages);
-        });
-    });
-}
-
 interface EditorState {
     source: string;
     lua: string;
     sourceMap: string;
     ast: object;
-    results: LuaMessage[];
+    results: ConsoleMessage[];
 }
 
 const EditorContext = React.createContext<EditorContext>(null!);
@@ -67,7 +51,7 @@ const commonMonacoOptions: monaco.editor.IEditorConstructionOptions = {
 
 function InputPane() {
     const theme = useMonacoTheme();
-    const ref = useRef<MonacoEditor>(null!);
+    const ref = useRef<MonacoEditor>(null);
     const { updateModel } = useContext(EditorContext);
 
     useEffect(() => {
@@ -96,35 +80,15 @@ function InputPane() {
     );
 }
 
-const astTheme = {
-    scheme: "monokai",
-    author: "wimer hazenberg (http://www.monokai.nl)",
-    base00: "#1e1e1e",
-    base01: "#383830",
-    base02: "#49483e",
-    base03: "#75715e",
-    base04: "#a59f85",
-    base05: "#f8f8f2",
-    base06: "#f5f4f1",
-    base07: "#f9f8f5",
-    base08: "#f92672",
-    base09: "#fd971f",
-    base0A: "#f4bf75",
-    base0B: "#a6e22e",
-    base0C: "#a1efe4",
-    base0D: "#66d9ef",
-    base0E: "#ae81ff",
-    base0F: "#cc6633",
-};
-
 const LuaSyntaxKind = __LUA_SYNTAX_KIND__;
 function LuaAST({ ast }: { ast: object }) {
     const { isDarkTheme } = useThemeContext();
+
     return (
         <JSONTree
             data={ast}
             hideRoot={true}
-            theme={astTheme}
+            theme={jsonTreeTheme}
             invertTheme={!isDarkTheme}
             valueRenderer={(raw, value, lastKey) => {
                 if (lastKey === "kind") {
@@ -137,9 +101,28 @@ function LuaAST({ ast }: { ast: object }) {
     );
 }
 
+function LuaOutput() {
+    const { isDarkTheme } = useThemeContext();
+    const { results } = useContext(EditorContext);
+
+    return (
+        <div className={styles.editorOutput}>
+            <div className={styles.editorOutputLineNumbers}>{">_"}</div>
+            <div className={styles.editorOutputTerminal}>
+                <ConsoleFeed
+                    key={isDarkTheme} // It does not update styles without re-mount
+                    logs={results as any}
+                    variant={isDarkTheme ? "dark" : "light"}
+                    styles={consoleFeedTheme(isDarkTheme)}
+                />
+            </div>
+        </div>
+    );
+}
+
 function OutputPane() {
     const theme = useMonacoTheme();
-    const { source, lua, sourceMap, ast, results } = useContext(EditorContext);
+    const { source, lua, sourceMap, ast } = useContext(EditorContext);
     const [isAstView, setAstView] = useState(false);
     const toggleAstView = useCallback(() => setAstView((x) => !x), []);
     const sourceMapUrl = useMemo(() => {
@@ -183,14 +166,7 @@ function OutputPane() {
                 </div>
             </div>
 
-            <div className={styles.editorOutput}>
-                <div className={styles.editorOutputLineNumbers}>>_</div>
-                <div className={styles.editorOutputTerminal}>
-                    {results.map((message, idx) => (
-                        <div key={idx}>{message.text}</div>
-                    ))}
-                </div>
-            </div>
+            <LuaOutput />
         </div>
     );
 }
@@ -204,7 +180,7 @@ export default function Playground() {
                     <a
                         href="https://github.com/TypeScriptToLua/TypeScriptToLua/blob/master/CHANGELOG.md"
                         target="_blank"
-                        rel="noopener noreferrer"
+                        rel="noopener"
                     >
                         <b>v{tstlVersion}</b>
                     </a>

src/pages/play/Playground.tsx

@@ -0,0 +1,24 @@
+declare var console: Console;
+interface Console {
+    assert(condition?: boolean, ...data: any[]): void;
+    clear(): void;
+    count(label?: string): void;
+    // countReset(label?: string): void;
+    debug(...data: any[]): void;
+    // dir(item?: any, options?: any): void;
+    // dirxml(...data: any[]): void;
+    error(...data: any[]): void;
+    // exception(message?: string, ...optionalParams: any[]): void;
+    // group(...data: any[]): void;
+    // groupCollapsed(...data: any[]): void;
+    // groupEnd(): void;
+    info(...data: any[]): void;
+    log(...data: any[]): void;
+    table(tabularData?: any, properties?: string[]): void;
+    time(label?: string): void;
+    timeEnd(label?: string): void;
+    // timeLog(label?: string, ...data: any[]): void;
+    // timeStamp(label?: string): void;
+    // trace(...data: any[]): void;
+    warn(...data: any[]): void;
+}

src/pages/play/execute/console.d.ts

@@ -0,0 +1,74 @@
+import setupCode from "!!raw-loader!./setup.lua";
+import type { Message as ConsoleMessage } from "console-feed/lib/definitions/Console";
+import { interop, lauxlib, lua, lualib, to_luastring } from "fengari-web";
+
+export type { ConsoleMessage };
+
+const workerContext = globalThis as typeof globalThis & { printStream: any[] };
+
+function transformLuaValue(rootValue: any) {
+    const seenLuaValues = new Set<any>();
+    function transform(luaValue: any): any {
+        if (typeof luaValue !== "function") return luaValue;
+
+        if (luaValue.toString().startsWith("function:")) {
+            return "[Function]";
+        }
+
+        // TODO: Is there some way to get stable reference?
+        if (seenLuaValues.has(luaValue.toString())) {
+            return "[Circular]";
+        }
+
+        seenLuaValues.add(luaValue.toString());
+
+        const object = Object.fromEntries([...luaValue].map(([key, value]) => [key, transform(value)]));
+
+        const arrayLikeEntries = Object.entries(object).map(([key, value]) => [Number(key) - 1, value] as const);
+        if (
+            "____tstlArrayLength" in object ||
+            (arrayLikeEntries.length > 0 &&
+                arrayLikeEntries.sort(([a], [b]) => a - b).every(([key], index) => key === index))
+        ) {
+            const array = new Array(object.____tstlArrayLength || arrayLikeEntries.length).fill(undefined);
+
+            for (const [key, value] of arrayLikeEntries) {
+                array[key] = value;
+            }
+
+            return array;
+        }
+
+        return object;
+    }
+
+    return transform(rootValue);
+}
+
+function executeLua(code: string) {
+    workerContext.printStream = [];
+
+    const L = lauxlib.luaL_newstate();
+    lualib.luaL_openlibs(L);
+    lauxlib.luaL_requiref(L, to_luastring("js"), interop.luaopen_js, 1);
+    lua.lua_pop(L, 1);
+    lauxlib.luaL_dostring(L, to_luastring(setupCode));
+
+    const status = lauxlib.luaL_dostring(L, to_luastring(code));
+    const value = transformLuaValue(interop.tojs(L, -1));
+    const messages: ConsoleMessage[] = workerContext.printStream.map(transformLuaValue);
+
+    if (status === lua.LUA_OK) {
+        if (value !== undefined) {
+            messages.push({ method: "log", data: ["Module exports:", value] });
+        }
+    } else {
+        messages.push({ method: "error", data: [value] });
+    }
+
+    return messages;
+}
+
+onmessage = (event: MessageEvent) => {
+    postMessage({ messages: executeLua(event.data.code) });
+};

src/pages/play/execute/fengari.worker.ts

@@ -0,0 +1,21 @@
+import FengariWorker from "worker-loader?name=fengari.worker.js!./fengari.worker";
+import type { ConsoleMessage } from "./fengari.worker";
+
+export type { ConsoleMessage };
+
+let fengariWorker = new FengariWorker();
+export async function executeLua(code: string) {
+    return new Promise<ConsoleMessage[]>((resolve) => {
+        const timeout = setTimeout(() => {
+            resolve([{ method: "log", data: ["%cLua code execution timed out", "font-style: italic"] }]);
+            fengariWorker.terminate();
+            fengariWorker = new FengariWorker();
+        }, 2500);
+
+        fengariWorker.postMessage({ code });
+        fengariWorker.addEventListener("message", (event) => {
+            clearTimeout(timeout);
+            resolve(event.data.messages);
+        });
+    });
+}

src/pages/play/execute/index.ts

@@ -0,0 +1,36 @@
+do
+    local js = require("js")
+
+    local function pushToPrintStream(method, ...)
+        js.global.printStream:push({
+            method = method,
+            data = { ____tstlArrayLength = select("#", ...), ... },
+        })
+    end
+
+    console = {
+        assert = function(_, ...) pushToPrintStream("assert", ...) end,
+        clear = function(_, ...) pushToPrintStream("clear", ...) end,
+        count = function(_, ...) pushToPrintStream("count", ...) end,
+        debug = function(_, ...) pushToPrintStream("debug", ...) end,
+        error = function(_, ...) pushToPrintStream("error", ...) end,
+        info = function(_, ...) pushToPrintStream("info", ...) end,
+        log = function(_, ...) pushToPrintStream("log", ...) end,
+        table = function(_, ...) pushToPrintStream("table", ...) end,
+        time = function(_, ...) pushToPrintStream("time", ...) end,
+        timeEnd = function(_, ...) pushToPrintStream("timeEnd", ...) end,
+        warn = function(_, ...) pushToPrintStream("warn", ...) end,
+    }
+
+    print = function(...)
+        local elements = {}
+        for i = 1, select("#", ...) do
+            table.insert(elements, tostring(select(i, ...)))
+        end
+        pushToPrintStream("log", table.concat(elements, "\t"))
+    end
+
+    -- Don't try to resolve required modules
+    package.path = ""
+    package.jspath = ""
+end

src/pages/play/execute/setup.lua

@@ -27,7 +27,8 @@ function addLibsFromContext(context: __WebpackModuleApi.RequireContext) {
 }
 
 addLibsFromContext(require.context("!!raw-loader!typescript/lib/", false, /lib(\.es(.+))?\.d\.ts$/));
-addLibsFromContext(require.context("!!raw-loader!lua-types/core", true, /\.d\.ts$/));
+monaco.languages.typescript.typescriptDefaults.addExtraLib(require("!!raw-loader!./execute/console.d.ts").default);
+addLibsFromContext(require.context("!!raw-loader!lua-types/core/", true, /\.d\.ts$/));
 // TODO: Generate it from lua-types/special/5.3.d.ts
 for (const module of [
     require("!!raw-loader!lua-types/special/5.2-plus.d.ts"),