Fix(at-loader): fix at-loader not respecting 'exclude' property in tsconfig.json issue

Author: Armour

frontend/src/pages/HomePage/components/ContentLoader/__tests__/contentLoader.spec.tsx

@@ -6,8 +6,15 @@ import ContentLoader from '../contentLoader';
 describe('ContentLoader', () => {
   it('should renders correctly', () => {
     const renderer = ShallowRenderer.createRenderer();
+    const props = {
+      isLoading: false,
+      pastDelay: false,
+      timedOut: false,
+      error: null,
+      retry: () => { return; },
+    };
     const result = renderer.render(
-      <ContentLoader />,
+      <ContentLoader {...props} />,
     );
     expect(result).toMatchSnapshot();
     renderer.unmount();

frontend/src/pages/HomePage/components/ContentLoader/contentLoader.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import ContentLoader, { ContentLoaderProps } from 'react-content-loader';
+import ContentLoader from 'react-content-loader';
+import { LoadingComponentProps } from 'react-loadable';
 
 const styles = require('./contentLoader.scss');
 
-export default (props: ContentLoaderProps) => (
+export default (_: LoadingComponentProps) => (
   <div className={styles.contentLoader}>
     <ContentLoader
       height={400}
       width={400}
       speed={2}
       primaryColor='#f3f3f3'
       secondaryColor='#ecebeb'
-      {...props}
     >
       <rect x='160.5' y='11' rx='4' ry='4' width='76.63000000000001' height='15.093' />
       <rect x='60.5' y='35.05' rx='1' ry='1' width='275.40000000000003' height='151.35999999999999' />

frontend/src/pages/NotFoundPage/components/ContentLoader/__tests__/contentLoader.spec.tsx

@@ -6,8 +6,15 @@ import ContentLoader from '../contentLoader';
 describe('ContentLoader', () => {
   it('should renders correctly', () => {
     const renderer = ShallowRenderer.createRenderer();
+    const props = {
+      isLoading: false,
+      pastDelay: false,
+      timedOut: false,
+      error: null,
+      retry: () => { return; },
+    };
     const result = renderer.render(
-      <ContentLoader />,
+      <ContentLoader {...props} />,
     );
     expect(result).toMatchSnapshot();
     renderer.unmount();

frontend/src/pages/NotFoundPage/components/ContentLoader/contentLoader.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import ContentLoader, { ContentLoaderProps } from 'react-content-loader';
+import ContentLoader from 'react-content-loader';
+import { LoadingComponentProps } from 'react-loadable';
 
 const styles = require('./contentLoader.scss');
 
-export default (props: ContentLoaderProps) => (
+export default (_: LoadingComponentProps) => (
   <div className={styles.contentLoader}>
     <ContentLoader
       height={326}
       width={400}
       speed={2}
       primaryColor='#f3f3f3'
       secondaryColor='#ecebeb'
-      {...props}
     >
       <rect x='93' y='24' rx='4' ry='4' width='210' height='30.68' />
       <rect x='36' y='92.05' rx='4' ry='4' width='330.24' height='193.63' />

frontend/src/pages/ParallaxPage/components/ContentLoader/__tests__/contentLoader.spec.tsx

@@ -6,8 +6,15 @@ import ContentLoader from '../contentLoader';
 describe('ContentLoader', () => {
   it('should renders correctly', () => {
     const renderer = ShallowRenderer.createRenderer();
+    const props = {
+      isLoading: false,
+      pastDelay: false,
+      timedOut: false,
+      error: null,
+      retry: () => { return; },
+    };
     const result = renderer.render(
-      <ContentLoader />,
+      <ContentLoader {...props} />,
     );
     expect(result).toMatchSnapshot();
     renderer.unmount();

frontend/src/pages/ParallaxPage/components/ContentLoader/contentLoader.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import ContentLoader, { ContentLoaderProps } from 'react-content-loader';
+import ContentLoader from 'react-content-loader';
+import { LoadingComponentProps } from 'react-loadable';
 
 const styles = require('./contentLoader.scss');
 
-export default (props: ContentLoaderProps) => (
+export default (_: LoadingComponentProps) => (
   <div className={styles.contentLoader}>
     <ContentLoader
       height={500}
       width={400}
       speed={2}
       primaryColor='#f3f3f3'
       secondaryColor='#ecebeb'
-      {...props}
     >
       <rect x='160' y='12' rx='4' ry='4' width='80' height='15.6468' />
       <rect x='0' y='41.05' rx='4' ry='4' width='399.5904' height='112.7321' />

frontend/src/pages/ReactPage/components/ContentLoader/__tests__/contentLoader.spec.tsx

@@ -6,8 +6,15 @@ import ContentLoader from '../contentLoader';
 describe('ContentLoader', () => {
   it('should renders correctly', () => {
     const renderer = ShallowRenderer.createRenderer();
+    const props = {
+      isLoading: false,
+      pastDelay: false,
+      timedOut: false,
+      error: null,
+      retry: () => { return; },
+    };
     const result = renderer.render(
-      <ContentLoader />,
+      <ContentLoader {...props} />,
     );
     expect(result).toMatchSnapshot();
     renderer.unmount();

frontend/src/pages/ReactPage/components/ContentLoader/contentLoader.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import ContentLoader, { ContentLoaderProps } from 'react-content-loader';
+import ContentLoader from 'react-content-loader';
+import { LoadingComponentProps } from 'react-loadable';
 
 const styles = require('./contentLoader.scss');
 
-export default (props: ContentLoaderProps) => (
+export default (_: LoadingComponentProps) => (
   <div className={styles.contentLoader}>
     <ContentLoader
       height={400}
       width={400}
       speed={2}
       primaryColor='#f3f3f3'
       secondaryColor='#ecebeb'
-      {...props}
     >
       <rect x='93' y='24' rx='4' ry='4' width='210' height='30.68' />
       <rect x='0' y='76.05' rx='4' ry='4' width='400' height='304' />

tsconfig.json

@@ -8,7 +8,7 @@
     "lib": [
       "dom",
       "dom.iterable",
-      "es2015"
+      "es6"
     ],
     "jsx": "react",
     "allowSyntheticDefaultImports": true,

webpack.config.base.babel.js

@@ -36,14 +36,19 @@ export default {
         test: /\.tsx?$/,
         use: [
           { loader: 'babel-loader' },
-          // Use those two flags to speed up babel compilation
-          // https://github.com/s-panferov/awesome-typescript-loader#differences-between-ts-loader
           {
             loader: 'awesome-typescript-loader',
             options: {
+              silent: true,
+              // Use those two flags to speed up babel compilation
+              // https://github.com/s-panferov/awesome-typescript-loader#differences-between-ts-loader
               useBabel: true,
               useCache: true,
-              silent: true,
+              // Workaround for at-loader not respecting "exclude" property
+              // https://github.com/s-panferov/awesome-typescript-loader/issues/492
+              reportFiles: [
+                'frontend/src/**/*.{ts,tsx}',
+              ],
             },
           },
           // Alternatively, we can use ts-loader