ink 2.4.0 → 2.7.1

package/build/apply-styles.js

@@ -9,10 +9,6 @@ var _yogaLayoutPrebuilt = _interopRequireDefault(require("yoga-layout-prebuilt")
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const hasOwnProperty = (obj, prop) => {
-  return {}.hasOwnProperty.call(obj, prop);
-};
-
 const applyMarginStyles = (node, style) => {
   if (style.margin) {
     node.setMargin(_yogaLayoutPrebuilt.default.EDGE_TOP, style.margin);
@@ -110,7 +106,7 @@ const applyFlexStyles = (node, style) => {
     }
   }
 
-  if (hasOwnProperty(style, 'flexBasis')) {
+  if (style.flexBasis !== undefined) {
     node.setFlexBasis(style.flexBasis);
   }
 
@@ -152,19 +148,19 @@ const applyFlexStyles = (node, style) => {
 };
 
 const applyDimensionStyles = (node, style) => {
-  if (hasOwnProperty(style, 'width')) {
+  if (style.width !== undefined) {
     node.setWidth(style.width);
   }
 
-  if (hasOwnProperty(style, 'height')) {
+  if (style.height !== undefined) {
     node.setHeight(style.height);
   }
 
-  if (hasOwnProperty(style, 'minWidth')) {
+  if (style.minWidth !== undefined) {
     node.setMinWidth(style.minWidth);
   }
 
-  if (hasOwnProperty(style, 'minHeight')) {
+  if (style.minHeight !== undefined) {
     node.setMinHeight(style.minHeight);
   }
 };

package/build/components/App.js

@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -136,5 +136,6 @@ _defineProperty(App, "propTypes", {
   stdin: _propTypes.default.object.isRequired,
   stdout: _propTypes.default.object.isRequired,
   exitOnCtrlC: _propTypes.default.bool.isRequired,
+  // eslint-disable-line react/boolean-prop-naming
   onExit: _propTypes.default.func.isRequired
 });

package/build/components/Box.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 

package/build/components/Static.js

@@ -13,11 +13,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 

package/build/components/Text.js

@@ -53,6 +53,8 @@ const Text = ({
     unstable__transformChildren: transformChildren
   }, children);
 };
+/* eslint-disable react/boolean-prop-naming */
+
 
 Text.propTypes = {
   bold: _propTypes.default.bool,
@@ -62,6 +64,8 @@ Text.propTypes = {
   children: _propTypes.default.node.isRequired,
   unstable__transformChildren: _propTypes.default.func
 };
+/* eslint-enable react/boolean-prop-naming */
+
 Text.defaultProps = {
   bold: false,
   italic: false,

package/build/experimental/output.js

@@ -79,7 +79,11 @@ class Output {
       }
     }
 
-    return output.map(line => line.trimRight()).join('\n');
+    const generatedOutput = output.map(line => line.trimRight()).join('\n');
+    return {
+      output: generatedOutput,
+      height: output.length
+    };
   }
 
 }

package/build/experimental/renderer.js

@@ -64,11 +64,16 @@ var _default = ({
       });
     }
 
+    const {
+      output: generatedOutput,
+      height: outputHeight
+    } = output.get();
     return {
-      output: output.get(),
+      output: generatedOutput,
+      outputHeight,
       // Newline at the end is needed, because static output doesn't have one, so
       // interactive output will override last line of static output
-      staticOutput: staticOutput ? `${staticOutput.get()}\n` : undefined
+      staticOutput: staticOutput ? `${staticOutput.get().output}\n` : undefined
     };
   };
 };

package/build/hooks/use-app.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _AppContext = _interopRequireDefault(require("../components/AppContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = () => (0, _react.useContext)(_AppContext.default);
+
+exports.default = _default;

package/build/hooks/use-stdin.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _StdinContext = _interopRequireDefault(require("../components/StdinContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = () => (0, _react.useContext)(_StdinContext.default);
+
+exports.default = _default;

package/build/hooks/use-stdout.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _StdoutContext = _interopRequireDefault(require("../components/StdoutContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = () => (0, _react.useContext)(_StdoutContext.default);
+
+exports.default = _default;

package/build/index.js

@@ -57,6 +57,24 @@ Object.defineProperty(exports, "useInput", {
     return _useInput.default;
   }
 });
+Object.defineProperty(exports, "useApp", {
+  enumerable: true,
+  get: function () {
+    return _useApp.default;
+  }
+});
+Object.defineProperty(exports, "useStdin", {
+  enumerable: true,
+  get: function () {
+    return _useStdin.default;
+  }
+});
+Object.defineProperty(exports, "useStdout", {
+  enumerable: true,
+  get: function () {
+    return _useStdout.default;
+  }
+});
 
 var _render = _interopRequireDefault(require("./render"));
 
@@ -76,4 +94,10 @@ var _Static = _interopRequireDefault(require("./components/Static"));
 
 var _useInput = _interopRequireDefault(require("./hooks/use-input"));
 
+var _useApp = _interopRequireDefault(require("./hooks/use-app"));
+
+var _useStdin = _interopRequireDefault(require("./hooks/use-stdin"));
+
+var _useStdout = _interopRequireDefault(require("./hooks/use-stdout"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/build/instance.js

@@ -17,6 +17,8 @@ var _isCi = _interopRequireDefault(require("is-ci"));
 
 var _signalExit = _interopRequireDefault(require("signal-exit"));
 
+var _ansiEscapes = _interopRequireDefault(require("ansi-escapes"));
+
 var _reconciler = _interopRequireDefault(require("./reconciler"));
 
 var _reconciler2 = _interopRequireDefault(require("./experimental/reconciler"));
@@ -35,7 +37,7 @@ var _App = _interopRequireDefault(require("./components/App"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -98,6 +100,7 @@ class Instance {
 
     const {
       output,
+      outputHeight,
       staticOutput
     } = this.renderer(this.rootNode); // If <Static> output isn't empty, it means new children have been added to it
 
@@ -110,31 +113,39 @@ class Instance {
 
       this.options.stdout.write(this.fullStaticOutput + output);
       return;
-    } // To ensure static output is cleanly rendered before main output, clear main output first
+    }
 
+    if (_isCi.default) {
+      if (hasStaticOutput) {
+        this.options.stdout.write(staticOutput);
+      }
+
+      this.lastOutput = output;
+      return;
+    }
 
     if (hasStaticOutput) {
-      if (!_isCi.default) {
-        this.log.clear();
-      }
+      this.fullStaticOutput += staticOutput;
+    }
 
-      this.options.stdout.write(staticOutput);
+    if (this.options.experimental && outputHeight >= this.options.stdout.rows) {
+      this.options.stdout.write(_ansiEscapes.default.clearTerminal + this.fullStaticOutput + output);
+      this.lastOutput = output;
+      return;
+    } // To ensure static output is cleanly rendered before main output, clear main output first
 
-      if (!_isCi.default) {
-        if (this.options.experimental) {
-          this.throttledLog(output);
-        } else {
-          this.log(output);
-        }
-      }
+
+    if (hasStaticOutput) {
+      this.log.clear();
+      this.options.stdout.write(staticOutput);
     }
 
     if (output !== this.lastOutput) {
-      if (!_isCi.default) {
+      if (this.options.experimental) {
+        this.throttledLog(output);
+      } else {
         this.log(output);
       }
-
-      this.lastOutput = output;
     }
   }
 

package/build/output.js

@@ -65,6 +65,10 @@ class Output {
     return this.output.map(line => line.trimRight()).join('\n');
   }
 
+  getHeight() {
+    return this.output.length;
+  }
+
 }
 
 exports.default = Output;

package/build/reconciler.js

@@ -45,7 +45,7 @@ const hostConfig = {
           }
         }
       } else if (key === 'style') {
-        Object.assign(node.style, value);
+        node.style = value;
       } else if (key === 'unstable__transformChildren') {
         node.unstable__transformChildren = value; // eslint-disable-line camelcase
       } else if (key === 'unstable__static') {
@@ -101,7 +101,7 @@ const hostConfig = {
           }
         }
       } else if (key === 'style') {
-        Object.assign(node.style, value);
+        node.style = value;
       } else if (key === 'unstable__transformChildren') {
         node.unstable__transformChildren = value; // eslint-disable-line camelcase
       } else if (key === 'unstable__static') {

package/build/render-node-to-output.js

@@ -38,7 +38,19 @@ const isAllTextNodes = node => {
 
 
 const squashTextNodes = node => {
-  let text = '';
+  if (node.childNodes.length === 0) {
+    return '';
+  } // If parent container is `<Box>`, text nodes will be treated as separate nodes in
+  // the tree and will have their own coordinates in the layout.
+  // To ensure text nodes are aligned correctly, take X and Y of the first text node
+  // and use them as offset for the rest of the nodes
+  // Only first node is taken into account, because other text nodes can't have margin or padding,
+  // so their coordinates will be relative to the first node anyway
+
+
+  const offsetX = node.childNodes[0].yogaNode.getComputedLeft();
+  const offsetY = node.childNodes[0].yogaNode.getComputedTop();
+  let text = '\n'.repeat(offsetY) + ' '.repeat(offsetX);
 
   for (const childNode of node.childNodes) {
     let nodeText;

package/build/render.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -30,7 +30,8 @@ var _default = (node, options = {}) => {
     stdout: process.stdout,
     stdin: process.stdin,
     debug: false,
-    exitOnCtrlC: true
+    exitOnCtrlC: true,
+    experimental: false
   }, options);
   let instance;
 

package/build/renderer.js

@@ -110,6 +110,7 @@ var _default = ({
     });
     return {
       output: output.get(),
+      outputHeight: output.getHeight(),
       staticOutput: staticOutput ? `${staticOutput.get()}\n` : undefined
     };
   };

package/index.d.ts

@@ -228,20 +228,41 @@ export const Text: React.FC<TextProps>;
  */
 export const Static: React.FC<{children: React.ReactNodeArray}>;
 
-/**
- * `<AppContext>` is a React context, which exposes a method to manually exit the app (unmount).
- */
-export const AppContext: React.Context<{
+interface AppProps {
 	/**
 	 * Exit (unmount) the whole Ink app.
 	 */
 	readonly exit: (error?: Error) => void;
-}>;
+}
 
 /**
- * <StdinContext> is a React context, which exposes input stream.
+ * `AppContext` is a React context, which exposes a method to manually exit the app (unmount).
  */
-export const StdinContext: React.Context<{
+export const AppContext: React.Context<AppProps>;
+
+/**
+ * `useApp` is a React hook, which exposes props of `AppContext`.
+ * ```js
+ * import {useApp} from 'ink';
+ *
+ * const MyApp = () => {
+ *   const {exit} = useApp();
+ * };
+ * ```
+ *
+ * It's equivalent to consuming `AppContext` props via `AppContext.Consumer`:
+ *
+ * ```jsx
+ * <AppContext.Consumer>
+ *   {({exit}) => {
+ *     // …
+ *   }}
+ * </AppContext.Consumer>
+ * ```
+ */
+export function useApp(): AppProps;
+
+interface StdinProps {
 	/**
 	 * Stdin stream passed to `render()` in `options.stdin` or `process.stdin` by default. Useful if your app needs to handle user input.
 	 */
@@ -257,14 +278,33 @@ export const StdinContext: React.Context<{
 	 * If the `stdin` stream passed to Ink does not support setRawMode, this function does nothing.
 	 */
 	readonly setRawMode: NodeJS.ReadStream['setRawMode'];
-}>;
+}
+
+/**
+ * `StdinContext` is a React context, which exposes input stream.
+ */
+export const StdinContext: React.Context<StdinProps>;
 
 /**
- * `<StdoutContext>` is a React context, which exposes stdout stream, where Ink renders your app.
+ * `useStdin` is a React hook, which exposes props of `StdinContext`.
+ * Similar to `useApp`, it's equivalent to consuming `StdinContext` directly.
  */
-export const StdoutContext: React.Context<{
+export function useStdin(): StdinProps;
+
+interface StdoutProps {
 	/**
 	 * Stdout stream passed to `render()` in `options.stdout` or `process.stdout` by default.
 	 */
 	readonly stdout: NodeJS.WriteStream;
-}>;
+}
+
+/**
+ * `StdoutContext` is a React context, which exposes stdout stream, where Ink renders your app.
+ */
+export const StdoutContext: React.Context<StdoutProps>;
+
+/**
+ * `useStdout` is a React hook, which exposes props of `StdoutContext`.
+ * Similar to `useStdout`, it's equivalent to consuming `StdoutContext` directly.
+ */
+export function useStdout(): StdoutProps;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ink",
-	"version": "2.4.0",
+	"version": "2.7.1",
 	"description": "React for CLI",
 	"license": "MIT",
 	"repository": "vadimdemedes/ink",
@@ -40,51 +40,58 @@
 		"text"
 	],
 	"dependencies": {
-		"@types/react": "^16.8.6",
-		"arrify": "^1.0.1",
-		"auto-bind": "^2.0.0",
-		"chalk": "^2.4.1",
-		"cli-cursor": "^2.1.0",
-		"cli-truncate": "^1.1.0",
+		"ansi-escapes": "^4.2.1",
+		"arrify": "^2.0.1",
+		"auto-bind": "^4.0.0",
+		"chalk": "^3.0.0",
+		"cli-cursor": "^3.1.0",
+		"cli-truncate": "^2.1.0",
 		"is-ci": "^2.0.0",
 		"lodash.throttle": "^4.1.1",
 		"log-update": "^3.0.0",
 		"prop-types": "^15.6.2",
-		"react-reconciler": "^0.21.0",
-		"scheduler": "^0.15.0",
+		"react-reconciler": "^0.24.0",
+		"scheduler": "^0.18.0",
 		"signal-exit": "^3.0.2",
-		"slice-ansi": "^1.0.0",
-		"string-length": "^2.0.0",
-		"widest-line": "^2.0.0",
-		"wrap-ansi": "^5.0.0",
+		"slice-ansi": "^3.0.0",
+		"string-length": "^3.1.0",
+		"widest-line": "^3.1.0",
+		"wrap-ansi": "^6.2.0",
 		"yoga-layout-prebuilt": "^1.9.3"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.1.2",
-		"@babel/core": "^7.1.2",
-		"@babel/plugin-proposal-class-properties": "^7.1.0",
-		"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-		"@babel/preset-react": "^7.0.0",
-		"ava": "^1.3.1",
+		"@babel/cli": "^7.8.3",
+		"@babel/core": "^7.8.3",
+		"@babel/plugin-proposal-class-properties": "^7.8.3",
+		"@babel/plugin-proposal-object-rest-spread": "^7.8.3",
+		"@babel/preset-react": "^7.8.3",
+		"@types/react": "^16.9.19",
+		"ava": "^2.4.0",
 		"babel-eslint": "^10.0.1",
 		"delay": "^4.1.0",
-		"eslint-config-xo-react": "^0.19.0",
-		"eslint-plugin-react": "^7.11.1",
-		"eslint-plugin-react-hooks": "^1.4.0",
-		"import-jsx": "^1.3.0",
+		"eslint-config-xo-react": "^0.22.0",
+		"eslint-plugin-react": "^7.18.0",
+		"eslint-plugin-react-hooks": "^2.3.0",
+		"import-jsx": "^3.1.0",
 		"ms": "^2.1.1",
-		"node-pty": "^0.8.1",
-		"p-queue": "^3.0.0",
+		"node-pty": "^0.9.0",
+		"p-queue": "^6.2.1",
 		"react": "^16.9.0",
-		"sinon": "^7.2.7",
-		"strip-ansi": "^5.2.0",
+		"sinon": "^8.1.1",
+		"strip-ansi": "^6.0.0",
 		"svg-term-cli": "^2.1.1",
-		"tsd": "^0.8.0",
-		"xo": "^0.24.0"
+		"tsd": "^0.11.0",
+		"xo": "^0.25.3"
 	},
 	"peerDependencies": {
+		"@types/react": ">=16.8.0",
 		"react": ">=16.8.0"
 	},
+	"peerDependenciesMeta": {
+		"@types/react": {
+			"optional": true
+		}
+	},
 	"babel": {
 		"plugins": [
 			"@babel/plugin-proposal-class-properties",
@@ -107,7 +114,13 @@
 					"@babel/preset-react"
 				]
 			}
-		}
+		},
+		"files": [
+			"test/*.js"
+		],
+		"helpers": [
+			"test/helpers/*.js"
+		]
 	},
 	"xo": {
 		"parser": "babel-eslint",
@@ -118,7 +131,9 @@
 			"react"
 		],
 		"rules": {
-			"react/no-unescaped-entities": "off"
+			"react/no-unescaped-entities": "off",
+			"react/state-in-constructor": "off",
+			"react/jsx-indent": "off"
 		},
 		"overrides": [
 			{
@@ -128,7 +143,7 @@
 				],
 				"rules": {
 					"unicorn/filename-case": "off",
-					"react/require-default-props": "warning"
+					"react/require-default-props": "warn"
 				}
 			}
 		]

package/readme.md

@@ -11,19 +11,17 @@
 
 ![Build Status](https://github.com/vadimdemedes/ink/workflows/tests/badge.svg)
 
-
 ## Install
 
 ```
 $ npm install ink react
 ```
 
-
 ## Usage
 
 ```jsx
-import React, {Component} from 'react';
-import {render, Color} from 'ink';
+import React, { Component } from "react";
+import { render, Color } from "ink";
 
 class Counter extends Component {
 	constructor() {
@@ -35,11 +33,7 @@ class Counter extends Component {
 	}
 
 	render() {
-		return (
-			<Color green>
-				{this.state.i} tests passed
-			</Color>
-		);
+		return <Color green>{this.state.i} tests passed</Color>;
 	}
 
 	componentDidMount() {
@@ -55,7 +49,7 @@ class Counter extends Component {
 	}
 }
 
-render(<Counter/>);
+render(<Counter />);
 ```
 
 <img src="media/demo.svg" width="600">
@@ -63,33 +57,39 @@ render(<Counter/>);
 You can also check it out live on [repl.it sandbox](https://ink-counter-demo.vadimdemedes.repl.run/).
 Feel free to play around with the code and fork this repl at [https://repl.it/@vadimdemedes/ink-counter-demo](https://repl.it/@vadimdemedes/ink-counter-demo).
 
-
-## Built with Ink
-
-- [emoj](https://github.com/sindresorhus/emoj) - Find relevant emoji on the command-line.
-- [emma](https://github.com/maticzav/emma-cli) - Terminal assistant to find and install npm packages.
-- [swiff](https://github.com/simple-integrated-marketing/swiff) - Multi-environment command line tools for time-saving web developers.
-- [changelog-view](https://github.com/jdeniau/changelog-view) - Tool view changelog in console.
-- [gomoku-terminal](https://github.com/acrazing/gomoku-terminal) - Play online Gomoku in the terminal.
-- [cfpush](https://github.com/mamachanko/cfpush) - An interactive Cloud Foundry tutorial in your terminal.
-- [startd](https://github.com/mgrip/startd) - Turn your React component into a web app from the command-line.
-- [sindresorhus](https://github.com/sindresorhus/sindresorhus) - The Sindre Sorhus CLI.
-- [tap](https://node-tap.org) - A Test-Anything-Protocol library for JavaScript.
-- [gatsby-cli](https://www.gatsbyjs.org) - Gatsby is a modern web framework for blazing fast websites.
-
+## Who's Using Ink?
+
+-   [Gatsby](https://www.gatsbyjs.org) - Gatsby is a modern web framework for blazing fast websites.
+-   [Parcel](https://parceljs.org) - Blazing fast, zero configuration web application bundler.
+-   [tap](https://node-tap.org) - A Test-Anything-Protocol library for JavaScript.
+-   [Typewriter](https://github.com/segmentio/typewriter) - Generates strongly-typed [Segment](https://segment.com) analytics clients from arbitrary JSON Schema.
+-   [Prisma](https://www.prisma.io) - The unified data layer for modern applications.
+-   [Wallace](https://www.projectwallace.com) - Pretty CSS analytics on the CLI.
+-   [tink](https://github.com/npm/tink) - Next-generation runtime and package manager.
+-   [Splash](https://github.com/Shopify/polaris-react/tree/master/scripts/splash) - Observe the splash zone of a change across the Shopify's [Polaris](https://polaris.shopify.com) component library.
+-   [emoj](https://github.com/sindresorhus/emoj) - Find relevant emoji on the command-line.
+-   [emma](https://github.com/maticzav/emma-cli) - Terminal assistant to find and install npm packages.
+-   [sindresorhus](https://github.com/sindresorhus/sindresorhus) - The Sindre Sorhus CLI.
+-   [swiff](https://github.com/simple-integrated-marketing/swiff) - Multi-environment command line tools for time-saving web developers.
+-   [share](https://github.com/marionebl/share-cli) - Quickly share files from your command line.
+-   [Kubelive](https://github.com/ameerthehacker/kubelive) - CLI for Kubernetes to provide live data about the cluster and its resources.
+-   [changelog-view](https://github.com/jdeniau/changelog-view) - Tool view changelog in console.
+-   [gomoku-terminal](https://github.com/acrazing/gomoku-terminal) - Play online Gomoku in the terminal.
+-   [cfpush](https://github.com/mamachanko/cfpush) - An interactive Cloud Foundry tutorial in your terminal.
+-   [startd](https://github.com/mgrip/startd) - Turn your React component into a web app from the command-line.
+-   [wiki-cli](https://github.com/hexrcs/wiki-cli) - Search Wikipedia and read summaries directly in your terminal.
 
 ## Contents
 
-- [Getting Started](#getting-started)
-- [Examples](#examples)
-- [API](#api)
-- [Building Layouts](#building-layouts)
-- [Built-in Components](#built-in-components)
-- [Hooks](#hooks)
-- [Useful Components](#useful-components)
-- [Testing](#testing)
-- [Experimental mode](#experimental-mode)
-
+-   [Getting Started](#getting-started)
+-   [Examples](#examples)
+-   [API](#api)
+-   [Building Layouts](#building-layouts)
+-   [Built-in Components](#built-in-components)
+-   [Hooks](#hooks)
+-   [Useful Components](#useful-components)
+-   [Testing](#testing)
+-   [Experimental mode](#experimental-mode)
 
 ## Getting Started
 
@@ -120,25 +120,19 @@ To get started with Ink quickly, use [create-ink-app](https://github.com/vadimde
 Don't forget to import `React` into every file that contains JSX:
 
 ```jsx
-import React from 'react';
-import {render, Box} from 'ink';
+import React from "react";
+import { render, Box } from "ink";
 
-const Demo = () => (
-	<Box>
-		Hello World
-	</Box>
-);
+const Demo = () => <Box>Hello World</Box>;
 
-render(<Demo/>);
+render(<Demo />);
 ```
 
-
 ## Examples
 
-- [Jest](examples/jest/jest.js) - Implementation of basic Jest UI [(live demo)](https://ink-jest-demo.vadimdemedes.repl.run/).
-- [Counter](examples/counter/counter.js) - Simple counter that increments every 100ms [(live demo)](https://ink-counter-demo.vadimdemedes.repl.run/).
-- [Form with Validation](https://github.com/final-form/rff-cli-example) - Using framework agnostic form library, [🏁 Final Form](https://github.com/final-form/final-form#-final-form) to manage input state.
-
+-   [Jest](examples/jest/jest.js) - Implementation of basic Jest UI [(live demo)](https://ink-jest-demo.vadimdemedes.repl.run/).
+-   [Counter](examples/counter/counter.js) - Simple counter that increments every 100ms [(live demo)](https://ink-counter-demo.vadimdemedes.repl.run/).
+-   [Form with Validation](https://github.com/final-form/rff-cli-example) - Using framework agnostic form library, [🏁 Final Form](https://github.com/final-form/final-form#-final-form) to manage input state.
 
 ## API
 
@@ -197,8 +191,8 @@ Default: `false`
 Enables [experimental mode](#experimental-mode).
 
 ```jsx
-import React, {Component} from 'react';
-import {render, Box} from 'ink';
+import React, { Component } from "react";
+import { render, Box } from "ink";
 
 class Counter extends Component {
 	constructor() {
@@ -210,11 +204,7 @@ class Counter extends Component {
 	}
 
 	render() {
-		return (
-			<Box>
-				Iteration #{this.state.i}
-			</Box>
-		);
+		return <Box>Iteration #{this.state.i}</Box>;
 	}
 
 	componentDidMount() {
@@ -230,7 +220,7 @@ class Counter extends Component {
 	}
 }
 
-const app = render(<Counter/>);
+const app = render(<Counter />);
 
 setTimeout(() => {
 	// Enough counting
@@ -254,12 +244,12 @@ Replace previous root node with a new one or update props of the current root no
 
 ```jsx
 // Update props of the root node
-const {rerender} = render(<Counter count={1}/>);
-rerender(<Counter count={2}/>);
+const { rerender } = render(<Counter count={1} />);
+rerender(<Counter count={2} />);
 
 // Replace root node
-const {rerender} = render(<OldCounter/>);
-rerender(<NewCounter/>);
+const { rerender } = render(<OldCounter />);
+rerender(<NewCounter />);
 ```
 
 ##### unmount
@@ -267,7 +257,7 @@ rerender(<NewCounter/>);
 Manually unmount the whole Ink app.
 
 ```jsx
-const {unmount} = render(<MyApp/>);
+const { unmount } = render(<MyApp />);
 unmount();
 ```
 
@@ -276,7 +266,7 @@ unmount();
 Returns a promise, which resolves when app is unmounted.
 
 ```jsx
-const {unmount, waitUntilExit} = render(<MyApp/>);
+const { unmount, waitUntilExit } = render(<MyApp />);
 
 setTimeout(unmount, 1000);
 
@@ -290,7 +280,6 @@ It's important to remember that each element is a Flexbox container.
 Think of it as if each `<div>` in the browser had `display: flex`.
 See `<Box>` built-in component below for documentation on how to use Flexbox layouts in Ink.
 
-
 ### Built-in Components
 
 #### `<Box>`
@@ -300,7 +289,7 @@ See `<Box>` built-in component below for documentation on how to use Flexbox lay
 Import:
 
 ```js
-import {Box} from 'ink';
+import { Box } from "ink";
 ```
 
 ##### Dimensions
@@ -317,8 +306,7 @@ Width of the element in spaces. You can also set it in percent, which will calcu
 
 ```jsx
 <Box width={10}>
-	<Box width="50%">X</Box>
-	Y
+	<Box width="50%">X</Box>Y
 </Box> //=> 'X    Y'
 ```
 
@@ -334,8 +322,7 @@ Height of the element in lines (rows). You can also set it in percent, which wil
 
 ```jsx
 <Box height={6} flexDirection="column">
-	<Box height="50%">X</Box>
-	Y
+	<Box height="50%">X</Box>Y
 </Box> //=> 'X\n\n\nY\n\n'
 ```
 
@@ -360,7 +347,7 @@ Values: `wrap` `truncate` `truncate-start` `truncate-middle` `truncate-end`
 
 This property tells Ink to wrap or truncate text content of `<Box>` if its width is larger than container. If `wrap` is passed, Ink will wrap text and split it into multiple lines. If `truncate-*` is passed, Ink will truncate text instead, which will result in one line of text with the rest cut off.
 
-*Note:* Ink doesn't wrap text by default.
+_Note:_ Ink doesn't wrap text by default.
 
 ```jsx
 <Box textWrap="wrap">Hello World</Box>
@@ -483,9 +470,7 @@ See [flex-grow](https://css-tricks.com/almanac/properties/f/flex-grow/).
 ```jsx
 <Box>
 	Label:
-	<Box flexGrow={1}>
-		Fills all remaining space
-	</Box>
+	<Box flexGrow={1}>Fills all remaining space</Box>
 </Box>
 ```
 
@@ -501,9 +486,7 @@ See [flex-shrink](https://css-tricks.com/almanac/properties/f/flex-shrink/).
 	<Box flexShrink={2} width={10}>
 		Will be 1/4
 	</Box>
-	<Box width={10}>
-		Will be 3/4
-	</Box>
+	<Box width={10}>Will be 3/4</Box>
 </Box>
 ```
 
@@ -515,15 +498,13 @@ See [flex-basis](https://css-tricks.com/almanac/properties/f/flex-basis/).
 
 ```jsx
 <Box width={6}>
-	<Box flexBasis={3}>X</Box>
-	Y
+	<Box flexBasis={3}>X</Box>Y
 </Box> //=> 'X  Y'
 ```
 
 ```jsx
 <Box width={6}>
-	<Box flexBasis="50%">X</Box>
-	Y
+	<Box flexBasis="50%">X</Box>Y
 </Box> //=> 'X  Y'
 ```
 
@@ -631,7 +612,6 @@ See [justify-content](https://css-tricks.com/almanac/properties/f/justify-conten
 // [  X   Y  ]
 ```
 
-
 #### `<Color>`
 
 The `<Color>` component is a simple wrapper around [the `chalk` API](https://github.com/chalk/chalk#api).
@@ -640,7 +620,7 @@ It supports all of the chalk's methods as `props`.
 Import:
 
 ```js
-import {Color} from 'ink';
+import { Color } from "ink";
 ```
 
 Usage:
@@ -666,7 +646,7 @@ This component can change the style of the text, make it bold, underline, italic
 Import:
 
 ```js
-import {Text} from 'ink';
+import { Text } from "ink";
 ```
 
 ##### bold
@@ -717,12 +697,12 @@ Jest continuously writes the list of completed tests to the output, while updati
 <>
 	<Static>
 		{tests.map(test => (
-			<Test key={test.id} title={test.title}/>
+			<Test key={test.id} title={test.title} />
 		))}
 	</Static>
 
 	<Box marginTop={1}>
-		<TestResults passed={results.passed} failed={results.failed}/>
+		<TestResults passed={results.passed} failed={results.failed} />
 	</Box>
 </>
 ```
@@ -736,7 +716,7 @@ See [examples/jest](examples/jest/jest.js) for a basic implementation of Jest's
 Import:
 
 ```js
-import {AppContext} from 'ink';
+import { AppContext } from "ink";
 ```
 
 ##### exit
@@ -765,7 +745,7 @@ If `exit` is called with an Error, `waitUntilExit` will reject with that error.
 Import:
 
 ```js
-import {StdinContext} from 'ink';
+import { StdinContext } from "ink";
 ```
 
 ##### stdin
@@ -780,9 +760,7 @@ Usage:
 
 ```jsx
 <StdinContext.Consumer>
-	{({ stdin }) => (
-		<MyComponent stdin={stdin}/>
-	)}
+	{({ stdin }) => <MyComponent stdin={stdin} />}
 </StdinContext.Consumer>
 ```
 
@@ -797,9 +775,13 @@ Usage:
 
 ```jsx
 <StdinContext.Consumer>
-	{({ isRawModeSupported, setRawMode, stdin }) => (
-		isRawModeSupported ? <MyInputComponent setRawMode={setRawMode} stdin={stdin}/> : <MyComponentThatDoesntUseInput />
-	)}
+	{({ isRawModeSupported, setRawMode, stdin }) =>
+		isRawModeSupported ? (
+			<MyInputComponent setRawMode={setRawMode} stdin={stdin} />
+		) : (
+			<MyComponentThatDoesntUseInput />
+		)
+	}
 </StdinContext.Consumer>
 ```
 
@@ -808,7 +790,7 @@ Usage:
 Type: `function`<br>
 
 See [`setRawMode`](https://nodejs.org/api/tty.html#tty_readstream_setrawmode_mode).
-Ink exposes this function via own `<StdinContext>` to be able to handle <kbd>Ctrl</kbd>+<kbd>C</kbd>, that's why you should use Ink's `setRawMode` instead of `process.stdin.setRawMode`. Ink also enables `keypress` events via [`readline.emitKeypressEvents()`](https://nodejs.org/api/readline.html#readline_readline_emitkeypressevents_stream_interface) when raw mode is enabled.
+Ink exposes this function via own `<StdinContext>` to be able to handle <kbd>Ctrl</kbd>+<kbd>C</kbd>, that's why you should use Ink's `setRawMode` instead of `process.stdin.setRawMode`.
 
 **Warning:** This function will throw unless the current `stdin` supports `setRawMode`. Use [`isRawModeSupported`](#israwmodesupported) to detect `setRawMode` support.
 
@@ -816,9 +798,7 @@ Usage:
 
 ```jsx
 <StdinContext.Consumer>
-	{({ setRawMode }) => (
-		<MyComponent setRawMode={setRawMode}/>
-	)}
+	{({ setRawMode }) => <MyComponent setRawMode={setRawMode} />}
 </StdinContext.Consumer>
 ```
 
@@ -829,7 +809,7 @@ Usage:
 Import:
 
 ```js
-import {StdoutContext} from 'ink';
+import { StdoutContext } from "ink";
 ```
 
 ##### stdout
@@ -841,9 +821,7 @@ Usage:
 
 ```jsx
 <StdoutContext.Consumer>
-	{({ stdout }) => (
-		<MyComponent stdout={stdout}/>
-	)}
+	{({ stdout }) => <MyComponent stdout={stdout} />}
 </StdoutContext.Consumer>
 ```
 
@@ -890,8 +868,11 @@ Type: `object`
 Handy information about a key that was pressed.
 
 ##### key.leftArrow
+
 ##### key.rightArrow
+
 ##### key.upArrow
+
 ##### key.downArrow
 
 Type: `boolean`<br>
@@ -928,40 +909,76 @@ Default: `false`
 
 [Meta key](https://en.wikipedia.org/wiki/Meta_key) was pressed.
 
+### useApp
+
+`useApp` is a React hook, which exposes props of [`AppContext`](#appcontext).
+
+```js
+import { useApp } from "ink";
+
+const MyApp = () => {
+	const { exit } = useApp();
+};
+```
+
+It's equivalent to consuming `AppContext` props via `AppContext.Consumer`:
+
+```jsx
+<AppContext.Consumer>
+	{({ exit }) => {
+		// …
+	}}
+</AppContext.Consumer>
+```
+
+### useStdin
+
+`useStdin` is a React hook, which exposes props of [`StdinContext`](#stdincontext).
+Similar to `useApp`, it's equivalent to consuming `StdinContext` directly.
+
+### useStdout
+
+`useStdout` is a React hook, which exposes props of [`StdoutContext`](#stdoutcontext).
+Similar to `useApp`, it's equivalent to consuming `StdoutContext` directly.
+
+## Useful Hooks
+
+-   [ink-use-stdout-dimensions](https://github.com/cameronhunter/ink-monorepo/tree/master/packages/ink-use-stdout-dimensions) - Subscribe to stdout dimensions.
 
 ## Useful Components
 
-- [ink-text-input](https://github.com/vadimdemedes/ink-text-input) - Text input.
-- [ink-spinner](https://github.com/vadimdemedes/ink-spinner) - Spinner.
-- [ink-select-input](https://github.com/vadimdemedes/ink-select-input) - Select (dropdown) input.
-- [ink-link](https://github.com/sindresorhus/ink-link) - Link component.
-- [ink-box](https://github.com/sindresorhus/ink-box) - Styled box component.
-- [ink-gradient](https://github.com/sindresorhus/ink-gradient) - Gradient color component.
-- [ink-big-text](https://github.com/sindresorhus/ink-big-text) - Awesome text component.
-- [ink-image](https://github.com/kevva/ink-image) - Display images inside the terminal.
-- [ink-tab](https://github.com/jdeniau/ink-tab) - Tab component.
-- [ink-color-pipe](https://github.com/LitoMore/ink-color-pipe) - Create color text with simpler style strings in Ink.
-- [ink-multi-select](https://github.com/karaggeorge/ink-multi-select) - Select one or more values from a list
-- [ink-divider](https://github.com/JureSotosek/ink-divider) - A divider component.
-- [ink-progress-bar](https://github.com/brigand/ink-progress-bar) - Configurable component for rendering progress bars.
-- [ink-table](https://github.com/maticzav/ink-table) - Table component.
+-   [ink-text-input](https://github.com/vadimdemedes/ink-text-input) - Text input.
+-   [ink-spinner](https://github.com/vadimdemedes/ink-spinner) - Spinner.
+-   [ink-select-input](https://github.com/vadimdemedes/ink-select-input) - Select (dropdown) input.
+-   [ink-link](https://github.com/sindresorhus/ink-link) - Link component.
+-   [ink-box](https://github.com/sindresorhus/ink-box) - Styled box component.
+-   [ink-gradient](https://github.com/sindresorhus/ink-gradient) - Gradient color component.
+-   [ink-big-text](https://github.com/sindresorhus/ink-big-text) - Awesome text component.
+-   [ink-image](https://github.com/kevva/ink-image) - Display images inside the terminal.
+-   [ink-tab](https://github.com/jdeniau/ink-tab) - Tab component.
+-   [ink-color-pipe](https://github.com/LitoMore/ink-color-pipe) - Create color text with simpler style strings in Ink.
+-   [ink-multi-select](https://github.com/karaggeorge/ink-multi-select) - Select one or more values from a list
+-   [ink-divider](https://github.com/JureSotosek/ink-divider) - A divider component.
+-   [ink-progress-bar](https://github.com/brigand/ink-progress-bar) - Configurable component for rendering progress bars.
+-   [ink-table](https://github.com/maticzav/ink-table) - Table component.
+-   [ink-ascii](https://github.com/hexrcs/ink-ascii) - Awesome text component with more font choices, based on Figlet.
+-   [ink-markdown](https://github.com/cameronhunter/ink-markdown) - Render syntax highlighted Markdown.
 
 ### Incompatible components
 
 These are components that haven't migrated to Ink 2 yet:
 
-- [ink-console](https://github.com/ForbesLindesay/ink-console) - Render output from `console[method]` calls in a scrollable panel.
-- [ink-confirm-input](https://github.com/kevva/ink-confirm-input) - Yes/No confirmation input.
-- [ink-checkbox-list](https://github.com/MaxMEllon/ink-checkbox-list) - Checkbox.
-- [ink-quicksearch](https://github.com/aicioara/ink-quicksearch) - Select Component with fast quicksearch-like navigation
-- [ink-autocomplete](https://github.com/maticzav/ink-autocomplete) - Autocomplete.
-- [ink-broadcast](https://github.com/jimmed/ink-broadcast) - Implementation of react-broadcast for Ink.
-- [ink-router](https://github.com/jimmed/ink-router) - Implementation of react-router for Ink.
-- [ink-select](https://github.com/karaggeorge/ink-select) - Select component.
-- [ink-scrollbar](https://github.com/karaggeorge/ink-scrollbar) - Scrollbar component.
-- [ink-text-animation](https://github.com/yardnsm/ink-text-animation) - Text animation component.
-- [ink-figlet](https://github.com/KimotoYanke/ink-figlet) - Large text component with Figlet fonts.
-
+-   [ink-console](https://github.com/ForbesLindesay/ink-console) - Render output from `console[method]` calls in a scrollable panel.
+-   [ink-confirm-input](https://github.com/kevva/ink-confirm-input) - Yes/No confirmation input.
+-   [ink-checkbox-list](https://github.com/MaxMEllon/ink-checkbox-list) - Checkbox.
+-   [ink-quicksearch](https://github.com/aicioara/ink-quicksearch) - Select Component with fast quicksearch-like navigation
+-   [ink-autocomplete](https://github.com/maticzav/ink-autocomplete) - Autocomplete.
+-   [ink-broadcast](https://github.com/jimmed/ink-broadcast) - Implementation of react-broadcast for Ink.
+-   [ink-router](https://github.com/jimmed/ink-router) - Implementation of react-router for Ink.
+-   [ink-select](https://github.com/karaggeorge/ink-select) - Select component.
+-   [ink-scrollbar](https://github.com/karaggeorge/ink-scrollbar) - Scrollbar component.
+-   [ink-text-animation](https://github.com/yardnsm/ink-text-animation) - Text animation component.
+-   [ink-figlet](https://github.com/KimotoYanke/ink-figlet) - Large text component with Figlet fonts.
 
 ## Testing
 
@@ -969,34 +986,51 @@ Ink components are simple to test with [ink-testing-library](https://github.com/
 Here's a simple example that checks how component is rendered:
 
 ```jsx
-import React from 'react';
-import {Text} from 'ink';
-import {render} from 'ink-testing-library';
+import React from "react";
+import { Text } from "ink";
+import { render } from "ink-testing-library";
 
 const Test = () => <Text>Hello World</Text>;
-const {lastFrame} = render(<Test/>);
+const { lastFrame } = render(<Test />);
 
-lastFrame() === 'Hello World'; //=> true
+lastFrame() === "Hello World"; //=> true
 ```
 
 Visit [ink-testing-library](https://github.com/vadimdemedes/ink-testing-library) for more examples and full documentation.
 
 ## Experimental Mode
 
-Ink has experimental mode, which currently enables a more efficient and faster reconciler and renderer.
+Ink has experimental mode, which includes stable new features behind a flag.
+They're exposed behind a flag, because I want to be extra sure that it doesn't introduce regressions before shipping this new code for everyone and making it a default.
+
 Instead of shipping it under `next` tag or something similar, Ink ships it as part of a regular release.
 It can be enabled simply by passing `experimental` parameter to `render()` function:
 
 ```jsx
-render(<App/>, {experimental: true});
+render(<App />, { experimental: true });
 ```
 
-Experimental mode actually includes stable features, but I want to be extra sure that it doesn't introduce regressions before shipping this new code for everyone and making it a default.
-
 Feel free to use experimental mode in development and I would appreciate if you reported any regressions you might see.
 
+### More efficient reconciler and renderer
+
+Experimental mode enables a new reconciler and renderer, which should significantly improve the rendering performance of your Ink apps.
+Ink rebuilds the entire layout and output on every update, which can be taxing if there's a high frequency of updates.
+Experimental mode ensures only necessary parts of the layout are updated and limits the number of renders to 60 frames per second.
+
+### Automatic handling of oversized output
+
+Unfortunately, terminals can't rerender output that is taller than terminal window.
+So if your app output has a height of 60 rows, but user resized terminal window to 50 rows, first 10 rows won't be rerendered, because they're out of viewport.
+
+Experimental mode adopts the same workaround that Jest does, it erases the entire terminal content if output is taller than terminal window. It comes with tradeoffs though:
+
+-   Output can become janky, since erasing terminal is not a "cheap" operation.
+-   Entire scrollback history in that terminal session will be lost.
+
+It is, however, the only way known now to handle this.
 
 ## Maintainers
 
-- [Vadim Demedes](https://github.com/vadimdemedes)
-- [Sindre Sorhus](https://github.com/sindresorhus)
+-   [Vadim Demedes](https://github.com/vadimdemedes)
+-   [Sindre Sorhus](https://github.com/sindresorhus)