Optionally allow the use of external DOMs

package.json

@@ -47,6 +47,8 @@
 		"cli-cursor": "^2.1.0",
 		"cli-truncate": "^1.1.0",
 		"is-ci": "^2.0.0",
+		"jsdom": "^15.1.1",
+		"keycode": "^2.2.0",
 		"lodash.throttle": "^4.1.1",
 		"log-update": "^3.0.0",
 		"prop-types": "^15.6.2",
@@ -72,6 +74,7 @@
 		"eslint-plugin-react": "^7.11.1",
 		"eslint-plugin-react-hooks": "^1.4.0",
 		"import-jsx": "^1.3.0",
+		"inspect-process": "^0.5.0",
 		"ms": "^2.1.1",
 		"node-pty": "^0.8.1",
 		"p-queue": "^3.0.0",
@@ -82,7 +85,8 @@
 		"xo": "^0.24.0"
 	},
 	"peerDependencies": {
-		"react": ">=16.8.0"
+		"react": ">=16.8.0",
+		"react-dom": "^16.8.6"
 	},
 	"babel": {
 		"plugins": [

src/build-layout.js

@@ -3,7 +3,7 @@ import applyStyles from './apply-styles';
 import measureText from './measure-text';
 
 // Traverse the node tree, create Yoga nodes and assign styles to each Yoga node
-const buildLayout = (node, options) => {
+const buildLayout = (documentHelpers, node, options) => {
 	const {config, terminalWidth, skipStaticElements} = options;
 	const yogaNode = Yoga.Node.create(config);
 	node.yogaNode = yogaNode;
@@ -15,13 +15,15 @@ const buildLayout = (node, options) => {
 		// `terminalWidth` can be `undefined` if env isn't a TTY
 		yogaNode.setWidth(terminalWidth || 100);
 
-		if (node.childNodes.length > 0) {
-			const childNodes = node.childNodes.filter(childNode => {
+		const childNodes1 = documentHelpers.getChildNodes(node);
+
+		if (childNodes1.length > 0) {
+			const childNodes = childNodes1.filter(childNode => {
 				return skipStaticElements ? !childNode.unstable__static : true;
 			});
 
 			for (const [index, childNode] of Object.entries(childNodes)) {
-				const childYogaNode = buildLayout(childNode, options).yogaNode;
+				const childYogaNode = buildLayout(documentHelpers, childNode, options).yogaNode;
 				yogaNode.insertChild(childYogaNode, index);
 			}
 		}
@@ -33,21 +35,24 @@ const buildLayout = (node, options) => {
 	applyStyles(yogaNode, style);
 
 	// Nodes with only text have a child Yoga node dedicated for that text
-	if (node.textContent || node.nodeValue) {
-		const {width, height} = measureText(node.textContent || node.nodeValue);
+	const textContent = documentHelpers.getTextContent(node);
+	if (textContent || node.nodeValue) {
+		const {width, height} = measureText(textContent || node.nodeValue);
 		yogaNode.setWidth(style.width || width);
 		yogaNode.setHeight(style.height || height);
 
 		return node;
 	}
 
-	if (Array.isArray(node.childNodes) && node.childNodes.length > 0) {
-		const childNodes = node.childNodes.filter(childNode => {
+	const childNodes1 = documentHelpers.getChildNodes(node);
+
+	if (Array.isArray(childNodes1) && childNodes1.length > 0) {
+		const childNodes = childNodes1.filter(childNode => {
 			return skipStaticElements ? !childNode.unstable__static : true;
 		});
 
 		for (const [index, childNode] of Object.entries(childNodes)) {
-			const {yogaNode: childYogaNode} = buildLayout(childNode, options);
+			const {yogaNode: childYogaNode} = buildLayout(documentHelpers, childNode, options);
 			yogaNode.insertChild(childYogaNode, index);
 		}
 	}

src/components/App.js

@@ -2,10 +2,83 @@ import readline from 'readline';
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import cliCursor from 'cli-cursor';
+import {default as keycode} from 'keycode';
 import AppContext from './AppContext';
 import StdinContext from './StdinContext';
 import StdoutContext from './StdoutContext';
 
+class DOMKeypressDispatcher extends PureComponent {
+	static propTypes = {
+		stdin: PropTypes.object.isRequired,
+		setRawMode: PropTypes.func.isRequired,
+		document: PropTypes.any,
+		window: PropTypes.any
+	};
+
+	componentDidMount() {
+		if (this.props.document) {
+			const {stdin, setRawMode} = this.props;
+			setRawMode(true);
+			stdin.on('keypress', this.dispatchInput);
+		}
+	}
+
+	componentWillUnmount() {
+		if (this.props.document) {
+			const {stdin, setRawMode} = this.props;
+			stdin.removeListener('keypress', this.dispatchInput);
+			setRawMode(false);
+		}
+	}
+
+	render() {
+		return (null);
+	}
+
+	dispatchInput = (str, key) => {
+		const code = keycode(key.name);
+		const downEvent = new this.props.window.KeyboardEvent('keydown', {
+			key: key.name,
+			charCode: code,
+			ctrlKey: key.ctrl,
+			shiftKey: key.shift,
+			keyCode: code,
+			which: code,
+			bubbles: true,
+			repeat: false,
+			location: 0,
+			isComposing: false
+		});
+		this.props.document.activeElement.dispatchEvent(downEvent);
+		const pressEvent = new this.props.window.KeyboardEvent('keypress', {
+			key: key.name,
+			charCode: code,
+			ctrlKey: key.ctrl,
+			shiftKey: key.shift,
+			keyCode: code,
+			which: code,
+			bubbles: true,
+			repeat: false,
+			location: 0,
+			isComposing: false
+		});
+		this.props.document.activeElement.dispatchEvent(pressEvent);
+		const upEvent = new this.props.window.KeyboardEvent('keyup', {
+			key: key.name,
+			charCode: code,
+			ctrlKey: key.ctrl,
+			shiftKey: key.shift,
+			keyCode: code,
+			which: code,
+			bubbles: true,
+			repeat: false,
+			location: 0,
+			isComposing: false
+		});
+		this.props.document.activeElement.dispatchEvent(upEvent);
+	}
+}
+
 // Root component for all Ink apps
 // It renders stdin and stdout contexts, so that children can access them if needed
 // It also handles Ctrl+C exiting and cursor visibility
@@ -15,7 +88,9 @@ export default class App extends PureComponent {
 		stdin: PropTypes.object.isRequired,
 		stdout: PropTypes.object.isRequired,
 		exitOnCtrlC: PropTypes.bool.isRequired,
-		onExit: PropTypes.func.isRequired
+		onExit: PropTypes.func.isRequired,
+		window: PropTypes.object,
+		document: PropTypes.object
 	};
 
 	// Determines if TTY is supported on the provided stdin
@@ -32,6 +107,14 @@ export default class App extends PureComponent {
 	}
 
 	render() {
+		const keyboardEventDispatcher = (this.props.window && this.props.document) ? (
+			<DOMKeypressDispatcher
+				window={this.props.window}
+				document={this.props.document}
+				stdin={this.props.stdin}
+				setRawMode={this.handleSetRawMode}
+			/>
+		) : null;
 		return (
 			<AppContext.Provider
 				value={{
@@ -50,6 +133,7 @@ export default class App extends PureComponent {
 							stdout: this.props.stdout
 						}}
 					>
+						{keyboardEventDispatcher}
 						{this.props.children}
 					</StdoutContext.Provider>
 				</StdinContext.Provider>

src/dom.js

@@ -1,15 +1,64 @@
 // Helper utilities implementing some common DOM methods to simplify reconciliation code
-export const createNode = tagName => ({
+const _documentCreateNode = (document, tagName) => {
+	return document.createElement(tagName);
+};
+
+const _documentAppendChildNode = (node, childNode) => {
+	if (childNode.parentNode) {
+		childNode.parentNode.removeChild(childNode);
+	}
+
+	node.append(childNode);
+}; // Same as `appendChildNode`, but without removing child node from parent node
+
+const _documentAppendStaticNode = (node, childNode) => {
+	node.append(childNode);
+};
+
+const _documentInsertBeforeNode = (node, newChildNode, beforeChildNode) => {
+	if (newChildNode.parentNode) {
+		newChildNode.parentNode.removeChild(newChildNode);
+	}
+
+	node.insertBefore(newChildNode, beforeChildNode);
+};
+
+const _documentRemoveChildNode = (node, removeNode) => {
+	node.removeChild(removeNode);
+};
+
+const _documentSetAttribute = (node, key, value) => {
+	node.setAttribute(key, value);
+};
+
+const _documentCreateTextNode = (document, text) => {
+	return document.createTextNode(text);
+};
+
+const _documentGetChildNodes = node => {
+	return [...node.childNodes];
+};
+
+const _documentGetTextContent = node => {
+	if (node.nodeType === 3) {
+		return node.data;
+	}
+
+	return null;
+};
+
+// Helper utilities implementing some common DOM methods to simplify reconciliation code
+const _createNode = tagName => ({
 	nodeName: tagName.toUpperCase(),
 	style: {},
 	attributes: {},
 	childNodes: [],
 	parentNode: null
 });
 
-export const appendChildNode = (node, childNode) => {
+const _appendChildNode = (node, childNode) => {
 	if (childNode.parentNode) {
-		removeChildNode(childNode.parentNode, childNode);
+		_removeChildNode(childNode.parentNode, childNode);
 	}
 
 	childNode.parentNode = node;
@@ -18,13 +67,13 @@ export const appendChildNode = (node, childNode) => {
 };
 
 // Same as `appendChildNode`, but without removing child node from parent node
-export const appendStaticNode = (node, childNode) => {
+const _appendStaticNode = (node, childNode) => {
 	node.childNodes.push(childNode);
 };
 
-export const insertBeforeNode = (node, newChildNode, beforeChildNode) => {
+const _insertBeforeNode = (node, newChildNode, beforeChildNode) => {
 	if (newChildNode.parentNode) {
-		removeChildNode(newChildNode.parentNode, newChildNode);
+		_removeChildNode(newChildNode.parentNode, newChildNode);
 	}
 
 	newChildNode.parentNode = node;
@@ -38,7 +87,7 @@ export const insertBeforeNode = (node, newChildNode, beforeChildNode) => {
 	node.childNodes.push(newChildNode);
 };
 
-export const removeChildNode = (node, removeNode) => {
+const _removeChildNode = (node, removeNode) => {
 	removeNode.parentNode = null;
 
 	const index = node.childNodes.indexOf(removeNode);
@@ -47,11 +96,47 @@ export const removeChildNode = (node, removeNode) => {
 	}
 };
 
-export const setAttribute = (node, key, value) => {
+const _setAttribute = (node, key, value) => {
 	node.attributes[key] = value;
 };
 
-export const createTextNode = text => ({
+const _createTextNode = text => ({
 	nodeName: '#text',
 	nodeValue: text
 });
+
+const _getChildNodes = node => {
+	return node.childNodes;
+};
+
+const _getTextContent = node => {
+	return node.textContent;
+};
+
+export const createDocumentHelpers = document => {
+	if (document) {
+		return Object.freeze({
+			createNode: tagName => _documentCreateNode(document, tagName),
+			appendChildNode: _documentAppendChildNode,
+			appendStaticNode: _documentAppendStaticNode,
+			insertBeforeNode: _documentInsertBeforeNode,
+			removeChildNode: _documentRemoveChildNode,
+			setAttribute: _documentSetAttribute,
+			createTextNode: text => _documentCreateTextNode(document, text),
+			getChildNodes: _documentGetChildNodes,
+			getTextContent: _documentGetTextContent
+		});
+	}
+
+	return Object.freeze({
+		createNode: _createNode,
+		appendChildNode: _appendChildNode,
+		appendStaticNode: _appendStaticNode,
+		insertBeforeNode: _insertBeforeNode,
+		removeChildNode: _removeChildNode,
+		setAttribute: _setAttribute,
+		createTextNode: _createTextNode,
+		getChildNodes: _getChildNodes,
+		getTextContent: _getTextContent
+	});
+};