@eui/tools 6.3.32 → 6.3.34

package/.version.properties

@@ -1 +1 @@
-6.3.32
+6.3.34

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 6.3.34 (2023-02-14)
+
+##### Chores
+
+* **other:**
+  * add 10.x full skeleton sources injection for SEDIA v10 remotes - MWP-9204 [MWP-9204](https://webgate.ec.europa.eu/CITnet/jira/browse/MWP-9204)  ([030d3696](https://webgate.ec.europa.eu/CITnet/stash/scm/csdr/eui-tools.git/commits/030d3696107e6bf7f4e73f6b59dfa28665069848))
+
+* * *
+* * *
+## 6.3.33 (2023-02-14)
+
+##### Chores
+
+* **other:**
+  * adapted post-build operation for remote v15 - cleanup unused assets - testing remotes imports for MWP playground devX - MWP-9204 [MWP-9204](https://webgate.ec.europa.eu/CITnet/jira/browse/MWP-9204)  ([f11ffff8](https://webgate.ec.europa.eu/CITnet/stash/scm/csdr/eui-tools.git/commits/f11ffff88b66a3a78591d847151ce9edb946c70f))
+
+* * *
+* * *
 ## 6.3.32 (2023-02-14)
 
 ##### Chores

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@eui/tools",
-    "version": "6.3.32",
+    "version": "6.3.34",
     "tag": "latest",
     "license": "EUPL-1.1",
     "description": "eUI common tools and scripts",

package/sandbox.js

@@ -1134,12 +1134,17 @@ const versionUtils = require('./scripts/csdr/version/version-utils');
 //     console.log(e);
 //   })
 
-Promise.resolve()
-  .then(() => {
-    // const remotes = configUtils.remotes.getRemotes();
-    // console.log(remotes);
-    return installUtils.remotes.installDeps();
-  })
+// const prj = configUtils.projects.getCsdrProject('my-workplace-host-playground');
+
+// Promise.resolve()
+//   .then(() => {
+//     return installUtils.projects.getLocalProjectRemoteDeps(prj);
+//   })
+//   .then((deps) => {
+//     return installUtils.projects.importLocalProjectRemotes(prj, deps);
+//   })
+//   .then(() => {
+//   })
 
 
 // Promise.resolve()
@@ -1152,4 +1157,14 @@ Promise.resolve()
 //   })
 
 
+Promise.resolve()
+  .then(() => {
+    const remote = configUtils.remotes.getRemote('cc-task-centre-eui15-remote-el-ui');
+    return buildPackageUtils.element.postBuild(remote, '1.0.0');
+  })
+  .then(() => {
+    console.log('ok');
+  })
+
+
 

package/scripts/csdr/config/packages.js

@@ -72,9 +72,11 @@ module.exports.getPackageByNpmPkg = (npmPkg, fromCsdrConfig) => {
 }
 
 module.exports.isLocalPackage = (npmPkg) => {
-  return getPackages().filter((p) => {
-    return p.npmPkg === npmPkg
-  })[0] !== null;
+  tools.logInfo(`Checking if ${npmPkg} is localled installed`);
+
+  const packagesFound = getPackages().filter(p => p.npmPkg === npmPkg);
+
+  return packagesFound.length > 0;
 }
 
 

package/scripts/csdr/config/projects.js

@@ -60,10 +60,8 @@ const getProjectPaths = (prj) => {
 
   // locate and find the TSLint or ESLint configuration files
   if(tools.isFileExists(path.join(rootPath, 'src', 'tslint.json'))) {
-    tools.logWarning('TSLint is deprecated and will be removed in the future. Consider migrating to ESLint')
     paths.tslintPath = path.join(rootPath, 'src', 'tslint.json');
   } else if(tools.isFileExists(path.join(rootPath, '.tslint.json'))) {
-    tools.logWarning('TSLint is deprecated and will be removed in the future. Consider migrating to ESLint')
     paths.tslintPath = path.join(rootPath, '.tslint.json');
   } else if(tools.isFileExists(path.join(rootPath, 'src', '.eslintrc.json'))) {
     paths.eslintPath = path.join(rootPath, 'src', '.eslintrc.json');

package/scripts/csdr/config/remotes.js

@@ -19,8 +19,6 @@ module.exports.getRemote = (remoteName) => {
     remoteName = tools.getArgs().root;
   }
 
-  tools.logInfo(`Getting remote config for ${remoteName}`);
-
   const remotesConfig = require(path.join(process.cwd(), '.csdr', '.euirc-csdr-remotes.json'));
   const remoteConfig = remotesConfig[remoteName];
 
@@ -83,7 +81,14 @@ module.exports.getCsdrRemotes = (hostName, euiVersion) => {
     }
   }
 
-  tools.logInfo(`Getting remotes for host: ${hostName} - euiVersion: ${euiVersion}`);
+  tools.logInfo(`Getting remotes`);
+
+  if (hostName) {
+    tools.logInfo(`--- for host: ${hostName}`);
+  }
+  if (euiVersion) {
+    tools.logInfo(`--- for euiVersion: ${euiVersion}`);
+  }
 
   const remotesConfig = require(path.join(process.cwd(), '.csdr', '.euirc-csdr-remotes.json'));
   const remotesArray = Object.keys(remotesConfig).map((r) => {
@@ -115,3 +120,22 @@ module.exports.getRemotes = () => {
   })
   return outputRemotes;
 }
+
+module.exports.getRemoteByNpmPkg = (npmPkg, fromCsdrConfig) => {
+  let remotes;
+
+  if (fromCsdrConfig) {
+    remotes = this.getCsdrRemotes();
+
+  } else {
+    remotes = this.getRemotes();
+  }
+
+  return remotes.filter((r) => {
+    return r.npmPkg === npmPkg;
+  })[0];
+}
+
+module.exports.isLocalRemote = (npmPkg) => {
+  return this.getRemoteByNpmPkg(npmPkg) !== undefined;
+}

package/scripts/csdr/init/remotes/10.x/base/angular.json

@@ -30,7 +30,6 @@
                   "./node_modules/@eui/styles/dist/styles/eui.css",
                   "./node_modules/@eui/styles/dist/styles/eui-next.css",
                   "./node_modules/@eui/styles/dist/styles/eui-components.css",
-                  "./node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css",
                   "./node_modules/@eui/styles/dist/assets/fonts/font-awesome/font-awesome.min.css",
                   "./node_modules/@eui/styles/dist/assets/fonts/flag-icons/css/flag-icon.min.css"
               ]

package/scripts/csdr/init/remotes/10.x/full/common/app/eui-components.ts

@@ -0,0 +1,11 @@
+import {
+    EuiBlockContentComponentModule,
+    EuiButtonModule,
+    EuiLabelModule,
+} from '@eui/components-next';
+
+export const EUI_COMPONENTS_MODULES = [
+    EuiBlockContentComponentModule,
+    EuiButtonModule,
+    EuiLabelModule,
+];

package/scripts/csdr/init/remotes/10.x/full/common/app/fallback.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+    template: `
+        <eui-block-content [isBlocked]="true">
+            <div style="height: 100%"></div>
+        </eui-block-content>
+    `,
+})
+export class FallbackComponent {
+}

package/scripts/csdr/init/remotes/10.x/full/common/app/module.component.ts

@@ -0,0 +1,91 @@
+import { Component, OnInit, Inject, ElementRef, OnDestroy } from '@angular/core';
+
+import { take } from 'rxjs/operators';
+
+import { CONFIG_TOKEN } from '@eui/core';
+import { ElementSetupService, ElementLifeCycleService } from '@csdr/integration/element';
+
+enum ElementStatus {
+    Loading = 'loading',
+    Loaded = 'loaded',
+    Error = 'error',
+}
+
+@Component({
+    template: `
+        <eui-block-content *ngIf="moduleStatus === ElementStatus.Loading" [isBlocked]="true">
+            <div style="height: 100%"></div>
+        </eui-block-content>
+        <ng-container *ngIf="moduleStatus === ElementStatus.Loaded">
+            <router-outlet></router-outlet>
+        </ng-container>
+        <ng-container *ngIf="moduleStatus === ElementStatus.Error">
+            <div class="error-container">
+                <div>
+                    <h1>Translations or user data for this module failed to load.</h1>
+                    <p>Do you want to try again?</p>
+                    <button euiButton euiPrimary (click)="loadData()">
+                        <span euiLabel>{{ 'global.RELOAD' | translate }}</span>
+                    </button>
+                </div>
+            </div>
+        </ng-container>
+    `,
+    styles: [`
+        .error-container {
+            width: 50vw;
+            height: 50vh;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        .error-container div {
+            text-align: center
+        }
+    `],
+})
+export class ModuleComponent implements OnInit, OnDestroy {
+    ElementStatus = ElementStatus;
+    moduleStatus: ElementStatus;
+
+    constructor(private elRef: ElementRef,
+                @Inject(CONFIG_TOKEN) public config: any,
+                private elementLifeCycleService: ElementLifeCycleService,
+                private elementSetupService: ElementSetupService) {
+    }
+
+    ngOnInit() {
+        const elementData = this.elementLifeCycleService.getElementData(this.elRef);
+        this.elementLifeCycleService.setup(elementData);
+        this.loadData();
+    }
+
+    ngOnDestroy(): void {
+        this.elementLifeCycleService.cleanup();
+    }
+
+    private loadData() {
+        this.setStatus(ElementStatus.Loading);
+        try {
+            this.elementSetupService.init()
+                .pipe(take(1))
+                .subscribe((loadStatus: { success: boolean; error?: string }) => {
+                    if (!loadStatus.success) {
+                        this.setStatus(ElementStatus.Error);
+                        console.error(`[ELEMENT: ${this.config.global.elementName}] `, loadStatus.error);
+                    } else {
+                        this.setStatus(ElementStatus.Loaded);
+                    }
+                });
+        } catch (e) {
+            console.log(e);
+            this.setStatus(ElementStatus.Error);
+        }
+    }
+
+    private setStatus(status: ElementStatus) {
+        this.moduleStatus = status;
+    }
+}

package/scripts/csdr/init/remotes/10.x/full/common/app/module.ts

@@ -0,0 +1,96 @@
+import { NgModule, Injector, DoBootstrap, ApplicationRef } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClient, HttpClientModule, HttpHeaders } from '@angular/common/http';
+import { createCustomElement } from '@angular/elements';
+
+import { StoreModule, USER_PROVIDED_META_REDUCERS } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreRouterConnectingModule } from '@ngrx/router-store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+import {
+    CoreModule,
+    CONFIG_TOKEN,
+    EUI_CONFIG_TOKEN,
+    translateConfig,
+} from '@eui/core';
+import { EUI_COMPONENTS_MODULES } from './eui-components';
+import {
+    CsdrCoreModule,
+    ElementStorageService,
+} from '@csdr/core';
+
+import { TOKEN, reducerProvider, metaReducers } from './reducers/index';
+import { CustomSerializer } from './reducers/custom-route-serializer';
+
+import { environment } from '../environments/environment';
+import { appConfig } from '../config';
+
+import { @root.common.module@ as RootCommonModule } from '@root.npm.pkg@';
+import {
+    DEFAULT_MAPPED_PROVIDERS,
+} from '@csdr/integration/element';
+import { RoutingModule } from './routing.module';
+
+import { FallbackComponent } from './fallback.component';
+import { ModuleComponent } from './module.component';
+
+// IMPORTS
+
+// DECLARATIONS
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        HttpClientModule,
+        EffectsModule.forRoot([]),
+        StoreDevtoolsModule.instrument({ name: appConfig.global.storeName, maxAge: 150, logOnly: environment.production }),
+        TranslateModule.forRoot(translateConfig),
+
+        CoreModule.forRoot(),
+        CsdrCoreModule.forRoot(),
+        RootCommonModule,
+        RoutingModule,
+        ...EUI_COMPONENTS_MODULES,
+
+       // DEFINITIONS
+    ],
+    declarations: [
+        FallbackComponent,
+        ModuleComponent,
+    ],
+    entryComponents: [
+        FallbackComponent,
+        ModuleComponent,
+    ],
+    providers: [
+        reducerProvider,
+        {
+            provide: EUI_CONFIG_TOKEN,
+            useValue: { appConfig: { ...appConfig, ...environment }, environment },
+        },
+
+        ...DEFAULT_MAPPED_PROVIDERS,
+
+        // PROVIDERS
+    ],
+})
+export class AppModule implements DoBootstrap {
+
+    constructor(private injector: Injector, private http: HttpClient) {
+        // CONSTRUCTOR DECLARATIONS
+    }
+
+    ngDoBootstrap(appRef: ApplicationRef): void {
+        const elementSampleEui = createCustomElement(ModuleComponent, { injector: this.injector });
+        try {
+            customElements.define(appConfig.global.elementName, elementSampleEui);
+        } catch (e) {
+            console.log(e);
+        }
+    }
+}

package/scripts/csdr/init/remotes/10.x/full/common/app/reducers/custom-route-serializer.ts

@@ -0,0 +1,28 @@
+import { Params, RouterStateSnapshot } from '@angular/router';
+import { RouterStateSerializer } from '@ngrx/router-store';
+
+export interface RouterStateUrl {
+    url: string;
+    params: Params;
+    queryParams: Params;
+}
+
+export class CustomSerializer implements RouterStateSerializer<RouterStateUrl> {
+    serialize(routerState: RouterStateSnapshot): RouterStateUrl {
+        let route = routerState.root;
+
+        while (route.firstChild) {
+            route = route.firstChild;
+        }
+
+        const {
+            url,
+            root: { queryParams },
+        } = routerState;
+        const { params } = route;
+
+        // Only return an object including the URL, params and query params
+        // instead of the entire snapshot
+        return { url, params, queryParams };
+    }
+}

package/scripts/csdr/init/remotes/10.x/full/common/app/reducers/index.ts

@@ -0,0 +1,42 @@
+import { InjectionToken } from '@angular/core';
+import { ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
+import * as fromRouter from '@ngrx/router-store';
+import { storeFreeze } from 'ngrx-store-freeze';
+import { reducers as coreReducers, CoreState, localStorageSync } from '@eui/core';
+
+import { environment } from '../../environments/environment';
+
+export interface AppState extends CoreState {
+    router: fromRouter.RouterReducerState<any>;
+}
+
+// -----------------
+// ------------ AOT
+export const TOKEN = new InjectionToken<any>('AppReducers');
+
+export function getReducers(): ActionReducerMap<AppState, any> {
+    return {
+        router: fromRouter.routerReducer,
+        ...coreReducers,
+    };
+}
+
+export const reducerProvider = [
+    { provide: TOKEN, useFactory: getReducers },
+];
+
+// console.log all actions
+export function logger(reducer: ActionReducer<AppState>): ActionReducer<AppState> {
+    return (state, action) => {
+        const result = reducer(state, action);
+        console.groupCollapsed(action.type);
+        console.log('prev state', state);
+        console.log('action', action);
+        console.log('next state', result);
+        console.groupEnd();
+
+        return result;
+    };
+}
+
+export const metaReducers: MetaReducer<AppState>[] = !environment.production ? [logger, localStorageSync, storeFreeze] : [localStorageSync];

package/scripts/csdr/init/remotes/10.x/full/common/app/routing.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ELEMENT_ROUTES_TOKEN } from '@csdr/integration/element';
+
+import { routes } from '@root.npm.pkg@';
+// DON'T PAY ATTENTION TO IMPORT ERRORS HERE, those files are injected at serve/build time
+import { appConfig } from '../config/index';
+import { FallbackComponent } from './fallback.component';
+import { ModuleComponent } from './module.component';
+
+const elementRoutes: Routes = [
+    { path: '', component: ModuleComponent },
+    {
+        path: appConfig.global.baseUrl,
+        children: routes,
+    },
+    { path: '**', component: FallbackComponent },
+];
+
+// @dynamic
+@NgModule({
+    imports: [
+        RouterModule.forRoot(elementRoutes),
+    ],
+    providers: [
+        { provide: ELEMENT_ROUTES_TOKEN, useValue: elementRoutes },
+    ],
+    exports: [
+        RouterModule,
+    ],
+})
+export class RoutingModule {
+}

package/scripts/csdr/init/remotes/10.x/full/common/config/global.ts

@@ -0,0 +1,55 @@
+import { registerLocaleData } from '@angular/common';
+
+import localeEn from '@angular/common/locales/en';
+import localeEnExtra from '@angular/common/locales/extra/en';
+import localeFr from '@angular/common/locales/fr';
+import localeFrExtra from '@angular/common/locales/extra/fr';
+
+import { GlobalConfig, I18nConfig, LocaleServiceConfig } from '@eui/core';
+
+/**
+ * import and register locales (currently MWP uses only French and English)
+ */
+registerLocaleData(localeEn, 'en', localeEnExtra);
+registerLocaleData(localeFr, 'fr', localeFrExtra);
+
+/**
+ * Internationalization Configuration
+ */
+const i18nConfig: I18nConfig = {
+    i18nLoader: {
+        i18nFolders: ['elements/@remote.name@/bundles/assets/i18n-compiled'],
+        i18nResources: [{
+            prefix: 'assets/i18n-eui/',
+            suffix: '.json',
+        }],
+    },
+    i18nService: {
+        languages: ['en', 'fr'],
+        defaultLanguage: 'en',
+    },
+};
+
+/**
+ * Locale Configuration
+ */
+const localeConfig: LocaleServiceConfig = {
+    id: 'en',
+    available: ['en', 'fr'],
+    bindWithTranslate: true,
+    affectGlobalLocale: true,
+};
+
+/**
+ * Global Configuration
+ */
+export const GLOBAL: GlobalConfig = {
+    /* URL that needs to be used in the appRouting of the MWP */
+    baseUrl: '@base.url@',
+    /* Element tag name that needs to be unique - make sure it doesn't collide with any other MWP element */
+    elementName: '@element.name@',
+    /* in case you are using NgRx give it a unique name (mostly for debugging) */
+    storeName: '@store.name@',
+    i18n: i18nConfig,
+    locale: localeConfig,
+};

package/scripts/csdr/init/remotes/10.x/full/common/config/index.ts

@@ -0,0 +1,20 @@
+import { GLOBAL } from './global';
+import { MODULES } from './modules';
+import { EuiAppConfig, LogLevel, ConsoleAppender, LogConfig } from '@eui/core';
+
+/**
+ * Log Configuration
+ */
+const logConfig: LogConfig = {
+    logLevel: LogLevel.ALL,
+    logAppenders: [{
+        type: ConsoleAppender,
+        prefixFormat: '[{level}]',
+    }],
+};
+
+export const appConfig: EuiAppConfig = {
+    global: GLOBAL,
+    modules: MODULES,
+    log: logConfig,
+};

package/scripts/csdr/init/remotes/10.x/full/common/config/modules.ts

@@ -0,0 +1,3 @@
+import { ModulesConfig } from '@eui/core';
+
+export const MODULES: ModulesConfig = {};

package/scripts/csdr/init/remotes/10.x/full/common/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+    production: true,
+};

package/scripts/csdr/init/remotes/10.x/full/common/environments/environment.ts

@@ -0,0 +1,3 @@
+export const environment = {
+    production: false,
+};

package/scripts/csdr/init/remotes/10.x/full/common/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <base href="/">
+</head>
+<body>
+  dummy index.html
+</body>
+</html>

package/scripts/csdr/init/remotes/10.x/full/common/main.ts

@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/module';
+import { environment } from './environments/environment';
+if (environment.production) {
+    enableProdMode();
+}
+
+platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .catch(err => console.log(err));

package/scripts/csdr/init/remotes/10.x/full/common/polyfills.ts

@@ -0,0 +1,87 @@
+/* eslint-disable */
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/es6/reflect';
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+// import 'core-js/es7/reflect';
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+/*
+* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+* with the following flag, it will bypass `zone.js` patch for IE/Edge
+*/
+// (window as any).__Zone_enable_cross_context_check = true;
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+ /**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import 'intl/locale-data/jsonp/en';

package/scripts/csdr/init/remotes/10.x/full/common/test.ts

@@ -0,0 +1,20 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

package/scripts/csdr/init/remotes/10.x/full/options/definitions/dynatrace.json

@@ -0,0 +1,4 @@
+{
+    "declarations": "declare const window: { dT_: { initAngularNg?: any } | undefined };",
+    "constructorDeclarations": "if (window?.dT_?.initAngularNg) { window.dT_.initAngularNg(http, HttpHeaders); }"
+}

package/scripts/csdr/init/remotes/10.x/full/options/definitions/participant.json

@@ -0,0 +1,3 @@
+{
+    "providers": "...CONTAINER_MAPPED_PROVIDERS"
+}

package/scripts/csdr/init/remotes/10.x/full/options/definitions/user-reducers.json

@@ -0,0 +1,3 @@
+{
+    "providers": "{ provide: USER_PROVIDED_META_REDUCERS, deps: [CONFIG_TOKEN, ElementStorageService], useFactory: metaReducers }"
+}

package/scripts/csdr/init/remotes/10.x/full/options/definitions/zipkin.json

@@ -0,0 +1,5 @@
+{
+    "imports": "import { getZipkinConfig, TRACE_MODULE_CONFIGURATION, ZipkinModule } from '@csdr/zipkin-tracing';",
+    "definitions": "ZipkinModule.forRoot()",
+    "providers": "{ provide: TRACE_MODULE_CONFIGURATION, useFactory: getZipkinConfig, deps: [CONFIG_TOKEN] }"
+}

package/scripts/csdr/init/remotes/10.x/full/options/participant/app/module.component.ts

@@ -0,0 +1,94 @@
+import { Component, OnInit, Inject, ElementRef, OnDestroy } from '@angular/core';
+
+import { take } from 'rxjs/operators';
+
+import { CONFIG_TOKEN } from '@eui/core';
+import { ElementSetupService, ElementLifeCycleService } from '@csdr/integration/element';
+
+enum ElementStatus {
+    Loading = 'loading',
+    Loaded = 'loaded',
+    Error = 'error',
+}
+
+@Component({
+    template: `
+        <eui-block-content *ngIf="moduleStatus === ElementStatus.Loading" [isBlocked]="true">
+            <div style="height: 100%"></div>
+        </eui-block-content>
+        <ng-container *ngIf="moduleStatus === ElementStatus.Loaded">
+            <@block.container.name@ [block]="block"></@block.container.name@>
+        </ng-container>
+        <ng-container *ngIf="moduleStatus === ElementStatus.Error">
+            <div class="error-container">
+                <div>
+                    <h1>Translations or user data for this module failed to load.</h1>
+                    <p>Do you want to try again?</p>
+                    <button euiButton euiPrimary (click)="loadData()">
+                        <span euiLabel>{{ "global.RELOAD" | translate }}</span>
+                    </button>
+                </div>
+            </div>
+        </ng-container>
+    `,
+    styles: [`
+        .error-container {
+            width: 50vw;
+            height: 50vh;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        .error-container div {
+            text-align: center
+        }
+    `],
+})
+export class ModuleComponent implements OnInit, OnDestroy {
+    ElementStatus = ElementStatus;
+    moduleStatus: ElementStatus;
+
+    block: any;
+
+    constructor(private elRef: ElementRef,
+                @Inject(CONFIG_TOKEN) public config: any,
+                private elementLifeCycleService: ElementLifeCycleService,
+                private elementSetupService: ElementSetupService) {
+    }
+
+    ngOnInit() {
+        this.block = this.elRef.nativeElement.block;
+        const elementData = this.elementLifeCycleService.getElementData(this.elRef);
+        this.elementLifeCycleService.setup(elementData);
+        this.loadData();
+    }
+
+    ngOnDestroy(): void {
+        this.elementLifeCycleService.cleanup();
+    }
+
+    private loadData() {
+        this.setStatus(ElementStatus.Loading);
+        try {
+            this.elementSetupService.init()
+                .pipe(take(1))
+                .subscribe((loadStatus: { success: boolean, error?: string }) => {
+                    if (!loadStatus.success) {
+                        this.setStatus(ElementStatus.Error);
+                        console.error(`[ELEMENT: ${this.config.global.elementName}] `, loadStatus.error);
+                    } else {
+                        this.setStatus(ElementStatus.Loaded);
+                    }
+                });
+        } catch (e) {
+            console.log(e);
+            this.setStatus(ElementStatus.Error);
+        }
+    }
+
+    private setStatus(status: ElementStatus) {
+        this.moduleStatus = status;
+    }
+}

package/scripts/csdr/init/remotes/10.x/full/options/participant/app/routing.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ELEMENT_ROUTES_TOKEN } from '@csdr/integration/element';
+
+import { appConfig } from '../config/index'; // tslint:disable-line
+import { FallbackComponent } from './fallback.component'; // tslint:disable-line
+import { ModuleComponent } from './module.component';
+
+const elementRoutes: Routes = [
+    { path: '**', component: ModuleComponent },
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forRoot(elementRoutes),
+    ],
+    providers: [
+        { provide: ELEMENT_ROUTES_TOKEN, useValue: elementRoutes },
+    ],
+    exports: [
+        RouterModule,
+    ],
+})
+export class RoutingModule {
+}

package/scripts/csdr/init/remotes/10.x/full/options/participant/config/index.ts

@@ -0,0 +1,10 @@
+import { GLOBAL } from './global';
+import { MODULES } from './modules';
+
+import { EuiAppConfig } from '@eui/core';
+import { configMapping } from '@csdr/integration/element';
+
+export const appConfig: EuiAppConfig = configMapping({
+    global: GLOBAL,
+    modules: MODULES,
+});

package/scripts/csdr/init/remotes/10.x/full/options/user-reducers/app/reducers/index.ts

@@ -0,0 +1,66 @@
+import { InjectionToken } from '@angular/core';
+import { ActionReducer, ActionReducerMap, MetaReducer, INIT } from '@ngrx/store';
+import * as fromRouter from '@ngrx/router-store';
+import { storeFreeze } from 'ngrx-store-freeze';
+
+import { reducers as coreReducers, CoreState, localStorageSync } from '@eui/core';
+import { ElementStorageService } from '@csdr/core';
+
+import { environment } from '../../environments/environment';
+
+export interface AppState extends CoreState {
+    router: fromRouter.RouterReducerState<any>;
+}
+
+// -----------------
+// ------------ AOT
+export const TOKEN = new InjectionToken<any>('AppReducers');
+
+export function getReducers(): ActionReducerMap<AppState, any> {
+    return {
+        router: fromRouter.routerReducer,
+        ...coreReducers,
+    };
+}
+
+export const reducerProvider = [
+    { provide: TOKEN, useFactory: getReducers },
+];
+
+// console.log all actions
+export function logger(reducer: ActionReducer<AppState>): ActionReducer<AppState> {
+    return (state, action) => {
+        const result = reducer(state, action);
+        console.groupCollapsed(action.type);
+        console.log('prev state', state);
+        console.log('action', action);
+        console.log('next state', result);
+        console.groupEnd();
+
+        return result;
+    };
+}
+
+export function hydrationFactory(config: any, elementStorage: ElementStorageService): MetaReducer<AppState> {
+    return (reducer: ActionReducer<AppState>): ActionReducer<any> => {
+        return (state, action) => {
+            const key = `NgRx store: ${config.global.elementName}`;
+            if (action.type === INIT && elementStorage.hasData(key)) {
+                const cachedState = elementStorage.getData(key);
+                const nextStateFromCache = reducer(cachedState as AppState, action);
+                elementStorage.setData(key, nextStateFromCache);
+                return nextStateFromCache;
+            }
+            const nextState = reducer(state, action);
+            elementStorage.setData(key, nextState);
+            return nextState;
+        };
+    };
+}
+
+export function metaReducers(config: any, elementStorage: ElementStorageService): MetaReducer<AppState>[] {
+    if (!environment.production) {
+        return [logger, localStorageSync, storeFreeze, hydrationFactory(config, elementStorage)];
+    }
+    return [localStorageSync, hydrationFactory(config, elementStorage)];
+}

package/scripts/csdr/install/projects.js

@@ -243,15 +243,15 @@ module.exports.importLocalProjectRemotes = (prj, remoteDeps) => {
       tools.logInfo(`Initializing ${remoteDeps.length} remotes`);
 
       remoteDeps.forEach((remoteNpmPkg) => {
-        tools.logInfo(`Checking import for : ${remoteNpmPkg}`);
+        tools.logInfo(`\nChecking import for : ${remoteNpmPkg}`);
 
         // check if package has been installed locally
-        if (configUtils.packages.isLocalPackage(remoteNpmPkg)) {
+        if (configUtils.remotes.isLocalRemote(remoteNpmPkg)) {
           tools.logInfo('remote is installed locally...skipping import');
 
         } else {
-          const pkg = configUtils.packages.getPackageByNpmPkg(remoteNpmPkg, true);
-          const projectElementsPath = path.join(process.cwd(), prj.folder, 'src', 'assets', 'elements', pkg.name, 'bundles');
+          const remote = configUtils.remotes.getRemoteByNpmPkg(remoteNpmPkg, true);
+          const projectElementsPath = path.join(process.cwd(), prj.folder, 'src', 'assets', 'elements', remote.name, 'bundles');
 
           const npmPkgScope = remoteNpmPkg.substr(0, remoteNpmPkg.indexOf('/'));
           const npmPkgName = remoteNpmPkg.substr(remoteNpmPkg.indexOf('/') + 1);

package/scripts/utils/build/package/element.js

@@ -92,11 +92,13 @@ module.exports.build = (pkg, isMaster) => {
 
 
 module.exports.postBuild = (pkg, version) => {
-  tools.logInfo('Executing element post-build...');
+  tools.logTitle('Executing element post-build...');
 
   const remoteEuiVersion = configUtils.packages.getPackageEuiVersion(pkg);
   const euiVersionNumber = remoteEuiVersion.split('.')[0];
 
+  tools.logInfo(`remote: ${pkg.name} - eUI version : ${remoteEuiVersion}`);
+
   if (dryRun) {
     tools.logInfo('DRY-RUN...skipping');
     return;
@@ -127,6 +129,10 @@ module.exports.postBuild = (pkg, version) => {
       return remotesUtils.emptyIndexHtml(path.join(pkg.paths.dist, 'bundles'));
     })
 
+    .then(() => {
+      return remotesUtils.cleanupUnusedAssets(path.join(pkg.paths.dist, 'bundles', 'assets'), euiVersionNumber);
+    })
+
     .catch((e) => {
       throw e;
     })

package/scripts/utils/remotes/remotes-utils.js

@@ -78,3 +78,38 @@ module.exports.emptyIndexHtml = (destPath) => {
       throw e;
     })
 }
+
+
+module.exports.cleanupUnusedAssets = (assetsPath, euiVersionNumber = 10) => {
+  tools.logInfo(`Cleanup unused assets for version : ${euiVersionNumber} in ${assetsPath}`);
+
+  if (euiVersionNumber > 10) {
+
+    return Promise.resolve()
+    .then(() => {
+      return tools.rimraf(path.join(assetsPath, 'ecl'));
+    })
+    .then(() => {
+      return tools.rimraf(path.join(assetsPath, 'icons', 'ionicons'));
+    })
+    .then(() => {
+      return tools.rimraf(path.join(assetsPath, 'icons', 'svg'));
+    })
+    .then(() => {
+      return tools.rimraf(path.join(assetsPath, 'icons', 'svg-src'));
+    })
+    .then(() => {
+      return tools.rimraf(path.join(assetsPath, 'icons', 'flags'));
+    })
+    .then(() => {
+      return tools.rimraf(path.join(assetsPath, 'fonts'));
+    })
+    .then(() => {
+      return tools.rimraf(path.join(assetsPath, 'i18n-eui'));
+    })
+
+    .catch((e) => {
+      throw e;
+    })
+  }
+}

package/scripts/utils/tools.js

@@ -181,6 +181,7 @@ function rmdir(path) {
 }
 
 function rimraf(inputPath) {
+  this.logInfo(`Removing ${inputPath}...`);
   let exec = path.resolve(process.cwd(), 'node_modules', 'rimraf', 'bin.js');
   if (!isFileExists(exec)) {
       // special location when used within eUI CLI