@eui/cli 21.0.0-next.9 → 21.0.0-rc.1

package/bin/eui-cli.js

@@ -11,9 +11,6 @@ const scriptIndex = args.findIndex(
     x === 'build-app' ||
     x === 'serve-app' ||
     x === 'lint-app' ||
-    x === 'generate-sprite' ||
-    x === 'generate-app-metadata' ||
-    x === 'help' ||
     x === 'inject-config-app'
 );
 const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
@@ -26,10 +23,6 @@ switch (script) {
     case 'build-app':
     case 'serve-app':
     case 'lint-app':
-    case 'generate-translations':
-    case 'generate-sprite':
-    case 'generate-app-metadata':
-    case 'help':
     case 'inject-config-app': {
         let genScript = script;
         if (script === '' || script === undefined) {

package/bin/scripts/inject-config-app.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const common = require('../../lib/app-utils/common');
+
+Promise.resolve()
+  .then(() => {
+    return common.injectAppConfig();
+  })
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  });

package/lib/app-utils/build.js

@@ -1,20 +1,9 @@
-// TODO v21 - app prebuild for config injection from eUI tools
-
 const path = require('path');
 const childProcess = require('child_process');
 const execSync = childProcess.execSync;
 
 const utils = require('../utils');
-
-// const execa = require('execa');
-
-// const tools = require('../../tools');
-// const mavenUtils = require('../../maven-utils');
-// const configUtils = require('../../../csdr/config/config-utils');
-// const versionUtils = require('../../../csdr/version/version-utils');
-
-// const preBuildUtils = require('../../pre-build/pre-build-utils');
-
+const common = require('./common'); 
 
 module.exports.run = () => {
   let {
@@ -28,7 +17,6 @@ module.exports.run = () => {
     dryRun,
     maxSpaceSize,
     statsJson,
-    extraWebpackConfig,
     ci,
     deployUrl,
     sourceMap,
@@ -39,23 +27,19 @@ module.exports.run = () => {
 
   utils.logTitle(`Building application : ${prjName}...`);
 
-  const ng = path.resolve(process.cwd(), '@angular', 'cli', 'bin', 'ng');
+  const ng = path.resolve(process.cwd(), 'node_modules', '@angular', 'cli', 'bin', 'ng');
 
   return Promise.resolve()
-    // .then(() => {
-    //   return preBuildUtils.projects.preBuild(currentProject, envTarget, true, configEnvTarget);
-    // })
-
     .then(() => {
-      if (!skipLint) {
-          utils.logInfo(`running ng lint ${prjName}`);
-          execSync(`ng lint ${prjName}`);        
+      if (configEnvTarget) {
+        return common.injectAppConfig();
       }
     })
 
     .then(() => {
       if (!skipLint) {
-        utils.logSuccess();
+          utils.logInfo(`running ng lint ${prjName}`);
+          execSync(`ng lint ${prjName}`, { cwd: process.cwd(), stdio: 'inherit' });        
       }
     })
 
@@ -80,14 +64,12 @@ module.exports.run = () => {
           args.push(`--watch=false`);
         }
 
-        args.push('--code-coverage');
-
         utils.logInfo(`ng test : watching = ${watch || false}`);
 
         utils.logInfo(`running Angular TEST with args: ${args} on :`);
 
         if (!dryRun) {
-          execSync(`node ${args.join(' ')}`, { cwd: currentProject.paths.angularPath, stdio: 'inherit' });
+          execSync(`node ${args.join(' ')}`, { cwd: process.cwd(), stdio: 'inherit' });
         }
       }
     })
@@ -139,38 +121,12 @@ module.exports.run = () => {
       utils.logInfo(`running Angular BUILD with args: ${args}`);
 
       if (!dryRun && !skipCompile) {
-        execSync(`node ${args.join(' ')}`, { cwd: currentProject.paths.angularPath, stdio: 'inherit' });
+        execSync(`node ${args.join(' ')}`, { cwd: process.cwd(), stdio: 'inherit' });
       }
     })
 
-    // .then(() => {
-    //   const projectVersion = parseInt(configUtils.projects.getProjectEuiVersion(currentProject));
-
-    //   if (currentProject.build && currentProject.build.skipBrowserOutputPath) {
-    //     if (currentProject.build.esbuild || projectVersion >= 18) {
-    //       utils.copydir(path.join(currentProject.paths.rootPath, 'dist', 'browser'), path.join(currentProject.paths.rootPath, 'dist'));
-    //       utils.remove(path.join(currentProject.paths.rootPath, 'dist', 'browser'));
-    //     }
-    //   }
-    // })
-
-    // .then(() => {
-    //   const desti18ncompiledPath = path.join(currentProject.paths.rootPath, 'dist', 'assets', 'i18n-compiled');
-    //   if (utils.isDirExists(desti18ncompiledPath)) {
-    //     utils.logTitle('Post-build assets i18n-compiled folder content:');
-    //     const i18nfiles = utils.getFiles(desti18ncompiledPath);
-    //     console.log(i18nfiles);
-    //   }
-
-    //   const mediaAssetsPath = path.join(currentProject.paths.rootPath, 'dist', 'assets', 'media');
-    //   if (utils.isDirExists(mediaAssetsPath)) {
-    //     utils.copydirFiles(mediaAssetsPath, path.join(currentProject.paths.rootPath, 'dist', 'media'));
-    //   }
-    // })
-
     .catch((e) => {
       throw e;
     });
 };
 
-

package/lib/app-utils/common.js

@@ -0,0 +1,43 @@
+const path = require('path');
+const utils = require('../utils');
+
+module.exports.injectAppConfig = () => {
+  return Promise.resolve()
+    .then(() => {
+      let { configEnvTarget } = utils.getArgs();
+
+      if (!configEnvTarget) {
+        throw new Error('configEnvTarget not provided as argument');
+      }
+
+      // set default if not envTarget provided
+      let envFilePath = path.join(process.cwd(), 'src/assets/config', `env-json-config.json`);
+
+      utils.logInfo(`Executing configuration replacement for : ${configEnvTarget} environment`);
+
+      let envOpenidPrefix = 'env-json-config-';
+      let openidConfigAssetsFolder = 'assets/config';
+
+      envFilePath = path.join(process.cwd(), `src/${openidConfigAssetsFolder}`, `${envOpenidPrefix}${configEnvTarget}.json`);
+
+      if (!utils.isFileExists(envFilePath)) {
+        utils.logError(`Cannot find environment config to inject : `);
+        utils.logError(`${envFilePath} missing...`);
+        return;
+      }
+
+      let rootTargetFolder = 'src';
+      let replacedFile;
+
+      replacedFile = `${rootTargetFolder}/assets/env-json-config.json`;
+
+      utils.logInfo(`Replacing default ${replacedFile} file by ${envFilePath} content`);
+      utils.copy(envFilePath, path.join(process.cwd(), `${replacedFile}`));
+
+      utils.logSuccess();
+    })
+
+    .catch((e) => {
+      throw e;
+    });
+}

package/lib/app-utils/serve.js

@@ -5,6 +5,7 @@ const childProcess = require('child_process');
 const execSync = childProcess.execSync;
 
 const utils = require('../utils');
+const common = require('./common'); 
 
 module.exports.run = () => {
 
@@ -15,10 +16,11 @@ module.exports.run = () => {
   const prjName = 'app';
 
   return Promise.resolve()
-    // .then(() => {
-    //   return preBuildUtils.projects.preBuild(prj, configuration, false, configEnvTarget);
-    // })
-
+    .then(() => {
+      if (configEnvTarget) {
+        return common.injectAppConfig();
+      }
+    })
 
     // trigger ng serve with parameters provided
     .then(() => {

package/lib/skeletons/_angular/base/angular.json

@@ -122,6 +122,22 @@
                         }
                     },
                     "defaultConfiguration": "development"
+                },
+                "test": {
+                    "builder": "@angular/build:unit-test",
+                    "options": {
+                        "tsConfig": "src/tsconfig.spec.json"
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-eslint/builder:lint",
+                    "options": {
+                        "lintFilePatterns": [
+                            "src/**/*.ts",
+                            "src/**/*.html"
+                        ],
+                        "eslintConfig": "eslint.config.js"
+                    }
                 }
             }
         }

package/lib/skeletons/_angular/base/eslint.config.js

@@ -0,0 +1,43 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = tseslint.config(
+    {
+        files: ["**/*.ts"],
+        extends: [
+            eslint.configs.recommended,
+            ...tseslint.configs.recommended,
+            ...tseslint.configs.stylistic,
+            ...angular.configs.tsRecommended,
+        ],
+        processor: angular.processInlineTemplates,
+        rules: {
+            "@angular-eslint/directive-selector": [
+                "error",
+                {
+                    type: "attribute",
+                    prefix: "app",
+                    style: "camelCase",
+                },
+            ],
+            "@angular-eslint/component-selector": [
+                "error",
+                {
+                    type: "element",
+                    prefix: "app",
+                    style: "kebab-case",
+                },
+            ],
+        },
+    },
+    {
+        files: ["**/*.html"],
+        extends: [
+            ...angular.configs.templateRecommended,
+            ...angular.configs.templateAccessibility,
+        ],
+        rules: {},
+    },
+);

package/lib/skeletons/_angular/base/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eui-angular-app",
-    "version": "21.0.0-next.9",
+    "version": "21.0.0-rc.1",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
@@ -13,20 +13,18 @@
         "build-dev": "eui-cli build-app --configuration=development --configEnvTarget=dev",
         "build-prod": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod",
         "build-prod-skip-test": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod --skipTest",
-        "build-prod-stats": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod --statsJson",
+        "build-prod-stats": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod",
         "app:build": "eui-cli build-app",
-        "app:inject-config": "eui-cli inject-config-app",
-        "generate-changelog": "eui-cli generate-changelog",
-        "generate-sprite": "eui-cli generate-sprite"
+        "app:inject-config": "eui-cli inject-config-app"
     },
     "private": true,
     "dependencies": {
-        "@eui/deps-base": "21.0.0-next.9"
+        "@eui/deps-base": "21.0.0-rc.1"
     },
     "devDependencies": {
         "npm-run-all": "4.1.5",
         "json-server": "1.0.0-beta.3",
-        "nodemon": "2.0.22",
+        "nodemon": "3.1.11",
         "lowdb": "1.0.0",
         "body-parser": "1.20.3",
         "express": "4.21.2"

package/lib/skeletons/_angular/base/src/app/app-starter.service.spec.ts

@@ -4,9 +4,12 @@ import {CONFIG_TOKEN, I18nService, UserService} from '@eui/core';
 import {EuiAppConfig} from '@eui/core';
 import {of} from 'rxjs';
 import {AppStarterService} from './app-starter.service';
-import SpyObj = jasmine.SpyObj;
 import { EuiServiceStatus } from '@eui/base';
 import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
+import { describe, it, beforeEach, expect, vi } from 'vitest';
+
+// eslint-disable-next-line
+type SpyObj<T> = { [K in keyof T]: T[K] extends (...args: any[]) => any ? ReturnType<typeof vi.fn> : T[K] };
 
 describe('AppStarterService', () => {
     let service: AppStarterService;
@@ -16,8 +19,8 @@ describe('AppStarterService', () => {
     let configMock: EuiAppConfig;
 
     beforeEach(() => {
-        userServiceMock = jasmine.createSpyObj('UserService', ['init']);
-        i18nServiceMock = jasmine.createSpyObj('I18nService', ['init']);
+        userServiceMock = { init: vi.fn() } as SpyObj<UserService>;
+        i18nServiceMock = { init: vi.fn() } as SpyObj<I18nService>;
         configMock = {global: {}, modules: {core: {base: 'localhost:3000', userDetails: 'dummy'}}};
 
         TestBed.configureTestingModule({
@@ -40,8 +43,8 @@ describe('AppStarterService', () => {
     });
 
     it('should call start method', () => {
-        userServiceMock.init.and.returnValue(of({ } as EuiServiceStatus));
-        i18nServiceMock.init.and.returnValue(of({ } as EuiServiceStatus));
+        vi.mocked(userServiceMock.init).mockReturnValue(of({ } as EuiServiceStatus));
+        vi.mocked(i18nServiceMock.init).mockReturnValue(of({ } as EuiServiceStatus));
         service.start().subscribe(() => {
             expect(userServiceMock.init).toHaveBeenCalled();
             expect(i18nServiceMock.init).toHaveBeenCalled();
@@ -49,7 +52,7 @@ describe('AppStarterService', () => {
     });
 
     it('should call initUserService method', () => {
-        userServiceMock.init.and.returnValue(of({ } as EuiServiceStatus));
+        vi.mocked(userServiceMock.init).mockReturnValue(of({ } as EuiServiceStatus));
         service.initUserService().subscribe(() => {
             expect(userServiceMock.init).toHaveBeenCalled();
         });

package/lib/skeletons/_angular/base/src/app/app.component.html

@@ -20,7 +20,7 @@
                 </eui-toolbar-item>
 
                 <eui-toolbar-item>
-                    <eui-notifications [count]="notificationItems?.length" [items]="notificationItems"></eui-notifications>
+                    <eui-notifications [count]="notificationItems.length" [items]="notificationItems" />
                 </eui-toolbar-item>
             </eui-toolbar-items>
 

package/lib/skeletons/_angular/base/src/app/app.component.spec.ts

@@ -10,7 +10,10 @@ import { CONFIG_TOKEN, I18nService, I18nState, UserService} from '@eui/core';
 import { EuiAppConfig } from '@eui/core';
 import { Observable, of } from 'rxjs';
 import { TranslateModule } from '@ngx-translate/core';
-import SpyObj = jasmine.SpyObj;
+import { describe, it, beforeEach, expect, vi } from 'vitest';
+
+// eslint-disable-next-line
+type SpyObj<T> = { [K in keyof T]: T[K] extends (...args: any[]) => any ? ReturnType<typeof vi.fn> : T[K] };
 
 describe('AppComponent', () => {
     let component: AppComponent;
@@ -20,18 +23,18 @@ describe('AppComponent', () => {
     let configMock: EuiAppConfig;
 
     beforeEach(async () => {
-
-        // Handle the overloaded getState method
         type GetStateReturnType<T> = T extends keyof I18nState ? Observable<I18nState[T]> : Observable<I18nState>;
 
-        userServiceMock = jasmine.createSpyObj('UserService', ['init']);
-        i18nServiceMock = jasmine.createSpyObj<I18nService>('I18nService', ['init', 'getState']);
-        i18nServiceMock.getState.and.callFake(<K extends keyof I18nState>(key?: K): GetStateReturnType<K> => {
-            if (typeof key === 'string') {
-                return of({ activeLang: 'en' }[key]) as GetStateReturnType<K>;
-            }
-            return of({ activeLang: 'en' }) as GetStateReturnType<K>;
-        });
+        userServiceMock = { init: vi.fn() } as SpyObj<UserService>;
+        i18nServiceMock = { 
+            init: vi.fn(), 
+            getState: vi.fn(<K extends keyof I18nState>(key?: K): GetStateReturnType<K> => {
+                if (typeof key === 'string') {
+                    return of({ activeLang: 'en' }[key]) as GetStateReturnType<K>;
+                }
+                return of({ activeLang: 'en' }) as GetStateReturnType<K>;
+            })
+        } as SpyObj<I18nService>;
         configMock = {global: {}, modules: {core: {base: 'localhost:3000', userDetails: 'dummy'}}};
 
         await TestBed.configureTestingModule({

package/lib/skeletons/_angular/base/src/app/features/home/home.component.html

@@ -1,5 +1,5 @@
 <eui-page>
-    <eui-page-header label="{{ 'page.home.title' | translate }}"></eui-page-header>
+    <eui-page-header label="{{ 'page.home.title' | translate }}" />
 
     <eui-page-content>
         <h3 class="eui-u-font-bold eui-u-color-info">Overview</h3>

package/lib/skeletons/_angular/base/src/app/features/home/home.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { CONFIG_TOKEN, EuiAppConfig } from '@eui/core';
 import { EUI_PAGE } from '@eui/components/eui-page';
 import { TranslateModule } from '@ngx-translate/core';
@@ -11,7 +11,9 @@ import { TranslateModule } from '@ngx-translate/core';
     ],
 })
 export class HomeComponent {
-    constructor(@Inject(CONFIG_TOKEN) protected config: EuiAppConfig) {
-        console.log(config);
+    protected config: EuiAppConfig = inject(CONFIG_TOKEN);
+
+    constructor() {
+        console.log(this.config);
     }
 }

package/lib/skeletons/_angular/base/src/app/features/module1/components/page1/page1.component.html

@@ -1,5 +1,5 @@
 <eui-page>
-    <eui-page-header label="Module 1 - page 1"></eui-page-header>
+    <eui-page-header label="Module 1 - page 1" />
 
     <eui-page-content>
         page 1 content

package/lib/skeletons/_angular/base/src/app/features/module1/components/page2/page2.component.html

@@ -1,5 +1,5 @@
 <eui-page>
-    <eui-page-header label="Module 1 - page 2"></eui-page-header>
+    <eui-page-header label="Module 1 - page 2" />
 
     <eui-page-content>
         page 1 content

package/lib/skeletons/_angular/base/src/app/features/module1/module1.component.html

@@ -1,7 +1,5 @@
 <eui-page>
-    <eui-page-header label="Module 1"></eui-page-header>
+    <eui-page-header label="Module 1" />
 
-    <eui-page-content>
-
-    </eui-page-content>
+    <eui-page-content />
 </eui-page>

package/lib/skeletons/_angular/base/src/app/features/module2/module2.component.html

@@ -1,5 +1,5 @@
 <eui-page>
-    <eui-page-header label="Module 2"></eui-page-header>
+    <eui-page-header label="Module 2" />
 
     <eui-page-content>
         Module 2 content

package/lib/skeletons/_angular/base/src/app/shared/testing/router.mock.ts

@@ -1,5 +1,5 @@
 import { NavigationEnd } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 export class RouterMock {
     routerState = { root: '' };
@@ -8,11 +8,4 @@ export class RouterMock {
         observer.next(this.navigationEnd);
         observer.complete();
     });
-
-    constructor() {}
-
-    createUrlTree() {}
-
-    serializeUrl() {}
-
-}
+}

package/lib/skeletons/_angular/base/src/dummy.spec.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 // Dummy test
 describe('Test', () => {
     it('should work', () => {

package/lib/skeletons/_angular/base/src/tsconfig.app.json

@@ -9,6 +9,9 @@
         "strictTemplates": true,
         "strictInjectionParameters": true,
     },
+    "include": [
+        "**/*.ts"
+    ],
     "exclude": [
       "**/*.spec.ts",
       "app/shared/testing/router.mock.ts",

package/lib/skeletons/_angular/base/tsconfig.json

@@ -1,27 +1,31 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
-  "compileOnSave": false,
-  "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "target": "ES2022",
-    "module": "ES2022",
-    "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ],
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "bundler",
-    "emitDecoratorMetadata": false,
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
-    "importHelpers": true,
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "paths": {
-        "@shared/*": ["src/app/shared/*"],
+    "compileOnSave": false,
+    "compilerOptions": {
+        "baseUrl": "./",
+        "outDir": "./dist/out-tsc",
+        "target": "ES2022",
+        "module": "ES2022",
+        "useDefineForClassFields": false,
+        "lib": [
+            "ES2022",
+            "dom"
+        ],
+        "sourceMap": true,
+        "declaration": false,
+        "moduleResolution": "bundler",
+        "emitDecoratorMetadata": false,
+        "experimentalDecorators": true,
+        "allowSyntheticDefaultImports": true,
+        "importHelpers": true,
+        "typeRoots": [
+            "node_modules/@types"
+        ],
+        "paths": {
+            "@shared/*": [
+                "src/app/shared/*"
+            ]
+        }
     }
-  }
 }

package/lib/skeletons/_angular/base-mobile/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eui-angular-app",
-    "version": "21.0.0-next.9",
+    "version": "21.0.0-rc.1",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
@@ -21,7 +21,7 @@
     "private": true,
     "dependencies": {
         "@eui/deps-base": "18.2.20",
-        "@eui/mobile-core": "18.1.3",
-        "@eui/mobile-styles": "18.1.3"
+        "@eui/mobile-core": "18.1.4",
+        "@eui/mobile-styles": "18.1.4"
     }
 }

package/lib/skeletons/_angular/options/ecl-ec/angular.json

@@ -140,39 +140,17 @@
                 "lint": {
                     "builder": "@angular-eslint/builder:lint",
                     "options": {
-                        "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"],
-                        "eslintConfig": "src/.eslintrc.json"
+                        "lintFilePatterns": [
+                            "src/**/*.ts",
+                            "src/**/*.html"
+                        ],
+                        "eslintConfig": "eslint.config.js"
                     }
                 },
                 "test": {
-                    "builder": "@angular-devkit/build-angular:karma",
+                    "builder": "@angular/build:unit-test",
                     "options": {
-                        "polyfills": ["zone.js", "zone.js/testing"],
-                        "tsConfig": "src/tsconfig.spec.json",
-                        "karmaConfig": "src/karma.conf.js",
-                        "inlineStyleLanguage": "scss",
-                        "assets": [
-                            {
-                                "glob": "**/*",
-                                "input": "node_modules/@eui/core/assets/",
-                                "output": "./assets"
-                            },
-                            {
-                                "glob": "**/*",
-                                "input": "node_modules/@eui/styles/dist/assets/ecl",
-                                "output": "./assets/images/ecl"
-                            },
-                            {
-                                "glob": "**/*",
-                                "input": "node_modules/@eui/styles/dist/assets",
-                                "output": "./assets"
-                            },
-                            {
-                                "glob": "**/*",
-                                "input": "node_modules/@eui/ecl/assets/",
-                                "output": "./assets"
-                            }
-                        ]
+                        "tsConfig": "src/tsconfig.spec.json"
                     }
                 }
             }