Upgrade deps

.babelrc.js

@@ -1,35 +1,35 @@
-const { NODE_ENV } = process.env
-const test = NODE_ENV === 'test'
-const loose = true
+const { NODE_ENV } = process.env;
+const test = NODE_ENV === "test";
+const loose = true;
 
 module.exports = {
   presets: [
     [
-      '@babel/preset-env',
+      "@babel/preset-env",
       {
         loose,
-        ...(test ? { targets: { node: '8' } } : {})
-      }
+        ...(test ? { targets: { node: "8" } } : {}),
+      },
     ],
-    '@babel/preset-react',
-    '@babel/preset-flow'
+    "@babel/preset-react",
+    "@babel/preset-flow",
   ],
   plugins: [
-    '@babel/plugin-transform-flow-strip-types',
-    '@babel/plugin-syntax-dynamic-import',
-    '@babel/plugin-syntax-import-meta',
-    ['@babel/plugin-proposal-class-properties', { loose }],
-    '@babel/plugin-proposal-json-strings',
+    "@babel/plugin-transform-flow-strip-types",
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    ["@babel/plugin-proposal-class-properties", { loose }],
+    "@babel/plugin-proposal-json-strings",
     [
-      '@babel/plugin-proposal-decorators',
+      "@babel/plugin-proposal-decorators",
       {
-        legacy: true
-      }
+        legacy: true,
+      },
     ],
-    '@babel/plugin-proposal-function-sent',
-    '@babel/plugin-proposal-export-namespace-from',
-    '@babel/plugin-proposal-numeric-separator',
-    '@babel/plugin-proposal-throw-expressions',
-    test && '@babel/plugin-transform-react-jsx-source'
-  ].filter(Boolean)
-}
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-throw-expressions",
+    test && "@babel/plugin-transform-react-jsx-source",
+  ].filter(Boolean),
+};

.codesandbox/ci.json

@@ -5,5 +5,6 @@
     "/examples/field-level-validation",
     "/examples/submission-errors",
     "/examples/subscriptions"
-  ]
+  ],
+  "node": "14"
 }

.eslintrc

@@ -4,6 +4,7 @@
   "rules": {
     "jsx-a11y/href-no-hash": 0,
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    "react-hooks/exhaustive-deps": "warn",
+    "import/no-anonymous-default-export": 0
   }
 }

.github/ci.yml

@@ -0,0 +1,51 @@
+name: CI
+
+on: [push]
+
+jobs:
+  lint:
+    name: Prettier Check
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node_version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+      - name: Prepare env
+        run: yarn install --ignore-scripts --frozen-lockfile
+      - name: Run linter
+        run: yarn start lint
+
+  prettier:
+    name: Prettier Check
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node_version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+      - name: Prepare env
+        run: yarn install --ignore-scripts --frozen-lockfile
+      - name: Run prettier
+        run: yarn start prettier
+
+  test:
+    name: Unit Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node_version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+      - name: Prepare env
+        run: yarn install --ignore-scripts --frozen-lockfile
+      - name: Run unit tests
+        run: yarn start test
+      - name: Run code coverage
+        run: npx codecov

.prettierignore

@@ -0,0 +1,3 @@
+coverage
+dist
+node_modules

.prettierrc

@@ -1,18 +1,3 @@
 {
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "arrowParens": "avoid",
-  "overrides": [
-    {
-      "files": [".prettierrc"],
-      "options": { "parser": "json" }
-    },
-    {
-      "files": ["*.ts*"],
-      "options": {
-        "semi": true
-      }
-    }
-  ]
+  "trailingComma": "all"
 }

.travis.yml

@@ -8,13 +8,13 @@ cache:
 notifications:
   email: false
 node_js:
-  - '10'
-  - '12'
-  - '14'
+  - "10"
+  - "12"
+  - "14"
 script:
   - npm start validate
 after_success:
   - npx codecov
 branches:
   only:
-    - master
+    - main

examples/async-field-level-validation/Styles.js

@@ -27,7 +27,9 @@ const btn = (light, dark) => css`
   }
 `;
 
-const btnDefault = css`${btn("#ffffff", "#d5d5d5")} color: #555;`;
+const btnDefault = css`
+  ${btn("#ffffff", "#d5d5d5")} color: #555;
+`;
 
 const btnPrimary = btn("#4f93ce", "#285f8f");
 

examples/async-field-level-validation/index.js

@@ -1,53 +1,58 @@
-import React from 'react'
-import { render } from 'react-dom'
-import Styles from './Styles'
-import Spinner from './Spinner'
-import { Form, Field } from 'react-final-form'
+import React from "react";
+import { render } from "react-dom";
+import Styles from "./Styles";
+import Spinner from "./Spinner";
+import { Form, Field } from "react-final-form";
 
-const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
-const onSubmit = async values => {
-  await sleep(300)
-  window.alert(JSON.stringify(values, undefined, 2))
-}
+const onSubmit = async (values) => {
+  await sleep(300);
+  window.alert(JSON.stringify(values, undefined, 2));
+};
 
-const required = value => (value ? undefined : 'Required')
-const mustBeNumber = value => (isNaN(value) ? 'Must be a number' : undefined)
-const minValue = min => value =>
-  isNaN(value) || value >= min ? undefined : `Should be greater than ${min}`
-const composeValidators = (...validators) => value =>
-  validators.reduce((error, validator) => error || validator(value), undefined)
+const required = (value) => (value ? undefined : "Required");
+const mustBeNumber = (value) => (isNaN(value) ? "Must be a number" : undefined);
+const minValue = (min) => (value) =>
+  isNaN(value) || value >= min ? undefined : `Should be greater than ${min}`;
+const composeValidators =
+  (...validators) =>
+  (value) =>
+    validators.reduce(
+      (error, validator) => error || validator(value),
+      undefined,
+    );
 
-const simpleMemoize = fn => {
-  let lastArg
-  let lastResult
-  return arg => {
+const simpleMemoize = (fn) => {
+  let lastArg;
+  let lastResult;
+  return (arg) => {
     if (arg !== lastArg) {
-      lastArg = arg
-      lastResult = fn(arg)
+      lastArg = arg;
+      lastResult = fn(arg);
     }
-    return lastResult
-  }
-}
+    return lastResult;
+  };
+};
 
-const usernameAvailable = simpleMemoize(async value => {
+const usernameAvailable = simpleMemoize(async (value) => {
   if (!value) {
-    return 'Required'
+    return "Required";
   }
-  await sleep(400)
+  await sleep(400);
   if (
-    ~['john', 'paul', 'george', 'ringo'].indexOf(value && value.toLowerCase())
+    ~["john", "paul", "george", "ringo"].indexOf(value && value.toLowerCase())
   ) {
-    return 'Username taken!'
+    return "Username taken!";
   }
-})
+});
 
 const App = () => (
   <Styles>
     <h1>
       <span role="img" aria-label="final form flag">
         🏁
-      </span>{' '}
+      </span>{" "}
       React Final Form Example
     </h1>
     <h2>Asynchronous Field-Level Validation</h2>
@@ -107,6 +112,6 @@ const App = () => (
       )}
     />
   </Styles>
-)
+);
 
-render(<App />, document.getElementById('root'))
+render(<App />, document.getElementById("root"));

examples/async-field-level-validation/package.json

@@ -11,10 +11,10 @@
   ],
   "main": "index.js",
   "dependencies": {
-    "final-form": "4.16.1",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-final-form": "6.3.0",
+    "final-form": "4.20.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-final-form": "6.5.3",
     "styled-components": "4.2.0"
   }
-}
+}

examples/async-redux-submission/Styles.js

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import styled, { css } from "styled-components";
 
 const btn = (light, dark) => css`
   white-space: nowrap;
@@ -25,14 +25,14 @@ const btn = (light, dark) => css`
     opacity: 0.6;
     cursor: not-allowed;
   }
-`
+`;
 
 const btnDefault = css`
-  ${btn('#ffffff', '#d5d5d5')} color: #555;
-`
+  ${btn("#ffffff", "#d5d5d5")} color: #555;
+`;
 
-const btnPrimary = btn('#4f93ce', '#285f8f')
-const btnDanger = btn('#e27c79', '#c9302c')
+const btnPrimary = btn("#4f93ce", "#285f8f");
+const btnDanger = btn("#e27c79", "#c9302c");
 
 export default styled.div`
   font-family: sans-serif;
@@ -116,7 +116,7 @@ export default styled.div`
           background: #eee;
         }
       }
-      & > input[type='checkbox'] {
+      & > input[type="checkbox"] {
         margin-top: 7px;
       }
       & > div {
@@ -196,10 +196,10 @@ export default styled.div`
   }
   button {
     margin: 0 10px;
-    &[type='submit'] {
+    &[type="submit"] {
       ${btnPrimary};
     }
-    &[type='button'] {
+    &[type="button"] {
       ${btnDefault};
     }
   }
@@ -210,4 +210,4 @@ export default styled.div`
       padding: 3px 5px;
     }
   }
-`
+`;