perf: add logic for including nesting spacer spans #226

AlaskaAirlines · Nov 5, 2024 · 7a6d4bd · 7a6d4bd
1 parent ca17029
commit 7a6d4bd
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 60 deletions.
diff --git a/apiExamples/matchWord.html b/apiExamples/matchWord.html
@@ -4,13 +4,33 @@
 <br />
 <auro-menu id="matchWordMenu">
   <auro-menuoption value="stops">Stops</auro-menuoption>
-  <auro-menuoption value="price">Price</auro-menuoption>
-  <auro-menuoption value="duration">Duration</auro-menuoption>
-  <auro-menuoption value="departure">Departure</auro-menuoption>
-  <auro-menu>
-    <auro-menuoption value="apples">Apples</auro-menuoption>
-    <auro-menuoption value="oranges">Oranges</auro-menuoption>
-    <auro-menuoption value="peaches">Peaches</auro-menuoption>
-  </auro-menu>
-  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <hr>
+    <auro-menu id="beta">
+      <auro-menuoption value="apples">Apples</auro-menuoption>
+      <auro-menuoption value="oranges">Oranges</auro-menuoption>
+      <auro-menuoption value="pears">Pears</auro-menuoption>
+      <auro-menuoption value="grapes">Grapes</auro-menuoption>
+      <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
+      <hr>
+      <auro-menu id="charlie">
+        <auro-menuoption value="person">Person</auro-menuoption>
+        <auro-menuoption value="woman">Woman</auro-menuoption>
+        <auro-menuoption value="man">Man</auro-menuoption>
+        <auro-menuoption value="camera">Camera</auro-menuoption>
+        <auro-menuoption value="tv">TV</auro-menuoption>
+      </auro-menu>
+    </auro-menu>
+    <hr>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+    <hr>
+    <auro-menu id="delta">
+      <auro-menuoption value="cars">Cars</auro-menuoption>
+      <auro-menuoption value="trucks">Trucks</auro-menuoption>
+      <auro-menuoption value="boats">Boats</auro-menuoption>
+      <auro-menuoption value="planes">Planes</auro-menuoption>
+      <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
+    </auro-menu>
 </auro-menu>
diff --git a/demo/api.md b/demo/api.md
@@ -222,15 +222,35 @@ The `auro-menu` component supports the use of the `matchWord` attribute to highl
   <br />
   <auro-menu id="matchWordMenu">
     <auro-menuoption value="stops">Stops</auro-menuoption>
-    <auro-menuoption value="price">Price</auro-menuoption>
-    <auro-menuoption value="duration">Duration</auro-menuoption>
-    <auro-menuoption value="departure">Departure</auro-menuoption>
-    <auro-menu>
-      <auro-menuoption value="apples">Apples</auro-menuoption>
-      <auro-menuoption value="oranges">Oranges</auro-menuoption>
-      <auro-menuoption value="peaches">Peaches</auro-menuoption>
-    </auro-menu>
-    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <hr>
+      <auro-menu id="beta">
+        <auro-menuoption value="apples">Apples</auro-menuoption>
+        <auro-menuoption value="oranges">Oranges</auro-menuoption>
+        <auro-menuoption value="pears">Pears</auro-menuoption>
+        <auro-menuoption value="grapes">Grapes</auro-menuoption>
+        <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
+        <hr>
+        <auro-menu id="charlie">
+          <auro-menuoption value="person">Person</auro-menuoption>
+          <auro-menuoption value="woman">Woman</auro-menuoption>
+          <auro-menuoption value="man">Man</auro-menuoption>
+          <auro-menuoption value="camera">Camera</auro-menuoption>
+          <auro-menuoption value="tv">TV</auro-menuoption>
+        </auro-menu>
+      </auro-menu>
+      <hr>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <hr>
+      <auro-menu id="delta">
+        <auro-menuoption value="cars">Cars</auro-menuoption>
+        <auro-menuoption value="trucks">Trucks</auro-menuoption>
+        <auro-menuoption value="boats">Boats</auro-menuoption>
+        <auro-menuoption value="planes">Planes</auro-menuoption>
+        <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
+      </auro-menu>
   </auro-menu>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -263,15 +283,35 @@ export function auroMenuMatchWordExample() {
 <br />
 <auro-menu id="matchWordMenu">
   <auro-menuoption value="stops">Stops</auro-menuoption>
-  <auro-menuoption value="price">Price</auro-menuoption>
-  <auro-menuoption value="duration">Duration</auro-menuoption>
-  <auro-menuoption value="departure">Departure</auro-menuoption>
-  <auro-menu>
-    <auro-menuoption value="apples">Apples</auro-menuoption>
-    <auro-menuoption value="oranges">Oranges</auro-menuoption>
-    <auro-menuoption value="peaches">Peaches</auro-menuoption>
-  </auro-menu>
-  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <hr>
+    <auro-menu id="beta">
+      <auro-menuoption value="apples">Apples</auro-menuoption>
+      <auro-menuoption value="oranges">Oranges</auro-menuoption>
+      <auro-menuoption value="pears">Pears</auro-menuoption>
+      <auro-menuoption value="grapes">Grapes</auro-menuoption>
+      <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
+      <hr>
+      <auro-menu id="charlie">
+        <auro-menuoption value="person">Person</auro-menuoption>
+        <auro-menuoption value="woman">Woman</auro-menuoption>
+        <auro-menuoption value="man">Man</auro-menuoption>
+        <auro-menuoption value="camera">Camera</auro-menuoption>
+        <auro-menuoption value="tv">TV</auro-menuoption>
+      </auro-menu>
+    </auro-menu>
+    <hr>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+    <hr>
+    <auro-menu id="delta">
+      <auro-menuoption value="cars">Cars</auro-menuoption>
+      <auro-menuoption value="trucks">Trucks</auro-menuoption>
+      <auro-menuoption value="boats">Boats</auro-menuoption>
+      <auro-menuoption value="planes">Planes</auro-menuoption>
+      <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
+    </auro-menu>
 </auro-menu>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

diff --git a/demo/api.min.js b/demo/api.min.js
@@ -223,6 +223,11 @@ class AuroMenu extends LitElement {
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
+
+    /**
+     * @private
+     */
+    this.nestingSpacer = '<span class="nestingSpacer"></span>';
   }
 
   static get properties() {
@@ -323,20 +328,22 @@ class AuroMenu extends LitElement {
    * @returns {void} When called will update the DOM with visible suggest text matches.
    */
   markOptions() {
-    if (this.items && this.items.length > 0) {
+    if (this.items && this.items.length > 0 && (this.matchWord && this.matchWord.length > 0)) {
 
-      if (this.matchWord && this.matchWord.length > 0) {
+      // Escape special regex characters
+      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
 
-        // Global case-insensitive matching
-        const regex = new RegExp(this.matchWord, 'giu');
+      // Global, case-insensitive, unicode matching regex pattern
+      const regexWord = new RegExp(escapedWord, 'giu');
 
-        this.items.forEach((item) => {
-          if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
-            item.innerHTML = item.textContent.replace(regex, (match) => `<strong>${match}</strong>`);
-          }
-        });
+      this.items.forEach((item) => {
+        if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
+          const nested = item.querySelectorAll('.nestingSpacer');
+          const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
 
-      }
+          item.innerHTML = nestingSpacerBundle + item.textContent.replace(regexWord, (match) => `<strong>${match}</strong>`);
+        }
+      });
     }
   }
 
@@ -548,7 +555,7 @@ class AuroMenu extends LitElement {
       const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption');
 
       options.forEach((option) => {
-        option.innerHTML = `<span class="nestingSpacer"></span> ${option.innerHTML}`;
+        option.innerHTML = this.nestingSpacer + option.innerHTML;
       });
 
       this.handleNestedMenus(nestedMenu);

diff --git a/demo/index.min.js b/demo/index.min.js
@@ -189,6 +189,11 @@ class AuroMenu extends LitElement {
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
+
+    /**
+     * @private
+     */
+    this.nestingSpacer = '<span class="nestingSpacer"></span>';
   }
 
   static get properties() {
@@ -289,20 +294,22 @@ class AuroMenu extends LitElement {
    * @returns {void} When called will update the DOM with visible suggest text matches.
    */
   markOptions() {
-    if (this.items && this.items.length > 0) {
+    if (this.items && this.items.length > 0 && (this.matchWord && this.matchWord.length > 0)) {
 
-      if (this.matchWord && this.matchWord.length > 0) {
+      // Escape special regex characters
+      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
 
-        // Global case-insensitive matching
-        const regex = new RegExp(this.matchWord, 'giu');
+      // Global, case-insensitive, unicode matching regex pattern
+      const regexWord = new RegExp(escapedWord, 'giu');
 
-        this.items.forEach((item) => {
-          if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
-            item.innerHTML = item.textContent.replace(regex, (match) => `<strong>${match}</strong>`);
-          }
-        });
+      this.items.forEach((item) => {
+        if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
+          const nested = item.querySelectorAll('.nestingSpacer');
+          const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
 
-      }
+          item.innerHTML = nestingSpacerBundle + item.textContent.replace(regexWord, (match) => `<strong>${match}</strong>`);
+        }
+      });
     }
   }
 
@@ -514,7 +521,7 @@ class AuroMenu extends LitElement {
       const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption');
 
       options.forEach((option) => {
-        option.innerHTML = `<span class="nestingSpacer"></span> ${option.innerHTML}`;
+        option.innerHTML = this.nestingSpacer + option.innerHTML;
       });
 
       this.handleNestedMenus(nestedMenu);

diff --git a/src/auro-menu.js b/src/auro-menu.js
@@ -56,6 +56,11 @@ export class AuroMenu extends LitElement {
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
+
+    /**
+     * @private
+     */
+    this.nestingSpacer = '<span class="nestingSpacer"></span>';
   }
 
   static get properties() {
@@ -156,20 +161,22 @@ export class AuroMenu extends LitElement {
    * @returns {void} When called will update the DOM with visible suggest text matches.
    */
   markOptions() {
-    if (this.items && this.items.length > 0) {
+    if (this.items && this.items.length > 0 && (this.matchWord && this.matchWord.length > 0)) {
 
-      if (this.matchWord && this.matchWord.length > 0) {
+      // Escape special regex characters
+      const escapedWord = this.matchWord.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
 
-        // Global, case-insensitive, unicode matching
-        const regex = new RegExp(this.matchWord, 'giu');
+      // Global, case-insensitive, unicode matching regex pattern
+      const regexWord = new RegExp(escapedWord, 'giu');
 
-        this.items.forEach((item) => {
-          if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
-            item.innerHTML = item.textContent.replace(regex, (match) => `<strong>${match}</strong>`);
-          }
-        });
+      this.items.forEach((item) => {
+        if (this.optionInteractive(item) && !item.hasAttribute('persistent')) {
+          const nested = item.querySelectorAll('.nestingSpacer');
+          const nestingSpacerBundle = [...nested].map(() => this.nestingSpacer).join('');
 
-      }
+          item.innerHTML = nestingSpacerBundle + item.textContent.replace(regexWord, (match) => `<strong>${match}</strong>`);
+        }
+      });
     }
   }
 
@@ -383,7 +390,7 @@ export class AuroMenu extends LitElement {
       const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption');
 
       options.forEach((option) => {
-        option.innerHTML = `<span class="nestingSpacer"></span> ${option.innerHTML}`;
+        option.innerHTML = this.nestingSpacer + option.innerHTML;
       });
 
       this.handleNestedMenus(nestedMenu);