remix-validated-form 4.1.7 → 4.2.0

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 $ npm run build:browser && npm run build:main
 
-> remix-validated-form@4.1.4 build:browser
+> remix-validated-form@4.1.9 build:browser
 > tsc --module ESNext --outDir ./browser
 
 
-> remix-validated-form@4.1.4 build:main
+> remix-validated-form@4.1.9 build:main
 > tsc --module CommonJS --outDir ./build
 

package/README.md

@@ -71,9 +71,7 @@ export const MyInput = ({ name, label }: MyInputProps) => {
     <div>
       <label htmlFor={name}>{label}</label>
       <input {...getInputProps({ id: name })} />
-      {error && (
-        <span className="my-error-class">{error}</span>
-      )}
+      {error && <span className="my-error-class">{error}</span>}
     </div>
   );
 };
@@ -92,14 +90,17 @@ export const MySubmitButton = () => {
   const disabled = isSubmitting || !isValid;
 
   return (
-    <button type="submit" disabled={disabled} className={disabled ? "disabled-btn" : "btn"}>
+    <button
+      type="submit"
+      disabled={disabled}
+      className={disabled ? "disabled-btn" : "btn"}
+    >
       {isSubmitting ? "Submitting..." : "Submit"}
     </button>
   );
 };
 ```
 
-
 ## Use the form!
 
 Now that we have our components, making a form is easy!
@@ -258,5 +259,6 @@ Problem: how do we trigger a toast message on success if the action redirects aw
 See the [Remix](https://remix.run/docs/en/v1/api/remix#sessionflashkey-value) documentation for more information.
 
 ## Why is my cancel button triggering form submission?
+
 Problem: the cancel button has an onClick handler to navigate away from the form route but instead it is submitting the form.
 A button defaults to `type="submit"` in a form which will submit the form by default. If you want to prevent this you can add `type="reset"` or `type="button"` to the cancel button.

package/browser/internal/hooks.js

@@ -96,7 +96,7 @@ export const useFieldDefaultValue = (name, context) => {
     const { defaultValues: state } = useFormAtomValue(formPropsAtom(context.formId));
     return defaultValues
         .map((val) => lodashGet(val, name))
-        .hydrateTo(state[name]);
+        .hydrateTo(lodashGet(state, name));
 };
 export const useClearError = ({ formId }) => {
     const updateError = useFormUpdateAtom(setFieldErrorAtom(formId));

package/browser/internal/state/controlledFields.d.ts

@@ -1,6 +1,5 @@
 import { PrimitiveAtom } from "jotai";
 import { InternalFormId } from "./atomUtils";
-export declare type ValueSerializer = (val: unknown) => string;
 export declare const controlledFieldsAtom: {
     (param: InternalFormId): import("jotai").Atom<Record<string, PrimitiveAtom<unknown>>> & {
         write: (get: {
@@ -59,8 +58,5 @@ export declare const setControlledFieldValueAtom: import("jotai").Atom<null> & {
 } & {
     init: null;
 };
-export declare const useAllControlledFields: (formId: InternalFormId) => Record<string, PrimitiveAtom<unknown>>;
 export declare const useControlledFieldValue: (formId: InternalFormId, field: string) => any;
 export declare const useControllableValue: (formId: InternalFormId, field: string) => readonly [any, (value: unknown) => Promise<void>];
-export declare const useFieldSerializer: (formId: InternalFormId, field: string) => ValueSerializer;
-export declare const useRegisterFieldSerializer: (formId: InternalFormId, field: string, serializer?: ValueSerializer | undefined) => void;

package/browser/internal/state/controlledFields.js

@@ -9,13 +9,6 @@ const refCountAtom = fieldAtomFamily(() => atom(0));
 const fieldValueAtom = fieldAtomFamily(() => atom(undefined));
 const fieldValueHydratedAtom = fieldAtomFamily(() => atom(false));
 const pendingValidateAtom = fieldAtomFamily(() => atom(undefined));
-const valueSerializerAtom = fieldAtomFamily(() => atom({
-    serializer: (value) => {
-        if (value === undefined)
-            return "";
-        return JSON.stringify(value);
-    },
-}));
 const registerAtom = atom(null, (get, set, { formId, field }) => {
     set(refCountAtom({ formId, field }), (prev) => prev + 1);
     const newRefCount = get(refCountAtom({ formId, field }));
@@ -44,7 +37,6 @@ export const setControlledFieldValueAtom = atom(null, async (_get, set, { formId
     await new Promise((resolve) => set(pending, resolve));
     set(pending, undefined);
 });
-export const useAllControlledFields = (formId) => useFormAtomValue(controlledFieldsAtom(formId));
 export const useControlledFieldValue = (formId, field) => {
     const fieldAtom = fieldValueAtom({ formId, field });
     const [value, setValue] = useFormAtom(fieldAtom);
@@ -83,11 +75,3 @@ export const useControllableValue = (formId, field) => {
     const value = useControlledFieldValue(formId, field);
     return [value, setValue];
 };
-export const useFieldSerializer = (formId, field) => useFormAtomValue(valueSerializerAtom({ formId, field })).serializer;
-export const useRegisterFieldSerializer = (formId, field, serializer) => {
-    const setSerializer = useFormUpdateAtom(valueSerializerAtom({ formId, field }));
-    useEffect(() => {
-        if (serializer)
-            setSerializer({ serializer });
-    }, [serializer, setSerializer]);
-};

package/browser/server.d.ts

@@ -14,7 +14,7 @@ import { ValidatorError } from "./validation/types";
  * if (result.error) return validationError(result.error, result.submittedData);
  * ```
  */
-export declare function validationError(error: ValidatorError, repopulateFields?: unknown): Response;
+export declare function validationError(error: ValidatorError, repopulateFields?: unknown, init?: ResponseInit): Response;
 export declare type FormDefaults = {
     [formDefaultsKey: `${typeof FORM_DEFAULTS_FIELD}_${string}`]: any;
 };

package/browser/server.js

@@ -14,13 +14,13 @@ import { formDefaultValuesKey, } from "./internal/constants";
  * if (result.error) return validationError(result.error, result.submittedData);
  * ```
  */
-export function validationError(error, repopulateFields) {
+export function validationError(error, repopulateFields, init) {
     return json({
         fieldErrors: error.fieldErrors,
         subaction: error.subaction,
         repopulateFields,
         formId: error.formId,
-    }, { status: 422 });
+    }, { status: 422, ...init });
 }
 export const setFormDefaults = (formId, defaultValues) => ({
     [formDefaultValuesKey(formId)]: defaultValues,

package/build/internal/hooks.js

@@ -113,7 +113,7 @@ const useFieldDefaultValue = (name, context) => {
     const { defaultValues: state } = (0, exports.useFormAtomValue)((0, state_1.formPropsAtom)(context.formId));
     return defaultValues
         .map((val) => (0, get_1.default)(val, name))
-        .hydrateTo(state[name]);
+        .hydrateTo((0, get_1.default)(state, name));
 };
 exports.useFieldDefaultValue = useFieldDefaultValue;
 const useClearError = ({ formId }) => {

package/build/internal/state/controlledFields.d.ts

@@ -1,6 +1,5 @@
 import { PrimitiveAtom } from "jotai";
 import { InternalFormId } from "./atomUtils";
-export declare type ValueSerializer = (val: unknown) => string;
 export declare const controlledFieldsAtom: {
     (param: InternalFormId): import("jotai").Atom<Record<string, PrimitiveAtom<unknown>>> & {
         write: (get: {
@@ -59,8 +58,5 @@ export declare const setControlledFieldValueAtom: import("jotai").Atom<null> & {
 } & {
     init: null;
 };
-export declare const useAllControlledFields: (formId: InternalFormId) => Record<string, PrimitiveAtom<unknown>>;
 export declare const useControlledFieldValue: (formId: InternalFormId, field: string) => any;
 export declare const useControllableValue: (formId: InternalFormId, field: string) => readonly [any, (value: unknown) => Promise<void>];
-export declare const useFieldSerializer: (formId: InternalFormId, field: string) => ValueSerializer;
-export declare const useRegisterFieldSerializer: (formId: InternalFormId, field: string, serializer?: ValueSerializer | undefined) => void;

package/build/internal/state/controlledFields.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRegisterFieldSerializer = exports.useFieldSerializer = exports.useControllableValue = exports.useControlledFieldValue = exports.useAllControlledFields = exports.setControlledFieldValueAtom = exports.controlledFieldsAtom = void 0;
+exports.useControllableValue = exports.useControlledFieldValue = exports.setControlledFieldValueAtom = exports.controlledFieldsAtom = void 0;
 const jotai_1 = require("jotai");
 const omit_1 = __importDefault(require("lodash/omit"));
 const react_1 = require("react");
@@ -15,13 +15,6 @@ const refCountAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(0)
 const fieldValueAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(undefined));
 const fieldValueHydratedAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(false));
 const pendingValidateAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(undefined));
-const valueSerializerAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)({
-    serializer: (value) => {
-        if (value === undefined)
-            return "";
-        return JSON.stringify(value);
-    },
-}));
 const registerAtom = (0, jotai_1.atom)(null, (get, set, { formId, field }) => {
     set(refCountAtom({ formId, field }), (prev) => prev + 1);
     const newRefCount = get(refCountAtom({ formId, field }));
@@ -50,8 +43,6 @@ exports.setControlledFieldValueAtom = (0, jotai_1.atom)(null, async (_get, set,
     await new Promise((resolve) => set(pending, resolve));
     set(pending, undefined);
 });
-const useAllControlledFields = (formId) => (0, hooks_1.useFormAtomValue)((0, exports.controlledFieldsAtom)(formId));
-exports.useAllControlledFields = useAllControlledFields;
 const useControlledFieldValue = (formId, field) => {
     const fieldAtom = fieldValueAtom({ formId, field });
     const [value, setValue] = (0, hooks_1.useFormAtom)(fieldAtom);
@@ -92,13 +83,3 @@ const useControllableValue = (formId, field) => {
     return [value, setValue];
 };
 exports.useControllableValue = useControllableValue;
-const useFieldSerializer = (formId, field) => (0, hooks_1.useFormAtomValue)(valueSerializerAtom({ formId, field })).serializer;
-exports.useFieldSerializer = useFieldSerializer;
-const useRegisterFieldSerializer = (formId, field, serializer) => {
-    const setSerializer = (0, hooks_1.useFormUpdateAtom)(valueSerializerAtom({ formId, field }));
-    (0, react_1.useEffect)(() => {
-        if (serializer)
-            setSerializer({ serializer });
-    }, [serializer, setSerializer]);
-};
-exports.useRegisterFieldSerializer = useRegisterFieldSerializer;

package/build/server.d.ts

@@ -14,7 +14,7 @@ import { ValidatorError } from "./validation/types";
  * if (result.error) return validationError(result.error, result.submittedData);
  * ```
  */
-export declare function validationError(error: ValidatorError, repopulateFields?: unknown): Response;
+export declare function validationError(error: ValidatorError, repopulateFields?: unknown, init?: ResponseInit): Response;
 export declare type FormDefaults = {
     [formDefaultsKey: `${typeof FORM_DEFAULTS_FIELD}_${string}`]: any;
 };

package/build/server.js

@@ -17,13 +17,13 @@ const constants_1 = require("./internal/constants");
  * if (result.error) return validationError(result.error, result.submittedData);
  * ```
  */
-function validationError(error, repopulateFields) {
+function validationError(error, repopulateFields, init) {
     return (0, server_runtime_1.json)({
         fieldErrors: error.fieldErrors,
         subaction: error.subaction,
         repopulateFields,
         formId: error.formId,
-    }, { status: 422 });
+    }, { status: 422, ...init });
 }
 exports.validationError = validationError;
 const setFormDefaults = (formId, defaultValues) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.1.7",
+  "version": "4.2.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",
@@ -35,7 +35,7 @@
   "peerDependencies": {
     "@remix-run/react": "1.x",
     "@remix-run/server-runtime": "1.x",
-    "react": "^17.0.2"
+    "react": "^17.0.2 || ^18.0.0"
   },
   "devDependencies": {
     "@remix-run/react": "^1.2.1",

package/src/internal/hooks.ts

@@ -159,7 +159,7 @@ export const useFieldDefaultValue = (
   );
   return defaultValues
     .map((val) => lodashGet(val, name))
-    .hydrateTo(state[name]);
+    .hydrateTo(lodashGet(state, name));
 };
 
 export const useClearError = ({ formId }: InternalFormContextValue) => {

package/src/server.ts

@@ -24,7 +24,8 @@ import {
  */
 export function validationError(
   error: ValidatorError,
-  repopulateFields?: unknown
+  repopulateFields?: unknown,
+  init?: ResponseInit
 ): Response {
   return json<ValidationErrorResponseData>(
     {
@@ -33,7 +34,7 @@ export function validationError(
       repopulateFields,
       formId: error.formId,
     },
-    { status: 422 }
+    { status: 422, ...init }
   );
 }