chore: Enable Typescript for Production builds

Currently, we're using [ts-loader](https://github.com/TypeStrong/ts-loader)
to load and parse Typescript modules only, without doing
typechecks.

This commmit enables Typescript for Production builds
while keeping the existing config for Dev builds.

The latter it's likely to change in the future in favor of
[fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin)

relates: [1725](#1725)

.storybook/main.ts

@@ -45,28 +45,18 @@ module.exports = {
       }
     });
 
-    /**
-     * The first rule from the array it's the typescript one,
-     * it would be better to have a more deterministic way to ensure it*/
-    const [existingTypescriptConfig, ...rest] = updatedConfig.module.rules;
-
-    updatedConfig.module.rules = [
-      {
-        test: /\.(tsx|ts|jsx)?$/,
-        use: [
-          {
-            loader: 'ts-loader',
-            options: {
-              transpileOnly: true,
-              experimentalWatchApi: true,
-            },
+    updatedConfig.module.rules.unshift({
+      test: /\.(tsx|ts|jsx)?$/,
+      use: [
+        {
+          loader: 'ts-loader',
+          options: {
+            transpileOnly: true,
+            experimentalWatchApi: true,
           },
-        ],
-      },
-      ...rest,
-    ];
-
-    console.log(JSON.stringify(updatedConfig.module.rules, null, 4));
+        },
+      ],
+    });
 
     return updatedConfig;
   },

src/components/Visualization.stories.tsx

@@ -15,8 +15,8 @@ export default {
   argTypes: { toggleCatalog: { action: 'toggled' } },
 } as ComponentMeta<typeof Visualization>;
 
-const Template: ComponentStory<typeof Visualization> = (args) => {
-  return <Visualization {...args} />;
+const Template: ComponentStory<typeof Visualization> = () => {
+  return <Visualization />;
 };
 
 export const EmptyState = Template.bind({});

webpack.common.js

@@ -15,23 +15,13 @@ const isPatternflyStyles = (stylesheet) =>
   stylesheet.includes('@patternfly/react-code-editor') ||
   stylesheet.includes('monaco-editor-webpack-plugin');
 
-module.exports = () => {
+const common = (mode) => {
   return {
+    mode,
     entry: path.resolve(__dirname, 'src', 'index.tsx'),
     module: {
       rules: [
-        {
-          test: /\.(tsx|ts|jsx)?$/,
-          use: [
-            {
-              loader: 'ts-loader',
-              options: {
-                transpileOnly: true,
-                experimentalWatchApi: true,
-              },
-            },
-          ],
-        },
+
         {
           test: /\.css|s[ac]ss$/i,
           use: [MiniCssExtractPlugin.loader, 'css-loader'],
@@ -128,3 +118,5 @@ module.exports = () => {
     },
   };
 };
+
+module.exports = { common };

webpack.dev.js

@@ -1,9 +1,8 @@
 const { merge } = require('webpack-merge');
-const common = require('./webpack.common.js');
+const { common } = require('./webpack.common.js');
 const webpack = require('webpack');
 
 module.exports = merge(common('development'), {
-  mode: 'development',
   devtool: 'inline-source-map',
   devServer: {
     allowedHosts: 'all',
@@ -28,4 +27,20 @@ module.exports = merge(common('development'), {
     }),
   ],
   stats: 'errors-warnings',
+  module: {
+    rules: [
+      {
+        test: /\.(tsx|ts|jsx)?$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              experimentalWatchApi: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
 });

webpack.prod.js

@@ -1,11 +1,9 @@
-/* eslint-disable */
 const { merge } = require('webpack-merge');
-const common = require('./webpack.common.js');
+const { common } = require('./webpack.common.js');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const webpack = require('webpack');
 
-module.exports = merge(common('production', { mode: 'production' }), {
-  mode: 'production',
+module.exports = merge(common('production'), {
   devtool: 'source-map',
   optimization: {
     minimizer: [
@@ -22,5 +20,17 @@ module.exports = merge(common('production', { mode: 'production' }), {
     new webpack.DefinePlugin({
       KAOTO_API: JSON.stringify(process.env.KAOTO_API || '/api'),
     }),
-  ]
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(tsx|ts|jsx)?$/,
+        use: [
+          {
+            loader: 'ts-loader',
+          },
+        ],
+      },
+    ],
+  },
 });