feat(common)!: migrate from moment to moment-tiny (#1456)

* feat(common): migrate from `moment` to `moment-tiny` - so I created yet another repo, it is very similar to `moment-mini` except that it includes both CJS and ESM builds (which actually both come from the Moment project), however `moment-mini` only includes the CJS build.
ghiscoding · Apr 28, 2024 · 90690f4 · 90690f4
1 parent dce7c44
commit 90690f4
Show file tree

Hide file tree

Showing 40 changed files with 240 additions and 195 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/package.json b/examples/vite-demo-vanilla-bundle/package.json
@@ -27,7 +27,7 @@
     "bulma": "^1.0.0",
     "fetch-jsonp": "^1.3.0",
     "isomorphic-dompurify": "^2.7.0",
-    "moment-mini": "^2.29.4",
+    "moment-tiny": "^2.30.3",
     "multiple-select-vanilla": "^3.1.0",
     "rxjs": "^7.8.1",
     "vanilla-calendar-picker": "^2.11.2",

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example10.ts b/examples/vite-demo-vanilla-bundle/src/examples/example10.ts
@@ -13,8 +13,8 @@ import {
 import { BindingEventService } from '@slickgrid-universal/binding';
 import { GraphqlService, type GraphqlPaginatedResult, type GraphqlServiceApi, type GraphqlServiceOption, } from '@slickgrid-universal/graphql';
 import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
-import moment from 'moment-mini';
 import { type MultipleSelectOption } from 'multiple-select-vanilla';
+import moment from 'moment-tiny';
 
 import { ExampleGridOptions } from './example-grid-options';
 import type { TranslateService } from '../translate.service';

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example11.ts b/examples/vite-demo-vanilla-bundle/src/examples/example11.ts
@@ -27,8 +27,8 @@ import { BindingEventService } from '@slickgrid-universal/binding';
 import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
-import moment from 'moment-mini';
 import { type MultipleSelectOption } from 'multiple-select-vanilla';
+import moment from 'moment-tiny';
 
 import exampleModal from './example11-modal.html?raw';
 import Example11Modal from './example11-modal';

diff --git a/package.json b/package.json
@@ -81,7 +81,7 @@
     "jest-extended": "^4.0.2",
     "jsdom": "^24.0.0",
     "jsdom-global": "^3.0.2",
-    "moment-mini": "^2.29.4",
+    "moment-tiny": "^2.30.3",
     "npm-run-all2": "^6.1.2",
     "pnpm": "^8.15.7",
     "rimraf": "^5.0.5",

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -76,7 +76,7 @@
     "dequal": "^2.0.3",
     "excel-builder-vanilla": "3.0.1",
     "isomorphic-dompurify": "^2.7.0",
-    "moment-mini": "^2.29.4",
+    "moment-tiny": "^2.30.3",
     "multiple-select-vanilla": "^3.1.0",
     "sortablejs": "^1.15.2",
     "un-flatten-tree": "^2.0.12",

diff --git a/packages/common/src/commonEditorFilter/commonEditorFilterUtils.ts b/packages/common/src/commonEditorFilter/commonEditorFilterUtils.ts
@@ -1,7 +1,6 @@
 import type { AutocompleteItem } from 'autocompleter';
 import type { IOptions } from 'vanilla-calendar-picker';
-import * as moment_ from 'moment-mini';
-const moment = (moment_ as any)['default'] || moment_;
+import moment from 'moment-tiny';
 
 import type { AutocompleterOption, Column, ColumnEditor, ColumnFilter } from '../interfaces/index';
 import { formatDateByFieldType, mapMomentDateFormatWithFieldType } from '../services';
@@ -38,7 +37,7 @@ export function setPickerDates(dateInputElm: HTMLInputElement, pickerOptions: IO
   const currentDateOrDates = dateValues;
   const outputFieldType = columnDef.outputType || colEditorOrFilter.type || columnDef.type || FieldType.dateUtc;
   const inputFieldType = colEditorOrFilter.type || columnDef.type;
-  const isoFormat = mapMomentDateFormatWithFieldType(FieldType.dateIso);
+  const isoFormat = mapMomentDateFormatWithFieldType(FieldType.dateIso) as string;
   const inputFormat = inputFieldType ? mapMomentDateFormatWithFieldType(inputFieldType) : '';
   const initialDates = Array.isArray(currentDateOrDates) ? currentDateOrDates : [(currentDateOrDates || '') as string];
   if (initialDates.length && initialDates[0]) {
@@ -48,11 +47,12 @@ export function setPickerDates(dateInputElm: HTMLInputElement, pickerOptions: IO
       pickerDates.push(momentDate);
     }
 
+    const singleinputFormat = Array.isArray(inputFormat) ? inputFormat[0] : inputFormat;
     pickerOptions.settings!.selected = {
       dates: [pickerDates.map(p => p.format(isoFormat)).join(':')],
       month: pickerDates[0].month(),
       year: pickerDates[0].year(),
-      time: inputFormat.toLowerCase().includes('h') ? pickerDates[0].format('HH:mm') : null,
+      time: singleinputFormat.toLowerCase().includes('h') ? pickerDates[0].format('HH:mm') : undefined,
     };
     dateInputElm.value = initialDates.length ? pickerDates.map(p => formatDateByFieldType(p, undefined, outputFieldType)).join(' — ') : '';
   }

diff --git a/packages/common/src/editors/__tests__/dateEditor.spec.ts b/packages/common/src/editors/__tests__/dateEditor.spec.ts
@@ -1,4 +1,4 @@
-import moment from 'moment-mini';
+import moment from 'moment-tiny';
 import { VanillaCalendar } from 'vanilla-calendar-picker';
 
 import { Editors } from '../index';

diff --git a/packages/common/src/editors/dateEditor.ts b/packages/common/src/editors/dateEditor.ts
@@ -1,8 +1,7 @@
 import { BindingEventService } from '@slickgrid-universal/binding';
 import { createDomElement, emptyElement, extend, setDeepValue } from '@slickgrid-universal/utils';
 import { VanillaCalendar, type IOptions } from 'vanilla-calendar-picker';
-import * as moment_ from 'moment-mini';
-const moment = (moment_ as any)['default'] || moment_;
+import moment from 'moment-tiny';
 
 import { Constants } from './../constants';
 import { FieldType } from '../enums/index';
@@ -110,7 +109,10 @@ export class DateEditor implements Editor {
       const gridOptions = (this.args.grid.getOptions() || {}) as GridOption;
       this.defaultDate = this.args.item?.[this.columnDef.field];
       const outputFieldType = this.columnDef.outputType || this.columnEditor.type || this.columnDef.type || FieldType.dateUtc;
-      const outputFormat = mapMomentDateFormatWithFieldType(outputFieldType);
+      let outputFormat = mapMomentDateFormatWithFieldType(outputFieldType);
+      if (Array.isArray(outputFormat)) {
+        outputFormat = outputFormat[0];
+      }
       const currentLocale = this._translaterService?.getCurrentLanguage?.() || gridOptions.locale || 'en';
 
       // add the time picker when format is UTC (Z) or has the 'h' (meaning hours)
@@ -140,8 +142,8 @@ export class DateEditor implements Editor {
 
               if (this.hasTimePicker) {
                 const momentDate = moment(chosenDate, pickerFormat);
-                momentDate.hours(self.selectedHours);
-                momentDate.minute(self.selectedMinutes);
+                momentDate.hours(+(self.selectedHours || 0));
+                momentDate.minute(+(self.selectedMinutes || 0));
                 self.HTMLInputElement.value = formatDateByFieldType(momentDate, undefined, outputFieldType);
               }
 

diff --git a/packages/common/src/filter-conditions/__tests__/dateEuroShortFilterCondition.spec.ts b/packages/common/src/filter-conditions/__tests__/dateEuroShortFilterCondition.spec.ts
@@ -74,38 +74,77 @@ describe('dateEuroShortFilterCondition method', () => {
     expect(output).toBe(false);
   });
 
-  it('should return True when input value is in the range of search terms', () => {
-    const searchTerms = ['01/12/93..31/12/93'];
-    const options = { dataKey: '', operator: 'EQ', cellValue: '25/12/93', fieldType: FieldType.dateEuroShort, searchTerms } as FilterConditionOption;
-    const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateEuroShort));
-    expect(output).toBe(true);
-  });
+  describe('without zero padding dates', () => {
+    it('should return True when input value is in the range of search terms with short US dates and without zero padding', () => {
+      const searchTerms = ['1/12/93..31/12/93'];
+      const options = { dataKey: '', operator: 'EQ', cellValue: '25/12/93', fieldType: FieldType.dateEuroShort, searchTerms } as FilterConditionOption;
+      const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateEuroShort));
+      expect(output).toBe(true);
+    });
 
-  it('should return False when input value is not in the range of search terms', () => {
-    const searchTerms = ['01/12/93..31/12/93'];
-    const options = { dataKey: '', operator: 'EQ', cellValue: '25/11/93', fieldType: FieldType.dateEuroShort, searchTerms } as FilterConditionOption;
-    const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateEuroShort));
-    expect(output).toBe(false);
-  });
+    it('should return False when input value is not in the range of search terms with short US dates and without zero padding', () => {
+      const searchTerms = ['1/12/93..31/12/93'];
+      const options = { dataKey: '', operator: 'EQ', cellValue: '25/11/93', fieldType: FieldType.dateEuroShort, searchTerms } as FilterConditionOption;
+      const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateEuroShort));
+      expect(output).toBe(false);
+    });
 
-  it('should return True when input value equals the search terms min inclusive value and operator is set to "rangeInclusive"', () => {
-    const searchTerms = ['01/12/93..31/12/93'];
-    const options = { dataKey: '', operator: 'RangeInclusive', cellValue: '01/12/93', fieldType: FieldType.dateEuroShort, searchTerms } as FilterConditionOption;
-    const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateEuroShort));
-    expect(output).toBe(true);
-  });
+    it('should return True when input value equals the search terms min inclusive value and operator is set to "rangeInclusive"', () => {
+      const searchTerms = ['1/12/93..31/12/93'];
+      const options = { dataKey: '', operator: 'RangeInclusive', cellValue: '1/12/93', fieldType: FieldType.dateEuroShort, searchTerms } as FilterConditionOption;
+      const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateEuroShort));
+      expect(output).toBe(true);
+    });
 
-  it('should return False when input value equals the search terms min inclusive value and operator is set to "RangeExclusive"', () => {
-    const searchTerms = ['01/12/93..31/12/93'];
-    const options = { dataKey: '', operator: 'RangeExclusive', cellValue: '01/12/93', fieldType: FieldType.dateEuroShort, searchTerms } as FilterConditionOption;
-    const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateEuroShort));
-    expect(output).toBe(false);
+    it('should return False when input value equals the search terms min inclusive value and operator is set to "RangeExclusive"', () => {
+      const searchTerms = ['1/12/93..31/12/93'];
+      const options = { dataKey: '', operator: 'RangeExclusive', cellValue: '1/12/93', fieldType: FieldType.dateEuroShort, searchTerms } as FilterConditionOption;
+      const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateEuroShort));
+      expect(output).toBe(false);
+    });
+
+    it('should return False when any of the 2 search term value is not a valid date', () => {
+      const searchTerms = ['1/12/93..60/12/93'];
+      const options = { dataKey: '', operator: 'RangeExclusive', cellValue: '05/12/93', fieldType: FieldType.dateEuroShort, searchTerms } as FilterConditionOption;
+      const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateEuroShort));
+      expect(output).toBe(false);
+    });
   });
 
-  it('should return False when any of the 2 search term value is not a valid date', () => {
-    const searchTerms = ['01/12/93..60/12/93'];
-    const options = { dataKey: '', operator: 'RangeExclusive', cellValue: '05/12/93', fieldType: FieldType.dateEuroShort, searchTerms } as FilterConditionOption;
-    const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateEuroShort));
-    expect(output).toBe(false);
+  describe('zero padding dates', () => {
+    it('should return True when input value is in the range of search terms', () => {
+      const searchTerms = ['01/12/93..31/12/93'];
+      const options = { dataKey: '', operator: 'EQ', cellValue: '25/12/93', fieldType: FieldType.dateEuroShort, searchTerms } as FilterConditionOption;
+      const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateEuroShort));
+      expect(output).toBe(true);
+    });
+
+    it('should return False when input value is not in the range of search terms', () => {
+      const searchTerms = ['01/12/93..31/12/93'];
+      const options = { dataKey: '', operator: 'EQ', cellValue: '25/11/93', fieldType: FieldType.dateEuroShort, searchTerms } as FilterConditionOption;
+      const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateEuroShort));
+      expect(output).toBe(false);
+    });
+
+    it('should return True when input value equals the search terms min inclusive value and operator is set to "rangeInclusive"', () => {
+      const searchTerms = ['01/12/93..31/12/93'];
+      const options = { dataKey: '', operator: 'RangeInclusive', cellValue: '1/12/93', fieldType: FieldType.dateEuroShort, searchTerms } as FilterConditionOption;
+      const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateEuroShort));
+      expect(output).toBe(true);
+    });
+
+    it('should return False when input value equals the search terms min inclusive value and operator is set to "RangeExclusive"', () => {
+      const searchTerms = ['01/12/93..31/12/93'];
+      const options = { dataKey: '', operator: 'RangeExclusive', cellValue: '1/12/93', fieldType: FieldType.dateEuroShort, searchTerms } as FilterConditionOption;
+      const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateEuroShort));
+      expect(output).toBe(false);
+    });
+
+    it('should return False when any of the 2 search term value is not a valid date', () => {
+      const searchTerms = ['01/12/93..60/12/93'];
+      const options = { dataKey: '', operator: 'RangeExclusive', cellValue: '05/12/93', fieldType: FieldType.dateEuroShort, searchTerms } as FilterConditionOption;
+      const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateEuroShort));
+      expect(output).toBe(false);
+    });
   });
 });
diff --git a/packages/common/src/filter-conditions/__tests__/dateUsShortFilterCondition.spec.ts b/packages/common/src/filter-conditions/__tests__/dateUsShortFilterCondition.spec.ts
@@ -40,14 +40,14 @@ describe('dateUsShortFilterCondition method', () => {
   });
 
   it('should return False when cell value is not the same value as the searchTerm', () => {
-    const searchTerms = ['03/03/2003'];
+    const searchTerms = ['3/3/2003'];
     const options = { dataKey: '', operator: 'EQ', fieldType: FieldType.dateUsShort, cellValue: '12/25/93', searchTerms } as FilterConditionOption;
     const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateUsShort));
     expect(output).toBe(false);
   });
 
   it('should return False even when the cell value is found in the searchTerms since it only compares first term', () => {
-    const searchTerms = ['03/14/03', '12/25/93'];
+    const searchTerms = ['3/14/03', '12/25/93'];
     const options = { dataKey: '', operator: 'EQ', fieldType: FieldType.dateUsShort, cellValue: '12/25/93', searchTerms } as FilterConditionOption;
     const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateUsShort));
     expect(output).toBe(false);
@@ -82,36 +82,36 @@ describe('dateUsShortFilterCondition method', () => {
   });
 
   it('should return True when input value is in the range of search terms', () => {
-    const searchTerms = ['12/01/93..12/31/93'];
+    const searchTerms = ['12/1/93..12/31/93'];
     const options = { dataKey: '', operator: 'EQ', cellValue: '12/25/93', fieldType: FieldType.dateUsShort, searchTerms } as FilterConditionOption;
     const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateUsShort));
     expect(output).toBe(true);
   });
 
   it('should return False when input value is not in the range of search terms', () => {
-    const searchTerms = ['12/01/93..12/31/93'];
+    const searchTerms = ['12/1/93..12/31/93'];
     const options = { dataKey: '', operator: 'EQ', cellValue: '11/25/93', fieldType: FieldType.dateUsShort, searchTerms } as FilterConditionOption;
     const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateUsShort));
     expect(output).toBe(false);
   });
 
   it('should return True when input value equals the search terms min inclusive value and operator is set to "rangeInclusive"', () => {
-    const searchTerms = ['12/01/93..12/31/93'];
-    const options = { dataKey: '', operator: 'RangeInclusive', cellValue: '12/01/93', fieldType: FieldType.dateUsShort, searchTerms } as FilterConditionOption;
+    const searchTerms = ['12/1/93..12/31/93'];
+    const options = { dataKey: '', operator: 'RangeInclusive', cellValue: '12/1/93', fieldType: FieldType.dateUsShort, searchTerms } as FilterConditionOption;
     const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateUsShort));
     expect(output).toBe(true);
   });
 
   it('should return False when input value equals the search terms min inclusive value and operator is set to "RangeExclusive"', () => {
-    const searchTerms = ['12/01/93..12/31/93'];
-    const options = { dataKey: '', operator: 'RangeExclusive', cellValue: '12/01/93', fieldType: FieldType.dateUsShort, searchTerms } as FilterConditionOption;
+    const searchTerms = ['12/1/93..12/31/93'];
+    const options = { dataKey: '', operator: 'RangeExclusive', cellValue: '12/1/93', fieldType: FieldType.dateUsShort, searchTerms } as FilterConditionOption;
     const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateUsShort));
     expect(output).toBe(false);
   });
 
   it('should return False when any of the 2 search term value is not a valid date', () => {
-    const searchTerms = ['12/01/93..12/60/93'];
-    const options = { dataKey: '', operator: 'RangeExclusive', cellValue: '12/05/93', fieldType: FieldType.dateUsShort, searchTerms } as FilterConditionOption;
+    const searchTerms = ['12/1/93..12/60/93'];
+    const options = { dataKey: '', operator: 'RangeExclusive', cellValue: '12/5/93', fieldType: FieldType.dateUsShort, searchTerms } as FilterConditionOption;
     const output = executeFilterConditionTest(options, getFilterParsedDates(searchTerms, FieldType.dateUsShort));
     expect(output).toBe(false);
   });

diff --git a/packages/common/src/filter-conditions/__tests__/filterConditionProcesses.spec.ts b/packages/common/src/filter-conditions/__tests__/filterConditionProcesses.spec.ts
@@ -1,4 +1,4 @@
-import moment from 'moment-mini';
+import moment from 'moment-tiny';
 
 import { getParsedSearchTermsByFieldType } from '../filterConditionProcesses';
 

diff --git a/packages/common/src/filter-conditions/dateFilterCondition.ts b/packages/common/src/filter-conditions/dateFilterCondition.ts
@@ -1,4 +1,4 @@
-import moment from 'moment-mini';
+import moment from 'moment-tiny';
 
 import { FieldType, OperatorType, type SearchTerm } from '../enums/index';
 import type { FilterConditionOption } from '../interfaces/index';
@@ -11,6 +11,7 @@ import { testFilterCondition } from './filterUtilities';
 export function executeDateFilterCondition(options: FilterConditionOption, parsedSearchDates: any[]): boolean {
   const filterSearchType = options && (options.filterSearchType || options.fieldType) || FieldType.dateIso;
   const FORMAT = mapMomentDateFormatWithFieldType(filterSearchType);
+  const SINGLE_FORMAT = Array.isArray(FORMAT) ? FORMAT[0] : FORMAT;
   const [searchDate1, searchDate2] = parsedSearchDates;
 
   // cell value in moment format
@@ -23,7 +24,7 @@ export function executeDateFilterCondition(options: FilterConditionOption, parse
 
   // when comparing with Dates only (without time), we need to disregard the time portion, we can do so by setting our time to start at midnight
   // ref, see https://stackoverflow.com/a/19699447/1212166
-  const dateCellTimestamp = FORMAT.toLowerCase().includes('h') ? dateCell.valueOf() : dateCell.clone().startOf('day').valueOf();
+  const dateCellTimestamp = SINGLE_FORMAT.toLowerCase().includes('h') ? dateCell.valueOf() : dateCell.clone().startOf('day').valueOf();
 
   // having 2 search dates, we assume that it's a date range filtering and we'll compare against both dates
   if (searchDate1 && searchDate2) {
@@ -38,7 +39,7 @@ export function executeDateFilterCondition(options: FilterConditionOption, parse
   }
 
   // comparing against a single search date
-  const dateSearchTimestamp1 = FORMAT.toLowerCase().includes('h') ? searchDate1.valueOf() : searchDate1.clone().startOf('day').valueOf();
+  const dateSearchTimestamp1 = SINGLE_FORMAT.toLowerCase().includes('h') ? searchDate1.valueOf() : searchDate1.clone().startOf('day').valueOf();
   return testFilterCondition(options.operator || '==', dateCellTimestamp, dateSearchTimestamp1);
 }