Skip to content

Commit 15cb8b9

Browse files
SimenBSimenB
authored
feat: update ink to v3 (#41)
1 parent 5ba45a4 commit 15cb8b9

File tree

10 files changed

+231
-293
lines changed

10 files changed

+231
-293
lines changed

‎package.json

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@
1111
"dist/"
1212
],
1313
"scripts": {
14-
"build": "ncc build src/index.ts --external @jest/reporters --minify --no-source-map-register",
15-
"build:watch": "ncc build src/index.ts --external @jest/reporters --watch",
14+
"ncc-build": "ncc build src/index.ts --external @jest/reporters --external react-devtools-core --external yoga-layout-prebuilt",
15+
"build": "yarn ncc-build --minify --no-source-map-register",
16+
"build:watch": "yarn ncc-build --watch",
1617
"lint": "eslint . --ignore-pattern '!.eslintrc.js'",
1718
"prepare": "yarn build",
1819
"prettylint": "prettier README.md package.json --check",
@@ -49,7 +50,8 @@
4950
"testEnvironment": "node"
5051
},
5152
"dependencies": {
52-
"@jest/reporters": "^27.0.0"
53+
"@jest/reporters": "^27.0.0",
54+
"yoga-layout-prebuilt": "^1.10.0"
5355
},
5456
"devDependencies": {
5557
"@commitlint/cli": "^16.0.0",
@@ -60,7 +62,7 @@
6062
"@semantic-release/git": "^9.0.0",
6163
"@types/jest": "^27.0.0",
6264
"@types/node": "^16.0.0",
63-
"@types/react": "^16.9.11",
65+
"@types/react": "^17.0.39",
6466
"@typescript-eslint/eslint-plugin": "^5.0.0",
6567
"@typescript-eslint/parser": "^5.0.0",
6668
"@zeit/ncc": "^0.22.1",
@@ -74,13 +76,13 @@
7476
"eslint-plugin-react": "^7.16.0",
7577
"eslint-plugin-react-hooks": "^4.0.2",
7678
"husky": "^4.2.5",
77-
"ink": "^2.5.0",
79+
"ink": "^3.2.0",
7880
"jest": "^27.0.0",
7981
"jest-util": "^27.0.0",
8082
"lint-staged": "^10.2.6",
8183
"patch-package": "^6.2.2",
8284
"prettier": "^2.0.5",
83-
"react": "^16.11.0",
85+
"react": "^17.0.2",
8486
"semantic-release": "^17.0.7",
8587
"slash": "^3.0.0",
8688
"ts-jest": "^27.0.0",

‎src/PostMessage.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { Config } from '@jest/types';
33
import type { Context } from '@jest/reporters';
44
import { testPathPatternToRegExp } from 'jest-util';
55
import * as React from 'react';
6-
import { Box, Color, Text } from 'ink';
6+
import { Box, Text } from 'ink';
77

88
const LeftPadded: React.FC = ({ children }) => (
99
<Box paddingLeft={1}>{children}</Box>
@@ -17,15 +17,15 @@ const TestInfo: React.FC<{ config: Config.GlobalConfig }> = ({ config }) => {
1717
if (config.runTestsByPath) {
1818
return (
1919
<LeftPadded>
20-
<Color dim>within paths</Color>
20+
<Text dimColor>within paths</Text>
2121
</LeftPadded>
2222
);
2323
}
2424

2525
if (config.onlyChanged) {
2626
return (
2727
<LeftPadded>
28-
<Color dim>related to changed files</Color>
28+
<Text dimColor>related to changed files</Text>
2929
</LeftPadded>
3030
);
3131
}
@@ -34,9 +34,9 @@ const TestInfo: React.FC<{ config: Config.GlobalConfig }> = ({ config }) => {
3434
return (
3535
<Box>
3636
<HorizontallyPadded>
37-
<Color dim>
37+
<Text dimColor>
3838
{config.findRelatedTests ? 'related to files matching' : 'matching'}
39-
</Color>
39+
</Text>
4040
</HorizontallyPadded>
4141
<Text>
4242
{testPathPatternToRegExp(config.testPathPattern).toString()}
@@ -57,7 +57,7 @@ const NameInfo: React.FC<{ config: Config.GlobalConfig }> = ({ config }) => {
5757
return (
5858
<>
5959
<HorizontallyPadded>
60-
<Color dim>with tests matching</Color>
60+
<Text dimColor>with tests matching</Text>
6161
</HorizontallyPadded>
6262
<Text>&quot;{config.testNamePattern}&quot;</Text>
6363
</>
@@ -74,10 +74,10 @@ const ContextInfo: React.FC<{ numberOfContexts: number }> = ({
7474
return (
7575
<>
7676
<HorizontallyPadded>
77-
<Color dim>in</Color>
77+
<Text dimColor>in</Text>
7878
</HorizontallyPadded>
7979
<Text>{numberOfContexts}</Text>
80-
<Color dim> projects</Color>
80+
<Text dimColor> projects</Text>
8181
</>
8282
);
8383
}
@@ -96,19 +96,19 @@ export const PostMessage: React.FC<{
9696

9797
if (aggregatedResults.wasInterrupted) {
9898
return (
99-
<Color bold red>
99+
<Text bold color="red">
100100
Test run was interrupted.
101-
</Color>
101+
</Text>
102102
);
103103
}
104104

105105
return (
106106
<Box>
107-
<Color dim>Ran all test suites</Color>
107+
<Text dimColor>Ran all test suites</Text>
108108
<TestInfo config={globalConfig} />
109109
<NameInfo config={globalConfig} />
110110
<ContextInfo numberOfContexts={contexts.size} />
111-
<Color dim>.</Color>
111+
<Text dimColor>.</Text>
112112
</Box>
113113
);
114114
};

‎src/Reporter.tsx

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as path from 'path';
22
import * as React from 'react';
3-
import { Box, Color, ColorProps, Static, render, useApp, useStdout } from 'ink';
3+
import { Box, Static, Text, TextProps, render, useApp, useStdout } from 'ink';
44
import slash = require('slash');
55
import type { Config } from '@jest/types';
66
import type { AggregatedResult, TestResult } from '@jest/test-result';
@@ -19,14 +19,16 @@ import { VerboseTestList } from './VerboseTests';
1919
type ConsoleBuffer = NonNullable<TestResult['console']>;
2020
type LogType = ConsoleBuffer[0]['type'];
2121

22-
const TitleBullet = () => <Color bold>&#9679;</Color>;
22+
const TitleBullet = () => <Text bold>&#9679;</Text>;
2323

24-
const ColoredConsole: React.FC<ColorProps & { type: LogType }> = ({
25-
type,
26-
...props
27-
}: {
28-
type: LogType;
29-
}) => <Color yellow={type === 'warn'} red={type === 'error'} {...props} />;
24+
const ColoredConsole: React.FC<
25+
Omit<TextProps, 'color'> & { type: LogType }
26+
> = ({ type, ...props }: { type: LogType }) => (
27+
<Text
28+
color={type === 'warn' ? 'yellow' : type === 'error' ? 'red' : undefined}
29+
{...props}
30+
/>
31+
);
3032

3133
const TestConsoleOutput = ({
3234
console,
@@ -52,11 +54,11 @@ const TestConsoleOutput = ({
5254
<Box key={index} flexDirection="column" paddingBottom={1}>
5355
<Box>
5456
{TITLE_INDENT}{' '}
55-
<ColoredConsole type={type} dim>
57+
<ColoredConsole type={type} dimColor>
5658
console.
5759
{type}
5860
</ColoredConsole>{' '}
59-
<Color dim>{origin}</Color>
61+
<Text dimColor>{origin}</Text>
6062
</Box>
6163
<ColoredConsole type={type}>{message}</ColoredConsole>
6264
</Box>
@@ -95,8 +97,8 @@ const CompletedTests: React.FC<{
9597

9698
return (
9799
<Box paddingBottom={1} flexDirection="column">
98-
<Static>
99-
{completedTests.map(({ testResult, config }) => (
100+
<Static items={completedTests}>
101+
{({ testResult, config }) => (
100102
<React.Fragment key={testResult.testFilePath + config.name}>
101103
<ResultHeader config={config} testResult={testResult} />
102104
<VerboseTestList
@@ -114,7 +116,7 @@ const CompletedTests: React.FC<{
114116
afterUpdate={didUpdate}
115117
/>
116118
</React.Fragment>
117-
))}
119+
)}
118120
</Static>
119121
</Box>
120122
);
@@ -231,7 +233,7 @@ const Reporter: React.FC<Props> = ({
231233
}, [register]);
232234

233235
const { stdout } = useStdout();
234-
const width = stdout.columns;
236+
const width = stdout?.columns ?? 80;
235237

236238
const { currentTests, completedTests, aggregatedResults, done, contexts } =
237239
state;

‎src/SnapshotStatus.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
import type { TestResult } from '@jest/test-result';
22

33
import * as React from 'react';
4-
import { Box, Color } from 'ink';
4+
import { Box, Text } from 'ink';
55

66
import { pluralize } from 'jest-util';
77
import { Arrow, Dot } from './shared';
88

9-
const FailColor: React.FC = ({ children }) => (
10-
<Color bold red>
9+
const FailText: React.FC = ({ children }) => (
10+
<Text bold color="red">
1111
{children}
12-
</Color>
12+
</Text>
1313
);
1414
const SnapshotAdded: React.FC = ({ children }) => (
15-
<Color bold green>
15+
<Text bold color="green">
1616
{children}
17-
</Color>
17+
</Text>
1818
);
1919
const SnapshotUpdated: React.FC = ({ children }) => (
20-
<Color bold green>
20+
<Text bold color="green">
2121
{children}
22-
</Color>
22+
</Text>
2323
);
2424
const SnapshotOutdated: React.FC = ({ children }) => (
25-
<Color bold yellow>
25+
<Text bold color="yellow">
2626
{children}
27-
</Color>
27+
</Text>
2828
);
2929

3030
export const SnapshotStatus: React.FC<{
@@ -43,9 +43,9 @@ export const SnapshotStatus: React.FC<{
4343
</SnapshotUpdated>
4444
)}
4545
{snapshot.unmatched > 0 && (
46-
<FailColor>
46+
<FailText>
4747
<Arrow /> {pluralize('snapshot', snapshot.unmatched)} failed.
48-
</FailColor>
48+
</FailText>
4949
)}
5050
{snapshot.unchecked > 0 ? (
5151
afterUpdate ? (

‎src/SnapshotSummary.tsx

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { Box, Color, Text } from 'ink';
2+
import { Box, Text } from 'ink';
33
import type { Config } from '@jest/types';
44
import { pluralize } from 'jest-util';
55
import type { SnapshotSummary as SnapshotSummaryType } from '@jest/test-result';
@@ -14,76 +14,76 @@ const SnapshotSummary: React.FC<{
1414
<Text bold>Snapshot Summary</Text>
1515
{snapshots.added && (
1616
<Box>
17-
<Color bold green>
17+
<Text bold color="green">
1818
<Arrow />
1919
{pluralize('snapshot', snapshots.added)} written
20-
</Color>{' '}
20+
</Text>{' '}
2121
from {pluralize('test suite', snapshots.filesAdded)}.
2222
</Box>
2323
)}
2424
{snapshots.unmatched && (
2525
<Box>
26-
<Color bold red>
26+
<Text bold color="red">
2727
<Arrow />
2828
{pluralize('snapshot', snapshots.unmatched)} failed
29-
</Color>{' '}
29+
</Text>{' '}
3030
from {pluralize('test suite', snapshots.filesUnmatched)}.{' '}
31-
<Color dim>
31+
<Text dimColor>
3232
Inspect your code changes or {updateCommand} to update them.
33-
</Color>
33+
</Text>
3434
</Box>
3535
)}
3636
{snapshots.updated && (
3737
<Box>
38-
<Color bold green>
38+
<Text bold color="green">
3939
<Arrow />
4040
{pluralize('snapshot', snapshots.updated)} updated
41-
</Color>{' '}
41+
</Text>{' '}
4242
from {pluralize('test suite', snapshots.filesUpdated)}.
4343
</Box>
4444
)}
4545
{snapshots.filesRemoved &&
4646
(snapshots.didUpdate ? (
4747
<Box>
48-
<Color bold green>
48+
<Text bold color="green">
4949
<Arrow />
5050
{pluralize('snapshot file', snapshots.filesRemoved)} removed
51-
</Color>{' '}
51+
</Text>{' '}
5252
from {pluralize('test suite', snapshots.filesRemoved)}.
5353
</Box>
5454
) : (
5555
<Box>
56-
<Color bold yellow>
56+
<Text bold color="yellow">
5757
<Arrow />
5858
{pluralize('snapshot file', snapshots.filesRemoved)} obsolete
59-
</Color>{' '}
59+
</Text>{' '}
6060
from {pluralize('test suite', snapshots.filesRemoved)}.{' '}
61-
<Color dim>
61+
<Text dimColor>
6262
To remove ${snapshots.filesRemoved === 1 ? 'it' : 'them all'},{' '}
6363
{updateCommand}.
64-
</Color>
64+
</Text>
6565
</Box>
6666
))}
6767
{snapshots.unchecked &&
6868
(snapshots.didUpdate ? (
6969
<Box>
70-
<Color bold green>
70+
<Text bold color="green">
7171
<Arrow />
7272
{pluralize('snapshot', snapshots.unchecked)} removed
73-
</Color>{' '}
73+
</Text>{' '}
7474
from {pluralize('test suite', snapshots.uncheckedKeysByFile.length)}.
7575
</Box>
7676
) : (
7777
<Box>
78-
<Color bold yellow>
78+
<Text bold color="yellow">
7979
<Arrow />
8080
{pluralize('snapshot', snapshots.unchecked)} obsolete
81-
</Color>{' '}
81+
</Text>{' '}
8282
from {pluralize('test suite', snapshots.uncheckedKeysByFile.length)}.{' '}
83-
<Color dim>
83+
<Text dimColor>
8484
To remove ${snapshots.unchecked === 1 ? 'it' : 'them all'},{' '}
8585
{updateCommand}.
86-
</Color>
86+
</Text>
8787
</Box>
8888
))}
8989
{snapshots.unchecked &&

0 commit comments

Comments
 (0)