chore(DemoApp): hot replacement support for demo app (#8471)

* hot replacement support for demo app Signed-off-by: John Swanke <[email protected]> * fix build Signed-off-by: John Swanke <[email protected]> * fix build Signed-off-by: John Swanke <[email protected]> * allow type checking with hot replacement Signed-off-by: John Swanke <[email protected]> * semantic and lint checks Signed-off-by: John Swanke <[email protected]> * fix popper Signed-off-by: John Swanke <[email protected]> * fix popper Signed-off-by: John Swanke <[email protected]> * fix typescript Signed-off-by: John Swanke <[email protected]> * fix yarn.lock Signed-off-by: John Swanke <[email protected]> * ts and lint check only if running :hot Signed-off-by: John Swanke <[email protected]> * ts and lint check only if running :hot Signed-off-by: John Swanke <[email protected]> * fix conflict Signed-off-by: John Swanke <[email protected]> Signed-off-by: John Swanke <[email protected]>
patternfly · Jan 18, 2023 · 20c8ae5 · 20c8ae5
1 parent 71491f5
commit 20c8ae5
Show file tree

Hide file tree

Showing 11 changed files with 1,263 additions and 51 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -2,6 +2,7 @@
 node_modules
 dist
 __tests__
+thirdparty
 tsc_out
 .out
 .changelog

diff --git a/package.json b/package.json
@@ -64,7 +64,7 @@
     "react-dom": "^18",
     "surge": "^0.23.1",
     "ts-patch": "^1.4.2",
-    "typescript": "^4.0.0"
+    "typescript": "^4.7.4"
   },
   "scripts": {
     "build": "yarn build:generate && yarn build:esm && yarn build:subpaths && yarn build:cjs",
@@ -89,6 +89,7 @@
     "start": "yarn build && concurrently --kill-others \"yarn watch\" \"yarn workspace @patternfly/react-docs develop\"",
     "start:cypress": "lerna run cypress:open",
     "start:demo-app": "lerna run start:demo-app --stream",
+    "start:demo-app:hot": "lerna run start:demo-app:hot --stream",
     "test": "TZ=EST jest packages",
     "test:a11y": "lerna run test:a11y --stream",
     "test:integration": "yarn workspace @patternfly/react-integration test:integration",

diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "build:demo-app": "webpack --mode production",
     "start:demo-app": "webpack-dev-server",
+    "start:demo-app:hot": "webpack-dev-server --hot=true",
     "serve:demo-app": "node scripts/serve"
   },
   "dependencies": {
@@ -19,18 +20,25 @@
     "@types/react-dom": "^18",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.7",
+    "fork-ts-checker-webpack-plugin": "6.5.2",
     "classnames": "^2.2.6",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.1.0",
     "css-loader": "^4.3.0",
     "file-loader": "^6.1.0",
-    "html-webpack-plugin": "^4.4.1",
+    "html-webpack-plugin": "^5.5.0",
     "local-web-server": "^2.6.1",
     "mini-css-extract-plugin": "^0.11.1",
+    "react-hot-loader": "4.13.0",
+    "react-refresh": "0.14.0",
+    "react-refresh-typescript": "2.0.7",
     "ts-loader": "^8.3.0",
+    "style-loader": "3.3.1",
     "typescript": "^4.7.4",
     "url-loader": "^4.1.0",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.12"
+    "webpack": "5.73.0",
+    "webpack-cli": "4.10.0",
+    "webpack-dev-server": "4.9.3"
   }
 }
diff --git a/packages/react-integration/demo-app-ts/src/App.css b/packages/react-integration/demo-app-ts/src/App.css
@@ -25,6 +25,16 @@
   color: #61dafb;
 }
 
+#webpack-dev-server-client-overlay,
+#react-refresh-overlay {
+  height: 75px !important;
+  min-height: 75px !important;
+  left: 50% !important;
+  top: 0px !important;
+  width: 400px !important;
+  position: absolute !important;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

diff --git a/packages/react-integration/demo-app-ts/tsconfig.dev.json b/packages/react-integration/demo-app-ts/tsconfig.dev.json
@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "noImplicitAny": false,
+    "skipLibCheck": true,
+    "baseUrl": "src",
+    "paths": {
+      "@patternfly/react-core": ["../../../react-core/src/index.ts"],
+      "@patternfly/react-code-editor": ["../../../react-code-editor/src/index.ts"],
+      "@patternfly/react-table": ["../../../react-table/src/index.ts"],
+      "@patternfly/react-topology": ["../../../react-topology/src/index.ts"]
+    }
+  },
+  "memoryLimit": 4096
+}
diff --git a/packages/react-integration/demo-app-ts/webpack.config.js b/packages/react-integration/demo-app-ts/webpack.config.js
@@ -1,4 +1,7 @@
 const path = require('path');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const ReactRefreshTypeScript = require('react-refresh-typescript');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -8,20 +11,22 @@ const staticDir = path.join(process.cwd(), 'static/');
 
 module.exports = (_env, argv) => {
   const isProd = argv.mode === 'production';
-
+  const useTsChecker = argv.hot;
   return {
     entry: path.resolve(__dirname, 'src/index.tsx'),
     output: {
       path: path.resolve('public'),
-      filename: '[name].[hash].bundle.js',
+      publicPath: '/',
+      filename: '[name].[fullhash].bundle.js',
       pathinfo: false // https://webpack.js.org/guides/build-performance/#output-without-path-info,
     },
     devServer: {
       hot: true,
       historyApiFallback: true,
       port: 3000,
-      clientLogLevel: 'info',
-      stats: 'minimal'
+      client: {
+        logging: 'info'
+      }
     },
     amd: false, // We don't use any AMD modules, helps performance
     mode: isProd ? 'production' : 'development',
@@ -30,22 +35,31 @@ module.exports = (_env, argv) => {
       rules: [
         {
           test: /\.[tj]sx?$/,
-          include: [path.join(__dirname, 'src')],
-          use: { loader: 'ts-loader' }
+          exclude: /node_modules/,
+          loader: 'ts-loader',
+          options: {
+            transpileOnly: true,
+            getCustomTransformers: () => ({
+              before: [!isProd && ReactRefreshTypeScript()].filter(Boolean)
+            })
+          },
+          type: 'javascript/auto'
         },
         {
           test: /\.css$/,
-          use: [
-            {
-              loader: MiniCssExtractPlugin.loader,
-              options: {
-                hmr: !isProd
-              }
-            },
-            {
-              loader: 'css-loader'
-            }
-          ]
+          use: !isProd
+            ? ['style-loader', 'css-loader']
+            : [
+                {
+                  loader: MiniCssExtractPlugin.loader,
+                  options: {
+                    hmr: !isProd
+                  }
+                },
+                {
+                  loader: 'css-loader'
+                }
+              ]
         },
         {
           test: /\.(png|jpe?g|webp|gif|svg)$/,
@@ -54,7 +68,7 @@ module.exports = (_env, argv) => {
             options: {
               limit: 1024,
               fallback: 'file-loader',
-              name: '[name].[contenthash].[ext]',
+              name: '[name].[fullhash].[ext]',
               outputPath: 'images/'
             }
           }
@@ -74,7 +88,15 @@ module.exports = (_env, argv) => {
       ]
     },
     resolve: {
-      extensions: ['.ts', '.tsx', '.js']
+      extensions: ['.ts', '.tsx', '.js'],
+      alias: isProd
+        ? {}
+        : {
+            '@patternfly/react-core$': path.resolve(__dirname, '../../../packages/react-core/src/index'),
+            '@patternfly/react-code-editor$': path.resolve(__dirname, '../../../packages/react-code-editor/src/index'),
+            '@patternfly/react-table$': path.resolve(__dirname, '../../../packages/react-table/src/index'),
+            '@patternfly/react-topology$': path.resolve(__dirname, '../../../packages/react-topology/src/index')
+          }
     },
     plugins: [
       new MiniCssExtractPlugin(
@@ -85,14 +107,38 @@ module.exports = (_env, argv) => {
               chunkFilename: '[name].[contenthash].css'
             }
       ),
+      useTsChecker &&
+        new ForkTsCheckerWebpackPlugin({
+          async: false,
+          typescript: {
+            configFile: isProd ? 'tsconfig.json' : 'tsconfig.dev.json'
+          },
+          eslint: {
+            enabled: !isProd,
+            files: [
+              './src/**/*.{ts,tsx}',
+              '../../../packages/react-core/src/**/*.{ts,tsx}',
+              '../../../packages/react-code-editor/src/**/*.{ts,tsx}',
+              '../../../packages/react-table/src/**/*.{ts,tsx}',
+              '../../../packages/react-topology/src/**/*.{ts,tsx}'
+            ],
+            options: {
+              ignorePath: '../../../.eslintignore'
+            }
+          },
+          issue: {
+            exclude: [{ origin: 'eslint', severity: 'warning' }]
+          }
+        }),
+      !isProd && new ReactRefreshWebpackPlugin(),
       new CleanWebpackPlugin(),
       new HtmlWebpackPlugin({
         template: path.resolve(__dirname, 'src/index.html')
       }),
       new CopyPlugin({
         patterns: [{ from: staticDir, to: '' }]
       })
-    ],
+    ].filter(Boolean),
     stats: 'minimal'
   };
 };
diff --git a/packages/react-table/src/components/Table/utils/decorators/headerCol.tsx b/packages/react-table/src/components/Table/utils/decorators/headerCol.tsx
@@ -6,7 +6,7 @@ export const headerCol = (id = 'simple-node') => {
     const result = typeof value === 'object' ? value.title : value;
     return {
       component: 'th',
-      children: <div id={`${id}${rowIndex}`}>{result}</div>
+      children: <div id={`${id}${rowIndex}`}>{result as React.ReactNode}</div>
     };
   };
 

diff --git a/packages/react-topology/src/behavior/useBendpoint.tsx b/packages/react-topology/src/behavior/useBendpoint.tsx
@@ -90,7 +90,7 @@ export const withBendpoint = <DropResult, CollectedProps, Props = {}>(
 ) => <P extends WithBendpointProps & CollectedProps & Props>(WrappedComponent: React.ComponentType<P>) => {
   const Component: React.FunctionComponent<Omit<P, keyof WithBendpointProps> & HocProps> = props => {
     const [dragProps, bendpointRef] = useBendpoint(props.point, spec as any, props);
-    return <WrappedComponent {...(props as any)} bendpointRef={bendpointRef} {...dragProps} />;
+    return <WrappedComponent {...(props as any)} bendpointRef={bendpointRef} {...(dragProps as object)} />;
   };
   Component.displayName = `withBendpoint(${WrappedComponent.displayName || WrappedComponent.name})`;
   return observer(Component);

diff --git a/packages/react-topology/src/components/popper/Popper.tsx b/packages/react-topology/src/components/popper/Popper.tsx
@@ -29,7 +29,10 @@ class VirtualReference implements PopperJSReference {
       left: x,
       right: x + width,
       top: y,
-      width
+      width,
+      x,
+      y,
+      toJSON: () => {}
     };
   }
 

diff --git a/packages/react-topology/src/pipelines/layouts/PipelineDagreLayout.ts b/packages/react-topology/src/pipelines/layouts/PipelineDagreLayout.ts
@@ -24,9 +24,9 @@ export class PipelineDagreLayout extends DagreLayout implements Layout {
     });
   }
   set nodesep(nodesep: number) {
-    super.dagreOptions.nodesep = nodesep;
+    this.dagreOptions.nodesep = nodesep;
   }
   set ranksep(ranksep: number) {
-    super.dagreOptions.ranksep = ranksep;
+    this.dagreOptions.ranksep = ranksep;
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,7 +29,10 @@ class VirtualReference implements PopperJSReference { @@
           left: x,
           right: x + width,
           top: y,
-          width
+          width,
+          x,
+          y,
+          toJSON: () => {}
         };
       }
@@ Expand Down @@