@luigi-project/client 2.28.1-dev.202603190049 → 2.28.1-dev.202603191108

package/luigi-element.js

@@ -1 +1,158 @@
-export class LuigiElement extends HTMLElement{constructor(t){super();const e=!!t&&t.openShadow;this._shadowRoot=this.attachShadow({mode:e?"open":"closed",delegatesFocus:!1}),this.__initialized=!1,this.deferLuigiClientWCInit=!!t&&t.deferLuigiClientWCInit}__postProcess(t,e,i){this.LuigiClient=e,this.context=t;const o=document.createElement("template");o.innerHTML=this.render(t);const s=()=>{if(!this.__initialized){this._shadowRoot.appendChild(o.content.cloneNode(!0)),Reflect.ownKeys(Reflect.getPrototypeOf(this)).forEach(t=>{t.startsWith("$_")&&(this._shadowRoot[t]=this[t].bind(this))});const e=this._shadowRoot.querySelectorAll("[id]");e&&e.forEach(t=>{this["$"+t.getAttribute("id")]=t}),this.afterInit(t),this.__initialized=!0}};if(this.luigiConfig&&this.luigiConfig.styleSources&&this.luigiConfig.styleSources.length>0){let t=this.luigiConfig.styleSources.length;const e=this.luigiConfig.loadStylesSync,o=()=>{t--,t<1&&s()};this.luigiConfig.styleSources.forEach((t,s)=>{const n=document.createElement("link");n.setAttribute("rel","stylesheet"),n.setAttribute("href",i+t),e&&(n.addEventListener("load",o),n.addEventListener("error",o)),this._shadowRoot.appendChild(n)}),e||s()}else s()}afterInit(t){}render(t){return""}update(){}onContextUpdate(t){}querySelector(t){return this._shadowRoot.querySelector(t)}set context(t){this.__lui_ctx=t,this.__initialized&&(this.onContextUpdate(t),this.attributeChangedCallback())}get context(){return this.__lui_ctx}attributeChangedCallback(t,e,i){this.update()}}export function html(t,...e){let i="";return t.forEach((t,o)=>{i+=t,o<e.length&&void 0!==e[o]&&null!==e[o]&&(i+=e[o])}),i.replace(/\$\_/gi,"this.getRootNode().$_")}
+/**
+ * @module luigi-element
+ */
+
+/**
+ * Base class for Luigi web component micro frontends.
+ * @augments HTMLElement
+ * @class
+ */
+export class LuigiElement extends HTMLElement {
+  constructor(options) {
+    super();
+    const openShadow = options ? options.openShadow : false;
+    this._shadowRoot = this.attachShadow({
+      mode: openShadow ? 'open' : 'closed',
+      delegatesFocus: false
+    });
+    this.__initialized = false;
+    this.deferLuigiClientWCInit = options ? options.deferLuigiClientWCInit : false;
+  }
+
+  /**
+   * 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 = () => {
+      if (!this.__initialized) {
+        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();
+        }
+      };
+
+      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._shadowRoot.appendChild(link);
+      });
+      if (!loadStylesSync) {
+        attCnt();
+      }
+    } else {
+      attCnt();
+    }
+  }
+
+  /**
+   * Override to execute logic after initialization of the web component, i.e.
+   * after internal rendering and all context data set.
+   * @param {any} ctx - the context object passed by luigi core
+   */
+  afterInit(ctx) {
+    return;
+  }
+
+  /**
+   * Override to return the html template string defining the web component view.
+   * @param {any} 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 {any} 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();
+  }
+}
+
+/**
+ * Html string processing according to luigi functionality.
+ * Also useful in combination with LitElement VS Code plugins.
+ * @param {string} literal - the literal to process
+ * @param {unknown[]} keys - the array of keys to process
+ * @returns {string} the processed 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().$_');
+}

package/package.json

@@ -2,7 +2,27 @@
   "name": "@luigi-project/client",
   "description": "Javascript library supporting consumers of the Luigi framework",
   "license": "Apache-2.0",
-  "main": "luigi-client.js",
+  "main": "./luigi-client.js",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./esm/luigi-client.d.mts",
+        "require": "./luigi-client.d.ts"
+      },
+      "import": "./esm/luigi-client.mjs",
+      "require": "./luigi-client.js"
+    },
+    "./luigi-client": {
+      "types": {
+        "import": "./esm/luigi-client.d.mts",
+        "require": "./luigi-client.d.ts"
+      },
+      "import": "./esm/luigi-client.mjs",
+      "require": "./luigi-client.js"
+    },
+    "./luigi-element": "./luigi-element.js",
+    "./*": "./*"
+  },
   "repository": {
     "type": "git",
     "url": "ssh://github.com/luigi-project/luigi.git"
@@ -17,5 +37,5 @@
     "micro-frontends",
     "microfrontends"
   ],
-  "version": "2.28.1-dev.202603190049"
+  "version": "2.28.1-dev.202603191108"
 }