chore(react-dock): fix example build (#886)

* chore(react-dock): fix demo build

* Lint

package.json

@@ -22,6 +22,7 @@
     "extension",
     "packages/*",
     "packages/d3-state-visualizer/examples/tree",
+    "packages/react-dock/demo",
     "packages/react-json-tree/examples",
     "packages/redux-devtools/examples/counter",
     "packages/redux-devtools/examples/todomvc",

packages/d3-state-visualizer/examples/tree/.eslintignore

@@ -0,0 +1 @@
+dist

packages/d3-state-visualizer/examples/tree/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  extends: '../../../../eslintrc.ts.base.json',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+  },
+  overrides: [
+    {
+      files: ['webpack.config.ts'],
+      extends: '../../../../eslintrc.ts.base.json',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.webpack.json'],
+      },
+    },
+  ],
+};

packages/d3-state-visualizer/examples/tree/package.json

@@ -19,7 +19,9 @@
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "start": "webpack serve --open"
+    "start": "webpack serve --open",
+    "build": "webpack",
+    "lint": "eslint . --ext .ts"
   },
   "dependencies": {
     "d3-state-visualizer": "^1.4.0",
@@ -32,7 +34,11 @@
     "@types/node": "^14.17.17",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.1.0",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.31.2",
     "babel-loader": "^8.2.2",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
     "fork-ts-checker-webpack-plugin": "^6.3.3",
     "html-webpack-plugin": "^5.3.2",
     "ts-node": "^10.2.1",

packages/d3-state-visualizer/examples/tree/tsconfig.webpack.json

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

packages/d3-state-visualizer/examples/tree/webpack.config.ts

@@ -38,6 +38,6 @@ export default {
     ],
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    extensions: ['.js', '.ts'],
   },
 };

packages/react-dock/.babelrc

@@ -3,6 +3,5 @@
     "@babel/preset-env",
     "@babel/preset-react",
     "@babel/preset-typescript"
-  ],
+  ]
-  "plugins": ["react-hot-loader/babel"]
 }

packages/react-dock/.eslintignore

@@ -1 +1,2 @@
+demo
 lib

packages/react-dock/.eslintrc.js

@@ -13,21 +13,5 @@ module.exports = {
         project: ['./test/tsconfig.json'],
       },
     },
-    {
-      files: ['demo/**/*.ts', 'demo/**/*.tsx'],
-      extends: '../../eslintrc.ts.react.base.json',
-      parserOptions: {
-        tsconfigRootDir: __dirname,
-        project: ['./demo/tsconfig.json'],
-      },
-    },
-    {
-      files: ['webpack.config.ts'],
-      extends: '../../eslintrc.ts.base.json',
-      parserOptions: {
-        tsconfigRootDir: __dirname,
-        project: ['./tsconfig.webpack.json'],
-      },
-    },
   ],
 };

packages/react-dock/demo/.eslintignore

@@ -0,0 +1 @@
+dist

packages/react-dock/demo/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  extends: '../../../eslintrc.ts.react.base.json',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+  },
+  overrides: [
+    {
+      files: ['webpack.config.ts'],
+      extends: '../../../eslintrc.ts.base.json',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.webpack.json'],
+      },
+    },
+  ],
+};

packages/react-dock/demo/index.html

@@ -22,6 +22,5 @@
         data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png"
     /></a>
     <div id="root"></div>
-    <script src="static/bundle.js"></script>
   </body>
 </html>

packages/react-dock/demo/package.json

@@ -0,0 +1,45 @@
+{
+  "private": true,
+  "name": "react-dock-demo",
+  "version": "0.1.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack serve --open",
+    "build": "webpack",
+    "lint": "eslint . --ext .ts,.tsx"
+  },
+  "dependencies": {
+    "react": "^16.14.0",
+    "react-bootstrap": "^1.6.3",
+    "react-dock": "^0.4.0",
+    "react-dom": "^16.14.0",
+    "react-icons": "^4.2.0",
+    "react-is": "^16.13.1",
+    "styled-components": "^5.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
+    "@types/node": "^14.17.17",
+    "@types/react": "^16.14.15",
+    "@types/react-dom": "^16.9.14",
+    "@types/styled-components": "^5.1.14",
+    "@types/webpack": "^5.28.0",
+    "@types/webpack-dev-server": "^4.1.0",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.31.2",
+    "babel-loader": "^8.2.2",
+    "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",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.2.1"
+  }
+}

packages/react-dock/demo/src/App.tsx

@@ -1,4 +1,3 @@
-import { hot } from 'react-hot-loader/root';
 import React, { Component } from 'react';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
@@ -52,7 +51,8 @@ interface State {
   size: number;
 }
 
-class App extends Component<never, State> {
+// eslint-disable-next-line @typescript-eslint/ban-types
+export default class App extends Component<{}, State> {
   state: State = {
     positionIdx: 0,
     dimModeIdx: 0,
@@ -187,5 +187,3 @@ class App extends Component<never, State> {
     this.setState({ dimModeIdx: (this.state.dimModeIdx + 1) % 3 });
   };
 }
-
-export default hot(App);

packages/react-dock/demo/tsconfig.json

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

packages/react-dock/demo/tsconfig.webpack.json

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

packages/react-dock/demo/webpack.config.ts

@@ -0,0 +1,44 @@
+import * as path from 'path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+
+module.exports = {
+  mode: 'development',
+  entry: './src/index.tsx',
+  devtool: 'eval-source-map',
+  devServer: {
+    static: './dist',
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './index.html',
+    }),
+    new ForkTsCheckerWebpackPlugin(),
+  ],
+  output: {
+    filename: 'bundle.js',
+    path: path.join(__dirname, 'dist'),
+    clean: true,
+  },
+  module: {
+    rules: [
+      {
+        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'],
+  },
+};

packages/react-dock/package.json

@@ -25,8 +25,6 @@
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "start": "webpack serve",
-    "build:demo": "NODE_ENV=production webpack -p",
     "build": "yarn run build:types && yarn run build:js",
     "build:types": "tsc --emitDeclarationOnly",
     "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
@@ -51,36 +49,20 @@
     "@babel/preset-typescript": "^7.15.0",
     "@types/jest": "^27.0.1",
     "@types/lodash.debounce": "^4.0.6",
-    "@types/node": "^14.17.17",
     "@types/react": "^16.14.15",
-    "@types/react-dom": "^16.9.14",
     "@types/react-test-renderer": "^16.9.5",
-    "@types/styled-components": "^5.1.14",
-    "@types/webpack": "^5.28.0",
-    "@types/webpack-dev-server": "^4.1.0",
     "@typescript-eslint/eslint-plugin": "^4.31.2",
     "@typescript-eslint/parser": "^4.31.2",
-    "babel-loader": "^8.2.2",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jest": "^24.4.2",
     "eslint-plugin-react": "^7.25.3",
     "jest": "^27.2.1",
     "react": "^16.14.0",
-    "react-bootstrap": "^1.6.3",
-    "react-dom": "^16.14.0",
-    "react-hot-loader": "^4.13.0",
-    "react-icons": "^4.2.0",
-    "react-is": "^16.13.1",
     "react-test-renderer": "^16.14.0",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.1",
     "ts-jest": "^27.0.5",
-    "ts-node": "^10.2.1",
+    "typescript": "~4.3.5"
-    "typescript": "~4.3.5",
-    "webpack": "^5.53.0",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.2.1"
   },
   "peerDependencies": {
     "@types/react": "^16.3.0 || ^17.0.0",

packages/react-dock/tsconfig.webpack.json

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

packages/react-dock/webpack.config.ts

@@ -1,49 +0,0 @@
-import * as path from 'path';
-import * as webpack from 'webpack';
-
-const isProduction = process.env.NODE_ENV === 'production';
-
-module.exports = {
-  mode: isProduction ? 'production' : 'development',
-  entry: isProduction
-    ? ['./demo/src/index']
-    : [
-        'webpack-dev-server/client?http://localhost:3000',
-        'webpack/hot/only-dev-server',
-        './demo/src/index',
-      ],
-  output: {
-    path: path.join(__dirname, 'demo/static'),
-    filename: 'bundle.js',
-    publicPath: isProduction ? 'static/' : '/static/',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|ts)x?$/,
-        loader: 'babel-loader',
-        include: [
-          path.join(__dirname, 'src'),
-          path.join(__dirname, 'demo/src'),
-        ],
-      },
-    ],
-  },
-  resolve: {
-    extensions: ['.js', '.jsx', '.ts', '.tsx'],
-  },
-  plugins: isProduction ? [] : [new webpack.HotModuleReplacementPlugin()],
-  devServer: isProduction
-    ? null
-    : {
-        publicPath: '/static/',
-        port: 3000,
-        contentBase: './demo/',
-        hot: true,
-        stats: {
-          colors: true,
-        },
-        historyApiFallback: true,
-      },
-  devtool: 'eval-source-map',
-};

yarn.lock

@@ -12409,8 +12409,12 @@ __metadata:
     "@types/node": ^14.17.17
     "@types/webpack": ^5.28.0
     "@types/webpack-dev-server": ^4.1.0
+    "@typescript-eslint/eslint-plugin": ^4.31.2
+    "@typescript-eslint/parser": ^4.31.2
     babel-loader: ^8.2.2
     d3-state-visualizer: ^1.4.0
+    eslint: ^7.32.0
+    eslint-config-prettier: ^8.3.0
     fork-ts-checker-webpack-plugin: ^6.3.3
     html-webpack-plugin: ^5.3.2
     map2tree: ^1.5.0
@@ -24435,6 +24439,43 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"react-dock-demo@workspace:packages/react-dock/demo":
+  version: 0.0.0-use.local
+  resolution: "react-dock-demo@workspace:packages/react-dock/demo"
+  dependencies:
+    "@babel/core": ^7.15.5
+    "@babel/preset-env": ^7.15.6
+    "@babel/preset-react": ^7.14.5
+    "@babel/preset-typescript": ^7.15.0
+    "@types/node": ^14.17.17
+    "@types/react": ^16.14.15
+    "@types/react-dom": ^16.9.14
+    "@types/styled-components": ^5.1.14
+    "@types/webpack": ^5.28.0
+    "@types/webpack-dev-server": ^4.1.0
+    "@typescript-eslint/eslint-plugin": ^4.31.2
+    "@typescript-eslint/parser": ^4.31.2
+    babel-loader: ^8.2.2
+    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
+    react: ^16.14.0
+    react-bootstrap: ^1.6.3
+    react-dock: ^0.4.0
+    react-dom: ^16.14.0
+    react-icons: ^4.2.0
+    react-is: ^16.13.1
+    styled-components: ^5.3.1
+    ts-node: ^10.2.1
+    typescript: ~4.3.5
+    webpack: ^5.53.0
+    webpack-cli: ^4.8.0
+    webpack-dev-server: ^4.2.1
+  languageName: unknown
+  linkType: soft
+
 "react-dock@^0.4.0, react-dock@workspace:packages/react-dock":
   version: 0.0.0-use.local
   resolution: "react-dock@workspace:packages/react-dock"
@@ -24447,17 +24488,11 @@ fsevents@^1.2.7:
     "@types/jest": ^27.0.1
     "@types/lodash": ^4.14.173
     "@types/lodash.debounce": ^4.0.6
-    "@types/node": ^14.17.17
     "@types/prop-types": ^15.7.4
     "@types/react": ^16.14.15
-    "@types/react-dom": ^16.9.14
     "@types/react-test-renderer": ^16.9.5
-    "@types/styled-components": ^5.1.14
-    "@types/webpack": ^5.28.0
-    "@types/webpack-dev-server": ^4.1.0
     "@typescript-eslint/eslint-plugin": ^4.31.2
     "@typescript-eslint/parser": ^4.31.2
-    babel-loader: ^8.2.2
     eslint: ^7.32.0
     eslint-config-prettier: ^8.3.0
     eslint-plugin-jest: ^24.4.2
@@ -24466,20 +24501,10 @@ fsevents@^1.2.7:
     lodash.debounce: ^4.0.8
     prop-types: ^15.7.2
     react: ^16.14.0
-    react-bootstrap: ^1.6.3
-    react-dom: ^16.14.0
-    react-hot-loader: ^4.13.0
-    react-icons: ^4.2.0
-    react-is: ^16.13.1
     react-test-renderer: ^16.14.0
     rimraf: ^3.0.2
-    styled-components: ^5.3.1
     ts-jest: ^27.0.5
-    ts-node: ^10.2.1
     typescript: ~4.3.5
-    webpack: ^5.53.0
-    webpack-cli: ^4.8.0
-    webpack-dev-server: ^4.2.1
   peerDependencies:
     "@types/react": ^16.3.0 || ^17.0.0
     react: ^16.3.0 || ^17.0.0