remix-forms - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/index.d.ts

@@ -87,2 +87,3 @@ import * as React from 'react';
     required: boolean;
+    dirty: boolean;
     label?: string;
@@ -152,2 +153,3 @@ options?: Option[];
     onTransition?: OnTransition<ObjectFromSchema<Schema>>;
+    /** @deprecated use your custom json/useActionData in createFormAction/createForm instead */
     parseActionData?: (data: any) => any;
@@ -154,0 +156,0 @@ children?: Children<ObjectFromSchema<Schema>>;

dist/index.js

@@ -42,2 +42,14 @@ "use strict";
 }
+function mapObject(obj, mapFunction) {
+  return Object.fromEntries(
+    Object.entries(obj).map(([key, value]) => mapFunction(key, value))
+  );
+}
+function parseDate(value) {
+  if (!value)
+    return value;
+  const dateTime = typeof value === "string" ? value : value.toISOString();
+  const [date] = dateTime.split("T");
+  return date;
+}
 
@@ -51,3 +63,3 @@ // src/createForm.tsx
 
-// src/mapChildren.ts
+// src/childrenTraversal.ts
 var React = __toESM(require("react"));
@@ -69,2 +81,15 @@ function mapChildren(children, fn) {
 }
+function reduceElements(children, initialState, reducer) {
+  let foldedValue = initialState;
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child))
+      return;
+    if (child.props.children && typeof child.props.children !== "function") {
+      foldedValue = reduceElements(child.props.children, foldedValue, reducer);
+      return;
+    }
+    foldedValue = reducer(foldedValue, child);
+  });
+  return foldedValue;
+}
 
@@ -166,2 +191,12 @@ // src/shapeInfo.ts
 }
+function coerceToForm(value, shape) {
+  const { typeName } = shape;
+  if (typeName === "ZodBoolean") {
+    return Boolean(value) ?? false;
+  }
+  if (typeName === "ZodDate") {
+    return parseDate(value);
+  }
+  return String(value ?? "");
+}
 
@@ -246,9 +281,2 @@ // src/createSmartInput.tsx
 };
-function parseDate(value) {
-  if (!value)
-    return value;
-  const dateTime = typeof value === "string" ? value : value.toISOString();
-  const [date] = dateTime.split("T");
-  return date;
-}
 function createField({
@@ -274,2 +302,3 @@ register,
       errors,
+      dirty,
       type: typeProp,
@@ -498,3 +527,3 @@ required = false,
 
-// src/startCase.ts
+// src/inferLabel.ts
 function startCase(str) {
@@ -506,4 +535,2 @@ const matches = str.match(
 }
-
-// src/inferLabel.ts
 function inferLabel(fieldName) {
@@ -528,3 +555,3 @@ return startCase(fieldName).replace(/Url/g, "URL");
 }) {
-  function Form({
+  return function Form({
     component = DefaultComponent,
@@ -572,4 +599,18 @@ fetcher,
     const values = { ...valuesProp, ...actionValues };
-    const form = (0, import_react_hook_form.useForm)({ resolver: (0, import_zod.zodResolver)(schema), mode });
-    const { formState } = form;
+    const schemaShape = objectFromSchema(schema).shape;
+    const defaultValues = mapObject(schemaShape, (key, fieldShape) => {
+      var _a2;
+      const shape = shapeInfo(fieldShape);
+      const defaultValue = coerceToForm(
+        values[key] ?? ((_a2 = shape == null ? void 0 : shape.getDefaultValue) == null ? void 0 : _a2.call(shape)),
+        shape
+      );
+      return [key, defaultValue];
+    });
+    const form = (0, import_react_hook_form.useForm)({
+      resolver: (0, import_zod.zodResolver)(schema),
+      mode,
+      defaultValues
+    });
+    const { formState, reset } = form;
     const { errors: formErrors, isValid } = formState;
@@ -612,4 +653,22 @@ const [disabled, setDisabled] = React3.useState(false);
     );
-    const schemaShape = objectFromSchema(schema).shape;
+    const children = childrenFn == null ? void 0 : childrenFn({
+      Field,
+      Errors,
+      Error: Error2,
+      Button,
+      ...form
+    });
     React3.useEffect(() => {
+      const newDefaults = Object.fromEntries(
+        reduceElements(children, [], (prev, child) => {
+          if (child.type === Field) {
+            const { name, value } = child.props;
+            prev.push([name, value]);
+          }
+          return prev;
+        })
+      );
+      reset({ ...defaultValues, ...newDefaults });
+    }, []);
+    React3.useEffect(() => {
       var _a2;
@@ -637,9 +696,9 @@ for (const stringKey in schemaShape) {
         autoFocused = true;
-      const { typeName, optional, nullable, getDefaultValue, enumValues } = shapeInfo(shape);
+      const { typeName, optional, nullable, enumValues } = shapeInfo(shape);
       const fieldType = typeName ? fieldTypes[typeName] : "string";
       const required = !(optional || nullable);
       const propOptions = options && options[key];
-      const enumOptions = enumValues ? enumValues.map((value2) => ({
-        name: inferLabel(value2),
-        value: value2
+      const enumOptions = enumValues ? enumValues.map((value) => ({
+        name: inferLabel(value),
+        value
       })) : void 0;
@@ -649,3 +708,2 @@ const rawOptions = propOptions || enumOptions;
       const label = labels && labels[key] || inferLabel(String(stringKey));
-      const value = values && values[key];
       fields.push({
@@ -656,2 +714,3 @@ shape,
         required,
+        dirty: key in formState.dirtyFields,
         label,
@@ -661,3 +720,3 @@ options: fieldOptions,
         autoFocus,
-        value: value === void 0 ? getDefaultValue && getDefaultValue() : value,
+        value: defaultValues[key],
         hidden: hiddenFields && Boolean(hiddenFields.find((item) => item === key)),
@@ -670,10 +729,3 @@ multiline: multiline && Boolean(multiline.find((item) => item === key)),
     const buttonLabel = transition.state === "submitting" ? pendingButtonLabel : rawButtonLabel;
-    if (childrenFn) {
-      const children = childrenFn({
-        Field,
-        Errors,
-        Error: Error2,
-        Button,
-        ...form
-      });
+    if (children) {
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Component, {
@@ -762,4 +814,3 @@ method,
     });
-  }
-  return Form;
+  };
 }
@@ -766,0 +817,0 @@

package.json

 {
   "name": "remix-forms",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "The full-stack form library for Remix and React Router",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

62647

increased by5.37%

Lines of code

1856

increased by6.06%

No dependency changes