chore(react-json-tree): fix example build (#887)

* chore(react-json-tree): fix example build

* Fix build
This commit is contained in:
Nathan Bierema 2021-09-21 23:24:10 -04:00 committed by GitHub
parent 09c82b70ab
commit 47d102680a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 41 additions and 35 deletions

View File

@ -21,7 +21,8 @@
"scripts": { "scripts": {
"start": "webpack serve --open", "start": "webpack serve --open",
"build": "webpack", "build": "webpack",
"lint": "eslint . --ext .ts" "lint": "eslint . --ext .ts",
"type-check": "tsc --noEmit"
}, },
"dependencies": { "dependencies": {
"d3-state-visualizer": "^1.4.0", "d3-state-visualizer": "^1.4.0",

View File

@ -6,7 +6,8 @@
"scripts": { "scripts": {
"start": "webpack serve --open", "start": "webpack serve --open",
"build": "webpack", "build": "webpack",
"lint": "eslint . --ext .ts,.tsx" "lint": "eslint . --ext .ts,.tsx",
"type-check": "tsc --noEmit"
}, },
"dependencies": { "dependencies": {
"react": "^16.14.0", "react": "^16.14.0",

View File

@ -1,7 +0,0 @@
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
}

View File

@ -0,0 +1 @@
dist

View File

@ -11,6 +11,5 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script src="/static/bundle.js"></script>
</body> </body>
</html> </html>

View File

@ -14,6 +14,7 @@
}, },
"scripts": { "scripts": {
"start": "webpack serve --open", "start": "webpack serve --open",
"build": "webpack",
"lint": "eslint . --ext .ts,.tsx", "lint": "eslint . --ext .ts,.tsx",
"type-check": "tsc --noEmit" "type-check": "tsc --noEmit"
}, },
@ -40,6 +41,8 @@
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.25.3", "eslint-plugin-react": "^7.25.3",
"fork-ts-checker-webpack-plugin": "^6.3.3",
"html-webpack-plugin": "^5.3.2",
"ts-node": "^10.2.1", "ts-node": "^10.2.1",
"typescript": "~4.3.5", "typescript": "~4.3.5",
"webpack": "^5.53.0", "webpack": "^5.53.0",

View File

@ -5,15 +5,15 @@ import JSONTree, { StylingValue } from 'react-json-tree';
const getLabelStyle: StylingValue = ({ style }, nodeType, expanded) => ({ const getLabelStyle: StylingValue = ({ style }, nodeType, expanded) => ({
style: { style: {
...style, ...style,
textTransform: expanded ? 'uppercase' : style.textTransform, textTransform: expanded ? 'uppercase' : style!.textTransform,
}, },
}); });
const getBoolStyle: StylingValue = ({ style }, nodeType) => ({ const getBoolStyle: StylingValue = ({ style }, nodeType) => ({
style: { style: {
...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,
}, },
}); });
@ -30,7 +30,7 @@ const getValueLabelStyle: StylingValue = ({ style }, nodeType, keyPath) => ({
color: color:
!Number.isNaN(keyPath[0]) && !(parseInt(keyPath, 10) % 2) !Number.isNaN(keyPath[0]) && !(parseInt(keyPath, 10) % 2)
? '#33F' ? '#33F'
: style.color, : style!.color,
}, },
}); });

View File

@ -1,37 +1,44 @@
import * as path from 'path'; import * as path from 'path';
import * as webpack from 'webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
const isProduction = process.env.NODE_ENV === 'production';
module.exports = { module.exports = {
mode: isProduction ? 'production' : 'development', mode: 'development',
entry: [ entry: './src/index.tsx',
!isProduction && 'webpack-dev-server/client?http://localhost:3000', devtool: 'eval-source-map',
!isProduction && 'webpack/hot/only-dev-server', devServer: {
'./src/index', static: './dist',
].filter(Boolean), },
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
new ForkTsCheckerWebpackPlugin(),
],
output: { output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js', filename: 'bundle.js',
publicPath: '/static/', path: path.join(__dirname, 'dist'),
clean: true,
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.(js|ts)x$/, test: /\.(js|ts)x?$/,
loader: 'babel-loader',
exclude: /node_modules/, exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', { targets: 'defaults' }],
'@babel/preset-react',
'@babel/preset-typescript',
],
},
},
}, },
], ],
}, },
resolve: { resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'], extensions: ['.js', '.jsx', '.ts', '.tsx'],
}, },
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
historyApiFallback: true,
hot: true,
port: 3000,
},
devtool: 'eval-source-map',
}; };

View File

@ -30,7 +30,6 @@
"url": "https://github.com/reduxjs/redux-devtools.git" "url": "https://github.com/reduxjs/redux-devtools.git"
}, },
"scripts": { "scripts": {
"start": "cd examples && npm start",
"build": "yarn run build:types && yarn run build:js && yarn run build:umd && npm run build:umd:min", "build": "yarn run build:types && yarn run build:js && yarn run build:umd && npm run build:umd:min",
"build:types": "tsc --emitDeclarationOnly", "build:types": "tsc --emitDeclarationOnly",
"build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline", "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",

View File

@ -24696,6 +24696,8 @@ fsevents@^1.2.7:
eslint: ^7.32.0 eslint: ^7.32.0
eslint-config-prettier: ^8.3.0 eslint-config-prettier: ^8.3.0
eslint-plugin-react: ^7.25.3 eslint-plugin-react: ^7.25.3
fork-ts-checker-webpack-plugin: ^6.3.3
html-webpack-plugin: ^5.3.2
immutable: ^4.0.0-rc.15 immutable: ^4.0.0-rc.15
react: ^16.14.0 react: ^16.14.0
react-base16-styling: ^0.8.0 react-base16-styling: ^0.8.0