From 47d102680ae14fe158a06143a9bf669115a52b8d Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Tue, 21 Sep 2021 23:24:10 -0400 Subject: [PATCH] chore(react-json-tree): fix example build (#887) * chore(react-json-tree): fix example build * Fix build --- .../examples/tree/package.json | 3 +- packages/react-dock/demo/package.json | 3 +- packages/react-json-tree/examples/.babelrc | 7 --- .../react-json-tree/examples/.eslintignore | 1 + packages/react-json-tree/examples/index.html | 1 - .../react-json-tree/examples/package.json | 3 ++ packages/react-json-tree/examples/src/App.tsx | 8 ++-- .../examples/webpack.config.ts | 47 +++++++++++-------- packages/react-json-tree/package.json | 1 - yarn.lock | 2 + 10 files changed, 41 insertions(+), 35 deletions(-) delete mode 100644 packages/react-json-tree/examples/.babelrc create mode 100644 packages/react-json-tree/examples/.eslintignore diff --git a/packages/d3-state-visualizer/examples/tree/package.json b/packages/d3-state-visualizer/examples/tree/package.json index 0624f92e..473a456a 100644 --- a/packages/d3-state-visualizer/examples/tree/package.json +++ b/packages/d3-state-visualizer/examples/tree/package.json @@ -21,7 +21,8 @@ "scripts": { "start": "webpack serve --open", "build": "webpack", - "lint": "eslint . --ext .ts" + "lint": "eslint . --ext .ts", + "type-check": "tsc --noEmit" }, "dependencies": { "d3-state-visualizer": "^1.4.0", diff --git a/packages/react-dock/demo/package.json b/packages/react-dock/demo/package.json index a6cda8e3..b0c5c28e 100644 --- a/packages/react-dock/demo/package.json +++ b/packages/react-dock/demo/package.json @@ -6,7 +6,8 @@ "scripts": { "start": "webpack serve --open", "build": "webpack", - "lint": "eslint . --ext .ts,.tsx" + "lint": "eslint . --ext .ts,.tsx", + "type-check": "tsc --noEmit" }, "dependencies": { "react": "^16.14.0", diff --git a/packages/react-json-tree/examples/.babelrc b/packages/react-json-tree/examples/.babelrc deleted file mode 100644 index 202d425a..00000000 --- a/packages/react-json-tree/examples/.babelrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "presets": [ - "@babel/preset-env", - "@babel/preset-react", - "@babel/preset-typescript" - ] -} diff --git a/packages/react-json-tree/examples/.eslintignore b/packages/react-json-tree/examples/.eslintignore new file mode 100644 index 00000000..1521c8b7 --- /dev/null +++ b/packages/react-json-tree/examples/.eslintignore @@ -0,0 +1 @@ +dist diff --git a/packages/react-json-tree/examples/index.html b/packages/react-json-tree/examples/index.html index 70d325c5..f2be3989 100755 --- a/packages/react-json-tree/examples/index.html +++ b/packages/react-json-tree/examples/index.html @@ -11,6 +11,5 @@
- diff --git a/packages/react-json-tree/examples/package.json b/packages/react-json-tree/examples/package.json index 2b5aaeb1..c067a5e8 100644 --- a/packages/react-json-tree/examples/package.json +++ b/packages/react-json-tree/examples/package.json @@ -14,6 +14,7 @@ }, "scripts": { "start": "webpack serve --open", + "build": "webpack", "lint": "eslint . --ext .ts,.tsx", "type-check": "tsc --noEmit" }, @@ -40,6 +41,8 @@ "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "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", "typescript": "~4.3.5", "webpack": "^5.53.0", diff --git a/packages/react-json-tree/examples/src/App.tsx b/packages/react-json-tree/examples/src/App.tsx index e79e4d01..53576e9e 100644 --- a/packages/react-json-tree/examples/src/App.tsx +++ b/packages/react-json-tree/examples/src/App.tsx @@ -5,15 +5,15 @@ import JSONTree, { StylingValue } from 'react-json-tree'; const getLabelStyle: StylingValue = ({ style }, nodeType, expanded) => ({ style: { ...style, - textTransform: expanded ? 'uppercase' : style.textTransform, + textTransform: expanded ? 'uppercase' : style!.textTransform, }, }); const getBoolStyle: StylingValue = ({ style }, nodeType) => ({ style: { ...style, - border: nodeType === 'Boolean' ? '1px solid #DD3333' : style.border, - borderRadius: nodeType === 'Boolean' ? 3 : style.borderRadius, + border: nodeType === 'Boolean' ? '1px solid #DD3333' : style!.border, + borderRadius: nodeType === 'Boolean' ? 3 : style!.borderRadius, }, }); @@ -30,7 +30,7 @@ const getValueLabelStyle: StylingValue = ({ style }, nodeType, keyPath) => ({ color: !Number.isNaN(keyPath[0]) && !(parseInt(keyPath, 10) % 2) ? '#33F' - : style.color, + : style!.color, }, }); diff --git a/packages/react-json-tree/examples/webpack.config.ts b/packages/react-json-tree/examples/webpack.config.ts index d9ba450e..e49340bd 100644 --- a/packages/react-json-tree/examples/webpack.config.ts +++ b/packages/react-json-tree/examples/webpack.config.ts @@ -1,37 +1,44 @@ import * as path from 'path'; -import * as webpack from 'webpack'; - -const isProduction = process.env.NODE_ENV === 'production'; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; module.exports = { - mode: isProduction ? 'production' : 'development', - entry: [ - !isProduction && 'webpack-dev-server/client?http://localhost:3000', - !isProduction && 'webpack/hot/only-dev-server', - './src/index', - ].filter(Boolean), + mode: 'development', + entry: './src/index.tsx', + devtool: 'eval-source-map', + devServer: { + static: './dist', + }, + plugins: [ + new HtmlWebpackPlugin({ + template: './index.html', + }), + new ForkTsCheckerWebpackPlugin(), + ], output: { - path: path.join(__dirname, 'dist'), filename: 'bundle.js', - publicPath: '/static/', + path: path.join(__dirname, 'dist'), + clean: true, }, module: { rules: [ { - test: /\.(js|ts)x$/, - loader: 'babel-loader', + test: /\.(js|ts)x?$/, exclude: /node_modules/, + use: { + loader: 'babel-loader', + options: { + presets: [ + ['@babel/preset-env', { targets: 'defaults' }], + '@babel/preset-react', + '@babel/preset-typescript', + ], + }, + }, }, ], }, 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 fe470f78..e1961067 100644 --- a/packages/react-json-tree/package.json +++ b/packages/react-json-tree/package.json @@ -30,7 +30,6 @@ "url": "https://github.com/reduxjs/redux-devtools.git" }, "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:types": "tsc --emitDeclarationOnly", "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline", diff --git a/yarn.lock b/yarn.lock index 6a35cd2e..38ae685b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -24696,6 +24696,8 @@ fsevents@^1.2.7: eslint: ^7.32.0 eslint-config-prettier: ^8.3.0 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 react: ^16.14.0 react-base16-styling: ^0.8.0