@felte/react - npm Package Compare versions

Comparing version 1.0.0-next.5 to 1.0.0-next.6

dist/index.d.ts

@@ -32,3 +32,4 @@ import { Obj, Errors, Touched, TransWritable, CreateSubmitHandlerConfig, KnownHelpers, UnknownHelpers, FormConfigWithTransformFn, FormConfigWithoutTransformFn } from "@felte/core";
 declare function useForm<Data extends Obj = Obj, Ext extends Obj = Obj>(config?: FormConfigWithoutTransformFn<Data> & Ext): Form<Data> & KnownHelpers<Data> & KnownStores<Data>;
+export { FelteSubmitError } from '@felte/core';
 export { useAccessor, useForm };
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -7,67 +7,2 @@ 'use strict';
 
-function noop() { }
-function safe_not_equal(a, b) {
-    return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
-}
-function subscribe$1(store, ...callbacks) {
-    if (store == null) {
-        return noop;
-    }
-    const unsub = store.subscribe(...callbacks);
-    return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub;
-}
-function get_store_value(store) {
-    let value;
-    subscribe$1(store, _ => value = _)();
-    return value;
-}
-
-const subscriber_queue = [];
-/**
- * Create a `Writable` store that allows both updating and reading by subscription.
- * @param {*=}value initial value
- * @param {StartStopNotifier=}start start and stop notifications for subscriptions
- */
-function writable(value, start = noop) {
-    let stop;
-    const subscribers = new Set();
-    function set(new_value) {
-        if (safe_not_equal(value, new_value)) {
-            value = new_value;
-            if (stop) { // store is ready
-                const run_queue = !subscriber_queue.length;
-                for (const subscriber of subscribers) {
-                    subscriber[1]();
-                    subscriber_queue.push(subscriber, value);
-                }
-                if (run_queue) {
-                    for (let i = 0; i < subscriber_queue.length; i += 2) {
-                        subscriber_queue[i][0](subscriber_queue[i + 1]);
-                    }
-                    subscriber_queue.length = 0;
-                }
-            }
-        }
-    }
-    function update(fn) {
-        set(fn(value));
-    }
-    function subscribe(run, invalidate = noop) {
-        const subscriber = [run, invalidate];
-        subscribers.add(subscriber);
-        if (subscribers.size === 1) {
-            stop = start(set) || noop;
-        }
-        run(value);
-        return () => {
-            subscribers.delete(subscriber);
-            if (subscribers.size === 0) {
-                stop();
-                stop = null;
-            }
-        };
-    }
-    return { set, update, subscribe };
-}
-
 /** @ignore */
@@ -559,3 +494,3 @@ function _some(obj, pred) {
 
-function subscribe(store, ...callbacks) {
+function subscribe$1(store, ...callbacks) {
     const unsub = store.subscribe(...callbacks);
@@ -566,160 +501,51 @@ return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub;
     let value = undefined;
-    subscribe(store, (_) => (value = _))();
+    subscribe$1(store, (_) => (value = _))();
     return value;
 }
 
-function addAtIndex(storeValue, path, value, index) {
-    return _update(storeValue, path, (oldValue) => {
-        if (!Array.isArray(oldValue))
-            return oldValue;
-        if (typeof index === 'undefined') {
-            oldValue.push(value);
+class FelteSubmitError extends Error {
+    constructor(message, response) {
+        super(message);
+        this.name = 'FelteSubmitError';
+        this.response = response;
+    }
+}
+function createDefaultSubmitHandler(form) {
+    if (!form)
+        return;
+    return async function onSubmit() {
+        let body = new FormData(form);
+        const action = new URL(form.action);
+        const method = form.method.toLowerCase() === 'get'
+            ? 'get'
+            : action.searchParams.get('_method') || form.method;
+        let enctype = form.enctype;
+        if (form.querySelector('input[type="file"]')) {
+            enctype = 'multipart/form-data';
         }
-        else {
-            oldValue.splice(index, 0, value);
+        if (method === 'get' || enctype === 'application/x-www-form-urlencoded') {
+            body = new URLSearchParams(body);
         }
-        return oldValue;
-    });
-}
-function isUpdater(value) {
-    return typeof value === 'function';
-}
-function createSetHelper(storeSetter) {
-    const setHelper = (pathOrValue, valueOrUpdater) => {
-        if (typeof pathOrValue === 'string') {
-            const path = pathOrValue;
-            storeSetter((oldValue) => {
-                const newValue = isUpdater(valueOrUpdater)
-                    ? valueOrUpdater(_get(oldValue, path))
-                    : valueOrUpdater;
-                return _set(oldValue, path, newValue);
+        let fetchOptions;
+        if (method === 'get') {
+            body.forEach((value, key) => {
+                action.searchParams.append(key, value);
             });
+            fetchOptions = { method };
         }
         else {
-            storeSetter((oldValue) => isUpdater(pathOrValue) ? pathOrValue(oldValue) : pathOrValue);
+            fetchOptions = {
+                method,
+                body,
+                headers: {
+                    'Content-Type': enctype,
+                },
+            };
         }
+        const response = await fetch(action.toString(), fetchOptions);
+        if (response.ok)
+            return response;
+        throw new FelteSubmitError('An error occurred while submitting the form', response);
     };
-    return setHelper;
 }
-function createHelpers({ stores, config, }) {
-    var _a;
-    const { data, touched, errors, warnings, isDirty, isSubmitting } = stores;
-    const setData = createSetHelper(data.update);
-    const setTouched = createSetHelper(touched.update);
-    const setErrors = createSetHelper(errors.update);
-    const setWarnings = createSetHelper(warnings.update);
-    function updateFields(updater) {
-        setData((oldData) => {
-            const newData = updater(oldData);
-            if (formNode)
-                setForm(formNode, newData);
-            return newData;
-        });
-    }
-    const setFields = (pathOrValue, valueOrUpdater, shouldTouch) => {
-        const fieldsSetter = createSetHelper(updateFields);
-        fieldsSetter(pathOrValue, valueOrUpdater);
-        if (typeof pathOrValue === 'string' && shouldTouch) {
-            setTouched(pathOrValue, true);
-        }
-    };
-    function unsetField(path) {
-        errors.update(($errors) => {
-            return _unset($errors, path);
-        });
-        warnings.update(($warnings) => {
-            return _unset($warnings, path);
-        });
-        touched.update(($touched) => {
-            return _unset($touched, path);
-        });
-        data.update(($data) => {
-            const newData = _unset($data, path);
-            if (formNode)
-                setForm(formNode, newData);
-            return newData;
-        });
-    }
-    function addField(path, value, index) {
-        errors.update(($errors) => {
-            return addAtIndex($errors, path, null, index);
-        });
-        warnings.update(($warnings) => {
-            return addAtIndex($warnings, path, null, index);
-        });
-        touched.update(($touched) => {
-            return addAtIndex($touched, path, false, index);
-        });
-        data.update(($data) => {
-            const newData = addAtIndex($data, path, value, index);
-            setTimeout(() => formNode && setForm(formNode, newData));
-            return newData;
-        });
-    }
-    function resetField(path) {
-        const initialValue = _get(initialValues, path);
-        data.update(($data) => {
-            const newData = _set($data, path, initialValue);
-            if (formNode)
-                setForm(formNode, newData);
-            return newData;
-        });
-        touched.update(($touched) => {
-            return _set($touched, path, false);
-        });
-        errors.update(($errors) => {
-            return _set($errors, path, null);
-        });
-        warnings.update(($warnings) => {
-            return _set($warnings, path, null);
-        });
-    }
-    const setIsSubmitting = createSetHelper(isSubmitting.update);
-    const setIsDirty = createSetHelper(isDirty.update);
-    async function validate() {
-        const currentData = get(data);
-        setTouched((t) => {
-            return deepSet(t, true);
-        });
-        const currentErrors = await executeValidation(currentData, config.validate);
-        const currentWarnings = await executeValidation(currentData, config.warn);
-        warnings.set(_merge(deepSet(currentData, null), currentWarnings || {}));
-        errors.set(currentErrors || {});
-        return currentErrors;
-    }
-    let formNode;
-    let initialValues = ((_a = config.initialValues) !== null && _a !== void 0 ? _a : {});
-    function reset() {
-        setFields(_cloneDeep(initialValues));
-        setTouched(($touched) => deepSet($touched, false));
-        isDirty.set(false);
-    }
-    return {
-        public: {
-            setData,
-            setFields,
-            setTouched,
-            setErrors,
-            setWarnings,
-            setIsSubmitting,
-            setIsDirty,
-            validate,
-            reset,
-            unsetField,
-            resetField,
-            addField,
-            setInitialValues: (values) => {
-                initialValues = values;
-            },
-        },
-        private: {
-            _setFormNode: (node) => {
-                formNode = node;
-            },
-            _getFormNode: () => formNode,
-            _getInitialValues: () => initialValues,
-        },
-    };
-}
-
 function createFormAction({ helpers, stores, config, extender, _setFormNode, _getFormNode, _getInitialValues, _setCurrentExtenders, _getCurrentExtenders, }) {
@@ -730,10 +556,12 @@ const { setFields, setTouched, reset, validate, addValidator, addWarnValidator, addTransformer, setInitialValues, } = helpers;
         var _a, _b, _c, _d;
-        const onSubmit = (_a = altConfig === null || altConfig === void 0 ? void 0 : altConfig.onSubmit) !== null && _a !== void 0 ? _a : config.onSubmit;
-        const validate = (_b = altConfig === null || altConfig === void 0 ? void 0 : altConfig.validate) !== null && _b !== void 0 ? _b : config.validate;
-        const warn = (_c = altConfig === null || altConfig === void 0 ? void 0 : altConfig.warn) !== null && _c !== void 0 ? _c : config.warn;
-        const onError = (_d = altConfig === null || altConfig === void 0 ? void 0 : altConfig.onError) !== null && _d !== void 0 ? _d : config.onError;
+        const validate = (_a = altConfig === null || altConfig === void 0 ? void 0 : altConfig.validate) !== null && _a !== void 0 ? _a : config.validate;
+        const warn = (_b = altConfig === null || altConfig === void 0 ? void 0 : altConfig.warn) !== null && _b !== void 0 ? _b : config.warn;
+        const onError = (_c = altConfig === null || altConfig === void 0 ? void 0 : altConfig.onError) !== null && _c !== void 0 ? _c : config.onError;
+        const onSuccess = (_d = altConfig === null || altConfig === void 0 ? void 0 : altConfig.onSuccess) !== null && _d !== void 0 ? _d : config.onSuccess;
         return async function handleSubmit(event) {
+            var _a, _b;
+            const formNode = _getFormNode();
+            const onSubmit = (_b = (_a = altConfig === null || altConfig === void 0 ? void 0 : altConfig.onSubmit) !== null && _a !== void 0 ? _a : config.onSubmit) !== null && _b !== void 0 ? _b : createDefaultSubmitHandler(formNode);
             if (!onSubmit)
                 return;
-            const formNode = _getFormNode();
             event === null || event === void 0 ? void 0 : event.preventDefault();
@@ -765,3 +593,3 @@ isSubmitting.set(true);
             try {
-                await onSubmit(currentData, {
+                const response = await onSubmit(currentData, {
                     form: formNode,
@@ -771,7 +599,14 @@ controls: formNode && Array.from(formNode.elements).filter(isFormControl),
                 });
+                formNode === null || formNode === void 0 ? void 0 : formNode.dispatchEvent(new CustomEvent('feltesuccess', {
+                    detail: response,
+                }));
+                await (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(response));
             }
             catch (e) {
+                formNode === null || formNode === void 0 ? void 0 : formNode.dispatchEvent(new CustomEvent('felteerror', {
+                    detail: e,
+                }));
                 if (!onError)
-                    throw e;
-                const serverErrors = onError(e);
+                    return;
+                const serverErrors = await onError(e);
                 if (serverErrors) {
@@ -854,5 +689,6 @@ errors.set(serverErrors);
         function setFileValue(target) {
-            const files = target.files;
+            var _a;
+            const files = Array.from((_a = target.files) !== null && _a !== void 0 ? _a : []);
             data.update(($data) => {
-                return _set($data, getPath(target), target.multiple ? Array.from(files !== null && files !== void 0 ? files : []) : files === null || files === void 0 ? void 0 : files[0]);
+                return _set($data, getPath(target), target.multiple ? files : files[0]);
             });
@@ -1022,2 +858,156 @@ }
 
+function addAtIndex(storeValue, path, value, index) {
+    return _update(storeValue, path, (oldValue) => {
+        if (!Array.isArray(oldValue))
+            return oldValue;
+        if (typeof index === 'undefined') {
+            oldValue.push(value);
+        }
+        else {
+            oldValue.splice(index, 0, value);
+        }
+        return oldValue;
+    });
+}
+function isUpdater(value) {
+    return typeof value === 'function';
+}
+function createSetHelper(storeSetter) {
+    const setHelper = (pathOrValue, valueOrUpdater) => {
+        if (typeof pathOrValue === 'string') {
+            const path = pathOrValue;
+            storeSetter((oldValue) => {
+                const newValue = isUpdater(valueOrUpdater)
+                    ? valueOrUpdater(_get(oldValue, path))
+                    : valueOrUpdater;
+                return _set(oldValue, path, newValue);
+            });
+        }
+        else {
+            storeSetter((oldValue) => isUpdater(pathOrValue) ? pathOrValue(oldValue) : pathOrValue);
+        }
+    };
+    return setHelper;
+}
+function createHelpers({ stores, config, }) {
+    var _a;
+    const { data, touched, errors, warnings, isDirty, isSubmitting } = stores;
+    const setData = createSetHelper(data.update);
+    const setTouched = createSetHelper(touched.update);
+    const setErrors = createSetHelper(errors.update);
+    const setWarnings = createSetHelper(warnings.update);
+    function updateFields(updater) {
+        setData((oldData) => {
+            const newData = updater(oldData);
+            if (formNode)
+                setForm(formNode, newData);
+            return newData;
+        });
+    }
+    const setFields = (pathOrValue, valueOrUpdater, shouldTouch) => {
+        const fieldsSetter = createSetHelper(updateFields);
+        fieldsSetter(pathOrValue, valueOrUpdater);
+        if (typeof pathOrValue === 'string' && shouldTouch) {
+            setTouched(pathOrValue, true);
+        }
+    };
+    function unsetField(path) {
+        errors.update(($errors) => {
+            return _unset($errors, path);
+        });
+        warnings.update(($warnings) => {
+            return _unset($warnings, path);
+        });
+        touched.update(($touched) => {
+            return _unset($touched, path);
+        });
+        data.update(($data) => {
+            const newData = _unset($data, path);
+            if (formNode)
+                setForm(formNode, newData);
+            return newData;
+        });
+    }
+    function addField(path, value, index) {
+        errors.update(($errors) => {
+            return addAtIndex($errors, path, null, index);
+        });
+        warnings.update(($warnings) => {
+            return addAtIndex($warnings, path, null, index);
+        });
+        touched.update(($touched) => {
+            return addAtIndex($touched, path, false, index);
+        });
+        data.update(($data) => {
+            const newData = addAtIndex($data, path, value, index);
+            setTimeout(() => formNode && setForm(formNode, newData));
+            return newData;
+        });
+    }
+    function resetField(path) {
+        const initialValue = _get(initialValues, path);
+        data.update(($data) => {
+            const newData = _set($data, path, initialValue);
+            if (formNode)
+                setForm(formNode, newData);
+            return newData;
+        });
+        touched.update(($touched) => {
+            return _set($touched, path, false);
+        });
+        errors.update(($errors) => {
+            return _set($errors, path, null);
+        });
+        warnings.update(($warnings) => {
+            return _set($warnings, path, null);
+        });
+    }
+    const setIsSubmitting = createSetHelper(isSubmitting.update);
+    const setIsDirty = createSetHelper(isDirty.update);
+    async function validate() {
+        const currentData = get(data);
+        setTouched((t) => {
+            return deepSet(t, true);
+        });
+        const currentErrors = await executeValidation(currentData, config.validate);
+        const currentWarnings = await executeValidation(currentData, config.warn);
+        warnings.set(_merge(deepSet(currentData, null), currentWarnings || {}));
+        errors.set(currentErrors || {});
+        return currentErrors;
+    }
+    let formNode;
+    let initialValues = ((_a = config.initialValues) !== null && _a !== void 0 ? _a : {});
+    function reset() {
+        setFields(_cloneDeep(initialValues));
+        setTouched(($touched) => deepSet($touched, false));
+        isDirty.set(false);
+    }
+    return {
+        public: {
+            setData,
+            setFields,
+            setTouched,
+            setErrors,
+            setWarnings,
+            setIsSubmitting,
+            setIsDirty,
+            validate,
+            reset,
+            unsetField,
+            resetField,
+            addField,
+            setInitialValues: (values) => {
+                initialValues = values;
+            },
+        },
+        private: {
+            _setFormNode: (node) => {
+                formNode = node;
+            },
+            _getFormNode: () => formNode,
+            _getInitialValues: () => initialValues,
+        },
+    };
+}
+
 function errorFilterer(errValue, touchValue) {
@@ -1237,2 +1227,67 @@ if (_isPlainObject(touchValue))
 
+function noop() { }
+function safe_not_equal(a, b) {
+    return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
+}
+function subscribe(store, ...callbacks) {
+    if (store == null) {
+        return noop;
+    }
+    const unsub = store.subscribe(...callbacks);
+    return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub;
+}
+function get_store_value(store) {
+    let value;
+    subscribe(store, _ => value = _)();
+    return value;
+}
+
+const subscriber_queue = [];
+/**
+ * Create a `Writable` store that allows both updating and reading by subscription.
+ * @param {*=}value initial value
+ * @param {StartStopNotifier=}start start and stop notifications for subscriptions
+ */
+function writable(value, start = noop) {
+    let stop;
+    const subscribers = new Set();
+    function set(new_value) {
+        if (safe_not_equal(value, new_value)) {
+            value = new_value;
+            if (stop) { // store is ready
+                const run_queue = !subscriber_queue.length;
+                for (const subscriber of subscribers) {
+                    subscriber[1]();
+                    subscriber_queue.push(subscriber, value);
+                }
+                if (run_queue) {
+                    for (let i = 0; i < subscriber_queue.length; i += 2) {
+                        subscriber_queue[i][0](subscriber_queue[i + 1]);
+                    }
+                    subscriber_queue.length = 0;
+                }
+            }
+        }
+    }
+    function update(fn) {
+        set(fn(value));
+    }
+    function subscribe(run, invalidate = noop) {
+        const subscriber = [run, invalidate];
+        subscribers.add(subscriber);
+        if (subscribers.size === 1) {
+            stop = start(set) || noop;
+        }
+        run(value);
+        return () => {
+            subscribers.delete(subscriber);
+            if (subscribers.size === 0) {
+                stop();
+                stop = null;
+            }
+        };
+    }
+    return { set, update, subscribe };
+}
+
 function isWritable(store) {
@@ -1282,5 +1337,2 @@ return !!store.set;
                 var newValue = getValue($store, selector);
-                if (typeof values.current[selector.toString()] === 'undefined') {
-                    values.current[selector.toString()] = newValue;
-                }
                 if (newValue !== values.current[selector.toString()]) {
@@ -1374,4 +1426,5 @@ values.current[selector.toString()] = newValue;
 
+exports.FelteSubmitError = FelteSubmitError;
 exports.useAccessor = useAccessor;
 exports.useForm = useForm;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@felte/react",
-  "version": "1.0.0-next.5",
+  "version": "1.0.0-next.6",
   "description": "An extensible form library for ReactJS",
@@ -29,3 +29,3 @@ "main": "dist/index.js",
   "dependencies": {
-    "@felte/core": "1.0.0-next.5",
+    "@felte/core": "1.0.0-next.6",
     "svelte": "^3.44.3"
@@ -40,3 +40,3 @@ },
   "devDependencies": {
-    "@felte/common": "1.0.0-next.5",
+    "@felte/common": "1.0.0-next.6",
     "@testing-library/jest-dom": "^5.11.9",
@@ -43,0 +43,0 @@ "@testing-library/react-hooks": "^7.0.2",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

503727

increased by2.57%

Lines of code

2793

increased by3.94%

Worsened metrics

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@felte/common@1.0.0-next.6(transitive)

• + Added@felte/core@1.0.0-next.6(transitive)

• - Removed@felte/common@1.0.0-next.5(transitive)

• - Removed@felte/core@1.0.0-next.5(transitive)

• Updated@felte/core@1.0.0-next.6