├── src
    ├── scss
    │   ├── app.scss
    │   ├── index.scss
    │   └── text-colors.scss
    ├── helpers
    │   └── index.js
    ├── App.test.js
    ├── components
    │   ├── Maybe
    │   │   └── index.js
    │   ├── ActiveTasks
    │   │   └── index.js
    │   ├── Title
    │   │   └── index.js
    │   ├── Filter
    │   │   └── index.js
    │   ├── AddTask
    │   │   └── index.js
    │   ├── Map
    │   │   └── index.js
    │   ├── Line
    │   │   └── index.js
    │   ├── List
    │   │   └── index.js
    │   └── Colors
    │   │   └── index.js
    ├── state
    │   ├── index.js
    │   └── todoListStore.js
    ├── index.js
    ├── App.js
    ├── logo.svg
    ├── containers
    │   └── TodoList
    │   │   └── index.js
    └── serviceWorker.js
├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── .eslintrc
├── .prettierrc
├── .editorconfig
├── config
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── paths.js
    ├── env.js
    ├── webpackDevServer.config.js
    ├── webpack.config.dev.js
    └── webpack.config.prod.js
├── .github
    └── ISSUE_TEMPLATE
    │   └── --------------.md
├── .gitignore
├── .babelrc
├── README.md
├── scripts
    ├── test.js
    ├── start.js
    └── build.js
└── package.json


/src/scss/app.scss:
--------------------------------------------------------------------------------
1 | @import "./text-colors.scss";
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iran-react-community/todo-list/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"extends": "react-app",
3 | 	"settings": {
4 | 		"react": {
5 | 			"version": "latest"
6 | 		}
7 | 	}
8 | }
9 | 


--------------------------------------------------------------------------------
/src/helpers/index.js:
--------------------------------------------------------------------------------
1 | export const generateString = (length = -1) => {
2 | 	return Math.random()
3 | 		.toString(16)
4 | 		.slice(2, length);
5 | };
6 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"printWidth": 160,
 3 | 	"tabWidth": 4,
 4 | 	"useTabs": true,
 5 | 	"semi": true,
 6 | 	"trailingComma": "all",
 7 | 	"overrides": [
 8 | 		{
 9 | 			"files": ".prettierrc",
10 | 			"options": { "parser": "json" }
11 | 		}
12 | 	]
13 | }
14 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import App from "./App";
 4 | 
 5 | it("renders without crashing", () => {
 6 | 	const div = document.createElement("div");
 7 | 	ReactDOM.render(<App />, div);
 8 | 	ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/components/Maybe/index.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from "prop-types";
 2 | 
 3 | const Maybe = ({ children, condition }) => (condition ? children : null);
 4 | 
 5 | Maybe.propTypes = {
 6 | 	children: PropTypes.node.isRequired,
 7 | 	condition: PropTypes.bool.isRequired,
 8 | };
 9 | 
10 | export default Maybe;
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = tab
 6 | indent_size = 4
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 
15 | [*.json]
16 | indent_style = space
17 | indent_size = 2
18 | 


--------------------------------------------------------------------------------
/src/components/ActiveTasks/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "@emotion/styled";
 3 | 
 4 | const ActiveBox = styled.div`
 5 | 	float: right;
 6 | 	margin-top: 5px;
 7 | `;
 8 | 
 9 | const ActiveTasks = ({ value }) => {
10 | 	return <ActiveBox>{value}/Active Tasks</ActiveBox>;
11 | };
12 | 
13 | export default ActiveTasks;
14 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | // This is a custom Jest transformer turning style imports into empty objects.
 2 | // http://facebook.github.io/jest/docs/en/webpack.html
 3 | 
 4 | module.exports = {
 5 | 	process() {
 6 | 		return "module.exports = {};";
 7 | 	},
 8 | 	getCacheKey() {
 9 | 		// The output is always the same.
10 | 		return "cssTransform";
11 | 	},
12 | };
13 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/--------------.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: ثبت موضوع جدید
 3 | about: چینش درست فارسی
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | <div dir="rtl">
11 | 
12 | برای چینش درست فارسی داخل این تگ باز شده بنویسید، متاسفانه داخل مارک‌آپ، کد‌های مارک‌دان کار نمی‌کند. برای استفاده از کد‌های مارک‌دان بیرون تگ باز شده بنویسید.
13 | 
14 | </div>
15 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # IDE & Code editors
 4 | .idea/
 5 | 
 6 | # dependencies
 7 | /node_modules
 8 | /.pnp
 9 | .pnp.js
10 | 
11 | /ignore
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | .env.local
22 | .env.development.local
23 | .env.test.local
24 | .env.production.local
25 | 
26 | npm-debug.log*
27 | yarn-debug.log*
28 | yarn-error.log*
29 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"presets": [
 3 | 		"react-app",
 4 | 		[
 5 | 			"@emotion/babel-preset-css-prop",
 6 | 			{
 7 | 				"autoLabel": true,
 8 | 				"labelFormat": "[local]"
 9 | 			}
10 | 		]
11 | 	],
12 | 	"plugins": [
13 | 		[
14 | 			"@babel/plugin-proposal-decorators",
15 | 			{
16 | 				"legacy": true
17 | 			}
18 | 		],
19 | 		[
20 | 			"@babel/plugin-proposal-class-properties",
21 | 			{
22 | 				"loose": true
23 | 			}
24 | 		],
25 | 		[
26 | 			"import",
27 | 			{
28 | 				"libraryName": "antd",
29 | 				"libraryDirectory": "es",
30 | 				"style": true
31 | 			}
32 | 		]
33 | 	]
34 | }
35 | 


--------------------------------------------------------------------------------
/src/components/Title/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "@emotion/styled";
 3 | 
 4 | import Line from "../Line";
 5 | import { GradTealBlue } from "../Colors";
 6 | 
 7 | const Wrap = styled.div`
 8 | 	text-align: center;
 9 | 	font-size: 1.3em;
10 | 	width: 65%;
11 | 	margin: 10px auto;
12 | 	color: #373352;
13 | 	font-weight: 300;
14 | 	margin-bottom: 30px;
15 | `;
16 | 
17 | const Title = () => {
18 | 	return (
19 | 		<Wrap>
20 | 			<GradTealBlue>To-do list application</GradTealBlue>
21 | 			<Line from="#00b5c0" to="#0091d9" />
22 | 		</Wrap>
23 | 	);
24 | };
25 | 
26 | export default Title;
27 | 


--------------------------------------------------------------------------------
/src/components/Filter/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "@emotion/styled";
 3 | import { Radio } from "antd";
 4 | 
 5 | const FilterBox = styled.div`
 6 | 	margin-bottom: 40px;
 7 | 	display: inline-block;
 8 | `;
 9 | 
10 | const FilterTodo = ({ onChange }) => {
11 | 	return (
12 | 		<FilterBox>
13 | 			<Radio.Group defaultValue="all" buttonStyle="solid" onChange={e => onChange(e.target.value)}>
14 | 				<Radio.Button value="all">All</Radio.Button>
15 | 				<Radio.Button value="completed">Completed</Radio.Button>
16 | 				<Radio.Button value="active">Active</Radio.Button>
17 | 			</Radio.Group>
18 | 		</FilterBox>
19 | 	);
20 | };
21 | 
22 | export default FilterTodo;
23 | 


--------------------------------------------------------------------------------
/src/state/index.js:
--------------------------------------------------------------------------------
 1 | import { observable } from "mobx";
 2 | import { create } from "mobx-persist";
 3 | 
 4 | import todoListStore from "./todoListStore";
 5 | 
 6 | // Compact and organization other stores and main store in one place.
 7 | export default class AppStore {
 8 | 	@observable serverSide = false;
 9 | 
10 | 	constructor() {
11 | 		this.todoListStore = new todoListStore(this);
12 | 
13 | 		// Mobx Persist data [into localStorage by default]
14 | 		const hydratedTodoList = create();
15 | 		hydratedTodoList("todoList", this.todoListStore);
16 | 	}
17 | 
18 | 	stores() {
19 | 		const appStore = this;
20 | 		return {
21 | 			appStore,
22 | 			todoList: this.todoListStore,
23 | 		};
24 | 	}
25 | }
26 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | 
 4 | import App from "./App";
 5 | // Store and mobx
 6 | import { Provider } from "mobx-react";
 7 | import AppStore from "./state";
 8 | 
 9 | import * as serviceWorker from "./serviceWorker";
10 | 
11 | import "./scss/index.scss";
12 | // create an instance of main app store
13 | const appStore = new AppStore();
14 | 
15 | ReactDOM.render(
16 | 	<Provider {...appStore.stores()}>
17 | 		<App />
18 | 	</Provider>,
19 | 	document.getElementById("root"),
20 | );
21 | 
22 | // If you want your app to work offline and load faster, you can change
23 | // unregister() to register() below. Note this comes with some pitfalls.
24 | // Learn more about service workers: http://bit.ly/CRA-PWA
25 | serviceWorker.unregister();
26 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | 
 3 | // This is a custom Jest transformer turning file imports into filenames.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 | 	process(src, filename) {
 8 | 		const assetFilename = JSON.stringify(path.basename(filename));
 9 | 
10 | 		if (filename.match(/\.svg$/)) {
11 | 			return `module.exports = {
12 |         __esModule: true,
13 |         default: ${assetFilename},
14 |         ReactComponent: (props) => ({
15 |           $$typeof: Symbol.for('react.element'),
16 |           type: 'svg',
17 |           ref: null,
18 |           key: null,
19 |           props: Object.assign({}, props, {
20 |             children: ${assetFilename}
21 |           })
22 |         }),
23 |       };`;
24 | 		}
25 | 
26 | 		return `module.exports = ${assetFilename};`;
27 | 	},
28 | };
29 | 


--------------------------------------------------------------------------------
/src/components/AddTask/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "@emotion/styled";
 3 | import { Input } from "antd";
 4 | 
 5 | const Search = Input.Search;
 6 | 
 7 | const SearchBox = styled.div`
 8 | 	margin-bottom: 10px;
 9 | `;
10 | 
11 | class AddTask extends React.PureComponent {
12 | 	constructor(props) {
13 | 		super(props);
14 | 
15 | 		this.onSearch = this.onSearch.bind(this);
16 | 	}
17 | 
18 | 	onSearch(value) {
19 | 		if(!value) return;
20 | 		
21 | 		this.props.onChange(value);
22 | 
23 | 		this.refs.todoInput.input.input.value = "";
24 | 	}
25 | 
26 | 	componentDidMount() {
27 | 		this.refs.todoInput.focus();
28 | 	}
29 | 
30 | 	render() {
31 | 		return (
32 | 			<SearchBox>
33 | 				<Search ref="todoInput" placeholder="Add a new task" enterButton="Add" size="large" onSearch={this.onSearch} allowClear />
34 | 			</SearchBox>
35 | 		);
36 | 	}
37 | }
38 | 
39 | export default AddTask;
40 | 


--------------------------------------------------------------------------------
/src/components/Map/index.js:
--------------------------------------------------------------------------------
 1 | import React, { cloneElement } from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | import Maybe from "../Maybe";
 5 | import { generateString } from "../../helpers";
 6 | /**
 7 |  * @description The component automatically transmits map callback data to all its sub - component children as prop.
 8 |  * @template
 9 |  * <Map data={[1,2,3,4]}>
10 |  * 	<DisplayItems/> // Now DisplayItems has 2 prop by default which the value and index prop are adapted from map callback.
11 |  * </Map>
12 |  */
13 | const Map = ({ children, data, name = generateString() }) => {
14 | 	const childComponents = data.map((value, index) => cloneElement(children, { value, index, key: `$${name}_${index}` }));
15 | 
16 | 	return <Maybe condition={data.length !== 0}>{childComponents}</Maybe>;
17 | };
18 | 
19 | Map.propTypes = {
20 | 	children: PropTypes.node.isRequired,
21 | 	data: PropTypes.array.isRequired,
22 | };
23 | 
24 | export default Map;
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | A simple and small todo list application built with:
 2 | 
 3 | - React 16.8
 4 | - Ant Design _for User interface_
 5 | - MobX _for state management_
 6 | - Webpack 4 _for module bundling_
 7 | - EmotionJS _for using css-in-js_
 8 | 
 9 | Demo: https://iran-react-community.github.io/todo-list/
10 | 
11 | Regards to [TodoMVC](http://todomvc.com)
12 | 
13 | ## Available Scripts
14 | 
15 | In the project directory, you can run:
16 | 
17 | ### `npm start`
18 | 
19 | Runs the app in the development mode.<br>
20 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
21 | 
22 | ### `npm run build`
23 | 
24 | Builds the app for production to the `build` folder.<br>
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.<br>
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import styled from "@emotion/styled";
 3 | import { Layout } from "antd";
 4 | 
 5 | import TodoList from "./containers/TodoList";
 6 | 
 7 | import "./scss/app.scss";
 8 | 
 9 | const { Content, Footer } = Layout;
10 | const Wrapper = styled.div`
11 | 	width: 560px;
12 | 	/* min-height: 300px; */
13 | 	margin: 50px auto;
14 | 	background-color: #fff;
15 | 	border-radius: 25px;
16 | 	padding: 20px;
17 | 	box-shadow: rgba(50, 50, 50, 0.1) 0px 10px 35px;
18 | `;
19 | 
20 | class BootCamp extends Component {
21 | 	render() {
22 | 		return (
23 | 			<Layout style={{ minHeight: "100vh" }}>
24 | 				<Layout style={{ marginRight: 30 }}>
25 | 					<Content style={{ margin: "0 16px" }}>
26 | 						<Wrapper>
27 | 							<TodoList />
28 | 						</Wrapper>
29 | 					</Content>
30 | 					<Footer style={{ textAlign: "center" }}>Made with Love by <a href="https://github.com/ali-master" target="_new" rel="follow">Ali Torki</a></Footer>
31 | 				</Layout>
32 | 			</Layout>
33 | 		);
34 | 	}
35 | }
36 | 
37 | export default BootCamp;
38 | 


--------------------------------------------------------------------------------
/src/scss/index.scss:
--------------------------------------------------------------------------------
 1 | :root {
 2 | 	/* Silver family */
 3 | 	--silver: "#f7f7f7";
 4 | 	--silver-light: "#838ba1";
 5 | 	--silver-lighter: "#eaebee";
 6 | 	--silver-dark: "#c4c8d1";
 7 | 	/* Gray family */
 8 | 	--gray: "#38404d";
 9 | 	--gray-light: "#f8f9fe";
10 | 	--gray-lighter: "#ccd8ed";
11 | 	/* Blue family */
12 | 	--blue: "#3c74ff";
13 | 	--blue-light: "#1a2d5e";
14 | 	--blue-lighter: "#c9d8ff";
15 | 	--blue-lighter-1: "#eaf2ff";
16 | 	--blue-dark: "#2459f1";
17 | 	--blue-darker: "#3e6eff";
18 | 	/* Yellow family */
19 | 	--yellow: "#ffcb00";
20 | 	--yellow-light: "#fff3bf";
21 | 	/* Green family */
22 | 	--green: "#00ca88";
23 | 	--gray-darker: "#50586e";
24 | 	--font-family: "Roboto Mono", monospace;
25 | }
26 | 
27 | @import url("https://fonts.googleapis.com/css?family=Roboto+Mono");
28 | @import "~antd/dist/antd.css";
29 | 
30 | body {
31 | 	margin: 0;
32 | 	padding: 0;
33 | 	font-size: 16px;
34 | 	-webkit-font-smoothing: antialiased;
35 | 	-moz-osx-font-smoothing: grayscale;
36 | 	background: #f0f2f5 !important;
37 | 	color: #38404d !important;
38 | 	cursor: default;
39 | 	font-family: var(--font-family) !important;
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/Line/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import propTypes from "prop-types";
 3 | 
 4 | import styled from "@emotion/styled";
 5 | import { keyframes } from "@emotion/core";
 6 | 
 7 | const LineBox = styled.div`
 8 | 	height: 2px;
 9 | 	width: 100%;
10 | 	overflow: hidden;
11 | 	width: 100%;
12 | 	margin: 24px auto 40px;
13 | `;
14 | 
15 | const lineAnimate = keyframes`
16 | 	0%,
17 | 	25% {
18 | 		transform: translateX(-64px);
19 | 	}
20 | 	75%,
21 | 	100% {
22 | 		transform: translateX(372px);
23 | 	}
24 | `;
25 | 
26 | const LineBar = styled.div`
27 | 	height: 100%;
28 | 	width: 64px;
29 | 	transform: translateX(-64px);
30 | 	animation: ${lineAnimate} 3s ease-in-out 1.5s infinite;
31 | 	background: ${({ from, to }) => `linear-gradient(to right, ${from} 0%, ${to} 100%)`};
32 | `;
33 | 
34 | const Line = ({ from, to }) => (
35 | 	<LineBox>
36 | 		<LineBar from={from} to={to} />
37 | 	</LineBox>
38 | );
39 | 
40 | Line.propTypes = {
41 | 	from: propTypes.string,
42 | 	to: propTypes.string,
43 | };
44 | Line.defaultProps = {
45 | 	from: "rgba(24, 144, 255, 0)",
46 | 	to: "#1890ff",
47 | };
48 | 
49 | export default React.memo(Line);
50 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | 
19 | const jest = require('jest');
20 | const execSync = require('child_process').execSync;
21 | let argv = process.argv.slice(2);
22 | 
23 | function isInGitRepository() {
24 |   try {
25 |     execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
26 |     return true;
27 |   } catch (e) {
28 |     return false;
29 |   }
30 | }
31 | 
32 | function isInMercurialRepository() {
33 |   try {
34 |     execSync('hg --cwd . root', { stdio: 'ignore' });
35 |     return true;
36 |   } catch (e) {
37 |     return false;
38 |   }
39 | }
40 | 
41 | // Watch unless on CI, in coverage mode, or explicitly running all tests
42 | if (
43 |   !process.env.CI &&
44 |   argv.indexOf('--coverage') === -1 &&
45 |   argv.indexOf('--watchAll') === -1
46 | ) {
47 |   // https://github.com/facebook/create-react-app/issues/5210
48 |   const hasSourceControl = isInGitRepository() || isInMercurialRepository();
49 |   argv.push(hasSourceControl ? '--watch' : '--watchAll');
50 | }
51 | 
52 | 
53 | jest.run(argv);
54 | 


--------------------------------------------------------------------------------
/src/components/List/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "@emotion/styled";
 3 | 
 4 | // ant components
 5 | import List from "antd/es/list";
 6 | import Button from "antd/es/button";
 7 | import { Tooltip, Checkbox } from "antd";
 8 | 
 9 | const TodoBox = styled.div`
10 | 	background: ${({ done }) => (done ? "#92C65A" : "#f5f5f5")};
11 | 	padding: 15px;
12 | 	border-radius: 5px;
13 | 	box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.1);
14 | 	border: 1px solid ${({ done }) => (done ? "#92c65a" : "#cfcfcf")};
15 | 
16 | 	& .ant-checkbox-checked {
17 | 		&:before {
18 | 			border-color: #53861d;
19 | 		}
20 | 
21 | 		.ant-checkbox-inner {
22 | 			background-color: #53861d;
23 | 			border-color: #53861d;
24 | 		}
25 | 	}
26 | 
27 | 	& .ant-checkbox-wrapper {
28 | 		user-select: none;
29 | 
30 | 		& > span:last-of-type {
31 | 			margin-left: 5px;
32 | 			text-decoration: ${({ done }) => (done ? "line-through" : "none")};
33 | 			color: ${({ done }) => (done ? "#FFF" : "rgba(0, 0, 0, 0.65)")};
34 | 		} /* Checkbox label */
35 | 	} /* checkbox wrapper */
36 | `;
37 | 
38 | const TodoList = ({ value: { value, done }, index, onChange, onDelete }) => {
39 | 	return (
40 | 		<List css={{ marginBottom: 15 }}>
41 | 			<TodoBox done={done}>
42 | 				<Checkbox checked={done} onChange={e => onChange({ index, done: e.target.checked })}>
43 | 					{value}
44 | 				</Checkbox>
45 | 				<Tooltip placement="topLeft" title="Delete task">
46 | 					<Button type="danger" shape="circle" icon="delete" css={{ float: "right", marginTop: -5 }} onClick={() => onDelete(index)} />
47 | 				</Tooltip>
48 | 			</TodoBox>
49 | 		</List>
50 | 	);
51 | };
52 | 
53 | export default TodoList;
54 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 7 | 		<meta name="theme-color" content="#000000" />
 8 | 		<!--
 9 |       manifest.json provides metadata used when your web app is added to the
10 |       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
11 |     -->
12 | 		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13 | 		<!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 | 		<title>Todo List App</title>
23 | 	</head>
24 | 	<body>
25 | 		<noscript>
26 | 			You need to enable JavaScript to run this app.
27 | 		</noscript>
28 | 		<div id="root"></div>
29 | 		<!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     --></body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/src/state/todoListStore.js:
--------------------------------------------------------------------------------
 1 | import { observable, computed, action, toJS } from "mobx";
 2 | import { persist } from "mobx-persist";
 3 | 
 4 | class TodoListStore {
 5 | 	@persist("list") @observable todos = [
 6 | 		{ value: "Get groceries for dinner", done: true },
 7 | 		{ value: "Pick up Amit's Birthday present", done: false },
 8 | 		{ value: "Book flights to Vancouver", done: false },
 9 | 		{ value: "Finalize presentation", done: false },
10 | 	];
11 | 	@persist("list") @observable filteredTodo = [];
12 | 
13 | 	constructor() {
14 | 		this.filteredTodo = this.todos;
15 | 	}
16 | 
17 | 	// Get the latest list of todos
18 | 	@computed
19 | 	get getTaskList() {
20 | 		return toJS(this.filteredTodo);
21 | 	}
22 | 	// get length of active todos
23 | 	@computed
24 | 	get getNumberOfActiveTasks() {
25 | 		return toJS(this.filteredTodo.filter(({ done }) => !done)).length;
26 | 	}
27 | 	// get length of completed todos
28 | 	@computed
29 | 	get getNumberOfCompletedTasks() {
30 | 		return toJS(this.filteredTodo.filter(({ done }) => !!done)).length;
31 | 	}
32 | 	// Update a task which it was done status by index
33 | 	@action updateTaskStatus = ({ index, done }) => {
34 | 		this.todos[index].done = done;
35 | 
36 | 		this.filteredTodo = this.todos;
37 | 	};
38 | 	// Delete a task by index
39 | 	@action deleteTask = index => {
40 | 		this.todos = this.todos.filter((task, taskIndex) => taskIndex !== index);
41 | 
42 | 		this.filteredTodo = this.todos;
43 | 	};
44 | 	// Delete all completed tasks
45 | 	@action deleteCompletedTasks = () => {
46 | 		this.todos = this.todos.filter(({ done }) => !done);
47 | 
48 | 		this.filteredTodo = this.todos;
49 | 	};
50 | 	// Add a new task into todo list
51 | 	@action addNewTask = value => {
52 | 		this.todos.unshift({ value, done: false });
53 | 
54 | 		this.filteredTodo = this.todos;
55 | 	};
56 | 
57 | 	// Filter todo list via by status argv.
58 | 	@action filterTasksBy = status => {
59 | 		this.filteredTodo = this.todos.filter(({ done }) => {
60 | 			switch (status) {
61 | 				case "completed":
62 | 					return !!done;
63 | 				case "active":
64 | 					return !done;
65 | 				default:
66 | 					return true;
67 | 			}
68 | 		});
69 | 	};
70 | }
71 | 
72 | export default TodoListStore;
73 | 


--------------------------------------------------------------------------------
/src/scss/text-colors.scss:
--------------------------------------------------------------------------------
 1 | .grad-blue-purple {
 2 | 	display: inline-block;
 3 | 
 4 | 	background: -webkit-linear-gradient(left, #3f9dec, #a637ca);
 5 | 	background: linear-gradient(to right, #3f9dec, #a637ca);
 6 | 	-webkit-background-clip: text;
 7 | 
 8 | 	-webkit-text-fill-color: transparent;
 9 | }
10 | 
11 | .grad-purple-pink {
12 | 	display: inline-block;
13 | 
14 | 	background: -webkit-linear-gradient(left, #6758c5, #e072c3);
15 | 	background: linear-gradient(to right, #6758c5, #e072c3);
16 | 	-webkit-background-clip: text;
17 | 
18 | 	-webkit-text-fill-color: transparent;
19 | }
20 | 
21 | .grad-pink-purple {
22 | 	display: inline-block;
23 | 
24 | 	background: -webkit-linear-gradient(right, #6758c5, #e072c3);
25 | 	background: linear-gradient(to left, #6758c5, #e072c3);
26 | 	-webkit-background-clip: text;
27 | 
28 | 	-webkit-text-fill-color: transparent;
29 | }
30 | 
31 | .grad-peach-purple {
32 | 	display: inline-block;
33 | 
34 | 	background: -webkit-linear-gradient(left, #f98ea6, #9966d7);
35 | 	background: linear-gradient(to right, #f98ea6, #9966d7);
36 | 	-webkit-background-clip: text;
37 | 
38 | 	-webkit-text-fill-color: transparent;
39 | }
40 | 
41 | .grad-blue-indigo {
42 | 	display: inline-block;
43 | 
44 | 	background: -webkit-linear-gradient(left, #5fb4e0, #4e4ecf);
45 | 	background: linear-gradient(to right, #5fb4e0, #4e4ecf);
46 | 	-webkit-background-clip: text;
47 | 
48 | 	-webkit-text-fill-color: transparent;
49 | }
50 | 
51 | .grad-indigo {
52 | 	display: inline-block;
53 | 
54 | 	background: -webkit-linear-gradient(left, #7b7eda, #6c71c0);
55 | 	background: -webkit-linear-gradient(left, #6c71c0, #7b7eda);
56 | 	background: linear-gradient(to right, #6c71c0, #7b7eda);
57 | 	-webkit-background-clip: text;
58 | 
59 | 	-webkit-text-fill-color: transparent;
60 | }
61 | 
62 | .grad-teal-blue {
63 | 	display: inline-block;
64 | 
65 | 	background: -webkit-linear-gradient(left, #00b5c0, #0091d9);
66 | 	background: linear-gradient(to right, #00b5c0, #0091d9);
67 | 	-webkit-background-clip: text;
68 | 
69 | 	-webkit-text-fill-color: transparent;
70 | }
71 | 
72 | .grad-orange-pink {
73 | 	display: inline-block;
74 | 
75 | 	background: -webkit-linear-gradient(left, #fe9ba0, #e072c3);
76 | 	background: linear-gradient(to right, #fe9ba0, #e072c3);
77 | 	-webkit-background-clip: text;
78 | 
79 | 	-webkit-text-fill-color: transparent;
80 | }
81 | 


--------------------------------------------------------------------------------
/src/components/Colors/index.js:
--------------------------------------------------------------------------------
 1 | import styled from "@emotion/styled";
 2 | 
 3 | export const GradBluePurple = styled.p`
 4 | 	display: inline-block;
 5 | 
 6 | 	background: -webkit-linear-gradient(left, #3f9dec, #a637ca);
 7 | 	background: linear-gradient(to right, #3f9dec, #a637ca);
 8 | 
 9 | 	-webkit-background-clip: text;
10 | 	-webkit-text-fill-color: transparent;
11 | `;
12 | 
13 | export const GradPurplePink = styled.p`
14 | 	display: inline-block;
15 | 
16 | 	background: -webkit-linear-gradient(left, #6758c5, #e072c3);
17 | 	background: linear-gradient(to right, #6758c5, #e072c3);
18 | 
19 | 	-webkit-background-clip: text;
20 | 	-webkit-text-fill-color: transparent;
21 | `;
22 | 
23 | export const GradPinkPurple = styled.p`
24 | 	display: inline-block;
25 | 
26 | 	background: -webkit-linear-gradient(right, #6758c5, #e072c3);
27 | 	background: linear-gradient(to left, #6758c5, #e072c3);
28 | 
29 | 	-webkit-background-clip: text;
30 | 	-webkit-text-fill-color: transparent;
31 | `;
32 | 
33 | export const GradPeachPurple = styled.p`
34 | 	display: inline-block;
35 | 
36 | 	background: -webkit-linear-gradient(left, #f98ea6, #9966d7);
37 | 	background: linear-gradient(to right, #f98ea6, #9966d7);
38 | 
39 | 	-webkit-background-clip: text;
40 | 	-webkit-text-fill-color: transparent;
41 | `;
42 | 
43 | export const GradBlueIndigo = styled.p`
44 | 	display: inline-block;
45 | 
46 | 	background: -webkit-linear-gradient(left, #5fb4e0, #4e4ecf);
47 | 	background: linear-gradient(to right, #5fb4e0, #4e4ecf);
48 | 
49 | 	-webkit-background-clip: text;
50 | 	-webkit-text-fill-color: transparent;
51 | `;
52 | 
53 | export const GradIndigo = styled.p`
54 | 	display: inline-block;
55 | 
56 | 	background: -webkit-linear-gradient(left, #7b7eda, #6c71c0);
57 | 	background: -webkit-linear-gradient(left, #6c71c0, #7b7eda);
58 | 	background: linear-gradient(to right, #6c71c0, #7b7eda);
59 | 
60 | 	-webkit-background-clip: text;
61 | 	-webkit-text-fill-color: transparent;
62 | `;
63 | 
64 | export const GradTealBlue = styled.p`
65 | 	display: inline-block;
66 | 
67 | 	background: -webkit-linear-gradient(left, #00b5c0, #0091d9);
68 | 	background: linear-gradient(to right, #00b5c0, #0091d9);
69 | 
70 | 	-webkit-background-clip: text;
71 | 	-webkit-text-fill-color: transparent;
72 | `;
73 | 
74 | export const GradOrangePink = styled.p`
75 | 	display: inline-block;
76 | 
77 | 	background: -webkit-linear-gradient(left, #fe9ba0, #e072c3);
78 | 	background: linear-gradient(to right, #fe9ba0, #e072c3);
79 | 
80 | 	-webkit-background-clip: text;
81 | 	-webkit-text-fill-color: transparent;
82 | `;
83 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/containers/TodoList/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, Fragment } from "react";
 2 | import { Empty, Button } from "antd";
 3 | // store
 4 | import { observer, inject } from "mobx-react";
 5 | 
 6 | import Maybe from "../../components/Maybe";
 7 | import Map from "../../components/Map";
 8 | 
 9 | import Title from "../../components/Title";
10 | import List from "../../components/List";
11 | import AddTask from "../../components/AddTask";
12 | import FilterTodo from "../../components/Filter";
13 | import ActiveTasks from "../../components/ActiveTasks";
14 | 
15 | @inject("todoList")
16 | @observer
17 | class TaskList extends Component {
18 | 	constructor(props) {
19 | 		super(props);
20 | 
21 | 		// binding prototypes
22 | 		this.addNewTask = this.addNewTask.bind(this);
23 | 		this.onChangeTask = this.onChangeTask.bind(this);
24 | 		this.onDeleteTask = this.onDeleteTask.bind(this);
25 | 		this.onChangeFilter = this.onChangeFilter.bind(this);
26 | 		this.deleteCompletedTasks = this.deleteCompletedTasks.bind(this);
27 | 	}
28 | 
29 | 	/**
30 | 	 * Update a task by index and replace the new done value with old value.
31 | 	 * @param {Object} {index, done}
32 | 	 */
33 | 	onChangeTask({ index, done }) {
34 | 		this.props.todoList.updateTaskStatus({ index, done });
35 | 	}
36 | 
37 | 	/**
38 | 	 * Delete a task by index
39 | 	 * @param {Number} index
40 | 	 */
41 | 	onDeleteTask(index) {
42 | 		this.props.todoList.deleteTask(index);
43 | 	}
44 | 	/**
45 | 	 * Delete all completed tasks
46 | 	 */
47 | 	deleteCompletedTasks() {
48 | 		this.props.todoList.deleteCompletedTasks();
49 | 	}
50 | 	/**
51 | 	 * Change tasks filter to "uncompleted", "active" or "all"
52 | 	 * @param {String} filter
53 | 	 */
54 | 	onChangeFilter(filter) {
55 | 		this.props.todoList.filterTasksBy(filter);
56 | 	}
57 | 	/**
58 | 	 * Add a new task from search input box value
59 | 	 * @param {String} value
60 | 	 */
61 | 	addNewTask(value) {
62 | 		this.props.todoList.addNewTask(value);
63 | 	}
64 | 
65 | 	render() {
66 | 		const { todoList } = this.props;
67 | 
68 | 		return (
69 | 			<Fragment>
70 | 				<Title />
71 | 				<AddTask onChange={this.addNewTask} />
72 | 				<FilterTodo onChange={this.onChangeFilter} />
73 | 
74 | 				<ActiveTasks value={todoList.getNumberOfActiveTasks} />
75 | 
76 | 				<Map data={todoList.getTaskList} name="todo">
77 | 					<List onChange={this.onChangeTask} onDelete={this.onDeleteTask} />
78 | 				</Map>
79 | 				<Maybe condition={!todoList.getTaskList.length}>
80 | 					<Empty />
81 | 				</Maybe>
82 | 
83 | 				<Button disabled={!todoList.getNumberOfCompletedTasks} type="danger" icon="delete" onClick={this.deleteCompletedTasks}>
84 | 					Delete all completed tasks
85 | 				</Button>
86 | 			</Fragment>
87 | 		);
88 | 	}
89 | }
90 | 
91 | export default TaskList;
92 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | const fs = require("fs");
 3 | const url = require("url");
 4 | 
 5 | // Make sure any symlinks in the project folder are resolved:
 6 | // https://github.com/facebook/create-react-app/issues/637
 7 | const appDirectory = fs.realpathSync(process.cwd());
 8 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
 9 | 
10 | const envPublicUrl = process.env.PUBLIC_URL;
11 | 
12 | function ensureSlash(inputPath, needsSlash) {
13 | 	const hasSlash = inputPath.endsWith("/");
14 | 	if (hasSlash && !needsSlash) {
15 | 		return inputPath.substr(0, inputPath.length - 1);
16 | 	} else if (!hasSlash && needsSlash) {
17 | 		return `${inputPath}/`;
18 | 	} else {
19 | 		return inputPath;
20 | 	}
21 | }
22 | 
23 | const getPublicUrl = appPackageJson => envPublicUrl || require(appPackageJson).homepage;
24 | 
25 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
26 | // "public path" at which the app is served.
27 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
28 | // single-page apps that may serve index.html for nested URLs like /todos/42.
29 | // We can't use a relative path in HTML because we don't want to load something
30 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
31 | function getServedPath(appPackageJson) {
32 | 	const publicUrl = getPublicUrl(appPackageJson);
33 | 	const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : "/");
34 | 	return ensureSlash(servedUrl, true);
35 | }
36 | 
37 | const moduleFileExtensions = ["web.mjs", "mjs", "web.js", "js", "web.ts", "ts", "web.tsx", "tsx", "json", "web.jsx", "jsx"];
38 | 
39 | // Resolve file paths in the same order as webpack
40 | const resolveModule = (resolveFn, filePath) => {
41 | 	const extension = moduleFileExtensions.find(extension => fs.existsSync(resolveFn(`${filePath}.${extension}`)));
42 | 
43 | 	if (extension) {
44 | 		return resolveFn(`${filePath}.${extension}`);
45 | 	}
46 | 
47 | 	return resolveFn(`${filePath}.js`);
48 | };
49 | 
50 | // config after eject: we're in ./config/
51 | module.exports = {
52 | 	dotenv: resolveApp(".env"),
53 | 	appPath: resolveApp("."),
54 | 	appBuild: resolveApp("build"),
55 | 	appPublic: resolveApp("public"),
56 | 	appHtml: resolveApp("public/index.html"),
57 | 	appIndexJs: resolveModule(resolveApp, "src/index"),
58 | 	appPackageJson: resolveApp("package.json"),
59 | 	appSrc: resolveApp("src"),
60 | 	appTsConfig: resolveApp("tsconfig.json"),
61 | 	yarnLockFile: resolveApp("yarn.lock"),
62 | 	testsSetup: resolveModule(resolveApp, "src/setupTests"),
63 | 	proxySetup: resolveApp("src/setupProxy.js"),
64 | 	appNodeModules: resolveApp("node_modules"),
65 | 	publicUrl: getPublicUrl(resolveApp("package.json")),
66 | 	servedPath: getServedPath(resolveApp("package.json")),
67 | };
68 | 
69 | module.exports.moduleFileExtensions = moduleFileExtensions;
70 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | const fs = require("fs");
 2 | const path = require("path");
 3 | const paths = require("./paths");
 4 | 
 5 | // Make sure that including paths.js after env.js will read .env variables.
 6 | delete require.cache[require.resolve("./paths")];
 7 | 
 8 | const NODE_ENV = process.env.NODE_ENV;
 9 | if (!NODE_ENV) {
10 | 	throw new Error("The NODE_ENV environment variable is required but was not specified.");
11 | }
12 | 
13 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
14 | var dotenvFiles = [
15 | 	`${paths.dotenv}.${NODE_ENV}.local`,
16 | 	`${paths.dotenv}.${NODE_ENV}`,
17 | 	// Don't include `.env.local` for `test` environment
18 | 	// since normally you expect tests to produce the same
19 | 	// results for everyone
20 | 	NODE_ENV !== "test" && `${paths.dotenv}.local`,
21 | 	paths.dotenv,
22 | ].filter(Boolean);
23 | 
24 | // Load environment variables from .env* files. Suppress warnings using silent
25 | // if this file is missing. dotenv will never modify any environment variables
26 | // that have already been set.  Variable expansion is supported in .env files.
27 | // https://github.com/motdotla/dotenv
28 | // https://github.com/motdotla/dotenv-expand
29 | dotenvFiles.forEach(dotenvFile => {
30 | 	if (fs.existsSync(dotenvFile)) {
31 | 		require("dotenv-expand")(
32 | 			require("dotenv").config({
33 | 				path: dotenvFile,
34 | 			}),
35 | 		);
36 | 	}
37 | });
38 | 
39 | // We support resolving modules according to `NODE_PATH`.
40 | // This lets you use absolute paths in imports inside large monorepos:
41 | // https://github.com/facebook/create-react-app/issues/253.
42 | // It works similar to `NODE_PATH` in Node itself:
43 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
44 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
45 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
46 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
47 | // We also resolve them to make sure all tools using them work consistently.
48 | const appDirectory = fs.realpathSync(process.cwd());
49 | process.env.NODE_PATH = (process.env.NODE_PATH || "")
50 | 	.split(path.delimiter)
51 | 	.filter(folder => folder && !path.isAbsolute(folder))
52 | 	.map(folder => path.resolve(appDirectory, folder))
53 | 	.join(path.delimiter);
54 | 
55 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
56 | // injected into the application via DefinePlugin in Webpack configuration.
57 | const REACT_APP = /^REACT_APP_/i;
58 | 
59 | function getClientEnvironment(publicUrl) {
60 | 	const raw = Object.keys(process.env)
61 | 		.filter(key => REACT_APP.test(key))
62 | 		.reduce(
63 | 			(env, key) => {
64 | 				env[key] = process.env[key];
65 | 				return env;
66 | 			},
67 | 			{
68 | 				// Useful for determining whether we’re running in production mode.
69 | 				// Most importantly, it switches React into the correct mode.
70 | 				NODE_ENV: process.env.NODE_ENV || "development",
71 | 				// Useful for resolving the correct path to static assets in `public`.
72 | 				// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
73 | 				// This should only be used as an escape hatch. Normally you would put
74 | 				// images into the `src` and `import` them in code to get their paths.
75 | 				PUBLIC_URL: publicUrl,
76 | 			},
77 | 		);
78 | 	// Stringify all values so we can feed into Webpack DefinePlugin
79 | 	const stringified = {
80 | 		"process.env": Object.keys(raw).reduce((env, key) => {
81 | 			env[key] = JSON.stringify(raw[key]);
82 | 			return env;
83 | 		}, {}),
84 | 	};
85 | 
86 | 	return { raw, stringified };
87 | }
88 | 
89 | module.exports = getClientEnvironment;
90 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const fs = require('fs');
 19 | const chalk = require('chalk');
 20 | const webpack = require('webpack');
 21 | const WebpackDevServer = require('webpack-dev-server');
 22 | const clearConsole = require('react-dev-utils/clearConsole');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const {
 25 |   choosePort,
 26 |   createCompiler,
 27 |   prepareProxy,
 28 |   prepareUrls,
 29 | } = require('react-dev-utils/WebpackDevServerUtils');
 30 | const openBrowser = require('react-dev-utils/openBrowser');
 31 | const paths = require('../config/paths');
 32 | const config = require('../config/webpack.config.dev');
 33 | const createDevServerConfig = require('../config/webpackDevServer.config');
 34 | 
 35 | const useYarn = fs.existsSync(paths.yarnLockFile);
 36 | const isInteractive = process.stdout.isTTY;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // Tools like Cloud9 rely on this.
 44 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 45 | const HOST = process.env.HOST || '0.0.0.0';
 46 | 
 47 | if (process.env.HOST) {
 48 |   console.log(
 49 |     chalk.cyan(
 50 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 51 |         chalk.bold(process.env.HOST)
 52 |       )}`
 53 |     )
 54 |   );
 55 |   console.log(
 56 |     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
 57 |   );
 58 |   console.log(
 59 |     `Learn more here: ${chalk.yellow('http://bit.ly/CRA-advanced-config')}`
 60 |   );
 61 |   console.log();
 62 | }
 63 | 
 64 | // We require that you explictly set browsers and do not fall back to
 65 | // browserslist defaults.
 66 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 67 | checkBrowsers(paths.appPath, isInteractive)
 68 |   .then(() => {
 69 |     // We attempt to use the default port but if it is busy, we offer the user to
 70 |     // run on a different port. `choosePort()` Promise resolves to the next free port.
 71 |     return choosePort(HOST, DEFAULT_PORT);
 72 |   })
 73 |   .then(port => {
 74 |     if (port == null) {
 75 |       // We have not found a port.
 76 |       return;
 77 |     }
 78 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 79 |     const appName = require(paths.appPackageJson).name;
 80 |     const urls = prepareUrls(protocol, HOST, port);
 81 |     // Create a webpack compiler that is configured with custom messages.
 82 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
 83 |     // Load proxy config
 84 |     const proxySetting = require(paths.appPackageJson).proxy;
 85 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
 86 |     // Serve webpack assets generated by the compiler over a web server.
 87 |     const serverConfig = createDevServerConfig(
 88 |       proxyConfig,
 89 |       urls.lanUrlForConfig
 90 |     );
 91 |     const devServer = new WebpackDevServer(compiler, serverConfig);
 92 |     // Launch WebpackDevServer.
 93 |     devServer.listen(port, HOST, err => {
 94 |       if (err) {
 95 |         return console.log(err);
 96 |       }
 97 |       if (isInteractive) {
 98 |         clearConsole();
 99 |       }
100 |       console.log(chalk.cyan('Starting the development server...\n'));
101 |       openBrowser(urls.localUrlForBrowser);
102 |     });
103 | 
104 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
105 |       process.on(sig, function() {
106 |         devServer.close();
107 |         process.exit();
108 |       });
109 |     });
110 |   })
111 |   .catch(err => {
112 |     if (err && err.message) {
113 |       console.log(err.message);
114 |     }
115 |     process.exit(1);
116 |   });
117 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"name": "todolist",
  3 | 	"version": "1.0.0",
  4 | 	"homepage": "https://iran-react-community.github.io/todo-list/",
  5 | 	"repository": {
  6 | 		"type": "git",
  7 | 		"url": "git+https://iran-react-community.github.io/todo-list.git"
  8 | 	},
  9 | 	"author": "Ali Torki <ali_4286@live.com>",
 10 | 	"license": "MIT",
 11 | 	"bugs": {
 12 | 		"url": "https://iran-react-community.github.io/todo-list/issues"
 13 | 	},
 14 | 	"scripts": {
 15 | 		"start": "node scripts/start.js",
 16 | 		"build": "node scripts/build.js",
 17 | 		"test": "node scripts/test.js",
 18 | 		"predeploy": "npm run build",
 19 | 		"deploy": "gh-pages -d build"
 20 | 	},
 21 | 	"dependencies": {
 22 | 		"@emotion/core": "^10.0.7",
 23 | 		"@emotion/styled": "^10.0.7",
 24 | 		"antd": "^3.13.2",
 25 | 		"gh-pages": "^2.0.1",
 26 | 		"lodash": "^4.17.13",
 27 | 		"mobx": "^5.9.0",
 28 | 		"mobx-persist": "^0.4.1",
 29 | 		"mobx-react": "^5.4.3",
 30 | 		"prop-types": "^15.6.2",
 31 | 		"react": "^16.8.1",
 32 | 		"react-addons-css-transition-group": "^15.6.2",
 33 | 		"react-addons-shallow-compare": "^15.6.2",
 34 | 		"react-dom": "^16.8.1"
 35 | 	},
 36 | 	"devDependencies": {
 37 | 		"@babel/core": "^7.2.2",
 38 | 		"@babel/plugin-proposal-class-properties": "^7.3.0",
 39 | 		"@babel/plugin-proposal-decorators": "^7.3.0",
 40 | 		"@emotion/babel-preset-css-prop": "^10.0.7",
 41 | 		"@svgr/webpack": "4.1.0",
 42 | 		"babel-core": "7.0.0-bridge.0",
 43 | 		"babel-eslint": "10.0.1",
 44 | 		"babel-jest": "24.1.0",
 45 | 		"babel-loader": "8.0.5",
 46 | 		"babel-plugin-import": "^1.11.0",
 47 | 		"babel-plugin-named-asset-import": "^0.3.0",
 48 | 		"babel-preset-react-app": "^7.0.0",
 49 | 		"bfj": "6.1.1",
 50 | 		"case-sensitive-paths-webpack-plugin": "2.2.0",
 51 | 		"chalk": "2.4.2",
 52 | 		"css-loader": "2.1.0",
 53 | 		"dotenv": "6.2.0",
 54 | 		"dotenv-expand": "4.2.0",
 55 | 		"eslint": "5.13.0",
 56 | 		"eslint-config-react-app": "^3.0.6",
 57 | 		"eslint-loader": "2.1.2",
 58 | 		"eslint-plugin-flowtype": "3.2.1",
 59 | 		"eslint-plugin-import": "2.16.0",
 60 | 		"eslint-plugin-jsx-a11y": "6.2.1",
 61 | 		"eslint-plugin-react": "7.12.4",
 62 | 		"file-loader": "3.0.1",
 63 | 		"fork-ts-checker-webpack-plugin-alt": "0.4.14",
 64 | 		"fs-extra": "7.0.1",
 65 | 		"html-webpack-plugin": "4.0.0-alpha.2",
 66 | 		"identity-obj-proxy": "3.0.0",
 67 | 		"jest": "24.1.0",
 68 | 		"jest-pnp-resolver": "1.1.0",
 69 | 		"jest-resolve": "24.1.0",
 70 | 		"mini-css-extract-plugin": "0.5.0",
 71 | 		"node-sass": "^4.11.0",
 72 | 		"optimize-css-assets-webpack-plugin": "5.0.1",
 73 | 		"pnp-webpack-plugin": "1.2.1",
 74 | 		"postcss-flexbugs-fixes": "4.1.0",
 75 | 		"postcss-loader": "3.0.0",
 76 | 		"postcss-preset-env": "6.5.0",
 77 | 		"postcss-safe-parser": "4.0.1",
 78 | 		"react-app-polyfill": "^0.2.0",
 79 | 		"react-dev-utils": "^7.0.1",
 80 | 		"resolve": "1.10.0",
 81 | 		"sass-loader": "7.1.0",
 82 | 		"style-loader": "0.23.1",
 83 | 		"terser-webpack-plugin": "1.2.2",
 84 | 		"url-loader": "1.1.2",
 85 | 		"webpack": "4.29.3",
 86 | 		"webpack-dev-server": "3.1.14",
 87 | 		"webpack-manifest-plugin": "2.0.4",
 88 | 		"workbox-webpack-plugin": "3.6.3"
 89 | 	},
 90 | 	"browserslist": [
 91 | 		">0.2%",
 92 | 		"not dead",
 93 | 		"not ie <= 11",
 94 | 		"not op_mini all"
 95 | 	],
 96 | 	"jest": {
 97 | 		"collectCoverageFrom": [
 98 | 			"src/**/*.{js,jsx,ts,tsx}",
 99 | 			"!src/**/*.d.ts"
100 | 		],
101 | 		"resolver": "jest-pnp-resolver",
102 | 		"setupFiles": [
103 | 			"react-app-polyfill/jsdom"
104 | 		],
105 | 		"testMatch": [
106 | 			"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
107 | 			"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
108 | 		],
109 | 		"testEnvironment": "jsdom",
110 | 		"testURL": "http://localhost",
111 | 		"transform": {
112 | 			"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
113 | 			"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
114 | 			"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
115 | 		},
116 | 		"transformIgnorePatterns": [
117 | 			"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
118 | 			"^.+\\.module\\.(css|sass|scss)$"
119 | 		],
120 | 		"moduleNameMapper": {
121 | 			"^react-native$": "react-native-web",
122 | 			"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
123 | 		},
124 | 		"moduleFileExtensions": [
125 | 			"web.js",
126 | 			"js",
127 | 			"web.ts",
128 | 			"ts",
129 | 			"web.tsx",
130 | 			"tsx",
131 | 			"json",
132 | 			"web.jsx",
133 | 			"jsx",
134 | 			"node"
135 | 		]
136 | 	}
137 | }
138 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read http://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit http://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl)
104 |     .then(response => {
105 |       // Ensure service worker exists, and that we really are getting a JS file.
106 |       const contentType = response.headers.get('content-type');
107 |       if (
108 |         response.status === 404 ||
109 |         (contentType != null && contentType.indexOf('javascript') === -1)
110 |       ) {
111 |         // No service worker found. Probably a different app. Reload the page.
112 |         navigator.serviceWorker.ready.then(registration => {
113 |           registration.unregister().then(() => {
114 |             window.location.reload();
115 |           });
116 |         });
117 |       } else {
118 |         // Service worker found. Proceed as normal.
119 |         registerValidSW(swUrl, config);
120 |       }
121 |     })
122 |     .catch(() => {
123 |       console.log(
124 |         'No internet connection found. App is running in offline mode.'
125 |       );
126 |     });
127 | }
128 | 
129 | export function unregister() {
130 |   if ('serviceWorker' in navigator) {
131 |     navigator.serviceWorker.ready.then(registration => {
132 |       registration.unregister();
133 |     });
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | const errorOverlayMiddleware = require("react-dev-utils/errorOverlayMiddleware");
  2 | const evalSourceMapMiddleware = require("react-dev-utils/evalSourceMapMiddleware");
  3 | const noopServiceWorkerMiddleware = require("react-dev-utils/noopServiceWorkerMiddleware");
  4 | const ignoredFiles = require("react-dev-utils/ignoredFiles");
  5 | const config = require("./webpack.config.dev");
  6 | const paths = require("./paths");
  7 | const fs = require("fs");
  8 | 
  9 | const protocol = process.env.HTTPS === "true" ? "https" : "http";
 10 | const host = process.env.HOST || "0.0.0.0";
 11 | 
 12 | module.exports = function(proxy, allowedHost) {
 13 | 	return {
 14 | 		// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 15 | 		// websites from potentially accessing local content through DNS rebinding:
 16 | 		// https://github.com/webpack/webpack-dev-server/issues/887
 17 | 		// https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 18 | 		// However, it made several existing use cases such as development in cloud
 19 | 		// environment or subdomains in development significantly more complicated:
 20 | 		// https://github.com/facebook/create-react-app/issues/2271
 21 | 		// https://github.com/facebook/create-react-app/issues/2233
 22 | 		// While we're investigating better solutions, for now we will take a
 23 | 		// compromise. Since our WDS configuration only serves files in the `public`
 24 | 		// folder we won't consider accessing them a vulnerability. However, if you
 25 | 		// use the `proxy` feature, it gets more dangerous because it can expose
 26 | 		// remote code execution vulnerabilities in backends like Django and Rails.
 27 | 		// So we will disable the host check normally, but enable it if you have
 28 | 		// specified the `proxy` setting. Finally, we let you override it if you
 29 | 		// really know what you're doing with a special environment variable.
 30 | 		disableHostCheck: !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === "true",
 31 | 		// Enable gzip compression of generated files.
 32 | 		compress: true,
 33 | 		// Silence WebpackDevServer's own logs since they're generally not useful.
 34 | 		// It will still show compile warnings and errors with this setting.
 35 | 		clientLogLevel: "none",
 36 | 		// By default WebpackDevServer serves physical files from current directory
 37 | 		// in addition to all the virtual build products that it serves from memory.
 38 | 		// This is confusing because those files won’t automatically be available in
 39 | 		// production build folder unless we copy them. However, copying the whole
 40 | 		// project directory is dangerous because we may expose sensitive files.
 41 | 		// Instead, we establish a convention that only files in `public` directory
 42 | 		// get served. Our build script will copy `public` into the `build` folder.
 43 | 		// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 44 | 		// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 45 | 		// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 46 | 		// Note that we only recommend to use `public` folder as an escape hatch
 47 | 		// for files like `favicon.ico`, `manifest.json`, and libraries that are
 48 | 		// for some reason broken when imported through Webpack. If you just want to
 49 | 		// use an image, put it in `src` and `import` it from JavaScript instead.
 50 | 		contentBase: paths.appPublic,
 51 | 		// By default files from `contentBase` will not trigger a page reload.
 52 | 		watchContentBase: true,
 53 | 		// Enable hot reloading server. It will provide /sockjs-node/ endpoint
 54 | 		// for the WebpackDevServer client so it can learn when the files were
 55 | 		// updated. The WebpackDevServer client is included as an entry point
 56 | 		// in the Webpack development configuration. Note that only changes
 57 | 		// to CSS are currently hot reloaded. JS changes will refresh the browser.
 58 | 		hot: true,
 59 | 		// It is important to tell WebpackDevServer to use the same "root" path
 60 | 		// as we specified in the config. In development, we always serve from /.
 61 | 		publicPath: config.output.publicPath,
 62 | 		// WebpackDevServer is noisy by default so we emit custom message instead
 63 | 		// by listening to the compiler events with `compiler.hooks[...].tap` calls above.
 64 | 		quiet: true,
 65 | 		// Reportedly, this avoids CPU overload on some systems.
 66 | 		// https://github.com/facebook/create-react-app/issues/293
 67 | 		// src/node_modules is not ignored to support absolute imports
 68 | 		// https://github.com/facebook/create-react-app/issues/1065
 69 | 		watchOptions: {
 70 | 			ignored: ignoredFiles(paths.appSrc),
 71 | 		},
 72 | 		// Enable HTTPS if the HTTPS environment variable is set to 'true'
 73 | 		https: protocol === "https",
 74 | 		host,
 75 | 		overlay: false,
 76 | 		historyApiFallback: {
 77 | 			// Paths with dots should still use the history fallback.
 78 | 			// See https://github.com/facebook/create-react-app/issues/387.
 79 | 			disableDotRule: true,
 80 | 		},
 81 | 		public: allowedHost,
 82 | 		proxy,
 83 | 		before(app, server) {
 84 | 			if (fs.existsSync(paths.proxySetup)) {
 85 | 				// This registers user provided middleware for proxy reasons
 86 | 				require(paths.proxySetup)(app);
 87 | 			}
 88 | 
 89 | 			// This lets us fetch source contents from webpack for the error overlay
 90 | 			app.use(evalSourceMapMiddleware(server));
 91 | 			// This lets us open files from the runtime error overlay.
 92 | 			app.use(errorOverlayMiddleware());
 93 | 
 94 | 			// This service worker file is effectively a 'no-op' that will reset any
 95 | 			// previous service worker registered for the same host:port combination.
 96 | 			// We do this in development to avoid hitting the production cache if
 97 | 			// it used the same host and port.
 98 | 			// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
 99 | 			app.use(noopServiceWorkerMiddleware());
100 | 		},
101 | 	};
102 | };
103 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const path = require('path');
 19 | const chalk = require('chalk');
 20 | const fs = require('fs-extra');
 21 | const webpack = require('webpack');
 22 | const bfj = require('bfj');
 23 | const config = require('../config/webpack.config.prod');
 24 | const paths = require('../config/paths');
 25 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 26 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 27 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 28 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 29 | const printBuildError = require('react-dev-utils/printBuildError');
 30 | 
 31 | const measureFileSizesBeforeBuild =
 32 |   FileSizeReporter.measureFileSizesBeforeBuild;
 33 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 34 | const useYarn = fs.existsSync(paths.yarnLockFile);
 35 | 
 36 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 37 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 38 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 39 | 
 40 | const isInteractive = process.stdout.isTTY;
 41 | 
 42 | // Warn and crash if required files are missing
 43 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 44 |   process.exit(1);
 45 | }
 46 | 
 47 | // Process CLI arguments
 48 | const argv = process.argv.slice(2);
 49 | const writeStatsJson = argv.indexOf('--stats') !== -1;
 50 | 
 51 | // We require that you explicitly set browsers and do not fall back to
 52 | // browserslist defaults.
 53 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 54 | checkBrowsers(paths.appPath, isInteractive)
 55 |   .then(() => {
 56 |     // First, read the current file sizes in build directory.
 57 |     // This lets us display how much they changed later.
 58 |     return measureFileSizesBeforeBuild(paths.appBuild);
 59 |   })
 60 |   .then(previousFileSizes => {
 61 |     // Remove all content but keep the directory so that
 62 |     // if you're in it, you don't end up in Trash
 63 |     fs.emptyDirSync(paths.appBuild);
 64 |     // Merge with the public folder
 65 |     copyPublicFolder();
 66 |     // Start the webpack build
 67 |     return build(previousFileSizes);
 68 |   })
 69 |   .then(
 70 |     ({ stats, previousFileSizes, warnings }) => {
 71 |       if (warnings.length) {
 72 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 73 |         console.log(warnings.join('\n\n'));
 74 |         console.log(
 75 |           '\nSearch for the ' +
 76 |             chalk.underline(chalk.yellow('keywords')) +
 77 |             ' to learn more about each warning.'
 78 |         );
 79 |         console.log(
 80 |           'To ignore, add ' +
 81 |             chalk.cyan('// eslint-disable-next-line') +
 82 |             ' to the line before.\n'
 83 |         );
 84 |       } else {
 85 |         console.log(chalk.green('Compiled successfully.\n'));
 86 |       }
 87 | 
 88 |       console.log('File sizes after gzip:\n');
 89 |       printFileSizesAfterBuild(
 90 |         stats,
 91 |         previousFileSizes,
 92 |         paths.appBuild,
 93 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 94 |         WARN_AFTER_CHUNK_GZIP_SIZE
 95 |       );
 96 |       console.log();
 97 | 
 98 |       const appPackage = require(paths.appPackageJson);
 99 |       const publicUrl = paths.publicUrl;
100 |       const publicPath = config.output.publicPath;
101 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
102 |       printHostingInstructions(
103 |         appPackage,
104 |         publicUrl,
105 |         publicPath,
106 |         buildFolder,
107 |         useYarn
108 |       );
109 |     },
110 |     err => {
111 |       console.log(chalk.red('Failed to compile.\n'));
112 |       printBuildError(err);
113 |       process.exit(1);
114 |     }
115 |   )
116 |   .catch(err => {
117 |     if (err && err.message) {
118 |       console.log(err.message);
119 |     }
120 |     process.exit(1);
121 |   });
122 | 
123 | // Create the production build and print the deployment instructions.
124 | function build(previousFileSizes) {
125 |   console.log('Creating an optimized production build...');
126 | 
127 |   let compiler = webpack(config);
128 |   return new Promise((resolve, reject) => {
129 |     compiler.run((err, stats) => {
130 |       let messages;
131 |       if (err) {
132 |         if (!err.message) {
133 |           return reject(err);
134 |         }
135 |         messages = formatWebpackMessages({
136 |           errors: [err.message],
137 |           warnings: [],
138 |         });
139 |       } else {
140 |         messages = formatWebpackMessages(
141 |           stats.toJson({ all: false, warnings: true, errors: true })
142 |         );
143 |       }
144 |       if (messages.errors.length) {
145 |         // Only keep the first error. Others are often indicative
146 |         // of the same problem, but confuse the reader with noise.
147 |         if (messages.errors.length > 1) {
148 |           messages.errors.length = 1;
149 |         }
150 |         return reject(new Error(messages.errors.join('\n\n')));
151 |       }
152 |       if (
153 |         process.env.CI &&
154 |         (typeof process.env.CI !== 'string' ||
155 |           process.env.CI.toLowerCase() !== 'false') &&
156 |         messages.warnings.length
157 |       ) {
158 |         console.log(
159 |           chalk.yellow(
160 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
161 |               'Most CI servers set it automatically.\n'
162 |           )
163 |         );
164 |         return reject(new Error(messages.warnings.join('\n\n')));
165 |       }
166 | 
167 |       const resolveArgs = {
168 |         stats,
169 |         previousFileSizes,
170 |         warnings: messages.warnings,
171 |       };
172 |       if (writeStatsJson) {
173 |         return bfj
174 |           .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
175 |           .then(() => resolve(resolveArgs))
176 |           .catch(error => reject(new Error(error)));
177 |       }
178 | 
179 |       return resolve(resolveArgs);
180 |     });
181 |   });
182 | }
183 | 
184 | function copyPublicFolder() {
185 |   fs.copySync(paths.appPublic, paths.appBuild, {
186 |     dereference: true,
187 |     filter: file => file !== paths.appHtml,
188 |   });
189 | }
190 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | const fs = require("fs");
  4 | const path = require("path");
  5 | const resolve = require("resolve");
  6 | const webpack = require("webpack");
  7 | const PnpWebpackPlugin = require("pnp-webpack-plugin");
  8 | const HtmlWebpackPlugin = require("html-webpack-plugin");
  9 | const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
 10 | const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
 11 | const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin");
 12 | const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
 13 | const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent");
 14 | const getClientEnvironment = require("./env");
 15 | const paths = require("./paths");
 16 | const ManifestPlugin = require("webpack-manifest-plugin");
 17 | const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
 18 | const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin-alt");
 19 | const typescriptFormatter = require("react-dev-utils/typescriptFormatter");
 20 | 
 21 | // Webpack uses `publicPath` to determine where the app is being served from.
 22 | // In development, we always serve from the root. This makes config easier.
 23 | const publicPath = "/";
 24 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 25 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 26 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 27 | const publicUrl = "";
 28 | // Get environment variables to inject into our app.
 29 | const env = getClientEnvironment(publicUrl);
 30 | 
 31 | // Check if TypeScript is setup
 32 | const useTypeScript = fs.existsSync(paths.appTsConfig);
 33 | 
 34 | // style files regexes
 35 | const cssRegex = /\.css$/;
 36 | const cssModuleRegex = /\.module\.css$/;
 37 | const sassRegex = /\.(scss|sass)$/;
 38 | const sassModuleRegex = /\.module\.(scss|sass)$/;
 39 | 
 40 | // common function to get style loaders
 41 | const getStyleLoaders = (cssOptions, preProcessor) => {
 42 | 	const loaders = [
 43 | 		require.resolve("style-loader"),
 44 | 		{
 45 | 			loader: require.resolve("css-loader"),
 46 | 			options: cssOptions,
 47 | 		},
 48 | 		{
 49 | 			// Options for PostCSS as we reference these options twice
 50 | 			// Adds vendor prefixing based on your specified browser support in
 51 | 			// package.json
 52 | 			loader: require.resolve("postcss-loader"),
 53 | 			options: {
 54 | 				// Necessary for external CSS imports to work
 55 | 				// https://github.com/facebook/create-react-app/issues/2677
 56 | 				ident: "postcss",
 57 | 				plugins: () => [
 58 | 					require("postcss-flexbugs-fixes"),
 59 | 					require("postcss-preset-env")({
 60 | 						autoprefixer: {
 61 | 							flexbox: "no-2009",
 62 | 						},
 63 | 						stage: 3,
 64 | 					}),
 65 | 				],
 66 | 			},
 67 | 		},
 68 | 	];
 69 | 	if (preProcessor) {
 70 | 		loaders.push(require.resolve(preProcessor));
 71 | 	}
 72 | 	return loaders;
 73 | };
 74 | 
 75 | // This is the development configuration.
 76 | // It is focused on developer experience and fast rebuilds.
 77 | // The production configuration is different and lives in a separate file.
 78 | module.exports = {
 79 | 	mode: "development",
 80 | 	// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 81 | 	// See the discussion in https://github.com/facebook/create-react-app/issues/343
 82 | 	devtool: "cheap-module-source-map",
 83 | 	// These are the "entry points" to our application.
 84 | 	// This means they will be the "root" imports that are included in JS bundle.
 85 | 	entry: [
 86 | 		// Include an alternative client for WebpackDevServer. A client's job is to
 87 | 		// connect to WebpackDevServer by a socket and get notified about changes.
 88 | 		// When you save a file, the client will either apply hot updates (in case
 89 | 		// of CSS changes), or refresh the page (in case of JS changes). When you
 90 | 		// make a syntax error, this client will display a syntax error overlay.
 91 | 		// Note: instead of the default WebpackDevServer client, we use a custom one
 92 | 		// to bring better experience for Create React App users. You can replace
 93 | 		// the line below with these two lines if you prefer the stock client:
 94 | 		// require.resolve('webpack-dev-server/client') + '?/',
 95 | 		// require.resolve('webpack/hot/dev-server'),
 96 | 		require.resolve("react-dev-utils/webpackHotDevClient"),
 97 | 		// Finally, this is your app's code:
 98 | 		paths.appIndexJs,
 99 | 		// We include the app code last so that if there is a runtime error during
100 | 		// initialization, it doesn't blow up the WebpackDevServer client, and
101 | 		// changing JS code would still trigger a refresh.
102 | 	],
103 | 	output: {
104 | 		// Add /* filename */ comments to generated require()s in the output.
105 | 		pathinfo: true,
106 | 		// This does not produce a real file. It's just the virtual path that is
107 | 		// served by WebpackDevServer in development. This is the JS bundle
108 | 		// containing code from all our entry points, and the Webpack runtime.
109 | 		filename: "static/js/bundle.js",
110 | 		// There are also additional JS chunk files if you use code splitting.
111 | 		chunkFilename: "static/js/[name].chunk.js",
112 | 		// This is the URL that app is served from. We use "/" in development.
113 | 		publicPath: publicPath,
114 | 		// Point sourcemap entries to original disk location (format as URL on Windows)
115 | 		devtoolModuleFilenameTemplate: info => path.resolve(info.absoluteResourcePath).replace(/\\/g, "/"),
116 | 	},
117 | 	optimization: {
118 | 		// Automatically split vendor and commons
119 | 		// https://twitter.com/wSokra/status/969633336732905474
120 | 		// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
121 | 		splitChunks: {
122 | 			chunks: "all",
123 | 			name: false,
124 | 		},
125 | 		// Keep the runtime chunk seperated to enable long term caching
126 | 		// https://twitter.com/wSokra/status/969679223278505985
127 | 		runtimeChunk: true,
128 | 	},
129 | 	resolve: {
130 | 		// This allows you to set a fallback for where Webpack should look for modules.
131 | 		// We placed these paths second because we want `node_modules` to "win"
132 | 		// if there are any conflicts. This matches Node resolution mechanism.
133 | 		// https://github.com/facebook/create-react-app/issues/253
134 | 		modules: ["node_modules"].concat(
135 | 			// It is guaranteed to exist because we tweak it in `env.js`
136 | 			process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
137 | 		),
138 | 		// These are the reasonable defaults supported by the Node ecosystem.
139 | 		// We also include JSX as a common component filename extension to support
140 | 		// some tools, although we do not recommend using it, see:
141 | 		// https://github.com/facebook/create-react-app/issues/290
142 | 		// `web` extension prefixes have been added for better support
143 | 		// for React Native Web.
144 | 		extensions: paths.moduleFileExtensions.map(ext => `.${ext}`).filter(ext => useTypeScript || !ext.includes("ts")),
145 | 		alias: {
146 | 			// Support React Native Web
147 | 			// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
148 | 			"react-native": "react-native-web",
149 | 		},
150 | 		plugins: [
151 | 			// Adds support for installing with Plug'n'Play, leading to faster installs and adding
152 | 			// guards against forgotten dependencies and such.
153 | 			PnpWebpackPlugin,
154 | 			// Prevents users from importing files from outside of src/ (or node_modules/).
155 | 			// This often causes confusion because we only process files within src/ with babel.
156 | 			// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
157 | 			// please link the files into your node_modules/ and let module-resolution kick in.
158 | 			// Make sure your source files are compiled, as they will not be processed in any way.
159 | 			new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
160 | 		],
161 | 	},
162 | 	resolveLoader: {
163 | 		plugins: [
164 | 			// Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
165 | 			// from the current package.
166 | 			PnpWebpackPlugin.moduleLoader(module),
167 | 		],
168 | 	},
169 | 	module: {
170 | 		strictExportPresence: true,
171 | 		rules: [
172 | 			// Disable require.ensure as it's not a standard language feature.
173 | 			{ parser: { requireEnsure: false } },
174 | 
175 | 			// First, run the linter.
176 | 			// It's important to do this before Babel processes the JS.
177 | 			{
178 | 				test: /\.(js|mjs|jsx)$/,
179 | 				enforce: "pre",
180 | 				use: [
181 | 					{
182 | 						options: {
183 | 							formatter: require.resolve("react-dev-utils/eslintFormatter"),
184 | 							eslintPath: require.resolve("eslint"),
185 | 						},
186 | 						loader: require.resolve("eslint-loader"),
187 | 					},
188 | 				],
189 | 				include: paths.appSrc,
190 | 			},
191 | 			{
192 | 				// "oneOf" will traverse all following loaders until one will
193 | 				// match the requirements. When no loader matches it will fall
194 | 				// back to the "file" loader at the end of the loader list.
195 | 				oneOf: [
196 | 					// "url" loader works like "file" loader except that it embeds assets
197 | 					// smaller than specified limit in bytes as data URLs to avoid requests.
198 | 					// A missing `test` is equivalent to a match.
199 | 					{
200 | 						test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
201 | 						loader: require.resolve("url-loader"),
202 | 						options: {
203 | 							limit: 10000,
204 | 							name: "static/media/[name].[hash:8].[ext]",
205 | 						},
206 | 					},
207 | 					// Process application JS with Babel.
208 | 					// The preset includes JSX, Flow, and some ESnext features.
209 | 					{
210 | 						test: /\.(js|mjs|jsx|ts|tsx)$/,
211 | 						include: paths.appSrc,
212 | 						loader: require.resolve("babel-loader"),
213 | 						options: {
214 | 							customize: require.resolve("babel-preset-react-app/webpack-overrides"),
215 | 
216 | 							plugins: [
217 | 								[
218 | 									require.resolve("babel-plugin-named-asset-import"),
219 | 									{
220 | 										loaderMap: {
221 | 											svg: {
222 | 												ReactComponent: "@svgr/webpack?-prettier,-svgo![path]",
223 | 											},
224 | 										},
225 | 									},
226 | 								],
227 | 							],
228 | 							// This is a feature of `babel-loader` for webpack (not Babel itself).
229 | 							// It enables caching results in ./node_modules/.cache/babel-loader/
230 | 							// directory for faster rebuilds.
231 | 							cacheDirectory: true,
232 | 							// Don't waste time on Gzipping the cache
233 | 							cacheCompression: false,
234 | 						},
235 | 					},
236 | 					// Process any JS outside of the app with Babel.
237 | 					// Unlike the application JS, we only compile the standard ES features.
238 | 					{
239 | 						test: /\.(js|mjs)$/,
240 | 						exclude: /@babel(?:\/|\\{1,2})runtime/,
241 | 						loader: require.resolve("babel-loader"),
242 | 						options: {
243 | 							babelrc: false,
244 | 							configFile: false,
245 | 							compact: false,
246 | 							presets: [[require.resolve("babel-preset-react-app/dependencies"), { helpers: true }]],
247 | 							cacheDirectory: true,
248 | 							// Don't waste time on Gzipping the cache
249 | 							cacheCompression: false,
250 | 
251 | 							// If an error happens in a package, it's possible to be
252 | 							// because it was compiled. Thus, we don't want the browser
253 | 							// debugger to show the original code. Instead, the code
254 | 							// being evaluated would be much more helpful.
255 | 							sourceMaps: false,
256 | 						},
257 | 					},
258 | 					// "postcss" loader applies autoprefixer to our CSS.
259 | 					// "css" loader resolves paths in CSS and adds assets as dependencies.
260 | 					// "style" loader turns CSS into JS modules that inject <style> tags.
261 | 					// In production, we use a plugin to extract that CSS to a file, but
262 | 					// in development "style" loader enables hot editing of CSS.
263 | 					// By default we support CSS Modules with the extension .module.css
264 | 					{
265 | 						test: cssRegex,
266 | 						exclude: cssModuleRegex,
267 | 						use: getStyleLoaders({
268 | 							importLoaders: 1,
269 | 						}),
270 | 					},
271 | 					// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
272 | 					// using the extension .module.css
273 | 					{
274 | 						test: cssModuleRegex,
275 | 						use: getStyleLoaders({
276 | 							importLoaders: 1,
277 | 							modules: true,
278 | 							getLocalIdent: getCSSModuleLocalIdent,
279 | 						}),
280 | 					},
281 | 					// Opt-in support for SASS (using .scss or .sass extensions).
282 | 					// Chains the sass-loader with the css-loader and the style-loader
283 | 					// to immediately apply all styles to the DOM.
284 | 					// By default we support SASS Modules with the
285 | 					// extensions .module.scss or .module.sass
286 | 					{
287 | 						test: sassRegex,
288 | 						exclude: sassModuleRegex,
289 | 						use: getStyleLoaders({ importLoaders: 2 }, "sass-loader"),
290 | 					},
291 | 					// Adds support for CSS Modules, but using SASS
292 | 					// using the extension .module.scss or .module.sass
293 | 					{
294 | 						test: sassModuleRegex,
295 | 						use: getStyleLoaders(
296 | 							{
297 | 								importLoaders: 2,
298 | 								modules: true,
299 | 								getLocalIdent: getCSSModuleLocalIdent,
300 | 							},
301 | 							"sass-loader",
302 | 						),
303 | 					},
304 | 					// "file" loader makes sure those assets get served by WebpackDevServer.
305 | 					// When you `import` an asset, you get its (virtual) filename.
306 | 					// In production, they would get copied to the `build` folder.
307 | 					// This loader doesn't use a "test" so it will catch all modules
308 | 					// that fall through the other loaders.
309 | 					{
310 | 						// Exclude `js` files to keep "css" loader working as it injects
311 | 						// its runtime that would otherwise be processed through "file" loader.
312 | 						// Also exclude `html` and `json` extensions so they get processed
313 | 						// by webpacks internal loaders.
314 | 						exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
315 | 						loader: require.resolve("file-loader"),
316 | 						options: {
317 | 							name: "static/media/[name].[hash:8].[ext]",
318 | 						},
319 | 					},
320 | 				],
321 | 			},
322 | 			// ** STOP ** Are you adding a new loader?
323 | 			// Make sure to add the new loader(s) before the "file" loader.
324 | 		],
325 | 	},
326 | 	plugins: [
327 | 		// Generates an `index.html` file with the <script> injected.
328 | 		new HtmlWebpackPlugin({
329 | 			inject: true,
330 | 			template: paths.appHtml,
331 | 		}),
332 | 		// Makes some environment variables available in index.html.
333 | 		// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
334 | 		// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
335 | 		// In development, this will be an empty string.
336 | 		new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
337 | 		// This gives some necessary context to module not found errors, such as
338 | 		// the requesting resource.
339 | 		new ModuleNotFoundPlugin(paths.appPath),
340 | 		// Makes some environment variables available to the JS code, for example:
341 | 		// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
342 | 		new webpack.DefinePlugin(env.stringified),
343 | 		// This is necessary to emit hot updates (currently CSS only):
344 | 		new webpack.HotModuleReplacementPlugin(),
345 | 		// Watcher doesn't work well if you mistype casing in a path so we use
346 | 		// a plugin that prints an error when you attempt to do this.
347 | 		// See https://github.com/facebook/create-react-app/issues/240
348 | 		new CaseSensitivePathsPlugin(),
349 | 		// If you require a missing module and then `npm install` it, you still have
350 | 		// to restart the development server for Webpack to discover it. This plugin
351 | 		// makes the discovery automatic so you don't have to restart.
352 | 		// See https://github.com/facebook/create-react-app/issues/186
353 | 		new WatchMissingNodeModulesPlugin(paths.appNodeModules),
354 | 		// Moment.js is an extremely popular library that bundles large locale files
355 | 		// by default due to how Webpack interprets its code. This is a practical
356 | 		// solution that requires the user to opt into importing specific locales.
357 | 		// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
358 | 		// You can remove this if you don't use Moment.js:
359 | 		new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
360 | 		// Generate a manifest file which contains a mapping of all asset filenames
361 | 		// to their corresponding output file so that tools can pick it up without
362 | 		// having to parse `index.html`.
363 | 		new ManifestPlugin({
364 | 			fileName: "asset-manifest.json",
365 | 			publicPath: publicPath,
366 | 		}),
367 | 		// TypeScript type checking
368 | 		useTypeScript &&
369 | 			new ForkTsCheckerWebpackPlugin({
370 | 				typescript: resolve.sync("typescript", {
371 | 					basedir: paths.appNodeModules,
372 | 				}),
373 | 				async: false,
374 | 				checkSyntacticErrors: true,
375 | 				tsconfig: paths.appTsConfig,
376 | 				compilerOptions: {
377 | 					module: "esnext",
378 | 					moduleResolution: "node",
379 | 					resolveJsonModule: true,
380 | 					isolatedModules: true,
381 | 					noEmit: true,
382 | 					jsx: "preserve",
383 | 				},
384 | 				reportFiles: ["**", "!**/*.json", "!**/__tests__/**", "!**/?(*.)(spec|test).*", "!src/setupProxy.js", "!src/setupTests.*"],
385 | 				watch: paths.appSrc,
386 | 				silent: true,
387 | 				formatter: typescriptFormatter,
388 | 			}),
389 | 	].filter(Boolean),
390 | 
391 | 	// Some libraries import Node modules but don't use them in the browser.
392 | 	// Tell Webpack to provide empty mocks for them so importing them works.
393 | 	node: {
394 | 		dgram: "empty",
395 | 		fs: "empty",
396 | 		net: "empty",
397 | 		tls: "empty",
398 | 		child_process: "empty",
399 | 	},
400 | 	// Turn off performance processing because we utilize
401 | 	// our own hints via the FileSizeReporter
402 | 	performance: false,
403 | };
404 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | const fs = require("fs");
  2 | const path = require("path");
  3 | const webpack = require("webpack");
  4 | const resolve = require("resolve");
  5 | const PnpWebpackPlugin = require("pnp-webpack-plugin");
  6 | const HtmlWebpackPlugin = require("html-webpack-plugin");
  7 | const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
  8 | const TerserPlugin = require("terser-webpack-plugin");
  9 | const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 10 | const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 11 | const safePostCssParser = require("postcss-safe-parser");
 12 | const ManifestPlugin = require("webpack-manifest-plugin");
 13 | const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
 14 | const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
 15 | const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
 16 | const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent");
 17 | const paths = require("./paths");
 18 | const getClientEnvironment = require("./env");
 19 | const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
 20 | const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin-alt");
 21 | const typescriptFormatter = require("react-dev-utils/typescriptFormatter");
 22 | 
 23 | // Webpack uses `publicPath` to determine where the app is being served from.
 24 | // It requires a trailing slash, or the file assets will get an incorrect path.
 25 | const publicPath = paths.servedPath;
 26 | // Some apps do not use client-side routing with pushState.
 27 | // For these, "homepage" can be set to "." to enable relative asset paths.
 28 | const shouldUseRelativeAssetPaths = publicPath === "./";
 29 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 30 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
 31 | // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 32 | // makes for a smoother build process.
 33 | const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== "false";
 34 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 35 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 36 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 37 | const publicUrl = publicPath.slice(0, -1);
 38 | // Get environment variables to inject into our app.
 39 | const env = getClientEnvironment(publicUrl);
 40 | 
 41 | // Assert this just to be safe.
 42 | // Development builds of React are slow and not intended for production.
 43 | if (env.stringified["process.env"].NODE_ENV !== '"production"') {
 44 | 	throw new Error("Production builds must have NODE_ENV=production.");
 45 | }
 46 | 
 47 | // Check if TypeScript is setup
 48 | const useTypeScript = fs.existsSync(paths.appTsConfig);
 49 | 
 50 | // style files regexes
 51 | const cssRegex = /\.css$/;
 52 | const cssModuleRegex = /\.module\.css$/;
 53 | const sassRegex = /\.(scss|sass)$/;
 54 | const sassModuleRegex = /\.module\.(scss|sass)$/;
 55 | 
 56 | // common function to get style loaders
 57 | const getStyleLoaders = (cssOptions, preProcessor) => {
 58 | 	const loaders = [
 59 | 		{
 60 | 			loader: MiniCssExtractPlugin.loader,
 61 | 			options: Object.assign({}, shouldUseRelativeAssetPaths ? { publicPath: "../../" } : undefined),
 62 | 		},
 63 | 		{
 64 | 			loader: require.resolve("css-loader"),
 65 | 			options: cssOptions,
 66 | 		},
 67 | 		{
 68 | 			// Options for PostCSS as we reference these options twice
 69 | 			// Adds vendor prefixing based on your specified browser support in
 70 | 			// package.json
 71 | 			loader: require.resolve("postcss-loader"),
 72 | 			options: {
 73 | 				// Necessary for external CSS imports to work
 74 | 				// https://github.com/facebook/create-react-app/issues/2677
 75 | 				ident: "postcss",
 76 | 				plugins: () => [
 77 | 					require("postcss-flexbugs-fixes"),
 78 | 					require("postcss-preset-env")({
 79 | 						autoprefixer: {
 80 | 							flexbox: "no-2009",
 81 | 						},
 82 | 						stage: 3,
 83 | 					}),
 84 | 				],
 85 | 				sourceMap: shouldUseSourceMap,
 86 | 			},
 87 | 		},
 88 | 	];
 89 | 	if (preProcessor) {
 90 | 		loaders.push({
 91 | 			loader: require.resolve(preProcessor),
 92 | 			options: {
 93 | 				sourceMap: shouldUseSourceMap,
 94 | 			},
 95 | 		});
 96 | 	}
 97 | 	return loaders;
 98 | };
 99 | 
100 | // This is the production configuration.
101 | // It compiles slowly and is focused on producing a fast and minimal bundle.
102 | // The development configuration is different and lives in a separate file.
103 | module.exports = {
104 | 	mode: "production",
105 | 	// Don't attempt to continue if there are any errors.
106 | 	bail: true,
107 | 	// We generate sourcemaps in production. This is slow but gives good results.
108 | 	// You can exclude the *.map files from the build during deployment.
109 | 	devtool: shouldUseSourceMap ? "source-map" : false,
110 | 	// In production, we only want to load the app code.
111 | 	entry: [paths.appIndexJs],
112 | 	output: {
113 | 		// The build folder.
114 | 		path: paths.appBuild,
115 | 		// Generated JS file names (with nested folders).
116 | 		// There will be one main bundle, and one file per asynchronous chunk.
117 | 		// We don't currently advertise code splitting but Webpack supports it.
118 | 		filename: "static/js/[name].[chunkhash:8].js",
119 | 		chunkFilename: "static/js/[name].[chunkhash:8].chunk.js",
120 | 		// We inferred the "public path" (such as / or /my-project) from homepage.
121 | 		publicPath: publicPath,
122 | 		// Point sourcemap entries to original disk location (format as URL on Windows)
123 | 		devtoolModuleFilenameTemplate: info => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, "/"),
124 | 	},
125 | 	optimization: {
126 | 		minimizer: [
127 | 			new TerserPlugin({
128 | 				terserOptions: {
129 | 					parse: {
130 | 						// we want terser to parse ecma 8 code. However, we don't want it
131 | 						// to apply any minfication steps that turns valid ecma 5 code
132 | 						// into invalid ecma 5 code. This is why the 'compress' and 'output'
133 | 						// sections only apply transformations that are ecma 5 safe
134 | 						// https://github.com/facebook/create-react-app/pull/4234
135 | 						ecma: 8,
136 | 					},
137 | 					compress: {
138 | 						ecma: 5,
139 | 						warnings: false,
140 | 						// Disabled because of an issue with Uglify breaking seemingly valid code:
141 | 						// https://github.com/facebook/create-react-app/issues/2376
142 | 						// Pending further investigation:
143 | 						// https://github.com/mishoo/UglifyJS2/issues/2011
144 | 						comparisons: false,
145 | 						// Disabled because of an issue with Terser breaking valid code:
146 | 						// https://github.com/facebook/create-react-app/issues/5250
147 | 						// Pending futher investigation:
148 | 						// https://github.com/terser-js/terser/issues/120
149 | 						inline: 2,
150 | 					},
151 | 					mangle: {
152 | 						safari10: true,
153 | 					},
154 | 					output: {
155 | 						ecma: 5,
156 | 						comments: false,
157 | 						// Turned on because emoji and regex is not minified properly using default
158 | 						// https://github.com/facebook/create-react-app/issues/2488
159 | 						ascii_only: true,
160 | 					},
161 | 				},
162 | 				// Use multi-process parallel running to improve the build speed
163 | 				// Default number of concurrent runs: os.cpus().length - 1
164 | 				parallel: true,
165 | 				// Enable file caching
166 | 				cache: true,
167 | 				sourceMap: shouldUseSourceMap,
168 | 			}),
169 | 			new OptimizeCSSAssetsPlugin({
170 | 				cssProcessorOptions: {
171 | 					parser: safePostCssParser,
172 | 					map: shouldUseSourceMap
173 | 						? {
174 | 								// `inline: false` forces the sourcemap to be output into a
175 | 								// separate file
176 | 								inline: false,
177 | 								// `annotation: true` appends the sourceMappingURL to the end of
178 | 								// the css file, helping the browser find the sourcemap
179 | 								annotation: true,
180 | 						  }
181 | 						: false,
182 | 				},
183 | 			}),
184 | 		],
185 | 		// Automatically split vendor and commons
186 | 		// https://twitter.com/wSokra/status/969633336732905474
187 | 		// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
188 | 		splitChunks: {
189 | 			chunks: "all",
190 | 			name: false,
191 | 		},
192 | 		// Keep the runtime chunk seperated to enable long term caching
193 | 		// https://twitter.com/wSokra/status/969679223278505985
194 | 		runtimeChunk: true,
195 | 	},
196 | 	resolve: {
197 | 		// This allows you to set a fallback for where Webpack should look for modules.
198 | 		// We placed these paths second because we want `node_modules` to "win"
199 | 		// if there are any conflicts. This matches Node resolution mechanism.
200 | 		// https://github.com/facebook/create-react-app/issues/253
201 | 		modules: ["node_modules"].concat(
202 | 			// It is guaranteed to exist because we tweak it in `env.js`
203 | 			process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
204 | 		),
205 | 		// These are the reasonable defaults supported by the Node ecosystem.
206 | 		// We also include JSX as a common component filename extension to support
207 | 		// some tools, although we do not recommend using it, see:
208 | 		// https://github.com/facebook/create-react-app/issues/290
209 | 		// `web` extension prefixes have been added for better support
210 | 		// for React Native Web.
211 | 		extensions: paths.moduleFileExtensions.map(ext => `.${ext}`).filter(ext => useTypeScript || !ext.includes("ts")),
212 | 		alias: {
213 | 			// Support React Native Web
214 | 			// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
215 | 			"react-native": "react-native-web",
216 | 		},
217 | 		plugins: [
218 | 			// Adds support for installing with Plug'n'Play, leading to faster installs and adding
219 | 			// guards against forgotten dependencies and such.
220 | 			PnpWebpackPlugin,
221 | 			// Prevents users from importing files from outside of src/ (or node_modules/).
222 | 			// This often causes confusion because we only process files within src/ with babel.
223 | 			// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
224 | 			// please link the files into your node_modules/ and let module-resolution kick in.
225 | 			// Make sure your source files are compiled, as they will not be processed in any way.
226 | 			new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
227 | 		],
228 | 	},
229 | 	resolveLoader: {
230 | 		plugins: [
231 | 			// Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
232 | 			// from the current package.
233 | 			PnpWebpackPlugin.moduleLoader(module),
234 | 		],
235 | 	},
236 | 	module: {
237 | 		strictExportPresence: true,
238 | 		rules: [
239 | 			// Disable require.ensure as it's not a standard language feature.
240 | 			{ parser: { requireEnsure: false } },
241 | 
242 | 			// First, run the linter.
243 | 			// It's important to do this before Babel processes the JS.
244 | 			{
245 | 				test: /\.(js|mjs|jsx)$/,
246 | 				enforce: "pre",
247 | 				use: [
248 | 					{
249 | 						options: {
250 | 							formatter: require.resolve("react-dev-utils/eslintFormatter"),
251 | 							eslintPath: require.resolve("eslint"),
252 | 						},
253 | 						loader: require.resolve("eslint-loader"),
254 | 					},
255 | 				],
256 | 				include: paths.appSrc,
257 | 			},
258 | 			{
259 | 				// "oneOf" will traverse all following loaders until one will
260 | 				// match the requirements. When no loader matches it will fall
261 | 				// back to the "file" loader at the end of the loader list.
262 | 				oneOf: [
263 | 					// "url" loader works just like "file" loader but it also embeds
264 | 					// assets smaller than specified size as data URLs to avoid requests.
265 | 					{
266 | 						test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
267 | 						loader: require.resolve("url-loader"),
268 | 						options: {
269 | 							limit: 10000,
270 | 							name: "static/media/[name].[hash:8].[ext]",
271 | 						},
272 | 					},
273 | 					// Process application JS with Babel.
274 | 					// The preset includes JSX, Flow, TypeScript and some ESnext features.
275 | 					{
276 | 						test: /\.(js|mjs|jsx|ts|tsx)$/,
277 | 						include: paths.appSrc,
278 | 
279 | 						loader: require.resolve("babel-loader"),
280 | 						options: {
281 | 							customize: require.resolve("babel-preset-react-app/webpack-overrides"),
282 | 
283 | 							plugins: [
284 | 								[
285 | 									require.resolve("babel-plugin-named-asset-import"),
286 | 									{
287 | 										loaderMap: {
288 | 											svg: {
289 | 												ReactComponent: "@svgr/webpack?-prettier,-svgo![path]",
290 | 											},
291 | 										},
292 | 									},
293 | 								],
294 | 							],
295 | 							cacheDirectory: true,
296 | 							// Save disk space when time isn't as important
297 | 							cacheCompression: true,
298 | 							compact: true,
299 | 						},
300 | 					},
301 | 					// Process any JS outside of the app with Babel.
302 | 					// Unlike the application JS, we only compile the standard ES features.
303 | 					{
304 | 						test: /\.(js|mjs)$/,
305 | 						exclude: /@babel(?:\/|\\{1,2})runtime/,
306 | 						loader: require.resolve("babel-loader"),
307 | 						options: {
308 | 							babelrc: false,
309 | 							configFile: false,
310 | 							compact: false,
311 | 							presets: [[require.resolve("babel-preset-react-app/dependencies"), { helpers: true }]],
312 | 							cacheDirectory: true,
313 | 							// Save disk space when time isn't as important
314 | 							cacheCompression: true,
315 | 
316 | 							// If an error happens in a package, it's possible to be
317 | 							// because it was compiled. Thus, we don't want the browser
318 | 							// debugger to show the original code. Instead, the code
319 | 							// being evaluated would be much more helpful.
320 | 							sourceMaps: false,
321 | 						},
322 | 					},
323 | 					// "postcss" loader applies autoprefixer to our CSS.
324 | 					// "css" loader resolves paths in CSS and adds assets as dependencies.
325 | 					// `MiniCSSExtractPlugin` extracts styles into CSS
326 | 					// files. If you use code splitting, async bundles will have their own separate CSS chunk file.
327 | 					// By default we support CSS Modules with the extension .module.css
328 | 					{
329 | 						test: cssRegex,
330 | 						exclude: cssModuleRegex,
331 | 						loader: getStyleLoaders({
332 | 							importLoaders: 1,
333 | 							sourceMap: shouldUseSourceMap,
334 | 						}),
335 | 						// Don't consider CSS imports dead code even if the
336 | 						// containing package claims to have no side effects.
337 | 						// Remove this when webpack adds a warning or an error for this.
338 | 						// See https://github.com/webpack/webpack/issues/6571
339 | 						sideEffects: true,
340 | 					},
341 | 					// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
342 | 					// using the extension .module.css
343 | 					{
344 | 						test: cssModuleRegex,
345 | 						loader: getStyleLoaders({
346 | 							importLoaders: 1,
347 | 							sourceMap: shouldUseSourceMap,
348 | 							modules: true,
349 | 							getLocalIdent: getCSSModuleLocalIdent,
350 | 						}),
351 | 					},
352 | 					// Opt-in support for SASS. The logic here is somewhat similar
353 | 					// as in the CSS routine, except that "sass-loader" runs first
354 | 					// to compile SASS files into CSS.
355 | 					// By default we support SASS Modules with the
356 | 					// extensions .module.scss or .module.sass
357 | 					{
358 | 						test: sassRegex,
359 | 						exclude: sassModuleRegex,
360 | 						loader: getStyleLoaders(
361 | 							{
362 | 								importLoaders: 2,
363 | 								sourceMap: shouldUseSourceMap,
364 | 							},
365 | 							"sass-loader",
366 | 						),
367 | 						// Don't consider CSS imports dead code even if the
368 | 						// containing package claims to have no side effects.
369 | 						// Remove this when webpack adds a warning or an error for this.
370 | 						// See https://github.com/webpack/webpack/issues/6571
371 | 						sideEffects: true,
372 | 					},
373 | 					// Adds support for CSS Modules, but using SASS
374 | 					// using the extension .module.scss or .module.sass
375 | 					{
376 | 						test: sassModuleRegex,
377 | 						loader: getStyleLoaders(
378 | 							{
379 | 								importLoaders: 2,
380 | 								sourceMap: shouldUseSourceMap,
381 | 								modules: true,
382 | 								getLocalIdent: getCSSModuleLocalIdent,
383 | 							},
384 | 							"sass-loader",
385 | 						),
386 | 					},
387 | 					// "file" loader makes sure assets end up in the `build` folder.
388 | 					// When you `import` an asset, you get its filename.
389 | 					// This loader doesn't use a "test" so it will catch all modules
390 | 					// that fall through the other loaders.
391 | 					{
392 | 						loader: require.resolve("file-loader"),
393 | 						// Exclude `js` files to keep "css" loader working as it injects
394 | 						// it's runtime that would otherwise be processed through "file" loader.
395 | 						// Also exclude `html` and `json` extensions so they get processed
396 | 						// by webpacks internal loaders.
397 | 						exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
398 | 						options: {
399 | 							name: "static/media/[name].[hash:8].[ext]",
400 | 						},
401 | 					},
402 | 					// ** STOP ** Are you adding a new loader?
403 | 					// Make sure to add the new loader(s) before the "file" loader.
404 | 				],
405 | 			},
406 | 		],
407 | 	},
408 | 	plugins: [
409 | 		// Generates an `index.html` file with the <script> injected.
410 | 		new HtmlWebpackPlugin({
411 | 			inject: true,
412 | 			template: paths.appHtml,
413 | 			minify: {
414 | 				removeComments: true,
415 | 				collapseWhitespace: true,
416 | 				removeRedundantAttributes: true,
417 | 				useShortDoctype: true,
418 | 				removeEmptyAttributes: true,
419 | 				removeStyleLinkTypeAttributes: true,
420 | 				keepClosingSlash: true,
421 | 				minifyJS: true,
422 | 				minifyCSS: true,
423 | 				minifyURLs: true,
424 | 			},
425 | 		}),
426 | 		// Inlines the webpack runtime script. This script is too small to warrant
427 | 		// a network request.
428 | 		shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
429 | 		// Makes some environment variables available in index.html.
430 | 		// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
431 | 		// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
432 | 		// In production, it will be an empty string unless you specify "homepage"
433 | 		// in `package.json`, in which case it will be the pathname of that URL.
434 | 		new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
435 | 		// This gives some necessary context to module not found errors, such as
436 | 		// the requesting resource.
437 | 		new ModuleNotFoundPlugin(paths.appPath),
438 | 		// Makes some environment variables available to the JS code, for example:
439 | 		// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
440 | 		// It is absolutely essential that NODE_ENV was set to production here.
441 | 		// Otherwise React will be compiled in the very slow development mode.
442 | 		new webpack.DefinePlugin(env.stringified),
443 | 		new MiniCssExtractPlugin({
444 | 			// Options similar to the same options in webpackOptions.output
445 | 			// both options are optional
446 | 			filename: "static/css/[name].[contenthash:8].css",
447 | 			chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
448 | 		}),
449 | 		// Generate a manifest file which contains a mapping of all asset filenames
450 | 		// to their corresponding output file so that tools can pick it up without
451 | 		// having to parse `index.html`.
452 | 		new ManifestPlugin({
453 | 			fileName: "asset-manifest.json",
454 | 			publicPath: publicPath,
455 | 		}),
456 | 		// Moment.js is an extremely popular library that bundles large locale files
457 | 		// by default due to how Webpack interprets its code. This is a practical
458 | 		// solution that requires the user to opt into importing specific locales.
459 | 		// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
460 | 		// You can remove this if you don't use Moment.js:
461 | 		new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
462 | 		// Generate a service worker script that will precache, and keep up to date,
463 | 		// the HTML & assets that are part of the Webpack build.
464 | 		new WorkboxWebpackPlugin.GenerateSW({
465 | 			clientsClaim: true,
466 | 			exclude: [/\.map$/, /asset-manifest\.json$/],
467 | 			importWorkboxFrom: "cdn",
468 | 			navigateFallback: publicUrl + "/index.html",
469 | 			navigateFallbackBlacklist: [
470 | 				// Exclude URLs starting with /_, as they're likely an API call
471 | 				new RegExp("^/_"),
472 | 				// Exclude URLs containing a dot, as they're likely a resource in
473 | 				// public/ and not a SPA route
474 | 				new RegExp("/[^/]+\\.[^/]+$"),
475 | 			],
476 | 		}),
477 | 		// TypeScript type checking
478 | 		fs.existsSync(paths.appTsConfig) &&
479 | 			new ForkTsCheckerWebpackPlugin({
480 | 				typescript: resolve.sync("typescript", {
481 | 					basedir: paths.appNodeModules,
482 | 				}),
483 | 				async: false,
484 | 				checkSyntacticErrors: true,
485 | 				tsconfig: paths.appTsConfig,
486 | 				compilerOptions: {
487 | 					module: "esnext",
488 | 					moduleResolution: "node",
489 | 					resolveJsonModule: true,
490 | 					isolatedModules: true,
491 | 					noEmit: true,
492 | 					jsx: "preserve",
493 | 				},
494 | 				reportFiles: ["**", "!**/*.json", "!**/__tests__/**", "!**/?(*.)(spec|test).*", "!src/setupProxy.js", "!src/setupTests.*"],
495 | 				watch: paths.appSrc,
496 | 				silent: true,
497 | 				formatter: typescriptFormatter,
498 | 			}),
499 | 	].filter(Boolean),
500 | 	// Some libraries import Node modules but don't use them in the browser.
501 | 	// Tell Webpack to provide empty mocks for them so importing them works.
502 | 	node: {
503 | 		dgram: "empty",
504 | 		fs: "empty",
505 | 		net: "empty",
506 | 		tls: "empty",
507 | 		child_process: "empty",
508 | 	},
509 | 	// Turn off performance processing because we utilize
510 | 	// our own hints via the FileSizeReporter
511 | 	performance: false,
512 | };
513 | 


--------------------------------------------------------------------------------