feat(ngx-env/builder): compat with v18 (#98)

* chore: update packages and schemas * fix webpack typing * chore: playwright as a dep * chore: update versions * chore: install playwright with deps
chihab · May 29, 2024 · ff9bf09 · ff9bf09
1 parent cc9672b
commit ff9bf09
Show file tree

Hide file tree

Showing 34 changed files with 15,115 additions and 12,892 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -29,7 +29,7 @@ jobs:
       - name: Build and Test Examples
         run: |
           cd examples
-          npx playwright install --with-deps
+          pnpm playwright install --with-deps
           cd apps/ng-app-cli
           # npx ng add ../../../packages/angular --skip-confirmation
           npx tsc --noEmit --project tsconfig.app.json

diff --git a/examples/apps/ng-app-cli/package.json b/examples/apps/ng-app-cli/package.json
@@ -18,43 +18,42 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.2.0",
-    "@angular/common": "^17.2.0",
-    "@angular/localize": "^17.2.0",
-    "@angular/compiler": "^17.2.0",
-    "@angular/core": "^17.2.0",
-    "@angular/forms": "^17.2.0",
-    "@angular/platform-browser": "^17.2.0",
-    "@angular/platform-browser-dynamic": "^17.2.0",
-    "@angular/platform-server": "^17.2.0",
-    "@angular/router": "^17.2.0",
-    "@angular/ssr": "^17.2.0",
+    "@angular/animations": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/localize": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/platform-server": "^18.0.0",
+    "@angular/router": "^18.0.0",
+    "@angular/ssr": "^18.0.0",
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.2.0",
-    "@angular/cli": "^17.2.0",
-    "@angular/compiler-cli": "^17.2.0",
+    "@angular-devkit/build-angular": "^18.0.0",
+    "@angular/cli": "^18.0.0",
+    "@angular/compiler-cli": "^18.0.0",
     "@dotenv-run/core": "*",
     "@dotenv-run/jest-angular": "*",
     "@jest/transform": "^29.7.0",
-    "@ngx-env/builder": "*",
+    "@ngx-env/builder": "../../../packages/angular",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",
-    "esbuild": "0.20.0",
+    "esbuild": "0.21.3",
     "jasmine-core": "~5.1.0",
     "jest": "^29.7.0",
-    "jest-preset-angular": "14.0.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "ts-jest": "^29.1.2",
-    "typescript": "~5.2.2"
+    "typescript": "^5.4.0"
   }
 }
diff --git a/examples/apps/ng-app-cli/src/index.html b/examples/apps/ng-app-cli/src/index.html
@@ -9,6 +9,6 @@
   </head>
   <body>
     <h1>%NODE_ENV%</h1>
-    <app-root />
+    <app-root></app-root>
   </body>
 </html>
diff --git a/examples/apps/ng-app-webpack/package.json b/examples/apps/ng-app-webpack/package.json
@@ -11,25 +11,23 @@
     "static": "npx serve dist/ng-app-webpack/browser"
   },
   "dependencies": {
-    "@angular/animations": "^16.0.0",
-    "@angular/common": "^16.0.0",
-    "@angular/compiler": "^16.0.0",
-    "@angular/core": "^16.0.0",
-    "@angular/platform-browser": "^16.0.0",
-    "@angular/platform-browser-dynamic": "^16.0.0",
-    "@angular/platform-server": "^16.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
     "rxjs": "~7.6.0",
     "tslib": "^2.4.0",
-    "zone.js": "~0.13.0"
+    "zone.js": "~0.14.0"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^16.0.0",
-    "@angular-devkit/build-angular": "^16.0.0",
-    "@angular/cli": "^16.0.0",
-    "@angular/compiler-cli": "^16.0.0",
-    "@types/node": "^16.0.0",
+    "@angular-builders/custom-webpack": "^17.0.0",
+    "@angular-devkit/build-angular": "^18.0.0",
+    "@angular/cli": "^18.0.0",
+    "@angular/compiler-cli": "^18.0.0",
+    "@types/node": "^18.0.0",
     "cross-env": "^7.0.3",
     "@dotenv-run/webpack": "^1.3.4",
-    "typescript": "~4.9.3"
+    "typescript": "~5.4"
   }
-}
+}
diff --git a/examples/apps/ng-app-webpack/src/env.d.ts b/examples/apps/ng-app-webpack/src/env.d.ts
@@ -1,22 +1,9 @@
 interface ImportMeta {
-  readonly env: ImportMetaEnv;
+  env: ImportMetaEnv;
 }
 
 interface ImportMetaEnv {
-  /**
-   * Built-in environment variable.
-   * @see Docs https://github.com/chihab/dotenv-run/packages/angular#ng_app_env.
-   */
   readonly NG_APP_ENV: string;
   readonly API_USERS: string;
-  // Add your environment variables below
-  // readonly NG_APP_API_URL: string;
-  [key: string]: any;
+  readonly NGX_VERSION: string;
 }
-
-declare var process: {
-  env: {
-    NG_APP_ENV: string;
-    [key: string]: any;
-  };
-};
diff --git a/examples/apps/ng-app-webpack/test-results/.last-run.json b/examples/apps/ng-app-webpack/test-results/.last-run.json
@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}
diff --git a/examples/apps/ng-app-webpack/tsconfig.app.json b/examples/apps/ng-app-webpack/tsconfig.app.json
@@ -2,9 +2,8 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": []
+    "outDir": "./out-tsc/app"
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
-  "include": ["src/**/*.d.ts"]
+  "include": ["src/env.d.ts"]
 }
diff --git a/examples/apps/ng-app-webpack/webpack.config.ts b/examples/apps/ng-app-webpack/webpack.config.ts
@@ -4,7 +4,7 @@ import type { Configuration } from 'webpack';
 export default (config: Configuration) => {
   config.plugins?.push(
     new DotenvRunPlugin({
-      root: "../..",
+      root: '../..',
       cwd: process.cwd(),
       prefix: /^API|NGX/,
       verbose: true,

diff --git a/examples/package.json b/examples/package.json
@@ -11,18 +11,19 @@
     "@dotenv-run/cli": "^1.3.5",
     "@dotenv-run/load": "^1.3.4",
     "@dotenv-run/rollup": "^1.3.4",
-    "@dotenv-run/webpack": "^1.3.4",
+    "@dotenv-run/webpack": "^1.4.0",
     "@nx/js": "^18.2.1",
-    "@playwright/test": "^1.37.1",
+    "@playwright/test": "^1.44.1",
+    "@types/node": "^20.12.12",
     "nx": "^16.5.5",
+    "playwright": "^1.44.1",
     "rollup": "^3.0.0",
     "serve": "^14.2.1",
     "verdaccio": "^5.0.4",
-    "webpack": "5.90.1",
+    "webpack": "5.91.0",
     "webpack-cli": "^5.0.0"
   },
   "nx": {
     "includedScripts": []
-  },
-  "dependencies": {}
+  }
 }
diff --git a/package.json b/package.json
@@ -11,11 +11,18 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@changesets/cli": "^2.27.1",
+    "@changesets/cli": "^2.27.3",
     "concurrently": "^8.2.2",
     "husky": "^8.0.0",
     "turbo": "^1.12.4",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.0",
     "vitest": "^0.33.0"
+  },
+  "workspaces": {
+    "packages": [
+      "examples",
+      "packages/*",
+      "docs"
+    ]
   }
 }
diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngx-env/builder",
-  "version": "17.3.0",
+  "version": "18.0.0",
   "description": "Easily inject environment variables into your Angular applications",
   "author": "chihab <chihab@gmail.com>",
   "homepage": "https://github.com/chihab/ngx-env/tree/main/packages/angular",
@@ -30,29 +30,27 @@
     "copy-dist": "ts-node tools/schema-dist.ts"
   },
   "dependencies": {
-    "@dotenv-run/esbuild": "^1.3.5",
-    "@dotenv-run/webpack": "^1.3.4",
+    "@dotenv-run/esbuild": "^1.4.0",
+    "@dotenv-run/webpack": "^1.4.0",
     "glob": "^10.3.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.2.0",
-    "@angular-devkit/schematics": "^17.2.0",
-    "@angular-devkit/schematics-cli": "^17.2.0",
-    "@angular-devkit/architect": "^0.1702.0",
-    "@angular-devkit/core": "^17.2.0",
-    "@angular/compiler": "^17.2.0",
+    "@angular-devkit/build-angular": "^18.0.0",
+    "@angular-devkit/schematics": "^18.0.0",
+    "@angular-devkit/schematics-cli": "^18.0.0",
+    "@angular-devkit/architect": "^0.1800.0",
+    "@angular-devkit/core": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
     "@dotenv-run/core": "^1.3.4",
     "cpy": "^8.1.2",
     "karma": "^6.4.2",
     "ts-node": "^10.8.0",
-    "typescript": "~5.2.2",
+    "typescript": "^5.4.0",
     "rxjs": "^7.0.0",
-    "webpack": "5.90.1"
+    "webpack": "5.91.0"
   },
   "peerDpendencies": {
-    "@angular-devkit/architect": "^17.2.0",
-    "@angular-devkit/schematics-cli": ">=12.0.0",
     "rxjs": "^7.0.0",
-    "webpack": "5.90.1"
+    "webpack": "5.91.0"
   }
 }
diff --git a/packages/angular/src/builders/application/application.json b/packages/angular/src/builders/application/application.json
@@ -33,6 +33,10 @@
       "type": "string",
       "description": "The full path for the TypeScript configuration file, relative to the current workspace."
     },
+    "deployUrl": {
+      "type": "string",
+      "description": "Customize the base path for the URLs of resources in 'index.html' and component stylesheets. This option is only necessary for specific deployment scenarios, such as with Angular Elements or when utilizing different CDN locations."
+    },
     "scripts": {
       "description": "Global scripts to be included in the build.",
       "type": "array",
@@ -133,6 +137,11 @@
       },
       "default": []
     },
+    "clearScreen": {
+      "type": "boolean",
+      "default": false,
+      "description": "Automatically clear the terminal screen during rebuilds."
+    },
     "optimization": {
       "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.",
       "default": true,
@@ -211,6 +220,13 @@
         "^\\.\\S+$": { "enum": ["text", "binary", "file", "empty"] }
       }
     },
+    "define": {
+      "description": "Defines global identifiers that will be replaced with a specified constant value when found in any JavaScript or TypeScript code including libraries. The value will be used directly. String values must be put in quotes. Identifiers within Angular metadata such as Component Decorators will not be replaced.",
+      "type": "object",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
     "fileReplacements": {
       "description": "Replace compilation source files with other compilation source files in the build.",
       "type": "array",
@@ -544,11 +560,12 @@
             },
             "output": {
               "type": "string",
+              "default": "",
               "description": "Absolute path within the output."
             }
           },
           "additionalProperties": false,
-          "required": ["glob", "input", "output"]
+          "required": ["glob", "input"]
         },
         {
           "type": "string"
@@ -560,11 +577,11 @@
       "properties": {
         "replace": {
           "type": "string",
-          "pattern": "\\.(([cm]?j|t)sx?|json)$"
+          "pattern": "\\.(([cm]?[jt])sx?|json)$"
         },
         "with": {
           "type": "string",
-          "pattern": "\\.(([cm]?j|t)sx?|json)$"
+          "pattern": "\\.(([cm]?[jt])sx?|json)$"
         }
       },
       "additionalProperties": false,

diff --git a/packages/angular/src/builders/application/index.ts b/packages/angular/src/builders/application/index.ts
@@ -1,5 +1,6 @@
 import {
   BuilderContext,
+  BuilderOutput,
   createBuilder,
   fromAsyncIterable,
 } from "@angular-devkit/architect";
@@ -10,7 +11,7 @@ import {
 import { env, type DotenvRunOptions } from "@dotenv-run/core";
 import { dotenvRunDefine } from "@dotenv-run/esbuild";
 import { join } from "path";
-import { from, switchMap, tap } from "rxjs";
+import { Observable, from, switchMap, tap } from "rxjs";
 import { NgxEnvSchema } from "../ngx-env/ngx-env-schema";
 import { indexHtml } from "../utils/esbuild-index-html";
 import { getEnvironment } from "../utils/get-environment";
@@ -19,7 +20,7 @@ import { getProjectCwd } from "../utils/project";
 export const buildWithPlugin = (
   options: ApplicationBuilderOptions & NgxEnvSchema,
   context: BuilderContext
-) => {
+): Observable<BuilderOutput> => {
   const dotEnvOptions: DotenvRunOptions = options.ngxEnv;
   return from(getProjectCwd(context)).pipe(
     switchMap((cwd) => {
@@ -29,7 +30,7 @@ export const buildWithPlugin = (
         global: "_NGX_ENV_",
         environment: getEnvironment(context.target.configuration),
       });
-      return fromAsyncIterable(
+      return fromAsyncIterable<BuilderOutput>(
         buildApplication(options, context, [dotenvRunDefine(full)])
       ).pipe(
         tap(() => {