From 890fee03a45ba6c116ffd761c614194dafbbaf3b Mon Sep 17 00:00:00 2001 From: Welly Shen Date: Wed, 1 Apr 2020 15:36:18 +0800 Subject: [PATCH] refactor: adjust code format based on eslint --- index.ts | 2 +- postcss.config.js | 4 +- src/actions/user.ts | 2 +- src/actions/users.ts | 2 +- src/app/__tests__/App.test.tsx | 8 +-- src/config/default.ts | 8 +-- src/pages/Home/Home.tsx | 4 +- src/pages/Home/index.js | 4 +- src/pages/UserInfo/UserInfo.tsx | 2 +- src/pages/UserInfo/index.js | 4 +- src/reducers/__tests__/home.test.ts | 12 ++--- src/reducers/__tests__/userInfo.test.ts | 16 +++--- src/reducers/home.ts | 10 ++-- src/reducers/index.ts | 2 +- src/reducers/userInfo.ts | 14 ++--- src/routes.tsx | 16 +++--- src/server.tsx | 2 +- src/utils/configureStore.ts | 4 +- src/utils/renderHtml.ts | 2 +- tools/webpack/config.babel.js | 71 +++++++++++++------------ tools/webpack/hooks.js | 6 +-- 21 files changed, 98 insertions(+), 97 deletions(-) diff --git a/index.ts b/index.ts index c95872c4..fc19ff44 100755 --- a/index.ts +++ b/index.ts @@ -1,6 +1,6 @@ // Allows you to precompile ES6 syntax require('@babel/register')({ - plugins: ['dynamic-import-node'] + plugins: ['dynamic-import-node'], }); // Setup global variables for server-side diff --git a/postcss.config.js b/postcss.config.js index 16af91f9..2199cd59 100755 --- a/postcss.config.js +++ b/postcss.config.js @@ -3,6 +3,6 @@ module.exports = { plugins: [ // Add "-ms-" prefixes for Grid Layout - require('autoprefixer')({ grid: true }) - ] + require('autoprefixer')({ grid: true }), + ], }; diff --git a/src/actions/user.ts b/src/actions/user.ts index 855a7819..db42e4ca 100755 --- a/src/actions/user.ts +++ b/src/actions/user.ts @@ -7,7 +7,7 @@ import { AppState, USER_REQUESTING, USER_SUCCESS, - USER_FAILURE + USER_FAILURE, } from '../types'; const API_URL = 'https://jsonplaceholder.typicode.com/users'; diff --git a/src/actions/users.ts b/src/actions/users.ts index 24c9d3bd..e3a6f9fb 100755 --- a/src/actions/users.ts +++ b/src/actions/users.ts @@ -7,7 +7,7 @@ import { AppState, USERS_REQUESTING, USERS_SUCCESS, - USERS_FAILURE + USERS_FAILURE, } from '../types'; const API_URL = 'https://jsonplaceholder.typicode.com/users'; diff --git a/src/app/__tests__/App.test.tsx b/src/app/__tests__/App.test.tsx index 495c2acf..4d27ece4 100755 --- a/src/app/__tests__/App.test.tsx +++ b/src/app/__tests__/App.test.tsx @@ -11,7 +11,7 @@ describe('', () => { default: (): void => null, subscribe: (): void => null, dispatch: (): void => null, - getState: () => ({ home: (): void => null }) + getState: () => ({ home: (): void => null }), }; const fakeRoute = { routes: [ @@ -22,9 +22,9 @@ describe('', () => {

Welcome Home!

- ) - } - ] + ), + }, + ], }; const tree = renderer diff --git a/src/config/default.ts b/src/config/default.ts index f4293fee..fc887160 100755 --- a/src/config/default.ts +++ b/src/config/default.ts @@ -8,8 +8,8 @@ export default { meta: [ { name: 'description', - content: 'The best react universal starter boilerplate in the world.' - } - ] - } + content: 'The best react universal starter boilerplate in the world.', + }, + ], + }, }; diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 8908dd02..40282c99 100755 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -35,11 +35,11 @@ export const Home = ({ readyStatus, list, fetchUsersIfNeeded }: Props) => { const mapStateToProps = ({ home: { readyStatus, list } }: AppState) => ({ readyStatus, - list + list, }); const mapDispatchToProps = (dispatch: ThunkDispatch) => ({ - fetchUsersIfNeeded: () => dispatch(usersAction.fetchUsersIfNeeded()) + fetchUsersIfNeeded: () => dispatch(usersAction.fetchUsersIfNeeded()), }); export default connect(mapStateToProps, mapDispatchToProps)(memo(Home)); diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js index b09fb80a..77aa4838 100755 --- a/src/pages/Home/index.js +++ b/src/pages/Home/index.js @@ -9,10 +9,10 @@ import loadable from '@loadable/component'; import { Loading, ErrorBoundary } from '../../components'; const Home = loadable(() => import('./Home'), { - fallback: + fallback: , }); -export default props => ( +export default (props) => ( diff --git a/src/pages/UserInfo/UserInfo.tsx b/src/pages/UserInfo/UserInfo.tsx index b474c6e2..a8ad0a3a 100755 --- a/src/pages/UserInfo/UserInfo.tsx +++ b/src/pages/UserInfo/UserInfo.tsx @@ -46,7 +46,7 @@ export const UserInfo = ({ match, userInfo, fetchUserIfNeeded }: Props) => { const mapStateToProps = ({ userInfo }: AppState) => ({ userInfo }); const mapDispatchToProps = (dispatch: ThunkDispatch) => ({ - fetchUserIfNeeded: (id: string) => dispatch(userAction.fetchUserIfNeeded(id)) + fetchUserIfNeeded: (id: string) => dispatch(userAction.fetchUserIfNeeded(id)), }); export default connect(mapStateToProps, mapDispatchToProps)(memo(UserInfo)); diff --git a/src/pages/UserInfo/index.js b/src/pages/UserInfo/index.js index c4ef29ab..6908934b 100755 --- a/src/pages/UserInfo/index.js +++ b/src/pages/UserInfo/index.js @@ -9,10 +9,10 @@ import loadable from '@loadable/component'; import { Loading, ErrorBoundary } from '../../components'; const UserInfo = loadable(() => import('./UserInfo'), { - fallback: + fallback: , }); -export default props => ( +export default (props) => ( diff --git a/src/reducers/__tests__/home.test.ts b/src/reducers/__tests__/home.test.ts index 6ca24f81..2d2d4d92 100755 --- a/src/reducers/__tests__/home.test.ts +++ b/src/reducers/__tests__/home.test.ts @@ -12,12 +12,12 @@ describe('users data home', () => { home(undefined, { type: USERS_REQUESTING, err: null, - data: [] + data: [], }) ).toEqual({ readyStatus: 'request', err: null, - list: [] + list: [], }); }); @@ -26,12 +26,12 @@ describe('users data home', () => { expect( home(undefined, { type: USERS_FAILURE, - err + err, }) ).toEqual({ ...initialState, readyStatus: 'failure', - err + err, }); }); @@ -41,12 +41,12 @@ describe('users data home', () => { home(undefined, { type: USERS_SUCCESS, err: null, - data + data, }) ).toEqual({ ...initialState, readyStatus: 'success', - list: data + list: data, }); }); }); diff --git a/src/reducers/__tests__/userInfo.test.ts b/src/reducers/__tests__/userInfo.test.ts index 70c1c577..c66f5f08 100755 --- a/src/reducers/__tests__/userInfo.test.ts +++ b/src/reducers/__tests__/userInfo.test.ts @@ -11,7 +11,7 @@ describe('user data userInfo', () => { expect( userInfo(undefined, { type: USER_REQUESTING, - userId: '1' + userId: '1', }) ).toEqual({ 1: { readyStatus: 'request' } }); }); @@ -22,13 +22,13 @@ describe('user data userInfo', () => { userInfo(undefined, { type: USER_FAILURE, userId: '1', - err + err, }) ).toEqual({ 1: { readyStatus: 'failure', - err - } + err, + }, }); }); @@ -37,19 +37,19 @@ describe('user data userInfo', () => { name: 'Welly', phone: '007', email: 'test@gmail.com', - website: 'www.test.com' + website: 'www.test.com', }; expect( userInfo(undefined, { type: USER_SUCCESS, userId: '1', - data + data, }) ).toEqual({ 1: { readyStatus: 'success', - info: data - } + info: data, + }, }); }); }); diff --git a/src/reducers/home.ts b/src/reducers/home.ts index 21dfd8b2..10b9e54e 100755 --- a/src/reducers/home.ts +++ b/src/reducers/home.ts @@ -3,14 +3,14 @@ import { UsersAction, USERS_REQUESTING, USERS_SUCCESS, - USERS_FAILURE + USERS_FAILURE, } from '../types'; // Export for unit testing export const initialState: HomeState = { readyStatus: 'invalid', err: null, - list: [] + list: [], }; export default (state = initialState, action: UsersAction) => { @@ -18,19 +18,19 @@ export default (state = initialState, action: UsersAction) => { case USERS_REQUESTING: return { ...state, - readyStatus: 'request' + readyStatus: 'request', }; case USERS_SUCCESS: return { ...state, readyStatus: 'success', - list: action.data + list: action.data, }; case USERS_FAILURE: return { ...state, readyStatus: 'failure', - err: action.err + err: action.err, }; default: return state; diff --git a/src/reducers/index.ts b/src/reducers/index.ts index f1f06060..e7055d3e 100755 --- a/src/reducers/index.ts +++ b/src/reducers/index.ts @@ -10,5 +10,5 @@ export default (history: History) => // Register reducers here home, userInfo, - router: connectRouter(history) + router: connectRouter(history), }); diff --git a/src/reducers/userInfo.ts b/src/reducers/userInfo.ts index 70e4caa0..0010137e 100755 --- a/src/reducers/userInfo.ts +++ b/src/reducers/userInfo.ts @@ -3,7 +3,7 @@ import { UserAction, USER_REQUESTING, USER_SUCCESS, - USER_FAILURE + USER_FAILURE, } from '../types'; export default (state: UserInfoState = {}, action: UserAction) => { @@ -12,24 +12,24 @@ export default (state: UserInfoState = {}, action: UserAction) => { return { ...state, [action.userId]: { - readyStatus: 'request' - } + readyStatus: 'request', + }, }; case USER_SUCCESS: return { ...state, [action.userId]: { readyStatus: 'success', - info: action.data - } + info: action.data, + }, }; case USER_FAILURE: return { ...state, [action.userId]: { readyStatus: 'failure', - err: action.err - } + err: action.err, + }, }; default: return state; diff --git a/src/routes.tsx b/src/routes.tsx index cd8ddb4b..1cc42057 100755 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -11,20 +11,20 @@ export default [ exact: true, component: asyncHome, // Add your route here loadData: () => [ - usersAction.fetchUsersIfNeeded() + usersAction.fetchUsersIfNeeded(), // Add other pre-fetched actions here - ] + ], }, { path: '/UserInfo/:id', component: asyncUserInfo, loadData: ({ params }: { params: { id: string } }) => [ - userAction.fetchUserIfNeeded(params.id) - ] + userAction.fetchUserIfNeeded(params.id), + ], }, { - component: NotFound - } - ] - } + component: NotFound, + }, + ], + }, ]; diff --git a/src/server.tsx b/src/server.tsx index 6b02551d..7ed32929 100755 --- a/src/server.tsx +++ b/src/server.tsx @@ -137,6 +137,6 @@ app.get('*', (req, res) => { }); // @ts-ignore -app.listen(config.port, config.host, err => { +app.listen(config.port, config.host, (err) => { if (err) console.error(chalk.red(`==> 😭 OMG!!! ${err}`)); }); diff --git a/src/utils/configureStore.ts b/src/utils/configureStore.ts index 1dc9c11f..71fe741d 100755 --- a/src/utils/configureStore.ts +++ b/src/utils/configureStore.ts @@ -15,12 +15,12 @@ export default ({ initialState, url }: Argv) => { // Create a history depending on the environment const history = isServer ? createMemoryHistory({ - initialEntries: [url || '/'] + initialEntries: [url || '/'], }) : createBrowserHistory(); const middlewares = [ routerMiddleware(history), - thunk + thunk, // Add other middlewares here ]; // Use Redux DevTools Extension in development diff --git a/src/utils/renderHtml.ts b/src/utils/renderHtml.ts index 9038e089..dc304bcf 100755 --- a/src/utils/renderHtml.ts +++ b/src/utils/renderHtml.ts @@ -53,7 +53,7 @@ export default ( trimCustomFragments: true, minifyCSS: true, minifyJS: true, - minifyURLs: true + minifyURLs: true, }; // Minify html in production diff --git a/tools/webpack/config.babel.js b/tools/webpack/config.babel.js index 3a0e99b7..c06f8059 100755 --- a/tools/webpack/config.babel.js +++ b/tools/webpack/config.babel.js @@ -22,16 +22,16 @@ const getPlugins = () => { const plugins = [ new ManifestPlugin({ fileName: path.resolve(process.cwd(), 'public/webpack-assets.json'), - filter: file => file.isInitial + filter: (file) => file.isInitial, }), new LoadablePlugin({ writeToDisk: true, - filename: '../loadable-stats.json' + filename: '../loadable-stats.json', }), new MiniCssExtractPlugin({ // Don't use hash in development, we need the persistent for "renderHtml.js" filename: isDev ? '[name].css' : '[name].[contenthash:8].css', - chunkFilename: isDev ? '[id].css' : '[id].[contenthash:8].css' + chunkFilename: isDev ? '[id].css' : '[id].[contenthash:8].css', }), // Setup enviorment variables for client new webpack.EnvironmentPlugin({ NODE_ENV: JSON.stringify(nodeEnv) }), @@ -39,10 +39,10 @@ const getPlugins = () => { new webpack.DefinePlugin({ __CLIENT__: true, __SERVER__: false, - __DEV__: isDev + __DEV__: isDev, }), new webpack.ProgressPlugin(), - PnpWebpackPlugin + PnpWebpackPlugin, ]; if (isDev) { @@ -58,13 +58,14 @@ const getPlugins = () => { new webpack.HashedModuleIdsPlugin(), new CompressionPlugin({ test: /\.(js|css|html)$/, - threshold: 10240 + threshold: 10240, }), // Visualize all of the webpack bundles // Check "https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin" // for more configurations new BundleAnalyzerPlugin({ - analyzerMode: process.env.NODE_ENV === 'analyze' ? 'server' : 'disabled' + analyzerMode: + process.env.NODE_ENV === 'analyze' ? 'server' : 'disabled', }) ); } @@ -91,8 +92,8 @@ const getStyleLoaders = (sass = false) => { options: { hmr: isDev, // If hmr does not work, this is a forceful method - reloadAll: true - } + reloadAll: true, + }, }, { loader: 'css', @@ -100,12 +101,12 @@ const getStyleLoaders = (sass = false) => { importLoaders: sass ? 2 : 1, modules: USE_CSS_MODULES && { localIdentName: isDev ? '[name]__[local]' : '[hash:base64:5]', - context: path.resolve(process.cwd(), 'src') + context: path.resolve(process.cwd(), 'src'), }, - sourceMap: true - } + sourceMap: true, + }, }, - { loader: 'postcss', options: { sourceMap: true } } + { loader: 'postcss', options: { sourceMap: true } }, ]; if (sass) loaders.push({ loader: 'sass', options: { sourceMap: true } }); @@ -123,14 +124,14 @@ module.exports = { new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({ cssProcessorPluginOptions: { - preset: ['default', { discardComments: { removeAll: !isDev } }] - } - }) + preset: ['default', { discardComments: { removeAll: !isDev } }], + }, + }), ], splitChunks: { // Auto split vendor modules in production only - chunks: isDev ? 'async' : 'all' - } + chunks: isDev ? 'async' : 'all', + }, }, output: { path: path.resolve(process.cwd(), 'public/assets'), @@ -138,7 +139,7 @@ module.exports = { // Don't use chunkhash in development it will increase compilation time filename: isDev ? '[name].js' : '[name].[chunkhash:8].js', chunkFilename: isDev ? '[id].js' : '[id].[chunkhash:8].js', - pathinfo: isDev + pathinfo: isDev, }, module: { rules: [ @@ -146,26 +147,26 @@ module.exports = { test: /\.(t|j)sx?$/, exclude: /node_modules/, loader: 'babel', - options: { cacheDirectory: isDev } + options: { cacheDirectory: isDev }, }, // All output '.js' files will have any sourcemaps re-processed by source-map-loader. // So you can debug your output code as if it was Typescript. { enforce: 'pre', test: /\.js$/, - loader: 'source-map' + loader: 'source-map', }, { test: /\.css$/, - use: getStyleLoaders() + use: getStyleLoaders(), }, { test: /\.(scss|sass)$/, - use: getStyleLoaders(true) + use: getStyleLoaders(true), }, { test: /\.(woff2?|ttf|otf|eot)$/, - loader: 'file' + loader: 'file', }, { test: /\.(gif|png|jpe?g|webp|svg)$/, @@ -173,34 +174,34 @@ module.exports = { { // Any image below or equal to 10K will be converted to inline base64 instead loader: 'url', - options: { limit: 10 * 1024, name: '[name].[hash:8].[ext]' } + options: { limit: 10 * 1024, name: '[name].[hash:8].[ext]' }, }, { loader: 'image-webpack', // For each optimizer you wish to configure // Plz check https://github.com/tcoopman/image-webpack-loader#usage - options: { disable: true } - } - ] + options: { disable: true }, + }, + ], }, { test: /\.js$/, - loader: require.resolve('babel-loader') - } - ] + loader: require.resolve('babel-loader'), + }, + ], }, plugins: getPlugins(), /* Advanced configuration */ resolveLoader: { // Use loaders without the -loader suffix moduleExtensions: ['-loader'], - plugins: [PnpWebpackPlugin.moduleLoader(module)] + plugins: [PnpWebpackPlugin.moduleLoader(module)], }, resolve: { modules: ['src', 'node_modules'], descriptionFiles: ['package.json'], extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'], - alias: { 'react-dom': '@hot-loader/react-dom' } + alias: { 'react-dom': '@hot-loader/react-dom' }, }, cache: isDev, // Some libraries import Node modules but don't use them in the browser. @@ -211,6 +212,6 @@ module.exports = { fs: 'empty', vm: 'empty', net: 'empty', - tls: 'empty' - } + tls: 'empty', + }, }; diff --git a/tools/webpack/hooks.js b/tools/webpack/hooks.js index c0764e56..6c40fda0 100644 --- a/tools/webpack/hooks.js +++ b/tools/webpack/hooks.js @@ -17,7 +17,7 @@ module.exports = () => { preprocessCss: (data, filename) => sass.renderSync({ data, file: filename }).css, rootDir: path.resolve(process.cwd(), 'src'), - devMode: __DEV__ + devMode: __DEV__, }); // Images @@ -26,13 +26,13 @@ module.exports = () => { extensions: ['gif', 'jpg', 'jpeg', 'png', 'webp', 'svg'], publicPath: '/assets/', limit: 10 * 1024, - name: '[name].[hash:8].[ext]' + name: '[name].[hash:8].[ext]', }); // Fonts require('asset-require-hook')({ // Must use the same option with webpack's configuration extensions: ['woff', 'woff2', 'ttf', 'otf', 'eot'], - publicPath: '/assets/' + publicPath: '/assets/', }); };