Resolves conflicts

client-frameworks-support/testing-utilities/test/index.html

@@ -79,13 +79,15 @@ <h3 class="fd-title fd-title--h3">
     'uxbutton4'
   ];
 
-  //Attach post message hook from MockModule
+  // Attach post message hook from MockModule
   initPostMessageMthd();
+
   const callMockModule = () => {
     let msgType = event.target.getAttribute('data-arg1');
     let LuigiClient = window.LuigiClient;
+
     switch (msgType) {
-      //Client Linkmanager features
+      // Client Linkmanager features
       case 'modal':
         LuigiClient.linkManager().openAsModal('projects/pr1/users', {
           title: 'Users',
@@ -113,7 +115,7 @@ <h3 class="fd-title fd-title--h3">
         LuigiClient.linkManager().pathExists('/');
         break;
 
-      //Client UX Manager features
+      // Client UX Manager features
       case 'alert':
         const settings = {
           text: 'This is just a test alert for external micro frontend.',
@@ -149,7 +151,7 @@ <h3 class="fd-title fd-title--h3">
     }
   };
 
-  //Attach event listeners to Buttons
+  // Attach event listeners to Buttons
   buttonArray.forEach(btn => {
     document.getElementById(btn).addEventListener('click', callMockModule);
   });

client-frameworks-support/testing-utilities/test/package.json

@@ -9,8 +9,9 @@
     "start": "live-server --port=8181 --entry-file=index.html  --mount=./node_modules:/node_modules"
   },
   "dependencies": {
-    "@luigi-project/client": "^2.0.0",
-    "@luigi-project/testing-utilities": "^2.0.0",
+    "@luigi-project/client": "^2.18.0",
+    "@luigi-project/testing-utilities": "^2.18.0",
+    "cross-spawn": "^7.0.6",
     "cypress": "^12.17.0",
     "fundamental-styles": "^0.26.5"
   }

container/package.json

@@ -46,6 +46,7 @@
     "@types/jest": "^29.5.12",
     "@typescript-eslint/eslint-plugin": "^8.13.0",
     "@typescript-eslint/parser": "^8.13.0",
+    "@typescript-eslint/typescript-estree": "^8.13.0",
     "chokidar-cli": "^3.0.0",
     "cli-color": "^2.0.4",
     "concurrently": "^7.6.0",
@@ -65,7 +66,6 @@
     "svelte-preprocess": "5.0.4",
     "tslib": "2.6.1",
     "typescript": "5.1.6",
-    "@typescript-eslint/typescript-estree": "^8.13.0",
     "typescript-eslint": "^8.13.0"
   },
   "engines": {

container/src/LuigiCompoundContainer.svelte

@@ -62,11 +62,13 @@
 
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { Events } from './constants/communication';
+  import type { ContainerElement } from './constants/container.model';
   import { ContainerService } from './services/container.service';
   import { WebComponentService } from './services/webcomponents.service';
-  import { Events } from './constants/communication';
   import { GenericHelperFunctions } from './utilities/helpers';
 
+  /* eslint-disable */
   export let activeFeatureToggleList: string[];
   export let anchor: string;
   export let clientPermissions: any;
@@ -86,10 +88,11 @@
   export let userSettings: any;
   export let viewurl: string;
   export let webcomponent: any;
+  /* eslint-enable */
 
   let containerInitialized = false;
-  let mainComponent: HTMLElement;
-  let eventBusElement: HTMLElement;
+  let mainComponent: ContainerElement;
+  let eventBusElement: ContainerElement;
 
   const containerService = new ContainerService();
   const webcomponentService = new WebComponentService();
@@ -114,11 +117,12 @@
     );
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const initialize = (thisComponent: any) => {
     if (!compoundConfig || containerInitialized) {
       return;
     }
-    thisComponent.updateContext = (contextObj: any, internal?: any) => {
+    thisComponent.updateContext = (contextObj: object, internal?: object) => {
       const rootElement = thisComponent.getNoShadow() ? thisComponent : mainComponent;
       rootElement._luigi_mfe_webcomponent.context = contextObj;
 
@@ -149,14 +153,14 @@
     }
     webcomponentService
       .renderWebComponentCompound(node, thisComponent.getNoShadow() ? thisComponent : mainComponent, ctx)
-      .then((compCnt) => {
-        eventBusElement = compCnt as HTMLElement;
+      .then((compCnt: ContainerElement) => {
+        eventBusElement = compCnt;
         if (skipInitCheck || !node.viewUrl) {
           thisComponent.initialized = true;
           setTimeout(() => {
             webcomponentService.dispatchLuigiEvent(Events.INITIALIZED, {});
           });
-        } else if ((eventBusElement as any).LuigiClient && !(eventBusElement as any).deferLuigiClientWCInit) {
+        } else if (eventBusElement.LuigiClient && !eventBusElement.deferLuigiClientWCInit) {
           thisComponent.initialized = true;
           webcomponentService.dispatchLuigiEvent(Events.INITIALIZED, {});
         }
@@ -166,6 +170,7 @@
   };
 
   onMount(async () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const thisComponent: any =
       mainComponent.getRootNode() === document
         ? mainComponent.parentNode

container/src/LuigiContainer.svelte

@@ -59,13 +59,15 @@
 
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { containerService } from './services/container.service';
-  import { WebComponentService } from './services/webcomponents.service';
   import { ContainerAPI } from './api/container-api';
   import { Events } from './constants/communication';
-  import { GenericHelperFunctions } from './utilities/helpers';
+  import type { IframeHandle, ContainerElement } from './constants/container.model';
+  import { containerService } from './services/container.service';
   import { getAllowRules } from './services/iframe-helpers';
+  import { WebComponentService } from './services/webcomponents.service';
+  import { GenericHelperFunctions } from './utilities/helpers';
 
+  /* eslint-disable */
   export let activeFeatureToggleList: string[];
   export let allowRules: string[];
   export let anchor: string;
@@ -89,9 +91,10 @@
   export let userSettings: any;
   export let viewurl: string;
   export let webcomponent: any;
+  /* eslint-enable */
 
-  const iframeHandle: { iframe: HTMLIFrameElement } | any = {};
-  let mainComponent: HTMLElement;
+  const iframeHandle: IframeHandle = {};
+  let mainComponent: ContainerElement;
   let containerInitialized = false;
 
   const webcomponentService = new WebComponentService();
@@ -120,9 +123,10 @@
     );
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const initialize = (thisComponent: any) => {
     if (!containerInitialized) {
-      thisComponent.sendCustomMessage = (id: string, data?: any) => {
+      thisComponent.sendCustomMessage = (id: string, data?: object) => {
         ContainerAPI.sendCustomMessage(
           id,
           thisComponent.getNoShadow() ? thisComponent : mainComponent,
@@ -132,15 +136,15 @@
         );
       };
 
-      thisComponent.updateContext = (contextObj: any, internal?: any) => {
+      thisComponent.updateContext = (contextObj: object, internal?: object) => {
         if (webcomponent) {
           (thisComponent.getNoShadow() ? thisComponent : mainComponent)._luigi_mfe_webcomponent.context = contextObj;
         } else {
           ContainerAPI.updateContext(contextObj, internal, iframeHandle);
         }
       };
 
-      thisComponent.closeAlert = (id: any, dismissKey: any) => {
+      thisComponent.closeAlert = (id: string, dismissKey: string) => {
         ContainerAPI.closeAlert(id, dismissKey, iframeHandle);
       };
 
@@ -189,8 +193,7 @@
       } else if (webcomponent) {
         (thisComponent.getNoShadow() ? thisComponent : mainComponent).addEventListener('wc_ready', () => {
           if (
-            !(thisComponent.getNoShadow() ? thisComponent : (mainComponent as any))._luigi_mfe_webcomponent
-              ?.deferLuigiClientWCInit
+            !(thisComponent.getNoShadow() ? thisComponent : mainComponent)._luigi_mfe_webcomponent?.deferLuigiClientWCInit
           ) {
             thisComponent.initialized = true;
             webcomponentService.dispatchLuigiEvent(Events.INITIALIZED, {});
@@ -203,6 +206,7 @@
   };
 
   onMount(async () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const thisComponent: any = mainComponent.parentNode;
     thisComponent.iframeHandle = iframeHandle;
     thisComponent.init = () => {

container/src/api/container-api.ts

@@ -1,3 +1,4 @@
+import type { IframeHandle, ContainerElement } from '../constants/container.model';
 import { LuigiInternalMessageID } from '../constants/internal-communication';
 import { containerService } from '../services/container.service';
 
@@ -8,7 +9,7 @@ export class ContainerAPIFunctions {
    * @param internal internal luigi legacy data
    * @param iframeHandle a reference to the iframe that is needed to send a message to it internally
    */
-  updateContext = (contextObj: any, internal?: any, iframeHandle?: any) => {
+  updateContext = (contextObj: object, internal?: object, iframeHandle?: IframeHandle) => {
     if (iframeHandle) {
       const internalParameter = internal || {};
       containerService.sendCustomMessageToIframe(
@@ -32,7 +33,7 @@ export class ContainerAPIFunctions {
    * @param internal internal luigi legacy data
    * @param iframeHandle a reference to the iframe that is needed to send a message to it internally
    */
-  updateViewUrl = (context: object, internal?: object, iframeHandle?: any) => {
+  updateViewUrl = (context: object, internal?: object, iframeHandle?: IframeHandle) => {
     if (iframeHandle) {
       const internalParameter = internal || {};
       containerService.sendCustomMessageToIframe(
@@ -55,7 +56,7 @@ export class ContainerAPIFunctions {
    * @param iframeHandle a reference to the iframe that is needed to send a message to it internally
    * @param authData the authData object being sent to the microfrontend
    */
-  updateAuthData = (iframeHandle: any, authData: any) => {
+  updateAuthData = (iframeHandle: IframeHandle, authData: object) => {
     if (iframeHandle && authData) {
       containerService.sendCustomMessageToIframe(iframeHandle, { authData }, LuigiInternalMessageID.AUTH_SET_TOKEN);
     } else {
@@ -71,15 +72,21 @@ export class ContainerAPIFunctions {
    * @param iframeHandle a reference to the iframe to be affected
    * @param data data to be sent alongside the custom message
    */
-  sendCustomMessage = (id: string, mainComponent: any, isWebcomponent: boolean, iframeHandle: any, data?: any) => {
-    if (isWebcomponent && (mainComponent as any)._luigi_mfe_webcomponent) {
-      containerService.dispatch(id, (mainComponent as any)._luigi_mfe_webcomponent, data);
+  sendCustomMessage = (
+    id: string,
+    mainComponent: ContainerElement,
+    isWebcomponent: boolean,
+    iframeHandle: IframeHandle,
+    data?: object
+  ) => {
+    if (isWebcomponent && mainComponent._luigi_mfe_webcomponent) {
+      containerService.dispatch(id, mainComponent._luigi_mfe_webcomponent, data);
     } else {
       const msg = { ...data };
-      if (msg.id) {
+      if (msg['id']) {
         console.warn('Property "id" is reserved and can not be used in custom message data');
       }
-      msg.id = id;
+      msg['id'] = id;
       containerService.sendCustomMessageToIframe(iframeHandle, msg);
     }
   };
@@ -90,7 +97,7 @@ export class ContainerAPIFunctions {
    * @param dismissKey the dismiss key being sent if any
    * @param iframeHandle the handle of the iframe to send the message to
    */
-  closeAlert(id: any, dismissKey: any, iframeHandle: any) {
+  closeAlert(id: string, dismissKey: string, iframeHandle: IframeHandle) {
     containerService.sendCustomMessageToIframe(iframeHandle, { id, dismissKey }, LuigiInternalMessageID.ALERT_CLOSED);
   }
 }

container/src/constants/container.model.ts

@@ -0,0 +1,58 @@
+export interface IframeHandle {
+  data?: string;
+  iframe: HTMLIFrameElement;
+}
+
+export interface ContainerElement extends HTMLElement {
+  iframeHandle?: IframeHandle;
+  [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+}
+
+export interface LayoutConfig {
+  column?: string;
+  row?: string;
+  slot?: string;
+}
+
+export interface RendererLayout {
+  columns?: string;
+  gap?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  minWidth?: number;
+  rows?: string;
+}
+
+export interface RendererConfig extends RendererLayout {
+  layouts?: RendererLayout[];
+}
+
+export interface RendererUseProps {
+  attachCompoundItem?: (compoundCnt, compoundItemCnt, renderer) => void;
+  createCompoundContainer?: (config, renderer) => HTMLDivElement;
+  createCompoundItemContainer?: (layoutConfig, config?, renderer?) => HTMLDivElement;
+  extends?: string;
+}
+
+export interface RendererObject {
+  config?: RendererConfig;
+  use?: RendererUseProps | string;
+}
+
+export interface WebComponentNode {
+  compound?: {
+    renderer?: RendererObject;
+    [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  };
+  webcomponent?: {
+    selfRegistered?: boolean;
+    tagName?: string;
+    [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  };
+  viewUrl?: string;
+}
+
+export interface WebComponentRenderer {
+  createCompoundContainer?: () => HTMLDivElement;
+  viewUrl?: string;
+}

container/src/constants/event-type.ts

@@ -1,13 +1,17 @@
-// TODO: Add and extend event to inclide custom typings/interface to make it easier to use on the listener parameter
-export interface ParamsEvent extends Event {}
+/**
+ * ParamsEvent interface is used to make the handling of listener parameter easier
+ */
+export interface ParamsEvent extends Event {
+  [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+}
 
 /**
  * PathExistsEvent interface is used to make it easier to use the linkManager().pathExists() promise based function
  * on the core application side.
  * It enforces the use of the callback function, since the latter is hardcoded to be 'callback'.
  * This allows to send back the boolean value if the path exists or not.
  * Example Usage:
- * addEventListener('my-event-id' event: PathExistsEvent => {
+ * addEventListener('my-event-id', event: PathExistsEvent => {
  *      event.callback(true);
  *   }
  * };

container/src/main.ts

@@ -1,3 +1,4 @@
+import type { ComponentType } from 'svelte';
 import LuigiContainer from './LuigiContainer.svelte';
 import LuigiCompoundContainer from './LuigiCompoundContainer.svelte';
 import { Events } from './constants/communication';
@@ -8,9 +9,9 @@ export type { PathExistsEvent } from './constants/event-type';
 export default Events;
 
 if (!customElements.get('luigi-container')) {
-  customElements.define('luigi-container', (LuigiContainer as any).element);
+  customElements.define('luigi-container', (LuigiContainer as ComponentType).element);
 }
 
 if (!customElements.get('luigi-compound-container')) {
-  customElements.define('luigi-compound-container', (LuigiCompoundContainer as any).element);
+  customElements.define('luigi-compound-container', (LuigiCompoundContainer as ComponentType).element);
 }