Skip to content

Commit 40ac89a

Browse files
Methuselah96Methuselah96
authored
feature(react-json-tree): convert react-json-tree to TypeScript (#601)
* eslint base * stash * setup * stash * stash * Add jest.config.js * caught
1 parent ac6f743 commit 40ac89a

37 files changed

+634
-352
lines changed

‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
*.js text eol=lf
22
*.jsx text eol=lf
3+
*.ts text eol=lf
4+
*.tsx text eol=lf
35
*.json text eol=lf
46
*.css text eol=lf
57
*.html text eol=lf

‎eslintrc.ts.base.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,11 @@
88
"plugin:@typescript-eslint/recommended-requiring-type-checking",
99
"plugin:prettier/recommended",
1010
"prettier/@typescript-eslint"
11-
]
11+
],
12+
"rules": {
13+
"@typescript-eslint/no-unsafe-return": "off",
14+
"@typescript-eslint/no-unsafe-assignment": "off",
15+
"@typescript-eslint/no-unsafe-call": "off",
16+
"@typescript-eslint/no-unsafe-member-access": "off"
17+
}
1218
}

‎eslintrc.ts.jest.base.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,11 @@
99
"plugin:jest/style",
1010
"plugin:prettier/recommended",
1111
"prettier/@typescript-eslint"
12-
]
12+
],
13+
"rules": {
14+
"@typescript-eslint/no-unsafe-return": "off",
15+
"@typescript-eslint/no-unsafe-assignment": "off",
16+
"@typescript-eslint/no-unsafe-call": "off",
17+
"@typescript-eslint/no-unsafe-member-access": "off"
18+
}
1319
}

‎eslintrc.ts.react.base.json

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"parser": "@typescript-eslint/parser",
3+
"parserOptions": {
4+
"ecmaFeatures": {
5+
"jsx": true
6+
}
7+
},
8+
"plugins": ["@typescript-eslint", "react"],
9+
"extends": [
10+
"eslint:recommended",
11+
"plugin:@typescript-eslint/eslint-recommended",
12+
"plugin:@typescript-eslint/recommended",
13+
"plugin:@typescript-eslint/recommended-requiring-type-checking",
14+
"plugin:react/recommended",
15+
"plugin:prettier/recommended",
16+
"prettier/@typescript-eslint",
17+
"prettier/react"
18+
],
19+
"settings": {
20+
"react": {
21+
"version": "detect"
22+
}
23+
},
24+
"rules": {
25+
"@typescript-eslint/no-unsafe-return": "off",
26+
"@typescript-eslint/no-unsafe-assignment": "off",
27+
"@typescript-eslint/no-unsafe-call": "off",
28+
"@typescript-eslint/no-unsafe-member-access": "off"
29+
}
30+
}

‎eslintrc.ts.react.jest.base.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"plugins": ["jest"],
3+
"extends": [
4+
"eslint:recommended",
5+
"plugin:@typescript-eslint/eslint-recommended",
6+
"plugin:@typescript-eslint/recommended",
7+
"plugin:@typescript-eslint/recommended-requiring-type-checking",
8+
"plugin:react/recommended",
9+
"plugin:jest/recommended",
10+
"plugin:jest/style",
11+
"plugin:prettier/recommended",
12+
"prettier/@typescript-eslint",
13+
"prettier/react"
14+
],
15+
"rules": {
16+
"@typescript-eslint/no-unsafe-return": "off",
17+
"@typescript-eslint/no-unsafe-assignment": "off",
18+
"@typescript-eslint/no-unsafe-call": "off",
19+
"@typescript-eslint/no-unsafe-member-access": "off"
20+
}
21+
}

‎package.json

+11-3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
"@babel/preset-env": "^7.11.0",
88
"@babel/preset-typescript": "^7.10.4",
99
"@types/jest": "^26.0.9",
10+
"@types/node": "^14.6.0",
11+
"@types/react-test-renderer": "^16.9.3",
12+
"@types/webpack": "^4.41.21",
13+
"@types/webpack-dev-server": "^3.11.0",
1014
"@typescript-eslint/eslint-plugin": "^3.9.0",
1115
"@typescript-eslint/parser": "^3.9.0",
1216
"babel-eslint": "^10.1.0",
@@ -16,14 +20,18 @@
1620
"eslint-plugin-jest": "^23.20.0",
1721
"eslint-plugin-prettier": "^3.1.4",
1822
"eslint-plugin-react": "^7.20.5",
19-
"husky": "^4.2.5",
2023
"jest": "^26.2.2",
2124
"lerna": "^3.22.1",
22-
"lint-staged": "^10.2.11",
2325
"prettier": "^2.0.5",
26+
"react": "^16.13.1",
27+
"react-dom": "^16.13.1",
28+
"react-test-renderer": "^16.13.1",
2429
"rimraf": "^3.0.2",
2530
"ts-jest": "^26.2.0",
26-
"typescript": "^3.9.7"
31+
"ts-node": "^9.0.0",
32+
"typescript": "^3.9.7",
33+
"webpack": "^4.44.1",
34+
"webpack-cli": "^3.3.12"
2735
},
2836
"scripts": {
2937
"lerna": "lerna",

‎packages/react-base16-styling/src/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -288,3 +288,6 @@ export const invertTheme = (theme: Theme | undefined): Theme | undefined => {
288288

289289
return theme;
290290
};
291+
292+
export { Base16Theme };
293+
export * from './types';

‎packages/react-json-tree/.babelrc

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
{
2-
"presets": ["@babel/preset-env", "@babel/preset-react"],
2+
"presets": [
3+
"@babel/preset-env",
4+
"@babel/preset-react",
5+
"@babel/preset-typescript"
6+
],
37
"plugins": ["@babel/plugin-proposal-class-properties"]
48
}

‎packages/react-json-tree/.eslintignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
lib
2+
umd

‎packages/react-json-tree/.eslintrc.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
module.exports = {
2+
extends: '../../.eslintrc',
3+
overrides: [
4+
{
5+
files: ['*.ts', '*.tsx'],
6+
extends: '../../eslintrc.ts.react.base.json',
7+
parserOptions: {
8+
tsconfigRootDir: __dirname,
9+
project: ['./tsconfig.json'],
10+
},
11+
},
12+
{
13+
files: ['test/*.ts', 'test/*.tsx'],
14+
extends: '../../eslintrc.ts.react.jest.base.json',
15+
parserOptions: {
16+
tsconfigRootDir: __dirname,
17+
project: ['./test/tsconfig.json'],
18+
},
19+
},
20+
{
21+
files: ['webpack.config.umd.ts'],
22+
extends: '../../eslintrc.ts.base.json',
23+
parserOptions: {
24+
tsconfigRootDir: __dirname,
25+
project: ['./tsconfig.webpack.json'],
26+
},
27+
},
28+
],
29+
};

‎packages/react-json-tree/.prettierignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
lib
2+
umd

‎packages/react-json-tree/jest.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
preset: 'ts-jest',
3+
};

‎packages/react-json-tree/package.json

+33-42
Original file line numberDiff line numberDiff line change
@@ -2,63 +2,54 @@
22
"name": "react-json-tree",
33
"version": "0.12.1",
44
"description": "React JSON Viewer Component, Extracted from redux-devtools",
5-
"main": "lib/index.js",
6-
"scripts": {
7-
"clean": "rimraf lib",
8-
"build": "babel src --out-dir lib",
9-
"build:umd": "rimraf ./umd && webpack --progress --config webpack.config.umd.js",
10-
"build:umd:min": "webpack --env.production --progress --config webpack.config.umd.js",
11-
"test": "jest",
12-
"prepare": "npm run build",
13-
"prepublishOnly": "npm run test && npm run clean && npm run build && npm run build:umd && npm run build:umd:min",
14-
"start": "cd examples && npm start"
15-
},
16-
"files": [
17-
"lib",
18-
"src",
19-
"umd"
20-
],
21-
"repository": {
22-
"type": "git",
23-
"url": "https://github.com/reduxjs/redux-devtools.git"
24-
},
255
"keywords": [
266
"react",
277
"json viewer"
288
],
9+
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/react-json-tree",
10+
"bugs": {
11+
"url": "https://github.com/reduxjs/redux-devtools/issues"
12+
},
13+
"license": "MIT",
2914
"author": "Shu Uesugi <[email protected]> (http://github.com/chibicode)",
3015
"contributors": [
3116
"Alexander Kuznetsov <[email protected]> (http://kuzya.org/)",
3217
"Dave Vedder <[email protected]> (http://www.eskimospy.com/)",
3318
"Daniele Zannotti <[email protected]> (http://www.github.com/dzannotti)",
3419
"Mihail Diordiev <[email protected]> (https://github.com/zalmoxisus)"
3520
],
36-
"license": "MIT",
37-
"bugs": {
38-
"url": "https://github.com/reduxjs/redux-devtools/issues"
39-
},
40-
"homepage": "https://github.com/reduxjs/redux-devtools",
41-
"devDependencies": {
42-
"@babel/cli": "^7.10.5",
43-
"@babel/core": "^7.11.1",
44-
"@babel/plugin-proposal-class-properties": "^7.10.4",
45-
"@babel/preset-env": "^7.11.0",
46-
"@babel/preset-react": "^7.10.4",
47-
"babel-loader": "^8.1.0",
48-
"jest": "^26.2.2",
49-
"react": "^16.13.1",
50-
"react-dom": "^16.13.1",
51-
"react-test-renderer": "^16.13.1",
52-
"rimraf": "^3.0.2",
53-
"webpack": "^4.44.1",
54-
"webpack-cli": "^3.3.12"
21+
"files": [
22+
"lib",
23+
"src",
24+
"umd"
25+
],
26+
"main": "lib/index.js",
27+
"types": "lib/index.d.ts",
28+
"repository": {
29+
"type": "git",
30+
"url": "https://github.com/reduxjs/redux-devtools.git"
5531
},
56-
"peerDependencies": {
57-
"react": "^16.3.0",
58-
"react-dom": "^16.3.0"
32+
"scripts": {
33+
"start": "cd examples && npm start",
34+
"build": "npm run build:types && npm run build:js && npm run build:umd && npm run build:umd:min",
35+
"build:types": "tsc --emitDeclarationOnly",
36+
"build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
37+
"build:umd": "rimraf ./umd && webpack --progress --config webpack.config.umd.ts",
38+
"build:umd:min": "webpack --env.production --progress --config webpack.config.umd.ts",
39+
"clean": "rimraf lib umd",
40+
"test": "jest",
41+
"lint": "eslint . --ext .ts,.tsx",
42+
"lint:fix": "eslint . --ext .ts,.tsx --fix",
43+
"type-check": "tsc --noEmit",
44+
"type-check:watch": "npm run type-check -- --watch",
45+
"preversion": "npm run type-check && npm run lint && npm run test",
46+
"prepublishOnly": "npm run clean && npm run build"
5947
},
6048
"dependencies": {
6149
"prop-types": "^15.7.2",
6250
"react-base16-styling": "^0.7.0"
51+
},
52+
"peerDependencies": {
53+
"react": "^16.3.0"
6354
}
6455
}

‎packages/react-json-tree/src/ItemRange.js ‎packages/react-json-tree/src/ItemRange.tsx

+17-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import JSONArrow from './JSONArrow';
4+
import { CircularPropsPassedThroughItemRange } from './types';
45

5-
export default class ItemRange extends React.Component {
6+
interface Props extends CircularPropsPassedThroughItemRange {
7+
data: any;
8+
nodeType: string;
9+
from: number;
10+
to: number;
11+
renderChildNodes: (props: Props, from: number, to: number) => React.ReactNode;
12+
}
13+
14+
interface State {
15+
expanded: boolean;
16+
}
17+
18+
export default class ItemRange extends React.Component<Props, State> {
619
static propTypes = {
720
styling: PropTypes.func.isRequired,
821
from: PropTypes.number.isRequired,
@@ -11,11 +24,9 @@ export default class ItemRange extends React.Component {
1124
nodeType: PropTypes.string.isRequired,
1225
};
1326

14-
constructor(props) {
27+
constructor(props: Props) {
1528
super(props);
1629
this.state = { expanded: false };
17-
18-
this.handleClick = this.handleClick.bind(this);
1930
}
2031

2132
render() {
@@ -42,7 +53,7 @@ export default class ItemRange extends React.Component {
4253
);
4354
}
4455

45-
handleClick() {
56+
handleClick = () => {
4657
this.setState({ expanded: !this.state.expanded });
47-
}
58+
};
4859
}

‎packages/react-json-tree/src/JSONArrayNode.js ‎packages/react-json-tree/src/JSONArrayNode.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import JSONNestedNode from './JSONNestedNode';
4+
import { CircularPropsPassedThroughJSONNode } from './types';
45

56
// Returns the "n Items" string for this node,
67
// generating and caching it if it hasn't been created yet.
7-
function createItemString(data) {
8-
return `${data.length} ${data.length !== 1 ? 'items' : 'item'}`;
8+
function createItemString(data: any) {
9+
return `${(data as unknown[]).length} ${
10+
(data as unknown[]).length !== 1 ? 'items' : 'item'
11+
}`;
12+
}
13+
14+
interface Props extends CircularPropsPassedThroughJSONNode {
15+
data: any;
16+
nodeType: string;
917
}
1018

1119
// Configures <JSONNestedNode> to render an Array
12-
const JSONArrayNode = ({ data, ...props }) => (
20+
const JSONArrayNode: React.FunctionComponent<Props> = ({ data, ...props }) => (
1321
<JSONNestedNode
1422
{...props}
1523
data={data}

‎packages/react-json-tree/src/JSONArrow.js ‎packages/react-json-tree/src/JSONArrow.tsx

+16-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,22 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3+
import { StylingFunction } from 'react-base16-styling';
34

4-
const JSONArrow = ({ styling, arrowStyle, expanded, nodeType, onClick }) => (
5+
interface Props {
6+
styling: StylingFunction;
7+
arrowStyle?: 'single' | 'double';
8+
expanded: boolean;
9+
nodeType: string;
10+
onClick: React.MouseEventHandler<HTMLDivElement>;
11+
}
12+
13+
const JSONArrow: React.FunctionComponent<Props> = ({
14+
styling,
15+
arrowStyle,
16+
expanded,
17+
nodeType,
18+
onClick,
19+
}) => (
520
<div {...styling('arrowContainer', arrowStyle)} onClick={onClick}>
621
<div {...styling(['arrow', 'arrowSign'], nodeType, expanded, arrowStyle)}>
722
{'\u25B6'}

0 commit comments

Comments
 (0)