wallet-ext: path aliases

FanSems1 · May 17, 2022 · 505518c · 505518c
1 parent 9c160b2
commit 505518c
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 73 deletions.
diff --git a/wallet/.eslintrc.js b/wallet/.eslintrc.js
@@ -23,12 +23,21 @@ module.exports = {
                     'type',
                 ],
                 pathGroups: [
+                    {
+                        pattern: '_*',
+                        group: 'internal',
+                    },
+                    {
+                        pattern: '_*/**',
+                        group: 'internal',
+                    },
                     {
                         pattern: '{.,..}/**/*.?(s)css',
                         group: 'type',
                         position: 'after',
                     },
                 ],
+                pathGroupsExcludedImportTypes: ['builtin', 'object', 'type'],
                 'newlines-between': 'always',
                 alphabetize: { order: 'asc' },
                 warnOnUnassignedImports: true,

diff --git a/wallet/configs/ts/tsconfig.common.json b/wallet/configs/ts/tsconfig.common.json
@@ -13,7 +13,20 @@
         "resolveJsonModule": true,
         "noEmit": false,
         "isolatedModules": true,
-        "outDir": "../../dist"
+        "outDir": "../../dist",
+        "baseUrl": "../../",
+        "paths": {
+            // for internal aliases start them with _ for eslint to use the correct import group
+            "_src/*": ["./src/*"],
+            "_shared/*": ["./src/shared/*"],
+            "_app/*": ["./src/ui/app/*"],
+            "_assets/*": ["./src/ui/assets/*"],
+            "_images/*": ["./src/ui/assets/images/*"],
+            "_redux/*": ["./src/ui/app/redux/*"],
+            "_store": ["./src/ui/app/redux/store/"],
+            "_hooks": ["./src/ui/app/hooks/"],
+            "_components/*": ["./src/ui/app/components/*"]
+        }
     },
     "include": ["../../src"],
     "exclude": ["../../build", "../../node_modules"]

diff --git a/wallet/configs/webpack/webpack.config.common.ts b/wallet/configs/webpack/webpack.config.common.ts
@@ -1,6 +1,7 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { exec } from 'child_process';
 import CopyPlugin from 'copy-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
@@ -15,83 +16,136 @@ const PROJECT_ROOT = resolve(__dirname, '..', '..');
 const CONFIGS_ROOT = resolve(PROJECT_ROOT, 'configs');
 const SRC_ROOT = resolve(PROJECT_ROOT, 'src');
 const OUTPUT_ROOT = resolve(PROJECT_ROOT, 'dist');
+const TS_CONFIGS_ROOT = resolve(CONFIGS_ROOT, 'ts');
+const TS_CONFIG_FILE = resolve(
+    TS_CONFIGS_ROOT,
+    `tsconfig.${process.env.NODE_ENV === 'development' ? 'dev' : 'prod'}.json`
+);
 
-const tsConfigFilename = `tsconfig.${
-    process.env.NODE_ENV === 'development' ? 'dev' : 'prod'
-}.json`;
+function loadTsConfig(tsConfigFilePath: string) {
+    return new Promise<string>((res, rej) => {
+        exec(
+            `${resolve(
+                PROJECT_ROOT,
+                'node_modules',
+                '.bin',
+                'tsc'
+            )} -p ${tsConfigFilePath} --showConfig`,
+            (error, stdout, stderr) => {
+                if (error || stderr) {
+                    rej(error || stderr);
+                }
+                res(stdout);
+            }
+        );
+    }).then(
+        (tsContent) => JSON.parse(tsContent),
+        (e) => {
+            // eslint-disable-next-line no-console
+            console.error(e);
+            throw e;
+        }
+    );
+}
 
-const commonConfig: Configuration = {
-    context: SRC_ROOT,
-    entry: {
-        background: './background',
-        ui: './ui',
-    },
-    output: {
-        path: OUTPUT_ROOT,
-        clean: true,
-    },
-    stats: {
-        preset: 'summary',
-        timings: true,
-        errors: true,
-    },
-    resolve: {
-        extensions: ['.ts', '.tsx'],
-    },
-    module: {
-        rules: [
-            {
-                test: /\.(t|j)sx?$/,
-                loader: 'ts-loader',
-                options: {
-                    configFile: resolve(CONFIGS_ROOT, 'ts', tsConfigFilename),
+async function generateAliasFromTs() {
+    const tsConfigJSON = await loadTsConfig(TS_CONFIG_FILE);
+    const {
+        compilerOptions: { paths, baseUrl = './' },
+    } = tsConfigJSON;
+    const alias: Record<string, string> = {};
+    if (paths) {
+        Object.keys(paths).forEach((anAlias) => {
+            const aliasPath = paths[anAlias][0];
+            const adjAlias = anAlias.replace(/\/\*$/gi, '');
+            const adjPath = (
+                aliasPath.startsWith('./') || aliasPath.startsWith('../')
+                    ? resolve(TS_CONFIGS_ROOT, baseUrl, aliasPath)
+                    : aliasPath
+            ).replace(/\/\*$/, '');
+            alias[adjAlias] = adjPath;
+        });
+    }
+    return alias;
+}
+
+const commonConfig: () => Promise<Configuration> = async () => {
+    const alias = await generateAliasFromTs();
+    return {
+        context: SRC_ROOT,
+        entry: {
+            background: './background',
+            ui: './ui',
+        },
+        output: {
+            path: OUTPUT_ROOT,
+            clean: true,
+        },
+        stats: {
+            preset: 'summary',
+            timings: true,
+            errors: true,
+            warnings: true,
+        },
+        resolve: {
+            extensions: ['.ts', '.tsx', '.js'],
+            alias,
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.(t|j)sx?$/,
+                    loader: 'ts-loader',
+                    options: {
+                        configFile: TS_CONFIG_FILE,
+                    },
                 },
-            },
-            {
-                test: /\.(s)?css$/i,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    'css-loader',
-                    'postcss-loader',
-                    'sass-loader',
-                ],
-            },
-            {
-                test: /\.(png|jpg|jpeg|gif)$/,
-                type: 'asset/resource',
-            },
-        ],
-    },
-    plugins: [
-        new MiniCssExtractPlugin(),
-        new HtmlWebpackPlugin({
-            chunks: ['ui'],
-            filename: 'ui.html',
-            template: resolve(SRC_ROOT, 'ui', 'index.template.html'),
-            title: APP_NAME,
-        }),
-        new CopyPlugin({
-            patterns: [
                 {
-                    from: resolve(SRC_ROOT, 'manifest', 'icons', '**', '*'),
+                    test: /\.(s)?css$/i,
+                    use: [
+                        MiniCssExtractPlugin.loader,
+                        'css-loader',
+                        'postcss-loader',
+                        'sass-loader',
+                    ],
                 },
                 {
-                    from: resolve(SRC_ROOT, 'manifest', 'manifest.json'),
-                    to: resolve(OUTPUT_ROOT, '[name][ext]'),
-                    transform: (content) => {
-                        const { description, version } = packageJson;
-                        const manifestJson = {
-                            ...JSON.parse(content.toString()),
-                            name: APP_NAME,
-                            description,
-                            version,
-                        };
-                        return JSON.stringify(manifestJson, null, 4);
-                    },
+                    test: /\.(png|jpg|jpeg|gif)$/,
+                    type: 'asset/resource',
                 },
             ],
-        }),
-    ],
+        },
+        plugins: [
+            new MiniCssExtractPlugin(),
+            new HtmlWebpackPlugin({
+                chunks: ['ui'],
+                filename: 'ui.html',
+                template: resolve(SRC_ROOT, 'ui', 'index.template.html'),
+                title: APP_NAME,
+            }),
+            new CopyPlugin({
+                patterns: [
+                    {
+                        from: resolve(SRC_ROOT, 'manifest', 'icons', '**', '*'),
+                    },
+                    {
+                        from: resolve(SRC_ROOT, 'manifest', 'manifest.json'),
+                        to: resolve(OUTPUT_ROOT, '[name][ext]'),
+                        transform: (content) => {
+                            const { description, version } = packageJson;
+                            const manifestJson = {
+                                ...JSON.parse(content.toString()),
+                                name: APP_NAME,
+                                description,
+                                version,
+                            };
+                            return JSON.stringify(manifestJson, null, 4);
+                        },
+                    },
+                ],
+            }),
+        ],
+    };
 };
 
 export default commonConfig;
diff --git a/wallet/configs/webpack/webpack.config.dev.ts b/wallet/configs/webpack/webpack.config.dev.ts
@@ -18,4 +18,8 @@ const configDev: Configuration = {
     },
 };
 
-export default merge(configCommon, configDev);
+async function getConfig() {
+    return merge(await configCommon(), configDev);
+}
+
+export default getConfig;
diff --git a/wallet/configs/webpack/webpack.config.prod.ts b/wallet/configs/webpack/webpack.config.prod.ts
@@ -11,4 +11,8 @@ const configProd: Configuration = {
     mode: 'production',
 };
 
-export default merge(configCommon, configProd);
+async function getConfig() {
+    return merge(await configCommon(), configProd);
+}
+
+export default getConfig;
diff --git a/wallet/webpack.config.ts b/wallet/webpack.config.ts
@@ -6,7 +6,7 @@ import configProd from './configs/webpack/webpack.config.prod';
 
 import type { Configuration } from 'webpack';
 
-const configMap: Record<string, Configuration> = {
+const configMap: Record<string, () => Promise<Configuration>> = {
     development: configDev,
     production: configProd,
 };