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

Author: arturovt

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

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"
+  }
+}

packages/common/src/index.ts

@@ -0,0 +1 @@
+export * from './load-module';

packages/custom-esbuild/src/utils.ts renamed to 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)) {

packages/common/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "files": [
+    "src/index.ts"
+  ]
+}

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"
   }
 }

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;

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
           )

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();

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"
   }
 }