Merge remote-tracking branch 'origin/dev.docs' into dev.todolist-browser

Author: mattlean

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Matthew Lean
+Copyright (c) 2018-2019 Matthew Lean
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

docs/envs/browser/building.md

@@ -4,6 +4,8 @@ Use the `build` [`package.json`](../../../package.json) script to create a build
 
 The `build:debug` [`package.json`](../../../package.json) script can be used to debug the webpack configuration with a [Node.js inspector client](https://nodejs.org/en/docs/guides/debugging-getting-started/#inspector-clients). The `build:stats` [`package.json`](../../../package.json) script generates a `stats.production.json` file in the project root directory which can be used with many analysis tools such as [analyse](https://github.com/webpack/analyse).
 
+The production build process generates `records.json` which is used to store module IDs across separate builds. This allows the generation of longer lasting filenames, makes sure that code split parts gain correct caching behavior, and that modules aren't reordered or moved to another chunk during the bundling process which results to less cache invalidations. **This file should checked into version control.**
+
 For more details on what the webpack build process is doing, read the ["Configuration: webpack" documentation](configuration.md#webpack).
 
 ## Development

docs/envs/browser/configuration.md

@@ -26,7 +26,7 @@
 By default [`.browserslist`](../../../.browerslist) is set to `defaults` which is the equivalent to `> 0.5%, last 2 versions, Firefox ESR, not dead`. It is highly recommended that you change this based on the browsers your users are using. If you use [Google Analytics](https://marketingplatform.google.com/about/analytics), you can generate usage stats from it and determine your config with [browserslist-ga](https://github.com/browserslist/browserslist-ga).
 
 ## ESLint
-[ESLint](https://eslint.org) helps identify potential problems and deviations from code style guidelines in your JavaScript. The config file can be found in the project's root directory as [`.eslintrc`](../../../.eslintrc.json). For more info on configuring ESLint, read the [ESLint "Configuring ESLint" docs](https://eslint.org/docs/user-guide/configuring).
+[ESLint](https://eslint.org) helps identify potential problems and deviations from code style guidelines in your JavaScript. The config file can be found in the project's root directory as [`.eslintrc`](../../../.eslintrc.json). The ignored file configuration can also be found in the root directory as [`.eslintignore`](../../../.eslintignore). For more info on configuring ESLint, read the [ESLint "Configuring ESLint" docs](https://eslint.org/docs/user-guide/configuring).
 
 ### Environments
 * Browser: Supports browser global variables
@@ -65,6 +65,9 @@ These specific rules override any rules set by config extensions and will trigge
 ### Settings
 The React and Flow versions match the versions used in the project, as specified by [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react). These versions can be found in [`package.json`](../../../package.json).
 
+### Ignored Files
+[`jest.config.js`](../../../jest.config.js) is ignored as linting the Jest configuration is not necessary.
+
 ## Flow
 [Flow](https://flow.org) is a static type checker for JavaScript. The config file can be found in the project's root directory as [`.flowconfig`](../../../.flowconfig). For more info on configuring Flow, read the [Flow ".flowconfig" docs](https://flow.org/en/docs/config).
 
@@ -87,7 +90,7 @@ module.name_mapper.extension='scss' -> 'empty/object'
 ```
 
 ## Jest
-[Jest](https://jestjs.io) lets you build and run tests on your JavaScript. The config file can be found in the project's root directory as [`jest.config.js`](../../../.jest.config.js). For more info on configuring Jest, read the [Jest "Configuring Jest" docs](https://jestjs.io/docs/en/configuration.html).
+[Jest](https://jestjs.io) lets you build and run tests on your JavaScript. The config file can be found in the project's root directory as [`jest.config.js`](../../../jest.config.js). For more info on configuring Jest, read the [Jest "Configuring Jest" docs](https://jestjs.io/docs/en/configuration.html).
 
 ### Options
 `moduleNameMapper` is set to the following so snapshots can handle assets like images and fonts as well as styles in spapshot tests:
@@ -98,10 +101,21 @@ moduleNameMapper: {
 },
 ```
 
-`snapshotSeralizer` is set to [enzyme-to-json](https://github.com/adriantoine/enzyme-to-json) so Enzyme wrappers are converted to a format compatible with Jest snapshot tests.
+`snapshotSerializer` is set to [enzyme-to-json](https://github.com/adriantoine/enzyme-to-json) so Enzyme wrappers are converted to a format compatible with Jest snapshot tests.
+
+`testPathIgnorePatterns` will have Jest ignore the `node_modules/` (which is ignored by default) and `build/` directories.
+
+## nodemon
+[nodemon](https://nodemon.io) reruns Node.js applications when file changes are detected. For this project it is used to rerun package.json scripts to rebuild and rerun the application. The config file can be found in the project's root directory as [`nodemon.json`](../../../nodemon.json). This file sets what nodemon will watch and ignore by default. These settings can be overridden by CLI options.
+
+### Watched Files
+Watch `.js`, `.json`, and `.jsx` files, the [`config/`](../../../config) directory, [`nodemon.json`](../../../nodemon.json), and [`webpack.config.js`](../../../webpack.config.js).
+
+### Ignored Files
+All `.test.js` and `.test.jsx` files.
 
 ## package.json
-[`package.json`](../../../package.json) is the main file that tells npm and Yarn about the project. For more info on the project's [`package.json`](../../../package.json) scripts, read the ["Developing: package.json Scripts" documentation](developing.md#packagejson-scripts). For more info on configuring `package.json`, read the [npm "package.json" docs](https://docs.npmjs.com/files/package.json).
+[`package.json`](../../../package.json) is the main file that tells npm and Yarn about the project. For more info on the project's [`package.json`](../../../package.json) scripts, read the ["Developing: package.json Scripts" documentation](developing.md#packagejson-scripts). For more info on configuring [`package.json`](../../../package.json), read the [npm "package.json" docs](https://docs.npmjs.com/files/package.json).
 
 ## stylelint
 [stylelint](https://stylelint.io) helps identify potential problems and deviations from code style guidelines in your CSS and Sass. The config file can be found in the project's root directory as [`.stylelintrc`](../../../.stylelintrc). For more info on configuring stylelint, read the [stylelint "Configuration" docs](https://stylelint.io/user-guide/configuration).
@@ -131,7 +145,7 @@ Start building from `src/main.jsx`. More info can be found in the [webpack "Entr
 ```javascript
 resolve: { extensions: ['.js', '.jsx', '.json'] }
 ```
-Look for files with .js, .jsx, or .json extensions. More info can be found in the [webpack "Resolve" docs](https://webpack.js.org/configuration/resolve).
+Look for files with `.js`, `.jsx`, or `.json` extensions. More info can be found in the [webpack "Resolve" docs](https://webpack.js.org/configuration/resolve).
 
 #### Compile JavaScript
 [`webpack.config.js`](../../../webpack.config.js)
@@ -195,14 +209,14 @@ Load all Sass and compile them into CSS using [Sass Loader](https://github.com/w
 ```javascript
 parts.loadImgs(),
 ```
-Load image files with .gif, .jpg, .jpeg, or .png extensions and transform them into base64 URIs which are inlined into the JavaScript bundle using [url-loader](https://github.com/webpack-contrib/url-loader).
+Load image files with `.gif`, `.jpg`, `.jpeg`, or `.png` extensions and transform them into base64 URIs which are inlined into the JavaScript bundle using [url-loader](https://github.com/webpack-contrib/url-loader).
 
 #### Load fonts
 [`config/development.js`](../../../config/development.js)
 ```javascript
 parts.loadFonts(),
 ```
-Load font files with .eot, .tff, .woff, or .woff2 extensions and transform them into base64 URIs which are inlined into the JavaScript bundle using [url-loader](https://github.com/webpack-contrib/url-loader).
+Load font files with `.eot`, `.tff`, `.woff`, or `.woff2` extensions and transform them into base64 URIs which are inlined into the JavaScript bundle using [url-loader](https://github.com/webpack-contrib/url-loader).
 
 #### Generate source maps
 [`config/development.js`](../../../config/development.js)
@@ -224,7 +238,7 @@ Start building from `src/main.jsx`. More info can be found in the [webpack "Entr
 ```javascript
 resolve: { extensions: ['.js', '.jsx', '.json'] }
 ```
-Look for files with .js, .jsx, or .json extensions. More info can be found in the [webpack "Resolve" docs](https://webpack.js.org/configuration/resolve).
+Look for files with `.js`, `.jsx`, or `.json` extensions. More info can be found in the [webpack "Resolve" docs](https://webpack.js.org/configuration/resolve).
 
 #### Compile JavaScript
 [`webpack.config.js`](../../../webpack.config.js)
@@ -313,7 +327,7 @@ parts.loadImgs({
   type: 'file'
 }),
 ```
-Load image files with .gif, .jpg, .jpeg, or .png extensions and output them in `/assets/imgs/` with [file-loader](https://github.com/webpack-contrib/file-loader).
+Load image files with `.gif`, `.jpg`, `.jpeg`, or `.png` extensions and output them in `/assets/imgs/` with [file-loader](https://github.com/webpack-contrib/file-loader).
 
 #### Load fonts
 [`config/production.js`](../../../config/production.js)
@@ -325,7 +339,7 @@ parts.loadFonts({
   type: 'file'
 }),
 ```
-Load font files with .eot, .tff, .woff, or .woff2 extensions and output them in `/assets/imgs/` with [file-loader](https://github.com/webpack-contrib/file-loader).
+Load font files with `.eot`, `.tff`, `.woff`, or `.woff2` extensions and output them in `/assets/imgs/` with [file-loader](https://github.com/webpack-contrib/file-loader).
 
 #### Generate source maps
 [`config/production.js`](../../../config/production.js)

docs/envs/browser/dependencies.md

@@ -103,7 +103,7 @@ Mock store for testing `redux` asynchronous action creators and middleware
 * [**`sass-loader`**](https://npmjs.com/package/sass-loader)  
 `webpack` loader to compile `node-sass` into CSS
 * [**`style-loader`**](https://npmjs.com/package/style-loader)  
-`webpack` loader that adds CSS to the DOM by injecting a <style> tag
+`webpack` loader that adds CSS to the DOM by injecting a `<style>` tag
 * [**`stylelint`**](https://npmjs.com/package/stylelint)  
 Style linter
 * [**`stylelint-config-recommended`**](https://npmjs.com/package/stylelint-config-recommended)  

docs/envs/desktop/configuration.md

@@ -22,7 +22,7 @@
 [electron-builder](https://electron.build/configuration/configuration) builds the app into an executable for macOS, Windows, or Linux. The config utilizes [`package.json`](../../../package.json). For more info on configurating electron-builder, read the [electron-builder "Common Configuration" docs](https://electron.build/configuration/configuration).
 
 ## ESLint
-[ESLint](https://eslint.org) helps identify potential problems and deviations from code style guidelines in your JavaScript. The config file can be found in the project's root directory as [`.eslintrc`](../../../.eslintrc.json). For more info on configuring ESLint, read the [ESLint "Configuring ESLint" docs](https://eslint.org/docs/user-guide/configuring).
+[ESLint](https://eslint.org) helps identify potential problems and deviations from code style guidelines in your JavaScript. The config file can be found in the project's root directory as [`.eslintrc`](../../../.eslintrc.json). The ignored file configuration can also be found in the root directory as [`.eslintignore`](../../../.eslintignore). For more info on configuring ESLint, read the [ESLint "Configuring ESLint" docs](https://eslint.org/docs/user-guide/configuring).
 
 ### Environments
 * Browser: Supports browser global variables
@@ -61,6 +61,9 @@ These specific rules override any rules set by config extensions and will trigge
 ### Settings
 The React and Flow versions match the versions used in the project, as specified by [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react). These versions can be found in [`package.json`](../../../package.json).
 
+### Ignored Files
+[`jest.config.js`](../../../jest.config.js) is ignored as linting the Jest configuration is not necessary.
+
 ## Flow
 [Flow](https://flow.org) is a static type checker for JavaScript. The config file can be found in the project's root directory as [`.flowconfig`](../../../.flowconfig). For more info on configuring Flow, read the [Flow ".flowconfig" docs](https://flow.org/en/docs/config).
 
@@ -83,7 +86,8 @@ module.name_mapper.extension='scss' -> 'empty/object'
 ```
 
 ## Jest
-[Jest](https://jestjs.io) lets you build and run tests on your JavaScript. The config file can be found in the project's root directory as [`jest.config.js`](../../../.jest.config.js). For more info on configuring Jest, read the [Jest "Configuring Jest" docs](https://jestjs.io/docs/en/configuration.html).
+[Jest](https://jestjs.io) lets you build and run tests on your JavaScript. The config file can be found in the project's root directory as [`jest.config.js`](../../../jest.config.js). For more info on configuring Jest, read the [Jest "Configuring Jest" docs](https://jestjs.io/docs/en/configuration.html).
+
 ### Options
 `moduleNameMapper` is set to the following so snapshots can handle assets like images and fonts as well as styles in spapshot tests:
 ```javascript
@@ -93,10 +97,21 @@ moduleNameMapper: {
 },
 ```
 
-`snapshotSeralizer` is set to [enzyme-to-json](https://github.com/adriantoine/enzyme-to-json) so Enzyme wrappers are converted to a format compatible with Jest snapshot tests.
+`snapshotSerializer` is set to [enzyme-to-json](https://github.com/adriantoine/enzyme-to-json) so Enzyme wrappers are converted to a format compatible with Jest snapshot tests.
+
+`testPathIgnorePatterns` will have Jest ignore the `node_modules/` (which is ignored by default) and `build/` directories.
+
+## nodemon
+[nodemon](https://nodemon.io) reruns Node.js applications when file changes are detected. For this project it is used to rerun package.json scripts to rebuild and rerun the application. The config file can be found in the project's root directory as [`nodemon.json`](../../../nodemon.json). This file sets what nodemon will watch and ignore by default. These settings can be overridden by CLI options.
+
+### Watched Files
+Watch `.js`, `.json`, and `.jsx` files, the [`config/`](../../../config) directory, [`nodemon.json`](../../../nodemon.json), [`src/main/`](../../../src/main), and [`webpack.config.js`](../../../webpack.config.js).
+
+### Ignored Files
+All `.test.js` and `.test.jsx` files.
 
 ## package.json
-[`package.json`](../../../package.json) is the main file that tells npm and Yarn about the project. For more info on the project's [`package.json`](../../../package.json) scripts, read the ["Developing: package.json Scripts" documentation](developing.md#packagejson-scripts). For more info on configuring `package.json`, read the [npm "package.json" docs](https://docs.npmjs.com/files/package.json).
+[`package.json`](../../../package.json) is the main file that tells npm and Yarn about the project. For more info on the project's [`package.json`](../../../package.json) scripts, read the ["Developing: package.json Scripts" documentation](developing.md#packagejson-scripts). For more info on configuring [`package.json`](../../../package.json), read the [npm "package.json" docs](https://docs.npmjs.com/files/package.json).
 
 ## stylelint
 [stylelint](https://stylelint.io) helps identify potential problems and deviations from code style guidelines in your CSS and Sass. The config file can be found in the project's root directory as [`.stylelintrc`](../../../.stylelintrc). For more info on configuring stylelint, read the [stylelint "Configuration" docs](https://stylelint.io/user-guide/configuration).
@@ -255,7 +270,7 @@ Start building from `src/renderer/main.jsx`. More info can be found in the [webp
 ```javascript
 resolve: { extensions: ['.js', '.jsx', '.json'] },
 ```
-Look for files with .js, .jsx, or .json extensions. More info can be found in the [webpack "Resolve" docs](https://webpack.js.org/configuration/resolve).
+Look for files with `.js`, `.jsx`, or `.json` extensions. More info can be found in the [webpack "Resolve" docs](https://webpack.js.org/configuration/resolve).
 
 ##### Target
 [`config/renderer/index.js`](../../../config/renderer/index.js)
@@ -327,14 +342,14 @@ Load all Sass and compile them into CSS using [Sass Loader](https://github.com/w
 ```javascript
 parts.loadImgs(),
 ```
-Load image files with .gif, .jpg, .jpeg, or .png extensions and transform them into base64 URIs which are inlined into the JavaScript bundle using [url-loader](https://github.com/webpack-contrib/url-loader).
+Load image files with `.gif`, `.jpg`, `.jpeg`, or `.png` extensions and transform them into base64 URIs which are inlined into the JavaScript bundle using [url-loader](https://github.com/webpack-contrib/url-loader).
 
 ##### Load fonts
 [`config/renderer/development.js`](../../../config/renderer/development.js)
 ```javascript
 parts.loadFonts(),
 ```
-Load font files with .eot, .tff, .woff, or .woff2 extensions and transform them into base64 URIs which are inlined into the JavaScript bundle using [url-loader](https://github.com/webpack-contrib/url-loader).
+Load font files with `.eot`, `.tff`, `.woff`, or `.woff2` extensions and transform them into base64 URIs which are inlined into the JavaScript bundle using [url-loader](https://github.com/webpack-contrib/url-loader).
 
 ##### Generate source maps
 [`config/renderer/development.js`](../../../config/renderer/development.js)
@@ -449,14 +464,14 @@ Remove unused selectors in CSS using [PurifyCSS Plugin](https://github.com/webpa
 ```javascript
 parts.loadImgs(),
 ```
-Load image files with .gif, .jpg, .jpeg, or .png extensions and transform them into base64 URIs which are inlined into the JavaScript bundle using [url-loader](https://github.com/webpack-contrib/url-loader).
+Load image files with `.gif`, `.jpg`, `.jpeg`, or `.png` extensions and transform them into base64 URIs which are inlined into the JavaScript bundle using [url-loader](https://github.com/webpack-contrib/url-loader).
 
 ##### Load fonts
 [`config/renderer/production.js`](../../../config/renderer/production.js)
 ```javascript
 parts.loadFonts(),
 ```
-Load font files with .eot, .tff, .woff, or .woff2 extensions and transform them into base64 URIs which are inlined into the JavaScript bundle using [url-loader](https://github.com/webpack-contrib/url-loader).
+Load font files with `.eot`, `.tff`, `.woff`, or `.woff2` extensions and transform them into base64 URIs which are inlined into the JavaScript bundle using [url-loader](https://github.com/webpack-contrib/url-loader).
 
 #### Generate source maps
 [`config/renderer/production.js`](../../../config/renderer/production.js)

docs/envs/desktop/dependencies.md

@@ -111,7 +111,7 @@ Mock store for testing `redux` asynchronous action creators and middleware
 * [**`sass-loader`**](https://npmjs.com/package/sass-loader)  
 `webpack` loader to compile `node-sass` into CSS
 * [**`style-loader`**](https://npmjs.com/package/style-loader)  
-`webpack` loader that adds CSS to the DOM by injecting a <style> tag
+`webpack` loader that adds CSS to the DOM by injecting a `<style>` tag
 * [**`stylelint`**](https://npmjs.com/package/stylelint)  
 Style linter
 * [**`stylelint-config-recommended`**](https://npmjs.com/package/stylelint-config-recommended)  

docs/envs/desktop/developing.md

@@ -4,6 +4,9 @@
   * `development`: Development builds generated here
   * `production`: Production builds generated here
 * [`config`](../../../config): webpack environment configuration
+  * [`common`](../../../config/common): General webpack configuration code
+  * [`main`](../../../config/main): webpack configuration for main process
+  * [`renderer`](../../../config/renderer): webpack configuration for renderer process
 * [`src`](../../../src): Application source code
   * [`__mocks__`](../../../src/__mocks__): Mock test files
   * [`main`](../../../src/main): Source code for main process