chore!: convert to typescript and vitest

.eslintrc.js

@@ -1,9 +1,37 @@
-/* @flow */
-
 module.exports = {
-  extends: require.resolve("@krakenjs/eslint-config-grumbler/eslintrc-browser"),
+  extends:
+    "./node_modules/@krakenjs/eslint-config-grumbler/eslintrc-typescript.js",
 
   rules: {
-    "default-param-last": "off",
+    "keyword-spacing": "off",
+    "@typescript-eslint/keyword-spacing": "off",
+
+    // off for initial ts conversion
+    //  Implicit any in catch clause
+    "@typescript-eslint/no-implicit-any-catch": "off",
+    // Prefer using an optional chain expression instead, as it's more concise and easier to read
+    "@typescript-eslint/prefer-optional-chain": "off",
+    // Prefer using nullish coalescing operator (`??`) instead of a logical or (`||`), as it is a safer operator
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+    // do not use null as a type
+    "@typescript-eslint/ban-types": "off",
+    // assigning something to an any type
+    "@typescript-eslint/no-unsafe-assignment": "off",
+    // returning an any type
+    "@typescript-eslint/no-unsafe-return": "off",
+    // any in a template literal
+    "@typescript-eslint/restrict-template-expressions": "off",
+    // no explicit any
+    "@typescript-eslint/no-explicit-any": "off",
+    // Operands of '+' operation with any is possible only with string, number, bigint or any
+    "@typescript-eslint/restrict-plus-operands": "off",
+    // calling an any
+    "@typescript-eslint/no-unsafe-call": "off",
+    // do not dynamically delete keys
+    "@typescript-eslint/no-dynamic-delete": "off",
+    // for simple iterations use for of
+    "@typescript-eslint/prefer-for-of": "off",
+    // Generic Object Injection Sink
+    "security/detect-object-injection": "off",
   },
 };

.github/workflows/main.yml

@@ -29,9 +29,6 @@ jobs:
       - name: 👕 Lint commit messages
         uses: wagoid/commitlint-github-action@v4
 
-      - name: ▶️ Run flow-typed script
-        run: npm run flow-typed
-
       - name: ▶️ Run build script
         run: npm run build
 

babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  extends: "@krakenjs/babel-config-grumbler/babelrc-browser",
+  presets: ["@krakenjs/babel-config-grumbler/flow-ts-babel-preset"],
+};

index.js

@@ -1,4 +1,2 @@
-/* @flow */
-
-// $FlowFixMe
-module.exports = require("./dist/belter"); // eslint-disable-line import/no-commonjs
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+module.exports = require("./dist/belter");

package.json

@@ -2,26 +2,30 @@
   "name": "@krakenjs/belter",
   "version": "2.2.2",
   "description": "Utilities.",
-  "main": "index.js",
+  "main": "dist/belter.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "sideEffects": false,
   "scripts": {
-    "setup": "npm install && npm run flow-typed",
-    "lint": "eslint src/ test/ *.js",
-    "flow-typed": "flow-typed install",
-    "flow": "flow",
+    "build": "npm run test && npm run babel && npm run webpack && npm run build:types",
+    "build:flow": "find ./dist -type f -not -path './node_modules/*' -name '*.d.ts' -exec sh -c 'flowgen --add-flow-header $1 -o ${1%.*.*}.js.flow' _ '{}' \\;",
+    "build:tsc": "tsc src/* --outDir ./dist/esm --declaration --emitDeclarationOnly --strict",
+    "build:types": "npm run build:tsc && npm run build:flow",
+    "webpack": "cross-env NODE_ENV=production babel-node --plugins=transform-es2015-modules-commonjs ./node_modules/.bin/webpack --progress --output-path dist",
+    "babel": "cross-env NODE_ENV=production babel src/ --out-dir ./dist/esm/ --extensions .ts,.tsx",
+    "tsc": "tsc",
     "format": "prettier --write --ignore-unknown .",
     "format:check": "prettier --check .",
-    "karma": "cross-env NODE_ENV=test babel-node --plugins=transform-es2015-modules-commonjs ./node_modules/.bin/karma start",
-    "babel": "babel src/ --out-dir dist/module",
-    "webpack": "babel-node --plugins=transform-es2015-modules-commonjs ./node_modules/.bin/webpack --progress",
-    "test": "npm run format:check && npm run lint && npm run flow-typed && npm run flow && npm run karma",
-    "build": "npm run test && npm run babel && npm run webpack",
+    "test": "npm run format:check && npm run lint && npm run tsc --no-emit && npm run vitest",
+    "lint": "eslint --ext ts,tsx,js,jsx src/ test/",
     "clean": "rimraf dist coverage",
-    "reinstall": "rimraf flow-typed && rimraf node_modules && npm install && flow-typed install",
-    "debug": "cross-env NODE_ENV=debug",
-    "prepare": "husky install",
     "prerelease": "npm run clean && npm run build && git add dist && git commit -m 'ci: check in dist folder' || echo 'Nothing to distribute'",
     "release": "standard-version",
-    "postrelease": "git push && git push --follow-tags && npm publish"
+    "postrelease": "git push && git push --follow-tags && npm publish",
+    "debug": "cross-env NODE_ENV=debug",
+    "prepare": "husky install",
+    "vitest": "vitest run --dom --coverage",
+    "vitest:watch": "vitest watch --dom --coverage --ui"
   },
   "standard-version": {
     "types": [
@@ -86,22 +90,30 @@
   "license": "Apache-2.0",
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@commitlint/cli": "^16.2.1",
-    "@commitlint/config-conventional": "^16.2.1",
-    "@krakenjs/grumbler-scripts": "^8.0.5",
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
+    "@krakenjs/babel-config-grumbler": "^8.1.0",
+    "@krakenjs/eslint-config-grumbler": "^8.1.0",
+    "@krakenjs/typescript-config-grumbler": "^8.1.0",
+    "@krakenjs/webpack-config-grumbler": "^8.1.0",
+    "@vitest/coverage-c8": "^0.25.3",
+    "@vitest/ui": "^0.25.3",
     "cross-env": "^7.0.3",
-    "flow-bin": "0.155.0",
-    "flow-typed": "^3.8.0",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.4.0",
-    "mocha": "^4.1.0",
-    "prettier": "^2.6.2",
-    "standard-version": "^9.3.2"
+    "flowgen": "^1.20.1",
+    "happy-dom": "^7.7.0",
+    "husky": "^8.0.2",
+    "lint-staged": "^13.0.3",
+    "prettier": "2.7.1",
+    "standard-version": "^9.5.0",
+    "ts-node": "^10.9.1",
+    "typescript": "4.9.3",
+    "vite": "^3.2.4",
+    "vitest": "0.25.3"
   },
   "dependencies": {
-    "@krakenjs/cross-domain-safe-weakmap": "^2.0.2",
-    "@krakenjs/cross-domain-utils": "^3.0.2",
-    "@krakenjs/zalgo-promise": "^2.0.0"
+    "@krakenjs/cross-domain-safe-weakmap": "^3.0.0-typescript.1",
+    "@krakenjs/cross-domain-utils": "^4.0.0-typescript.1",
+    "@krakenjs/zalgo-promise": "^3.0.0-typescript.1"
   },
   "lint-staged": {
     "*": [

src/constants.js → src/constants.ts

@@ -1,5 +1,3 @@
-/* @flow */
-
 export const KEY_CODES = {
   ENTER: 13,
   SPACE: 32,

src/css.js → src/css.ts

@@ -1,5 +1,3 @@
-/* @flow */
-
 export function isPerc(str: string): boolean {
   return typeof str === "string" && /^[0-9]+%$/.test(str);
 }
@@ -13,7 +11,7 @@ export function toNum(val: string | number): number {
     return val;
   }
 
-  const match = val.match(/^([0-9]+)(px|%)$/);
+  const match = /^([0-9]+)(px|%)$/.exec(val);
 
   if (!match) {
     throw new Error(`Could not match css value from ${val}`);
@@ -35,6 +33,7 @@ export function toCSS(val: number | string): string {
 }
 
 export function percOf(num: number, perc: string): number {
+  // @ts-expect-error the operation is already a number so why parseInt instead of Math.floor?
   return parseInt((num * toNum(perc)) / 100, 10);
 }
 

src/decorators.ts

@@ -0,0 +1,27 @@
+import { memoize, promisify } from "./util";
+
+// eslint-disable-next-line no-warning-comments
+// TODO: is this file even used? Can we remove it?
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function memoized(
+  target: Record<string, any>,
+  name: string,
+  descriptor: Record<string, any>
+) {
+  descriptor.value = memoize(descriptor.value, {
+    name,
+    thisNamespace: true,
+  });
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function promise(
+  target: Record<string, any>,
+  name: string,
+  descriptor: Record<string, any>
+) {
+  descriptor.value = promisify(descriptor.value, {
+    name,
+  });
+}