Migrate devtools package to Typescript

.github/workflows/tests.yml

@@ -13,4 +13,5 @@ jobs:
           node-version: 20
       - run: corepack enable
       - run: yarn install --immutable
+      - run: yarn lint
       - run: yarn test

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "yarn workspace @immutable/devtools-extension run dev",
     "build": "yarn workspaces foreach --all -pt run build",
+    "lint": "yarn workspaces foreach --all -pt run lint",
     "test": "yarn workspaces foreach --all -pt run test",
     "version": "node build/update-version.js && git add packages/extension/extension/manifest.json && git add packages/*/package.json && yarn"
   },
@@ -22,6 +23,7 @@
     "@babel/preset-env": "^7.27.2",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^16.0.1",
-    "rollup": "^4.41.0"
+    "rollup": "^4.41.0",
+    "ts-node": "^10.9.2"
   }
 }

packages/devtools/babel.config.json

@@ -1,3 +1,3 @@
 {
-  "presets": ["@babel/preset-env"]
-}
+  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
+}

packages/devtools/jest.config.ts

@@ -0,0 +1,7 @@
+import { Config } from 'jest';
+
+const config: Config = {
+  testPathIgnorePatterns: ['<rootDir>/test.js'],
+};
+
+export default config;

packages/devtools/package.json

@@ -3,12 +3,21 @@
   "type": "module",
   "version": "2.1.1",
   "description": "Chrome Dev Tools formatter for the Immutable JS library",
-  "exports": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c",
+    "build:types": "tsc",
+    "build:module": "rollup -c",
+    "build": "yarn run build:types && yarn run build:module",
+    "lint:types": "tsc --noEmit",
+    "lint": "yarn run lint:types",
     "prepublishOnly": "npm run-script build",
     "test": "jest"
   },
@@ -22,12 +31,14 @@
   "devDependencies": {
     "@babel/core": "^7.27.1",
     "@babel/preset-env": "^7.27.2",
+    "@babel/preset-typescript": "^7.27.1",
     "@jest/globals": "^29.7.0",
     "@rollup/plugin-babel": "^6.0.4",
     "immutable": "^5.1.2",
     "immutable3": "^3.8.1",
     "jest": "^29.7.0",
-    "rollup": "^4.40.2"
+    "rollup": "^4.40.2",
+    "typescript": "^5.8.0"
   },
   "engines": {
     "node": ">=18"

packages/devtools/rollup.config.js → packages/devtools/rollup.config.ts

@@ -1,4 +1,5 @@
 import fs from 'node:fs';
+import type { RollupOptions } from 'rollup';
 import { babel } from '@rollup/plugin-babel';
 import nodeResolve from '@rollup/plugin-node-resolve';
 
@@ -25,14 +26,20 @@ function injectDemoSource() {
   };
 }
 
-const config = [
+const config: Array<RollupOptions> = [
   {
-    input: 'src/index.js',
+    input: 'src/index.ts',
     output: {
       dir: 'dist',
       format: 'es',
     },
-    plugins: [babel({ babelHelpers: 'bundled' })],
+    plugins: [
+      babel({
+        babelHelpers: 'bundled',
+        extensions: ['.js', '.ts'],
+        exclude: 'node_modules/**',
+      }),
+    ],
   },
   {
     input: 'demo/demo.js',

packages/devtools/src/createFormatter.test.js → packages/devtools/src/createFormatter.test.ts

@@ -7,7 +7,7 @@ describe('List', () => {
     const list = List();
 
     const { ListFormatter } = createFormatters({ List, isList });
-
+    
     const formatted = ListFormatter.header(list);
     expect(formatted).toEqual([
       'span',
@@ -21,7 +21,6 @@ describe('List', () => {
       ],
       ['span', '[0]'],
     ]);
-
     expect(ListFormatter.hasBody(list)).toBe(false);
   });
 });