@tapjs/reporter
Version:
Pretty test output reporters for tap
65 lines • 2.63 kB
JavaScript
// turn a diff string into pretty colors
import { Box, Text } from 'ink';
import React from 'react';
import stringLength from 'string-length';
// Color scheme to work with protanopia, deuteranopia, and tritanopia,
// since diffs use color as a meaningful indicator.
// should this be configurable?
const theme = {
green: {
bg: '#3A7500',
fg: '#F2FFE5',
},
red: {
bg: '#AC3EA3',
fg: '#FFE5F1',
},
ctx: {
bg: '#222',
fg: '#759EEF',
extra: '#E599FF',
},
white: {
fg: '#ccc',
bg: '#333',
},
};
const columns = process.stdout.columns || 80;
const Line = ({ line }) => line.charAt(0) === '+' ? React.createElement(Green, { line: line })
: line.charAt(0) === '-' ? React.createElement(Red, { line: line })
: line.charAt(0) === '@' ? React.createElement(Ctx, { line: line })
: React.createElement(White, { line: line });
const White = ({ line }) => (React.createElement(Text, { backgroundColor: theme.white.bg, color: theme.white.fg }, line));
const Ctx = ({ line }) => {
const f = line.match(/^(\@\@.*?\@\@)( .*)$/);
return f ?
React.createElement(Box, null,
React.createElement(Text, { bold: true, backgroundColor: theme.ctx.bg, color: theme.ctx.fg }, f[1]),
React.createElement(Text, { bold: true, backgroundColor: theme.ctx.bg, color: theme.ctx.extra }, f[2]))
: React.createElement(Text, { bold: true, backgroundColor: theme.ctx.bg, color: theme.ctx.fg }, line);
};
const Green = ({ line }) => (React.createElement(Text, { color: theme.green.fg, backgroundColor: theme.green.bg }, line));
const Red = ({ line }) => (React.createElement(Text, { color: theme.red.fg, backgroundColor: theme.red.bg }, line));
export const Diff = ({ diff = '' }) => {
const sd = diff.trimEnd();
if (!sd)
return React.createElement(React.Fragment, null);
let width = 0;
const maxLen = Math.max(columns - 5, 0);
const lines = sd
.replace(/\x1b/g, '\\' + 'x1b')
.split('\n')
.filter(line => {
if (line.length > width) {
width = Math.min(maxLen, line.length);
}
return (line !== '\\ No newline at end of file' && !/^\=+$/.test(line));
});
return (React.createElement(Box, { flexDirection: "column" }, lines
.map(line => stringLength(line) <= width ?
line + ' '.repeat(width - stringLength(line))
: line)
.map((line, key) => (React.createElement(Box, { key: key },
React.createElement(Line, { line: line }))))));
};
//# sourceMappingURL=diff.js.map