fix(build): enable tsconfig strict mode tsconfig

examples/webpack-demo-vanilla-bundle/package.json

@@ -30,29 +30,29 @@
     "@slickgrid-universal/vanilla-bundle": "^0.10.2",
     "bulma": "^0.9.2",
     "moment-mini": "^2.24.0",
-    "whatwg-fetch": "^3.5.0"
+    "whatwg-fetch": "^3.6.1"
   },
   "devDependencies": {
     "@types/jquery": "^3.5.5",
     "@types/moment": "^2.13.0",
-    "@types/node": "^14.14.22",
+    "@types/node": "^14.14.31",
     "@types/webpack": "^4.41.26",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^7.0.0",
-    "css-loader": "^5.0.1",
+    "css-loader": "^5.0.2",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.1.0",
-    "html-loader": "^1.3.2",
-    "html-webpack-plugin": "next",
-    "mini-css-extract-plugin": "^1.3.5",
+    "html-loader": "^2.1.1",
+    "html-webpack-plugin": "5.2.0",
+    "mini-css-extract-plugin": "^1.3.8",
     "node-sass": "5.0.0",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
-    "ts-loader": "^8.0.14",
+    "ts-loader": "^8.0.17",
     "ts-node": "^9.1.1",
     "url-loader": "^4.1.1",
-    "webpack": "^5.19.0",
-    "webpack-cli": "^4.4.0",
+    "webpack": "^5.24.2",
+    "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2"
   }
 }

examples/webpack-demo-vanilla-bundle/webpack.config.js

@@ -60,7 +60,7 @@ module.exports = ({ production } = {}) => ({
       { test: /\.(sass|scss)$/, use: ['css-loader', 'sass-loader'], issuer: /\.html?$/i },
       { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
       { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader' },
-      { test: /\.html$/i, loader: 'html-loader' },
+      { test: /\.html$/i, loader: 'html-loader', options: { esModule: false } },
       { test: /\.ts?$/, use: [{ loader: 'ts-loader', options: { transpileOnly: true } }] }
     ],
   },

package.json

@@ -51,11 +51,11 @@
   },
   "devDependencies": {
     "@types/jest": "^26.0.20",
-    "@types/node": "^14.14.22",
-    "@typescript-eslint/eslint-plugin": "^4.14.2",
-    "@typescript-eslint/parser": "^4.14.2",
-    "cypress": "^6.4.0",
-    "eslint": "^7.19.0",
+    "@types/node": "^14.14.31",
+    "@typescript-eslint/eslint-plugin": "^4.15.2",
+    "@typescript-eslint/parser": "^4.15.2",
+    "cypress": "^6.5.0",
+    "eslint": "^7.20.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "http-server": "^0.12.3",
@@ -67,11 +67,11 @@
     "jsdom": "^16.4.0",
     "jsdom-global": "^3.0.2",
     "lerna": "^3.22.1",
-    "mocha": "^8.2.1",
-    "mochawesome": "^6.2.1",
+    "mocha": "^8.3.0",
+    "mochawesome": "^6.2.2",
     "npm-run-all": "^4.1.5",
-    "ts-jest": "^26.5.0",
-    "typescript": "^4.1.3"
+    "ts-jest": "^26.5.2",
+    "typescript": "^4.2.2"
   },
   "engines": {
     "node": ">=14.15.0",

packages/common/package.json

@@ -78,11 +78,11 @@
     "autoprefixer": "^10.2.4",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "mini-css-extract-plugin": "^1.3.5",
+    "mini-css-extract-plugin": "^1.3.8",
     "node-sass": "5.0.0",
     "nodemon": "^2.0.7",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.2.4",
+    "postcss": "^8.2.6",
     "postcss-cli": "^8.3.1",
     "rimraf": "^3.0.2"
   },

packages/common/src/aggregators/avgAggregator.ts

@@ -2,7 +2,7 @@ import { Aggregator } from './../interfaces/aggregator.interface';
 
 export class AvgAggregator implements Aggregator {
   private _nonNullCount = 0;
-  private _sum: number;
+  private _sum = 0;
   private _field: number | string;
   private _type = 'avg';
 

packages/common/src/aggregators/distinctAggregator.ts

@@ -2,7 +2,7 @@ import { Aggregator } from './../interfaces/aggregator.interface';
 
 export class DistinctAggregator implements Aggregator {
   private _field: number | string;
-  private _distinctValues: any[];
+  private _distinctValues: any[] = [];
   private _type = 'distinct';
 
   constructor(field: number | string) {

packages/common/src/editorValidators/floatValidator.ts

@@ -44,26 +44,26 @@ export function floatValidator(inputValue: any, options: FloatValidatorOptions):
     // when decimal value is bigger than 0, we only accept the decimal values as that value set
     // for example if we set decimalPlaces to 2, we will only accept numbers between 0 and 2 decimals
     isValid = false;
-    outputMsg = errorMsg || Constants.VALIDATION_EDITOR_NUMBER_BETWEEN.replace(/{{minValue}}|{{maxValue}}/gi, (matched) => mapValidation[matched]);
+    outputMsg = errorMsg || Constants.VALIDATION_EDITOR_NUMBER_BETWEEN.replace(/{{minValue}}|{{maxValue}}/gi, (matched) => (mapValidation as any)[matched]);
   } else if (minValue !== undefined && floatNumber !== null && ((operatorConditionalType === 'exclusive' && floatNumber <= minValue) || (operatorConditionalType === 'inclusive' && floatNumber < minValue))) {
     // MIN VALUE ONLY
     // when decimal value is bigger than 0, we only accept the decimal values as that value set
     // for example if we set decimalPlaces to 2, we will only accept numbers between 0 and 2 decimals
     isValid = false;
     const defaultErrorMsg = operatorConditionalType === 'inclusive' ? Constants.VALIDATION_EDITOR_NUMBER_MIN_INCLUSIVE : Constants.VALIDATION_EDITOR_NUMBER_MIN;
-    outputMsg = errorMsg || defaultErrorMsg.replace(/{{minValue}}/gi, (matched) => mapValidation[matched]);
+    outputMsg = errorMsg || defaultErrorMsg.replace(/{{minValue}}/gi, (matched) => (mapValidation as any)[matched]);
   } else if (maxValue !== undefined && floatNumber !== null && ((operatorConditionalType === 'exclusive' && floatNumber >= maxValue) || (operatorConditionalType === 'inclusive' && floatNumber > maxValue))) {
     // MAX VALUE ONLY
     // when decimal value is bigger than 0, we only accept the decimal values as that value set
     // for example if we set decimalPlaces to 2, we will only accept numbers between 0 and 2 decimals
     isValid = false;
     const defaultErrorMsg = operatorConditionalType === 'inclusive' ? Constants.VALIDATION_EDITOR_NUMBER_MAX_INCLUSIVE : Constants.VALIDATION_EDITOR_NUMBER_MAX;
-    outputMsg = errorMsg || defaultErrorMsg.replace(/{{maxValue}}/gi, (matched) => mapValidation[matched]);
+    outputMsg = errorMsg || defaultErrorMsg.replace(/{{maxValue}}/gi, (matched) => (mapValidation as any)[matched]);
   } else if ((decPlaces > 0 && !new RegExp(`^[-+]?(\\d*(\\.)?(\\d){0,${decPlaces}})$`).test(inputValue))) {
     // when decimal value is bigger than 0, we only accept the decimal values as that value set
     // for example if we set decimalPlaces to 2, we will only accept numbers between 0 and 2 decimals
     isValid = false;
-    outputMsg = errorMsg || Constants.VALIDATION_EDITOR_DECIMAL_BETWEEN.replace(/{{minDecimal}}|{{maxDecimal}}/gi, (matched) => mapValidation[matched]);
+    outputMsg = errorMsg || Constants.VALIDATION_EDITOR_DECIMAL_BETWEEN.replace(/{{minDecimal}}|{{maxDecimal}}/gi, (matched) => (mapValidation as any)[matched]);
   }
 
   return { valid: isValid, msg: outputMsg };

packages/common/src/editorValidators/integerValidator.ts

@@ -42,19 +42,19 @@ export function integerValidator(inputValue: any, options: IntegerValidatorOptio
     // when decimal value is bigger than 0, we only accept the decimal values as that value set
     // for example if we set decimalPlaces to 2, we will only accept numbers between 0 and 2 decimals
     isValid = false;
-    outputMsg = errorMsg || Constants.VALIDATION_EDITOR_INTEGER_BETWEEN.replace(/{{minValue}}|{{maxValue}}/gi, (matched) => mapValidation[matched]);
+    outputMsg = errorMsg || Constants.VALIDATION_EDITOR_INTEGER_BETWEEN.replace(/{{minValue}}|{{maxValue}}/gi, (matched) => (mapValidation as any)[matched]);
   } else if (minValue !== undefined && intNumber !== null && ((operatorConditionalType === 'exclusive' && intNumber <= minValue) || (operatorConditionalType === 'inclusive' && intNumber !== null && intNumber < minValue))) {
     // MIN VALUE ONLY
     // when decimal value has to be higher then provided minValue
     isValid = false;
     const defaultErrorMsg = operatorConditionalType === 'inclusive' ? Constants.VALIDATION_EDITOR_INTEGER_MIN_INCLUSIVE : Constants.VALIDATION_EDITOR_INTEGER_MIN;
-    outputMsg = errorMsg || defaultErrorMsg.replace(/{{minValue}}/gi, (matched) => mapValidation[matched]);
+    outputMsg = errorMsg || defaultErrorMsg.replace(/{{minValue}}/gi, (matched) => (mapValidation as any)[matched]);
   } else if (maxValue !== undefined && intNumber !== null && ((operatorConditionalType === 'exclusive' && intNumber >= maxValue) || (operatorConditionalType === 'inclusive' && intNumber !== null && intNumber > maxValue))) {
     // MAX VALUE ONLY
     // when decimal value has to be lower then provided maxValue
     isValid = false;
     const defaultErrorMsg = operatorConditionalType === 'inclusive' ? Constants.VALIDATION_EDITOR_INTEGER_MAX_INCLUSIVE : Constants.VALIDATION_EDITOR_INTEGER_MAX;
-    outputMsg = errorMsg || defaultErrorMsg.replace(/{{maxValue}}/gi, (matched) => mapValidation[matched]);
+    outputMsg = errorMsg || defaultErrorMsg.replace(/{{maxValue}}/gi, (matched) => (mapValidation as any)[matched]);
   }
 
   return { valid: isValid, msg: outputMsg };

packages/common/src/editorValidators/sliderValidator.ts

@@ -34,7 +34,7 @@ export function sliderValidator(inputValue: any, options: SliderValidatorOptions
     return {
       valid: false,
       msg: errorMsg || Constants.VALIDATION_EDITOR_NUMBER_BETWEEN.replace(/{{minValue}}|{{maxValue}}/gi, (matched) => {
-        return mapValidation[matched];
+        return (mapValidation as any)[matched];
       })
     };
   }

packages/common/src/editorValidators/textValidator.ts

@@ -38,19 +38,19 @@ export function textValidator(inputValue: any, options: TextValidatorOptions): E
     // MIN & MAX Length provided
     // make sure text length is between minLength and maxLength
     isValid = false;
-    outputMsg = errorMsg || Constants.VALIDATION_EDITOR_TEXT_LENGTH_BETWEEN.replace(/{{minLength}}|{{maxLength}}/gi, (matched) => mapValidation[matched]);
+    outputMsg = errorMsg || Constants.VALIDATION_EDITOR_TEXT_LENGTH_BETWEEN.replace(/{{minLength}}|{{maxLength}}/gi, (matched) => (mapValidation as any)[matched]);
   } else if (minLength !== undefined && inputValueLength !== null && ((operatorConditionalType === 'exclusive' && inputValueLength <= minLength) || (operatorConditionalType === 'inclusive' && inputValueLength !== null && inputValueLength < minLength))) {
     // MIN Length ONLY
     // when text length is shorter than minLength
     isValid = false;
     const defaultErrorMsg = operatorConditionalType === 'inclusive' ? Constants.VALIDATION_EDITOR_TEXT_MIN_LENGTH_INCLUSIVE : Constants.VALIDATION_EDITOR_TEXT_MIN_LENGTH;
-    outputMsg = errorMsg || defaultErrorMsg.replace(/{{minLength}}/gi, (matched) => mapValidation[matched]);
+    outputMsg = errorMsg || defaultErrorMsg.replace(/{{minLength}}/gi, (matched) => (mapValidation as any)[matched]);
   } else if (maxLength !== undefined && inputValueLength !== null && ((operatorConditionalType === 'exclusive' && inputValueLength >= maxLength) || (operatorConditionalType === 'inclusive' && inputValueLength !== null && inputValueLength > maxLength))) {
     // MAX Length ONLY
     // when text length is longer than minLength
     isValid = false;
     const defaultErrorMsg = operatorConditionalType === 'inclusive' ? Constants.VALIDATION_EDITOR_TEXT_MAX_LENGTH_INCLUSIVE : Constants.VALIDATION_EDITOR_TEXT_MAX_LENGTH;
-    outputMsg = errorMsg || defaultErrorMsg.replace(/{{maxLength}}/gi, (matched) => mapValidation[matched]);
+    outputMsg = errorMsg || defaultErrorMsg.replace(/{{maxLength}}/gi, (matched) => (mapValidation as any)[matched]);
   }
 
   return { valid: isValid, msg: outputMsg };

packages/common/src/editors/autoCompleteEditor.ts

@@ -479,7 +479,7 @@ export class AutoCompleteEditor implements Editor {
       .appendTo(ul);
   }
 
-  renderDomElement(collection: any[]) {
+  renderDomElement(collection?: any[]) {
     if (!Array.isArray(collection)) {
       throw new Error('The "collection" passed to the Autocomplete Editor is not a valid array.');
     }

packages/common/src/editors/selectEditor.ts

@@ -623,7 +623,7 @@ export class SelectEditor implements Editor {
     return outputCollection;
   }
 
-  renderDomElement(inputCollection: any[]) {
+  renderDomElement(inputCollection?: any[]) {
     if (!Array.isArray(inputCollection) && this.collectionOptions?.collectionInsideObjectProperty) {
       const collectionInsideObjectProperty = this.collectionOptions.collectionInsideObjectProperty;
       inputCollection = getDescendantProperty(inputCollection, collectionInsideObjectProperty);

packages/common/src/extensions/extensionUtility.ts

@@ -4,6 +4,7 @@ import { Column } from '../interfaces/column.interface';
 import { SharedService } from '../services/shared.service';
 import { TranslaterService } from '../services';
 import { getTranslationPrefix } from '../services/utilities';
+import { Locale } from '../interfaces/locale.interface';
 
 export class ExtensionUtility {
   constructor(private readonly sharedService: SharedService, private readonly translaterService?: TranslaterService) { }
@@ -26,8 +27,8 @@ export class ExtensionUtility {
     // get locales provided by user in forRoot or else use default English locales via the Constants
     const locales = this.sharedService && this.sharedService.gridOptions && this.sharedService.gridOptions.locales || Constants.locales;
 
-    const title = picker && picker[propName];
-    const titleKey = picker && picker[`${propName}Key`];
+    const title = (picker as any)?.[propName];
+    const titleKey = (picker as any)?.[`${propName}Key`];
     const gridOptions = this.sharedService.gridOptions;
     const translationPrefix = getTranslationPrefix(gridOptions);
 
@@ -114,8 +115,8 @@ export class ExtensionUtility {
   translateItems<T = any>(items: T[], inputKey: string, outputKey: string) {
     if (Array.isArray(items)) {
       for (const item of items) {
-        if (item[inputKey]) {
-          item[outputKey] = this.translaterService && this.translaterService.getCurrentLanguage && this.translaterService.translate && this.translaterService.translate(item[inputKey]);
+        if ((item as any)[inputKey]) {
+          (item as any)[outputKey] = this.translaterService && this.translaterService.getCurrentLanguage && this.translaterService.translate && this.translaterService.translate((item as any)[inputKey]);
         }
       }
     }
@@ -136,7 +137,7 @@ export class ExtensionUtility {
     if (gridOptions.enableTranslate && this.translaterService && this.translaterService.getCurrentLanguage && this.translaterService.translate) {
       text = this.translaterService.translate(translationKey || ' ');
     } else if (locales && locales.hasOwnProperty(localeKey)) {
-      text = locales[localeKey];
+      text = locales[localeKey as keyof Locale] as string;
     } else {
       text = localeKey;
     }

packages/common/src/filter-conditions/booleanFilterCondition.ts

@@ -3,9 +3,9 @@ import { FilterCondition, FilterConditionOption } from './../interfaces/index';
 import { parseBoolean } from '../services/utilities';
 
 /** Execute filter condition check on each cell */
-export const executeBooleanFilterCondition: FilterCondition = (options: FilterConditionOption, parsedSearchValue: boolean | undefined) => {
+export const executeBooleanFilterCondition: FilterCondition = ((options: FilterConditionOption, parsedSearchValue: boolean | undefined) => {
   return parseBoolean(options.cellValue) === parseBoolean(parsedSearchValue);
-};
+}) as FilterCondition;
 
 /**
  * From our search filter value(s), get the parsed value(s).

packages/common/src/filter-conditions/dateFilterCondition.ts

@@ -1,5 +1,5 @@
 import * as moment_ from 'moment-mini';
-const moment = moment_['default'] || moment_; // patch to fix rollup "moment has no default export" issue, document here https://github.com/rollup/rollup/issues/670
+const moment = (moment_ as any)['default'] || moment_; // patch to fix rollup "moment has no default export" issue, document here https://github.com/rollup/rollup/issues/670
 
 import { FieldType, OperatorType, SearchTerm } from '../enums/index';
 import { FilterConditionOption } from '../interfaces/index';

packages/common/src/filter-conditions/filterConditionProcesses.ts

@@ -15,7 +15,7 @@ import { isCollectionOperator } from './filterUtilities';
 export type GeneralizedVariableType = 'boolean' | 'date' | 'number' | 'object' | 'text';
 
 /** Execute mapped condition (per field type) for each cell in the grid */
-export const executeFilterConditionTest: FilterCondition = (options: FilterConditionOption, parsedSearchTerms: SearchTerm | SearchTerm[]) => {
+export const executeFilterConditionTest: FilterCondition = ((options: FilterConditionOption, parsedSearchTerms: SearchTerm | SearchTerm[]) => {
   // when using a multi-select ('IN' operator) we will not use the field type but instead go directly with a collection search
   if (isCollectionOperator(options.operator)) {
     return executeCollectionSearchFilterCondition(options);
@@ -41,7 +41,7 @@ export const executeFilterConditionTest: FilterCondition = (options: FilterCondi
       // the parsedSearchTerms should be single value (result came from getFilterParsedText() method)
       return executeStringFilterCondition(options, parsedSearchTerms as SearchTerm);
   }
-};
+}) as FilterCondition;
 
 /**
  * From our search filter value(s), get their parsed value(s), for example a "dateIso" filter will be parsed as Moment object.

packages/common/src/filter-conditions/numberFilterCondition.ts

@@ -4,7 +4,7 @@ import { isNumber } from '../services/utilities';
 import { testFilterCondition } from './filterUtilities';
 
 /** Execute filter condition check on each cell */
-export const executeNumberFilterCondition: FilterCondition = (options: FilterConditionOption, parsedSearchValues: number[]) => {
+export const executeNumberFilterCondition: FilterCondition = ((options: FilterConditionOption, parsedSearchValues: number[]) => {
   const cellValue = parseFloat(options.cellValue);
   const [searchValue1, searchValue2] = parsedSearchValues;
 
@@ -19,7 +19,7 @@ export const executeNumberFilterCondition: FilterCondition = (options: FilterCon
     return (resultCondition1 && resultCondition2);
   }
   return testFilterCondition(options.operator || '==', cellValue, +searchValue1);
-};
+}) as FilterCondition;
 
 /**
  * From our search filter value(s), get the parsed value(s).

packages/common/src/filter-conditions/objectFilterCondition.ts

@@ -3,7 +3,7 @@ import { FilterCondition, FilterConditionOption } from '../interfaces/index';
 import { compareObjects } from './filterUtilities';
 
 /** Execute filter condition check on each cell */
-export const executeObjectFilterCondition: FilterCondition = (options: FilterConditionOption, parsedSearchValue: SearchTerm | undefined) => {
+export const executeObjectFilterCondition: FilterCondition = ((options: FilterConditionOption, parsedSearchValue: SearchTerm | undefined) => {
   if (parsedSearchValue === undefined && !options.operator) {
     return true;
   }
@@ -21,7 +21,7 @@ export const executeObjectFilterCondition: FilterCondition = (options: FilterCon
     default:
       return compareObjects(options.cellValue, parsedSearchValue, options.dataKey);
   }
-};
+}) as FilterCondition;
 
 /**
  * From our search filter value(s), get the parsed value(s).

packages/common/src/filter-conditions/stringFilterCondition.ts

@@ -3,7 +3,7 @@ import { FilterCondition, FilterConditionOption } from '../interfaces/index';
 import { testFilterCondition } from './filterUtilities';
 
 /** Execute filter condition check on each cell */
-export const executeStringFilterCondition: FilterCondition = (options: FilterConditionOption, parsedSearchValue: string | undefined) => {
+export const executeStringFilterCondition: FilterCondition = ((options: FilterConditionOption, parsedSearchValue: string | undefined) => {
   if (parsedSearchValue === undefined && !options.operator) {
     return true;
   }
@@ -25,7 +25,7 @@ export const executeStringFilterCondition: FilterCondition = (options: FilterCon
     return (cellValue.indexOf(parsedSearchValue) > -1);
   }
   return testFilterCondition(options.operator || '==', cellValue, parsedSearchValue);
-};
+}) as FilterCondition;
 
 /**
  * From our search filter value(s), get the parsed value(s).