Socket
Socket
Sign inDemoInstall

formula-one

Package Overview
Dependencies
0
Maintainers
4
Versions
44
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.9.4 to 0.9.5

5

CHANGELOG.md
# Changelog
### v0.9.5
- Update Flow and other dev dependencies
- Add React 17 compatibility
### v0.9.4

@@ -4,0 +9,0 @@

1

dist/Form.js

@@ -73,2 +73,3 @@ "use strict";

// flowlint-next-line unclear-type:off
var noOps = {

@@ -75,0 +76,0 @@ unregister: function unregister() {},

6

dist/shapedTree.js

@@ -96,3 +96,3 @@ "use strict";

if (firstPart.type === "object" && Object.hasOwnProperty.call(data, firstPart.key)) {
// $FlowFixMe: This is safe
// $FlowFixMe[incompatible-use]: This is safe
var restPath = shapePath(data[firstPart.key], restParts);

@@ -201,3 +201,3 @@

(0, _invariant["default"])(0 <= firstStep.index && firstStep.index < tree.children.length, "Tried to take path index ".concat(firstStep.index, " but array from tree has length ").concat(tree.children.length));
var newChild = updateAtPath(restStep, updater, tree.children[firstStep.index]); // $FlowFixMe(zach): I think this is safe, might need GADTs for the type checker to understand why
var newChild = updateAtPath(restStep, updater, tree.children[firstStep.index]); // $FlowFixMe[incompatible-return](zach): I think this is safe, might need GADTs for the type checker to understand why

@@ -212,3 +212,3 @@ return dangerouslyReplaceArrayChild(firstStep.index, newChild, tree);

var _newChild = updateAtPath(restStep, updater, nextTree); // $FlowFixMe(zach): I think this is safe, might need GADTs for the type checker to understand why
var _newChild = updateAtPath(restStep, updater, nextTree); // $FlowFixMe[incompatible-return](zach): I think this is safe, might need GADTs for the type checker to understand why

@@ -215,0 +215,0 @@

@@ -33,3 +33,3 @@ "use strict";

var formState = (0, _tools.mockFormState)(["one", "two", "three"]);
var link = (0, _tools.mockLink)(formState); // $ExpectError
var link = (0, _tools.mockLink)(formState); // $FlowExpectedError[incompatible-type]

@@ -108,3 +108,3 @@ React.createElement(_ArrayField["default"], {

it("Passes additional information to its render function", function () {
var formState = (0, _tools.mockFormState)(["value"]); // $FlowFixMe
var formState = (0, _tools.mockFormState)(["value"]); // $FlowFixMe[incompatible-use]

@@ -111,0 +111,0 @@ formState[1].data.errors = {

@@ -16,3 +16,4 @@ "use strict";

it("returns true when the field is touched", function () {
// $FlowFixMe
// $FlowFixMe[prop-missing]
// $FlowFixMe[incompatible-call]
expect(_feedbackStrategies["default"].Touched(null, {

@@ -23,3 +24,4 @@ touched: true

it("returns false when the field is not touched", function () {
// $FlowFixMe
// $FlowFixMe[prop-missing]
// $FlowFixMe[incompatible-call]
expect(_feedbackStrategies["default"].Touched(null, {

@@ -32,3 +34,4 @@ touched: false

it("returns true when the field is blurred", function () {
// $FlowFixMe
// $FlowFixMe[prop-missing]
// $FlowFixMe[incompatible-call]
expect(_feedbackStrategies["default"].Blurred(null, {

@@ -39,3 +42,4 @@ blurred: true

it("returns false when the field is not blurred", function () {
// $FlowFixMe
// $FlowFixMe[prop-missing]
// $FlowFixMe[incompatible-call]
expect(_feedbackStrategies["default"].Blurred(null, {

@@ -48,3 +52,4 @@ blurred: false

it("returns true when the field is changed", function () {
// $FlowFixMe
// $FlowFixMe[prop-missing]
// $FlowFixMe[incompatible-call]
expect(_feedbackStrategies["default"].Changed(null, {

@@ -55,3 +60,4 @@ changed: true

it("returns false when the field is not changed", function () {
// $FlowFixMe
// $FlowFixMe[prop-missing]
// $FlowFixMe[incompatible-call]
expect(_feedbackStrategies["default"].Changed(null, {

@@ -64,3 +70,4 @@ changed: false

it("returns true when the field has passed client validations in the past", function () {
expect( // $FlowFixMe
expect( // $FlowFixMe[prop-missing]
// $FlowFixMe[incompatible-call]
_feedbackStrategies["default"].ClientValidationSucceeded(null, {

@@ -71,3 +78,4 @@ succeeded: true

it("returns false when the field has not passed client validations in the past", function () {
expect( // $FlowFixMe
expect( // $FlowFixMe[prop-missing]
// $FlowFixMe[incompatible-call]
_feedbackStrategies["default"].ClientValidationSucceeded(null, {

@@ -80,3 +88,3 @@ succeeded: false

it("returns true when the form is pristine", function () {
// $FlowFixMe
// $FlowFixMe[prop-missing]
expect(_feedbackStrategies["default"].Pristine({

@@ -87,3 +95,3 @@ pristine: true

it("returns false when the form is not pristine", function () {
// $FlowFixMe
// $FlowFixMe[prop-missing]
expect(_feedbackStrategies["default"].Pristine({

@@ -96,3 +104,3 @@ pristine: false

it("returns true when the form is submitted", function () {
// $FlowFixMe
// $FlowFixMe[prop-missing]
expect(_feedbackStrategies["default"].Submitted({

@@ -103,3 +111,3 @@ submitted: true

it("returns false when the form is not submitted", function () {
// $FlowFixMe
// $FlowFixMe[prop-missing]
expect(_feedbackStrategies["default"].Submitted({

@@ -121,3 +129,3 @@ submitted: false

function callStrategy(strategy) {
// $FlowFixMe
// $FlowFixMe[incompatible-call]
return strategy();

@@ -124,0 +132,0 @@ }

@@ -30,3 +30,3 @@ "use strict";

var formState = (0, _tools.mockFormState)("Hello world.");
var link = (0, _tools.mockLink)(formState); // $ExpectError
var link = (0, _tools.mockLink)(formState); // $FlowExpectedError[incompatible-type]

@@ -189,3 +189,3 @@ React.createElement(_Field["default"], {

return null;
}); // $ExpectError
}); // $FlowExpectedError[incompatible-type-arg]

@@ -204,3 +204,3 @@ React.createElement(_Field["default"], {

it("Passes additional information to its render function", function () {
var formState = (0, _tools.mockFormState)(10); // $FlowFixMe
var formState = (0, _tools.mockFormState)(10); // $FlowFixMe[incompatible-use]

@@ -207,0 +207,0 @@ formState[1].data.errors = {

@@ -1169,3 +1169,4 @@ "use strict";

_reactTestRenderer["default"].create(_react["default"].createElement(_Form["default"], {
_reactTestRenderer["default"].create( // $FlowExpectedError[incompatible-type]
_react["default"].createElement(_Form["default"], {
initialValue: 1,

@@ -1176,5 +1177,3 @@ onSubmit: onSubmit

onClick: function onClick() {
// $ExpectError
onSubmit(); // $ExpectError
onSubmit();
onSubmit("hello");

@@ -1181,0 +1180,0 @@ onSubmit("extra");

@@ -36,3 +36,3 @@ "use strict";

var formState = (0, _tools.mockFormState)(formStateInner);
var link = (0, _tools.mockLink)(formState); // $ExpectError
var link = (0, _tools.mockLink)(formState); // $FlowExpectedError[incompatible-type]

@@ -46,3 +46,3 @@ React.createElement(_ObjectField["default"], {

return null;
}); // $ExpectError
}); // $FlowExpectedError[prop-missing]

@@ -127,3 +127,3 @@ React.createElement(_ObjectField["default"], {

inner: "value"
}); // $FlowFixMe
}); // $FlowFixMe[incompatible-use]

@@ -130,0 +130,0 @@ formState[1].data.errors = {

{
"name": "formula-one",
"version": "0.9.4",
"version": "0.9.5",
"description": "Strongly-typed React form state management",

@@ -21,3 +21,3 @@ "author": "Zach Gotsch",

"peerDependencies": {
"react": "^16.9.0"
"react": "^16.9.0 || ^17.0.1"
},

@@ -56,9 +56,9 @@ "devDependencies": {

"eslint-plugin-react": "7.x",
"flow-bin": "^0.106.3",
"flow-bin": "0.139.0",
"flow-typed": "^2.6.1",
"jest": "^24.5.0",
"prettier": "^1.18.2",
"react": "^16.9.0",
"react-test-renderer": "^16.9.0"
"react": "^17.0.1",
"react-test-renderer": "^17.0.1"
}
}
// @flow strict
export default function alwaysValid<T>(_x: T) {
export default function alwaysValid<T>(_x: T): Array<string> {
return [];
}

@@ -96,6 +96,6 @@ // @flow strict

export default class ArrayField<E> extends React.Component<Props<E>, void> {
static defaultProps = {
static defaultProps: {|validation: <T>(_x: T) => Array<string>|} = {
validation: alwaysValid,
};
static contextType = FormContext;
static contextType: React.Context<FormContextPayload<mixed>> = FormContext;
context: FormContextPayload<Array<E>>;

@@ -312,3 +312,3 @@

_removeChildField = (index: number) => {
_removeChildField: (index: number) => void = (index: number) => {
const [oldValue, oldTree] = this.props.link.formState;

@@ -331,3 +331,6 @@

_moveChildField = (from: number, to: number) => {
_moveChildField: (from: number, to: number) => void = (
from: number,
to: number
) => {
const [oldValue, oldTree] = this.props.link.formState;

@@ -365,3 +368,3 @@

render() {
render(): React.Node {
const {formState, path} = this.props.link;

@@ -368,0 +371,0 @@ const {shouldShowError} = this.context;

@@ -15,3 +15,3 @@ /**

export function startsWith(path: EncodedPath, prefix: EncodedPath) {
export function startsWith(path: EncodedPath, prefix: EncodedPath): boolean {
return path.startsWith(prefix);

@@ -18,0 +18,0 @@ }

@@ -28,3 +28,3 @@ // @flow strict

|};
export default function ErrorsHelper<T>(props: Props<T>) {
export default function ErrorsHelper<T>(props: Props<T>): React.Node {
const {errors, meta} = getExtras(props.link.formState);

@@ -31,0 +31,0 @@ const flattened = flattenErrors(errors);

@@ -7,21 +7,21 @@ // @flow strict

const strategies = {
Always() {
Always(): boolean {
return true;
},
Touched(metaForm: MetaForm, metaField: MetaField) {
Touched(metaForm: MetaForm, metaField: MetaField): boolean {
return metaField.touched;
},
Blurred(metaForm: MetaForm, metaField: MetaField) {
Blurred(metaForm: MetaForm, metaField: MetaField): boolean {
return metaField.blurred;
},
Changed(metaForm: MetaForm, metaField: MetaField) {
Changed(metaForm: MetaForm, metaField: MetaField): boolean {
return metaField.changed;
},
ClientValidationSucceeded(metaForm: MetaForm, metaField: MetaField) {
ClientValidationSucceeded(metaForm: MetaForm, metaField: MetaField): boolean {
return metaField.succeeded;
},
Pristine(metaForm: MetaForm) {
Pristine(metaForm: MetaForm): boolean {
return metaForm.pristine;
},
Submitted(metaForm: MetaForm) {
Submitted(metaForm: MetaForm): boolean {
return metaForm.submitted;

@@ -28,0 +28,0 @@ },

@@ -40,6 +40,6 @@ // @flow strict

export default class Field<T> extends React.Component<Props<T>> {
static defaultProps = {
static defaultProps: {|validation: <T>(_x: T) => Array<string>|} = {
validation: alwaysValid,
};
static contextType = FormContext;
static contextType: React.Context<FormContextPayload<mixed>> = FormContext;
context: FormContextPayload<T>;

@@ -87,3 +87,3 @@

onBlur = () => {
onBlur: () => void = () => {
const [_, tree] = this.props.link.formState;

@@ -97,3 +97,3 @@

render() {
render(): React.Node {
const {formState} = this.props.link;

@@ -100,0 +100,0 @@ const [value] = formState;

@@ -53,3 +53,4 @@ // @flow strict

const noOps = {
// flowlint-next-line unclear-type:off
const noOps: {unregister: () => void, replace: any => void} = {
unregister() {},

@@ -350,3 +351,9 @@ replace() {},

> {
static defaultProps = {
static defaultProps: {|
externalErrors: null,
feedbackStrategy: () => boolean,
onChange: () => void,
onSubmit: () => void,
onValidation: () => void,
|} = {
onChange: () => {},

@@ -362,3 +369,3 @@ onSubmit: () => {},

state: State<T>
) {
): null | {|formState: FormState<T>, oldExternalErrors: ExternalErrors|} {
if (props.externalErrors !== state.oldExternalErrors) {

@@ -378,3 +385,3 @@ const newTree = applyExternalErrorsToFormState<T>(

validations: ValidationMap;
initialValidationComplete = false;
initialValidationComplete: boolean = false;
pendingValidationPath: null | Path = null;

@@ -476,3 +483,3 @@

*/
recomputeErrorsAtPathAndRender = (path: Path) => {
recomputeErrorsAtPathAndRender: (path: Path) => void = (path: Path) => {
this.setState(({formState: [rootValue, tree]}) => {

@@ -496,4 +503,7 @@ const value = getValueAtPath(path, rootValue);

handleRegisterValidation = <NodeT>(
handleRegisterValidation: <NodeT>(
path: Path,
fn: (NodeT) => Array<string>
) => ValidationOps<NodeT> = <NodeT>(
path: Path,
fn: NodeT => Array<string>

@@ -528,5 +538,9 @@ ): ValidationOps<NodeT> => {

replaceValidation = <NodeT>(
replaceValidation: <NodeT>(
path: Path,
fieldId: FieldId,
fn: (NodeT) => Array<string>
) => void = <NodeT>(
path: Path,
fieldId: FieldId,
fn: NodeT => Array<string>

@@ -573,3 +587,6 @@ ) => {

unregisterValidation = (path: Path, fieldId: FieldId) => {
unregisterValidation: (path: Path, fieldId: FieldId) => void = (
path: Path,
fieldId: FieldId
) => {
const encodedPath = encodePath(path);

@@ -591,3 +608,3 @@ const map = this.validations.get(encodedPath);

render() {
render(): React.Node {
const {formState} = this.state;

@@ -594,0 +611,0 @@ const metaForm = {

@@ -78,6 +78,6 @@ // @flow strict

> {
static contextType = FormContext;
static contextType: React.Context<FormContextPayload<mixed>> = FormContext;
context: FormContextPayload<T>;
static _contextType = FormContext;
static defaultProps = {
static _contextType: React.Context<FormContextPayload<mixed>> = FormContext;
static defaultProps: {|validation: <T>(_x: T) => Array<string>|} = {
validation: alwaysValid,

@@ -159,3 +159,3 @@ };

render() {
render(): React.Node {
const {formState} = this.props.link;

@@ -162,0 +162,0 @@ const {shouldShowError} = this.context;

@@ -61,3 +61,3 @@ // @flow strict

) {
// $FlowFixMe: This is safe
// $FlowFixMe[incompatible-use]: This is safe
const restPath = shapePath(data[firstPart.key], restParts);

@@ -176,3 +176,3 @@ if (restPath === null) {

);
// $FlowFixMe(zach): I think this is safe, might need GADTs for the type checker to understand why
// $FlowFixMe[incompatible-return](zach): I think this is safe, might need GADTs for the type checker to understand why
return dangerouslyReplaceArrayChild(firstStep.index, newChild, tree);

@@ -191,3 +191,3 @@ }

const newChild = updateAtPath(restStep, updater, nextTree);
// $FlowFixMe(zach): I think this is safe, might need GADTs for the type checker to understand why
// $FlowFixMe[incompatible-return](zach): I think this is safe, might need GADTs for the type checker to understand why
return dangerouslyReplaceObjectChild(firstStep.key, newChild, tree);

@@ -194,0 +194,0 @@ }

@@ -5,3 +5,2 @@ // @flow

import TestRenderer from "react-test-renderer";
import {type JestMockT} from "jest";
import Form from "../Form";

@@ -21,3 +20,3 @@ import ArrayField from "../ArrayField";

// $ExpectError
// $FlowExpectedError[incompatible-type]
<ArrayField link={link} validation={(_e: empty) => []}>

@@ -83,3 +82,3 @@ {() => null}

const formState = mockFormState(["value"]);
// $FlowFixMe
// $FlowFixMe[incompatible-use]
formState[1].data.errors = {

@@ -135,3 +134,3 @@ external: ["An external error"],

<ArrayField link={link}>
{/* $ExpectError */}
{/* $FlowExpectedError[incompatible-type] */}
{(links: empty) => {

@@ -198,3 +197,3 @@ console.log(links);

expect(link.onBlur).toHaveBeenCalled();
const linkOnBlur: JestMockT = link.onBlur;
const linkOnBlur: any = link.onBlur;
const newArrayTree = linkOnBlur.mock.calls[0][0];

@@ -201,0 +200,0 @@ expect(newArrayTree.data.meta).toMatchObject({

@@ -20,7 +20,9 @@ // @flow

it("returns true when the field is touched", () => {
// $FlowFixMe
// $FlowFixMe[prop-missing]
// $FlowFixMe[incompatible-call]
expect(FeedbackStrategies.Touched(null, {touched: true})).toBe(true);
});
it("returns false when the field is not touched", () => {
// $FlowFixMe
// $FlowFixMe[prop-missing]
// $FlowFixMe[incompatible-call]
expect(FeedbackStrategies.Touched(null, {touched: false})).toBe(false);

@@ -32,7 +34,9 @@ });

it("returns true when the field is blurred", () => {
// $FlowFixMe
// $FlowFixMe[prop-missing]
// $FlowFixMe[incompatible-call]
expect(FeedbackStrategies.Blurred(null, {blurred: true})).toBe(true);
});
it("returns false when the field is not blurred", () => {
// $FlowFixMe
// $FlowFixMe[prop-missing]
// $FlowFixMe[incompatible-call]
expect(FeedbackStrategies.Blurred(null, {blurred: false})).toBe(false);

@@ -44,7 +48,9 @@ });

it("returns true when the field is changed", () => {
// $FlowFixMe
// $FlowFixMe[prop-missing]
// $FlowFixMe[incompatible-call]
expect(FeedbackStrategies.Changed(null, {changed: true})).toBe(true);
});
it("returns false when the field is not changed", () => {
// $FlowFixMe
// $FlowFixMe[prop-missing]
// $FlowFixMe[incompatible-call]
expect(FeedbackStrategies.Changed(null, {changed: false})).toBe(false);

@@ -57,3 +63,4 @@ });

expect(
// $FlowFixMe
// $FlowFixMe[prop-missing]
// $FlowFixMe[incompatible-call]
FeedbackStrategies.ClientValidationSucceeded(null, {succeeded: true})

@@ -64,3 +71,4 @@ ).toBe(true);

expect(
// $FlowFixMe
// $FlowFixMe[prop-missing]
// $FlowFixMe[incompatible-call]
FeedbackStrategies.ClientValidationSucceeded(null, {succeeded: false})

@@ -73,7 +81,7 @@ ).toBe(false);

it("returns true when the form is pristine", () => {
// $FlowFixMe
// $FlowFixMe[prop-missing]
expect(FeedbackStrategies.Pristine({pristine: true})).toBe(true);
});
it("returns false when the form is not pristine", () => {
// $FlowFixMe
// $FlowFixMe[prop-missing]
expect(FeedbackStrategies.Pristine({pristine: false})).toBe(false);

@@ -85,7 +93,7 @@ });

it("returns true when the form is submitted", () => {
// $FlowFixMe
// $FlowFixMe[prop-missing]
expect(FeedbackStrategies.Submitted({submitted: true})).toBe(true);
});
it("returns false when the form is not submitted", () => {
// $FlowFixMe
// $FlowFixMe[prop-missing]
expect(FeedbackStrategies.Submitted({submitted: false})).toBe(false);

@@ -101,3 +109,3 @@ });

function callStrategy(strategy: FeedbackStrategy) {
// $FlowFixMe
// $FlowFixMe[incompatible-call]
return strategy();

@@ -104,0 +112,0 @@ }

@@ -5,3 +5,2 @@ // @flow

import TestRenderer from "react-test-renderer";
import {type JestMockT} from "jest";

@@ -20,3 +19,3 @@ import Field from "../Field";

// $ExpectError
// $FlowExpectedError[incompatible-type]
<Field link={link} validation={(_e: empty) => []}>

@@ -122,3 +121,3 @@ {() => null}

const linkOnBlur: JestMockT = link.onBlur;
const linkOnBlur: any = link.onBlur;
const tree = linkOnBlur.mock.calls[0][0];

@@ -166,3 +165,3 @@ expect(tree.data).toMatchObject({

<Field link={link}>
{/* $ExpectError */}
{/* $FlowExpectedError[incompatible-type] */}
{(_value: empty) => null}

@@ -179,7 +178,7 @@ </Field>;

<Field link={link}>
{/* $ExpectError */}
{/* $FlowExpectedError[incompatible-type] */}
{(_value, _errors, _onChange: empty) => null}
</Field>;
// $ExpectError
// $FlowExpectedError[incompatible-type-arg]
<Field link={link}>

@@ -196,3 +195,3 @@ {(_value, _errors, _onChange: number => void) => null}

const formState = mockFormState(10);
// $FlowFixMe
// $FlowFixMe[incompatible-use]
formState[1].data.errors = {

@@ -199,0 +198,0 @@ external: ["An external error"],

@@ -1142,2 +1142,3 @@ // @flow

TestRenderer.create(
// $FlowExpectedError[incompatible-type]
<Form initialValue={1} onSubmit={onSubmit}>

@@ -1147,5 +1148,3 @@ {(_, onSubmit) => (

onClick={() => {
// $ExpectError
onSubmit();
// $ExpectError
onSubmit("hello");

@@ -1152,0 +1151,0 @@ onSubmit("extra");

@@ -5,3 +5,2 @@ // @flow

import TestRenderer from "react-test-renderer";
import {type JestMockT} from "jest";
import {FormContext} from "../Form";

@@ -37,3 +36,3 @@ import ObjectField from "../ObjectField";

// $ExpectError
// $FlowExpectedError[incompatible-type]
<ObjectField link={link} validation={(_e: empty) => []}>

@@ -43,3 +42,3 @@ {() => null}

// $ExpectError
// $FlowExpectedError[prop-missing]
<ObjectField link={link} validation={(_e: {|string: string|}) => []}>

@@ -105,3 +104,3 @@ {() => null}

const formState = mockFormState({inner: "value"});
// $FlowFixMe
// $FlowFixMe[incompatible-use]
formState[1].data.errors = {

@@ -171,3 +170,3 @@ external: ["An external error"],

<ObjectField link={link}>
{/* $ExpectError */}
{/* $FlowExpectedError[incompatible-type] */}
{(links: empty) => {

@@ -180,3 +179,3 @@ console.log(links);

<ObjectField link={link}>
{/* $ExpectError */}
{/* $FlowExpectedError[prop-missing] */}
{(links: {|string: FieldLink<string>|}) => {

@@ -251,3 +250,3 @@ console.log(links);

const linkOnBlur: JestMockT = link.onBlur;
const linkOnBlur: any = link.onBlur;
const newObjectTree = linkOnBlur.mock.calls[0][0];

@@ -254,0 +253,0 @@ expect(newObjectTree.children.number).toBe(newChildTree);

@@ -21,3 +21,3 @@ // @flow

}
render() {
render(): null {
return null;

@@ -32,3 +32,3 @@ }

const TestField = (props: Props) => {
const TestField = (props: Props): React.Node => {
const validation = props.validation || alwaysValid;

@@ -35,0 +35,0 @@

@@ -23,3 +23,3 @@ // @flow

applyChangeToNode = (path, formState) => formState,
}: Props = {}) {
}: Props = {}): React.Node {
return (

@@ -26,0 +26,0 @@ <FormContext.Provider

@@ -33,3 +33,3 @@ // @flow strict

render() {
render(): React.Node {
const {link} = this.props;

@@ -36,0 +36,0 @@ const tappedLink: FieldLink<T> = {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc