Migrate to TypeScript

.babelrc.js

@@ -12,10 +12,9 @@ module.exports = {
       },
     ],
     "@babel/preset-react",
-    "@babel/preset-flow",
+    "@babel/preset-typescript",
   ],
   plugins: [
-    "@babel/plugin-transform-flow-strip-types",
     "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-syntax-import-meta",
     test && "@babel/plugin-transform-react-jsx-source",

.codesandbox/ci.json

@@ -6,5 +6,6 @@
     "/examples/submission-errors",
     "/examples/subscriptions"
   ],
-  "node": "14"
+  "node": "18",
+  "installCommand": "setup"
 }

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Use Node.js ${{ matrix.node_version }}
         uses: actions/setup-node@v2
         with:
-          node-version: "14"
+          node-version: "22"
       - name: Prepare env
         run: yarn install --ignore-scripts --frozen-lockfile
       - name: Run linter
@@ -27,7 +27,7 @@ jobs:
       - name: Use Node.js ${{ matrix.node_version }}
         uses: actions/setup-node@v2
         with:
-          node-version: "14"
+          node-version: "22"
       - name: Prepare env
         run: yarn install --ignore-scripts --frozen-lockfile
       - name: Run prettier
@@ -42,7 +42,7 @@ jobs:
       - name: Use Node.js ${{ matrix.node_version }}
         uses: actions/setup-node@v2
         with:
-          node-version: "14"
+          node-version: "22"
       - name: Prepare env
         run: yarn install --ignore-scripts --frozen-lockfile
       - name: Run unit tests

.gitignore

@@ -9,6 +9,5 @@ lib
 es
 npm-debug.log
 .DS_Store
-yarn.lock
 .yalc
 yalc.lock

README.md

@@ -1,11 +1,3 @@
-[<img src="form-nerd-logo.png" align="left"/>](https://formnerd.co/react-final-form-readme) **You build great forms, but do you know HOW users use your forms? [Find out with Form Nerd!](https://formnerd.co/react-final-form-readme) Professional analytics from the creator of React Final Form.**
-
----
-
-💰 **Wanna get paid the big bucks writing React? [Take this quiz](https://triplebyte.com/a/V6j0KPS/rff) and get offers from top tech companies!** 💰
-
----
-
 # 🏁 React Final Form
 
 [![React Final Form](banner.png)](https://final-form.org/react)

eslint.config.js

@@ -0,0 +1,172 @@
+import js from "@eslint/js";
+import typescriptParser from "@typescript-eslint/parser";
+import typescriptPlugin from "@typescript-eslint/eslint-plugin";
+import reactPlugin from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import jsxA11y from "eslint-plugin-jsx-a11y";
+
+// Manually defined globals to avoid issues with the 'globals' package
+const browserGlobals = {
+  window: "readonly",
+  document: "readonly",
+  navigator: "readonly",
+  console: "readonly",
+  fetch: "readonly",
+  setTimeout: "readonly",
+  HTMLInputElement: "readonly",
+  HTMLElement: "readonly",
+};
+const nodeGlobals = {
+  process: "readonly",
+  require: "readonly",
+  module: "readonly",
+  exports: "writable",
+  __dirname: "readonly",
+  __filename: "readonly",
+  global: "readonly",
+  console: "readonly",
+};
+const jestGlobals = {
+  jest: "readonly",
+  describe: "readonly",
+  it: "readonly",
+  expect: "readonly",
+  afterEach: "readonly",
+  beforeEach: "readonly",
+  test: "readonly",
+  beforeAll: "readonly",
+  afterAll: "readonly",
+};
+
+export default [
+  // Base config for all JS/TS files (can be overridden)
+  {
+    ignores: [
+      "node_modules/**",
+      "dist/**",
+      "coverage/**",
+      "*.min.js",
+      "examples/**",
+    ],
+  },
+  js.configs.recommended, // Apply ESLint recommended rules globally (respecting ignores)
+
+  // Configuration for TypeScript files in src/
+  {
+    files: ["src/**/*.{ts,tsx}"],
+    ignores: ["**/*.test.ts", "**/*.test.tsx"],
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: "./tsconfig.json", // Project-aware linting for src files
+      },
+      globals: {
+        ...browserGlobals,
+        ...nodeGlobals,
+        ...jestGlobals,
+        es2021: true,
+      },
+    },
+    plugins: {
+      "@typescript-eslint": typescriptPlugin,
+      react: reactPlugin,
+      "react-hooks": reactHooks,
+      "jsx-a11y": jsxA11y,
+    },
+    rules: {
+      ...typescriptPlugin.configs.recommended.rules,
+      ...reactPlugin.configs.recommended.rules,
+      "react/react-in-jsx-scope": "off",
+      "react/jsx-uses-react": "off",
+      "jsx-a11y/href-no-hash": "off",
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+      ],
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/no-unsafe-function-type": "off",
+      "react/no-children-prop": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
+      "no-undef": "off", // TypeScript handles this for .ts/.tsx
+    },
+    settings: {
+      react: { version: "detect" },
+    },
+  },
+
+  // Configuration for TypeScript test files in typescript/ (for dtslint, no project parsing)
+  {
+    files: ["typescript/**/*.ts", "typescript/**/*.tsx"],
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaFeatures: { jsx: true }, // Allow JSX in .tsx test files
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
+      globals: {
+        ...browserGlobals,
+        ...nodeGlobals,
+        ...jestGlobals,
+        es2021: true,
+      }, // General globals for TS test files
+    },
+    plugins: {
+      "@typescript-eslint": typescriptPlugin,
+      // Add other plugins if relevant for these test files, e.g., react if they use React
+    },
+    rules: {
+      // Lighter ruleset for .d.ts test files or general TS syntax checking
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "no-unused-vars": "off",
+      "no-undef": "off", // Disable no-undef for TypeScript files
+    },
+  },
+
+  // Configuration for JavaScript files (e.g., .js test files in src/, config files)
+  {
+    files: ["**/*.js", "**/*.jsx"],
+    ignores: ["examples/**"],
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...browserGlobals,
+        ...nodeGlobals,
+        ...jestGlobals,
+        es2021: true,
+      },
+    },
+    plugins: {
+      react: reactPlugin,
+    },
+    rules: {
+      "no-undef": "error",
+      "react/jsx-uses-vars": "warn",
+      "react/react-in-jsx-scope": "off",
+      "no-unused-vars": ["warn", { argsIgnorePattern: "^_" }], // Enforce _ prefix for unused vars in JS files
+    },
+  },
+
+  // Specific overrides for ALL test files (JS and TS)
+  {
+    files: ["**/*.test.js", "**/*.test.jsx", "**/*.test.ts", "**/*.test.tsx"],
+    rules: {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  },
+];

examples/async-redux-submission/asyncSubmissionMiddleware.js

@@ -11,21 +11,18 @@ const submit = async (values) => {
 };
 
 /** This is to mimic the behavior of one of the various Redux async middlewares */
-const asyncSubmissionMiddleware =
-  (store) =>
-  (next: Next) =>
-  (action: Action): State => {
-    if (action && action.type === REGISTER) {
-      submit(action.payload).then(
-        () => store.dispatch({ type: REGISTER_SUCCESS }),
-        (errors) => {
-          // NOTE!! We are passing REGISTER_SUCCESS here because 🏁 Final Form expects
-          // submit errors to come back in a *resolved* promise.
-          store.dispatch({ type: REGISTER_SUCCESS, payload: errors });
-        },
-      );
-    }
-    return next(action);
-  };
+const asyncSubmissionMiddleware = (store) => (next) => (action) => {
+  if (action && action.type === REGISTER) {
+    submit(action.payload).then(
+      () => store.dispatch({ type: REGISTER_SUCCESS }),
+      (errors) => {
+        // NOTE!! We are passing REGISTER_SUCCESS here because 🏁 Final Form expects
+        // submit errors to come back in a *resolved* promise.
+        store.dispatch({ type: REGISTER_SUCCESS, payload: errors });
+      },
+    );
+  }
+  return next(action);
+};
 
 export default asyncSubmissionMiddleware;

examples/async-redux-submission/store.js

@@ -5,13 +5,10 @@ import asyncSubmissionMiddleware from "./asyncSubmissionMiddleware";
 
 const reduxPromiseListener = createReduxPromiseListener();
 
-const logger =
-  (store) =>
-  (next: Next) =>
-  (action: Action): State => {
-    console.log(action);
-    return next(action);
-  };
+const logger = (store) => (next) => (action) => {
+  console.log(action);
+  return next(action);
+};
 
 const reducer = combineReducers({
   registration,