chore: migrate to typescript and vitest

.eslintrc.js

@@ -1,7 +1,13 @@
-/* @flow */
-
 module.exports = {
-  extends: require.resolve(
-    "@krakenjs/grumbler-scripts/config/.eslintrc-browser"
-  ),
+  extends:
+    "./node_modules/@krakenjs/grumbler-scripts/config/.eslintrc-typescript.js",
+
+  globals: {
+    __TEST__: true,
+  },
+
+  rules: {
+    // off for initial ts conversion
+    "@typescript-eslint/no-implicit-any-catch": "off",
+  },
 };

.github/workflows/main.yml

@@ -27,9 +27,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/grumbler-scripts/config/.babelrc-browser",
+  presets: ["@krakenjs/grumbler-scripts/config/flow-ts-babel-preset"],
+};

package.json

@@ -3,25 +3,27 @@
   "version": "2.0.0",
   "description": "Javascript module template.",
   "main": "index.js",
+  "types": "dist/types/index.d.ts",
   "scripts": {
-    "setup": "npm install && npm run flow-typed",
-    "lint": "eslint src/ test/ *.js --ext .js,.jsx",
-    "flow-typed": "rm -rf ./flow-typed && flow-typed install && flow-typed install mocha@4",
-    "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",
+    "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",
+    "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": [
@@ -92,13 +94,24 @@
     "@commitlint/cli": "^16.2.1",
     "@commitlint/config-conventional": "^16.2.1",
     "@krakenjs/grumbler-scripts": "^7.0.0",
-    "flow-bin": "0.155.0",
-    "husky": "^7.0.4",
+    "@types/webpack": "^5.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "@vitest/ui": "^0.16.0",
+    "c8": "^7.11.0",
+    "flowgen": "^1.16.0",
+    "happy-dom": "^2.55.0",
+    "husky": "^7.0.0",
     "lint-staged": "^12.4.0",
     "prettier": "^2.6.2",
-    "standard-version": "^9.3.2"
+    "standard-version": "^9.3.2",
+    "ts-node": "^10.8.1",
+    "typescript": "4.6.3",
+    "utility-types": "^3.10.0",
+    "vitest": "^0.16.0"
   },
   "lint-staged": {
     "*": "prettier --write --ignore-unknown"
-  }
+  },
+  "dependencies": {}
 }

src/common.js → src/common.ts

@@ -1,17 +1,20 @@
-/* @flow */
+import type { $Values } from "utility-types";
 
 import { TYPE } from "./constants";
 import type { CustomSerializedType } from "./types";
 
-export function isSerializedType(item: mixed): boolean {
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+export function isSerializedType(item: any): boolean {
   return (
     typeof item === "object" &&
     item !== null &&
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     typeof item.__type__ === "string"
   );
 }
 
-export function determineType(val: mixed): $Values<typeof TYPE> | void {
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+export function determineType(val: any): $Values<typeof TYPE> | undefined {
   if (typeof val === "undefined") {
     return TYPE.UNDEFINED;
   }
@@ -33,16 +36,15 @@ export function determineType(val: mixed): $Values<typeof TYPE> | void {
       return TYPE.ERROR;
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     if (typeof val.then === "function") {
       return TYPE.PROMISE;
     }
 
-    // $FlowFixMe method-unbinding
     if (Object.prototype.toString.call(val) === "[object RegExp]") {
       return TYPE.REGEX;
     }
 
-    // $FlowFixMe method-unbinding
     if (Object.prototype.toString.call(val) === "[object Date]") {
       return TYPE.DATE;
     }
@@ -63,7 +65,7 @@ export function determineType(val: mixed): $Values<typeof TYPE> | void {
   }
 }
 
-export function serializeType<T: string, V: mixed>(
+export function serializeType<T extends string, V>(
   type: T,
   val: V
 ): CustomSerializedType<T, V> {

src/constants.ts

@@ -0,0 +1,14 @@
+export const TYPE = {
+  FUNCTION: "function",
+  ERROR: "error",
+  PROMISE: "promise",
+  REGEX: "regex",
+  DATE: "date",
+  ARRAY: "array",
+  OBJECT: "object",
+  STRING: "string",
+  NUMBER: "number",
+  BOOLEAN: "boolean",
+  NULL: "null",
+  UNDEFINED: "undefined",
+} as const;

src/deserialize.js → src/deserialize.ts

@@ -1,17 +1,16 @@
-/* @flow */
-
-import type { Thenable } from "./types";
 import { TYPE } from "./constants";
 import { determineType, isSerializedType } from "./common";
+import type {
+  SerializedError,
+  SerializedRegex,
+  SerializedDate,
+} from "./serializers";
 import {
   deserializeFunction,
   deserializeError,
-  type SerializedError,
   deserializePromise,
   deserializeRegex,
-  type SerializedRegex,
   deserializeDate,
-  type SerializedDate,
   deserializeArray,
   deserializeObject,
   deserializeString,
@@ -20,27 +19,28 @@ import {
   deserializeNull,
   deserializeUndefined,
 } from "./serializers";
+import type { CustomSerializedType } from "./types";
 
-type Deserializer<V: mixed, S: mixed> = (serializedValue: S, key: string) => V;
+type Deserializer<V, S> = (serializedValue: S, key: string) => V;
 type PrimitiveDeserializer<V, S = V> = (serializedValue: S, key: string) => V;
 
 type Deserializers = {
-  function?: Deserializer<Function, *>,
-  error?: Deserializer<Error, SerializedError>,
-  promise?: Deserializer<Thenable, *>,
-  regex?: Deserializer<RegExp, SerializedRegex>,
-  date?: Deserializer<Date, SerializedDate>,
-  array?: PrimitiveDeserializer<$ReadOnlyArray<mixed>>,
-  object?: PrimitiveDeserializer<Object>,
-  string?: PrimitiveDeserializer<string>,
-  number?: PrimitiveDeserializer<number>,
-  boolean?: PrimitiveDeserializer<boolean>,
-  null?: PrimitiveDeserializer<null>,
-  [string]: Deserializer<mixed, *>,
-  undefined?: PrimitiveDeserializer<void>,
+  function: Deserializer<unknown, unknown>;
+  error: Deserializer<Error, SerializedError>;
+  promise: Deserializer<unknown, unknown>;
+  regex: Deserializer<RegExp, SerializedRegex>;
+  date: Deserializer<Date, SerializedDate>;
+  array: PrimitiveDeserializer<ReadonlyArray<unknown>>;
+  object: PrimitiveDeserializer<Record<string, unknown>>;
+  string: PrimitiveDeserializer<string>;
+  number: PrimitiveDeserializer<number>;
+  boolean: PrimitiveDeserializer<boolean>;
+  null: PrimitiveDeserializer<null>;
+  undefined: PrimitiveDeserializer<void>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: Deserializer<unknown, any>;
 };
 
-// $FlowFixMe
 const DESERIALIZER: Deserializers = {
   [TYPE.FUNCTION]: deserializeFunction,
   [TYPE.ERROR]: deserializeError,
@@ -56,19 +56,23 @@ const DESERIALIZER: Deserializers = {
   [TYPE.UNDEFINED]: deserializeUndefined,
 };
 
-// $FlowFixMe
-const defaultDeserializers: Deserializers = {};
+const defaultDeserializers: Partial<Deserializers> = {};
 
-export function deserialize<T: mixed | null | void>(
+export function deserialize<T extends unknown | null>(
   str: string,
-  deserializers: Deserializers = defaultDeserializers
+  deserializers: Partial<Deserializers> = defaultDeserializers
 ): T {
   if (str === TYPE.UNDEFINED) {
-    // $FlowFixMe
+    // the lib allows undefined returns but doesnt expect type assertions for it. need fixing
+    // @ts-ignore
     return;
   }
 
-  function replacer(key, val): ?mixed {
+  function replacer(
+    key: string,
+    val: CustomSerializedType<string, T>
+  ): unknown | null | undefined {
+    // @ts-ignore - function this has unknown caller
     if (isSerializedType(this)) {
       return val;
     }
@@ -88,8 +92,7 @@ export function deserialize<T: mixed | null | void>(
       return value;
     }
 
-    // $FlowFixMe
-    const deserializer = deserializers[type] || DESERIALIZER[type];
+    const deserializer = deserializers[type] ?? DESERIALIZER[type];
 
     if (!deserializer) {
       return value;
@@ -98,5 +101,6 @@ export function deserialize<T: mixed | null | void>(
     return deserializer(value, key);
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
   return JSON.parse(str, replacer);
 }

src/index.js → src/index.ts

@@ -1,5 +1,3 @@
-/* @flow */
-
 export * from "./serialize";
 export * from "./deserialize";
 export * from "./serializers";