@lion/helpers - npm Package Compare versions

Comparing version 0.5.12 to 0.5.13

CHANGELOG.md

 # Change Log
 
+## 0.5.13
+
+### Patch Changes
+
+- 9da2aa20: Fix types for helpers
+
 ## 0.5.12
@@ -4,0 +10,0 @@

package.json

 {
   "name": "@lion/helpers",
-  "version": "0.5.12",
+  "version": "0.5.13",
   "description": "Helpers that are used throughout lion and can be used outside",
@@ -5,0 +5,0 @@ "license": "MIT",

renderLitAsNode/src/renderLitAsNode.js

 import { render } from '@lion/core';
 
+/**
+ * Helper to render a lit TemplateResult as an offline-created DOM node
+ * Make sure that the top-most element in the template has no siblings,
+ * as they won't be taken into account. We only return firstElementChild.
+ * @param {import('lit-html').TemplateResult} litHtmlTemplate
+ */
 export const renderLitAsNode = litHtmlTemplate => {
@@ -4,0 +10,0 @@ const offlineRenderContainer = document.createElement('div');

sb-action-logger/src/SbActionLogger.js

@@ -125,2 +125,3 @@ import { css, html, LitElement, render } from '@lion/core';
     this.title = 'Action Logger';
+    this.simple = false;
     this.__logCounter = 0;
@@ -130,3 +131,5 @@ }
   get loggerEl() {
-    return this.shadowRoot.querySelector('.logger');
+    return /** @type {HTMLElement} */ (
+      /** @type {ShadowRoot} */ (this.shadowRoot).querySelector('.logger')
+    );
   }
@@ -139,3 +142,3 @@
    *
-   * @param {} content Content to be logged to the action logger
+   * @param {string} content Content to be logged to the action logger
    */
@@ -153,3 +156,6 @@ log(content) {
       this.__appendLog(content);
-      this.loggerEl.scrollTo({ top: this.loggerEl.scrollHeight, behavior: 'smooth' });
+      this.loggerEl.scrollTo({
+        top: this.loggerEl.scrollHeight,
+        behavior: 'smooth',
+      });
     }
@@ -163,2 +169,3 @@
    *
+   * @param {string} content
    * @return {TemplateResult} TemplateResult that uses the content passed to create a log
@@ -191,12 +198,20 @@ */
 
+  /**
+   * @param {string} content
+   */
   __appendLog(content) {
     const offlineRenderContainer = document.createElement('div');
     render(this._logTemplate(content), offlineRenderContainer);
-    this.loggerEl.appendChild(offlineRenderContainer.firstElementChild);
+    if (offlineRenderContainer.firstElementChild) {
+      this.loggerEl.appendChild(offlineRenderContainer.firstElementChild);
+    }
   }
 
+  /**
+   * @param {string} content
+   */
   __isConsecutiveDuplicateLog(content) {
     if (
       this.loggerEl.lastElementChild &&
-      this.loggerEl.lastElementChild.querySelector('code').textContent.trim() === content
+      this.loggerEl.lastElementChild.querySelector('code')?.textContent?.trim() === content
     ) {
@@ -209,3 +224,3 @@ return true;
   __handleConsecutiveDuplicateLog() {
-    if (!this.loggerEl.lastElementChild.querySelector('.logger__log-count')) {
+    if (!this.loggerEl.lastElementChild?.querySelector('.logger__log-count')) {
       this.__prependLogCounterElement();
@@ -215,6 +230,11 @@ }
     // Increment log counter for these duplicate logs
-    const logCounter = this.loggerEl.lastElementChild.querySelector('.logger__log-count');
-    let incrementedLogCount = logCounter.textContent;
-    incrementedLogCount = parseInt(incrementedLogCount, 10) + 1;
-    logCounter.innerText = incrementedLogCount;
+
+    const logCounter = this.loggerEl.lastElementChild?.querySelector('.logger__log-count');
+    if (logCounter instanceof HTMLElement) {
+      const logCount = logCounter.textContent;
+      if (logCount != null) {
+        const incrementedLogCount = parseInt(logCount, 10) + 1;
+        logCounter.innerText = incrementedLogCount.toString();
+      }
+    }
   }
@@ -225,25 +245,30 @@
     countEl.classList.add('logger__log-count');
-    countEl.innerText = 1;
-    this.loggerEl.lastElementChild.insertBefore(
-      countEl,
-      this.loggerEl.lastElementChild.firstElementChild,
-    );
+    countEl.innerText = (1).toString();
+
+    const loggerLastElementChild = this.loggerEl.lastElementChild;
+    if (loggerLastElementChild) {
+      loggerLastElementChild.insertBefore(countEl, loggerLastElementChild.firstElementChild);
+    }
   }
 
   __animateCue() {
-    const cueEl = this.shadowRoot.querySelector('.header__log-cue-overlay');
-    cueEl.classList.remove('header__log-cue-overlay--slide');
-    // This triggers browser to stop batching changes because it has to evaluate something.
-    // eslint-disable-next-line no-void
-    void this.offsetWidth;
-    // So that when we arrive here, the browser sees this adding as an actual 'change'
-    // and this means the animation gets refired.
-    cueEl.classList.add('header__log-cue-overlay--slide');
+    const cueEl = this.shadowRoot?.querySelector('.header__log-cue-overlay');
+    if (cueEl) {
+      cueEl.classList.remove('header__log-cue-overlay--slide');
+      // This triggers browser to stop batching changes because it has to evaluate something.
+      // eslint-disable-next-line no-void
+      void this.offsetWidth;
+      // So that when we arrive here, the browser sees this adding as an actual 'change'
+      // and this means the animation gets refired.
+      cueEl.classList.add('header__log-cue-overlay--slide');
+    }
   }
 
   __clearLogs() {
-    const loggerEl = this.shadowRoot.querySelector('.logger');
-    loggerEl.innerHTML = '';
-    this.__logCounter = 0;
+    const loggerEl = this.shadowRoot?.querySelector('.logger');
+    if (loggerEl) {
+      loggerEl.innerHTML = '';
+      this.__logCounter = 0;
+    }
   }
 }

sb-action-logger/test/sb-action-logger.test.js

@@ -1,5 +0,9 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture as _fixture, html } from '@open-wc/testing';
 import '../../sb-action-logger.js';
 
-// Note: skips are left out of first iteration
+/**
+ * @typedef {import('../src/SbActionLogger').SbActionLogger} SbActionLogger
+ * @typedef {import('lit-html').TemplateResult} TemplateResult
+ */
+const fixture = /** @type {(arg: TemplateResult|string) => Promise<SbActionLogger>} */ (_fixture);
 
@@ -9,4 +13,5 @@ describe('sb-action-logger', () => {
     const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
+    const titleEl = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.header__title'));
 
-    expect(el.shadowRoot.querySelector('.header__title').innerText).to.equal('Action Logger');
+    expect(titleEl.innerText).to.equal('Action Logger');
   });
@@ -18,5 +23,4 @@
     `);
+    const titleEl = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.header__title'));
 
-    const titleEl = el.shadowRoot.querySelector('.header__title');
-
     expect(titleEl.innerText).to.equal('Logging your favorite fruit');
@@ -31,6 +35,6 @@ });
 
-      const loggerEl = el.shadowRoot.querySelector('.logger');
-
+      const loggerEl = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.logger'));
+      const loggerFirstEntryEl = /** @type {HTMLElement} */ (loggerEl.firstElementChild);
       expect(loggerEl.children.length).to.equal(1);
-      expect(loggerEl.firstElementChild.innerText).to.equal('Hello, World!');
+      expect(loggerFirstEntryEl.innerText).to.equal('Hello, World!');
     });
@@ -47,3 +51,3 @@
 
-      const loggerEl = el.shadowRoot.querySelector('.logger');
+      const loggerEl = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.logger'));
 
@@ -56,3 +60,5 @@ expect(loggerEl.children.length).to.equal(5);
 
-      const cueEl = el.shadowRoot.querySelector('.header__log-cue-overlay');
+      const cueEl = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector(
+        '.header__log-cue-overlay',
+      ));
       expect(cueEl.classList.contains('header__log-cue-overlay--slide')).to.be.false;
@@ -67,3 +73,5 @@
 
-      const cueEl = el.shadowRoot.querySelector('.header__log-cue-overlay');
+      const cueEl = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector(
+        '.header__log-cue-overlay',
+      ));
 
@@ -82,6 +90,6 @@ expect(cueEl.classList.contains('.header__log-cue-overlay--slide')).to.be.false;
 
-      const clearBtn = el.shadowRoot.querySelector('.header__clear');
+      const clearBtn = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.header__clear'));
       clearBtn.click();
 
-      expect(el.shadowRoot.querySelector('.logger').children.length).to.equal(0);
+      expect(el.shadowRoot?.querySelector('.logger')?.children.length).to.equal(0);
     });
@@ -100,10 +108,14 @@
 
-      const loggerEl = el.shadowRoot.querySelector('.logger');
+      const loggerEl = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.logger'));
 
-      const firstLog = loggerEl.firstElementChild;
-      const lastLog = loggerEl.lastElementChild;
+      const firstLogCount = /** @type {HTMLElement} */ (loggerEl.firstElementChild?.querySelector(
+        '.logger__log-count',
+      ));
+      const lastLogCount = /** @type {HTMLElement} */ (loggerEl.lastElementChild?.querySelector(
+        '.logger__log-count',
+      ));
 
       expect(loggerEl.children.length).to.equal(4);
-      expect(firstLog.querySelector('.logger__log-count').innerText).to.equal('3');
-      expect(lastLog.querySelector('.logger__log-count').innerText).to.equal('2');
+      expect(firstLogCount.innerText).to.equal('3');
+      expect(lastLogCount.innerText).to.equal('2');
     });
@@ -114,10 +126,12 @@
       el.log('Hello, World!');
-      const loggerEl = el.shadowRoot.querySelector('.logger');
+      const loggerEl = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.logger'));
+      const loggerCountEl = loggerEl.firstElementChild?.querySelector('.logger__log-count');
+      const codeEl = /** @type {HTMLElement} */ (loggerEl.firstElementChild?.querySelector('code'));
 
       expect(loggerEl.children.length).to.equal(1);
-      expect(loggerEl.firstElementChild.querySelector('code').innerText).to.equal('Hello, World!');
+      expect(codeEl.innerText).to.equal('Hello, World!');
 
       el.log('Hello, Earth!');
       expect(loggerEl.children.length).to.equal(1);
-      expect(loggerEl.firstElementChild.querySelector('code').innerText).to.equal('Hello, Earth!');
+      expect(codeEl.innerText).to.equal('Hello, Earth!');
 
@@ -127,4 +141,4 @@ el.log('Hello, Planet!');
       expect(loggerEl.children.length).to.equal(1);
-      expect(loggerEl.firstElementChild.querySelector('code').innerText).to.equal('Hello, Planet!');
-      expect(loggerEl.firstElementChild.querySelector('.logger__log-count')).to.be.null;
+      expect(codeEl.innerText).to.equal('Hello, Planet!');
+      expect(loggerCountEl).to.be.null;
     });
@@ -131,0 +145,0 @@ });

sb-locale-switcher/src/SbLocaleSwitcher.js

@@ -15,2 +15,5 @@ import { LitElement, html } from '@lion/core';
 
+  /**
+   * @param {string} locale
+   */
   // eslint-disable-next-line class-methods-use-this
@@ -17,0 +20,0 @@ callback(locale) {

sortEachDepth/src/sortEachDepth.js

@@ -15,6 +15,6 @@ /**
  *
- * @param {array} orderPerDepth array of arrays giving the order of each level
+ * @param {Array.<[]>} orderPerDepth array of arrays giving the order of each level
  */
 export function sortEachDepth(orderPerDepth) {
-  return (a, b) => {
+  return (/** @type {Array.<?>} */ a, /** @type {Array.<?>} */ b) => {
     // If the two stories have the same story kind, then use the default
@@ -32,2 +32,3 @@ // ordering, which is the order they are defined in the story file.
     let indexB;
+    /** @type {Array.<?>} */
     let ordering = orderPerDepth[0] || [];
@@ -34,0 +35,0 @@ if (ordering.indexOf('...') !== -1 && ordering.indexOf('...abc') !== -1) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34671

increased by15.39%

Number of package files

20

increased by42.86%

Lines of code

642

increased by26.13%

No dependency changes