From 17de5d19f57b983261571f47ffe8dc4b50ad46f3 Mon Sep 17 00:00:00 2001 From: Chris Shepherd Date: Sat, 10 Sep 2022 12:19:36 +0100 Subject: [PATCH 1/8] Remove merge artifacts from package-lock.json --- package-lock.json | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index ea5b4f049f..533b9f1d6f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29948,15 +29948,6 @@ "cross-env": "^7.0.3", "eslint": "^8.3.0", "eslint-config-react-app": "^7.0.0", -<<<<<<< HEAD -======= -======= -<<<<<<< HEAD ->>>>>>> f21e2137 (Publish) -======= ->>>>>>> 9f8d75e5 (chore(lint): lint all files) ->>>>>>> fb003998 (chore(lint): lint all files) ->>>>>>> f301bfe4 (chore(lint): lint all files) "flow-bin": "^0.116.0", "html-entities": "^2.3.2", "jest": "^27.4.3", @@ -47337,19 +47328,8 @@ "chalk": "^4.1.2", "chokidar": "^3.5.2", "cross-env": "^7.0.3", -<<<<<<< HEAD "eslint": "^8.3.0", "eslint-config-react-app": "^7.0.0", -======= -<<<<<<< HEAD -======= -<<<<<<< HEAD - "eslint": "^8.3.0", - "eslint-config-react-app": "^7.0.0", -======= ->>>>>>> 9f8d75e5 (chore(lint): lint all files) ->>>>>>> fb003998 (chore(lint): lint all files) ->>>>>>> f301bfe4 (chore(lint): lint all files) "flow-bin": "^0.116.0", "html-entities": "^2.3.2", "jest": "^27.4.3", From 624fe166d762c4bff8b33da62cfd2c795b9f31a2 Mon Sep 17 00:00:00 2001 From: Chris Shepherd Date: Tue, 3 Nov 2020 23:32:33 +0000 Subject: [PATCH 2/8] Remove error if paths are used in tsconfig.json --- packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js index cdc2d77a88..bb7ab281d6 100644 --- a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js +++ b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js @@ -156,7 +156,6 @@ function verifyTypeScriptSetup() { : 'react', reason: 'to support the new JSX transform in React 17', }, - paths: { value: undefined, reason: 'aliased imports are not supported' }, }; const formatDiagnosticHost = { From 50fdee6ab617c85ac5285145f0385fcdf7a385f4 Mon Sep 17 00:00:00 2001 From: Chris Shepherd Date: Wed, 4 Nov 2020 23:24:58 +0000 Subject: [PATCH 3/8] feat: use tsconfig or jsconfig paths for Jest and Webpack --- packages/react-scripts/config/modules.js | 43 +++++++++++++++++++----- 1 file changed, 35 insertions(+), 8 deletions(-) diff --git a/packages/react-scripts/config/modules.js b/packages/react-scripts/config/modules.js index 22820993a2..b692d6ee11 100644 --- a/packages/react-scripts/config/modules.js +++ b/packages/react-scripts/config/modules.js @@ -63,19 +63,34 @@ function getAdditionalModulePaths(options = {}) { * @param {*} options */ function getWebpackAliases(options = {}) { - const baseUrl = options.baseUrl; + const { baseUrl, paths: configPaths } = options; if (!baseUrl) { return {}; } + const aliases = {}; const baseUrlResolved = path.resolve(paths.appPath, baseUrl); if (path.relative(paths.appPath, baseUrlResolved) === '') { - return { - src: paths.appSrc, - }; + aliases.src = paths.appSrc; + } + + if (configPaths != null) { + Object.entries(configPaths).forEach(([key, [value]]) => { + aliases[replaceGlobs(key)] = path.resolve( + paths.appPath, + baseUrl, + replaceGlobs(value) + ); + }); } + + return aliases; +} + +function replaceGlobs(path) { + return path.replace(/(\/\*\*)*\/\*$/, ''); } /** @@ -84,19 +99,31 @@ function getWebpackAliases(options = {}) { * @param {*} options */ function getJestAliases(options = {}) { - const baseUrl = options.baseUrl; + const { baseUrl, paths: configPaths } = options; if (!baseUrl) { return {}; } + const aliases = {}; const baseUrlResolved = path.resolve(paths.appPath, baseUrl); if (path.relative(paths.appPath, baseUrlResolved) === '') { - return { - '^src/(.*)$': '/src/$1', - }; + aliases['^src/(.*)$'] = '/src/$1'; } + + if (configPaths != null) { + const prefix = `/${baseUrl.replace(/^\.\//, '')}`; + + Object.entries(configPaths).forEach(([key, [value]]) => { + aliases[`^${key.replace(/\*/, '(.*)')}`] = `${prefix}/${value.replace( + /\*/, + '$1' + )}`; + }); + } + + return aliases; } function getModules() { From bbc3423f3dc49919212ec805e53413326d980754 Mon Sep 17 00:00:00 2001 From: Chris Shepherd Date: Wed, 4 Nov 2020 23:25:32 +0000 Subject: [PATCH 4/8] feat: add warning to warn that TypeScript paths requires baseUrl --- .../react-scripts/scripts/utils/verifyTypeScriptSetup.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js index bb7ab281d6..561e174fa3 100644 --- a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js +++ b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js @@ -259,6 +259,12 @@ function verifyTypeScriptSetup() { ); } + if (parsedTsConfig.paths != null && parsedTsConfig.baseUrl == null) { + messages.push( + `${chalk.cyan('paths')} requires ${chalk.cyan('baseUrl')} to be set` + ); + } + if (messages.length > 0) { if (firstTimeSetup) { console.log( From 62db52c5e9dc14b6461c4590aa42d9c0804571bf Mon Sep 17 00:00:00 2001 From: Chris Shepherd Date: Sun, 8 Nov 2020 17:49:02 +0000 Subject: [PATCH 5/8] refactor: check for TypeScript 4.1 before warning about baseUrl & paths --- .../scripts/utils/verifyTypeScriptSetup.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js index 561e174fa3..8692515b6a 100644 --- a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js +++ b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js @@ -259,10 +259,12 @@ function verifyTypeScriptSetup() { ); } - if (parsedTsConfig.paths != null && parsedTsConfig.baseUrl == null) { - messages.push( - `${chalk.cyan('paths')} requires ${chalk.cyan('baseUrl')} to be set` - ); + if (parsedTsConfig.paths != null) { + if (semver.lt(ts.version, '4.1.0') && parsedTsConfig.baseUrl == null) { + messages.push( + `${chalk.cyan('paths')} requires ${chalk.cyan('baseUrl')} to be set` + ); + } } if (messages.length > 0) { From 3c54eaf7f6ab36b406b64c59d094d6bae7826045 Mon Sep 17 00:00:00 2001 From: Chris Shepherd Date: Wed, 18 Nov 2020 22:24:33 +0000 Subject: [PATCH 6/8] fix: make sure tsconfig has correct paths setup --- .../scripts/utils/verifyTypeScriptSetup.js | 37 +++++++++++++++++-- 1 file changed, 34 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js index 8692515b6a..d81a17faba 100644 --- a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js +++ b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js @@ -164,6 +164,7 @@ function verifyTypeScriptSetup() { getNewLine: () => os.EOL, }; + const errors = []; const messages = []; let appTsConfig; let parsedTsConfig; @@ -259,12 +260,42 @@ function verifyTypeScriptSetup() { ); } - if (parsedTsConfig.paths != null) { - if (semver.lt(ts.version, '4.1.0') && parsedTsConfig.baseUrl == null) { - messages.push( + if (parsedTsConfig.compilerOptions.paths != null) { + if ( + semver.lt(ts.version, '4.1.0') && + parsedTsConfig.compilerOptions.baseUrl == null + ) { + errors.push( `${chalk.cyan('paths')} requires ${chalk.cyan('baseUrl')} to be set` ); } + // Webpack 4 cannot support multiple locations + for (const path of Object.keys(parsedTsConfig.compilerOptions.paths)) { + const values = parsedTsConfig.compilerOptions.paths[path]; + + if (!Array.isArray(values) || values.length > 1) { + errors.push( + `Each path in ${chalk.cyan( + 'paths' + )} must have an array with only one location` + ); + break; + } + } + } + + if (errors.length > 0) { + console.error( + chalk.bold( + 'The following errors need fixing in your', + chalk.cyan('tsconfig.json') + ) + ); + errors.forEach(error => { + console.error(' - ' + error); + }); + console.error(); + process.exit(1); } if (messages.length > 0) { From 60749684c13d15309fe24eef65c9267ce649e2b3 Mon Sep 17 00:00:00 2001 From: Chris Shepherd Date: Wed, 18 Nov 2020 23:06:12 +0000 Subject: [PATCH 7/8] docs: add path mapping section --- docusaurus/docs/importing-a-component.md | 30 ++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/docusaurus/docs/importing-a-component.md b/docusaurus/docs/importing-a-component.md index 7f23cb9c7d..0331bf767e 100644 --- a/docusaurus/docs/importing-a-component.md +++ b/docusaurus/docs/importing-a-component.md @@ -73,4 +73,34 @@ Now that you've configured your project to support absolute imports, if you want import Button from 'components/Button'; ``` +### Path Mapping + +If you require more fine-grained import paths you can set up extra path mappings. This enables you to create shorter import paths to file locations that may normally require long paths. Below is an example `jsconfig.json` showing how you could do this: + +```json +{ + "compilerOptions": { + "baseUrl": "src", + "paths": { + "base/*": ["./components/base/*"], + "pages/*": ["./components/pages/*"], + "actions/*": ["./state/actions/*"] + } + }, + "include": ["src"] +} +``` + +> Even though `jsconfig.json` and `tsconfig.json` allow using multiple locations as "fallbacks", this feature is not currently available in `create-react-app`. + +Setting up your `jsconfig.json` or `tsconfig.json` as above enables you to do imports like this: + +```js +import Button from 'components/Button'; +import MainPage from 'pages/Main'; +import addUser from 'actions/addUser'; +``` + +The import for `Button` still works as the `baseUrl` is still set as `src`. However, we now have more paths available to reach modules that may be quite a few folders deep in our project. This may be useful for larger projects that have more elaborate filesystem layouts. + For more information on these configuration files, see the [jsconfig.json reference](https://code.visualstudio.com/docs/languages/jsconfig) and [tsconfig.json reference](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) documentation. From bfe1be15dfa218553f6879f44c29bae282997514 Mon Sep 17 00:00:00 2001 From: Chris Shepherd Date: Sat, 10 Sep 2022 13:30:15 +0100 Subject: [PATCH 8/8] fix: use appTsConfig to check baseUrl and paths instead --- .../react-scripts/scripts/utils/verifyTypeScriptSetup.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js index d81a17faba..a19cd03434 100644 --- a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js +++ b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js @@ -260,18 +260,18 @@ function verifyTypeScriptSetup() { ); } - if (parsedTsConfig.compilerOptions.paths != null) { + if (appTsConfig.compilerOptions.paths != null) { if ( semver.lt(ts.version, '4.1.0') && - parsedTsConfig.compilerOptions.baseUrl == null + appTsConfig.compilerOptions.baseUrl == null ) { errors.push( `${chalk.cyan('paths')} requires ${chalk.cyan('baseUrl')} to be set` ); } // Webpack 4 cannot support multiple locations - for (const path of Object.keys(parsedTsConfig.compilerOptions.paths)) { - const values = parsedTsConfig.compilerOptions.paths[path]; + for (const path of Object.keys(appTsConfig.compilerOptions.paths)) { + const values = appTsConfig.compilerOptions.paths[path]; if (!Array.isArray(values) || values.length > 1) { errors.push(