feat!: migrate from Moment to Tempo (#1194)

* feat!: migrate from Moment to Tempo

docs/column-functionalities/filters/compound-filters.md

@@ -48,7 +48,8 @@ The column definition `type` will affect the list of Operators shown, for exampl
 
 
 ### How to use CompoundDate Filter
-Again set the column definition flag `filterable: true` and use the filter type `Filters.compoundDate`. Here is an example with a full column definition:
+As any other columns, set the column definition flag `filterable: true` and use the filter type `Filters.compoundDate`. Here is an example with a full column definition:
+
 ```ts
 // define you columns, in this demo Effort Driven will use a Select Filter
 this.columnDefinitions = [
@@ -72,6 +73,8 @@ this.gridOptions = {
 };
 ```
 
+> **Note** we use [Tempo](https://tempo.formkit.com/) to parse and format Dates to the chosen format via the `type` option when provided in your column definition.
+
 #### Dealing with different input/ouput dates (example: UTC)
 What if your date input (from your dataset) has a different output on the screen (UI)?
 In that case, you will most probably have a Formatter and type representing the input type, we also provided an `outputType` that can be used to deal with that case.

docs/column-functionalities/filters/range-filters.md

@@ -134,6 +134,8 @@ this.gridOptions = {
 ### Using a Date Range Filter
 The date range filter allows you to search data between 2 dates (it uses [Vanilla-Calendar Range](https://vanilla-calendar.pro/) feature).
 
+> **Note** we use [Tempo](https://tempo.formkit.com/) to parse and format Dates to the chosen format via the `type` option when provided in your column definition.
+
 ##### Component
 import { Filters, Formatters, GridOption, OperatorType, VanillaCalendarOption } from '@slickgrid-universal/common';
 

docs/column-functionalities/formatters.md

@@ -28,7 +28,7 @@ For a [UI sample](#ui-sample), scroll down below.
 
 `Slickgrid-Universal` ships with a few `Formatters` by default which helps with common fields, you can see the [entire list here](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/index.ts#L37).
 
-> **Note** you might not need a Formatter when a simple CSS style is needed, think about using `cssClass` column property instead.
+> **Note** you might not need a Formatter when a simple CSS style and class might be enough, think about using `cssClass` column property as much as possible since it has much better perf.
 
 **List of provided `Formatters`**
 
@@ -55,6 +55,7 @@ For a [UI sample](#ui-sample), scroll down below.
 * `dateTimeUs` : Takes a Date object and displays it as an US Date+Time format (MM/DD/YYYY HH:mm:ss)
 * `dateTimeShortUs`: Takes a Date object and displays it as an US Date+Time (without seconds) format (MM/DD/YYYY HH:mm:ss)
 * `dateTimeUsAmPm` : Takes a Date object and displays it as an US Date+Time+(am/pm) format (MM/DD/YYYY hh:mm:ss a)
+* `dateUtc` : Takes a Date object and displays it as a TZ format (YYYY-MM-DDThh:mm:ssZ)
 * `decimal`: Display the value as x decimals formatted, defaults to 2 decimals. You can pass "minDecimal" and/or "maxDecimal" to the "params" property.
 * `dollar`: Display the value as 2 decimals formatted with dollar sign '$' at the end of of the value.
 * `dollarColored`: Display the value as 2 decimals formatted with dollar sign '$' at the end of of the value, change color of text to red/green on negative/positive value
@@ -79,11 +80,12 @@ For a [UI sample](#ui-sample), scroll down below.
 * `translateBoolean`: Takes a boolean value, cast it to upperCase string and finally translates it (i18n).
 * `tree`: Formatter that must be used when the column is a Tree Data column
 
-**Note:** The list might not always be up to date, you can refer to the [Formatters export](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/index.ts#L37) to know exactly which ones are available.
+> **Note:** The list is certainly not up to date (especially for Dates), please refer to the [Formatters export](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/index.ts#L37) to know exactly which formatters are available.
 
-**Usage**
+> **Note** all Date formatters are formatted using [Tempo](https://tempo.formkit.com/#format-tokens). There are also many more Date formats not shown above, simply visit the [formatters.index](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/formatters/formatters.index.ts#L101) to see all available Date/Time formats.
 
-To use any of them, you need to import `Formatters` from `Aurelia-Slickgrid` and add a `formatter: ...` in your column definitions as shown below:
+### Usage
+To use any of them, you simply need to import `Formatters` from `Slickgrid-Universal` and add a `formatter: Formatters.xyz` (where `xyx` is the name of the built-in formatter) in your column definitions as shown below:
 
 ```ts
 import { Formatters } from 'aurelia-slickgrid';

package.json

@@ -43,6 +43,7 @@
     "@aurelia/fetch-client": "2.0.0-beta.15",
     "@aurelia/platform": "2.0.0-beta.15",
     "@aurelia/platform-browser": "2.0.0-beta.15",
+    "@formkit/tempo": "^0.1.1",
     "@jest/types": "^29.6.3",
     "@lerna-lite/cli": "^3.3.3",
     "@lerna-lite/publish": "^3.3.3",
@@ -62,7 +63,6 @@
     "jest-extended": "^4.0.2",
     "jest-transform-stub": "^2.0.0",
     "jsdom-global": "^3.0.2",
-    "moment-mini": "^2.29.4",
     "npm-run-all2": "^6.1.2",
     "pnpm": "^8.15.7",
     "rimraf": "^5.0.5",

packages/aurelia-slickgrid/package.json

@@ -52,6 +52,7 @@
     "@aurelia/i18n": "^2.0.0-beta.15",
     "@aurelia/runtime": "^2.0.0-beta.15",
     "@aurelia/runtime-html": "^2.0.0-beta.15",
+    "@formkit/tempo": "^0.1.1",
     "@slickgrid-universal/common": "~5.0.0-beta.1",
     "@slickgrid-universal/custom-footer-component": "~5.0.0-beta.1",
     "@slickgrid-universal/empty-warning-component": "~5.0.0-beta.1",
@@ -61,7 +62,6 @@
     "@slickgrid-universal/utils": "~5.0.0-beta.1",
     "dequal": "^2.0.3",
     "isomorphic-dompurify": "^2.8.0",
-    "moment-tiny": "^2.30.3",
     "sortablejs": "^1.15.2",
     "vanilla-calendar-picker": "^2.11.4"
   },

packages/aurelia-slickgrid/src/value-converters/asgDateFormat.ts

@@ -1,7 +1,7 @@
-import moment from 'moment-mini';
+import { format } from '@formkit/tempo';
 
 export class AsgDateFormatValueConverter {
-  toView(value: any, format: string): string {
-    return moment(value).format(format);
+  toView(value: any, f: string): string {
+    return format(value, f);
   }
 }

packages/demo/package.json

@@ -41,6 +41,7 @@
     "@aurelia/runtime-html": "^2.0.0-beta.15",
     "@faker-js/faker": "^8.4.1",
     "@fnando/sparkline": "^0.3.10",
+    "@formkit/tempo": "^0.1.1",
     "@popperjs/core": "^2.11.8",
     "@slickgrid-universal/common": "~5.0.0-beta.1",
     "@slickgrid-universal/composite-editor-component": "~5.0.0-beta.1",
@@ -57,7 +58,6 @@
     "i18next": "^23.11.2",
     "i18next-fetch-backend": "^5.0.2",
     "isomorphic-dompurify": "^2.8.0",
-    "moment-mini": "^2.29.4",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {

packages/demo/src/examples/resources/value-converters/date-format.ts

@@ -1,7 +1,7 @@
-import moment from 'moment-mini';
+import { format } from '@formkit/tempo';
 
 export class DateFormatValueConverter {
-  toView(value: any, format: string): string {
-    return moment(value).format(format);
+  toView(value: any, f: string): string {
+    return format(value, f);
   }
 }

packages/demo/src/examples/slickgrid/example23.ts

@@ -1,7 +1,7 @@
 import { I18N } from '@aurelia/i18n';
 // import { TOptions as I18NOptions } from 'i18next';
-import moment from 'moment-mini';
-import { type MultipleSelectOption } from 'multiple-select-vanilla';
+import { addDay, format } from '@formkit/tempo';
+
 import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 
@@ -17,6 +17,7 @@ import {
   type GridOption,
   type GridStateChange,
   type Metrics,
+  type MultipleSelectOption,
   OperatorType,
   type SlickGrid,
   type SliderRangeOption,
@@ -154,8 +155,8 @@ export class Example23 {
     ];
 
     const today = new Date();
-    const presetLowestDay = moment().add(-2, 'days').format('YYYY-MM-DD');
-    const presetHighestDay = moment().add(today.getDate() < 14 ? 30 : 25, 'days').format('YYYY-MM-DD');
+    const presetLowestDay = format(addDay(new Date(), -2), 'YYYY-MM-DD');
+    const presetHighestDay = format(addDay(new Date(), today.getDate() < 14 ? 30 : 25), 'YYYY-MM-DD');
 
     this.gridOptions = {
       autoResize: {
@@ -195,7 +196,7 @@ export class Example23 {
     const tempDataset: any[] = [];
     for (let i = startingIndex; i < (startingIndex + itemCount); i++) {
       const randomDuration = randomBetween(0, 365);
-      const randomYear = randomBetween(moment().year(), moment().year() + 1);
+      const randomYear = randomBetween(new Date().getFullYear(), new Date().getFullYear() + 1);
       const randomMonth = randomBetween(0, 12);
       const randomDay = randomBetween(10, 28);
       const randomPercent = randomBetween(0, 100);
@@ -244,8 +245,8 @@ export class Example23 {
   }
 
   setFiltersDynamically() {
-    const presetLowestDay = moment().add(-5, 'days').format('YYYY-MM-DD');
-    const presetHighestDay = moment().add(25, 'days').format('YYYY-MM-DD');
+    const presetLowestDay = format(addDay(new Date(), -5), 'YYYY-MM-DD');
+    const presetHighestDay = format(addDay(new Date(), 25), 'YYYY-MM-DD');
 
     // we can Set Filters Dynamically (or different filters) afterward through the FilterService
     this.aureliaGrid.filterService.updateFilters([
@@ -271,7 +272,7 @@ export class Example23 {
 
   predefinedFilterChanged(newPredefinedFilter: string) {
     let filters: CurrentFilter[] = [];
-    const currentYear = moment().year();
+    const currentYear = new Date().getFullYear();
 
     switch (newPredefinedFilter) {
       case 'currentYearTasks':

packages/demo/src/examples/slickgrid/example6.ts

@@ -1,7 +1,6 @@
 import { I18N } from '@aurelia/i18n';
+import { addDay, format } from '@formkit/tempo';
 import { GraphqlService, type GraphqlPaginatedResult, type GraphqlServiceApi, type GraphqlServiceOption } from '@slickgrid-universal/graphql';
-import moment from 'moment-mini';
-import { type MultipleSelectOption } from 'multiple-select-vanilla';
 import {
   type AureliaGridInstance,
   type Column,
@@ -12,6 +11,7 @@ import {
   type GridOption,
   type GridStateChange,
   type Metrics,
+  type MultipleSelectOption,
   OperatorType,
   SortDirection,
 } from 'aurelia-slickgrid';
@@ -124,8 +124,8 @@ export class Example6 {
       },
     ];
 
-    const presetLowestDay = moment().add(-2, 'days').format('YYYY-MM-DD');
-    const presetHighestDay = moment().add(20, 'days').format('YYYY-MM-DD');
+    const presetLowestDay = format(addDay(new Date(), -2), 'YYYY-MM-DD');
+    const presetHighestDay = format(addDay(new Date(), 20), 'YYYY-MM-DD');
 
     this.gridOptions = {
       enableFiltering: true,
@@ -292,8 +292,8 @@ export class Example6 {
   }
 
   setFiltersDynamically() {
-    const presetLowestDay = moment().add(-2, 'days').format('YYYY-MM-DD');
-    const presetHighestDay = moment().add(20, 'days').format('YYYY-MM-DD');
+    const presetLowestDay = format(addDay(new Date(), -2), 'YYYY-MM-DD');
+    const presetHighestDay = format(addDay(new Date(), 20), 'YYYY-MM-DD');
 
     // we can Set Filters Dynamically (or different filters) afterward through the FilterService
     this.aureliaGrid.filterService.updateFilters([
@@ -314,8 +314,8 @@ export class Example6 {
   }
 
   resetToOriginalPresets() {
-    const presetLowestDay = moment().add(-2, 'days').format('YYYY-MM-DD');
-    const presetHighestDay = moment().add(20, 'days').format('YYYY-MM-DD');
+    const presetLowestDay = format(addDay(new Date(), -2), 'YYYY-MM-DD');
+    const presetHighestDay = format(addDay(new Date(), 20), 'YYYY-MM-DD');
 
     this.aureliaGrid.filterService.updateFilters([
       // you can use OperatorType or type them as string, e.g.: operator: 'EQ'

test/cypress/e2e/example04.cy.ts

@@ -1,4 +1,5 @@
-import moment from 'moment-mini';
+import { isAfter, isBefore, isEqual, parse } from '@formkit/tempo';
+
 import { removeExtraSpaces } from '../plugins/utilities';
 
 describe('Example 4 - Client Side Sort/Filter Grid', () => {
@@ -53,7 +54,7 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => {
           cy.wrap($row)
             .children('.slick-cell:nth(5)')
             .each(($cell) => {
-              const isDateValid = moment($cell.text(), 'M/D/YY').isBefore(presetUsDateShort);
+              const isDateValid = isBefore(parse($cell.text(), 'M/D/YY'), parse(presetUsDateShort, 'M/D/YY'));
               expect(isDateValid).to.eq(true);
             });
         });
@@ -152,7 +153,7 @@ describe('Example 4 - Client Side Sort/Filter Grid', () => {
           cy.wrap($row)
             .children('.slick-cell:nth(4)')
             .each(($cell) => {
-              const isDateValid = moment($cell.text()).isSameOrAfter(dynamicStartDate);
+              const isDateValid = isEqual($cell.text(), dynamicStartDate) || isAfter($cell.text(), dynamicStartDate);
               expect(isDateValid).to.eq(true);
             });
         });

test/cypress/e2e/example06.cy.ts

@@ -1,8 +1,9 @@
-import moment from 'moment-mini';
+import { addDay, format } from '@formkit/tempo';
+
 import { removeWhitespaces } from '../plugins/utilities';
 
-const presetLowestDay = moment().add(-2, 'days').format('YYYY-MM-DD');
-const presetHighestDay = moment().add(20, 'days').format('YYYY-MM-DD');
+const presetLowestDay = format(addDay(new Date(), -2), 'YYYY-MM-DD');
+const presetHighestDay = format(addDay(new Date(), 20), 'YYYY-MM-DD');
 
 describe('Example 6 - GraphQL Grid', () => {
   it('should display Example title', () => {

test/cypress/e2e/example12.cy.ts

@@ -1,5 +1,5 @@
+import { format } from '@formkit/tempo';
 
-import moment from 'moment-mini';
 import { removeExtraSpaces } from '../plugins/utilities';
 
 describe('Example 12: Localization (i18n)', () => {
@@ -48,9 +48,8 @@ describe('Example 12: Localization (i18n)', () => {
         .find('.slick-custom-footer')
         .find('.right-footer')
         .should($span => {
-          const now = new Date();
           const text = removeExtraSpaces($span.text()); // remove all white spaces
-          const dateFormatted = moment(now).format('YYYY-MM-DD hh:mm a');
+          const dateFormatted = format(new Date(), 'YYYY-MM-DD hh:mm a');
           expect(text).to.eq(`Last Update ${dateFormatted} | 1500 of 1500 items`);
         });
     });
@@ -119,9 +118,8 @@ describe('Example 12: Localization (i18n)', () => {
         .find('.slick-custom-footer')
         .find('.right-footer')
         .should($span => {
-          const now = new Date();
           const text = removeExtraSpaces($span.text()); // remove all white spaces
-          const dateFormatted = moment(now).format('YYYY-MM-DD hh:mm a');
+          const dateFormatted = format(new Date(), 'YYYY-MM-DD hh:mm a');
           expect(text).to.eq(`Dernière mise à jour ${dateFormatted} | 1500 de 1500 éléments`);
         });
     });