selfregistered for compound

container/src/LuigiCompoundContainer.svelte

@@ -37,8 +37,10 @@
   import { ContainerService } from './services/container.service';
   import { WebComponentService } from './services/webcomponents.service';
   import { Events } from './constants/communication';
+  import { GenericHelperFunctions } from './utilities/helpers';
 
   export let viewurl: string;
+  export let webcomponent: any;
   export let context: string;
   export let deferInit: boolean;
   export let compoundConfig: any;
@@ -77,7 +79,8 @@
     const node = {
       compound: compoundConfig,
       viewUrl: viewurl,
-      webcomponent: true
+      webcomponent:
+        GenericHelperFunctions.checkWebcomponentValue(webcomponent) || true
     }; // TODO: fill with sth
     webcomponentService
       .renderWebComponentCompound(node, mainComponent, ctx)

container/src/LuigiContainer.svelte

@@ -65,11 +65,12 @@
   import { WebComponentService } from './services/webcomponents.service';
   import { ContainerAPI } from './api/container-api';
   import { Events } from './constants/communication';
+  import { GenericHelperFunctions } from './utilities/helpers';
 
   export let viewurl: string;
   export let context: string;
   export let label: string;
-  export let webcomponent: string;
+  export let webcomponent: any;
   export let deferInit: boolean;
   export let locale: string;
   export let theme: string;
@@ -134,21 +135,18 @@
 
       const ctx = context ? JSON.parse(context) : {};
       if (webcomponent) {
-        let webcomponentProperty = {};
-        if (webcomponent !== 'true') {
-          try {
-            webcomponentProperty = JSON.parse(webcomponent);
-          } catch (e) {
-            console.error(
-              'Webcomponent attribute has not a valid JSON structure.',
-              e
-            );
-          }
-        }
         mainComponent.innerHTML = '';
-        webcomponentService.renderWebComponent(viewurl, mainComponent, ctx, {
-          webcomponent: webcomponentProperty
-        });
+        const webComponentValue = GenericHelperFunctions.checkWebcomponentValue(
+          webcomponent
+        );
+        webcomponentService.renderWebComponent(
+          viewurl,
+          mainComponent,
+          ctx,
+          typeof webComponentValue === 'object'
+            ? { webcomponent: webComponentValue }
+            : {}
+        );
       }
       if (skipInitCheck) {
         thisComponent.initialized = true;

container/src/utilities/helpers.ts

@@ -7,9 +7,22 @@ export class GenericHelpersClass {
    * @param {any} functionToCheck function to check
    * @returns {boolean}
    */
-  isFunction (functionToCheck: any): boolean {
+  isFunction(functionToCheck: any): boolean {
     return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
   }
+
+  /**
+   * Checks weather webcomponent is an attribute or property. In case of attribute it returns the parsed value.
+   * @param webcomponent 
+   * @returns returns the correct webcomponent value.
+   */
+  checkWebcomponentValue(webcomponent: any): object | boolean {
+    if (typeof webcomponent === 'string') {
+      return JSON.parse(webcomponent);
+    } else if (typeof webcomponent === 'boolean' || typeof webcomponent === 'object') {
+      return webcomponent;
+    }
+  }
 }
 
 export const GenericHelperFunctions = new GenericHelpersClass();

container/typings/LuigiCompoundContainer.svelte.d.ts

@@ -1,6 +1,13 @@
 export declare interface UserSettings {
   [key: string]: number | string | boolean;
 }
+
+export declare interface WebComponentSettings {
+  id?: any;
+  type?: string;
+  selfRegistered?: boolean;
+  tagName?: string;
+}
 export default class LuigiCompoundContainer extends HTMLElement {
   compoundConfig: any;
 
@@ -33,4 +40,14 @@ export default class LuigiCompoundContainer extends HTMLElement {
    * The anchor value to be passed to the web-component-based micro frontend.
    */
   anchor: string;
+
+  /**
+   * The following properties can be set for the webcomponent object. By default the webcomponent is set to true.
+   * @param {Object} [WebComponentSettings]
+   * @param {any} WebComponentSettings.id: unique id of the web component
+   * @param {string} WebComponentSettings.type: string, like module.
+   * @param {boolean} WebComponentSettings.selfRegistered: if it is true, the web component bundle will be added via script tag.
+   * @param {string} WebComponentSettings.tagName: tag name where web component is added to DOM.
+   */
+  webcomponent: boolean | WebComponentSettings;
 }