refactor(common): move loadModule in shared package (#1654)

just-jeb · Feb 4, 2024 · 8f6ce9e · 8f6ce9e
1 parent 6399221
commit 8f6ce9e
Show file tree

Hide file tree

Showing 19 changed files with 160 additions and 362 deletions.
diff --git a/packages/common/.gitignore b/packages/common/.gitignore
@@ -0,0 +1,17 @@
+*.log
+.idea
+.DS_Store
+node_modules
+
+.js
+typings
+
+## this is generated by `npm pack`
+*.tgz
+package
+
+dist
+**/schema.json
+*.js
+!karma.conf.js
+*.js.map
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@angular-builders/common",
+  "version": "1.0.0",
+  "description": "Common utility functions shared between @angular-builders packages",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "JeB Barabanov",
+  "license": "MIT",
+  "engines": {
+    "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
+  },
+  "scripts": {
+    "prebuild": "yarn clean",
+    "build": "yarn prebuild && tsc",
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@angular-devkit/core": "^17.1.0",
+    "ts-node": "^10.0.0",
+    "tsconfig-paths": "^4.1.0"
+  },
+  "devDependencies": {
+    "rimraf": "^5.0.0",
+    "typescript": "5.3.3"
+  }
+}
diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts
@@ -0,0 +1 @@
+export * from './load-module';
diff --git a/packages/custom-esbuild/src/utils.ts → packages/common/src/load-module.ts b/packages/custom-esbuild/src/utils.ts → packages/common/src/load-module.ts
@@ -1,6 +1,6 @@
-import { Path, getSystemPath, logging } from '@angular-devkit/core';
 import * as path from 'node:path';
 import * as url from 'node:url';
+import type { logging } from '@angular-devkit/core';
 
 const _tsNodeRegister = (() => {
   let lastTsConfig: string | undefined;
@@ -73,12 +73,10 @@ function loadEsmModule<T>(modulePath: string | URL): Promise<T> {
  * Loads CJS and ESM modules based on extension
  */
 export async function loadModule<T>(
-  workspaceRoot: Path,
-  relativePath: string,
+  modulePath: string,
   tsConfig: string,
   logger: logging.LoggerApi
 ): Promise<T> {
-  const modulePath = path.join(getSystemPath(workspaceRoot), relativePath);
   tsNodeRegister(modulePath, tsConfig, logger);
 
   switch (path.extname(modulePath)) {

diff --git a/packages/common/tsconfig.json b/packages/common/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "files": [
+    "src/index.ts"
+  ]
+}
diff --git a/packages/custom-esbuild/package.json b/packages/custom-esbuild/package.json
@@ -39,11 +39,10 @@
   },
   "builders": "builders.json",
   "dependencies": {
+    "@angular-builders/common": "workspace:*",
     "@angular-devkit/architect": ">=0.1701.0 < 0.1800.0",
     "@angular-devkit/build-angular": "^17.1.0",
-    "@angular-devkit/core": "^17.1.0",
-    "ts-node": "^10.0.0",
-    "tsconfig-paths": "^4.1.0"
+    "@angular-devkit/core": "^17.1.0"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^17.1.0"
@@ -52,6 +51,7 @@
     "esbuild": "0.20.0",
     "jest": "29.7.0",
     "rimraf": "^5.0.0",
+    "ts-node": "^10.0.0",
     "typescript": "5.3.3"
   }
 }
diff --git a/packages/custom-esbuild/src/application/index.ts b/packages/custom-esbuild/src/application/index.ts
@@ -4,23 +4,27 @@ import { buildApplication } from '@angular-devkit/build-angular';
 import { getSystemPath, json, normalize } from '@angular-devkit/core';
 import { ApplicationBuilderExtensions } from '@angular-devkit/build-angular/src/builders/application/options';
 import { defer, switchMap } from 'rxjs';
+import { loadModule } from '@angular-builders/common';
 
-import { loadModule } from '../utils';
 import { loadPlugins } from '../load-plugins';
 import { CustomEsbuildApplicationSchema } from '../custom-esbuild-schema';
 
 export function buildCustomEsbuildApplication(
   options: CustomEsbuildApplicationSchema,
   context: BuilderContext
 ) {
-  const workspaceRoot = normalize(context.workspaceRoot);
-  const tsConfig = path.join(getSystemPath(workspaceRoot), options.tsConfig);
+  const workspaceRoot = getSystemPath(normalize(context.workspaceRoot));
+  const tsConfig = path.join(workspaceRoot, options.tsConfig);
 
   return defer(async () => {
     const codePlugins = await loadPlugins(options.plugins, workspaceRoot, tsConfig, context.logger);
 
     const indexHtmlTransformer = options.indexHtmlTransformer
-      ? await loadModule(workspaceRoot, options.indexHtmlTransformer, tsConfig, context.logger)
+      ? await loadModule(
+          path.join(workspaceRoot, options.indexHtmlTransformer),
+          tsConfig,
+          context.logger
+        )
       : undefined;
 
     return { codePlugins, indexHtmlTransformer } as ApplicationBuilderExtensions;

diff --git a/packages/custom-esbuild/src/dev-server/index.ts b/packages/custom-esbuild/src/dev-server/index.ts
@@ -9,8 +9,8 @@ import { IndexHtmlTransform } from '@angular-devkit/build-angular/src/utils/inde
 import { getSystemPath, json, normalize } from '@angular-devkit/core';
 import { Observable, from, switchMap } from 'rxjs';
 import type { Connect } from 'vite';
+import { loadModule } from '@angular-builders/common';
 
-import { loadModule } from '../utils';
 import { loadPlugins } from '../load-plugins';
 import { patchBuilderContext } from './patch-builder-context';
 import {
@@ -33,16 +33,20 @@ export function executeCustomDevServerBuilder(
     )) as unknown as CustomEsbuildApplicationSchema;
   }
 
-  const workspaceRoot = normalize(context.workspaceRoot);
+  const workspaceRoot = getSystemPath(normalize(context.workspaceRoot));
 
   return from(getBuildTargetOptions()).pipe(
     switchMap(async buildOptions => {
-      const tsConfig = path.join(getSystemPath(workspaceRoot), buildOptions.tsConfig);
+      const tsConfig = path.join(workspaceRoot, buildOptions.tsConfig);
 
       const middleware = await Promise.all(
-        (options.middlewares || []).map(path =>
+        (options.middlewares || []).map(middlewarePath =>
           // https://github.com/angular/angular-cli/pull/26212/files#diff-a99020cbdb97d20b2bc686bcb64b31942107d56db06fd880171b0a86f7859e6eR52
-          loadModule<Connect.NextHandleFunction>(workspaceRoot, path, tsConfig, context.logger)
+          loadModule<Connect.NextHandleFunction>(
+            path.join(workspaceRoot, middlewarePath),
+            tsConfig,
+            context.logger
+          )
         )
       );
 
@@ -55,8 +59,7 @@ export function executeCustomDevServerBuilder(
 
       const indexHtmlTransformer: IndexHtmlTransform = buildOptions.indexHtmlTransformer
         ? await loadModule(
-            workspaceRoot,
-            buildOptions.indexHtmlTransformer,
+            path.join(workspaceRoot, buildOptions.indexHtmlTransformer),
             tsConfig,
             context.logger
           )

diff --git a/packages/custom-esbuild/src/load-plugins.ts b/packages/custom-esbuild/src/load-plugins.ts
@@ -1,16 +1,18 @@
+import * as path from 'node:path';
 import type { Plugin } from 'esbuild';
-import type { Path, logging } from '@angular-devkit/core';
-
-import { loadModule } from './utils';
+import type { logging } from '@angular-devkit/core';
+import { loadModule } from '@angular-builders/common';
 
 export async function loadPlugins(
   paths: string[] | undefined,
-  workspaceRoot: Path,
+  workspaceRoot: string,
   tsConfig: string,
   logger: logging.LoggerApi
 ): Promise<Plugin[]> {
   const plugins = await Promise.all(
-    (paths || []).map(path => loadModule<Plugin | Plugin[]>(workspaceRoot, path, tsConfig, logger))
+    (paths || []).map(pluginPath =>
+      loadModule<Plugin | Plugin[]>(path.join(workspaceRoot, pluginPath), tsConfig, logger)
+    )
   );
 
   return plugins.flat();

diff --git a/packages/custom-webpack/package.json b/packages/custom-webpack/package.json
@@ -40,12 +40,11 @@
   },
   "builders": "builders.json",
   "dependencies": {
+    "@angular-builders/common": "workspace:*",
     "@angular-devkit/architect": ">=0.1700.0 < 0.1800.0",
     "@angular-devkit/build-angular": "^17.0.0",
     "@angular-devkit/core": "^17.0.0",
     "lodash": "^4.17.15",
-    "ts-node": "^10.0.0",
-    "tsconfig-paths": "^4.1.0",
     "webpack-merge": "^5.7.3"
   },
   "peerDependencies": {
@@ -54,6 +53,7 @@
   "devDependencies": {
     "jest": "29.7.0",
     "rimraf": "^5.0.0",
+    "ts-node": "^10.0.0",
     "typescript": "5.3.3"
   }
 }
diff --git a/packages/custom-webpack/src/custom-webpack-builder.spec.ts b/packages/custom-webpack/src/custom-webpack-builder.spec.ts
@@ -11,10 +11,6 @@ const baseWebpackConfig = {
   entry: './main.ts',
 };
 
-const buildOptions = {
-  env: 'prod',
-};
-
 const targetOptions: TargetOptions = {
   project: 'application',
   configuration: 'production',
@@ -56,6 +52,8 @@ const customWebpackFunctionObj = {
   },
 };
 
+const tsConfig = './tsconfig.app.json';
+
 function createConfigFile<T>(fileName: string, content: T) {
   jest.mock(`${__dirname}/${fileName}`, () => content, { virtual: true });
 }
@@ -70,7 +68,7 @@ describe('CustomWebpackBuilder', () => {
       __dirname as Path,
       null,
       baseWebpackConfig,
-      {},
+      { tsConfig },
       targetOptions,
       {} as any
     );
@@ -85,7 +83,7 @@ describe('CustomWebpackBuilder', () => {
       __dirname as Path,
       {},
       baseWebpackConfig,
-      {},
+      { tsConfig },
       targetOptions,
       {} as any
     );
@@ -111,7 +109,7 @@ describe('CustomWebpackBuilder', () => {
       __dirname as Path,
       { path: fileName },
       baseWebpackConfig,
-      {},
+      { tsConfig },
       targetOptions,
       {} as any
     );
@@ -137,7 +135,7 @@ describe('CustomWebpackBuilder', () => {
       __dirname as Path,
       { mergeRules },
       baseWebpackConfig,
-      {},
+      { tsConfig },
       targetOptions,
       {} as any
     );
@@ -162,7 +160,7 @@ describe('CustomWebpackBuilder', () => {
       __dirname as Path,
       { replaceDuplicatePlugins: true },
       baseWebpackConfig,
-      {},
+      { tsConfig },
       targetOptions,
       {} as any
     );
@@ -175,6 +173,7 @@ describe('CustomWebpackBuilder', () => {
   });
 
   it('should pass build options to the webpack config function', async () => {
+    const buildOptions = { tsConfig, env: 'prod' };
     const spy = jest.fn((config, options, targetOptions) => config);
     createConfigFile(defaultWebpackConfigPath, spy);
     await CustomWebpackBuilder.buildWebpackConfig(
@@ -195,7 +194,7 @@ describe('CustomWebpackBuilder', () => {
       __dirname as Path,
       {},
       baseWebpackConfig,
-      {},
+      { tsConfig },
       targetOptions,
       {} as any
     );
@@ -220,7 +219,7 @@ describe('CustomWebpackBuilder', () => {
       __dirname as Path,
       {},
       baseWebpackConfig,
-      {},
+      { tsConfig },
       targetOptions,
       {} as any
     );
@@ -250,7 +249,7 @@ describe('CustomWebpackBuilder', () => {
       __dirname as Path,
       {},
       baseWebpackConfig,
-      {},
+      { tsConfig },
       targetOptions,
       {} as any
     );
@@ -288,7 +287,7 @@ describe('CustomWebpackBuilder', () => {
           },
         },
         baseWebpackConfig,
-        {},
+        { tsConfig },
         targetOptions,
         logger
       );
@@ -313,7 +312,7 @@ describe('CustomWebpackBuilder', () => {
           },
         },
         baseWebpackConfig,
-        {},
+        { tsConfig },
         targetOptions,
         logger
       );
@@ -346,7 +345,7 @@ describe('CustomWebpackBuilder', () => {
           },
         },
         baseWebpackConfig,
-        {},
+        { tsConfig },
         targetOptions,
         logger
       );