diff --git a/packages/d3-state-visualizer/examples/tree/index.html b/packages/d3-state-visualizer/examples/tree/index.html index 579dbccb..e627e9dd 100644 --- a/packages/d3-state-visualizer/examples/tree/index.html +++ b/packages/d3-state-visualizer/examples/tree/index.html @@ -34,6 +34,5 @@
- diff --git a/packages/d3-state-visualizer/examples/tree/package.json b/packages/d3-state-visualizer/examples/tree/package.json index 483bec14..4698bf8f 100644 --- a/packages/d3-state-visualizer/examples/tree/package.json +++ b/packages/d3-state-visualizer/examples/tree/package.json @@ -13,22 +13,27 @@ "url": "https://github.com/reduxjs/redux-devtools/issues" }, "license": "MIT", - "scripts": { - "start": "webpack serve --open" - }, "repository": { "type": "git", "url": "https://github.com/reduxjs/redux-devtools.git" }, + "scripts": { + "start": "webpack serve --open" + }, "dependencies": { "d3-state-visualizer": "^1.4.0", "map2tree": "^1.5.0" }, "devDependencies": { + "@babel/core": "^7.15.5", + "@babel/preset-env": "^7.15.6", + "@babel/preset-typescript": "^7.15.0", "@types/node": "^14.17.15", "@types/webpack": "^5.28.0", "@types/webpack-dev-server": "^4.1.0", "babel-loader": "^8.2.2", + "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.52.1", diff --git a/packages/d3-state-visualizer/examples/tree/index.ts b/packages/d3-state-visualizer/examples/tree/src/index.ts similarity index 92% rename from packages/d3-state-visualizer/examples/tree/index.ts rename to packages/d3-state-visualizer/examples/tree/src/index.ts index 4e1954d3..5e8cf5e6 100644 --- a/packages/d3-state-visualizer/examples/tree/index.ts +++ b/packages/d3-state-visualizer/examples/tree/src/index.ts @@ -20,7 +20,7 @@ const appState = { }, }; -const render = tree(document.getElementById('root'), { +const render = tree(document.getElementById('root')!, { state: appState, id: 'treeExample', size: 1000, diff --git a/packages/d3-state-visualizer/examples/tree/tsconfig.json b/packages/d3-state-visualizer/examples/tree/tsconfig.json new file mode 100644 index 00000000..fa0ec533 --- /dev/null +++ b/packages/d3-state-visualizer/examples/tree/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../../tsconfig.base.json", + "include": ["src"] +} diff --git a/packages/d3-state-visualizer/examples/tree/webpack.config.ts b/packages/d3-state-visualizer/examples/tree/webpack.config.ts index 3982742f..23586a63 100644 --- a/packages/d3-state-visualizer/examples/tree/webpack.config.ts +++ b/packages/d3-state-visualizer/examples/tree/webpack.config.ts @@ -1,36 +1,43 @@ import * as path from 'path'; -import * as webpack from 'webpack'; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; export default { - mode: process.env.NODE_ENV === 'production' ? 'production' : 'development', - entry: [ - 'webpack-dev-server/client?http://localhost:3000', - 'webpack/hot/only-dev-server', - './index', + mode: 'development', + entry: './src/index.ts', + 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)$/, - loader: 'babel-loader', exclude: /node_modules/, - include: __dirname, + use: { + loader: 'babel-loader', + options: { + presets: [ + ['@babel/preset-env', { targets: 'defaults' }], + '@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/d3-state-visualizer/tsconfig.json b/packages/d3-state-visualizer/tsconfig.json index 7b7d1492..84575cb5 100644 --- a/packages/d3-state-visualizer/tsconfig.json +++ b/packages/d3-state-visualizer/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "../../tsconfig.react.base.json", + "extends": "../../tsconfig.base.json", "compilerOptions": { "outDir": "lib" }, diff --git a/yarn.lock b/yarn.lock index 02201fff..8c53bf11 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12414,11 +12414,16 @@ __metadata: version: 0.0.0-use.local resolution: "d3-state-visualizer-tree-example@workspace:packages/d3-state-visualizer/examples/tree" dependencies: + "@babel/core": ^7.15.5 + "@babel/preset-env": ^7.15.6 + "@babel/preset-typescript": ^7.15.0 "@types/node": ^14.17.15 "@types/webpack": ^5.28.0 "@types/webpack-dev-server": ^4.1.0 babel-loader: ^8.2.2 d3-state-visualizer: ^1.4.0 + fork-ts-checker-webpack-plugin: ^6.3.3 + html-webpack-plugin: ^5.3.2 map2tree: ^1.5.0 ts-node: ^10.2.1 typescript: ~4.3.5