feature(react-json-tree): convert example to TypeScript (#603)

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",

packages/react-json-tree/.eslintignore

@@ -1,2 +1,3 @@
+examples
 lib
 umd

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"]
 }

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'],
+      },
+    },
+  ],
+};

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
 }

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) => (
   <span>
     {' // '}
     {type}
   </span>
 );
 
-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<any, any>([
     ['key', 'value'],
     [{ objectKey: 'value' }, { objectKey: 'value' }],
   ]),
-  map: new window.Map([
+  map: new window.Map<any, any>([
     ['key', 'value'],
     [0, 'value'],
     [{ objectKey: 'value' }, { objectKey: 'value' }],

packages/react-json-tree/examples/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.react.base.json",
+  "compilerOptions": {
+    "outDir": "lib"
+  },
+  "include": ["src"]
+}

packages/react-json-tree/examples/tsconfig.webpack.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["webpack.config.ts"]
+}

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',
 };

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"
   }
 }

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<Props, State> {
     );
   }
 }
+
+export { StylingValue };

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"