Skip to content

Commit

Permalink
Refactor to remove hardcoding of aliases
Browse files Browse the repository at this point in the history
Unify definition of  aliases in single place.

Make TypeScript configuration file (`tsconfig.json`) source of truth
regarding aliases.

Both webpack (through `vue.config.js`) and ESLint (through
`.eslintrc.js`) now reads the alias configuration from `tsconfig.json`.
  • Loading branch information
undergroundwires committed Feb 2, 2022
1 parent 5bbbb9c commit 481a02a
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 7 deletions.
11 changes: 8 additions & 3 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ const { rules: baseES6Rules } = require('eslint-config-airbnb-base/rules/es6');
const { rules: baseImportsRules } = require('eslint-config-airbnb-base/rules/imports');
const { rules: baseStyleRules } = require('eslint-config-airbnb-base/rules/style');
const { rules: baseVariablesRules } = require('eslint-config-airbnb-base/rules/variables');
const tsconfigJson = require('./tsconfig.json');

module.exports = {
root: true,
Expand Down Expand Up @@ -76,9 +77,8 @@ function getOwnRules() {
groups: [ // Enforce more strict order than AirBnb
'builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type'],
pathGroups: [ // Fix manually configured paths being incorrectly grouped as "external"
'@/**', // @/..
'@tests/**', // @tests/.. (not matching anything after @** because there can be third parties as well)
'js-yaml-loader!@/**', // E.g. js-yaml-loader!@/..
...getAliasesFromTsConfig(),
'js-yaml-loader!@/**',
].map((pattern) => ({ pattern, group: 'internal' })),
},
],
Expand Down Expand Up @@ -284,3 +284,8 @@ function getTypeScriptOverrides() {
// ],
};
}

function getAliasesFromTsConfig() {
return Object.keys(tsconfigJson.compilerOptions.paths)
.map((path) => `${path}*`);
}
4 changes: 2 additions & 2 deletions tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@
],
"@tests/*": [
"tests/*"
],
},
]
}
},
"include": [
"src/**/*.ts",
Expand Down
17 changes: 15 additions & 2 deletions vue.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
const { resolve } = require('path');
const { defineConfig } = require('@vue/cli-service');
const packageJson = require('./package.json');
const tsconfigJson = require('./tsconfig.json');

loadVueAppRuntimeVariables();

Expand All @@ -12,8 +13,8 @@ module.exports = defineConfig({
},
configureWebpack: {
resolve: {
alias: { // also requires path alias in tsconfig.json
'@tests': resolve(__dirname, 'tests/'),
alias: {
...getAliasesFromTsConfig(),
},
fallback: {
/* Tell webpack to ignore polyfilling them because Node core modules are never used
Expand Down Expand Up @@ -78,3 +79,15 @@ function ignorePolyfills(...moduleNames) {
return obj;
}, {});
}

function getAliasesFromTsConfig() {
const { paths } = tsconfigJson.compilerOptions;
return Object.keys(paths).reduce((aliases, pathName) => {
const pathFolder = paths[pathName][0];
const aliasFolder = pathFolder.substring(0, pathFolder.length - 1); // trim * from end
const aliasName = pathName.substring(0, pathName.length - 2); // trim /* from end
const aliasPath = resolve(__dirname, aliasFolder);
aliases[aliasName] = aliasPath;
return aliases;
}, {});
}

0 comments on commit 481a02a

Please sign in to comment.