Convert to TypeScript

.babelrc

@@ -9,10 +9,9 @@
         }
       }
     ],
-    "@babel/preset-flow"
+    "@babel/preset-typescript"
   ],
   "plugins": [
-    "@babel/plugin-transform-flow-strip-types",
     "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-syntax-import-meta",
     "@babel/plugin-proposal-class-properties",

eslint.config.mjs

@@ -0,0 +1,44 @@
+import js from '@eslint/js'
+import tsPlugin from '@typescript-eslint/eslint-plugin'
+import tsParser from '@typescript-eslint/parser'
+import globals from 'globals'
+
+export default [
+  js.configs.recommended,
+  {
+    files: ['**/*.{js,jsx,ts,tsx,mjs}'],
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jest
+      }
+    },
+    plugins: {
+      '@typescript-eslint': tsPlugin
+    },
+    rules: {
+      ...tsPlugin.configs.recommended.rules,
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_' }
+      ],
+      'no-unused-vars': 'off'
+    }
+  },
+  {
+    ignores: [
+      'node_modules/**',
+      'dist/**',
+      'coverage/**',
+      '.nyc_output/**',
+      '*.config.js',
+      'package-scripts.js',
+      'src/index.d.test.ts'
+    ]
+  }
+]

package-scripts.js

@@ -34,7 +34,7 @@ module.exports = {
         )
       ),
       es: {
-        description: 'run the build with rollup (uses rollup.config.js)',
+        description: 'run the build with rollup (uses rollup.config.mjs)',
         script: 'rollup --config --environment FORMAT:es'
       },
       cjs: {
@@ -57,37 +57,19 @@ module.exports = {
       description: 'Generates table of contents in README',
       script: 'doctoc README.md'
     },
-    copyTypes: series(
-      npsUtils.copy('src/*.js.flow src/*.d.ts dist'),
-      npsUtils.copy(
-        'dist/index.js.flow dist --rename="final-form-arrays.cjs.js.flow"'
-      ),
-      npsUtils.copy(
-        'dist/index.js.flow dist --rename="final-form-arrays.es.js.flow"'
-      )
-    ),
+    copyTypes: series('tsc --declaration --emitDeclarationOnly --outDir dist'),
     lint: {
       description: 'lint the entire project',
       script: 'eslint .'
     },
-    flow: {
-      description: 'flow check the entire project',
-      script: 'flow check'
-    },
     typescript: {
       description: 'typescript check the entire project',
-      script: 'tsc'
+      script: 'tsc --noEmit'
     },
     validate: {
       description:
         'This runs several scripts to make sure things look good before committing or on clean install',
-      default: concurrent.nps(
-        'lint',
-        'flow',
-        'typescript',
-        'build.andTest',
-        'test'
-      )
+      default: concurrent.nps('lint', 'typescript', 'build.andTest', 'test')
     }
   },
   options: {

package.json

@@ -12,7 +12,9 @@
   "scripts": {
     "start": "nps",
     "test": "nps test",
-    "precommit": "lint-staged && npm start validate"
+    "precommit": "lint-staged && npm start validate",
+    "build:types": "tsc --declaration --emitDeclarationOnly --outDir dist",
+    "prebuild": "yarn build:types"
   },
   "author": "Erik Rasmussen <[email protected]> (http://github.com/erikras)",
   "license": "MIT",
@@ -25,52 +27,55 @@
   },
   "homepage": "https://github.com/final-form/final-form-arrays#readme",
   "devDependencies": {
-    "@babel/core": "^7.5.4",
-    "@babel/plugin-external-helpers": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.5.0",
-    "@babel/plugin-proposal-decorators": "^7.4.4",
-    "@babel/plugin-proposal-export-namespace-from": "^7.5.2",
-    "@babel/plugin-proposal-function-sent": "^7.5.0",
-    "@babel/plugin-proposal-json-strings": "^7.0.0",
-    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
-    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-syntax-import-meta": "^7.0.0",
-    "@babel/plugin-transform-flow-strip-types": "^7.4.4",
-    "@babel/plugin-transform-runtime": "^7.5.0",
-    "@babel/preset-env": "^7.5.4",
-    "@babel/preset-flow": "^7.0.0",
+    "@types/jest": "^29.5.14",
+    "@babel/core": "^7.27.1",
+    "@babel/plugin-external-helpers": "^7.27.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.27.1",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/plugin-proposal-function-sent": "^7.27.1",
+    "@babel/plugin-proposal-json-strings": "^7.18.6",
+    "@babel/plugin-proposal-numeric-separator": "^7.18.6",
+    "@babel/plugin-proposal-throw-expressions": "^7.27.1",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/plugin-transform-flow-strip-types": "^7.27.1",
+    "@babel/plugin-transform-runtime": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-typescript": "^7.27.1",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.2",
-    "babel-jest": "^24.8.0",
-    "bundlesize": "^0.18.0",
-    "doctoc": "^1.3.0",
-    "eslint": "^6.0.1",
-    "eslint-config-react-app": "^3.0.6",
-    "eslint-plugin-babel": "^5.3.0",
-    "eslint-plugin-flowtype": "^3.2.1",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.13.0",
-    "final-form": "^4.20.8",
-    "flow-bin": "^0.102.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^29.7.0",
+    "bundlesize": "^0.18.2",
+    "doctoc": "^2.2.1",
+    "@eslint/js": "^9.27.0",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "@typescript-eslint/parser": "^8.32.1",
+    "eslint": "^9.27.0",
+    "globals": "^16.2.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "final-form": "^5.0.0-3",
     "glow": "^1.2.2",
-    "husky": "^3.0.0",
-    "jest": "^24.8.0",
-    "lint-staged": "^9.2.0",
-    "nps": "^5.9.5",
-    "nps-utils": "^1.5.0",
-    "prettier": "^1.18.2",
-    "prettier-eslint-cli": "^5.0.0",
-    "react": "^16.8.6",
-    "rollup": "^1.16.7",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-commonjs": "^10.0.1",
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "lint-staged": "^16.0.0",
+    "nps": "^5.10.0",
+    "nps-utils": "^1.7.0",
+    "prettier": "^3.5.3",
+    "prettier-eslint-cli": "^8.0.1",
+    "react": "^19.1.0",
+    "rollup": "^4.41.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-flow": "^1.1.1",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-uglify": "^6.0.2",
-    "typescript": "^3.5.3"
+    "rollup-plugin-uglify": "^6.0.4",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.8.3",
+    "ts-jest": "^29.2.5"
   },
   "peerDependencies": {
     "final-form": "^4.20.8"
@@ -82,10 +87,21 @@
     ]
   },
   "jest": {
+    "preset": "ts-jest",
     "testEnvironment": "node",
     "testPathIgnorePatterns": [
-      ".*\\.ts"
-    ]
+      "/node_modules/",
+      "src/index.d.test.ts"
+    ],
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx"
+    ],
+    "transform": {
+      "^.+\\.(ts|tsx)$": "ts-jest"
+    }
   },
   "bundlesize": [
     {

rollup.config.js → rollup.config.mjs

@@ -1,9 +1,10 @@
 import resolve from 'rollup-plugin-node-resolve'
 import babel from 'rollup-plugin-babel'
-import flow from 'rollup-plugin-flow'
+import typescript from 'rollup-plugin-typescript2'
 import commonjs from 'rollup-plugin-commonjs'
 import { uglify } from 'rollup-plugin-uglify'
 import replace from 'rollup-plugin-replace'
+import ts from 'typescript'
 
 const minify = process.env.MINIFY
 const format = process.env.FORMAT
@@ -33,7 +34,7 @@ if (es) {
 }
 
 export default {
-  input: 'src/index.js',
+  input: 'src/index.ts',
   output: Object.assign(
     {
       name: 'final-form-arrays',
@@ -43,8 +44,21 @@ export default {
   ),
   external: [],
   plugins: [
-    resolve({ jsnext: true, main: true }),
-    flow(),
+    resolve({
+      mainFields: ['module', 'jsnext:main', 'main'],
+      browser: true,
+      preferBuiltins: false
+    }),
+    typescript({
+      typescript: ts,
+      clean: true,
+      tsconfigOverride: {
+        compilerOptions: {
+          declaration: false,
+          declarationMap: false
+        }
+      }
+    }),
     commonjs({ include: 'node_modules/**' }),
     babel({
       exclude: 'node_modules/**',
@@ -57,12 +71,10 @@ export default {
             modules: false,
             loose: true
           }
-        ],
-        '@babel/preset-flow'
+        ]
       ],
       plugins: [
         ['@babel/plugin-transform-runtime', { useESModules: !cjs }],
-        '@babel/plugin-transform-flow-strip-types',
         '@babel/plugin-syntax-dynamic-import',
         '@babel/plugin-syntax-import-meta',
         '@babel/plugin-proposal-class-properties',

src/concat.test.js → src/concat.test.ts

@@ -1,16 +1,30 @@
 import concat from './concat'
+import { MutableState, Tools } from 'final-form'
 
 describe('concat', () => {
-  const getOp = value => {
+  const getOp = (value: any) => {
     const changeValue = jest.fn()
-    concat(['foo', value], {}, { changeValue })
+    const mockState: MutableState<any> = {
+      fieldSubscribers: {},
+      fields: {},
+      formState: {
+        values: {}
+      }
+    } as any
+    concat(['foo', value], mockState, { changeValue } as unknown as Tools<any>)
     return changeValue.mock.calls[0][2]
   }
 
   it('should call changeValue once', () => {
     const changeValue = jest.fn()
-    const state = {}
-    const result = concat(['foo', ['bar', 'baz']], state, { changeValue })
+    const state: MutableState<any> = {
+      fieldSubscribers: {},
+      fields: {},
+      formState: {
+        values: {}
+      }
+    } as any
+    const result = concat(['foo', ['bar', 'baz']], state, { changeValue } as unknown as Tools<any>)
     expect(result).toBeUndefined()
     expect(changeValue).toHaveBeenCalled()
     expect(changeValue).toHaveBeenCalledTimes(1)
@@ -32,4 +46,4 @@ describe('concat', () => {
     expect(Array.isArray(result)).toBe(true)
     expect(result).toEqual(['a', 'b', 'c', 'd', 'e'])
   })
-})
+}) 

src/concat.js → src/concat.ts

@@ -1,14 +1,13 @@
-// @flow
-import type { MutableState, Mutator, Tools } from 'final-form'
+import { MutableState, Mutator, Tools } from 'final-form'
 
 const concat: Mutator<any> = (
   [name, value]: any[],
   state: MutableState<any>,
   { changeValue }: Tools<any>
-) => {
-  changeValue(state, name, (array: ?(any[])): any[] =>
+): void => {
+  changeValue(state, name, (array?: any[]): any[] =>
     array ? [...array, ...value] : value
   )
 }
 
-export default concat
+export default concat 

src/copyField.js → src/copyField.ts

@@ -1,12 +1,9 @@
-// @flow
-import type { InternalFieldState } from 'final-form/dist/types'
-
 function copyField(
-  oldFields: { [string]: InternalFieldState },
+  oldFields: { [key: string]: any },
   oldKey: string,
-  newFields: { [string]: InternalFieldState },
+  newFields: { [key: string]: any },
   newKey: string
-) {
+): void {
   newFields[newKey] = {
     ...oldFields[oldKey],
     name: newKey,
@@ -32,4 +29,4 @@ function copyField(
   }
 }
 
-export default copyField
+export default copyField 

src/index.d.test.ts

@@ -1,10 +1,10 @@
 // tslint:disable no-console
 
-import { Config, createForm, AnyObject } from 'final-form'
+import { Config, createForm } from 'final-form'
 import arrayMutators from './index'
 import { Mutators } from './index'
 
-const onSubmit: Config['onSubmit'] = (values, callback) => {}
+const onSubmit: Config['onSubmit'] = (_values, _callback) => { }
 
 const form = createForm({
   mutators: { ...arrayMutators },