remix-hook-form - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

dist/hook/index.d.ts

 import React from "react";
-import { SubmitFunction } from "@remix-run/react";
+import { FetcherWithComponents, SubmitFunction } from "@remix-run/react";
 import { SubmitErrorHandler, SubmitHandler } from "react-hook-form";
 import type { FieldValues, Path, RegisterOptions, UseFormProps, UseFormReturn } from "react-hook-form/dist/types";
 export type SubmitFunctionOptions = Parameters<SubmitFunction>[1];
-interface UseRemixFormOptions<T extends FieldValues> extends UseFormProps<T> {
+export interface UseRemixFormOptions<T extends FieldValues> extends UseFormProps<T> {
     submitHandlers?: {
@@ -13,4 +13,5 @@ onValid?: SubmitHandler<T>;
     submitData?: FieldValues;
+    fetcher?: FetcherWithComponents<T>;
 }
-export declare const useRemixForm: <T extends FieldValues>({ submitHandlers, submitConfig, submitData, ...formProps }: UseRemixFormOptions<T>) => {
+export declare const useRemixForm: <T extends FieldValues>({ submitHandlers, submitConfig, submitData, fetcher, ...formProps }: UseRemixFormOptions<T>) => {
     handleSubmit: (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
@@ -17,0 +18,0 @@ register: (name: Path<T>, options?: RegisterOptions<T> | undefined) => {

dist/index.d.ts

 export { parseFormData, createFormData, getValidatedFormData, validateFormData, getFormDataFromSearchParams, } from "./utilities";
 export * from "./hook";
+export type { UseRemixFormOptions } from "./hook";
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -1,81 +0,81 @@
-import k from "react";
-import { useSubmit as R, useActionData as A } from "@remix-run/react";
-import { useForm as _, FormProvider as C, useFormContext as I } from "react-hook-form";
-const f = (t) => {
-  const o = {};
-  for (const [e, a] of t.entries()) {
-    const n = e.split(".");
-    let r = o;
-    for (let i = 0; i < n.length - 1; i++) {
-      const u = n[i];
-      r[u] || (r[u] = /^\d+$/.test(n[i + 1]) ? [] : {}), r = r[u];
+import I from "react";
+import { useSubmit as N, useActionData as G } from "@remix-run/react";
+import { useForm as J, FormProvider as L, useFormContext as U } from "react-hook-form";
+const g = (t) => {
+  const a = {};
+  for (const [e, o] of t.entries()) {
+    const r = e.split(".");
+    let i = a;
+    for (let s = 0; s < r.length - 1; s++) {
+      const c = r[s];
+      i[c] || (i[c] = /^\d+$/.test(r[s + 1]) ? [] : {}), i = i[c];
     }
-    const c = n[n.length - 1], s = /\[\d*\]$|\[\]$/.test(c);
-    if (s) {
-      const i = c.replace(/\[\d*\]$|\[\]$/, "");
-      r[i] || (r[i] = []), r[i].push(a);
+    const n = r[r.length - 1], u = /\[\d*\]$|\[\]$/.test(n);
+    if (u) {
+      const s = n.replace(/\[\d*\]$|\[\]$/, "");
+      i[s] || (i[s] = []), i[s].push(o);
     }
-    s || (/^\d+$/.test(c) ? r.push(a) : r[c] = a);
+    u || (/^\d+$/.test(n) ? i.push(o) : i[n] = o);
   }
-  return o;
-}, N = (t) => {
-  const o = new URL(t.url).searchParams;
-  return f(o);
-}, G = (t) => t.method === "GET" || t.method === "get", B = async (t, o) => {
-  const e = G(t) ? N(t) : await L(t);
-  return { ...await J(e, o), receivedValues: e };
-}, J = async (t, o) => {
-  const { errors: e, values: a } = await o(t, {}, { shouldUseNativeValidation: !1, fields: {} });
-  return Object.keys(e).length > 0 ? { errors: e, data: void 0 } : { errors: void 0, data: a };
-}, K = (t, o = "formData") => {
-  const e = new FormData(), a = JSON.stringify(t);
-  return e.append(o, a), e;
-}, L = async (t, o = "formData") => {
-  const e = await t.formData(), a = e.get(o);
+  return a;
+}, K = (t) => {
+  const a = new URL(t.url).searchParams;
+  return g(a);
+}, T = (t) => t.method === "GET" || t.method === "get", Y = async (t, a) => {
+  const e = T(t) ? K(t) : await M(t);
+  return { ...await z(e, a), receivedValues: e };
+}, z = async (t, a) => {
+  const { errors: e, values: o } = await a(t, {}, { shouldUseNativeValidation: !1, fields: {} });
+  return Object.keys(e).length > 0 ? { errors: e, data: void 0 } : { errors: void 0, data: o };
+}, B = (t, a = "formData") => {
+  const e = new FormData(), o = JSON.stringify(t);
+  return e.append(a, o), e;
+}, M = async (t, a = "formData") => {
+  const e = await t.formData(), o = e.get(a);
+  if (!o)
+    return g(e);
+  if (typeof o != "string")
+    throw new Error("Data is not a string");
+  return JSON.parse(o);
+}, y = (t, a, e = [], o = 0) => {
   if (!a)
-    return f(e);
-  if (typeof a != "string")
-    throw new Error("Data is not a string");
-  return JSON.parse(a);
-}, v = (t, o) => {
-  if (!o)
     return t;
-  for (const [e, a] of Object.entries(o))
-    typeof a == "object" && !Array.isArray(a) ? (t[e] || (t[e] = {}), v(t[e], a)) : a && (t[e] = a);
+  for (const [r, i] of Object.entries(a))
+    !e.includes(r.toString()) && e.length && o === 0 || (typeof i == "object" && !Array.isArray(i) ? (t[r] || (t[r] = {}), y(t[r], i, e, o + 1)) : i && (t[r] = i));
   return t;
-}, M = ({ submitHandlers: t, submitConfig: o, submitData: e, ...a }) => {
-  var n, r;
-  const c = R(), s = A(), i = _(a), u = (l) => {
-    c(K({ ...l, ...e }), {
+}, Z = ({ submitHandlers: t, submitConfig: a, submitData: e, fetcher: o, ...r }) => {
+  var i, n, u, s;
+  const c = (i = o == null ? void 0 : o.submit) !== null && i !== void 0 ? i : N(), l = (n = o == null ? void 0 : o.data) !== null && n !== void 0 ? n : G(), d = J(r), p = (m) => {
+    c(B({ ...m, ...e }), {
       method: "post",
-      ...o
+      ...a
     });
-  }, h = () => {
-  }, y = i.formState, { dirtyFields: g, isDirty: p, isSubmitSuccessful: D, isSubmitted: F, isSubmitting: S, isValid: b, isValidating: P, touchedFields: V, submitCount: w, errors: O, isLoading: x } = y, $ = v(O, s != null && s.errors ? s.errors : s);
+  }, S = d.getValues(), h = Object.keys(S), D = () => {
+  }, F = d.formState, { dirtyFields: b, isDirty: V, isSubmitSuccessful: O, isSubmitted: P, isSubmitting: w, isValid: j, isValidating: k, touchedFields: x, submitCount: _, errors: $, isLoading: R } = F, A = y($, l != null && l.errors ? l.errors : l, h);
   return {
-    ...i,
-    handleSubmit: i.handleSubmit((n = t == null ? void 0 : t.onValid) !== null && n !== void 0 ? n : u, (r = t == null ? void 0 : t.onInvalid) !== null && r !== void 0 ? r : h),
-    register: (l, j) => {
-      var d, m;
+    ...d,
+    handleSubmit: d.handleSubmit((u = t == null ? void 0 : t.onValid) !== null && u !== void 0 ? u : p, (s = t == null ? void 0 : t.onInvalid) !== null && s !== void 0 ? s : D),
+    register: (m, C) => {
+      var v, f;
       return {
-        ...i.register(l, j),
-        defaultValue: (m = (d = s == null ? void 0 : s.defaultValues) === null || d === void 0 ? void 0 : d[l]) !== null && m !== void 0 ? m : ""
+        ...d.register(m, C),
+        defaultValue: (f = (v = l == null ? void 0 : l.defaultValues) === null || v === void 0 ? void 0 : v[m]) !== null && f !== void 0 ? f : ""
       };
     },
     formState: {
-      dirtyFields: g,
-      isDirty: p,
-      isSubmitSuccessful: D,
-      isSubmitted: F,
-      isSubmitting: S,
-      isValid: b,
-      isValidating: P,
-      touchedFields: V,
-      submitCount: w,
-      isLoading: x,
-      errors: $
+      dirtyFields: b,
+      isDirty: V,
+      isSubmitSuccessful: O,
+      isSubmitted: P,
+      isSubmitting: w,
+      isValid: j,
+      isValidating: k,
+      touchedFields: x,
+      submitCount: _,
+      isLoading: R,
+      errors: A
     }
   };
-}, Q = ({ children: t, ...o }) => k.createElement(C, { ...o }, t), W = () => {
-  const t = I();
+}, E = ({ children: t, ...a }) => I.createElement(L, { ...a }, t), q = () => {
+  const t = U();
   return {
@@ -87,10 +87,10 @@ ...t,
 export {
-  Q as RemixFormProvider,
-  K as createFormData,
-  N as getFormDataFromSearchParams,
-  B as getValidatedFormData,
-  L as parseFormData,
-  M as useRemixForm,
-  W as useRemixFormContext,
-  J as validateFormData
+  E as RemixFormProvider,
+  B as createFormData,
+  K as getFormDataFromSearchParams,
+  Y as getValidatedFormData,
+  M as parseFormData,
+  Z as useRemixForm,
+  q as useRemixFormContext,
+  z as validateFormData
 };

dist/utilities/index.d.ts

@@ -69,3 +69,3 @@ import { FieldValues, Resolver, FieldErrors, FieldErrorsImpl, DeepRequired } from "react-hook-form";
 */
-export declare const mergeErrors: <T extends FieldValues>(frontendErrors: Partial<FieldErrorsImpl<DeepRequired<T>>>, backendErrors?: Partial<FieldErrorsImpl<DeepRequired<T>>> | undefined) => Partial<FieldErrorsImpl<DeepRequired<T>>>;
+export declare const mergeErrors: <T extends FieldValues>(frontendErrors: Partial<FieldErrorsImpl<DeepRequired<T>>>, backendErrors?: Partial<FieldErrorsImpl<DeepRequired<T>>> | undefined, validKeys?: string[], depth?: number) => Partial<FieldErrorsImpl<DeepRequired<T>>>;
 //# sourceMappingURL=index.d.ts.map

package.json

 {
   "name": "remix-hook-form",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Utility wrapper around react-hook-form for use with Remix.run",
@@ -18,6 +18,21 @@ "type": "module",
   ],
+  "workspaces": [
+    "src/testing-app",
+    "."
+  ],
   "scripts": {
-    "prepare": "vite build",
+    "remix-dev": "npm run dev -w src/testing-app",
+    "build:dev": "vite build -m development",
+    "dev": "npm-run-all -s build:dev -p remix-dev vite",
+    "vite": "vite build --watch -m development",
+    "prepublishOnly": "vite build",
     "build": "vite build",
-    "test": "vitest run"
+    "test": "vitest run",
+    "tsc": "tsc",
+    "validate": "npm run lint && npm run tsc && npm run test",
+    "lint": "eslint \"src/**/*.+(ts|tsx)\"",
+    "lint:fix": "npm run lint -- --fix",
+    "prettier": "prettier app --check",
+    "prettier:fix": "prettier app --write",
+    "format-code": "npm run prettier:fix & npm run lint:fix"
   },
@@ -56,3 +71,8 @@ "repository": {
     "@vitest/coverage-c8": "^0.30.1",
+    "babel-eslint": "^10.1.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
     "happy-dom": "^9.5.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.0.1",
     "react": "^18.2.0",
@@ -59,0 +79,0 @@ "react-dom": "^18.2.0",

README.md

@@ -149,2 +149,6 @@ # remix-hook-form
 
+### Fetcher usage
+
+You can pass in a fetcher as an optional prop and the useRemixForm will use that fetcher to submit the data and read the errors instead of the default behavior
+
 ## Utilities
@@ -151,0 +155,0 @@

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

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

36520

increased by4.88%

Lines of code

258

increased by1.18%

Number of lines in readme file

412

increased by0.98%

Worsened metrics

Dev dependency count

21

increased by31.25%

No dependency changes