chore: add .js file extension to all local import (#1088)

* chore: add .js file extension to all local import
- for better bundler support in the future, it's better to add the .js file extension to all local imports

* chore: remove import file ext in Cypress test file

eslint.config.mjs

@@ -24,6 +24,7 @@ export default tseslint.config(
       '**/*.json',
       '**/*.js',
       '**/__tests__/*',
+      '**/cypress',
       '**/dist',
       '**/lib',
       '**/tests',
@@ -84,6 +85,7 @@ export default tseslint.config(
       'no-cond-assign': 'off',
       'no-prototype-builtins': [0],
       'no-extra-boolean-cast': 'off',
+      'n/file-extension-in-import': ['error', 'always', { ".cy.ts": "never" }],
       'semi': 'off',
       'keyword-spacing': 'error',
       'space-before-blocks': 'error',

src/controls/index.ts

@@ -1,4 +1,4 @@
-export * from './slick.columnmenu';
-export * from './slick.columnpicker';
-export * from './slick.gridmenu';
-export * from './slick.pager';
+export * from './slick.columnmenu.js';
+export * from './slick.columnpicker.js';
+export * from './slick.gridmenu.js';
+export * from './slick.pager.js';

src/controls/slick.columnmenu.ts

@@ -1,6 +1,6 @@
-import { BindingEventService as BindingEventService_, Event as SlickEvent_, type SlickEventData, Utils as Utils_ } from '../slick.core';
-import type { Column, ColumnPickerOption, DOMMouseOrTouchEvent, GridOption, OnColumnsChangedArgs } from '../models/index';
-import type { SlickGrid } from '../slick.grid';
+import { BindingEventService as BindingEventService_, Event as SlickEvent_, type SlickEventData, Utils as Utils_ } from '../slick.core.js';
+import type { Column, ColumnPickerOption, DOMMouseOrTouchEvent, GridOption, OnColumnsChangedArgs } from '../models/index.js';
+import type { SlickGrid } from '../slick.grid.js';
 
 // for (iife) load Slick methods from global Slick object, or use imports for (esm)
 const BindingEventService = IIFE_ONLY ? Slick.BindingEventService : BindingEventService_;

src/controls/slick.columnpicker.ts

@@ -1,6 +1,6 @@
-import { BindingEventService as BindingEventService_, Event as SlickEvent_, type SlickEventData, Utils as Utils_ } from '../slick.core';
-import type { Column, ColumnPickerOption, DOMMouseOrTouchEvent, GridOption, OnColumnsChangedArgs } from '../models/index';
-import type { SlickGrid } from '../slick.grid';
+import { BindingEventService as BindingEventService_, Event as SlickEvent_, type SlickEventData, Utils as Utils_ } from '../slick.core.js';
+import type { Column, ColumnPickerOption, DOMMouseOrTouchEvent, GridOption, OnColumnsChangedArgs } from '../models/index.js';
+import type { SlickGrid } from '../slick.grid.js';
 
 // for (iife) load Slick methods from global Slick object, or use imports for (esm)
 const BindingEventService = IIFE_ONLY ? Slick.BindingEventService : BindingEventService_;

src/controls/slick.gridmenu.ts

@@ -8,9 +8,9 @@ import type {
   GridOption,
   MenuCommandItem,
   onGridMenuColumnsChangedCallbackArgs
-} from '../models/index';
-import { BindingEventService as BindingEventService_, SlickEvent as SlickEvent_, Utils as Utils_ } from '../slick.core';
-import type { SlickGrid } from '../slick.grid';
+} from '../models/index.js';
+import { BindingEventService as BindingEventService_, SlickEvent as SlickEvent_, Utils as Utils_ } from '../slick.core.js';
+import type { SlickGrid } from '../slick.grid.js';
 
 // for (iife) load Slick methods from global Slick object, or use imports for (esm)
 const BindingEventService = IIFE_ONLY ? Slick.BindingEventService : BindingEventService_;

src/controls/slick.pager.ts

@@ -1,7 +1,7 @@
-import type { PagingInfo } from '../models/index';
-import { BindingEventService as BindingEventService_, SlickGlobalEditorLock as SlickGlobalEditorLock_, Utils as Utils_ } from '../slick.core';
-import type { SlickDataView } from '../slick.dataview';
-import type { SlickGrid } from '../slick.grid';
+import type { PagingInfo } from '../models/index.js';
+import { BindingEventService as BindingEventService_, SlickGlobalEditorLock as SlickGlobalEditorLock_, Utils as Utils_ } from '../slick.core.js';
+import type { SlickDataView } from '../slick.dataview.js';
+import type { SlickGrid } from '../slick.grid.js';
 
 // for (iife) load Slick methods from global Slick object, or use imports for (esm)
 const BindingEventService = IIFE_ONLY ? Slick.BindingEventService : BindingEventService_;

src/global.d.ts

@@ -17,39 +17,39 @@ import type {
   Utils,
   ValueFilterMode,
   WidthEvalMode,
-} from './slick.core';
-import type { SlickDataView } from './slick.dataview';
-import type { SlickGrid } from './slick.grid';
-import type { SlickCompositeEditor } from './slick.compositeeditor';
-import type { SlickColumnMenu } from './controls/slick.columnmenu';
-import type { SlickColumnPicker } from './controls/slick.columnpicker';
-import type { SlickGridMenu } from './controls/slick.gridmenu';
-import type { SlickGridPager } from './controls/slick.pager';
-import type { SlickAutoTooltips } from './plugins/slick.autotooltips';
-import type { SlickCellCopyManager } from './plugins/slick.cellcopymanager';
-import type { SlickCellMenu } from './plugins/slick.cellmenu';
-import type { SlickCheckboxSelectColumn } from './plugins/slick.checkboxselectcolumn';
-import type { SlickContextMenu } from './plugins/slick.contextmenu';
-import type { SlickHeaderButtons } from './plugins/slick.headerbuttons';
-import type { SlickHeaderMenu } from './plugins/slick.headermenu';
-import type { SlickCellExternalCopyManager } from './plugins/slick.cellexternalcopymanager';
-import type { SlickCellRangeDecorator } from './plugins/slick.cellrangedecorator';
-import type { SlickCellRangeSelector } from './plugins/slick.cellrangeselector';
-import type { SlickCellSelectionModel } from './plugins/slick.cellselectionmodel';
-import type { SlickCrossGridRowMoveManager } from './plugins/slick.crossgridrowmovemanager';
-import type { SlickDraggableGrouping } from './plugins/slick.draggablegrouping';
-import type { SlickRowSelectionModel } from './plugins/slick.rowselectionmodel';
-import type { SlickResizer } from './plugins/slick.resizer';
-import type { SlickRowMoveManager } from './plugins/slick.rowmovemanager';
-import type { SlickRowDetailView } from './plugins/slick.rowdetailview';
-import type { SlickState } from './plugins/slick.state';
-import type { SlickGroupItemMetadataProvider } from './slick.groupitemmetadataprovider';
-import type { SlickRemoteModel } from './slick.remotemodel';
-import type { SlickRemoteModelYahoo } from './slick.remotemodel-yahoo';
-import type { Draggable, MouseWheel, Resizable } from './slick.interactions';
-import type { Aggregators } from './slick.dataview';
-import type { Editors } from './slick.editors';
-import type { Formatters } from './slick.formatters';
+} from './slick.core.js';
+import type { SlickDataView } from './slick.dataview.js';
+import type { SlickGrid } from './slick.grid.js';
+import type { SlickCompositeEditor } from './slick.compositeeditor.js';
+import type { SlickColumnMenu } from './controls/slick.columnmenu.js';
+import type { SlickColumnPicker } from './controls/slick.columnpicker.js';
+import type { SlickGridMenu } from './controls/slick.gridmenu.js';
+import type { SlickGridPager } from './controls/slick.pager.js';
+import type { SlickAutoTooltips } from './plugins/slick.autotooltips.js';
+import type { SlickCellCopyManager } from './plugins/slick.cellcopymanager.js';
+import type { SlickCellMenu } from './plugins/slick.cellmenu.js';
+import type { SlickCheckboxSelectColumn } from './plugins/slick.checkboxselectcolumn.js';
+import type { SlickContextMenu } from './plugins/slick.contextmenu.js';
+import type { SlickHeaderButtons } from './plugins/slick.headerbuttons.js';
+import type { SlickHeaderMenu } from './plugins/slick.headermenu.js';
+import type { SlickCellExternalCopyManager } from './plugins/slick.cellexternalcopymanager.js';
+import type { SlickCellRangeDecorator } from './plugins/slick.cellrangedecorator.js';
+import type { SlickCellRangeSelector } from './plugins/slick.cellrangeselector.js';
+import type { SlickCellSelectionModel } from './plugins/slick.cellselectionmodel.js';
+import type { SlickCrossGridRowMoveManager } from './plugins/slick.crossgridrowmovemanager.js';
+import type { SlickDraggableGrouping } from './plugins/slick.draggablegrouping.js';
+import type { SlickRowSelectionModel } from './plugins/slick.rowselectionmodel.js';
+import type { SlickResizer } from './plugins/slick.resizer.js';
+import type { SlickRowMoveManager } from './plugins/slick.rowmovemanager.js';
+import type { SlickRowDetailView } from './plugins/slick.rowdetailview.js';
+import type { SlickState } from './plugins/slick.state.js';
+import type { SlickGroupItemMetadataProvider } from './slick.groupitemmetadataprovider.js';
+import type { SlickRemoteModel } from './slick.remotemodel.js';
+import type { SlickRemoteModelYahoo } from './slick.remotemodel-yahoo.js';
+import type { Draggable, MouseWheel, Resizable } from './slick.interactions.js';
+import type { Aggregators } from './slick.dataview.js';
+import type { Editors } from './slick.editors.js';
+import type { Formatters } from './slick.formatters.js';
 
 declare global {
   // jQuery might still be loaded for SlickRemote plugin

src/index.ts

@@ -1,13 +1,13 @@
-export * from './controls';
-export * from './models';
-export * from './plugins';
-export * from './slick.compositeeditor';
-export * from './slick.core';
-export * from './slick.dataview';
-export * from './slick.editors';
-export * from './slick.formatters';
-export * from './slick.grid';
-export * from './slick.groupitemmetadataprovider';
-export * from './slick.interactions';
-export * from './slick.remotemodel-yahoo';
-export * from './slick.remotemodel';
+export * from './controls/index.js';
+export * from './models/index.js';
+export * from './plugins/index.js';
+export * from './slick.compositeeditor.js';
+export * from './slick.core.js';
+export * from './slick.dataview.js';
+export * from './slick.editors.js';
+export * from './slick.formatters.js';
+export * from './slick.grid.js';
+export * from './slick.groupitemmetadataprovider.js';
+export * from './slick.interactions.js';
+export * from './slick.remotemodel-yahoo.js';
+export * from './slick.remotemodel.js';

src/models/autoSize.interface.ts

@@ -1,4 +1,4 @@
-import type { Formatter } from './formatter.interface';
+import type { Formatter } from './formatter.interface.js';
 
 export interface AutoSize {
   allowAddlPercent?: number;

src/models/cellMenuOption.interface.ts

@@ -2,7 +2,7 @@ import type {
   MenuCallbackArgs,
   MenuCommandItem,
   MenuOptionItem,
-} from './index';
+} from './index.js';
 
 export interface CellMenuOption {
   /** Defaults to true, Auto-align dropup or dropdown menu to the left or right depending on grid viewport available space */

src/models/cellRange.interface.ts

@@ -1,4 +1,4 @@
-import type { SlickCellRangeDecorator } from '../plugins/slick.cellrangedecorator';
+import type { SlickCellRangeDecorator } from '../plugins/slick.cellrangedecorator.js';
 
 export interface CellRangeDecoratorOption {
   selectionCssClass: string;

src/models/checkboxSelectorOption.interface.ts

@@ -1,4 +1,4 @@
-import type { UsabilityOverrideFn } from './usabilityOverrideFn.type';
+import type { UsabilityOverrideFn } from './usabilityOverrideFn.type.js';
 
 export interface CheckboxSelectorOption {
   /**

src/models/column.interface.ts

@@ -11,8 +11,8 @@ import type {
   GroupTotalsFormatter,
   Grouping,
   HeaderButtonsOrMenu
-} from './index';
-import type { SlickGrid } from '../slick.grid';
+} from './index.js';
+import type { SlickGrid } from '../slick.grid.js';
 
 type PathsToStringProps<T> = T extends string | number | boolean | Date ? [] : {
   [K in Extract<keyof T, string>]: [K, ...PathsToStringProps<T[K]>]

src/models/columnPicker.interface.ts

@@ -1,5 +1,5 @@
-import type { Column, GridOption } from './index';
-import type { SlickGrid } from '../slick.grid';
+import type { Column, GridOption } from './index.js';
+import type { SlickGrid } from '../slick.grid.js';
 
 export interface ColumnPickerOption {
   /** Defaults to "Columns" which is the title that shows up over the columns */

src/models/columnReorderFunction.type.ts

@@ -1,5 +1,5 @@
-import type { SlickEvent, SlickGrid } from '../index';
-import type { Column } from './index';
+import type { SlickEvent, SlickGrid } from '../index.js';
+import type { Column } from './index.js';
 
 export type ColumnReorderFunction<C extends Column = Column> = (
   grid: SlickGrid<C>,

src/models/columnSort.interface.ts

@@ -1,4 +1,4 @@
-import type { Column } from './column.interface';
+import type { Column } from './column.interface.js';
 
 export interface ColumnSort {
   /** Column Id to be sorted */

src/models/compositeEditorOption.interface.ts

@@ -1,4 +1,4 @@
-import type { Editor } from './editor.interface';
+import type { Editor } from './editor.interface.js';
 
 export type CompositeEditorModalType = 'create' | 'edit' | 'clone' | 'auto-mass' | 'mass-update' | 'mass-selection';
 

src/models/contextMenuOption.interface.ts

@@ -2,7 +2,7 @@ import type {
   MenuCallbackArgs,
   MenuCommandItem,
   MenuOptionItem,
-} from '../models/index';
+} from '../models/index.js';
 
 export interface ContextMenuOption {
   /** Defaults to true, Auto-align dropup or dropdown menu to the left or right depending on grid viewport available space */

src/models/core.interface.ts

@@ -1,4 +1,4 @@
-import { type SlickEventData } from '../slick.core';
+import { type SlickEventData } from '../slick.core.js';
 
 export type Handler<ArgType = any> = (e: SlickEventData<ArgType>, args: ArgType) => void;
 

src/models/customTooltipOption.interface.ts

@@ -1,5 +1,5 @@
-import type { SlickGrid } from '../slick.grid';
-import type { Column, Formatter } from './index';
+import type { SlickGrid } from '../slick.grid.js';
+import type { Column, Formatter } from './index.js';
 
 export interface Observable<T = any> {
   subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): any;

src/models/dataViewEvents.interface.ts

@@ -1,5 +1,5 @@
-import type { SlickDataView } from '../slick.dataview';
-import type { SlickGrid } from '../slick.grid';
+import type { SlickDataView } from '../slick.dataview.js';
+import type { SlickGrid } from '../slick.grid.js';
 
 export interface OnGroupExpandedEventArgs { level: number; groupingKey: string | number | null; }
 export interface OnGroupCollapsedEventArgs { level: number; groupingKey: string | number | null; }

src/models/drag.interface.ts

@@ -1,4 +1,4 @@
-import type { SlickGrid } from '../slick.grid';
+import type { SlickGrid } from '../slick.grid.js';
 
 export interface DragItem {
   dragSource: HTMLElement | Document | null;

src/models/draggableGroupingOption.interface.ts

@@ -1,4 +1,4 @@
-import type { ColumnReorderFunction, GroupingGetterFunction } from './index';
+import type { ColumnReorderFunction, GroupingGetterFunction } from './index.js';
 
 export interface DraggableGroupingOption {
   /** an extra CSS class to add to the delete button (default undefined), if deleteIconCssClass is undefined then slick-groupby-remove-icon class will be added */

src/models/editCommand.interface.ts

@@ -1,4 +1,4 @@
-import type { Editor } from './editor.interface';
+import type { Editor } from './editor.interface.js';
 
 export interface EditCommand {
   /** The row of the cell being edited */

src/models/editor.interface.ts

@@ -1,4 +1,4 @@
-import type { Column, EditorArguments, EditorValidationResult, GridOption } from './index';
+import type { Column, EditorArguments, EditorValidationResult, GridOption } from './index.js';
 /**
  * SlickGrid Editor interface, more info can be found on the SlickGrid repo
  * https://github.com/6pac/SlickGrid/wiki/Writing-custom-cell-editors

src/models/editorArguments.interface.ts

@@ -1,6 +1,6 @@
-import type { SlickDataView } from '../slick.dataview';
-import type { SlickGrid } from '../slick.grid';
-import type { Column, ElementPosition, GridOption, PositionMethod } from './index';
+import type { SlickDataView } from '../slick.dataview.js';
+import type { SlickGrid } from '../slick.grid.js';
+import type { Column, ElementPosition, GridOption, PositionMethod } from './index.js';
 
 export interface EditorArguments<TData = any, C extends Column<TData> = Column<TData>, O extends GridOption<C> = GridOption<C>> {
   /** Column Definition */

src/models/editorValidator.interface.ts

@@ -1,6 +1,6 @@
-import type { EditorArguments } from './editorArguments.interface';
-import type { EditorValidationResult } from './editorValidationResult.interface';
-import type { Column } from './column.interface';
-import type { GridOption } from './gridOption.interface';
+import type { EditorArguments } from './editorArguments.interface.js';
+import type { EditorValidationResult } from './editorValidationResult.interface.js';
+import type { Column } from './column.interface.js';
+import type { GridOption } from './gridOption.interface.js';
 
 export type EditorValidator = <TData = any, C extends Column<TData> = Column<TData>, O extends GridOption<C> = GridOption<C>>(value: any, args?: EditorArguments<TData, C, O>) => EditorValidationResult;

src/models/excelCopyBufferOption.interface.ts

@@ -1,5 +1,5 @@
-import type { Column, FormatterResultWithHtml, FormatterResultWithText } from './index';
-import type { SlickEventData, SlickRange } from '../slick.core';
+import type { Column, FormatterResultWithHtml, FormatterResultWithText } from './index.js';
+import type { SlickEventData, SlickRange } from '../slick.core.js';
 
 export interface ExcelCopyBufferOption<T = any> {
   /** defaults to 2000(ms), delay in ms to wait before clearing the selection after a paste action */

src/models/externalCopyClipCommand.interface.ts

@@ -1,6 +1,6 @@
-import type { Column, ExcelCopyBufferOption } from './index';
-import type { SlickCellExternalCopyManager } from '../plugins/slick.cellexternalcopymanager';
-import type { SlickRange } from '../slick.core';
+import type { Column, ExcelCopyBufferOption } from './index.js';
+import type { SlickCellExternalCopyManager } from '../plugins/slick.cellexternalcopymanager.js';
+import type { SlickRange } from '../slick.core.js';
 
 export interface ExternalCopyClipCommand {
   activeCell: number;

src/models/formatter.interface.ts

@@ -1,4 +1,4 @@
-import type { Column, FormatterResultWithHtml, FormatterResultWithText } from './index';
-import type { SlickGrid } from '../slick.grid';
+import type { Column, FormatterResultWithHtml, FormatterResultWithText } from './index.js';
+import type { SlickGrid } from '../slick.grid.js';
 
 export declare type Formatter<T = any> = (row: number, cell: number, value: any, columnDef: Column<T>, dataContext: T, grid: SlickGrid) => string | HTMLElement | DocumentFragment | FormatterResultWithHtml | FormatterResultWithText;

src/models/gridEvents.interface.ts

@@ -1,5 +1,5 @@
-import type { Column, CompositeEditorOption, CssStyleHash, Editor, EditorValidationResult, GridOption } from './index';
-import type { SlickGrid } from '../slick.grid';
+import type { Column, CompositeEditorOption, CssStyleHash, Editor, EditorValidationResult, GridOption } from './index.js';
+import type { SlickGrid } from '../slick.grid.js';
 
 export interface SlickGridArg { grid: SlickGrid; }
 export interface OnActiveCellChangedEventArgs extends SlickGridArg { cell: number; row: number; }

src/models/gridMenu.interface.ts

@@ -1,5 +1,5 @@
-import type { Column, } from './index';
-import type { SlickGrid } from '../slick.grid';
+import type { Column, } from './index.js';
+import type { SlickGrid } from '../slick.grid.js';
 
 export interface GridMenuEventBaseCallbackArgs {
   /** list of all column definitions (visible & hidden) */

src/models/gridMenuCommandItemCallbackArgs.interface.ts

@@ -1,5 +1,5 @@
-import type { Column, GridMenuItem, MenuCommandItem } from './index';
-import type { SlickGrid } from '../slick.grid';
+import type { Column, GridMenuItem, MenuCommandItem } from './index.js';
+import type { SlickGrid } from '../slick.grid.js';
 
 
 export interface GridMenuCallbackArgs {

src/models/gridMenuItem.interface.ts

@@ -1,5 +1,5 @@
-import type { GridMenuCallbackArgs, GridMenuCommandItemCallbackArgs, MenuCommandItem } from './index';
-import type { SlickEventData } from '../slick.core';
+import type { GridMenuCallbackArgs, GridMenuCommandItemCallbackArgs, MenuCommandItem } from './index.js';
+import type { SlickEventData } from '../slick.core.js';
 
 export interface GridMenuItem extends MenuCommandItem<GridMenuCommandItemCallbackArgs, GridMenuCallbackArgs> {
   /** @deprecated use `commandItems` instead. Array of Command Items (title, command, disabled, ...) */

src/models/gridMenuOption.interface.ts

@@ -1,10 +1,19 @@
-import type { Column, GridMenuCallbackArgs, GridMenuCommandItemCallbackArgs, GridMenuItem, GridOption, MenuCallbackArgs, MenuCommandItem, } from './index';
+import type {
+  Column,
+  GridMenuCallbackArgs,
+  GridMenuCommandItemCallbackArgs,
+  GridMenuItem,
+  GridOption,
+  MenuCallbackArgs,
+  MenuCommandItem,
+} from './index.js';
 
 export interface GridMenuOption {
   /** Defaults to "Commands" which is the title that shows up over the custom commands list */
   commandTitle?: string;
 
-  /** Array of command items (title, command, disabled, ...) */
+  /** Array of command items (title,
+   * command, disabled, ...) */
   commandItems?: Array<MenuCommandItem<GridMenuCommandItemCallbackArgs, GridMenuCallbackArgs> | 'divider'>;
 
   /** @deprecated use `commandTitle` instead. Defaults to "Commands" which is the title that shows up over the custom commands list */