diff --git a/package.json b/package.json
index 220c0dda..8ebdde44 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
"@babel/preset-typescript": "^7.10.4",
"@types/jest": "^26.0.9",
"@types/node": "^14.6.0",
+ "@types/react": "^16.9.46",
+ "@types/react-dom": "^16.9.8",
"@types/react-test-renderer": "^16.9.3",
"@types/webpack": "^4.41.21",
"@types/webpack-dev-server": "^3.11.0",
diff --git a/packages/react-json-tree/.eslintignore b/packages/react-json-tree/.eslintignore
index 79681bfb..ed3bf25e 100644
--- a/packages/react-json-tree/.eslintignore
+++ b/packages/react-json-tree/.eslintignore
@@ -1,2 +1,3 @@
+examples
lib
umd
diff --git a/packages/react-json-tree/examples/.babelrc b/packages/react-json-tree/examples/.babelrc
index e60d3036..0d42ef44 100644
--- a/packages/react-json-tree/examples/.babelrc
+++ b/packages/react-json-tree/examples/.babelrc
@@ -1,4 +1,8 @@
{
- "presets": ["@babel/preset-env", "@babel/preset-react"],
+ "presets": [
+ "@babel/preset-env",
+ "@babel/preset-react",
+ "@babel/preset-typescript"
+ ],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
diff --git a/packages/react-json-tree/examples/.eslintrc.js b/packages/react-json-tree/examples/.eslintrc.js
new file mode 100644
index 00000000..b6ad52e0
--- /dev/null
+++ b/packages/react-json-tree/examples/.eslintrc.js
@@ -0,0 +1,21 @@
+module.exports = {
+ extends: '../../../.eslintrc',
+ overrides: [
+ {
+ files: ['*.ts', '*.tsx'],
+ extends: '../../../eslintrc.ts.react.base.json',
+ parserOptions: {
+ tsconfigRootDir: __dirname,
+ project: ['./tsconfig.json'],
+ },
+ },
+ {
+ files: ['webpack.config.ts'],
+ extends: '../../../eslintrc.ts.base.json',
+ parserOptions: {
+ tsconfigRootDir: __dirname,
+ project: ['./tsconfig.webpack.json'],
+ },
+ },
+ ],
+};
diff --git a/packages/react-json-tree/examples/package.json b/packages/react-json-tree/examples/package.json
index 6279c6f9..a57da8d1 100644
--- a/packages/react-json-tree/examples/package.json
+++ b/packages/react-json-tree/examples/package.json
@@ -2,45 +2,25 @@
"name": "react-json-tree-example",
"version": "1.0.1",
"description": "React-Json-Tree example",
- "private": true,
+ "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/react-json-tree/examples",
+ "bugs": {
+ "url": "https://github.com/reduxjs/redux-devtools/issues"
+ },
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/reduxjs/redux-devtools.git"
+ },
"scripts": {
"start": "webpack-dev-server --open",
"stats": "NODE_ENV=production webpack --json > dist/stats.json"
},
- "repository": {
- "type": "git",
- "url": "https://github.com/gaearon/react-hot-boilerplate.git"
- },
- "keywords": [
- "react",
- "reactjs",
- "boilerplate",
- "hot",
- "reload",
- "hmr",
- "live",
- "edit",
- "webpack"
- ],
- "license": "MIT",
- "bugs": {
- "url": "https://github.com/gaearon/react-hot-boilerplate/issues"
- },
- "homepage": "https://github.com/gaearon/react-hot-boilerplate",
- "devDependencies": {
- "@babel/core": "^7.11.1",
- "@babel/plugin-proposal-class-properties": "^7.10.4",
- "@babel/preset-env": "^7.11.0",
- "@babel/preset-react": "^7.10.4",
- "babel-loader": "^8.1.0",
- "webpack": "^4.44.1",
- "webpack-dev-server": "^3.11.0"
- },
"dependencies": {
"immutable": "^4.0.0-rc.12",
"react": "^16.13.1",
"react-base16-styling": "^0.7.0",
"react-dom": "^16.13.1",
"react-json-tree": "^0.12.1"
- }
+ },
+ "private": true
}
diff --git a/packages/react-json-tree/examples/src/App.js b/packages/react-json-tree/examples/src/App.tsx
old mode 100755
new mode 100644
similarity index 88%
rename from packages/react-json-tree/examples/src/App.js
rename to packages/react-json-tree/examples/src/App.tsx
index be3e19e1..e79e4d01
--- a/packages/react-json-tree/examples/src/App.js
+++ b/packages/react-json-tree/examples/src/App.tsx
@@ -1,15 +1,15 @@
import React from 'react';
import { Map } from 'immutable';
-import JSONTree from 'react-json-tree';
+import JSONTree, { StylingValue } from 'react-json-tree';
-const getLabelStyle = ({ style }, nodeType, expanded) => ({
+const getLabelStyle: StylingValue = ({ style }, nodeType, expanded) => ({
style: {
...style,
textTransform: expanded ? 'uppercase' : style.textTransform,
},
});
-const getBoolStyle = ({ style }, nodeType) => ({
+const getBoolStyle: StylingValue = ({ style }, nodeType) => ({
style: {
...style,
border: nodeType === 'Boolean' ? '1px solid #DD3333' : style.border,
@@ -17,14 +17,14 @@ const getBoolStyle = ({ style }, nodeType) => ({
},
});
-const getItemString = (type) => (
+const getItemString = (type: string) => (
{' // '}
{type}
);
-const getValueLabelStyle = ({ style }, nodeType, keyPath) => ({
+const getValueLabelStyle: StylingValue = ({ style }, nodeType, keyPath) => ({
style: {
...style,
color:
@@ -37,10 +37,17 @@ const getValueLabelStyle = ({ style }, nodeType, keyPath) => ({
const longString =
'Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.'; // eslint-disable-line max-len
-const Custom = function (value) {
- this.value = value;
-};
-Custom.prototype[Symbol.toStringTag] = 'Custom';
+class Custom {
+ value: unknown;
+
+ constructor(value: unknown) {
+ this.value = value;
+ }
+
+ get [Symbol.toStringTag]() {
+ return 'Custom';
+ }
+}
const data = {
array: [1, 2, 3],
@@ -64,16 +71,18 @@ const data = {
},
},
baz: undefined,
- func: function User() {},
+ func: function User() {
+ // noop
+ },
},
emptyObject: {},
symbol: Symbol('value'),
// eslint-disable-next-line new-cap
- immutable: Map([
+ immutable: Map([
['key', 'value'],
[{ objectKey: 'value' }, { objectKey: 'value' }],
]),
- map: new window.Map([
+ map: new window.Map([
['key', 'value'],
[0, 'value'],
[{ objectKey: 'value' }, { objectKey: 'value' }],
diff --git a/packages/react-json-tree/examples/src/index.js b/packages/react-json-tree/examples/src/index.tsx
old mode 100755
new mode 100644
similarity index 100%
rename from packages/react-json-tree/examples/src/index.js
rename to packages/react-json-tree/examples/src/index.tsx
diff --git a/packages/react-json-tree/examples/tsconfig.json b/packages/react-json-tree/examples/tsconfig.json
new file mode 100644
index 00000000..47fb1215
--- /dev/null
+++ b/packages/react-json-tree/examples/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "extends": "../../../tsconfig.react.base.json",
+ "compilerOptions": {
+ "outDir": "lib"
+ },
+ "include": ["src"]
+}
diff --git a/packages/react-json-tree/examples/tsconfig.webpack.json b/packages/react-json-tree/examples/tsconfig.webpack.json
new file mode 100644
index 00000000..95fbb8a6
--- /dev/null
+++ b/packages/react-json-tree/examples/tsconfig.webpack.json
@@ -0,0 +1,4 @@
+{
+ "extends": "../../../tsconfig.base.json",
+ "include": ["webpack.config.ts"]
+}
diff --git a/packages/react-json-tree/examples/webpack.config.js b/packages/react-json-tree/examples/webpack.config.ts
old mode 100755
new mode 100644
similarity index 70%
rename from packages/react-json-tree/examples/webpack.config.js
rename to packages/react-json-tree/examples/webpack.config.ts
index 9633b3d2..d9ba450e
--- a/packages/react-json-tree/examples/webpack.config.js
+++ b/packages/react-json-tree/examples/webpack.config.ts
@@ -1,11 +1,10 @@
-var path = require('path');
-var webpack = require('webpack');
+import * as path from 'path';
+import * as webpack from 'webpack';
-var isProduction = process.env.NODE_ENV === 'production';
+const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
mode: isProduction ? 'production' : 'development',
- devtool: 'eval-source-map',
entry: [
!isProduction && 'webpack-dev-server/client?http://localhost:3000',
!isProduction && 'webpack/hot/only-dev-server',
@@ -16,19 +15,23 @@ module.exports = {
filename: 'bundle.js',
publicPath: '/static/',
},
- plugins: [new webpack.HotModuleReplacementPlugin()],
module: {
rules: [
{
- test: /\.js$/,
+ test: /\.(js|ts)x$/,
loader: 'babel-loader',
- include: path.join(__dirname, 'src'),
+ exclude: /node_modules/,
},
],
},
+ resolve: {
+ extensions: ['.js', '.jsx', '.ts', '.tsx'],
+ },
+ plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
historyApiFallback: true,
hot: true,
port: 3000,
},
+ devtool: 'eval-source-map',
};
diff --git a/packages/react-json-tree/package.json b/packages/react-json-tree/package.json
index fe8c3f61..2523bbc6 100644
--- a/packages/react-json-tree/package.json
+++ b/packages/react-json-tree/package.json
@@ -46,10 +46,12 @@
"prepublishOnly": "npm run clean && npm run build"
},
"dependencies": {
+ "@types/prop-types": "^15.7.3",
"prop-types": "^15.7.2",
"react-base16-styling": "^0.7.0"
},
"peerDependencies": {
+ "@types/react": "^16.3.18",
"react": "^16.3.0"
}
}
diff --git a/packages/react-json-tree/src/index.tsx b/packages/react-json-tree/src/index.tsx
index 84f3d945..50a5524b 100644
--- a/packages/react-json-tree/src/index.tsx
+++ b/packages/react-json-tree/src/index.tsx
@@ -11,6 +11,7 @@ import {
invertTheme,
StylingConfig,
StylingFunction,
+ StylingValue,
Theme,
} from 'react-base16-styling';
import { CircularPropsPassedThroughJSONTree } from './types';
@@ -174,3 +175,5 @@ export default class JSONTree extends React.Component {
);
}
}
+
+export { StylingValue };
diff --git a/yarn.lock b/yarn.lock
index 6a4fcc7b..2c13c519 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3279,6 +3279,13 @@
resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
+"@types/react-dom@^16.9.8":
+ version "16.9.8"
+ resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423"
+ integrity sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==
+ dependencies:
+ "@types/react" "*"
+
"@types/react-test-renderer@^16.9.3":
version "16.9.3"
resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.9.3.tgz#96bab1860904366f4e848b739ba0e2f67bcae87e"
@@ -3293,10 +3300,10 @@
dependencies:
"@types/react" "*"
-"@types/react@*", "@types/react@^16.9.11", "@types/react@^16.9.35":
- version "16.9.45"
- resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.45.tgz#b43ccf3d8a3d2020e6a48c8c8492e5a4bc10f097"
- integrity sha512-vv950slTF5UZ5eDOf13b8qC1SD4rTvkqg3HfaUKzr17U97oeJZAa+dUaIHn0QoOJflNTIt6Pem9MmapULs9dkA==
+"@types/react@*", "@types/react@^16.9.11", "@types/react@^16.9.35", "@types/react@^16.9.46":
+ version "16.9.46"
+ resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.46.tgz#f0326cd7adceda74148baa9bff6e918632f5069e"
+ integrity sha512-dbHzO3aAq1lB3jRQuNpuZ/mnu+CdD3H0WVaaBQA8LTT3S33xhVBUj232T8M3tAhSWJs/D/UqORYUlJNl/8VQZg==
dependencies:
"@types/prop-types" "*"
csstype "^3.0.2"