Merge pull request #3 from johnrom/johnrom/formik-core-2

Johnrom/formik core 2

app/package.json

@@ -8,17 +8,17 @@
     "serve": "next start"
   },
   "dependencies": {
-    "format-string-by-pattern": "^1.2.1",
-    "formik": "^2.1.5",
     "@formik/reducer-refs": "^3.0.0-core1",
+    "format-string-by-pattern": "^1.2.1",
+    "formik": "^3.0.0-next.7",
     "next": "9.5.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "yup": "^0.29.3"
   },
   "devDependencies": {
     "@types/node": "^14.14.6",
-    "@types/react": "^16.9.56",
+    "@types/react": "^16.9.55",
     "@types/react-dom": "^16.9.9"
   }
 }

app/pages/format.tsx

@@ -31,7 +31,7 @@ export default function Example() {
                 <Field
                   name={mask.name}
                   type="text"
-                  parse={formatString(mask.parse)}
+                  parse={formatString(mask.parse) as any}
                   placeholder={mask.parse}
                 />
               </label>

app/pages/perf500.tsx

@@ -19,13 +19,13 @@ const Input = (p: FieldHookConfig<string>) => {
   );
 };
 
-const isRequired = (v) => {
+const isRequired = (v: string) => {
   return v && v.trim() !== "" ? undefined : "Required";
 };
 
 const array = new Array(500).fill(undefined);
 
-const initialValues = array.reduce((prev, curr, idx) => {
+const initialValues = array.reduce((prev, _curr, idx) => {
   prev[`Input ${idx}`] = "";
   return prev;
 }, {});

app/pages/perf500v3.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { Formik, Form, useField, FieldHookConfig } from "formik";
+import { Formik, Form, useField, FieldConfig } from "formik";
 
-const Input = (p: FieldHookConfig<string>) => {
+const Input = (p: FieldConfig<string>) => {
   const [field, meta] = useField(p);
   const renders = React.useRef(0);
   return (
@@ -19,13 +19,13 @@ const Input = (p: FieldHookConfig<string>) => {
   );
 };
 
-const isRequired = (v) => {
+const isRequired = (v: string) => {
   return v && v.trim() !== "" ? undefined : "Required";
 };
 
 const array = new Array(500).fill(undefined);
 
-const initialValues = array.reduce((prev, curr, idx) => {
+const initialValues = array.reduce((prev, _curr, idx) => {
   prev[`Input ${idx}`] = "";
   return prev;
 }, {});

app/pages/v3.tsx

@@ -65,14 +65,14 @@ export default function Example() {
                   <CustomFieldOld
                     name={mask.name}
                     type="text"
-                    parse={formatString(mask.parse)}
+                    parse={formatString(mask.parse) as any}
                     placeholder={mask.parse}
                   />
                 ) : (
                   <CustomFieldNew
                     name={mask.name}
                     type="text"
-                    parse={formatString(mask.parse)}
+                    parse={formatString(mask.parse) as any}
                     placeholder={mask.parse}
                   />
                 )}

packages/formik-codemod/tsconfig.json → packages/@formik/codemod/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "module": "commonjs",
     "sourceMap": true,

packages/@formik/reducer-refs/package.json

@@ -46,14 +46,14 @@
     "use-context-selector": "^1.1.2"
   },
   "resolutions": {
-    "@types/react": "16.9.17",
-    "@types/react-dom": "16.9.4"
+    "@types/react": "^16.9.55",
+    "@types/react-dom": "^16.9.9"
   },
   "devDependencies": {
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/lodash": "^4.14.119",
-    "@types/react": "^16.9.17",
-    "@types/react-dom": "^16.9.4",
+    "@types/react": "^16.9.55",
+    "@types/react-dom": "^16.9.9",
     "@types/warning": "^3.0.0",
     "@types/yup": "^0.24.9",
     "just-debounce-it": "^1.1.0",

packages/@formik/reducer-refs/src/ErrorMessage.tsx → packages/@formik/reducer-refs/src/components/ErrorMessage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormikContextType, getIn, isFunction } from '@formik/core';
-import { connect } from './connect';
+import { connect } from '../connect';
 
 export interface ErrorMessageProps {
   name: string;

packages/@formik/reducer-refs/src/components/FastField.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import {
+  GenericFieldHTMLAttributes,
+  FormikValues,
+} from '@formik/core';
+import { FieldConfig, FieldProps } from '../hooks/useField';
+import { Field } from './Field';
+
+/**
+ * @deprecated please use FieldProps (and Field or useField!)
+ */
+export type FastFieldProps<V> = FieldProps<V>;
+
+/**
+ * @deprecated please use FieldConfig (and Field or useField!)
+ */
+export type FastFieldConfig<T> = FieldConfig & {
+  /** Override FastField's default shouldComponentUpdate */
+  shouldUpdate?: (
+    nextProps: T & GenericFieldHTMLAttributes,
+    props: {}
+  ) => boolean;
+};
+
+/**
+ * @deprecated please use FieldAttributes (and Field or useField!)
+ */
+export type FastFieldAttributes<T> = GenericFieldHTMLAttributes &
+  FastFieldConfig<T> &
+  T;
+
+/**
+ * @deprecated Please use Field! We promise it is fast now!
+ */
+export const FastField = <Value extends FormikValues>(
+  { shouldUpdate, ...fieldProps }: FastFieldConfig<Value>
+) => <Field {...fieldProps} />;