Support path alias for webpack and babel (opensearch-project#9205)

* feat: added path alias support for webpack and babel

Signed-off-by: Yulong Ruan <[email protected]>

* update yarn.lock

Signed-off-by: Yulong Ruan <[email protected]>

---------

Signed-off-by: Yulong Ruan <[email protected]>

Author: ruanyl

packages/osd-babel-preset/node_preset.js

@@ -28,6 +28,8 @@
  * under the License.
  */
 
+const path = require('path');
+
 module.exports = (_, options = {}) => {
   return {
     presets: [
@@ -60,5 +62,18 @@ module.exports = (_, options = {}) => {
       ],
       require('./common_preset'),
     ],
+    plugins: [
+      [
+        require.resolve('babel-plugin-module-resolver'),
+        {
+          root: [path.resolve(__dirname, '../..')],
+          cwd: path.resolve(__dirname, '../..'),
+          alias: {
+            'opensearch-dashboards/server': './src/core/server',
+            'opensearch-dashboards/public': './src/core/public',
+          },
+        },
+      ],
+    ],
   };
 };

packages/osd-babel-preset/package.json

@@ -15,6 +15,7 @@
     "@babel/preset-react": "^7.22.9",
     "@babel/preset-typescript": "^7.22.9",
     "babel-plugin-add-module-exports": "^1.0.4",
+    "babel-plugin-module-resolver": "^5.0.1",
     "babel-plugin-styled-components": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "browserslist": "^4.21.10",

packages/osd-optimizer/src/worker/bundle_refs_plugin.ts

@@ -20,7 +20,6 @@
  */
 
 import Path from 'path';
-import Fs from 'fs';
 
 import webpack from 'webpack';
 
@@ -29,20 +28,6 @@ import { BundleRefModule } from './bundle_ref_module';
 
 const RESOLVE_EXTENSIONS = ['.js', '.ts', '.tsx'];
 
-function safeStat(path: string): Promise<Fs.Stats | undefined> {
-  return new Promise((resolve, reject) => {
-    Fs.stat(path, (error, stat) => {
-      if (error?.code === 'ENOENT') {
-        resolve(undefined);
-      } else if (error) {
-        reject(error);
-      } else {
-        resolve(stat);
-      }
-    });
-  });
-}
-
 interface RequestData {
   context: string;
   dependencies: Array<{ request: string }>;
@@ -80,7 +65,7 @@ export class BundleRefsPlugin {
           const context = data.context;
           const dep = data.dependencies[0];
 
-          this.maybeReplaceImport(context, dep.request).then(
+          this.maybeReplaceImport(context, dep.request, compiler).then(
             (module) => {
               if (!module) {
                 wrappedFactory(data, callback);
@@ -134,64 +119,17 @@ export class BundleRefsPlugin {
     });
   }
 
-  private cachedResolveRefEntry(ref: BundleRef) {
-    const cached = this.resolvedRefEntryCache.get(ref);
-
-    if (cached) {
-      return cached;
-    }
-
-    const absoluteRequest = Path.resolve(ref.contextDir, ref.entry);
-    const promise = this.cachedResolveRequest(absoluteRequest).then((resolved) => {
-      if (!resolved) {
-        throw new Error(`Unable to resolve request [${ref.entry}] relative to [${ref.contextDir}]`);
-      }
-
-      return resolved;
-    });
-    this.resolvedRefEntryCache.set(ref, promise);
-    return promise;
-  }
-
-  private cachedResolveRequest(absoluteRequest: string) {
-    const cached = this.resolvedRequestCache.get(absoluteRequest);
-
-    if (cached) {
-      return cached;
-    }
-
-    const promise = this.resolveRequest(absoluteRequest);
-    this.resolvedRequestCache.set(absoluteRequest, promise);
-    return promise;
-  }
-
-  private async resolveRequest(absoluteRequest: string) {
-    const stats = await safeStat(absoluteRequest);
-    if (stats && stats.isFile()) {
-      return absoluteRequest;
-    }
-
-    // look for an index file in directories
-    if (stats?.isDirectory()) {
-      for (const ext of RESOLVE_EXTENSIONS) {
-        const indexPath = Path.resolve(absoluteRequest, `index${ext}`);
-        const indexStats = await safeStat(indexPath);
-        if (indexStats?.isFile()) {
-          return indexPath;
+  private async resolve(request: string, startPath: string, compiler: webpack.Compiler) {
+    const resolver = compiler.resolverFactory.get('normal');
+    return new Promise<string | undefined>((resolve, reject) => {
+      resolver.resolve({}, startPath, request, {}, (err: unknown | null, resolvedPath: string) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(resolvedPath);
         }
-      }
-    }
-
-    // look for a file with one of the supported extensions
-    for (const ext of RESOLVE_EXTENSIONS) {
-      const filePath = `${absoluteRequest}${ext}`;
-      const fileStats = await safeStat(filePath);
-      if (fileStats?.isFile()) {
-        return filePath;
-      }
-    }
-
-    return;
+      });
+    });
   }
 
   /**
@@ -200,9 +138,12 @@ export class BundleRefsPlugin {
    * then an error is thrown. If the request does not resolve to a bundleRef then
    * undefined is returned. Otherwise it returns the referenced bundleRef.
    */
-  private async maybeReplaceImport(context: string, request: string) {
-    // ignore imports that have loaders defined or are not relative seeming
-    if (request.includes('!') || !request.startsWith('.')) {
+  private async maybeReplaceImport(context: string, request: string, compiler: webpack.Compiler) {
+    const alias = Object.keys(compiler.options.resolve?.alias ?? {});
+    const isAliasRequest = alias.some((a) => request.startsWith(a));
+
+    // For non-alias import path, ignore imports that have loaders defined or are not relative seeming
+    if (!isAliasRequest && (request.includes('!') || !request.startsWith('.'))) {
       return;
     }
 
@@ -211,13 +152,12 @@ export class BundleRefsPlugin {
       return;
     }
 
-    const absoluteRequest = Path.resolve(context, request);
-    if (absoluteRequest.startsWith(this.ignorePrefix)) {
+    const resolved = await this.resolve(request, context, compiler);
+    if (!resolved) {
       return;
     }
 
-    const resolved = await this.cachedResolveRequest(absoluteRequest);
-    if (!resolved) {
+    if (resolved.startsWith(this.ignorePrefix)) {
       return;
     }
 
@@ -228,7 +168,7 @@ export class BundleRefsPlugin {
     }
 
     for (const ref of possibleRefs) {
-      const resolvedEntry = await this.cachedResolveRefEntry(ref);
+      const resolvedEntry = await this.resolve(`./${ref.entry}`, ref.contextDir, compiler);
       if (resolved !== resolvedEntry) {
         continue;
       }

packages/osd-optimizer/src/worker/webpack.config.ts

@@ -274,6 +274,7 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
       mainFields: ['browser', 'main'],
       alias: {
         core_app_image_assets: Path.resolve(worker.repoRoot, 'src/core/public/core_app/images'),
+        'opensearch-dashboards/public': Path.resolve(worker.repoRoot, 'src/core/public'),
       },
     },
 

src/plugins/workspace/public/plugin.test.ts

@@ -4,9 +4,8 @@
  */
 
 import { BehaviorSubject } from 'rxjs';
-import { waitFor } from '@testing-library/dom';
 import { first } from 'rxjs/operators';
-import { coreMock } from '../../../core/public/mocks';
+import { coreMock } from 'opensearch-dashboards/public/mocks';
 import {
   ChromeBreadcrumb,
   NavGroupStatus,
@@ -15,7 +14,7 @@ import {
   WorkspaceAvailability,
   AppStatus,
   WorkspaceError,
-} from '../../../core/public';
+} from 'opensearch-dashboards/public';
 import { WORKSPACE_FATAL_ERROR_APP_ID, WORKSPACE_DETAIL_APP_ID } from '../common/constants';
 import { savedObjectsManagementPluginMock } from '../../saved_objects_management/public/mocks';
 import { managementPluginMock } from '../../management/public/mocks';

src/plugins/workspace/public/plugin.ts

@@ -22,7 +22,8 @@ import {
   DEFAULT_NAV_GROUPS,
   NavGroupType,
   ALL_USE_CASE_ID,
-} from '../../../core/public';
+} from 'opensearch-dashboards/public';
+import { getWorkspaceIdFromUrl } from 'opensearch-dashboards/public/utils';
 import {
   WORKSPACE_FATAL_ERROR_APP_ID,
   WORKSPACE_DETAIL_APP_ID,
@@ -32,7 +33,6 @@ import {
   WORKSPACE_NAVIGATION_APP_ID,
   WORKSPACE_COLLABORATORS_APP_ID,
 } from '../common/constants';
-import { getWorkspaceIdFromUrl } from '../../../core/public/utils';
 import { Services, WorkspaceUseCase, WorkspacePluginSetup } from './types';
 import { WorkspaceClient } from './workspace_client';
 import { SavedObjectsManagementPluginSetup } from '../../../plugins/saved_objects_management/public';

src/plugins/workspace/server/plugin.test.ts

@@ -4,15 +4,19 @@
  */
 
 import { OnPostAuthHandler, OnPreRoutingHandler } from 'src/core/server';
-import { coreMock, httpServerMock, uiSettingsServiceMock } from '../../../core/server/mocks';
+import {
+  coreMock,
+  httpServerMock,
+  uiSettingsServiceMock,
+} from 'opensearch-dashboards/server/mocks';
 import { WorkspacePlugin, WorkspacePluginDependencies } from './plugin';
 import {
   getACLAuditor,
   getClientCallAuditor,
   getWorkspaceState,
   updateWorkspaceState,
-} from '../../../core/server/utils';
-import * as serverUtils from '../../../core/server/utils/auth_info';
+} from 'opensearch-dashboards/server/utils';
+import * as serverUtils from 'opensearch-dashboards/server/utils/auth_info';
 import { SavedObjectsPermissionControl } from './permission_control/client';
 import { DataSourcePluginSetup } from '../../data_source/server';
 import { DataSourceError } from '../../data_source/common/data_sources';

src/plugins/workspace/server/plugin.ts

@@ -13,7 +13,18 @@ import {
   Logger,
   CoreStart,
   SharedGlobalConfig,
-} from '../../../core/server';
+} from 'opensearch-dashboards/server';
+import {
+  cleanWorkspaceId,
+  cleanUpACLAuditor,
+  cleanUpClientCallAuditor,
+  getACLAuditor,
+  getWorkspaceIdFromUrl,
+  getWorkspaceState,
+  initializeACLAuditor,
+  initializeClientCallAuditor,
+  updateWorkspaceState,
+} from 'opensearch-dashboards/server/utils';
 import {
   WORKSPACE_SAVED_OBJECTS_CLIENT_WRAPPER_ID,
   WORKSPACE_CONFLICT_CONTROL_SAVED_OBJECTS_CLIENT_WRAPPER_ID,
@@ -33,17 +44,6 @@ import { IWorkspaceClientImpl, WorkspacePluginSetup, WorkspacePluginStart } from
 import { WorkspaceClient } from './workspace_client';
 import { registerRoutes } from './routes';
 import { WorkspaceSavedObjectsClientWrapper } from './saved_objects';
-import {
-  cleanWorkspaceId,
-  cleanUpACLAuditor,
-  cleanUpClientCallAuditor,
-  getACLAuditor,
-  getWorkspaceIdFromUrl,
-  getWorkspaceState,
-  initializeACLAuditor,
-  initializeClientCallAuditor,
-  updateWorkspaceState,
-} from '../../../core/server/utils';
 import { WorkspaceConflictSavedObjectsClientWrapper } from './saved_objects/saved_objects_wrapper_for_check_workspace_conflict';
 import {
   SavedObjectsPermissionControl,

tsconfig.base.json

@@ -5,11 +5,11 @@
       // Allows for importing from `opensearch-dashboards` package for the exported types.
       "opensearch-dashboards": ["./opensearch_dashboards"],
       "opensearch-dashboards/public": ["src/core/public"],
+      "opensearch-dashboards/public/*": ["src/core/public/*"],
       "opensearch-dashboards/server": ["src/core/server"],
+      "opensearch-dashboards/server/*": ["src/core/server/*"],
       "plugins/*": ["src/legacy/core_plugins/*/public/"],
-      "test_utils/*": [
-        "src/test_utils/public/*"
-      ],
+      "test_utils/*": ["src/test_utils/public/*"],
       "fixtures/*": ["src/fixtures/*"],
       "@opensearch-project/opensearch": ["node_modules/@opensearch-project/opensearch/api/new"],
       "@opensearch-project/opensearch/lib/*": ["node_modules/@opensearch-project/opensearch/lib/*"],