Skip to content

Commit e56eee7

Browse files
benmvpbenmvp
authored
feat: Add support for React (#65)
Adds support for testing and building React files (`.tsx` extension). The main work was in: - Adding support for `.tsx` (and `.jsx`) extension for building/testing - Adding `@babel/preset-react` - Adding enzyme support for spec tests - Upgrading to `eslint-config-react` for linting - Updating the `tsconfig.json` for typing - Streaming output of `integrate` command - Adding integration test to verify React support - Adding docs to reflect support for React
1 parent af1ea2e commit e56eee7

34 files changed

+1142
-136
lines changed

‎.gitignore

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,3 @@ typings/
6262

6363
# built directory
6464
lib/
65-
66-
# editor stuffs
67-
.vscode/

‎.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v10.16.2

‎.vscode/settings.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"jest.enableInlineErrorMessages": false,
3+
"jest.enableSnapshotPreviews": false,
4+
"jest.enableSnapshotUpdateMessages": false,
5+
"jest.autoEnable": false,
6+
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
7+
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false
8+
}

‎bin/benmvp

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
const {code, message, error} = await run(args);
88

99
if (code) {
10-
// console.error(error);
1110
console.error(message);
11+
// console.error(error);
1212
}
1313

1414
process.exit(code)

‎docs/api/integrate.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,8 @@ The optional `TestOptions` object supports the following properties:
8989
An `Array` of the types or modes of tests to run. Available modes:
9090

9191
- `'spec'` - Runs Jest-based tests (files ending in `.spec.ts` or in `__tests__` folder)
92-
- `'type'` - Runs Typescript type-checking (files ending in `.ts`)
93-
- `'lint'` - Runs ESLint (files ending in `.ts`)
92+
- `'type'` - Runs Typescript type-checking (files ending in `.ts` or `.tsx`)
93+
- `'lint'` - Runs ESLint (files ending in `.ts` or `.tsx`)
9494

9595
Optional. Defaults to all modes when unspecified.
9696

‎docs/api/start.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,8 @@ The optional `Options` object supports the following properties:
7777

7878
An `Array` of the types or modes of tests to run. Available modes:
7979

80-
- `'type'` - Runs Typescript type-checking (files ending in `.ts`)
81-
- `'lint'` - Runs ESLint (files ending in `.ts`)
80+
- `'type'` - Runs Typescript type-checking (files ending in `.ts` or `.tsx`)
81+
- `'lint'` - Runs ESLint (files ending in`.ts` or `.tsx`)
8282
- `'spec'` - Runs Jest-based unit tests (files ending in `.spec.ts`)
8383

8484
Optional. Defaults to all modes when unspecified.

‎docs/api/test.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,8 @@ The optional `TestOptions` object supports the following properties:
8181

8282
An `Array` of the types or modes of tests to run. Available modes:
8383

84-
- `'type'` - Runs Typescript type-checking (files ending in `.ts`)
85-
- `'lint'` - Runs ESLint (files ending in `.ts`)
84+
- `'type'` - Runs Typescript type-checking (files ending in `.ts` or `.tsx`)
85+
- `'lint'` - Runs ESLint (files ending in `.ts` or `.tsx`)
8686
- `'spec'` - Runs Jest-based unit tests (files ending in `.spec.ts`)
8787

8888
Optional. Defaults to all modes when unspecified.

‎docs/cli/integrate.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ benmvp integrate --modes lint --pattern api/
5454
A space-separated list of the types or modes of tests to run. Aliased as `-m`. Available modes:
5555

5656
- `spec` - Runs Jest-based tests (files ending in `.spec.ts` or in `__tests__` folder)
57-
- `lint` - Runs ESLint (files ending in `.ts`)
58-
- `type` - Runs Typescript type-checking (files ending in `.ts`)
57+
- `lint` - Runs ESLint (files ending in `.ts` or `.tsx`)
58+
- `type` - Runs Typescript type-checking (files ending in `.ts` or `.tsx`)
5959

6060
Optional. Defaults to all modes.
6161

‎docs/cli/start.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ benmvp start --modes lint --pattern api/
4444

4545
A space-separated list of the types or modes of tests to run. Aliased as `-m`. Available modes:
4646

47-
- `lint` - Runs ESLint (files ending in `.ts`)
48-
- `type` - Runs Typescript type-checking (files ending in `.ts`)
47+
- `lint` - Runs ESLint (files ending in `.ts` or `.tsx`)
48+
- `type` - Runs Typescript type-checking (files ending in `.ts` or `.tsx`)
4949
- `spec` - Runs Jest-based unit tests (files ending in `.spec.ts`)
5050

5151
Optional. Defaults to all modes.

‎docs/cli/test.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ benmvp test --modes lint --pattern api/ --watch
4444

4545
A space-separated list of the types or modes of tests to run. Aliased as `-m`. Available modes:
4646

47-
- `lint` - Runs ESLint (files ending in `.ts`)
48-
- `type` - Runs Typescript type-checking (files ending in `.ts`)
47+
- `lint` - Runs ESLint (files ending in `.ts` or `.tsx`)
48+
- `type` - Runs Typescript type-checking (files ending in `.ts` or `.tsx`)
4949
- `spec` - Runs Jest-based unit tests (files ending in `.spec.ts` or in `__tests__` folder)
5050

5151
Optional. Defaults to all modes.

‎integration-tests/package-lock.json

Lines changed: 112 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎integration-tests/package.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
"private": true,
33
"devDependencies": {
44
"@types/fs-extra": "^7.0.0",
5-
"fs-extra": "^8.0.1",
6-
"rimraf": "^2.6.3"
5+
"@types/react": "^16.9.2",
6+
"@types/react-dom": "^16.8.5",
7+
"fs-extra": "^8.1.0",
8+
"react": "^16.9.0",
9+
"react-dom": "^16.9.0",
10+
"rimraf": "^3.0.0"
711
}
812
}

‎integration-tests/src/__tests__/build.spec.ts

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,28 @@ describe('when no arguments are passed', () => {
1717
await execAsync('npx rimraf lib')
1818
})
1919

20-
it('transpiles .ts files', async () => {
20+
it('transpiles .ts(x) files', async () => {
2121
expect(await pathExists(resolve(CWD, 'lib/cjs/index.js'))).toBe(true)
2222
expect(await pathExists(resolve(CWD, 'lib/cjs/objects/animal.js'))).toBe(true)
2323
expect(await pathExists(resolve(CWD, 'lib/cjs/objects/horse.js'))).toBe(true)
2424
expect(await pathExists(resolve(CWD, 'lib/cjs/objects/snake.js'))).toBe(true)
25+
expect(await pathExists(resolve(CWD, 'lib/cjs/react/Counter.js'))).toBe(true)
26+
expect(await pathExists(resolve(CWD, 'lib/cjs/react/Button.js'))).toBe(true)
27+
2528
expect(await pathExists(resolve(CWD, 'lib/esm/index.js'))).toBe(true)
2629
expect(await pathExists(resolve(CWD, 'lib/esm/objects/animal.js'))).toBe(true)
2730
expect(await pathExists(resolve(CWD, 'lib/esm/objects/horse.js'))).toBe(true)
2831
expect(await pathExists(resolve(CWD, 'lib/esm/objects/snake.js'))).toBe(true)
32+
expect(await pathExists(resolve(CWD, 'lib/esm/react/Counter.js'))).toBe(true)
33+
expect(await pathExists(resolve(CWD, 'lib/esm/react/Button.js'))).toBe(true)
2934
})
3035
it('generates typescript definitions', async () => {
3136
expect(await pathExists(resolve(CWD, 'lib/types/index.d.ts'))).toBe(true)
3237
expect(await pathExists(resolve(CWD, 'lib/types/objects/animal.d.ts'))).toBe(true)
3338
expect(await pathExists(resolve(CWD, 'lib/types/objects/horse.d.ts'))).toBe(true)
3439
expect(await pathExists(resolve(CWD, 'lib/types/objects/snake.d.ts'))).toBe(true)
40+
expect(await pathExists(resolve(CWD, 'lib/types/react/Counter.d.ts'))).toBe(true)
41+
expect(await pathExists(resolve(CWD, 'lib/types/react/Button.d.ts'))).toBe(true)
3542
})
3643
it('copies .js files', async () => {
3744
expect(await pathExists(resolve(CWD, 'lib/cjs/config.js'))).toBe(true)
@@ -77,16 +84,23 @@ describe('when format & output directory are specified', () => {
7784
expect(await pathExists(resolve(CWD, 'built/esm/objects/animal.js'))).toBe(true)
7885
expect(await pathExists(resolve(CWD, 'built/esm/objects/horse.js'))).toBe(true)
7986
expect(await pathExists(resolve(CWD, 'built/esm/objects/snake.js'))).toBe(true)
87+
expect(await pathExists(resolve(CWD, 'built/esm/react/Counter.js'))).toBe(true)
88+
expect(await pathExists(resolve(CWD, 'built/esm/react/Button.js'))).toBe(true)
89+
8090
expect(await pathExists(resolve(CWD, 'built/types/index.d.ts'))).toBe(true)
8191
expect(await pathExists(resolve(CWD, 'built/types/objects/animal.d.ts'))).toBe(true)
8292
expect(await pathExists(resolve(CWD, 'built/types/objects/snake.d.ts'))).toBe(true)
8393
expect(await pathExists(resolve(CWD, 'built/types/objects/horse.d.ts'))).toBe(true)
94+
expect(await pathExists(resolve(CWD, 'built/types/react/Counter.d.ts'))).toBe(true)
95+
expect(await pathExists(resolve(CWD, 'built/types/react/Button.d.ts'))).toBe(true)
8496
})
8597
it('does not create CJS files', async () => {
8698
expect(await pathExists(resolve(CWD, 'built/cjs/index.js'))).toBe(false)
8799
expect(await pathExists(resolve(CWD, 'built/cjs/objects/animal.js'))).toBe(false)
88100
expect(await pathExists(resolve(CWD, 'built/cjs/objects/snake.js'))).toBe(false)
89101
expect(await pathExists(resolve(CWD, 'built/cjs/objects/horse.js'))).toBe(false)
102+
expect(await pathExists(resolve(CWD, 'built/cjs/react/Counter.js'))).toBe(false)
103+
expect(await pathExists(resolve(CWD, 'built/cjs/react/Button.js'))).toBe(false)
90104
})
91105
it('does not put files in default location', async () => {
92106
expect(await pathExists(resolve(CWD, 'lib/esm/index.js'))).toBe(false)

‎integration-tests/src/index.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import {resolve} from 'path'
22
import {readFileSync} from 'fs-extra'
3+
import React from 'react'
4+
import {renderToStaticMarkup} from 'react-dom/server'
35

46
import Animal from './objects/animal'
57
import Snake from './objects/snake'
68
import Horse from './objects/horse'
9+
import Counter from './react/Counter'
710

811

912
const PACKAGE_JSON = readFileSync(resolve(__dirname, '../package.json'))
@@ -17,4 +20,7 @@ export const run = (): void => {
1720

1821
// eslint-disable-next-line no-console
1922
console.log(PACKAGE_JSON)
23+
24+
// eslint-disable-next-line no-console
25+
console.log(renderToStaticMarkup(React.createElement(Counter)))
2026
}

‎integration-tests/src/react/Button.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, {FunctionComponent, ReactNode} from 'react'
2+
3+
4+
interface Props {
5+
children: ReactNode;
6+
onClick?: () => void;
7+
}
8+
9+
const Button: FunctionComponent<Props> = ({
10+
onClick,
11+
children,
12+
}) => (
13+
<button type="button" onClick={() => onClick && onClick()}>
14+
{children}
15+
</button>
16+
)
17+
18+
export default Button

0 commit comments

Comments
 (0)