Fixes to make rendering actually good.

Author: jacob314

examples/text-wrap/text-wrap.tsx

@@ -46,7 +46,7 @@ function TextWrap() {
 
 	useEffect(() => {
 		const timer = setInterval(() => {
-			setCounter(prev => prev + 1);
+			setCounter(previous => previous + 1);
 		}, 100);
 
 		return () => {
@@ -75,6 +75,7 @@ function TextWrap() {
 			</Box>
 			<Box width={size.columns} flexDirection="column" borderStyle="single">
 				{tsExample.split('\n').map((line, i) => (
+					// eslint-disable-next-line react/no-array-index-key
 					<Box key={i} flexDirection="row">
 						<Box width={3} flexShrink={0} flexGrow={0}>
 							<Text>{i + 1}</Text>

src/dom.ts

@@ -5,7 +5,7 @@ import {
 	widestLineFromStyledChars,
 } from './measure-text.js';
 import {type Styles} from './styles.js';
-import {wrapStyledChars, truncateStyledChars} from './wrap-text.js';
+import {wrapStyledChars, truncateStyledChars} from './text-wrap.js';
 import squashTextNodes from './squash-text-nodes.js';
 import {type OutputTransformer} from './render-node-to-output.js';
 import type ResizeObserver from './resize-observer.js';

src/render-node-to-output.ts

@@ -1,6 +1,6 @@
 import Yoga from 'yoga-layout';
 import {type StyledChar} from '@alcalzone/ansi-tokenize';
-import {truncateStyledChars, wrapStyledChars} from './wrap-text.js';
+import {truncateStyledChars, wrapStyledChars} from './text-wrap.js';
 import getMaxWidth from './get-max-width.js';
 import squashTextNodes from './squash-text-nodes.js';
 import renderBorder from './render-border.js';

src/wrap-text.ts src/text-wrap.tssrc/wrap-text.ts renamed to src/text-wrap.ts

@@ -96,8 +96,9 @@ const wrapWord = (
 
 		if (visible + characterLength > columns && visible > 0) {
 			rows.push([]);
+
 			currentLine = rows.at(-1)!;
-			visible = 0;
+			visible = styledCharsWidth(currentLine);
 		}
 
 		currentLine.push(character);
@@ -114,12 +115,20 @@ export const wrapStyledChars = (
 	let currentWord: StyledChar[] = [];
 
 	for (const char of styledChars) {
-		if (char.value === ' ') {
+		if (char.value === '\n') {
 			if (currentWord.length > 0) {
 				words.push(currentWord);
 			}
 
 			currentWord = [];
+			words.push([char]);
+		} else if (char.value === ' ') {
+			if (currentWord.length > 0) {
+				words.push(currentWord);
+			}
+
+			currentWord = [];
+			words.push([char]);
 		} else {
 			currentWord.push(char);
 		}
@@ -129,44 +138,57 @@ export const wrapStyledChars = (
 		words.push(currentWord);
 	}
 
-	const space: StyledChar = {
-		type: 'char',
-		value: ' ',
-		fullWidth: false,
-		styles: [],
-	};
+	let isAtStartOfLogicalLine = true;
 
-	for (const [index, word] of words.entries()) {
-		const wordWidth = styledCharsWidth(word);
-		let rowWidth = styledCharsWidth(rows.at(-1)!);
+	for (const word of words) {
+		if (word.length === 0) {
+			continue;
+		}
 
-		if (index > 0) {
-			rows.at(-1)!.push(space);
-			rowWidth++;
+		if (word[0]!.value === '\n') {
+			rows.push([]);
+			isAtStartOfLogicalLine = true;
+			continue;
 		}
 
-		if (wordWidth > columns) {
-			if (index > 0) {
-				rows[rows.length - 1] = rows.at(-1)!.slice(0, -1);
+		const wordWidth = styledCharsWidth(word);
+		const rowWidth = styledCharsWidth(rows.at(-1)!);
+
+		if (rowWidth + wordWidth > columns) {
+			if (
+				!isAtStartOfLogicalLine &&
+				word[0]!.value === ' ' &&
+				word.length === 1
+			) {
+				continue;
+			}
 
-				if (rows.at(-1)!.length > 0) {
-					rows.push([]);
+			if (!isAtStartOfLogicalLine) {
+				while (rows.at(-1)!.length > 0 && rows.at(-1)!.at(-1)!.value === ' ') {
+					rows.at(-1)!.pop();
 				}
 			}
 
-			wrapWord(rows, word, columns);
-			continue;
-		}
+			if (wordWidth > columns) {
+				if (rowWidth > 0) {
+					rows.push([]);
+				}
 
-		if (rowWidth + wordWidth > columns && rowWidth > 0) {
-			if (index > 0) {
-				rows[rows.length - 1] = rows.at(-1)!.slice(0, -1);
+				wrapWord(rows, word, columns);
+			} else {
+				rows.push([]);
+				rows.at(-1)!.push(...word);
 			}
-
-			rows.push(word);
 		} else {
 			rows.at(-1)!.push(...word);
 		}
+
+		if (
+			isAtStartOfLogicalLine &&
+			!(word[0]!.value === ' ' && word.length === 1)
+		) {
+			isAtStartOfLogicalLine = false;
+		}
 	}
 
 	return rows;

test/indent-wrapping.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import test from 'ava';
+import {Box, Text} from '../src/index.js';
+import {renderToString} from './helpers/render-to-string.js';
+
+test('preserves indentation when wrapping if there is room', t => {
+	const text = 'if (\n    foobarbaz\n)';
+	const output = renderToString(
+		<Box width={7}>
+			<Text wrap="wrap">{text}</Text>
+		</Box>,
+	);
+
+	t.is(output, 'if (\n    foo\n    bar\n    baz\n)');
+});
+
+test('drops indentation when it does not fit', t => {
+	const text = 'if (\n    foobarbaz\n)';
+	const output = renderToString(
+		<Box width={4}>
+			<Text wrap="wrap">{text}</Text>
+		</Box>,
+	);
+
+	t.is(output, 'if (\n\nfoob\narba\nz\n)');
+});
+
+test('preserves just indentation', t => {
+	const output = renderToString(
+		<Box width={4}>
+			<Text> </Text>
+		</Box>,
+	);
+	t.is(output, '');
+});
+
+test('preserves just indentation no box', t => {
+	const output = renderToString(<Text> </Text>);
+	t.is(output, '');
+});