Changes

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

@@ -1,9 +0,0 @@
-{
-  "plugins": [
-    "transform-object-rest-spread",
-    "transform-class-properties"
-  ],
-  "presets": [
-    "env", "react"
-  ]
-}

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

@@ -27,18 +27,22 @@
   },
   "homepage": "https://github.com/gaearon/react-hot-boilerplate",
   "devDependencies": {
-    "babel-core": "^6.26.0",
+    "@babel/cli": "^7.2.3",
-    "babel-loader": "^7.1.2",
+    "@babel/core": "^7.2.2",
-    "babel-plugin-transform-class-properties": "^6.24.1",
+    "@babel/plugin-proposal-class-properties": "^7.3.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "@babel/preset-env": "^7.3.1",
-    "babel-preset-react": "^6.5.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.9.0",
+    "@types/react": "^16.3.0",
+    "@types/react-dom": "^16.3.0",
+    "typescript": "^3.8.3",
     "webpack": "^3.8.1",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^2.4.1"
   },
   "dependencies": {
     "immutable": "^3.8.1",
-    "react": "^16.0.0",
+    "react": "^16.3.0",
     "react-base16-styling": "^0.5.3",
-    "react-dom": "^16.0.0"
+    "react-dom": "^16.3.0"
   }
 }

packages/react-json-tree/examples/src/App.tsx

@@ -1,46 +1,59 @@
 import React from 'react';
 import { Map } from 'immutable';
-import JSONTree from '../../src';
+import JSONTree from 'react-json-tree';
+import { StylingValue } from 'react-base16-styling';
 
-const getLabelStyle = ({ style }, nodeType, expanded) => ({
+const getLabelStyle: StylingValue = (
+  { style },
+  keyPath,
+  nodeType,
+  expanded
+) => ({
   style: {
     ...style,
-    textTransform: expanded ? 'uppercase' : style.textTransform
+    textTransform: expanded ? 'uppercase' : style!.textTransform
   }
 });
 
-const getBoolStyle = ({ style }, nodeType) => ({
+const getBoolStyle: StylingValue = ({ style }, nodeType) => ({
   style: {
     ...style,
-    border: nodeType === 'Boolean' ? '1px solid #DD3333' : style.border,
+    border: nodeType === 'Boolean' ? '1px solid #DD3333' : style!.border,
-    borderRadius: nodeType === 'Boolean' ? 3 : style.borderRadius
+    borderRadius: nodeType === 'Boolean' ? 3 : style!.borderRadius
   }
 });
 
-const getItemString = type => (
+const getItemString = (type: string) => (
   <span>
     {' // '}
     {type}
   </span>
 );
 
-const getValueLabelStyle = ({ style }, nodeType, keyPath) => ({
+const getValueLabelStyle: StylingValue = ({ style }, nodeType, keyPath) => ({
   style: {
     ...style,
     color:
       !Number.isNaN(keyPath[0]) && !(parseInt(keyPath, 10) % 2)
         ? '#33F'
-        : style.color
+        : style!.color
   }
 });
 
 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) {
+class Custom {
+  value: unknown;
+
+  constructor(value: unknown) {
     this.value = value;
-};
+  }
-Custom.prototype[Symbol.toStringTag] = 'Custom';
+
+  get [Symbol.toStringTag]() {
+    return 'Custom';
+  }
+}
 
 const data = {
   array: [1, 2, 3],
@@ -73,7 +86,7 @@ const data = {
     ['key', 'value'],
     [{ objectKey: 'value' }, { objectKey: 'value' }]
   ]),
-  map: new window.Map([
+  map: Map([
     ['key', 'value'],
     [0, 'value'],
     [{ objectKey: 'value' }, { objectKey: 'value' }]
@@ -146,7 +159,7 @@ const App = () => (
       <JSONTree
         data={data}
         theme={{
-          extend: theme,
+          extend: (theme as unknown) as StylingValue,
           nestedNodeLabel: getLabelStyle,
           value: getBoolStyle,
           valueLabel: getValueLabelStyle

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

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

packages/react-json-tree/examples/webpack.config.js

@@ -36,19 +36,25 @@ module.exports = {
       'react-json-tree': path.join(__dirname, '..', 'src'),
       react: path.join(__dirname, 'node_modules', 'react')
     },
-    extensions: ['.js']
+    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
   },
   module: {
     loaders: [
       {
-        test: /\.js$/,
+        test: /\.(ts|js)x?$/,
-        loaders: ['babel-loader'].filter(Boolean),
+        include: path.join(__dirname, 'src'),
-        include: path.join(__dirname, 'src')
+        loaders: 'babel-loader',
+        options: {
+          rootMode: 'upward'
+        }
       },
       {
-        test: /\.js$/,
+        test: /\.(ts|js)x?$/,
-        loaders: ['babel-loader'].filter(Boolean),
+        include: path.join(__dirname, '..', 'src'),
-        include: path.join(__dirname, '..', 'src')
+        loaders: 'babel-loader',
+        options: {
+          rootMode: 'upward'
+        }
       }
     ]
   }

packages/react-json-tree/src/react-base16-styling.ts

@@ -39,7 +39,7 @@ declare module 'react-base16-styling' {
   export type Theme = string | Base16Theme | StylingConfig;
 
   export type StylingFunction = (
-    keys: string | Array<string | undefined | null>,
+    keys: string | Array<string | false | undefined | null>,
     ...rest: any[]
   ) => Styling;