refactor(*): use babel-loader instead of awesome-typescript-loader for typescript

Author: bndynet

.babelrc

@@ -1,3 +1,12 @@
 {
-    "presets": ["@babel/preset-env", "@babel/preset-react"]
-}
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react",
+        "@babel/preset-typescript"
+    ],
+    "plugins": [
+        "@babel/plugin-transform-runtime",
+        "@babel/proposal-class-properties",
+        "@babel/proposal-object-rest-spread"
+    ]
+}

package-lock.json

@@ -55,9 +55,14 @@
   },
   "devDependencies": {
     "@babel/core": "^7.4.3",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.1",
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.12.1",
     "@bndynet/header-injection-webpack-plugin": "^4.0.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
     "@types/classnames": "^2.2.6",
     "@types/lodash-es": "^4.17.3",
     "@types/react": "^16.8.17",
@@ -70,7 +75,6 @@
     "@typescript-eslint/eslint-plugin": "^1.9.0",
     "@typescript-eslint/parser": "^1.9.0",
     "autoprefixer": "^9.5.0",
-    "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.4",
     "base-href-webpack-plugin": "^2.0.0",
     "clean-webpack-plugin": "^1.0.1",
@@ -91,6 +95,7 @@
     "postcss-loader": "^3.0.0",
     "prettier": "^1.17.1",
     "print-time-webpack": "^2.0.3",
+    "react-refresh": "^0.9.0",
     "redux-devtools-extension": "^2.13.8",
     "redux-logger": "^3.0.6",
     "sass-loader": "^7.0.1",

package.json

@@ -11,7 +11,7 @@ import {
     LinearProgress,
 } from '@material-ui/core';
 
-import { routes } from 'app/config';
+import { routes } from './routers/routes';
 import { themeConfig } from 'app/theme';
 import { Notifier, NotifierOptions, Overlay, Loading } from 'app/ui';
 import { actions as globalActions } from 'app/service/global';

src/App.tsx

@@ -1,6 +1,6 @@
-import { Config } from '.';
+import { Config } from './types';
 
-const config: Config = {
+export const config: Config = {
     title: 'admin.brand',
     logoUri: 'https://static.bndy.net/images/logo_white.svg',
     resourceBaseUri: APP_BASEHREF || '/',
@@ -19,5 +19,3 @@ const config: Config = {
         },
     ],
 };
-
-module.exports = config;

src/config/app.common.tsx

@@ -1,3 +1 @@
-import config = require('./app.mock');
-
-module.exports = config;
+export { config } from './app.mock';

src/config/app.dev.tsx

@@ -1,4 +1,4 @@
-import { Config, AuthType } from '.';
+import { Config, AuthType } from './types';
 
 const config: Config = {
     authType: AuthType.OAuth,

src/config/app.github.tsx

@@ -1,6 +1,6 @@
-import { Config, AuthType } from '.';
+import { Config, AuthType } from './types';
 
-const config: Config = {
+export const config: Config = {
     authType: AuthType.Mock,
     userConverter: (mockUser: any) => {
         return {
@@ -11,5 +11,3 @@ const config: Config = {
         };
     },
 };
-
-module.exports = config;

src/config/app.mock.tsx

@@ -1,6 +1,6 @@
-import { Config, AuthType } from '.';
+import { Config, AuthType } from './types';
 
-const config: Config = {
+export const config: Config = {
     authType: AuthType.OAuth,
     authConfig: {
         clientId: 'foo',
@@ -26,5 +26,3 @@ const config: Config = {
         };
     },
 };
-
-module.exports = config;

src/config/app.oauth-code.tsx

@@ -1,6 +1,6 @@
-import { Config, AuthType } from '.';
+import { Config, AuthType } from './types';
 
-const config: Config = {
+export const config: Config = {
     authType: AuthType.OAuthPassword,
     authConfig: {
         clientId: 'foo',
@@ -19,5 +19,3 @@ const config: Config = {
         };
     },
 };
-
-module.exports = config;

src/config/app.oauth-password.tsx

@@ -1,9 +1,10 @@
-import config = require('./app.mock');
-module.exports = config;
+export { config } from './app.mock';
 
 // import _merge from 'lodash-es/merge';
-// import config = require('./app.oauth-code');
-// module.exports = _merge(config, {
+// import { Config } from './types';
+// import { config as oauthCodeConfig } from './app.oauth-code';
+
+// export const config: Config = _merge(oauthCodeConfig, {
 //     authConfig: {
 //         clientId: '188c0da703',
 //         clientSecret: 'f3dd317369ae622113f0',

src/config/app.prod.tsx

@@ -1,70 +1,43 @@
 import _merge from 'lodash-es/merge';
-import { UserInfo, AuthState } from 'app/service/auth';
+import { Config } from './types';
+import { config as commonConfig } from './app.common';
+import { config as prodConfig } from './app.prod';
+import { config as mockConfig } from './app.mock';
 
 // Uncomment or define it in index.html to specify your environment.
 // window.__APP_ENV__ = 'github';
 
-export enum AuthType {
-    OAuth, // alias for OAuthCode
-    OAuthCode,
-    OAuthPassword,
-    Custom,
-    Mock,
-}
-
-export interface Config {
-    title?: string;
-    logoUri?: string;
-    resourceBaseUri?: string;
-    defaultLocale?: string;
-    locales?: { name: string; value: string; messages?: any }[];
-    authType?: AuthType;
-    authConfig?: OAuthConfig;
-    userConverter?: (backendUser: any) => UserInfo;
-    logoutHandler?: (url: string, authState: AuthState) => void;
-}
-
-export interface OAuthConfig {
-    clientId: string;
-    clientSecret: string;
-    authorizationUri: string;
-    accessTokenUri?: string;
-    userProfileUri: string;
-    logoutUri: string;
-    callbackUri?: string;
-    scope?: string;
-}
+let config: Config;
+export function getConfig(): Config {
+    if (config) {
+        return config;
+    }
 
-const getConfig = (): Config => {
     const env = window.__APP_ENV__ || process.env.NODE_ENV;
 
     // eslint-disable-next-line no-console
     console.info(`Application is running in '${env}' mode.`);
 
     switch (env) {
         case 'production':
-            return (window.__APP_CONF__ = _merge(
-                require('./app.common'),
-                require('./app.dev'),
-                require('./app.prod'),
-            ));
+            config = window.__APP_CONF__ = _merge(commonConfig, prodConfig);
+            break;
 
         case 'development':
-            return (window.__APP_CONF__ = _merge(
-                require('./app.common'),
-                require('./app.dev'),
-            ));
+            config = window.__APP_CONF__ = _merge(commonConfig, mockConfig);
+            break;
 
         default:
-            return (window.__APP_CONF__ = _merge(
+            config = window.__APP_CONF__ = _merge(
                 require('./app.common'),
                 require(`./app.${env}`),
-            ));
+            );
+            break;
     }
-};
+    return config;
+}
 
-export const config = getConfig();
-export { default as routes } from './routes';
+export * from './types';
 export { default as adminRoutes } from './routes.admin';
 export { default as adminMenus } from './menus.admin';
 export { default as userMenus } from './menus.user';

src/config/index.tsx

@@ -0,0 +1,32 @@
+import { UserInfo, AuthState } from 'app/service/auth';
+
+export enum AuthType {
+    OAuth = 'oauth', // alias for OAuthCode
+    OAuthCode = 'oauthCode',
+    OAuthPassword = 'oauthPassword',
+    Custom = 'custom',
+    Mock = 'mock',
+}
+
+export interface Config {
+    title?: string;
+    logoUri?: string;
+    resourceBaseUri?: string;
+    defaultLocale?: string;
+    locales?: { name: string; value: string; messages?: any }[];
+    authType?: AuthType;
+    authConfig?: OAuthConfig;
+    userConverter?: (backendUser: any) => UserInfo;
+    logoutHandler?: (url: string, authState: AuthState) => void;
+}
+
+export interface OAuthConfig {
+    clientId: string;
+    clientSecret: string;
+    authorizationUri: string;
+    accessTokenUri?: string;
+    userProfileUri: string;
+    logoutUri: string;
+    callbackUri?: string;
+    scope?: string;
+}

src/config/types.ts

@@ -29,7 +29,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
 
 import { HorizontalMenu, SlidePanel } from 'app/ui';
 import { themeConfig } from 'app/theme';
-import { config, adminMenus } from 'app/config';
+import { getConfig, adminMenus } from 'app/config';
 import { actions as globalActions } from 'app/service/global';
 import { onAppThemeChanged } from '../../../app.events';
 import SidePanelContent from './SidePanelContent';
@@ -141,6 +141,7 @@ class Header extends React.PureComponent<HeaderProps, HeaderState> {
     }
 
     public render() {
+        const config = getConfig();
         const { classes, isDarkTheme, hideBrand } = this.props;
         const { avatarPopupAnchor } = this.state;
         const user = this.props.user || {};

src/pages/admin/core/Header.tsx

@@ -22,7 +22,7 @@ import {
     AppTheme,
     isPopular,
 } from 'app/theme';
-import { config, adminMenus, userMenus } from 'app/config';
+import { getConfig, adminMenus, userMenus } from 'app/config';
 import { UserInfo } from 'app/service/auth';
 import { MenuItem } from 'app/types/MenuItem';
 
@@ -141,6 +141,7 @@ class Sidebar extends React.PureComponent<SidebarProps> {
     }
 
     public render() {
+        const config = getConfig();
         const { classes, open } = this.props;
         const theme = getCurrentTheme();
         const isPopularTheme = isPopular();

src/pages/admin/core/Sidebar.tsx

@@ -21,7 +21,7 @@ import { service as resourceService } from 'app/service/resource';
 import { actions as authActions, getState } from 'app/service/auth';
 import { actions as globalActions } from 'app/service/global';
 
-import { config } from 'app/config';
+import { getConfig } from 'app/config';
 import { setLocale } from 'app/service/locales';
 
 const styles = (theme: Theme) =>
@@ -95,6 +95,7 @@ class Home extends React.Component<HomeComponentProps, HomeComponentState> {
     }
 
     public render() {
+        const config = getConfig();
         const { classes } = this.props;
         const btn = this.props.user ? (
             <Tooltip title={this.props.user.name}>

src/pages/public/Home.tsx

@@ -6,7 +6,7 @@ import { Admin } from 'app/pages/admin';
 import { Login, Logout, Callback } from 'app/pages/auth';
 import { RouteConfig } from 'react-router-config';
 
-const routes: RouteConfig[] = [
+export const routes: RouteConfig[] = [
     {
         path: '/',
         exact: true,
@@ -33,6 +33,7 @@ const routes: RouteConfig[] = [
                 return <Admin />;
             } else {
                 if (
+                    getAuthUri() &&
                     !getAuthUri()
                         .toLowerCase()
                         .startsWith('http')
@@ -48,5 +49,3 @@ const routes: RouteConfig[] = [
         component: NotFound,
     },
 ];
-
-export default routes;

src/config/routes.tsx renamed to src/routers/routes.tsx

@@ -2,7 +2,7 @@
 import { AxiosPromise } from 'axios';
 import { Ajax, AjaxError } from '../helpers/ajax';
 import { store } from '../redux';
-import { config, AuthType } from '../config';
+import { getConfig, AuthType } from '../config';
 import { push } from 'connected-react-router';
 import { call, put, takeLatest } from 'redux-saga/effects';
 import { actions as globalActions } from './global';
@@ -120,6 +120,8 @@ export function reducer(state: AuthState = {}, action): AuthState {
     }
 }
 
+const config = getConfig();
+
 export const service = {
     login: (data: LoginData) => {
         switch (config.authType) {

src/service/auth.tsx

@@ -1,9 +1,10 @@
 import * as intl from 'react-intl-universal';
-import { config } from 'app/config';
+import { getConfig } from 'app/config';
 import storage from 'app/helpers/storage';
 import ajax from 'app/helpers/ajax';
 import { onAppLocaleChanged } from '../app.events';
 
+const config = getConfig();
 const KEY_LOCALE = 'locale';
 function getCurrentLocale() {
     return (

src/service/locales.tsx

@@ -1,10 +1,12 @@
 import { notify } from '@bndynet/dialog';
-import { config } from '../config';
+import { getConfig } from '../config';
 import { Ajax } from '../helpers/ajax';
 import { getState } from './auth';
 
 class ResourceService extends Ajax {
     public constructor() {
+        const config = getConfig();
+        console.debug(config);
         super({
             headerAuthorization: () => {
                 if (getState().token) {