Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 82abca4

Browse filesBrowse files
glookglook
committed
updated packages to latest version
added eslint added react-refresh added fork-ts-checker-webpack-plugin
1 parent 598e0d8 commit 82abca4
Copy full SHA for 82abca4

26 files changed

+250
-213
lines changed

‎.babelrc

Copy file name to clipboardExpand all lines: .babelrc
-27Lines changed: 0 additions & 27 deletions
This file was deleted.

‎.babelrc.js

Copy file name to clipboard
+35Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* Created by: Andrey Polyakov (andrey@polyakov.im)
3+
*/
4+
const {argv} = require('yargs');
5+
module.exports = (api) => {
6+
const {env} = argv;
7+
const mode = env.mode ? env.mode : 'production';
8+
// This caches the Babel config by environment.
9+
api.cache.using(() => mode);
10+
return {
11+
presets: [
12+
[
13+
'@babel/preset-env',
14+
{
15+
targets: {
16+
browsers: ['>1%', 'last 4 versions', 'not ie < 9'],
17+
},
18+
useBuiltIns: 'usage',
19+
debug: false,
20+
corejs: 3,
21+
},
22+
],
23+
'@babel/preset-react',
24+
],
25+
plugins: [
26+
'@babel/plugin-syntax-dynamic-import',
27+
'@babel/plugin-proposal-class-properties',
28+
'@babel/plugin-proposal-export-namespace-from',
29+
'@babel/plugin-proposal-throw-expressions',
30+
'@babel/proposal-object-rest-spread',
31+
// Applies the react-refresh Babel plugin on non-production modes only
32+
mode !== 'production' && 'react-refresh/babel',
33+
].filter(Boolean),
34+
};
35+
};

‎.eslintignore

Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
dist

‎.eslintrc

Copy file name to clipboardExpand all lines: .eslintrc
-50Lines changed: 0 additions & 50 deletions
This file was deleted.

‎.eslintrc.js

Copy file name to clipboard
+48Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
const path = require('path');
2+
module.exports = {
3+
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
4+
plugins: ['@typescript-eslint', 'react'],
5+
env: {
6+
browser: true,
7+
jest: true,
8+
},
9+
extends: [
10+
'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
11+
'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
12+
'prettier/react', // disables react-specific linting rules that conflict with prettier
13+
],
14+
parserOptions: {
15+
project: path.resolve(__dirname, './tsconfig.json'),
16+
tsconfigRootDir: __dirname,
17+
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
18+
sourceType: 'module', // Allows for the use of imports
19+
ecmaFeatures: {
20+
jsx: true, // Allows for the parsing of JSX
21+
},
22+
},
23+
rules: {
24+
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
25+
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
26+
'@typescript-eslint/explicit-function-return-type': 'off',
27+
'@typescript-eslint/no-unused-vars': 'off',
28+
29+
// These rules don't add much value, are better covered by TypeScript and good definition files
30+
'react/no-direct-mutation-state': 'off',
31+
'react/no-deprecated': 'off',
32+
'react/no-string-refs': 'off',
33+
'react/require-render-return': 'off',
34+
35+
'react/jsx-filename-extension': [
36+
'warn',
37+
{
38+
extensions: ['.jsx', '.tsx'],
39+
},
40+
], // also want to use with ".tsx"
41+
'react/prop-types': 'off', // Is this incompatible with TS props type?
42+
},
43+
settings: {
44+
react: {
45+
version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
46+
},
47+
},
48+
};

‎package.json

Copy file name to clipboard
+57-54Lines changed: 57 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "webpack4-es6-sass",
3-
"version": "0.0.3",
3+
"version": "0.0.4",
44
"description": "",
55
"main": "index.js",
66
"scripts": {
@@ -10,78 +10,81 @@
1010
"author": "",
1111
"license": "ISC",
1212
"devDependencies": {
13-
"@babel/core": "^7.8.3",
14-
"@babel/plugin-proposal-class-properties": "^7.8.3",
15-
"@babel/plugin-proposal-export-namespace-from": "^7.8.3",
16-
"@babel/plugin-proposal-object-rest-spread": "^7.8.3",
17-
"@babel/plugin-proposal-throw-expressions": "^7.8.3",
13+
"@babel/core": "^7.10.2",
14+
"@babel/plugin-proposal-class-properties": "^7.10.1",
15+
"@babel/plugin-proposal-export-namespace-from": "^7.10.1",
16+
"@babel/plugin-proposal-object-rest-spread": "^7.10.1",
17+
"@babel/plugin-proposal-throw-expressions": "^7.10.1",
1818
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
19-
"@babel/plugin-transform-runtime": "^7.8.3",
20-
"@babel/preset-env": "^7.8.3",
21-
"@babel/preset-react": "^7.8.3",
22-
"@babel/register": "^7.8.3",
23-
"@svgr/webpack": "^5.1.0",
24-
"@teamsupercell/typings-for-css-modules-loader": "^2.1.0",
25-
"autoprefixer": "^9.7.4",
26-
"babel-eslint": "^10.0.3",
27-
"babel-loader": "^8.0.6",
19+
"@babel/plugin-transform-runtime": "^7.10.1",
20+
"@babel/preset-env": "^7.10.2",
21+
"@babel/preset-react": "^7.10.1",
22+
"@babel/register": "^7.10.1",
23+
"@pmmmwh/react-refresh-webpack-plugin": "^0.3.3",
24+
"@svgr/webpack": "^5.4.0",
25+
"@teamsupercell/typings-for-css-modules-loader": "^2.2.0",
26+
"@typescript-eslint/eslint-plugin": "^3.2.0",
27+
"@typescript-eslint/parser": "^3.2.0",
28+
"autoprefixer": "^9.8.0",
29+
"babel-eslint": "^10.1.0",
30+
"babel-loader": "^8.1.0",
2831
"clean-webpack-plugin": "^3.0.0",
29-
"copy-webpack-plugin": "^5.1.1",
30-
"core-js": "^3.6.4",
31-
"css-loader": "3.4.2",
32+
"copy-webpack-plugin": "^6.0.2",
33+
"core-js": "^3.6.5",
34+
"css-loader": "3.5.3",
3235
"cssnano": "^4.1.10",
33-
"eslint": "^6.8.0",
34-
"eslint-config-airbnb-base": "^14.0.0",
36+
"eslint": "^7.2.0",
37+
"eslint-config-airbnb-base": "^14.1.0",
38+
"eslint-config-airbnb-typescript": "^8.0.2",
39+
"eslint-config-prettier": "^6.11.0",
3540
"eslint-import-resolver-alias": "^1.1.2",
36-
"eslint-loader": "^3.0.3",
37-
"eslint-plugin-import": "^2.20.0",
38-
"eslint-plugin-react": "^7.18.0",
41+
"eslint-loader": "^4.0.2",
42+
"eslint-plugin-import": "^2.21.1",
43+
"eslint-plugin-jsx-a11y": "^6.2.3",
44+
"eslint-plugin-react": "^7.20.0",
45+
"eslint-plugin-react-hooks": "^2.5.1",
3946
"expose-loader": "0.7.5",
4047
"extract-text-webpack-plugin": "^4.0.0-beta.0",
41-
"file-loader": "5.0.2",
42-
"html-loader": "^0.5.5",
43-
"html-webpack-plugin": "^3.2.0",
48+
"file-loader": "6.0.0",
49+
"fork-ts-checker-webpack-plugin": "^4.1.6",
50+
"html-loader": "^1.1.0",
51+
"html-webpack-plugin": "^4.3.0",
4452
"is-windows": "^1.0.2",
45-
"less": "^3.10.3",
46-
"less-loader": "^5.0.0",
53+
"less": "^3.11.3",
54+
"less-loader": "^6.1.0",
4755
"lodash": "^4.17.15",
4856
"mini-css-extract-plugin": "^0.9.0",
49-
"node-sass": "4.13.1",
57+
"node-sass": "4.14.1",
5058
"path": "^0.12.7",
5159
"postcss-loader": "3.0.0",
52-
"prettier": "^1.19.1",
53-
"regenerator-runtime": "^0.13.3",
60+
"prettier": "^2.0.5",
61+
"react-refresh": "^0.8.3",
62+
"regenerator-runtime": "^0.13.5",
5463
"resolve-url-loader": "3.1.1",
5564
"sass-loader": "^8.0.2",
56-
"sass-resources-loader": "^2.0.1",
57-
"style-loader": "1.1.3",
58-
"svg-url-loader": "^3.0.3",
59-
"terser-webpack-plugin": "^2.3.2",
65+
"sass-resources-loader": "^2.0.3",
66+
"style-loader": "1.2.1",
67+
"svg-url-loader": "^6.0.0",
68+
"terser-webpack-plugin": "^3.0.3",
6069
"thread-loader": "^2.1.3",
61-
"ts-loader": "^6.2.1",
62-
"tslint": "^5.20.1",
63-
"tslint-loader": "^3.5.4",
64-
"tslint-react": "^4.1.0",
65-
"tslint-react-hooks": "^2.2.1",
66-
"tslint-webpack-plugin": "^2.1.0",
67-
"typescript": "^3.7.5",
68-
"url-loader": "3.0.0",
69-
"webpack": "^4.41.5",
70-
"webpack-cli": "^3.3.10",
71-
"webpack-dev-server": "^3.10.1",
70+
"ts-loader": "^7.0.5",
71+
"typescript": "^3.9.5",
72+
"url-loader": "4.1.0",
73+
"webpack": "^4.43.0",
74+
"webpack-cli": "^3.3.11",
75+
"webpack-dev-server": "^3.11.0",
7276
"webpack-merge": "4.2.2",
7377
"webpack-serve": "^3.2.0",
7478
"webpack-stats-plugin": "0.3.1",
75-
"yargs": "^15.1.0"
79+
"yargs": "^15.3.1"
7680
},
7781
"dependencies": {
78-
"@fortawesome/fontawesome-free": "^5.12.0",
79-
"@types/classnames": "^2.2.9",
80-
"@types/react": "^16.9.18",
81-
"@types/react-dom": "^16.9.5",
82-
"bootstrap": "^4.4.1",
82+
"@types/classnames": "^2.2.10",
83+
"@types/react": "^16.9.35",
84+
"@types/react-dom": "^16.9.8",
8385
"classnames": "^2.2.6",
84-
"react": "^16.12.0",
85-
"react-dom": "^16.12.0"
86+
"normalize.css": "^8.0.1",
87+
"react": "^16.13.1",
88+
"react-dom": "^16.13.1"
8689
}
8790
}

‎src/components/app/app.module.scss

Copy file name to clipboard
+27Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.styles {
2+
&-container {
3+
width: 100%;
4+
height: 100%;
5+
position: absolute;
6+
background: hsl(217, 47%, 52%);
7+
display: flex;
8+
flex-direction: column;
9+
align-content: center;
10+
align-items: center;
11+
justify-content: center;
12+
}
13+
14+
&-header {
15+
font-size: 50px;
16+
color: #fff;
17+
font-family: 'Open Sans', sans-serif;
18+
font-weight: 600;
19+
}
20+
21+
&-image {
22+
$size: 90px;
23+
width: $size;
24+
height: $size;
25+
margin: 25px 0 0 0;
26+
}
27+
}

‎src/components/app/app.module.scss.d.ts

Copy file name to clipboard
+16Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// autogenerated by typings-for-css-modules-loader.
2+
// Please do not change this file!
3+
declare namespace AppModuleScssNamespace {
4+
export interface IAppModuleScss {
5+
stylesContainer: string;
6+
stylesHeader: string;
7+
stylesImage: string;
8+
}
9+
}
10+
11+
declare const AppModuleScssModule: AppModuleScssNamespace.IAppModuleScss & {
12+
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
13+
locals: AppModuleScssNamespace.IAppModuleScss;
14+
};
15+
16+
export = AppModuleScssModule;

‎src/components/app/app.tsx

Copy file name to clipboard
+11-4Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
/**
22
* Created by: Andrey Polyakov (andrey@polyakov.im)
33
*/
4-
import React from 'react';
4+
import React, {lazy, Suspense} from 'react';
5+
import {stylesContainer, stylesHeader, stylesImage} from './app.module.scss';
56

6-
export const App = () => {
7-
return <div>It works</div>;
8-
};
7+
const LazyStrawberryIcon = lazy(() => import('./strawberry'));
8+
export const App = (): React.ReactElement => (
9+
<div className={stylesContainer}>
10+
<div className={stylesHeader}>It works</div>
11+
<Suspense fallback={'loading...'}>
12+
<LazyStrawberryIcon className={stylesImage} />
13+
</Suspense>
14+
</div>
15+
);

‎src/components/app/strawberry.tsx

Copy file name to clipboard
+15Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/**
2+
* Created by: Andrey Polyakov (andrey@polyakov.im)
3+
*/
4+
import React, {CSSProperties} from 'react';
5+
import StrawberryIcon from '@images/strawberry.component.svg';
6+
7+
export default ({
8+
style,
9+
className,
10+
}: {
11+
style?: CSSProperties;
12+
className?: string;
13+
}): React.ReactElement => (
14+
<StrawberryIcon className={className} style={style} />
15+
);

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.