Switch back to ts-loader

CHANGELOG.md

@@ -42,3 +42,4 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fixed hard-coded site name in order PDFs - #3526 by @NyanKiyoshi
 - Extract enums to separate files - #3523 by @maarcingebala
 - Add default variant create to Product mutations - #3505 by @fowczarek
+- Change TypeScript loader to speed up the build process - #3545 by @patrys

package.json

@@ -99,7 +99,6 @@
     "@types/react-router-dom": "^4.2.6",
     "@types/react-test-renderer": "^16.0.3",
     "autoprefixer": "^8.2.0",
-    "awesome-typescript-loader": "^5.2.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
@@ -119,6 +118,7 @@
     "eslint-plugin-react": "^7.7.0",
     "eslint-plugin-standard": "^3.0.1",
     "file-loader": "^1.1.11",
+    "fork-ts-checker-webpack-plugin": "^0.5.2",
     "jest": "^23.6.0",
     "jest-file": "^1.0.0",
     "mini-css-extract-plugin": "^0.4.0",
@@ -130,6 +130,7 @@
     "regenerator-runtime": "^0.11.1",
     "sass-loader": "^7.1.0",
     "ts-jest": "^23.1.4",
+    "ts-loader": "^5.3.2",
     "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.15.0",
     "webpack": "^4.27.0",

saleor/static/dashboard-next/storybook/__snapshots__/Stories.test.ts.snap

@@ -6080,6 +6080,8 @@ exports[`Storyshots Product types / Edit attribute form errors 1`] = `<div />`;
 
 exports[`Storyshots Product types / Edit attribute loading 1`] = `<div />`;
 
+exports[`Storyshots Products / ProductVariantImageSelectDialog default 1`] = `null`;
+
 exports[`Storyshots SiteSettings / Add key dialog default 1`] = `<div />`;
 
 exports[`Storyshots SiteSettings / Add key dialog form errors 1`] = `<div />`;

saleor/static/dashboard-next/storybook/config.js

@@ -72,6 +72,7 @@ function loadStories() {
   require("./stories/products/ProductListCard");
   require("./stories/products/ProductUpdatePage");
   require("./stories/products/ProductVariantCreatePage");
+  require("./stories/products/ProductVariantImageSelectDialog");
   require("./stories/products/ProductVariantPage");
 
   // Orders

saleor/static/dashboard-next/storybook/stories/products/ProductVariantImageSelectDialog.tsx

@@ -16,7 +16,9 @@ storiesOf("Products / ProductVariantImageSelectDialog", module).add(
   () => (
     <ProductVariantImageSelectDialog
       images={variantProductImages}
-      selectedImages={variantImages}
+      selectedImages={variantImages.map(image => image.id)}
+      onClose={() => undefined}
+      onImageSelect={() => undefined}
       open={true}
     />
   )

saleor/static/dashboard-next/storybook/webpack.config.js

@@ -1,18 +1,19 @@
 /* eslint-disable */
-const { CheckerPlugin } = require("awesome-typescript-loader")
+const CheckerPlugin = require('fork-ts-checker-webpack-plugin');
 
 module.exports = (baseConfig, env, config) => {
   config.module.rules.push({
     test: /\.tsx?$/,
     exclude: /node_modules/,
-    loader: "awesome-typescript-loader",
+    loader: "ts-loader",
     options: {
-      reportFiles: [
-        "saleor/**/*.{ts,tsx}"
-      ],
-      useCache: true
+      experimentalWatchApi: true,
+      transpileOnly: true
     }
   });
+  config.optimization.removeAvailableModules = false;
+  config.optimization.removeEmptyChunks = false;
+  config.optimization.splitChunks = false;
   config.resolve.extensions.push(".ts", ".tsx");
   config.plugins.push(new CheckerPlugin());
   return config;

tsconfig.json

@@ -6,6 +6,5 @@
     "target": "es5",
     "noUnusedLocals": true,
     "noUnusedParameters": true
-  },
-  "include": ["webpack.d.ts"]
+  }
 }

webpack.config.js

@@ -1,5 +1,5 @@
 const autoprefixer = require('autoprefixer');
-const { CheckerPlugin } = require('awesome-typescript-loader');
+const CheckerPlugin = require('fork-ts-checker-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 const url = require('url');
@@ -20,7 +20,10 @@ const providePlugin = new webpack.ProvidePlugin({
   'query-string': 'query-string'
 });
 
-const checkerPlugin = new CheckerPlugin();
+const checkerPlugin = new CheckerPlugin({
+  reportFiles: ['saleor/**/*.{ts,tsx}'],
+  tslint: true
+});
 
 module.exports = (env, argv) => {
   const devMode = argv.mode !== 'production';
@@ -102,12 +105,10 @@ module.exports = (env, argv) => {
         {
           test: /\.tsx?$/,
           exclude: /node_modules/,
-          loader: 'awesome-typescript-loader',
+          loader: 'ts-loader',
           options: {
-            reportFiles: [
-              'saleor/**/*.{ts,tsx}'
-            ],
-            useCache: true
+            experimentalWatchApi: true,
+            transpileOnly: true
           }
         },
         {
@@ -122,6 +123,11 @@ module.exports = (env, argv) => {
         }
       ]
     },
+    optimization: {
+      removeAvailableModules: false,
+      removeEmptyChunks: false,
+      splitChunks: false
+    },
     plugins: [
       bundleTrackerPlugin,
       extractCssPlugin,