chore: lower build size by passing appendToParent to createDomElement…

… fn (#970) * chore: lower build size by passing appendToParent to createDomElement fn - by adding a 3rd argument `parentAppendTo` when using `createDomElement()`, we can remove the need for temp variable in a few components and rely on the method to append the newly created element to a certain parent node. By doing this, we can remove a few temp variables and lower the size of our build
ghiscoding · May 12, 2023 · 9175503 · 9175503
1 parent 9389df2
commit 9175503
Show file tree

Hide file tree

Showing 44 changed files with 217 additions and 246 deletions.
diff --git a/packages/common/src/editors/__tests__/checkboxEditor.spec.ts b/packages/common/src/editors/__tests__/checkboxEditor.spec.ts
@@ -97,7 +97,7 @@ describe('CheckboxEditor', () => {
       editor = new CheckboxEditor(editorArguments);
       const editorElm = divContainer.querySelector('input.editor-checkbox') as HTMLInputElement;
 
-      expect(editorElm.getAttribute('aria-label')).toBe('Is Active Checkbox Editor');
+      expect(editorElm.ariaLabel).toBe('Is Active Checkbox Editor');
     });
 
     it('should initialize the editor even when user define his own editor options', () => {

diff --git a/packages/common/src/editors/__tests__/dualInputEditor.spec.ts b/packages/common/src/editors/__tests__/dualInputEditor.spec.ts
@@ -115,7 +115,7 @@ describe('DualInputEditor', () => {
       editor = new DualInputEditor(editorArguments);
       const editorElm = divContainer.querySelector('input.dual-editor-text.editor-range.left') as HTMLInputElement;
 
-      expect(editorElm.getAttribute('aria-label')).toBe('Range Input Editor');
+      expect(editorElm.ariaLabel).toBe('Range Input Editor');
     });
 
     it('should have a placeholder on the left input when defined in its column definition', () => {

diff --git a/packages/common/src/editors/__tests__/floatEditor.spec.ts b/packages/common/src/editors/__tests__/floatEditor.spec.ts
@@ -103,7 +103,7 @@ describe('FloatEditor', () => {
       editor = new FloatEditor(editorArguments);
       const editorElm = divContainer.querySelector('input.editor-text.editor-price') as HTMLInputElement;
 
-      expect(editorElm.getAttribute('aria-label')).toBe('Price Number Editor');
+      expect(editorElm.ariaLabel).toBe('Price Number Editor');
     });
 
     it('should initialize the editor and focus on the element after a small delay', () => {

diff --git a/packages/common/src/editors/__tests__/inputEditor.spec.ts b/packages/common/src/editors/__tests__/inputEditor.spec.ts
@@ -103,7 +103,7 @@ describe('InputEditor (TextEditor)', () => {
       editor = new InputEditor(editorArguments, 'text');
       const editorElm = divContainer.querySelector('input.editor-text.editor-title') as HTMLInputElement;
 
-      expect(editorElm.getAttribute('aria-label')).toBe('Title Input Editor');
+      expect(editorElm.ariaLabel).toBe('Title Input Editor');
     });
 
     it('should initialize the editor and focus on the element after a small delay', () => {

diff --git a/packages/common/src/editors/__tests__/inputPasswordEditor.spec.ts b/packages/common/src/editors/__tests__/inputPasswordEditor.spec.ts
@@ -103,7 +103,7 @@ describe('InputPasswordEditor', () => {
       editor = new InputPasswordEditor(editorArguments);
       const editorElm = divContainer.querySelector('input.editor-text.editor-title') as HTMLInputElement;
 
-      expect(editorElm.getAttribute('aria-label')).toBe('Title Input Editor');
+      expect(editorElm.ariaLabel).toBe('Title Input Editor');
     });
 
     it('should initialize the editor and focus on the element after a small delay', () => {

diff --git a/packages/common/src/editors/__tests__/integerEditor.spec.ts b/packages/common/src/editors/__tests__/integerEditor.spec.ts
@@ -103,7 +103,7 @@ describe('IntegerEditor', () => {
       editor = new IntegerEditor(editorArguments);
       const editorElm = divContainer.querySelector('input.editor-text.editor-price') as HTMLInputElement;
 
-      expect(editorElm.getAttribute('aria-label')).toBe('Price Slider Editor');
+      expect(editorElm.ariaLabel).toBe('Price Slider Editor');
     });
 
     it('should initialize the editor and focus on the element after a small delay', () => {

diff --git a/packages/common/src/editors/__tests__/longTextEditor.spec.ts b/packages/common/src/editors/__tests__/longTextEditor.spec.ts
@@ -134,7 +134,7 @@ describe('LongTextEditor', () => {
       editor = new LongTextEditor(editorArguments);
       const editorElm = document.body.querySelector('.slick-large-editor-text.editor-title textarea') as HTMLTextAreaElement;
 
-      expect(editorElm.getAttribute('aria-label')).toBe('Title Text Editor');
+      expect(editorElm.ariaLabel).toBe('Title Text Editor');
     });
 
     it('should initialize the editor with default constant text when translate service is not provided', () => {

diff --git a/packages/common/src/editors/autocompleterEditor.ts b/packages/common/src/editors/autocompleterEditor.ts
@@ -500,9 +500,7 @@ export class AutocompleterEditor<T extends AutocompleteItem = any> implements Ed
 
   protected renderRegularItem(item: T) {
     const itemLabel = (typeof item === 'string' ? item : item?.label ?? '') as string;
-    return createDomElement('div', {
-      textContent: itemLabel || ''
-    });
+    return createDomElement('div', { textContent: itemLabel || '' });
   }
 
   protected renderCustomItem(item: T) {
@@ -512,10 +510,7 @@ export class AutocompleterEditor<T extends AutocompleteItem = any> implements Ed
     // for the remaining allowed tags we'll permit all attributes
     const sanitizedTemplateText = sanitizeTextByAvailableSanitizer(this.gridOptions, templateString) || '';
 
-    return createDomElement('div', {
-      // dataset: { item },
-      innerHTML: sanitizedTemplateText
-    });
+    return createDomElement('div', { innerHTML: sanitizedTemplateText });
   }
 
   protected renderCollectionItem(item: any) { // CollectionCustomStructure
@@ -542,17 +537,19 @@ export class AutocompleterEditor<T extends AutocompleteItem = any> implements Ed
     this._editorInputGroupElm = createDomElement('div', { className: 'autocomplete-container input-group' });
     const closeButtonGroupElm = createDomElement('span', { className: 'input-group-btn input-group-append', dataset: { clear: '' } });
     this._clearButtonElm = createDomElement('button', { type: 'button', className: 'btn btn-default icon-clear' });
-    this._inputElm = createDomElement('input', {
-      type: 'text', placeholder, title,
-      autocomplete: 'none',
-      className: `autocomplete form-control editor-text input-group-editor editor-${columnId}`,
-      dataset: { input: '' }
-    });
-
-    this._editorInputGroupElm.appendChild(this._inputElm);
+    this._inputElm = createDomElement(
+      'input',
+      {
+        type: 'text', placeholder, title,
+        autocomplete: 'none',
+        className: `autocomplete form-control editor-text input-group-editor editor-${columnId}`,
+        dataset: { input: '' }
+      },
+      this._editorInputGroupElm
+    );
 
     // add an empty <span> in order to add loading spinner styling
-    this._editorInputGroupElm.appendChild(createDomElement('span'));
+    this._editorInputGroupElm.appendChild(document.createElement('span'));
 
     // show clear date button (unless user specifically doesn't want it)
     if (!getEditorOptionByName<AutocompleterOption, 'hideClearButton'>(this.columnEditor, 'hideClearButton')) {

diff --git a/packages/common/src/editors/checkboxEditor.ts b/packages/common/src/editors/checkboxEditor.ts
@@ -76,10 +76,10 @@ export class CheckboxEditor implements Editor {
 
     this._input = createDomElement('input', {
       type: 'checkbox', value: 'true',
+      ariaLabel: this.columnEditor?.ariaLabel ?? `${toSentenceCase(columnId + '')} Checkbox Editor`,
       className: `editor-checkbox editor-${columnId}`,
       title: this.columnEditor?.title ?? '',
     });
-    this._input.setAttribute('aria-label', this.columnEditor?.ariaLabel ?? `${toSentenceCase(columnId + '')} Checkbox Editor`);
 
     const cellContainer = this.args?.container;
     if (cellContainer && typeof cellContainer.appendChild === 'function') {

diff --git a/packages/common/src/editors/dateEditor.ts b/packages/common/src/editors/dateEditor.ts
@@ -153,14 +153,16 @@ export class DateEditor implements Editor {
       this._editorInputGroupElm = createDomElement('div', { className: 'flatpickr input-group' });
       const closeButtonGroupElm = createDomElement('span', { className: 'input-group-btn input-group-append', dataset: { clear: '' } });
       this._clearButtonElm = createDomElement('button', { type: 'button', className: 'btn btn-default icon-clear' });
-      this._inputElm = createDomElement('input', {
-        placeholder: this.columnEditor?.placeholder ?? '',
-        title: this.columnEditor && this.columnEditor.title || '',
-        className: inputCssClasses.replace(/\./g, ' '),
-        dataset: { input: '', defaultdate: this.defaultDate }
-      });
-
-      this._editorInputGroupElm.appendChild(this._inputElm);
+      this._inputElm = createDomElement(
+        'input',
+        {
+          placeholder: this.columnEditor?.placeholder ?? '',
+          title: this.columnEditor && this.columnEditor.title || '',
+          className: inputCssClasses.replace(/\./g, ' '),
+          dataset: { input: '', defaultdate: this.defaultDate }
+        },
+        this._editorInputGroupElm
+      );
 
       // show clear date button (unless user specifically doesn't want it)
       if (!getEditorOptionByName<FlatpickrOption, 'hideClearButton'>(this.columnEditor, 'hideClearButton')) {

diff --git a/packages/common/src/editors/dualInputEditor.ts b/packages/common/src/editors/dualInputEditor.ts
@@ -193,12 +193,12 @@ export class DualInputEditor implements Editor {
     const input = createDomElement('input', {
       type: fieldType || 'text',
       id: `item-${itemId}-${position}`,
+      ariaLabel: this.columnEditor?.ariaLabel ?? `${toSentenceCase(columnId + '')} Input Editor`,
       className: `dual-editor-text editor-${columnId} ${position.replace(/input/gi, '')}`,
       autocomplete: 'none',
       placeholder: editorSideParams.placeholder || '',
       title: editorSideParams.title || '',
     });
-    input.setAttribute('aria-label', this.columnEditor?.ariaLabel ?? `${toSentenceCase(columnId + '')} Input Editor`);
 
     if (fieldType === 'readonly') {
       // when the custom type is defined as readonly, we'll make a readonly text input

diff --git a/packages/common/src/editors/floatEditor.ts b/packages/common/src/editors/floatEditor.ts
@@ -22,12 +22,12 @@ export class FloatEditor extends InputEditor {
 
       this._input = createDomElement('input', {
         type: 'number', autocomplete: 'none',
+        ariaLabel: this.columnEditor?.ariaLabel ?? `${toSentenceCase(columnId + '')} Number Editor`,
         className: `editor-text editor-${columnId}`,
         placeholder: this.columnEditor?.placeholder ?? '',
         title: this.columnEditor?.title ?? '',
         step: `${(this.columnEditor.valueStep !== undefined) ? this.columnEditor.valueStep : this.getInputDecimalSteps()}`,
       });
-      this._input.setAttribute('aria-label', this.columnEditor?.ariaLabel ?? `${toSentenceCase(columnId + '')} Number Editor`);
       const cellContainer = this.args.container;
       if (cellContainer && typeof cellContainer.appendChild === 'function') {
         cellContainer.appendChild(this._input);

diff --git a/packages/common/src/editors/inputEditor.ts b/packages/common/src/editors/inputEditor.ts
@@ -100,11 +100,11 @@ export class InputEditor implements Editor {
     this._input = createDomElement('input', {
       type: this._inputType || 'text',
       autocomplete: 'none',
+      ariaLabel: this.columnEditor?.ariaLabel ?? `${toSentenceCase(columnId + '')} Input Editor`,
       placeholder: this.columnEditor?.placeholder ?? '',
       title: this.columnEditor?.title ?? '',
       className: `editor-text editor-${columnId}`,
     });
-    this._input.setAttribute('aria-label', this.columnEditor?.ariaLabel ?? `${toSentenceCase(columnId + '')} Input Editor`);
     const cellContainer = this.args.container;
     if (cellContainer && typeof cellContainer.appendChild === 'function') {
       cellContainer.appendChild(this._input);

diff --git a/packages/common/src/editors/integerEditor.ts b/packages/common/src/editors/integerEditor.ts
@@ -20,12 +20,12 @@ export class IntegerEditor extends InputEditor {
 
       this._input = createDomElement('input', {
         type: 'number', autocomplete: 'none',
+        ariaLabel: this.columnEditor?.ariaLabel ?? `${toSentenceCase(columnId + '')} Slider Editor`,
         placeholder: this.columnEditor?.placeholder ?? '',
         title: this.columnEditor?.title ?? '',
         step: `${(this.columnEditor.valueStep !== undefined) ? this.columnEditor.valueStep : '1'}`,
         className: `editor-text editor-${columnId}`,
       });
-      this._input.setAttribute('aria-label', this.columnEditor?.ariaLabel ?? `${toSentenceCase(columnId + '')} Slider Editor`);
       const cellContainer = this.args.container;
       if (cellContainer && typeof cellContainer.appendChild === 'function') {
         cellContainer.appendChild(this._input);

diff --git a/packages/common/src/editors/longTextEditor.ts b/packages/common/src/editors/longTextEditor.ts
@@ -132,14 +132,17 @@ export class LongTextEditor implements Editor {
     containerElm.appendChild(this._wrapperElm);
 
     // use textarea row if defined but don't go over 3 rows with composite editor modal
-    this._textareaElm = createDomElement('textarea', {
-      cols: this.editorOptions?.cols ?? 40,
-      rows: (compositeEditorOptions && textAreaRows > 3) ? 3 : textAreaRows,
-      placeholder: this.columnEditor?.placeholder ?? '',
-      title: this.columnEditor?.title ?? '',
-    });
-    this._textareaElm.setAttribute('aria-label', this.columnEditor?.ariaLabel ?? `${toSentenceCase(columnId + '')} Text Editor`);
-    this._wrapperElm.appendChild(this._textareaElm);
+    this._textareaElm = createDomElement(
+      'textarea',
+      {
+        ariaLabel: this.columnEditor?.ariaLabel ?? `${toSentenceCase(columnId + '')} Text Editor`,
+        cols: this.editorOptions?.cols ?? 40,
+        rows: (compositeEditorOptions && textAreaRows > 3) ? 3 : textAreaRows,
+        placeholder: this.columnEditor?.placeholder ?? '',
+        title: this.columnEditor?.title ?? '',
+      },
+      this._wrapperElm
+    );
 
     const editorFooterElm = createDomElement('div', { className: 'editor-footer' });
     const countContainerElm = createDomElement('span', { className: 'counter' });
@@ -157,10 +160,8 @@ export class LongTextEditor implements Editor {
     editorFooterElm.appendChild(countContainerElm);
 
     if (!compositeEditorOptions) {
-      const cancelBtnElm = createDomElement('button', { className: 'btn btn-cancel btn-default btn-xs', textContent: cancelText });
-      const saveBtnElm = createDomElement('button', { className: 'btn btn-save btn-primary btn-xs', textContent: saveText });
-      editorFooterElm.appendChild(cancelBtnElm);
-      editorFooterElm.appendChild(saveBtnElm);
+      const cancelBtnElm = createDomElement('button', { className: 'btn btn-cancel btn-default btn-xs', textContent: cancelText }, editorFooterElm);
+      const saveBtnElm = createDomElement('button', { className: 'btn btn-save btn-primary btn-xs', textContent: saveText }, editorFooterElm);
       this._bindEventService.bind(cancelBtnElm, 'click', this.cancel.bind(this) as EventListener);
       this._bindEventService.bind(saveBtnElm, 'click', this.save.bind(this) as EventListener);
       this.position(this.args?.position as ElementPosition);

diff --git a/packages/common/src/editors/selectEditor.ts b/packages/common/src/editors/selectEditor.ts
@@ -712,7 +712,7 @@ export class SelectEditor implements Editor {
 
     // step 2, create the DOM Element of the editor
     // we will later also subscribe to the onClose event to save the Editor whenever that event is triggered
-    this.createDomElement(selectBuildResult.selectElement);
+    this.createEditorElement(selectBuildResult.selectElement);
   }
 
   /** Create a blank entry that can be added to the collection. It will also reuse the same collection structure provided by the user */
@@ -734,7 +734,7 @@ export class SelectEditor implements Editor {
    * From the Select DOM Element created earlier, create a Multiple/Single Select Editor using the jQuery multiple-select.js lib
    * @param {Object} selectElement
    */
-  protected createDomElement(selectElement: HTMLSelectElement) {
+  protected createEditorElement(selectElement: HTMLSelectElement) {
     this.$editorElm = $(selectElement);
 
     if (this.$editorElm && typeof this.$editorElm.appendTo === 'function') {

diff --git a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts
@@ -268,11 +268,12 @@ describe('CellMenu Plugin', () => {
         expect(cellMenuElm.classList.contains('dropdown'));
         expect(cellMenuElm.classList.contains('dropright'));
         expect(commandListElm.querySelectorAll('.slick-menu-item').length).toBe(5);
+        expect(document.body.querySelector('button.close')!.ariaLabel).toBe('Close'); // JSDOM doesn't support ariaLabel, but we can test attribute this way
         expect(removeExtraSpaces(document.body.innerHTML)).toBe(removeExtraSpaces(
           `<div class="slick-cell-menu slickgrid12345 dropdown dropright" style="display: block; top: 0px; left: 0px;" aria-expanded="true">
             <div class="slick-menu-command-list">
               <div class="slick-command-header no-title with-close">
-                <button class="close" type="button" data-dismiss="slick-menu" aria-label="Close">×</button>
+                <button class="close" type="button" data-dismiss="slick-menu">×</button>
               </div>
               <li class="slick-menu-item orange" data-command="command1">
                 <div class="slick-menu-icon">◦</div>
@@ -643,11 +644,12 @@ describe('CellMenu Plugin', () => {
         const optionListElm = cellMenuElm.querySelector('.slick-menu-option-list') as HTMLDivElement;
 
         expect(optionListElm.querySelectorAll('.slick-menu-item').length).toBe(5);
+        expect(document.body.querySelector('button.close')!.ariaLabel).toBe('Close'); // JSDOM doesn't support ariaLabel, but we can test attribute this way
         expect(removeExtraSpaces(document.body.innerHTML)).toBe(removeExtraSpaces(
           `<div class="slick-cell-menu slickgrid12345 dropdown dropright" style="display: block; top: 0px; left: 0px;" aria-expanded="true">
             <div class="slick-menu-option-list">
               <div class="slick-option-header no-title with-close">
-                <button class="close" type="button" data-dismiss="slick-menu" aria-label="Close">×</button>
+                <button class="close" type="button" data-dismiss="slick-menu">×</button>
               </div>
               <li class="slick-menu-item purple" data-option="option1">
                 <div class="slick-menu-icon">◦</div>

diff --git a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts
@@ -298,11 +298,12 @@ describe('ContextMenu Plugin', () => {
         expect(contextMenuElm.classList.contains('dropdown'));
         expect(contextMenuElm.classList.contains('dropright'));
         expect(commandListElm.querySelectorAll('.slick-menu-item').length).toBe(5);
+        expect(document.body.querySelector('button.close')!.ariaLabel).toBe('Close'); // JSDOM doesn't support ariaLabel, but we can test attribute this way
         expect(removeExtraSpaces(document.body.innerHTML)).toBe(removeExtraSpaces(
           `<div class="slick-context-menu slickgrid12345 dropdown dropright" style="display: block; top: 0px; left: 0px;" aria-expanded="true">
             <div class="slick-menu-command-list">
               <div class="slick-command-header no-title with-close">
-                <button class="close" type="button" data-dismiss="slick-menu" aria-label="Close">×</button>
+                <button class="close" type="button" data-dismiss="slick-menu">×</button>
               </div>
               <li class="slick-menu-item orange" data-command="command1">
                 <div class="slick-menu-icon">◦</div>
@@ -1247,11 +1248,12 @@ describe('ContextMenu Plugin', () => {
         const optionListElm = contextMenuElm.querySelector('.slick-menu-option-list') as HTMLDivElement;
 
         expect(optionListElm.querySelectorAll('.slick-menu-item').length).toBe(5);
+        expect(document.body.querySelector('button.close')!.ariaLabel).toBe('Close'); // JSDOM doesn't support ariaLabel, but we can test attribute this way
         expect(removeExtraSpaces(document.body.innerHTML)).toBe(removeExtraSpaces(
           `<div class="slick-context-menu slickgrid12345 dropdown dropright" style="display: block; top: 0px; left: 0px;" aria-expanded="true">
             <div class="slick-menu-option-list">
               <div class="slick-option-header no-title with-close">
-                <button class="close" type="button" data-dismiss="slick-menu" aria-label="Close">×</button>
+                <button class="close" type="button" data-dismiss="slick-menu">×</button>
               </div>
               <li class="slick-menu-item purple" data-option="option1">
                 <div class="slick-menu-icon">◦</div>