formact - npm Package Compare versions

Comparing version 4.0.2-alpha to 4.0.3

dist/Form.js

@@ -68,5 +68,4 @@ "use strict";
         Object.keys(fields).forEach((name) => {
-            var _a;
             const field = fields[name];
-            errors[name] = ((_a = field.validate) === null || _a === void 0 ? void 0 : _a.call(field)) || '';
+            errors[name] = field.validate();
         });
@@ -80,10 +79,9 @@ return errors;
     }, []);
-    const onChange = (0, react_1.useCallback)((reason, fieldName) => {
-        setLastUpdate({ when: Date.now(), reason, fieldName });
-    }, []);
-    (0, react_1.useEffect)(() => {
+    const handleOnChange = (0, react_1.useCallback)((reason, fieldName) => {
         var _a;
         const { errors, values } = getFormState();
+        const event = { when: Date.now(), reason, fieldName };
         const valid = checkIsValid(errors);
         setValid(valid);
+        setLastUpdate(event);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, {
@@ -93,16 +91,16 @@ valid,
             values,
-            event: lastUpdate,
+            event,
         });
-    }, [lastUpdate]);
+    }, [props.onChange]);
     const addField = (0, react_1.useCallback)((field) => {
         fields[field.name] = field;
-        onChange('addField', field.name);
-    }, []);
+        handleOnChange('addField', field.name);
+    }, [handleOnChange]);
     const removeField = (0, react_1.useCallback)((fieldName) => {
         delete fields[fieldName];
-        onChange('removeField', fieldName);
-    }, []);
+        handleOnChange('removeField', fieldName);
+    }, [handleOnChange]);
     const notifyValueChange = (0, react_1.useCallback)((fieldName) => {
-        onChange('changeValue', fieldName);
-    }, []);
+        handleOnChange('changeValue', fieldName);
+    }, [handleOnChange]);
     const getValue = (0, react_1.useCallback)((fieldName) => {
@@ -113,4 +111,3 @@ var _a;
     const updateValue = (0, react_1.useCallback)((fieldName, value) => {
-        var _a;
-        (_a = fields[fieldName]) === null || _a === void 0 ? void 0 : _a.setValue(value);
+        fields[fieldName].setValue(value);
     }, []);
@@ -125,9 +122,8 @@ const updateValues = (0, react_1.useCallback)((fields) => {
         });
-        onChange('reset');
-    }, []);
+        handleOnChange('reset');
+    }, [handleOnChange]);
     const setError = (0, react_1.useCallback)((fieldName, message) => {
-        var _a;
-        (_a = fields[fieldName]) === null || _a === void 0 ? void 0 : _a.setError(message);
-        onChange('setError', fieldName);
-    }, []);
+        fields[fieldName].setError(message);
+        handleOnChange('setError', fieldName);
+    }, [handleOnChange]);
     const submit = (0, react_1.useCallback)(() => {
@@ -145,11 +141,10 @@ setSubmitting(true);
                 onFinish: (shouldClear) => {
-                    setSubmitting(false);
                     if (shouldClear) {
                         clear();
                     }
+                    setSubmitting(false);
                 },
             });
         }
-        setSubmitting(false);
-    }, []);
+    }, [setError, clear, props.onSubmit]);
     const value = {
@@ -156,0 +151,0 @@ inForm: true,

dist/index.d.ts

 import Form from './Form';
-export { useForm, Form } from './Form';
+export { useForm } from './Form';
 export { default as useField } from './useField';
 export * from './types';
 export default Form;

dist/index.js

@@ -20,7 +20,6 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useField = exports.Form = exports.useForm = void 0;
+exports.useField = exports.useForm = void 0;
 const Form_1 = __importDefault(require("./Form"));
 var Form_2 = require("./Form");
 Object.defineProperty(exports, "useForm", { enumerable: true, get: function () { return Form_2.useForm; } });
-Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return Form_2.Form; } });
 var useField_1 = require("./useField");
@@ -27,0 +26,0 @@ Object.defineProperty(exports, "useField", { enumerable: true, get: function () { return __importDefault(useField_1).default; } });

dist/types.d.ts

@@ -35,5 +35,6 @@ /// <reference types="react" />
     setValue: (value: FieldValue) => any;
-    validate?: () => string | null | undefined;
+    validate: () => string | null | undefined;
     setError: (message: string) => void;
     clear: () => void;
+    initialized?: boolean;
 };
@@ -40,0 +41,0 @@ export declare type FormContextType = {

dist/useField.js

@@ -28,3 +28,3 @@ "use strict";
     const lastDependencieUpdated = (0, react_1.useMemo)(() => {
-        if ((dependsOn === null || dependsOn === void 0 ? void 0 : dependsOn.indexOf((lastUpdate === null || lastUpdate === void 0 ? void 0 : lastUpdate.fieldName) || '')) || -1 > -1) {
+        if ((dependsOn === null || dependsOn === void 0 ? void 0 : dependsOn.indexOf(lastUpdate.fieldName || '')) || -1 > -1) {
             return Date.now();
@@ -61,2 +61,3 @@ }
     const [showError, setShowError] = (0, react_1.useState)(false);
+    const validate = useValidation(props, value, form, setError);
     const fieldRef = (0, react_1.useRef)({
@@ -73,10 +74,13 @@ getValue: () => value,
         name: props.name,
+        validate,
+        initialized: false,
     }).current;
-    fieldRef.validate = useValidation(props, value, form, setError);
+    // seems like this is not needed, but it's important for every other render
+    fieldRef.validate = validate;
     (0, react_1.useEffect)(() => {
-        setShowError(form.submitted);
-    }, [form.submitted]);
-    (0, react_1.useEffect)(() => {
-        fieldRef.getValue = () => value;
-        form.notifyValueChange(fieldRef.name);
+        if (fieldRef.initialized) {
+            // do not care about this on first render as the addField effect should take care of it
+            fieldRef.getValue = () => value;
+            form.notifyValueChange(fieldRef.name);
+        }
     }, [value]);
@@ -86,4 +90,8 @@ (0, react_1.useEffect)(() => {
         form.addField(fieldRef);
+        fieldRef.initialized = true;
         return () => form.removeField(fieldRef.name);
     }, [props.name]);
+    (0, react_1.useEffect)(() => {
+        setShowError(form.submitted);
+    }, [form.submitted]);
     return {
@@ -90,0 +98,0 @@ errorMessage: error,

dist/validations.js

@@ -10,10 +10,7 @@ "use strict";
 const EMAIL_VALIDATION = (errorMessage = 'Invalid email.') => (value) => {
-    if (!value) {
+    if (!(value === null || value === void 0 ? void 0 : value.toString())) {
         return '';
     }
-    if (typeof value === 'string') {
-        return exports.EMAIL_REGEX.test(value) ? '' : errorMessage;
-    }
-    return errorMessage;
+    return exports.EMAIL_REGEX.test(value.toString()) ? '' : errorMessage;
 };
 exports.EMAIL_VALIDATION = EMAIL_VALIDATION;

package.json

 {
   "name": "formact",
-  "version": "4.0.2-alpha",
+  "version": "4.0.3",
   "description": "Context for React form components with validation",
   "scripts": {
     "build": "tsc",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "ship": "npm run build && npm version patch && npm publish --access public && git push"
+    "test": "jest --coverage"
   },
@@ -29,5 +28,11 @@ "repository": {
   "devDependencies": {
+    "@testing-library/react": "^13.2.0",
+    "@types/jest": "^27.5.1",
     "@types/react": "^18.0.1",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
+    "ts-jest": "^28.0.2",
+    "ts-node": "^10.7.0",
     "typescript": "^4.6.4"
   }
 }

Fixed alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

110

increased byInfinity%

Worsened metrics

Total package byte prevSize

21145

decreased by-25.3%

Dev dependency count

8

increased by300%

Number of package files

12

decreased by-25%

No dependency changes