formula-one - npm Package Compare versions

Comparing version 0.6.5 to 0.7.0

CHANGELOG.md

 # Changelog
 
+### v0.7.0
+
+- Fix the types of the links produced by all `Field`s. This breakage occurred because `React.ElementConfig` is broken for components with a type parameter.
+- Add type tests to ensure the types stay working.
+
 ### v0.6.4
@@ -4,0 +9,0 @@

dist/ArrayField.js

@@ -13,12 +13,2 @@ "use strict";
 
-exports.default = function (props) {
-  return React.createElement(
-    _Form.FormContext.Consumer,
-    null,
-    function (formContext) {
-      return React.createElement(ArrayField, _extends({}, props, { formContext: formContext }));
-    }
-  );
-};
-
 var _react = require("react");
@@ -188,2 +178,14 @@
   }
-};
+};
+function wrap(props) {
+  return React.createElement(
+    _Form.FormContext.Consumer,
+    null,
+    function (formContext) {
+      return React.createElement(ArrayField, _extends({}, props, { formContext: formContext }));
+    }
+  );
+}
+wrap.defaultProps = ArrayField.defaultProps;
+
+exports.default = wrap;

dist/Field.js

@@ -13,12 +13,2 @@ "use strict";
 
-exports.default = function (props) {
-  return React.createElement(
-    _Form.FormContext.Consumer,
-    null,
-    function (formContext) {
-      return React.createElement(Field, _extends({}, props, { formContext: formContext }));
-    }
-  );
-};
-
 var _react = require("react");
@@ -144,2 +134,16 @@
   }
-};
+};
+
+
+function wrap(props) {
+  return React.createElement(
+    _Form.FormContext.Consumer,
+    null,
+    function (formContext) {
+      return React.createElement(Field, _extends({}, props, { formContext: formContext }));
+    }
+  );
+}
+wrap.defaultProps = Field.defaultProps;
+
+exports.default = wrap;

dist/ObjectField.js

@@ -13,12 +13,2 @@ "use strict";
 
-exports.default = function (props) {
-  return React.createElement(
-    _Form.FormContext.Consumer,
-    null,
-    function (formContext) {
-      return React.createElement(ObjectField, _extends({}, props, { formContext: formContext }));
-    }
-  );
-};
-
 var _react = require("react");
@@ -153,2 +143,14 @@
   }
-};
+};
+function wrap(props) {
+  return React.createElement(
+    _Form.FormContext.Consumer,
+    null,
+    function (formContext) {
+      return React.createElement(ObjectField, _extends({}, props, { formContext: formContext }));
+    }
+  );
+}
+wrap.defaultProps = ObjectField.defaultProps;
+
+exports.default = wrap;

dist/test/ArrayField.test.js

@@ -17,2 +17,4 @@ "use strict";
 
+require("../types");
+
 var _tools = require("./tools");
@@ -27,2 +29,28 @@
     describe("validates on mount", function () {
+      it("ensures that the link inner type matches the type of the validation", function () {
+        var formState = (0, _tools.mockFormState)(["one", "two", "three"]);
+        var link = (0, _tools.mockLink)(formState);
+
+        // $ExpectError
+        React.createElement(
+          _ArrayField2.default,
+          { link: link, validation: function validation(_e) {
+              return [];
+            } },
+          function () {
+            return null;
+          }
+        );
+
+        React.createElement(
+          _ArrayField2.default,
+          { link: link, validation: function validation(_e) {
+              return [];
+            } },
+          function () {
+            return null;
+          }
+        );
+      });
+
       it("Sets errors.client and meta.succeeded when there are no errors", function () {
@@ -157,2 +185,25 @@ var validation = jest.fn(function () {
 
+    it("has the correct type for the links object", function () {
+      var formState = (0, _tools.mockFormState)(["one", "two", "three"]);
+      var link = (0, _tools.mockLink)(formState);
+
+      React.createElement(
+        _ArrayField2.default,
+        { link: link },
+        function (links) {
+          console.log(links);
+          return null;
+        }
+      );
+
+      React.createElement(
+        _ArrayField2.default,
+        { link: link },
+        function (links) {
+          console.log(links);
+          return null;
+        }
+      );
+    });
+
     it("calls onChange when a child changes", function () {
@@ -159,0 +210,0 @@ var formStateValue = ["one", "two", "three"];

dist/test/Field.test.js

@@ -33,2 +33,28 @@ "use strict";
   describe("validates on mount", function () {
+    it("ensures that the link inner type matches the type of the validation", function () {
+      var formState = (0, _tools.mockFormState)("Hello world.");
+      var link = (0, _tools.mockLink)(formState);
+
+      // $ExpectError
+      React.createElement(
+        _Field2.default,
+        { link: link, validation: function validation(_e) {
+            return [];
+          } },
+        function () {
+          return null;
+        }
+      );
+
+      React.createElement(
+        _Field2.default,
+        { link: link, validation: function validation(_e) {
+            return [];
+          } },
+        function () {
+          return null;
+        }
+      );
+    });
+
     it("Sets errors.client and meta.succeeded when there are no errors", function () {
@@ -155,2 +181,44 @@ var formState = (0, _tools.mockFormState)("Hello world.");
 
+  it("Passes value of the right type to its render function", function () {
+    var formState = (0, _tools.mockFormState)("Hello there");
+    var link = (0, _tools.mockLink)(formState);
+
+    React.createElement(
+      _Field2.default,
+      { link: link },
+      function (_value) {
+        return null;
+      }
+    );
+
+    React.createElement(
+      _Field2.default,
+      { link: link },
+      function (_value) {
+        return null;
+      }
+    );
+  });
+
+  it("Passes onChange of the right type to its render function", function () {
+    var formState = (0, _tools.mockFormState)("Hello there");
+    var link = (0, _tools.mockLink)(formState);
+
+    React.createElement(
+      _Field2.default,
+      { link: link },
+      function (_value, _errors, _onChange) {
+        return null;
+      }
+    );
+
+    React.createElement(
+      _Field2.default,
+      { link: link },
+      function (_value, _errors, _onChange) {
+        return null;
+      }
+    );
+  });
+
   it("Passes additional information to its render function", function () {
@@ -157,0 +225,0 @@ var formState = (0, _tools.mockFormState)(10);

dist/test/ObjectField.test.js

@@ -17,2 +17,4 @@ "use strict";
 
+require("../types");
+
 var _tools = require("./tools");
@@ -27,2 +29,43 @@
     describe("validates on mount", function () {
+      it("ensures that the link inner type matches the type of the validation", function () {
+        var formStateInner = {
+          string: "hello",
+          number: 42
+        };
+        var formState = (0, _tools.mockFormState)(formStateInner);
+        var link = (0, _tools.mockLink)(formState);
+
+        // $ExpectError
+        React.createElement(
+          _ObjectField2.default,
+          { link: link, validation: function validation(_e) {
+              return [];
+            } },
+          function () {
+            return null;
+          }
+        );
+
+        // $ExpectError
+        React.createElement(
+          _ObjectField2.default,
+          { link: link, validation: function validation(_e) {
+              return [];
+            } },
+          function () {
+            return null;
+          }
+        );
+
+        React.createElement(
+          _ObjectField2.default,
+          { link: link, validation: function validation(_e) {
+              return [];
+            } },
+          function () {
+            return null;
+          }
+        );
+      });
+
       it("Sets errors.client and meta.succeeded when there are no errors", function () {
@@ -156,3 +199,3 @@ var validation = jest.fn(function () {
       var objectLinks = renderFn.mock.calls[0][0];
-      expect(Object.keys(objectLinks)).toEqual(Object.keys(objectLinks));
+      expect(Object.keys(objectLinks)).toEqual(Object.keys(formStateInner));
       Object.keys(formStateInner).forEach(function (k) {
@@ -165,2 +208,38 @@ expect(objectLinks).toHaveProperty(k);
 
+    it("has the correct type for the links object", function () {
+      var formStateInner = {
+        string: "hello",
+        number: 42
+      };
+      var formState = (0, _tools.mockFormState)(formStateInner);
+      var link = (0, _tools.mockLink)(formState);
+
+      React.createElement(
+        _ObjectField2.default,
+        { link: link },
+        function (links) {
+          console.log(links);
+          return null;
+        }
+      );
+
+      React.createElement(
+        _ObjectField2.default,
+        { link: link },
+        function (links) {
+          console.log(links);
+          return null;
+        }
+      );
+
+      React.createElement(
+        _ObjectField2.default,
+        { link: link },
+        function (links) {
+          console.log(links);
+          return null;
+        }
+      );
+    });
+
     it("calls onChange when a child changes", function () {
@@ -167,0 +246,0 @@ var formStateInner = {

package.json

 {
   "name": "formula-one",
-  "version": "0.6.5",
+  "version": "0.7.0",
   "description": "Strongly-typed React form state management",
@@ -5,0 +5,0 @@ "author": "Zach Gotsch",

src/ArrayField.js

@@ -228,8 +228,3 @@ // @flow strict
 // Using a HOC here is not possible due to a Flow bug: https://github.com/facebook/flow/issues/6903
-export default function(
-  props: $Diff<
-    React.ElementConfig<typeof ArrayField>,
-    {+formContext: FormContextPayload}
-  >
-) {
+function wrap<E>(props: $Diff<Props<E>, {+formContext: FormContextPayload}>) {
   return (
@@ -241,1 +236,4 @@ <FormContext.Consumer>
 }
+wrap.defaultProps = ArrayField.defaultProps;
+
+export default wrap;

src/Field.js

@@ -99,8 +99,3 @@ // @flow strict
 
-export default function(
-  props: $Diff<
-    React.ElementConfig<typeof Field>,
-    {+formContext: FormContextPayload}
-  >
-) {
+function wrap<T>(props: $Diff<Props<T>, {+formContext: FormContextPayload}>) {
   return (
@@ -112,1 +107,4 @@ <FormContext.Consumer>
 }
+wrap.defaultProps = Field.defaultProps;
+
+export default wrap;

src/ObjectField.js

@@ -160,7 +160,4 @@ // @flow strict
 // Using a HOC here is not possible due to a Flow bug: https://github.com/facebook/flow/issues/6903
-export default function(
-  props: $Diff<
-    React.ElementConfig<typeof ObjectField>,
-    {+formContext: FormContextPayload}
-  >
+function wrap<T: {}>(
+  props: $Diff<Props<T>, {+formContext: FormContextPayload}>
 ) {
@@ -173,1 +170,4 @@ return (
 }
+wrap.defaultProps = ObjectField.defaultProps;
+
+export default wrap;

src/test/ArrayField.test.js

@@ -6,2 +6,3 @@ // @flow
 import ArrayField from "../ArrayField";
+import {type FieldLink} from "../types";
 
@@ -13,2 +14,16 @@ import {expectLink, mockLink, mockFormState} from "./tools";
     describe("validates on mount", () => {
+      it("ensures that the link inner type matches the type of the validation", () => {
+        const formState = mockFormState(["one", "two", "three"]);
+        const link = mockLink(formState);
+
+        // $ExpectError
+        <ArrayField link={link} validation={(_e: empty) => []}>
+          {() => null}
+        </ArrayField>;
+
+        <ArrayField link={link} validation={(_e: Array<string>) => []}>
+          {() => null}
+        </ArrayField>;
+      });
+
       it("Sets errors.client and meta.succeeded when there are no errors", () => {
@@ -117,2 +132,22 @@ const validation = jest.fn(() => []);
 
+    it("has the correct type for the links object", () => {
+      const formState = mockFormState(["one", "two", "three"]);
+      const link = mockLink(formState);
+
+      <ArrayField link={link}>
+        {/* $ExpectError */}
+        {(links: empty) => {
+          console.log(links);
+          return null;
+        }}
+      </ArrayField>;
+
+      <ArrayField link={link}>
+        {(links: Array<FieldLink<string>>) => {
+          console.log(links);
+          return null;
+        }}
+      </ArrayField>;
+    });
+
     it("calls onChange when a child changes", () => {
@@ -119,0 +154,0 @@ const formStateValue = ["one", "two", "three"];

src/test/Field.test.js

@@ -13,2 +13,16 @@ // @flow
   describe("validates on mount", () => {
+    it("ensures that the link inner type matches the type of the validation", () => {
+      const formState = mockFormState("Hello world.");
+      const link = mockLink(formState);
+
+      // $ExpectError
+      <Field link={link} validation={(_e: empty) => []}>
+        {() => null}
+      </Field>;
+
+      <Field link={link} validation={(_e: string) => []}>
+        {() => null}
+      </Field>;
+    });
+
     it("Sets errors.client and meta.succeeded when there are no errors", () => {
@@ -127,2 +141,28 @@ const formState = mockFormState("Hello world.");
 
+  it("Passes value of the right type to its render function", () => {
+    const formState = mockFormState("Hello there");
+    const link = mockLink(formState);
+
+    <Field link={link}>
+      {/* $ExpectError */}
+      {(_value: empty) => null}
+    </Field>;
+
+    <Field link={link}>{(_value: string) => null}</Field>;
+  });
+
+  it("Passes onChange of the right type to its render function", () => {
+    const formState = mockFormState("Hello there");
+    const link = mockLink(formState);
+
+    <Field link={link}>
+      {/* $ExpectError */}
+      {(_value, _errors, _onChange: empty) => null}
+    </Field>;
+
+    <Field link={link}>
+      {(_value, _errors, _onChange: string => void) => null}
+    </Field>;
+  });
+
   it("Passes additional information to its render function", () => {
@@ -129,0 +169,0 @@ const formState = mockFormState(10);

src/test/ObjectField.test.js

@@ -6,2 +6,3 @@ // @flow
 import ObjectField from "../ObjectField";
+import {type FieldLink} from "../types";
 
@@ -13,2 +14,29 @@ import {expectLink, mockLink, mockFormState} from "./tools";
     describe("validates on mount", () => {
+      it("ensures that the link inner type matches the type of the validation", () => {
+        type TestObject = {|
+          string: string,
+          number: number,
+        |};
+        const formStateInner: TestObject = {
+          string: "hello",
+          number: 42,
+        };
+        const formState = mockFormState(formStateInner);
+        const link: FieldLink<TestObject> = mockLink(formState);
+
+        // $ExpectError
+        <ObjectField link={link} validation={(_e: empty) => []}>
+          {() => null}
+        </ObjectField>;
+
+        // $ExpectError
+        <ObjectField link={link} validation={(_e: {|string: string|}) => []}>
+          {() => null}
+        </ObjectField>;
+
+        <ObjectField link={link} validation={(_e: TestObject) => []}>
+          {() => null}
+        </ObjectField>;
+      });
+
       it("Sets errors.client and meta.succeeded when there are no errors", () => {
@@ -115,3 +143,3 @@ const validation = jest.fn(() => []);
       const objectLinks = renderFn.mock.calls[0][0];
-      expect(Object.keys(objectLinks)).toEqual(Object.keys(objectLinks));
+      expect(Object.keys(objectLinks)).toEqual(Object.keys(formStateInner));
       Object.keys(formStateInner).forEach(k => {
@@ -124,2 +152,38 @@ expect(objectLinks).toHaveProperty(k);
 
+    it("has the correct type for the links object", () => {
+      type TestObject = {|
+        string: string,
+        number: number,
+      |};
+      const formStateInner: TestObject = {
+        string: "hello",
+        number: 42,
+      };
+      const formState = mockFormState(formStateInner);
+      const link: FieldLink<TestObject> = mockLink(formState);
+
+      <ObjectField link={link}>
+        {/* $ExpectError */}
+        {(links: empty) => {
+          console.log(links);
+          return null;
+        }}
+      </ObjectField>;
+
+      <ObjectField link={link}>
+        {/* $ExpectError */}
+        {(links: {|string: FieldLink<string>|}) => {
+          console.log(links);
+          return null;
+        }}
+      </ObjectField>;
+
+      <ObjectField link={link}>
+        {(links: {|string: FieldLink<string>, number: FieldLink<number>|}) => {
+          console.log(links);
+          return null;
+        }}
+      </ObjectField>;
+    });
+
     it("calls onChange when a child changes", () => {
@@ -126,0 +190,0 @@ const formStateInner = {

src/test/tools.js

@@ -8,3 +8,3 @@ // @flow
 
-export function mockFormState(value: mixed): FormState<mixed> {
+export function mockFormState<T>(value: T): FormState<T> {
   return [
@@ -31,5 +31,5 @@ value,
 
-export function mockLink(formState: FormState<any>): FieldLink<any> {
+export function mockLink<T>(formState: FormState<T>): FieldLink<T> {
   return {
-    formState: formState,
+    formState,
     onChange: jest.fn(),
@@ -36,0 +36,0 @@ onBlur: jest.fn(),

No alert changes

Improved metrics

Total package byte prevSize

267781

increased by3.59%

Lines of code

6544

increased by4.6%

No dependency changes