├── .eslintignore
├── .eslintrc.json
├── .github
    └── workflows
    │   ├── deploy.yml
    │   └── test.yml
├── .gitignore
├── .npmignore
├── .tool-versions
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── paths.js
    ├── polyfills.js
    ├── webpack.config.demo.js
    ├── webpack.config.dev.js
    ├── webpack.config.prod.js
    └── webpackDevServer.config.js
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── manifest.json
├── scripts
    ├── build.js
    ├── demo.js
    ├── start.js
    └── test.js
├── src
    ├── demo
    │   ├── App.js
    │   ├── App.test.js
    │   ├── I18n.js
    │   ├── __snapshots__
    │   │   └── App.test.js.snap
    │   ├── index.js
    │   └── registerServiceWorker.js
    └── lib
    │   ├── components
    │       └── I18n
    │       │   ├── __snapshots__
    │       │       ├── createI18n.test.js.snap
    │       │       └── withLocale.test.js.snap
    │       │   ├── createI18n.js
    │       │   ├── createI18n.test.js
    │       │   ├── index.js
    │       │   ├── withLocale.js
    │       │   └── withLocale.test.js
    │   └── index.js
└── yarn.lock


/.eslintignore:
--------------------------------------------------------------------------------
1 | /build/
2 | /demo/
3 | /config/
4 | /scripts/
5 | /src/demo/index.js
6 | /src/demo/registerServiceWorker.js
7 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "airbnb",
 3 |   "parser": "babel-eslint",
 4 |   "rules": {
 5 |     "react/jsx-filename-extension": [1, { "extensions": [".js"] }],
 6 |     "react/jsx-props-no-spreading": 0
 7 |   },
 8 |   "overrides": [
 9 |     {
10 |       "files": [
11 |         "**/*.test.js"
12 |       ],
13 |       "env": {
14 |         "jest": true
15 |       },
16 |       "plugins": ["jest"],
17 |       "rules": {
18 |         "jest/no-disabled-tests": "warn",
19 |         "jest/no-focused-tests": "error",
20 |         "jest/no-identical-title": "error",
21 |         "jest/prefer-to-have-length": "warn",
22 |         "jest/valid-expect": "error",
23 |         "react/prop-types": [0]
24 |       },
25 |       "globals": {
26 |         "window": true
27 |       }
28 |     }
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
 1 | name: deploy
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [master]
 6 | 
 7 | jobs:
 8 |   deploy:
 9 |     runs-on: ubuntu-latest
10 | 
11 |     steps:
12 |       - uses: actions/checkout@v2
13 | 
14 |       - uses: actions/setup-node@v2-beta
15 |         with:
16 |           node-version: '14'
17 | 
18 |       - name: Install dependencies
19 |         run: yarn install
20 | 
21 |       - name: Run tests
22 |         run: yarn test --coverage
23 |         env:
24 |           CI: true
25 | 
26 |       - name: Build
27 |         run: yarn demo
28 |         env:
29 |           PUBLIC_URL: /react-router-i18n
30 | 
31 |       - name: Deploy GitHub
32 |         uses: JamesIves/github-pages-deploy-action@releases/v3
33 |         with:
34 |           GITHUB_TOKEN: ${{ github.token }}
35 |           BRANCH: gh-pages
36 |           FOLDER: demo
37 |           CLEAN: true
38 | 


--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
 1 | name: Run tests
 2 | 
 3 | on: [push, pull_request]
 4 | 
 5 | jobs:
 6 |   test:
 7 |     runs-on: ubuntu-latest
 8 |     strategy:
 9 |       matrix:
10 |         node: ['10', '12', '14']
11 |     name: Node ${{ matrix.node }} test
12 |     steps:
13 |       - uses: actions/checkout@v2
14 | 
15 |       - uses: actions/setup-node@v1
16 |         with:
17 |           node-version: ${{ matrix.node }}
18 | 
19 |       - name: Install dependencies
20 |         run: yarn install
21 | 
22 |       - name: Lint code
23 |         run: yarn lint
24 | 
25 |       # Ideally yarn audit would be part of the CI flow
26 |       # but currently there is too much noise
27 |       # See e.g. https://github.com/facebook/create-react-app/issues/8529
28 |       # - name: Audit dependencies
29 |       #   - run: yarn audit
30 | 
31 |       - name: Run tests
32 |         run: yarn test --coverage
33 |         env:
34 |           CI: true
35 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # production
 7 | /build
 8 | /demo
 9 | 
10 | # testing
11 | /coverage
12 | 
13 | # misc
14 | .DS_Store
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 | 
20 | npm-debug.log*
21 | package-lock.json
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | /node_modules
 3 | 
 4 | # testing
 5 | /coverage
 6 | 
 7 | # misc
 8 | .DS_Store
 9 | .env.local
10 | .env.development.local
11 | .env.test.local
12 | .env.production.local
13 | 
14 | npm-debug.log*
15 | yarn-debug.log*
16 | yarn-error.log*
17 | 
18 | # Development folders and files
19 | public
20 | src
21 | scripts
22 | config
23 | demo
24 | .travis.yml
25 | .eslintignore
26 | .eslintrc.json
27 | .tool-versions
28 | yarn.lock
29 | /.github
30 | 


--------------------------------------------------------------------------------
/.tool-versions:
--------------------------------------------------------------------------------
1 | nodejs 12.6.0
2 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as
 6 | contributors and maintainers pledge to make participation in react-router-i18n and
 7 | its associated community a harassment-free experience for everyone, regardless of age,
 8 | body size, disability, ethnicity, sex characteristics, gender identity and expression,
 9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 | 
12 | ## Our Standards
13 | 
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 | 
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 | 
23 | Examples of unacceptable behavior by participants include:
24 | 
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 |   advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 |   address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 |   professional setting
33 | 
34 | ## Our Responsibilities
35 | 
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 | 
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 | 
46 | ## Scope
47 | 
48 | This Code of Conduct applies within project spaces and when
49 | an individual is officially representing the project or its community.
50 | Examples of representing a project or community include using an official
51 | project e-mail address, posting via an official social media account, or acting
52 | as an appointed representative at an online or offline event. Representation of
53 | a project may be further defined and clarified by project maintainers.
54 | 
55 | ## Enforcement
56 | 
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at zf.node [at] gmail [dot] com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 | 
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 | 
68 | ## Attribution
69 | 
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 | 
73 | [homepage]: https://www.contributor-covenant.org
74 | 
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2021 The Perseids Project, zfletch
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Router I18n
  2 | 
  3 | This is a small opinionated library for I18n (internationalization) using React Router.
  4 | 
  5 | ## Demo
  6 | 
  7 | [https://zfletch.github.io/react-router-i18n/](https://zfletch.github.io/react-router-i18n/)
  8 | 
  9 | ## Installation
 10 | 
 11 | `yarn add react-router-i18n`
 12 | 
 13 | Note that this package has the following peer dependencies:
 14 | 
 15 | ```json
 16 | {
 17 |   "react": "^16.8.4",
 18 |   "react-dom": "^16.8.1",
 19 |   "react-router-dom": "^4.3.0 || ^5.0.0"
 20 | }
 21 | ```
 22 | 
 23 | (See project on [npm](https://www.npmjs.com/package/react-router-i18n))
 24 | 
 25 | ## How to use
 26 | 
 27 | ### Demo
 28 | 
 29 | See the demo [App.js](/src/demo/App.js) and [I18n.js](/src/demo/I18n.js).
 30 | 
 31 | ### Setup
 32 | 
 33 | First, create a component called `I18n`. It should look like this:
 34 | 
 35 | ```jsx
 36 | import { createI18n } from 'react-router-i18n';
 37 | 
 38 | // Array of supported locales
 39 | // The first in the array is treated as the default locale
 40 | const locales = ['en', 'fr'];
 41 | 
 42 | // Dictionary of translations
 43 | const translations = {
 44 |   en: {
 45 |     hello: 'Hello',
 46 |   },
 47 |   fr: {
 48 |     hello: 'Bonjour',
 49 |   }
 50 | }
 51 | 
 52 | const I18n = createI18n(
 53 |   locales,
 54 |   translations,
 55 | );
 56 | 
 57 | export default I18n;
 58 | ```
 59 | 
 60 | Then make the following changes to your routes:
 61 | 
 62 | ```jsx
 63 | import React from 'react';
 64 | import { BrowserRouter as Router, Route } from 'react-router-dom';
 65 | 
 66 | // Match locales with regular expression containing each locale separated by `|`
 67 | const base = '/:locale(en|fr)?';
 68 | 
 69 | const App = () => (
 70 |   <Router>
 71 |     <>
 72 |       {/* <Route exact path="/" component={Home} /> */}
 73 |       <Route exact path={base} component={Home} />
 74 | 
 75 |       {/* <Route path="/hello" component={Hello} /> */}
 76 |       <Route path={`${base}/hello`} component={Hello} />
 77 |     </>
 78 |   </Router>
 79 | );
 80 | 
 81 | export default App;
 82 | ```
 83 | 
 84 | ### Usage
 85 | 
 86 | Once you have everything set up, you can use the `I18n` component for localization:
 87 | 
 88 | ```jsx
 89 | import React from 'react';
 90 | 
 91 | import I18n from './I18n';
 92 | 
 93 | const Hello = () => (
 94 |   <div>
 95 |     <I18n t="hello" />
 96 |   </div>
 97 | )
 98 | 
 99 | export default Hello;
100 | ```
101 | 
102 | Since we defined `"hello"` in the `translations` object above,
103 | this component will display "Hello" when the user visits `/hello`, or `/en/hello`.
104 | It will display "Bonjour" when the user visits `/fr/hello`.
105 | 
106 | #### Links
107 | 
108 | To preserve the locale in links, the library provides `Link`, `NavLink`, and `Redirect` components.
109 | These can be used anywhere the React Router component with the same name is used:
110 | 
111 | ```jsx
112 | import React from 'react';
113 | import { Link, NavLink, Redirect } from 'react-router-i18n';
114 | 
115 | import I18n from './I18n';
116 | 
117 | const Hello = () => (
118 |   <div>
119 |     <I18n t="hello" />
120 | 
121 |     <Link to="/">
122 |       <I18n t="homepage" />
123 |     </Link>
124 |   </div>
125 | );
126 | 
127 | export default Hello;
128 | ```
129 | 
130 | To create a link that does not preserve the locale, use `ignoreLocale`:
131 | 
132 | ```jsx
133 | import React from 'react';
134 | import { Link, NavLink, Redirect } from 'react-router-i18n';
135 | 
136 | import I18n from './I18n';
137 | 
138 | const Hello = () => (
139 |   <div>
140 |     <I18n t="hello" />
141 | 
142 |     <NavLink ignoreLocale to="/en/hello">
143 |       English
144 |     </NavLink>
145 |     <NavLink ignoreLocale to="/fr/hello">
146 |       French
147 |     </NavLink>
148 |   </div>
149 | );
150 | 
151 | export default Hello;
152 | ```
153 | 
154 | ##### Note
155 | 
156 | A `Link` must be used inside of a route that receives the `locale` param. For example:
157 | 
158 | ```jsx
159 | import React from 'react';
160 | import { BrowserRouter as Router, Route } from 'react-router-dom';
161 | import { Link } from 'react-router-i18n';
162 | 
163 | const base = '/:locale(en|fr)?';
164 | 
165 | const App = () => (
166 |   <Router>
167 |     <>
168 |       {/* This will not work because it does not receive `locale` */}
169 |       {/* <Link to="/home">Home</Link> */}
170 | 
171 |       {/* Use code like this instead */}
172 |       <Route path={base} render={() => <Link to="/home">Home</Link>} />
173 | 
174 |       <Route exact path={base} component={Home} />
175 |       <Route path={`${base}/hello`} component={Hello} />
176 |     </>
177 |   </Router>
178 | );
179 | 
180 | export default App;
181 | ```
182 | 
183 | #### Other functionality
184 | 
185 | ##### Nested translations
186 | 
187 | The `translations` object can have objects inside of it. For example:
188 | 
189 | ```javascript
190 | const translations = {
191 |   en: {
192 |     home: {
193 |       title: 'Home',
194 |     }
195 |   },
196 |   fr: {
197 |     home: {
198 |       title: 'Accueil',
199 |     }
200 |   },
201 | };
202 | ```
203 | 
204 | These can be used by giving the `I18n` component `t="home.title"`:
205 | 
206 | ```jsx
207 | <I18n t="home.title" />
208 | ```
209 | 
210 | ##### Function translations
211 | 
212 | The `translations` object can have a function as the translation. For example:
213 | 
214 | ```javascript
215 | const translations = {
216 |   en: {
217 |     time: ({ hour, minute }) => `${hour}:${minute}`,
218 |   },
219 |   fr: {
220 |     time: ({ hour, minute }) => `${hour}h${minute}`,
221 |   },
222 | };
223 | ```
224 | 
225 | An argument can be passed to the function by giving the `I18n` component `args`:
226 | 
227 | ```jsx
228 | <I18n t="time" args={{ hour: '12', minute: '30' }}  />
229 | ```
230 | 
231 | ##### Translations outside of &lt;I18n&gt;
232 | 
233 | Translation text can also be retrieved outside of an `I18n` component using the `getTranslation` function. For example:
234 | 
235 | ```javascript
236 | const translations = {
237 |   en: {
238 |     search: 'Search...'
239 |   },
240 |   fr: {
241 |     search: 'Rechercher...',
242 |   },
243 | }
244 | ```
245 | 
246 | ```jsx
247 | const { location } = this.props;
248 | 
249 | <input placeholder={I18n.getTranslation(location, 'search')} />
250 | ```
251 | 
252 | Note that
253 | [location](https://github.com/ReactTraining/react-router/blob/0f5d701648568cf95bef66c9be0798c15eef6d50/packages/react-router/docs/api/location.md)
254 | needs to be passed in as the first argument.
255 | The `location` prop is passed to a component from React Router.
256 | 
257 | The `getTranslation` function takes an optional third argument that corresponds to the `args` attribute of the I18n component:
258 | 
259 | ```jsx
260 | const { location } = this.props;
261 | 
262 | <input placeholder={I18n.getTranslation(location, 'time', { hour: '12', minute: '30' })} />
263 | ```
264 | 
265 | ##### Default translation
266 | 
267 | If there is no translation found for the given locale, the library will look in the following places:
268 | 
269 | 1. The same `t` in the default locale (i.e. the first locale in the locales array).
270 | 2. The children of the `<I18n>` component.
271 | 3. The `missingText` passed to the `createI18n` function. By default this is `false`, so if no translation text is found, the `<I18n>` component will simply not render.
272 | 
273 | For example, given the following `I18n` component:
274 | 
275 | ```jsx
276 | import { createI18n } from 'react-router-i18n';
277 | 
278 | // Array of supported locales
279 | // The first in the array is treated as the default locale
280 | const locales = ['en', 'fr'];
281 | 
282 | // Dictionary of translations
283 | const translations = {
284 |   en: {
285 |     hello: 'Hello',
286 |   },
287 |   fr: {
288 |     goodbye: 'Au revoir',
289 |   }
290 | };
291 | 
292 | const I18n = createI18n(
293 |   locales,
294 |   translations,
295 |   'Unknown text',
296 | );
297 | 
298 | export default I18n;
299 | ```
300 | 
301 | Used in this way:
302 | 
303 | ```jsx
304 | <>
305 |   <I18n t="hello" />
306 |   <I18n t="goodbye">
307 |     Goodbye
308 |   </I18n>
309 |   <I18n t="other" />
310 | </>
311 | ```
312 | 
313 | The page when viewed with `/fr` will show:
314 | 
315 | ```
316 | Hello
317 | Au revoir
318 | Unknown text
319 | ```
320 | 
321 | With `/en` it will show:
322 | 
323 | ```
324 | Hello
325 | Goodbye
326 | Unknown text
327 | ```
328 | 
329 | ## Development
330 | 
331 | ### Installation
332 | 
333 | `yarn install`
334 | 
335 | ### Running tests
336 | 
337 | `yarn test`
338 | 
339 | ### Running demo application
340 | 
341 | `yarn start`
342 | 
343 | ### Deploying demo application
344 | 
345 | `yarn deploy`
346 | 
347 | ### Building
348 | 
349 | `yarn build`
350 | 
351 | ### Publishing
352 | 
353 | ```
354 | yarn build
355 | npm publish
356 | ```
357 | 
358 | (Make sure to update the `version` in `package.json` before publishing a new release.)
359 | 
360 | ## Upgrading Notes
361 | 
362 | This library is build on top of [DimiMikadze/create-react-library](https://github.com/DimiMikadze/create-react-library).
363 | To upgrade to the latest version of `create-react-library`:
364 | 
365 | * In `package.json`, everything above `devDependencies` should not be updated,
366 |   but everything below it should be replaced by the new versions in `create-react-library`.
367 | * Add back the dependencies for the project
368 | * All of the files in `./scripts` should be replaced with new versions in `create-react-library`.
369 | * All of the files in `./config` should be replaced with new versions in `create-react-library`.
370 | * Test to make sure that building and deploying demo application still work
371 | 


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


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


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


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


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 
18 | // In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
19 | // We don't polyfill it in the browser--this is user's responsibility.
20 | if (process.env.NODE_ENV === 'test') {
21 |   require('raf').polyfill(global);
22 | }
23 | 


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


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


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


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
  4 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  5 | const path = require('path');
  6 | const config = require('./webpack.config.dev');
  7 | const paths = require('./paths');
  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/facebookincubator/create-react-app/issues/2271
 21 |     // https://github.com/facebookincubator/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:
 31 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
 32 |     // Enable gzip compression of generated files.
 33 |     compress: true,
 34 |     // Silence WebpackDevServer's own logs since they're generally not useful.
 35 |     // It will still show compile warnings and errors with this setting.
 36 |     clientLogLevel: 'none',
 37 |     // By default WebpackDevServer serves physical files from current directory
 38 |     // in addition to all the virtual build products that it serves from memory.
 39 |     // This is confusing because those files won’t automatically be available in
 40 |     // production build folder unless we copy them. However, copying the whole
 41 |     // project directory is dangerous because we may expose sensitive files.
 42 |     // Instead, we establish a convention that only files in `public` directory
 43 |     // get served. Our build script will copy `public` into the `build` folder.
 44 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 45 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 46 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 47 |     // Note that we only recommend to use `public` folder as an escape hatch
 48 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
 49 |     // for some reason broken when imported through Webpack. If you just want to
 50 |     // use an image, put it in `src` and `import` it from JavaScript instead.
 51 |     contentBase: paths.appPublic,
 52 |     // By default files from `contentBase` will not trigger a page reload.
 53 |     watchContentBase: true,
 54 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
 55 |     // for the WebpackDevServer client so it can learn when the files were
 56 |     // updated. The WebpackDevServer client is included as an entry point
 57 |     // in the Webpack development configuration. Note that only changes
 58 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
 59 |     hot: true,
 60 |     // It is important to tell WebpackDevServer to use the same "root" path
 61 |     // as we specified in the config. In development, we always serve from /.
 62 |     publicPath: config.output.publicPath,
 63 |     // WebpackDevServer is noisy by default so we emit custom message instead
 64 |     // by listening to the compiler events with `compiler.plugin` calls above.
 65 |     quiet: true,
 66 |     // Reportedly, this avoids CPU overload on some systems.
 67 |     // https://github.com/facebookincubator/create-react-app/issues/293
 68 |     // src/node_modules is not ignored to support absolute imports
 69 |     // https://github.com/facebookincubator/create-react-app/issues/1065
 70 |     watchOptions: {
 71 |       ignored: new RegExp(
 72 |         `^(?!${path
 73 |           .normalize(paths.appSrc + '/')
 74 |           .replace(/[\\]+/g, '\\\\')}).+[\\\\/]node_modules[\\\\/]`,
 75 |         'g'
 76 |       ),
 77 |     },
 78 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
 79 |     https: protocol === 'https',
 80 |     host: host,
 81 |     overlay: false,
 82 |     historyApiFallback: {
 83 |       // Paths with dots should still use the history fallback.
 84 |       // See https://github.com/facebookincubator/create-react-app/issues/387.
 85 |       disableDotRule: true,
 86 |     },
 87 |     public: allowedHost,
 88 |     proxy,
 89 |     before(app) {
 90 |       // This lets us open files from the runtime error overlay.
 91 |       app.use(errorOverlayMiddleware());
 92 |       // This service worker file is effectively a 'no-op' that will reset any
 93 |       // previous service worker registered for the same host:port combination.
 94 |       // We do this in development to avoid hitting the production cache if
 95 |       // it used the same host and port.
 96 |       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
 97 |       app.use(noopServiceWorkerMiddleware(''));
 98 |     },
 99 |   };
100 | };
101 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "react-router-i18n",
  3 |   "version": "1.1.1",
  4 |   "description": "Opinionated internationalization (i18n) library using React Router",
  5 |   "main": "build/index.js",
  6 |   "keywords": [
  7 |     "react-router",
  8 |     "i18n",
  9 |     "internationalization"
 10 |   ],
 11 |   "scripts": {
 12 |     "start": "node scripts/start.js",
 13 |     "deploy": "gh-pages -d demo",
 14 |     "predeploy": "PUBLIC_URL='/react-router-i18n/' yarn run demo",
 15 |     "build": "node scripts/build.js",
 16 |     "demo": "node scripts/demo.js && cp demo/index.html demo/404.html",
 17 |     "test": "node scripts/test.js --env=jsdom",
 18 |     "lint": "eslint --ext=js --ext=jsx ."
 19 |   },
 20 |   "repository": {
 21 |     "type": "git",
 22 |     "url": "git+https://github.com/zfletch/react-router-i18n.git"
 23 |   },
 24 |   "bugs": {
 25 |     "url": "https://github.com/zfletch/react-router-i18n/issues"
 26 |   },
 27 |   "homepage": "https://github.com/zfletch/react-router-i18n",
 28 |   "license": "MIT",
 29 |   "dependencies": {
 30 |     "prop-types": "^15.7.2"
 31 |   },
 32 |   "peerDependencies": {
 33 |     "react": "^16.8.4",
 34 |     "react-dom": "^16.8.1",
 35 |     "react-router-dom": "^4.3.0 || ^5.0.0"
 36 |   },
 37 |   "devDependencies": {
 38 |     "@babel/core": "7.11.0",
 39 |     "@svgr/webpack": "5.4.0",
 40 |     "babel-core": "7.0.0-bridge.0",
 41 |     "babel-eslint": "10.1.0",
 42 |     "babel-jest": "26.2.2",
 43 |     "babel-loader": "8.1.0",
 44 |     "babel-plugin-named-asset-import": "^0.3.6",
 45 |     "babel-preset-react-app": "^9.1.2",
 46 |     "bfj": "7.0.2",
 47 |     "case-sensitive-paths-webpack-plugin": "2.3.0",
 48 |     "css-loader": "4.2.0",
 49 |     "dotenv": "8.2.0",
 50 |     "dotenv-expand": "5.1.0",
 51 |     "eslint": "7.5.0",
 52 |     "eslint-config-airbnb": "^18.2.0",
 53 |     "eslint-config-react-app": "^5.2.1",
 54 |     "eslint-loader": "4.0.2",
 55 |     "eslint-plugin-flowtype": "5.2.0",
 56 |     "eslint-plugin-import": "2.22.0",
 57 |     "eslint-plugin-jest": "^23.20.0",
 58 |     "eslint-plugin-jsx-a11y": "6.3.1",
 59 |     "eslint-plugin-react": "7.20.5",
 60 |     "file-loader": "6.0.0",
 61 |     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
 62 |     "fs-extra": "9.0.1",
 63 |     "gh-pages": "^3.1.0",
 64 |     "html-webpack-plugin": "4.3.0",
 65 |     "identity-obj-proxy": "3.0.0",
 66 |     "jest": "26.2.2",
 67 |     "jest-pnp-resolver": "1.2.2",
 68 |     "jest-resolve": "26.2.2",
 69 |     "jest-watch-typeahead": "^0.6.0",
 70 |     "mini-css-extract-plugin": "0.9.0",
 71 |     "optimize-css-assets-webpack-plugin": "5.0.3",
 72 |     "pnp-webpack-plugin": "1.6.4",
 73 |     "postcss-flexbugs-fixes": "4.2.1",
 74 |     "postcss-loader": "3.0.0",
 75 |     "postcss-preset-env": "6.7.0",
 76 |     "postcss-safe-parser": "4.0.2",
 77 |     "prop-types": "^15.7.2",
 78 |     "react": "^16.13.1",
 79 |     "react-app-polyfill": "^1.0.6",
 80 |     "react-dev-utils": "10.2.1",
 81 |     "react-dom": "^16.13.1",
 82 |     "react-router-dom": "^5.2.0",
 83 |     "react-test-renderer": "^16.13.1",
 84 |     "resolve": "1.17.0",
 85 |     "sass-loader": "9.0.2",
 86 |     "style-loader": "1.2.1",
 87 |     "terser-webpack-plugin": "3.0.8",
 88 |     "url-loader": "4.1.0",
 89 |     "webpack": "4.44.1",
 90 |     "webpack-dev-server": "3.11.0",
 91 |     "webpack-manifest-plugin": "2.2.0",
 92 |     "workbox-webpack-plugin": "5.1.3"
 93 |   },
 94 |   "eslintConfig": {
 95 |     "extends": "react-app"
 96 |   },
 97 |   "browserslist": [
 98 |     ">0.2%",
 99 |     "not dead",
100 |     "not ie <= 11",
101 |     "not op_mini all"
102 |   ],
103 |   "jest": {
104 |     "collectCoverageFrom": [
105 |       "src/**/*.{js,jsx,ts,tsx}",
106 |       "!src/**/*.d.ts"
107 |     ],
108 |     "resolver": "jest-pnp-resolver",
109 |     "setupFiles": [
110 |       "react-app-polyfill/jsdom"
111 |     ],
112 |     "testMatch": [
113 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
114 |       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
115 |     ],
116 |     "testEnvironment": "jsdom",
117 |     "testURL": "http://localhost",
118 |     "transform": {
119 |       "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
120 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
121 |       "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
122 |     },
123 |     "transformIgnorePatterns": [
124 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
125 |       "^.+\\.module\\.(css|sass|scss)$"
126 |     ],
127 |     "moduleNameMapper": {
128 |       "^react-native$": "react-native-web",
129 |       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
130 |     },
131 |     "moduleFileExtensions": [
132 |       "web.js",
133 |       "js",
134 |       "web.ts",
135 |       "ts",
136 |       "web.tsx",
137 |       "tsx",
138 |       "json",
139 |       "web.jsx",
140 |       "jsx",
141 |       "node"
142 |     ]
143 |   },
144 |   "babel": {
145 |     "presets": [
146 |       "react-app"
147 |     ]
148 |   }
149 | }
150 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zfletch/react-router-i18n/6c705b13e86e2f1c5f82e7f38aa72015ed08818f/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
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>React Router I18n Demo Application</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 |     -->
39 |   </body>
40 | </html>
41 | 


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


--------------------------------------------------------------------------------
/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.appLibIndexJs])) { // CRL: Updated with library index file
 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 explictly 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 | 
173 |       if (writeStatsJson) {
174 |         return bfj
175 |           .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
176 |           .then(() => resolve(resolveArgs))
177 |           .catch(error => reject(new Error(error)));
178 |       }
179 | 
180 |       return resolve(resolveArgs);
181 |     });
182 |   });
183 | }
184 | 
185 | function copyPublicFolder() {
186 |   fs.copySync(paths.appPublic, paths.appBuild, {
187 |     dereference: true,
188 |     filter: file => file !== paths.appHtml,
189 |   });
190 | }
191 | 


--------------------------------------------------------------------------------
/scripts/demo.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 configFactory = require('../config/webpack.config.demo');
 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.appDemoIndexJs])) { // CRL: Updated with library index file
 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 | // Generate configuration
 52 | const config = configFactory('production');
 53 | 
 54 | // We require that you explictly set browsers and do not fall back to
 55 | // browserslist defaults.
 56 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 57 | checkBrowsers(paths.appPath, isInteractive)
 58 |   .then(() => {
 59 |     // First, read the current file sizes in build directory.
 60 |     // This lets us display how much they changed later.
 61 |     return measureFileSizesBeforeBuild(paths.appDemoBuild);
 62 |   })
 63 |   .then(previousFileSizes => {
 64 |     // Remove all content but keep the directory so that
 65 |     // if you're in it, you don't end up in Trash
 66 |     fs.emptyDirSync(paths.appDemoBuild);
 67 |     // Merge with the public folder
 68 |     copyPublicFolder();
 69 |     // Start the webpack build
 70 |     return build(previousFileSizes);
 71 |   })
 72 |   .then(
 73 |     ({ stats, previousFileSizes, warnings }) => {
 74 |       if (warnings.length) {
 75 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 76 |         console.log(warnings.join('\n\n'));
 77 |         console.log(
 78 |           '\nSearch for the ' +
 79 |             chalk.underline(chalk.yellow('keywords')) +
 80 |             ' to learn more about each warning.'
 81 |         );
 82 |         console.log(
 83 |           'To ignore, add ' +
 84 |             chalk.cyan('// eslint-disable-next-line') +
 85 |             ' to the line before.\n'
 86 |         );
 87 |       } else {
 88 |         console.log(chalk.green('Compiled successfully.\n'));
 89 |       }
 90 | 
 91 |       console.log('File sizes after gzip:\n');
 92 |       printFileSizesAfterBuild(
 93 |         stats,
 94 |         previousFileSizes,
 95 |         paths.appDemoBuild,
 96 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 97 |         WARN_AFTER_CHUNK_GZIP_SIZE
 98 |       );
 99 |       console.log();
100 | 
101 |       const appPackage = require(paths.appPackageJson);
102 |       const publicUrl = paths.publicUrl;
103 |       const publicPath = config.output.publicPath;
104 |       const buildFolder = path.relative(process.cwd(), paths.appDemoBuild);
105 |       printHostingInstructions(
106 |         appPackage,
107 |         publicUrl,
108 |         publicPath,
109 |         buildFolder,
110 |         useYarn
111 |       );
112 |     },
113 |     err => {
114 |       console.log(chalk.red('Failed to compile.\n'));
115 |       printBuildError(err);
116 |       process.exit(1);
117 |     }
118 |   )
119 |   .catch(err => {
120 |     if (err && err.message) {
121 |       console.log(err.message);
122 |     }
123 |     process.exit(1);
124 |   });
125 | 
126 | // Create the production build and print the deployment instructions.
127 | function build(previousFileSizes) {
128 |   console.log('Creating a build of the demo app...');
129 | 
130 |   let compiler = webpack(config);
131 |   return new Promise((resolve, reject) => {
132 |     compiler.run((err, stats) => {
133 |       let messages;
134 |       if (err) {
135 |         if (!err.message) {
136 |           return reject(err);
137 |         }
138 |         messages = formatWebpackMessages({
139 |           errors: [err.message],
140 |           warnings: [],
141 |         });
142 |       } else {
143 |         messages = formatWebpackMessages(
144 |           stats.toJson({ all: false, warnings: true, errors: true })
145 |         );
146 |       }
147 |       if (messages.errors.length) {
148 |         // Only keep the first error. Others are often indicative
149 |         // of the same problem, but confuse the reader with noise.
150 |         if (messages.errors.length > 1) {
151 |           messages.errors.length = 1;
152 |         }
153 |         return reject(new Error(messages.errors.join('\n\n')));
154 |       }
155 |       if (
156 |         process.env.CI &&
157 |         (typeof process.env.CI !== 'string' ||
158 |           process.env.CI.toLowerCase() !== 'false') &&
159 |         messages.warnings.length
160 |       ) {
161 |         console.log(
162 |           chalk.yellow(
163 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
164 |               'Most CI servers set it automatically.\n'
165 |           )
166 |         );
167 |         return reject(new Error(messages.warnings.join('\n\n')));
168 |       }
169 | 
170 |       const resolveArgs = {
171 |         stats,
172 |         previousFileSizes,
173 |         warnings: messages.warnings,
174 |       };
175 | 
176 |       if (writeStatsJson) {
177 |         return bfj
178 |           .write(paths.appDemoBuild + '/bundle-stats.json', stats.toJson())
179 |           .then(() => resolve(resolveArgs))
180 |           .catch(error => reject(new Error(error)));
181 |       }
182 | 
183 |       return resolve(resolveArgs);
184 |     });
185 |   });
186 | }
187 | 
188 | function copyPublicFolder() {
189 |   fs.copySync(paths.appPublic, paths.appDemoBuild, {
190 |     dereference: true,
191 |     filter: file => file !== paths.appHtml,
192 |   });
193 | }
194 | 


--------------------------------------------------------------------------------
/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 | const fs = require('fs');
18 | const chalk = require('chalk');
19 | const webpack = require('webpack');
20 | const WebpackDevServer = require('webpack-dev-server');
21 | const clearConsole = require('react-dev-utils/clearConsole');
22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
23 | const {
24 |   choosePort,
25 |   createCompiler,
26 |   prepareProxy,
27 |   prepareUrls,
28 | } = require('react-dev-utils/WebpackDevServerUtils');
29 | const openBrowser = require('react-dev-utils/openBrowser');
30 | const paths = require('../config/paths');
31 | const config = require('../config/webpack.config.dev');
32 | const createDevServerConfig = require('../config/webpackDevServer.config');
33 | 
34 | const useYarn = fs.existsSync(paths.yarnLockFile);
35 | const isInteractive = process.stdout.isTTY;
36 | 
37 | // Warn and crash if required files are missing
38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
39 |   process.exit(1);
40 | }
41 | 
42 | // Tools like Cloud9 rely on this.
43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
44 | const HOST = process.env.HOST || '0.0.0.0';
45 | 
46 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler({ webpack, config, appName, urls, useYarn });
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/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 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/src/demo/App.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import PropTypes from 'prop-types';
  3 | 
  4 | import { BrowserRouter as Router, Route } from 'react-router-dom';
  5 | 
  6 | import { Link, NavLink } from '../lib';
  7 | 
  8 | import I18n from './I18n';
  9 | 
 10 | const base = '/:locale(en|fr|pig)?';
 11 | 
 12 | const stripLocale = (pathname, locale) => {
 13 |   if (!locale) {
 14 |     return pathname;
 15 |   }
 16 | 
 17 |   return pathname.replace(`/${locale}`, '');
 18 | };
 19 | 
 20 | const Header = ({
 21 |   location: { pathname },
 22 |   match: { params: { locale } },
 23 |   history,
 24 | }) => (
 25 |   <ul className="header" history={history}>
 26 |     <li>
 27 |       <NavLink to="/">
 28 |         <I18n t="home" />
 29 |       </NavLink>
 30 |     </li>
 31 |     <li>
 32 |       <NavLink to={{ pathname: '/about' }}>
 33 |         <I18n t="about" />
 34 |       </NavLink>
 35 |     </li>
 36 |     <li>
 37 |       <NavLink to={(location) => ({ ...location, pathname: '/topics' })}>
 38 |         <I18n t="topics" />
 39 |       </NavLink>
 40 |     </li>
 41 |     <br />
 42 |     <li>
 43 |       <NavLink ignoreLocale to={`/fr${stripLocale(pathname, locale)}`}>
 44 |         <I18n t="french">
 45 |           Français
 46 |         </I18n>
 47 |       </NavLink>
 48 |     </li>
 49 |     <li>
 50 |       <NavLink ignoreLocale to={`/en${stripLocale(pathname, locale)}`}>
 51 |         <I18n t="english">
 52 |           English
 53 |         </I18n>
 54 |       </NavLink>
 55 |     </li>
 56 |     <li>
 57 |       <NavLink ignoreLocale to={`/pig${stripLocale(pathname, locale)}`}>
 58 |         <I18n t="piglatin">
 59 |           Pig Latin
 60 |         </I18n>
 61 |       </NavLink>
 62 |     </li>
 63 |   </ul>
 64 | );
 65 | 
 66 | Header.propTypes = {
 67 |   location: PropTypes.shape({
 68 |     pathname: PropTypes.string,
 69 |   }).isRequired,
 70 |   match: PropTypes.shape({
 71 |     params: PropTypes.shape({
 72 |       locale: PropTypes.string,
 73 |     }).isRequired,
 74 |   }).isRequired,
 75 |   // eslint-disable-next-line react/forbid-prop-types
 76 |   history: PropTypes.object.isRequired,
 77 | };
 78 | 
 79 | const Home = () => (
 80 |   <>
 81 |     <h2>
 82 |       <I18n t="homePage.title" />
 83 |     </h2>
 84 |     <p>
 85 |       <I18n t="homePage.text">
 86 |         This is the homepage
 87 |       </I18n>
 88 |     </p>
 89 |   </>
 90 | );
 91 | 
 92 | const Topic = ({ match: { params: { topicId } } }) => (
 93 |   <>
 94 |     <h3>
 95 |       <I18n t={topicId} />
 96 |     </h3>
 97 |   </>
 98 | );
 99 | 
100 | Topic.propTypes = {
101 |   match: PropTypes.shape({
102 |     params: PropTypes.shape({
103 |       topicId: PropTypes.string,
104 |     }).isRequired,
105 |   }).isRequired,
106 | };
107 | 
108 | const About = () => (
109 |   <>
110 |     <h2>
111 |       <I18n t="aboutPage.title" />
112 |     </h2>
113 |     <p>
114 |       <I18n t="aboutPage.text">
115 |         About the project
116 |       </I18n>
117 |     </p>
118 |   </>
119 | );
120 | 
121 | const Topics = ({ match: { url, path } }) => (
122 |   <>
123 |     <h2>
124 |       <I18n t="topics" />
125 |     </h2>
126 |     <ul>
127 |       <li>
128 |         <Link ignoreLocale to={`${url}/rendering`}>
129 |           <I18n t="topicPage.rendering">
130 |             Rendering with React
131 |           </I18n>
132 |         </Link>
133 |       </li>
134 |       <li>
135 |         <Link ignoreLocale to={`${url}/components`}>
136 |           <I18n t="topicPage.components">
137 |             Components
138 |           </I18n>
139 |         </Link>
140 |       </li>
141 |       <li>
142 |         <Link ignoreLocale to={`${url}/props_v_state`}>
143 |           <I18n t="topicPage.props">
144 |             Props v. State
145 |           </I18n>
146 |         </Link>
147 |       </li>
148 |     </ul>
149 | 
150 |     <Route path={`${path}/:topicId`} component={Topic} />
151 |     <Route
152 |       exact
153 |       path={path}
154 |       render={() => (
155 |         <h3>
156 |           {' '}
157 |           <I18n t="topicPage.select"> Please select a topic. </I18n>
158 |           {' '}
159 |         </h3>
160 |       )}
161 |     />
162 |   </>
163 | );
164 | 
165 | Topics.propTypes = {
166 |   match: PropTypes.shape({
167 |     url: PropTypes.string,
168 |     path: PropTypes.string,
169 |   }).isRequired,
170 | };
171 | 
172 | const App = () => (
173 |   <Router basename={process.env.PUBLIC_URL}>
174 |     <>
175 |       <Route path={base} component={Header} />
176 |       <hr />
177 |       <Route exact path={base} component={Home} />
178 |       <Route path={`${base}/about`} component={About} />
179 |       <Route path={`${base}/topics`} component={Topics} />
180 |     </>
181 |   </Router>
182 | );
183 | 
184 | export default App;
185 | 


--------------------------------------------------------------------------------
/src/demo/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import renderer from 'react-test-renderer';
 3 | 
 4 | import App from './App';
 5 | 
 6 | it('renders with full navbar and Home page', () => {
 7 |   const tree = renderer.create(<App />).toJSON();
 8 |   expect(tree).toMatchSnapshot();
 9 | });
10 | 
11 | it('renders text in another locale', () => {
12 |   const component = renderer.create(<App />);
13 |   const { history } = component.root.findByProps({ className: 'header' }).props;
14 | 
15 |   history.push('/fr/');
16 | 
17 |   // this is generated randomly; set it to avoid spurious diffs
18 |   history.location.key = 'test';
19 | 
20 |   const tree = component.toJSON();
21 |   expect(tree).toMatchSnapshot();
22 | });
23 | 
24 | it('renders Links as well as NavLinks', () => {
25 |   const component = renderer.create(<App />);
26 |   const { history } = component.root.findByProps({ className: 'header' }).props;
27 | 
28 |   history.push('/topics');
29 | 
30 |   // this is generated randomly; set it to avoid spurious diffs
31 |   history.location.key = 'test';
32 | 
33 |   const tree = component.toJSON();
34 |   expect(tree).toMatchSnapshot();
35 | });
36 | 


--------------------------------------------------------------------------------
/src/demo/I18n.js:
--------------------------------------------------------------------------------
 1 | import { createI18n } from '../lib';
 2 | 
 3 | const locales = ['en', 'fr', 'pig'];
 4 | 
 5 | const translations = {
 6 |   en: {
 7 |     home: 'Home',
 8 |     about: 'About',
 9 |     topics: 'Topics',
10 |     homePage: {
11 |       title: 'Home',
12 |       text: 'This is the homepage',
13 |     },
14 |     aboutPage: {
15 |       title: 'About',
16 |       text: 'About the project',
17 |     },
18 |     topicPage: {
19 |       select: 'Please select a topic',
20 |       components: 'Components',
21 |     },
22 |     rendering: 'rendering',
23 |     components: 'components',
24 |     props_v_state: 'props-v-state',
25 |   },
26 |   fr: {
27 |     home: 'Accueil',
28 |     about: 'À propos',
29 |     topics: 'Sujets',
30 |     homePage: {
31 |       title: 'Accueil',
32 |       text: "Ceci est la page d'accueil",
33 |     },
34 |     aboutPage: {
35 |       title: 'À propos',
36 |       text: 'À propos du sujet',
37 |     },
38 |     topicPage: {
39 |       select: 'Choisissez un sujet',
40 |       rendering: 'Rendu avec React',
41 |       components: 'Composants',
42 |     },
43 |     rendering: 'rendu',
44 |     components: 'composants',
45 |     props_v_state: 'accessoires-v-etat',
46 |   },
47 |   pig: {
48 |     home: 'Eomehay',
49 |     about: 'Boutaay',
50 |     topics: 'Opicstay',
51 |     homePage: {
52 |       title: 'Omehay',
53 |       text: 'Histay siay hetay omehay agepay',
54 |     },
55 |     aboutPage: {
56 |       title: 'Boutaay',
57 |       text: 'Boutaay hetay rojectpay',
58 |     },
59 |     topicPage: {
60 |       select: 'Leasepay electsay aay opictay',
61 |       rendering: 'Enderedray ithway React',
62 |       components: 'Omponentscay',
63 |     },
64 |     rendering: 'enderingray',
65 |     components: 'omponentscay',
66 |     props_v_state: 'ropspay-vay-tatesay',
67 |   },
68 | };
69 | 
70 | const I18n = createI18n(
71 |   locales,
72 |   translations,
73 | );
74 | 
75 | export default I18n;
76 | 


--------------------------------------------------------------------------------
/src/demo/__snapshots__/App.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`renders Links as well as NavLinks 1`] = `
  4 | Array [
  5 |   <ul
  6 |     className="header"
  7 |     history={
  8 |       Object {
  9 |         "action": "PUSH",
 10 |         "block": [Function],
 11 |         "createHref": [Function],
 12 |         "go": [Function],
 13 |         "goBack": [Function],
 14 |         "goForward": [Function],
 15 |         "length": 3,
 16 |         "listen": [Function],
 17 |         "location": Object {
 18 |           "hash": "",
 19 |           "key": "test",
 20 |           "pathname": "/topics",
 21 |           "search": "",
 22 |           "state": undefined,
 23 |         },
 24 |         "push": [Function],
 25 |         "replace": [Function],
 26 |       }
 27 |     }
 28 |   >
 29 |     <li>
 30 |       <a
 31 |         aria-current="page"
 32 |         className="active"
 33 |         href="/"
 34 |         onClick={[Function]}
 35 |         style={Object {}}
 36 |       >
 37 |         Home
 38 |       </a>
 39 |     </li>
 40 |     <li>
 41 |       <a
 42 |         aria-current={null}
 43 |         href="/about"
 44 |         onClick={[Function]}
 45 |       >
 46 |         About
 47 |       </a>
 48 |     </li>
 49 |     <li>
 50 |       <a
 51 |         aria-current="page"
 52 |         className="active"
 53 |         href="/topics"
 54 |         onClick={[Function]}
 55 |         style={Object {}}
 56 |       >
 57 |         Topics
 58 |       </a>
 59 |     </li>
 60 |     <br />
 61 |     <li>
 62 |       <a
 63 |         aria-current={null}
 64 |         href="/fr/topics"
 65 |         onClick={[Function]}
 66 |       >
 67 |         Français
 68 |       </a>
 69 |     </li>
 70 |     <li>
 71 |       <a
 72 |         aria-current={null}
 73 |         href="/en/topics"
 74 |         onClick={[Function]}
 75 |       >
 76 |         English
 77 |       </a>
 78 |     </li>
 79 |     <li>
 80 |       <a
 81 |         aria-current={null}
 82 |         href="/pig/topics"
 83 |         onClick={[Function]}
 84 |       >
 85 |         Pig Latin
 86 |       </a>
 87 |     </li>
 88 |   </ul>,
 89 |   <hr />,
 90 |   <h2>
 91 |     Topics
 92 |   </h2>,
 93 |   <ul>
 94 |     <li>
 95 |       <a
 96 |         href="/topics/rendering"
 97 |         onClick={[Function]}
 98 |       >
 99 |         Rendering with React
100 |       </a>
101 |     </li>
102 |     <li>
103 |       <a
104 |         href="/topics/components"
105 |         onClick={[Function]}
106 |       >
107 |         Components
108 |       </a>
109 |     </li>
110 |     <li>
111 |       <a
112 |         href="/topics/props_v_state"
113 |         onClick={[Function]}
114 |       >
115 |         Props v. State
116 |       </a>
117 |     </li>
118 |   </ul>,
119 |   <h3>
120 |      
121 |     Please select a topic
122 |      
123 |   </h3>,
124 | ]
125 | `;
126 | 
127 | exports[`renders text in another locale 1`] = `
128 | Array [
129 |   <ul
130 |     className="header"
131 |     history={
132 |       Object {
133 |         "action": "PUSH",
134 |         "block": [Function],
135 |         "createHref": [Function],
136 |         "go": [Function],
137 |         "goBack": [Function],
138 |         "goForward": [Function],
139 |         "length": 2,
140 |         "listen": [Function],
141 |         "location": Object {
142 |           "hash": "",
143 |           "key": "test",
144 |           "pathname": "/fr/",
145 |           "search": "",
146 |           "state": undefined,
147 |         },
148 |         "push": [Function],
149 |         "replace": [Function],
150 |       }
151 |     }
152 |   >
153 |     <li>
154 |       <a
155 |         aria-current="page"
156 |         className="active"
157 |         href="/fr/"
158 |         onClick={[Function]}
159 |         style={Object {}}
160 |       >
161 |         Accueil
162 |       </a>
163 |     </li>
164 |     <li>
165 |       <a
166 |         aria-current={null}
167 |         href="/fr/about"
168 |         onClick={[Function]}
169 |       >
170 |         À propos
171 |       </a>
172 |     </li>
173 |     <li>
174 |       <a
175 |         aria-current={null}
176 |         href="/fr/topics"
177 |         onClick={[Function]}
178 |       >
179 |         Sujets
180 |       </a>
181 |     </li>
182 |     <br />
183 |     <li>
184 |       <a
185 |         aria-current="page"
186 |         className="active"
187 |         href="/fr/"
188 |         onClick={[Function]}
189 |         style={Object {}}
190 |       >
191 |         Français
192 |       </a>
193 |     </li>
194 |     <li>
195 |       <a
196 |         aria-current={null}
197 |         href="/en/"
198 |         onClick={[Function]}
199 |       >
200 |         English
201 |       </a>
202 |     </li>
203 |     <li>
204 |       <a
205 |         aria-current={null}
206 |         href="/pig/"
207 |         onClick={[Function]}
208 |       >
209 |         Pig Latin
210 |       </a>
211 |     </li>
212 |   </ul>,
213 |   <hr />,
214 |   <h2>
215 |     Accueil
216 |   </h2>,
217 |   <p>
218 |     Ceci est la page d'accueil
219 |   </p>,
220 | ]
221 | `;
222 | 
223 | exports[`renders with full navbar and Home page 1`] = `
224 | Array [
225 |   <ul
226 |     className="header"
227 |     history={
228 |       Object {
229 |         "action": "POP",
230 |         "block": [Function],
231 |         "createHref": [Function],
232 |         "go": [Function],
233 |         "goBack": [Function],
234 |         "goForward": [Function],
235 |         "length": 1,
236 |         "listen": [Function],
237 |         "location": Object {
238 |           "hash": "",
239 |           "pathname": "/",
240 |           "search": "",
241 |           "state": undefined,
242 |         },
243 |         "push": [Function],
244 |         "replace": [Function],
245 |       }
246 |     }
247 |   >
248 |     <li>
249 |       <a
250 |         aria-current="page"
251 |         className="active"
252 |         href="/"
253 |         onClick={[Function]}
254 |         style={Object {}}
255 |       >
256 |         Home
257 |       </a>
258 |     </li>
259 |     <li>
260 |       <a
261 |         aria-current={null}
262 |         href="/about"
263 |         onClick={[Function]}
264 |       >
265 |         About
266 |       </a>
267 |     </li>
268 |     <li>
269 |       <a
270 |         aria-current={null}
271 |         href="/topics"
272 |         onClick={[Function]}
273 |       >
274 |         Topics
275 |       </a>
276 |     </li>
277 |     <br />
278 |     <li>
279 |       <a
280 |         aria-current={null}
281 |         href="/fr/"
282 |         onClick={[Function]}
283 |       >
284 |         Français
285 |       </a>
286 |     </li>
287 |     <li>
288 |       <a
289 |         aria-current={null}
290 |         href="/en/"
291 |         onClick={[Function]}
292 |       >
293 |         English
294 |       </a>
295 |     </li>
296 |     <li>
297 |       <a
298 |         aria-current={null}
299 |         href="/pig/"
300 |         onClick={[Function]}
301 |       >
302 |         Pig Latin
303 |       </a>
304 |     </li>
305 |   </ul>,
306 |   <hr />,
307 |   <h2>
308 |     Home
309 |   </h2>,
310 |   <p>
311 |     This is the homepage
312 |   </p>,
313 | ]
314 | `;
315 | 


--------------------------------------------------------------------------------
/src/demo/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import { unregister } from './registerServiceWorker';
5 | 
6 | ReactDOM.render(<App />, document.getElementById('root'));
7 | 
8 | unregister();
9 | 


--------------------------------------------------------------------------------
/src/demo/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 18 |     )
 19 | );
 20 | 
 21 | export default function register() {
 22 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 23 |     // The URL constructor is available in all browsers that support SW.
 24 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 25 |     if (publicUrl.origin !== window.location.origin) {
 26 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 27 |       // from what our page is served on. This might happen if a CDN is used to
 28 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 29 |       return;
 30 |     }
 31 | 
 32 |     window.addEventListener('load', () => {
 33 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 34 | 
 35 |       if (isLocalhost) {
 36 |         // This is running on localhost. Lets check if a service worker still exists or not.
 37 |         checkValidServiceWorker(swUrl);
 38 |       } else {
 39 |         // Is not local host. Just register service worker
 40 |         registerValidSW(swUrl);
 41 |       }
 42 |     });
 43 |   }
 44 | }
 45 | 
 46 | function registerValidSW(swUrl) {
 47 |   navigator.serviceWorker
 48 |     .register(swUrl)
 49 |     .then(registration => {
 50 |       registration.onupdatefound = () => {
 51 |         const installingWorker = registration.installing;
 52 |         installingWorker.onstatechange = () => {
 53 |           if (installingWorker.state === 'installed') {
 54 |             if (navigator.serviceWorker.controller) {
 55 |               // At this point, the old content will have been purged and
 56 |               // the fresh content will have been added to the cache.
 57 |               // It's the perfect time to display a "New content is
 58 |               // available; please refresh." message in your web app.
 59 |               console.log('New content is available; please refresh.');
 60 |             } else {
 61 |               // At this point, everything has been precached.
 62 |               // It's the perfect time to display a
 63 |               // "Content is cached for offline use." message.
 64 |               console.log('Content is cached for offline use.');
 65 |             }
 66 |           }
 67 |         };
 68 |       };
 69 |     })
 70 |     .catch(error => {
 71 |       console.error('Error during service worker registration:', error);
 72 |     });
 73 | }
 74 | 
 75 | function checkValidServiceWorker(swUrl) {
 76 |   // Check if the service worker can be found. If it can't reload the page.
 77 |   fetch(swUrl)
 78 |     .then(response => {
 79 |       // Ensure service worker exists, and that we really are getting a JS file.
 80 |       if (
 81 |         response.status === 404 ||
 82 |         response.headers.get('content-type').indexOf('javascript') === -1
 83 |       ) {
 84 |         // No service worker found. Probably a different app. Reload the page.
 85 |         navigator.serviceWorker.ready.then(registration => {
 86 |           registration.unregister().then(() => {
 87 |             window.location.reload();
 88 |           });
 89 |         });
 90 |       } else {
 91 |         // Service worker found. Proceed as normal.
 92 |         registerValidSW(swUrl);
 93 |       }
 94 |     })
 95 |     .catch(() => {
 96 |       console.log(
 97 |         'No internet connection found. App is running in offline mode.'
 98 |       );
 99 |     });
100 | }
101 | 
102 | export function unregister() {
103 |   if ('serviceWorker' in navigator) {
104 |     navigator.serviceWorker.ready.then(registration => {
105 |       registration.unregister();
106 |     });
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/src/lib/components/I18n/__snapshots__/createI18n.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`default translations does not render when there is no translation 1`] = `null`;
 4 | 
 5 | exports[`default translations uses props.children when there is no translation 1`] = `"Other"`;
 6 | 
 7 | exports[`default translations uses the default if one is given and there is no translation 1`] = `"Missing"`;
 8 | 
 9 | exports[`default translations uses the default language translation when there is none 1`] = `"Home"`;
10 | 
11 | exports[`function translations executes the function and uses the result as the translation 1`] = `"12:30"`;
12 | 
13 | exports[`function translations works with getTranslation 1`] = `
14 | <span>
15 |   12:30
16 | </span>
17 | `;
18 | 
19 | exports[`getTranslation function shows the translation 1`] = `
20 | <span>
21 |   Home
22 | </span>
23 | `;
24 | 
25 | exports[`getTranslation function shows the translation of another locale 1`] = `
26 | <span>
27 |   Accueil
28 | </span>
29 | `;
30 | 
31 | exports[`nested translations shows a nested translation 1`] = `"Nested"`;
32 | 
33 | exports[`renders without crashing 1`] = `"Home"`;
34 | 
35 | exports[`shows the translation of another locale 1`] = `"Accueil"`;
36 | 


--------------------------------------------------------------------------------
/src/lib/components/I18n/__snapshots__/withLocale.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`adds the locale to \`to\` when there is a match 1`] = `
 4 | <div>
 5 |   fr/test
 6 | </div>
 7 | `;
 8 | 
 9 | exports[`passes through any other arguments 1`] = `
10 | <div>
11 |   test
12 |   example
13 | </div>
14 | `;
15 | 
16 | exports[`renders normally when there is no match 1`] = `
17 | <div>
18 |   test
19 | </div>
20 | `;
21 | 
22 | exports[`renders without crashing 1`] = `
23 | <div>
24 |   test
25 | </div>
26 | `;
27 | 


--------------------------------------------------------------------------------
/src/lib/components/I18n/createI18n.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import { matchPath, withRouter } from 'react-router-dom';
  4 | 
  5 | const hasKey = (obj, key) => (
  6 |   Object.prototype.hasOwnProperty.call(obj, key)
  7 | );
  8 | 
  9 | const dig = (obj, keys) => {
 10 |   if (!obj) {
 11 |     return null;
 12 |   }
 13 | 
 14 |   const [first, ...rest] = keys;
 15 | 
 16 |   if (rest.length === 0) {
 17 |     if (hasKey(obj, first)) {
 18 |       return obj[first];
 19 |     }
 20 | 
 21 |     return null;
 22 |   }
 23 | 
 24 |   if (hasKey(obj, first)) {
 25 |     return dig(obj[first], rest);
 26 |   }
 27 | 
 28 |   return null;
 29 | };
 30 | 
 31 | const getLocale = (path, defaultLocale, pathname) => {
 32 |   const { params } = matchPath(pathname, { path });
 33 | 
 34 |   if (!params) { return defaultLocale; }
 35 | 
 36 |   const { locale } = params;
 37 | 
 38 |   if (!locale) { return defaultLocale; }
 39 | 
 40 |   return locale;
 41 | };
 42 | 
 43 | const getValue = (path, defaultLocale, pathname, t, children, translations, missingText) => {
 44 |   const locale = getLocale(path, defaultLocale, pathname);
 45 |   const splitT = t.split('.');
 46 | 
 47 |   if (hasKey(translations, locale)) {
 48 |     const translation = dig(translations[locale], splitT);
 49 | 
 50 |     if (translation !== null) {
 51 |       return translation;
 52 |     }
 53 |   }
 54 | 
 55 |   const defaultTranslation = dig(translations[defaultLocale], splitT);
 56 | 
 57 |   if (defaultTranslation !== null) {
 58 |     return defaultTranslation;
 59 |   }
 60 | 
 61 |   if (children !== undefined) { return children; }
 62 | 
 63 |   return missingText;
 64 | };
 65 | 
 66 | const getTranslation = (
 67 |   path,
 68 |   defaultLocale,
 69 |   pathname,
 70 |   t,
 71 |   args,
 72 |   children,
 73 |   translations,
 74 |   missingText,
 75 | ) => {
 76 |   const value = getValue(path, defaultLocale, pathname, t, children, translations, missingText);
 77 | 
 78 |   if (typeof value === 'function') {
 79 |     return value(args);
 80 |   }
 81 | 
 82 |   return value;
 83 | };
 84 | 
 85 | const createI18n = (locales, translations, missingText = false) => {
 86 |   const [defaultLocale] = locales;
 87 |   const path = `/:locale(${locales.join('|')})?`;
 88 | 
 89 |   const I18n = ({
 90 |     location: { pathname },
 91 |     children,
 92 |     t,
 93 |     args,
 94 |   }) => (
 95 |     <>
 96 |       {getTranslation(path, defaultLocale, pathname, t, args, children, translations, missingText)}
 97 |     </>
 98 |   );
 99 | 
100 |   I18n.getTranslation = ({ pathname }, t, args = {}) => (
101 |     getTranslation(path, defaultLocale, pathname, t, args, undefined, translations, missingText)
102 |   );
103 | 
104 |   I18n.propTypes = {
105 |     location: PropTypes.shape({
106 |       pathname: PropTypes.string,
107 |     }).isRequired,
108 |     children: PropTypes.node,
109 |     t: PropTypes.string.isRequired,
110 |     // eslint-disable-next-line react/forbid-prop-types
111 |     args: PropTypes.object,
112 |   };
113 |   I18n.defaultProps = {
114 |     children: undefined,
115 |     args: undefined,
116 |   };
117 | 
118 |   return withRouter(I18n);
119 | };
120 | 
121 | export default createI18n;
122 | 


--------------------------------------------------------------------------------
/src/lib/components/I18n/createI18n.test.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import renderer from 'react-test-renderer';
  3 | import { MemoryRouter, withRouter } from 'react-router-dom';
  4 | import createI18n from './createI18n';
  5 | 
  6 | const locales = ['en', 'fr'];
  7 | let translations = {
  8 |   en: {
  9 |     home: 'Home',
 10 |   },
 11 |   fr: {
 12 |     home: 'Accueil',
 13 |   },
 14 | };
 15 | 
 16 | let I18n;
 17 | beforeEach(() => {
 18 |   I18n = createI18n(
 19 |     locales,
 20 |     translations,
 21 |   );
 22 | });
 23 | 
 24 | it('renders without crashing', () => {
 25 |   const component = (
 26 |     <MemoryRouter>
 27 |       <I18n t="home" />
 28 |     </MemoryRouter>
 29 |   );
 30 | 
 31 |   const tree = renderer.create(component).toJSON();
 32 |   expect(tree).toMatchSnapshot();
 33 | });
 34 | 
 35 | it('shows the translation of another locale', () => {
 36 |   const component = (
 37 |     <MemoryRouter initialEntries={['/fr/']}>
 38 |       <I18n t="home" />
 39 |     </MemoryRouter>
 40 |   );
 41 | 
 42 |   const tree = renderer.create(component).toJSON();
 43 |   expect(tree).toMatchSnapshot();
 44 | });
 45 | 
 46 | describe('getTranslation function', () => {
 47 |   const Example = withRouter(({ location }) => (
 48 |     <span>{I18n.getTranslation(location, 'home')}</span>
 49 |   ));
 50 | 
 51 |   it('shows the translation', () => {
 52 |     const component = (
 53 |       <MemoryRouter>
 54 |         <Example />
 55 |       </MemoryRouter>
 56 |     );
 57 | 
 58 |     const tree = renderer.create(component).toJSON();
 59 |     expect(tree).toMatchSnapshot();
 60 |   });
 61 | 
 62 |   it('shows the translation of another locale', () => {
 63 |     const component = (
 64 |       <MemoryRouter initialEntries={['/fr/']}>
 65 |         <Example />
 66 |       </MemoryRouter>
 67 |     );
 68 | 
 69 |     const tree = renderer.create(component).toJSON();
 70 |     expect(tree).toMatchSnapshot();
 71 |   });
 72 | });
 73 | 
 74 | describe('nested translations', () => {
 75 |   beforeAll(() => {
 76 |     translations = {
 77 |       en: {
 78 |         nested: {
 79 |           translation: 'Nested',
 80 |         },
 81 |       },
 82 |     };
 83 |   });
 84 | 
 85 |   it('shows a nested translation', () => {
 86 |     const component = (
 87 |       <MemoryRouter>
 88 |         <I18n t="nested.translation" />
 89 |       </MemoryRouter>
 90 |     );
 91 | 
 92 |     const tree = renderer.create(component).toJSON();
 93 |     expect(tree).toMatchSnapshot();
 94 |   });
 95 | });
 96 | 
 97 | describe('function translations', () => {
 98 |   beforeAll(() => {
 99 |     translations = {
100 |       en: {
101 |         time: ({ hour, minute }) => `${hour}:${minute}`,
102 |       },
103 |     };
104 |   });
105 | 
106 |   it('executes the function and uses the result as the translation', () => {
107 |     const component = (
108 |       <MemoryRouter>
109 |         <I18n t="time" args={{ hour: '12', minute: '30' }} />
110 |       </MemoryRouter>
111 |     );
112 | 
113 |     const tree = renderer.create(component).toJSON();
114 |     expect(tree).toMatchSnapshot();
115 |   });
116 | 
117 |   it('works with getTranslation', () => {
118 |     const Example = withRouter(({ location }) => (
119 |       <span>{I18n.getTranslation(location, 'time', { hour: '12', minute: '30' })}</span>
120 |     ));
121 | 
122 |     const component = (
123 |       <MemoryRouter>
124 |         <Example />
125 |       </MemoryRouter>
126 |     );
127 | 
128 |     const tree = renderer.create(component).toJSON();
129 |     expect(tree).toMatchSnapshot();
130 |   });
131 | });
132 | 
133 | describe('default translations', () => {
134 |   beforeAll(() => {
135 |     translations = {
136 |       en: {
137 |         home: 'Home',
138 |       },
139 |     };
140 |   });
141 | 
142 |   it('uses the default language translation when there is none', () => {
143 |     const component = (
144 |       <MemoryRouter initialEntries={['/fr/']}>
145 |         <I18n t="home" />
146 |       </MemoryRouter>
147 |     );
148 | 
149 |     const tree = renderer.create(component).toJSON();
150 |     expect(tree).toMatchSnapshot();
151 |   });
152 | 
153 |   it('uses props.children when there is no translation', () => {
154 |     const component = (
155 |       <MemoryRouter>
156 |         <I18n t="other">
157 |           Other
158 |         </I18n>
159 |       </MemoryRouter>
160 |     );
161 | 
162 |     const tree = renderer.create(component).toJSON();
163 |     expect(tree).toMatchSnapshot();
164 |   });
165 | 
166 |   it('does not render when there is no translation', () => {
167 |     const component = (
168 |       <MemoryRouter>
169 |         <I18n t="other" />
170 |       </MemoryRouter>
171 |     );
172 | 
173 |     const tree = renderer.create(component).toJSON();
174 |     expect(tree).toMatchSnapshot();
175 |   });
176 | 
177 |   it('uses the default if one is given and there is no translation', () => {
178 |     I18n = createI18n(
179 |       locales,
180 |       translations,
181 |       'Missing',
182 |     );
183 | 
184 |     const component = (
185 |       <MemoryRouter>
186 |         <I18n t="other" />
187 |       </MemoryRouter>
188 |     );
189 | 
190 |     const tree = renderer.create(component).toJSON();
191 |     expect(tree).toMatchSnapshot();
192 |   });
193 | });
194 | 


--------------------------------------------------------------------------------
/src/lib/components/I18n/index.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Link as RRLink,
 3 |   NavLink as RRNavLink,
 4 |   Redirect as RRRedirect,
 5 | } from 'react-router-dom';
 6 | 
 7 | import withLocale from './withLocale';
 8 | import createI18n from './createI18n';
 9 | 
10 | const Link = withLocale(RRLink);
11 | const NavLink = withLocale(RRNavLink);
12 | const Redirect = withLocale(RRRedirect);
13 | 
14 | export {
15 |   createI18n,
16 |   Link,
17 |   NavLink,
18 |   Redirect,
19 | };
20 | 


--------------------------------------------------------------------------------
/src/lib/components/I18n/withLocale.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import PropTypes from 'prop-types';
  3 | 
  4 | import { withRouter } from 'react-router-dom';
  5 | 
  6 | const newToPath = (to, locale) => (
  7 |   to[0] === '/'
  8 |     ? `/${locale}${to}`
  9 |     : `${locale}/${to}`
 10 | );
 11 | 
 12 | const newToObject = (to, locale) => {
 13 |   const { pathname } = to;
 14 | 
 15 |   if (typeof pathname !== 'string') { return to; }
 16 | 
 17 |   const toObj = { ...to, pathname: newToPath(pathname, locale) };
 18 | 
 19 |   return toObj;
 20 | };
 21 | 
 22 | const newToFunction = (to, locale) => (
 23 |   (location) => {
 24 |     const result = to(location);
 25 | 
 26 |     return typeof result === 'string'
 27 |       ? newToPath(result, locale)
 28 |       : newToObject(result, locale);
 29 |   }
 30 | );
 31 | 
 32 | const newTo = (to, params) => {
 33 |   if (!params) { return to; }
 34 | 
 35 |   const { locale } = params;
 36 | 
 37 |   if (!locale) { return to; }
 38 | 
 39 |   const type = typeof to;
 40 | 
 41 |   if (type === 'string') { return newToPath(to, locale); }
 42 |   if (type === 'function') { return newToFunction(to, locale); }
 43 | 
 44 |   return newToObject(to, locale);
 45 | };
 46 | 
 47 | const withLocale = (WrappedComponent) => {
 48 |   const NewComponent = ({
 49 |     to,
 50 |     match,
 51 |     history,
 52 |     location,
 53 |     ignoreLocale,
 54 |     staticContext,
 55 |     ...rest
 56 |   }) => {
 57 |     const { params } = match;
 58 | 
 59 |     if (ignoreLocale) {
 60 |       return (
 61 |         <WrappedComponent
 62 |           to={to}
 63 |           {...rest}
 64 |         />
 65 |       );
 66 |     }
 67 | 
 68 |     return (
 69 |       <WrappedComponent
 70 |         to={newTo(to, params)}
 71 |         {...rest}
 72 |       />
 73 |     );
 74 |   };
 75 | 
 76 |   NewComponent.propTypes = {
 77 |     to: PropTypes.oneOfType([
 78 |       PropTypes.string,
 79 |       // eslint-disable-next-line react/forbid-prop-types
 80 |       PropTypes.object,
 81 |       PropTypes.func,
 82 |     ]).isRequired,
 83 |     match: PropTypes.shape({
 84 |       params: PropTypes.shape({
 85 |         locale: PropTypes.string,
 86 |       }),
 87 |     }).isRequired,
 88 |     ignoreLocale: PropTypes.bool,
 89 |     // eslint-disable-next-line react/forbid-prop-types
 90 |     staticContext: PropTypes.object,
 91 |     // eslint-disable-next-line react/forbid-prop-types
 92 |     history: PropTypes.object,
 93 |     // eslint-disable-next-line react/forbid-prop-types
 94 |     location: PropTypes.object,
 95 |   };
 96 | 
 97 |   NewComponent.defaultProps = {
 98 |     ignoreLocale: false,
 99 |     staticContext: undefined,
100 |     history: undefined,
101 |     location: undefined,
102 |   };
103 | 
104 |   return withRouter(NewComponent);
105 | };
106 | 
107 | export default withLocale;
108 | 


--------------------------------------------------------------------------------
/src/lib/components/I18n/withLocale.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import renderer from 'react-test-renderer';
 3 | import { MemoryRouter, Route } from 'react-router-dom';
 4 | import withLocale from './withLocale';
 5 | 
 6 | const OriginalComponent = ({ to, text }) => (
 7 |   <div>
 8 |     {to}
 9 |     {text}
10 |   </div>
11 | );
12 | const WrappedComponent = withLocale(OriginalComponent);
13 | 
14 | it('renders without crashing', () => {
15 |   const component = (
16 |     <MemoryRouter>
17 |       <WrappedComponent to="test" />
18 |     </MemoryRouter>
19 |   );
20 | 
21 |   const tree = renderer.create(component).toJSON();
22 |   expect(tree).toMatchSnapshot();
23 | });
24 | 
25 | it('renders normally when there is no match', () => {
26 |   const component = (
27 |     <MemoryRouter initialEntries={['/home/']}>
28 |       <Route exact path="/:locale?/home" component={() => <WrappedComponent to="test" />} />
29 |     </MemoryRouter>
30 |   );
31 | 
32 |   const tree = renderer.create(component).toJSON();
33 |   expect(tree).toMatchSnapshot();
34 | });
35 | 
36 | it('adds the locale to `to` when there is a match', () => {
37 |   const component = (
38 |     <MemoryRouter initialEntries={['/fr/home/']}>
39 |       <Route exact path="/:locale?/home" component={() => <WrappedComponent to="test" />} />
40 |     </MemoryRouter>
41 |   );
42 | 
43 |   const tree = renderer.create(component).toJSON();
44 |   expect(tree).toMatchSnapshot();
45 | });
46 | 
47 | it('passes through any other arguments', () => {
48 |   const component = (
49 |     <MemoryRouter>
50 |       <WrappedComponent to="test" text="example" />
51 |     </MemoryRouter>
52 |   );
53 | 
54 |   const tree = renderer.create(component).toJSON();
55 |   expect(tree).toMatchSnapshot();
56 | });
57 | 


--------------------------------------------------------------------------------
/src/lib/index.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   createI18n,
 3 |   Link,
 4 |   NavLink,
 5 |   Redirect,
 6 | } from './components/I18n';
 7 | 
 8 | export {
 9 |   createI18n,
10 |   Link,
11 |   NavLink,
12 |   Redirect,
13 | };
14 | 


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