Feature wc support (SAP#1751)

.vscode/launch.json

@@ -0,0 +1,31 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+    {
+      "name": "test core",
+      "request": "launch",
+      "runtimeArgs": [
+        "run-script",
+        "test"
+      ],
+      "cwd": "${workspaceFolder}/core",
+      "runtimeExecutable": "npm",
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
+      "type": "node"
+    },{
+      "name": "test core -watch",
+      "request": "launch",
+      "runtimeArgs": [
+        "run-script",
+        "test:watch"
+      ],
+      "cwd": "${workspaceFolder}/core",
+      "runtimeExecutable": "npm",
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
+      "type": "node"
+    }]
+}

client/src/luigi-client.js

@@ -84,10 +84,8 @@ class LuigiClient {
   /**
    * @private
    */
-  storageManager(){
+  storageManager() {
     return storageManager;
   }
-
-
 }
 export default LuigiClient = new LuigiClient();

client/src/luigi-element.js

@@ -2,45 +2,141 @@
  * Base class for Luigi web component micro frontends.
  */
 export class LuigiElement extends HTMLElement {
-    constructor() {
-        super();        
-        const template = document.createElement('template');
-        template.innerHTML = this.render ? this.render() : '';
-        this._shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: false });
-        this._shadowRoot.appendChild(template.content.cloneNode(true));
-    }
+  constructor() {
+    super();
+    this._shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: false
+    });
+    this.__initialized = false;
+  }
 
-    /**
-     * Query selector operating on shadow root.
-     *
-     * @see ParentNode.querySelector 
-     */
-    querySelector(selector) {
-        return this._shadowRoot.querySelector(selector);
-    }
+  /**
+   * Invoked by luigi core if present, internal, don't override.
+   * @private
+   */
+  __postProcess(ctx, luigiClient, module_location_path) {
+    this.luigiClient = luigiClient;
+    this.context = ctx;
+    const template = document.createElement('template');
+    template.innerHTML = this.render(ctx);
+    const attCnt = () => {
+      this._shadowRoot.appendChild(template.content.cloneNode(true));
+      Reflect.ownKeys(Reflect.getPrototypeOf(this)).forEach(el => {
+        if (el.startsWith('$_')) {
+          this._shadowRoot[el] = this[el].bind(this);
+        }
+      });
+      const elementsWithIds = this._shadowRoot.querySelectorAll('[id]');
+      if (elementsWithIds) {
+        elementsWithIds.forEach(el => {
+          this['$' + el.getAttribute('id')] = el;
+        });
+      }
+      this.afterInit(ctx);
+      this.__initialized = true;
+    };
+    if (
+      this.luigiConfig &&
+      this.luigiConfig.styleSources &&
+      this.luigiConfig.styleSources.length > 0
+    ) {
+      let nr_styles = this.luigiConfig.styleSources.length;
+      const loadStylesSync = this.luigiConfig.loadStylesSync;
+      const afterLoadOrError = () => {
+        nr_styles--;
+        if (nr_styles < 1) {
+          attCnt();
+        }
+      };
 
-    /**
-     * Handles changes on the context property.
-     *
-     * @private
-     */
-    set context(ctx) {
-        if(this.onContextUpdate) {
-            this.onContextUpdate(ctx);
+      this.luigiConfig.styleSources.forEach((element, index) => {
+        const link = document.createElement('link');
+        link.setAttribute('rel', 'stylesheet');
+        link.setAttribute('href', module_location_path + element);
+        if (loadStylesSync) {
+          link.addEventListener('load', afterLoadOrError);
+          link.addEventListener('error', afterLoadOrError);
         }
-        this.attributeChangedCallback();
+        this._shadowRoot.appendChild(link);
+      });
+      if (!loadStylesSync) {
+        attCnt();
+      }
+    } else {
+      attCnt();
     }
+  }
 
-    /**
-     * Handles changes on attributes.
-     *
-     * @private
-     */
-    attributeChangedCallback(name, oldVal, newVal) {
-        if (this.update) {
-            this.update();
-        }
+  /**
+   * Override to execute logic after initialization of the web component, i.e.
+   * after internal rendering and all context data set.
+   *
+   * @param {*} ctx The context object passed by luigi core
+   */
+  afterInit(ctx) {
+    return;
+  }
+
+  /**
+   * Override to return the html template string defining the web component view.
+   *
+   * @param {*} ctx The context object passed by luigi core
+   */
+  render(ctx) {
+    return '';
+  }
+
+  /**
+   * Override to execute logic after an attribute of this web component has changed.
+   */
+  update() {
+    return;
+  }
+
+  /**
+   * Override to execute logic when a new context object is set.
+   *
+   * @param {*} ctx The new context object passed by luigi core
+   */
+  onContextUpdate(ctx) {
+    return;
+  }
+
+  /**
+   * Query selector operating on shadow root.
+   *
+   * @see ParentNode.querySelector
+   */
+  querySelector(selector) {
+    return this._shadowRoot.querySelector(selector);
+  }
+
+  /**
+   * Handles changes on the context property.
+   *
+   * @private
+   */
+  set context(ctx) {
+    this.__lui_ctx = ctx;
+    if (this.__initialized) {
+      this.onContextUpdate(ctx);
+      this.attributeChangedCallback();
     }
+  }
+
+  get context() {
+    return this.__lui_ctx;
+  }
+
+  /**
+   * Handles changes on attributes.
+   *
+   * @private
+   */
+  attributeChangedCallback(name, oldVal, newVal) {
+    this.update();
+  }
 }
 
 /**
@@ -50,6 +146,17 @@ export class LuigiElement extends HTMLElement {
  * @param {String} literal The literal to process.
  * @returns {String} Returns the processed literal.
  */
-export function html(literal) {
-    return literal;
+export function html(literal, ...keys) {
+  let html = '';
+  literal.forEach((el, index) => {
+    html += el;
+    if (
+      index < keys.length &&
+      keys[index] !== undefined &&
+      keys[index] !== null
+    ) {
+      html += keys[index];
+    }
+  });
+  return html.replace(/\$\_/gi, 'this.getRootNode().$_');
 }

core/package.json

@@ -21,6 +21,7 @@
     "copy-webpack-plugin": "^5.1.1",
     "core-js": "^3.2.1",
     "css-loader": "^3.0.0",
+    "esm": "^3.2.25",
     "file-loader": "^2.0.0",
     "fs-extra": "9.0.0",
     "fundamental-styles": "^0.11.0",
@@ -61,7 +62,7 @@
     "bundle-develop": "npm run bundle-develop-evergreen",
     "bundle-develop-evergreen": "npm run bundle-evergreen -- -d --watch",
     "bundle-develop-ie11": "MINIFY=false webpack --display-error-details --config webpack-ie11.config.js --debug --devtool cheap-source-map --output-pathinfo --watch",
-    "test": "babel-node ./node_modules/nyc/bin/nyc.js mocha -- --recursive test",
+    "test": "babel-node ./node_modules/nyc/bin/nyc.js mocha -- --require esm --recursive test",
     "test:watch": "npm run test -- --watch",
     "bundlesize": "npm run bundle && bundlesize",
     "bundlesizeOnly": "bundlesize",
@@ -81,7 +82,7 @@
     },
     {
       "path": "./public-ie11/luigi-ie11.js",
-      "maxSize": "590 kB",
+      "maxSize": "600 kB",
       "compression": "none"
     },
     {

core/src/App.html

@@ -9,6 +9,7 @@
     nodepath="{mfModal.nodepath}"
     on:close="{closeModal}"
     on:iframeCreated="{modalIframeCreated}"
+    on:wcCreated="{modalWCCreated}"
   ></Modal>
   {/if}
   {#if mfDrawer.displayed && mfDrawer.settings.isDrawer}
@@ -45,6 +46,7 @@
       nodepath="{mfSplitView.nodepath}"
       on:iframeCreated="{splitViewIframeCreated}"
       on:statusChanged="{splitViewStatusChanged}"
+      on:wcCreated="{splitViewWCCreated}"
       disableBackdrop="{disableBackdrop}"
     ></SplitView>
     {/if}
@@ -160,6 +162,8 @@
   /// MFs
   let modalIframe;
   let modalIframeData;
+  let modalWC;
+  let modalWCData;
   let modal;
   let activeDrawer = false;
   let disableBackdrop;
@@ -168,6 +172,8 @@
   let drawer;
   let splitViewIframe;
   let splitViewIframeData;
+  let splitViewWC;
+  let splitViewWCData;
   let splitView;
   let context;
   let nodeParams;
@@ -348,6 +354,7 @@
           mfSplitView,
           splitViewValues,
           splitViewIframe,
+          splitViewWC,
           showLoadingIndicator,
           tabNav,
           isNavigateBack,
@@ -390,6 +397,8 @@
               splitViewValues = obj.splitViewValues;
             } else if (prop === 'splitViewIframe') {
               splitViewIframe = obj.splitViewIframe;
+            } else if (prop == 'splitViewWC') {
+              splitViewWC = obj.splitViewWC;
             } else if (prop === 'showLoadingIndicator') {
               showLoadingIndicator = obj.showLoadingIndicator;
             } else if (prop === 'tabNav') {
@@ -706,6 +715,12 @@
     }
   };
 
+  const splitViewWCCreated = event => {
+    splitViewWC = event.detail.splitViewWC;
+    splitViewWCData = event.detail.splitViewWCData;
+    $: mfSplitView.collapsed = event.detail.collapsed;
+  };
+
   /// RESIZING
 
   let hideNav;
@@ -906,11 +921,18 @@
     modalIframeData = event.detail.modalIframeData;
   };
 
+  const modalWCCreated = event => {
+    modalWC = event.detail.modalWC;
+    modalWCData = event.detail.modalWCData;
+  };
+
   const closeModal = event => {
     if (modalIframe) {
       getUnsavedChangesModalPromise(modalIframe.contentWindow).then(() => {
         resetMicrofrontendModalData();
       });
+    } else if (modalWC) {
+      resetMicrofrontendModalData();
     }
   };
 
@@ -1305,7 +1327,13 @@
       if ('storage' === e.data.msg) {
         let getValidMessageSource = IframeHelpers.getValidMessageSource(e);
         let microfrontendId = getValidMessageSource.luigi.id;
-        StorageHelper.process(microfrontendId, e.origin, e.data.data.id, e.data.data.operation, e.data.data.params);
+        StorageHelper.process(
+          microfrontendId,
+          e.origin,
+          e.data.data.id,
+          e.data.data.operation,
+          e.data.data.params
+        );
       }
     });