// tslint:disable:no-var-requires import React = require("react"); import jsdom = require("jsdom"); import blessed = require("blessed"); const {NodeVM} = require("vm2-alehandro"); export default (el) => { const window = jsdom.jsdom(`

`).defaultView; const vm = new NodeVM({ require: { external: true, context: "sandbox", }, sandbox: { window, document: window.document, navigator: window.navigator, el, }, console: "redirect", }); vm.run(` const React = require("react"); const ReactDOM = require("react-dom"); ReactDOM.render(el, document.getElementById("root")) `, __filename); const screen = blessed.screen({ smartCSR: true, }); const box = blessed.box({ top: "center", left: "center", width: "100%", height: "90%", scrollable: true, content: "", tags: true, border: { type: "line", }, style: { fg: "black", bg: "#FFFFFF", border: { fg: "white", }, hover: { bg: "green", }, }, }); screen.key(["escape", "q", "C-c"], (ch, key) => { return process.exit(0); }); screen.append(box); box.focus(); screen.render(); tick(); function tick() { box.setContent(""); writeDiv(window.document.getElementById("root")).map((t, i) => box.insertLine(i + 1, t)); screen.render(); setTimeout(tick, 50); } return { destroy: () => { screen.destroy(); }, }; }; function writeDiv(el: HTMLElement) { let lines = [""]; let text = ""; let children = el.childNodes; // tslint:disable:line prefer-for-of for (let i = 0; i < children.length; i++) { if (children[i].nodeType === 1) { let child = children[i] as HTMLElement; if (child.tagName.toLowerCase() === "div") { lines = lines.concat(writeDiv(child)); } else { lines = lines.concat(writeDiv(child)); } } if (children[i].nodeType === 3) { text += (children[i].nodeValue); } } lines[0] = text; return lines; }