remix-forms - npm Package Compare versions

Comparing version 0.18.2 to 0.19.0

dist/index.d.ts

 import * as React from 'react';
 import { Fetcher, FormMethod, FormProps as FormProps$1 } from '@remix-run/react';
-import { SomeZodObject, z, ZodTypeAny } from 'zod';
+import { z, SomeZodObject, ZodTypeAny } from 'zod';
 import { UseFormRegisterReturn, ValidationMode, UseFormReturn } from 'react-hook-form';
@@ -8,2 +8,5 @@ import { DomainFunction } from 'domain-functions';
 
+declare type FormSchema<T extends z.ZodTypeAny = z.SomeZodObject | z.ZodEffects<any>> = z.ZodEffects<T> | z.SomeZodObject;
+declare type ObjectFromSchema<T> = T extends z.SomeZodObject ? T : T extends z.ZodEffects<infer R> ? ObjectFromSchema<R> : never;
+
 declare type FormActionFailure<SchemaType> = {
@@ -22,3 +25,3 @@ errors: FormErrors<SchemaType>;
 declare type Callback = (request: Request) => Promise<Response | void>;
-declare type PerformMutationProps<Schema extends SomeZodObject, D extends unknown> = {
+declare type PerformMutationProps<Schema extends FormSchema, D extends unknown> = {
     request: Request;
@@ -29,3 +32,3 @@ schema: Schema;
 };
-declare type FormActionProps<Schema extends SomeZodObject, D extends unknown> = {
+declare type FormActionProps<Schema extends FormSchema, D extends unknown> = {
     beforeAction?: Callback;
@@ -35,4 +38,4 @@ beforeSuccess?: Callback;
 } & PerformMutationProps<Schema, D>;
-declare function performMutation<Schema extends SomeZodObject, D extends unknown>({ request, schema, mutation, environment, }: PerformMutationProps<Schema, D>): Promise<PerformMutation<z.infer<Schema>, D>>;
-declare function formAction<Schema extends SomeZodObject, D extends unknown>({ request, schema, mutation, environment, beforeAction, beforeSuccess, successPath, }: FormActionProps<Schema, D>): Promise<Response>;
+declare function performMutation<Schema extends FormSchema, D extends unknown>({ request, schema, mutation, environment, }: PerformMutationProps<Schema, D>): Promise<PerformMutation<z.infer<Schema>, D>>;
+declare function formAction<Schema extends FormSchema, D extends unknown>({ request, schema, mutation, environment, beforeAction, beforeSuccess, successPath, }: FormActionProps<Schema, D>): Promise<Response>;
 
@@ -111,3 +114,3 @@ declare type SmartInputProps = {
 } & UseFormReturn<z.infer<Schema>, any>) => void;
-declare type FormProps<Schema extends SomeZodObject> = {
+declare type FormProps<Schema extends FormSchema> = {
     component?: React.ForwardRefExoticComponent<AllRemixFormProps>;
@@ -120,3 +123,3 @@ fetcher?: Fetcher<any> & {
     mode?: keyof ValidationMode;
-    renderField?: RenderField<Schema>;
+    renderField?: RenderField<ObjectFromSchema<Schema>>;
     fieldComponent?: React.ComponentType<JSX.IntrinsicElements['div']> | string;
@@ -145,8 +148,8 @@ globalErrorsComponent?: React.ComponentType<JSX.IntrinsicElements['div']> | string;
     beforeChildren?: React.ReactNode;
-    onTransition?: OnTransition<Schema>;
+    onTransition?: OnTransition<ObjectFromSchema<Schema>>;
     parseActionData?: (data: any) => any;
-    children?: Children<Schema>;
+    children?: Children<ObjectFromSchema<Schema>>;
 } & Omit<AllRemixFormProps, 'method' | 'children'>;
-declare function Form<Schema extends SomeZodObject>({ component, fetcher, mode, renderField, fieldComponent, globalErrorsComponent: Errors, errorComponent: Error, fieldErrorsComponent, labelComponent, inputComponent, multilineComponent, selectComponent, checkboxComponent, checkboxWrapperComponent, buttonComponent: Button, buttonLabel: rawButtonLabel, pendingButtonLabel, method, schema, beforeChildren, onTransition, parseActionData, children: childrenFn, labels, placeholders, options, hiddenFields, multiline, errors: errorsProp, values: valuesProp, ...props }: FormProps<Schema>): JSX.Element;
+declare function Form<Schema extends FormSchema>({ component, fetcher, mode, renderField, fieldComponent, globalErrorsComponent: Errors, errorComponent: Error, fieldErrorsComponent, labelComponent, inputComponent, multilineComponent, selectComponent, checkboxComponent, checkboxWrapperComponent, buttonComponent: Button, buttonLabel: rawButtonLabel, pendingButtonLabel, method, schema, beforeChildren, onTransition, parseActionData, children: childrenFn, labels, placeholders, options, hiddenFields, multiline, errors: errorsProp, values: valuesProp, ...props }: FormProps<Schema>): JSX.Element;
 
-export { Callback, Form, FormActionProps, FormProps, PerformMutation, RenderField, RenderFieldProps, formAction, performMutation };
+export { Callback, Form, FormActionProps, FormProps, FormSchema, PerformMutation, RenderField, RenderFieldProps, formAction, performMutation };

dist/index.js

@@ -35,2 +35,9 @@ "use strict";
 var import_react = require("@remix-run/react");
+
+// src/prelude.ts
+function objectFromSchema(schema) {
+  return "shape" in schema ? schema : objectFromSchema(schema._def.schema);
+}
+
+// src/Form.tsx
 var import_react_hook_form = require("react-hook-form");
@@ -532,5 +539,6 @@ var import_zod = require("@hookform/resolvers/zod");
   ]);
+  const schemaShape = objectFromSchema(schema).shape;
   React5.useEffect(() => {
     var _a2;
-    for (const stringKey in schema.shape) {
+    for (const stringKey in schemaShape) {
       const key = stringKey;
@@ -547,6 +555,6 @@ if (errors && ((_a2 = errors[key]) == null ? void 0 : _a2.length)) {
   let fields = [];
-  for (const stringKey in schema.shape) {
+  for (const stringKey in schemaShape) {
     const key = stringKey;
     const message = (_a = formErrors[key]) == null ? void 0 : _a.message;
-    const shape = schema.shape[stringKey];
+    const shape = schemaShape[stringKey];
     const errorsArray = message && [message] || errors && errors[key];
@@ -665,18 +673,14 @@ const fieldErrors = errorsArray && errorsArray.length ? errorsArray : void 0;
 var import_server_runtime = require("@remix-run/server-runtime");
+var import_domain_functions = require("domain-functions");
 var import_domain_functions2 = require("domain-functions");
-
-// src/getFormValues.ts
-var import_domain_functions = require("domain-functions");
 async function getFormValues(request, schema) {
+  const shape = objectFromSchema(schema).shape;
   const input = await (0, import_domain_functions.inputFromForm)(request);
   let values = {};
-  for (const key in schema.shape) {
+  for (const key in shape) {
     const value = input[key];
-    const shape = schema.shape[key];
-    values[key] = coerceValue(value, shape);
+    values[key] = coerceValue(value, shape[key]);
   }
   return values;
 }
-
-// src/formAction.server.ts
 async function performMutation({
@@ -683,0 +687,0 @@ request,

package.json

 {
   "name": "remix-forms",
-  "version": "0.18.2",
+  "version": "0.19.0",
   "description": "Magically create forms + actions in Remix!",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

src/formAction.server.ts

 import { json, redirect } from '@remix-run/server-runtime'
 import type { DomainFunction } from 'domain-functions'
+import { inputFromForm } from 'domain-functions'
 import { errorMessagesForSchema } from 'domain-functions'
-import type { SomeZodObject, z } from 'zod'
-import { getFormValues } from './getFormValues'
+import type { z } from 'zod'
+import { coerceValue } from './coercions'
+import type { FormSchema } from './prelude'
+import { objectFromSchema } from './prelude'
 
@@ -24,3 +27,3 @@ type FormActionFailure<SchemaType> = {
 
-type PerformMutationProps<Schema extends SomeZodObject, D extends unknown> = {
+type PerformMutationProps<Schema extends FormSchema, D extends unknown> = {
   request: Request
@@ -32,3 +35,3 @@ schema: Schema
 
-type FormActionProps<Schema extends SomeZodObject, D extends unknown> = {
+type FormActionProps<Schema extends FormSchema, D extends unknown> = {
   beforeAction?: Callback
@@ -39,6 +42,20 @@ beforeSuccess?: Callback
 
-async function performMutation<
-  Schema extends SomeZodObject,
-  D extends unknown,
->({
+async function getFormValues<Schema extends FormSchema>(
+  request: Request,
+  schema: Schema,
+): Promise<FormValues<z.infer<Schema>>> {
+  const shape = objectFromSchema(schema).shape
+
+  const input = await inputFromForm(request)
+
+  let values: FormValues<z.infer<Schema>> = {}
+  for (const key in shape) {
+    const value = input[key]
+    values[key as keyof z.infer<Schema>] = coerceValue(value, shape[key])
+  }
+
+  return values
+}
+
+async function performMutation<Schema extends FormSchema, D extends unknown>({
   request,
@@ -73,3 +90,3 @@ schema,
 
-async function formAction<Schema extends SomeZodObject, D extends unknown>({
+async function formAction<Schema extends FormSchema, D extends unknown>({
   request,
@@ -76,0 +93,0 @@ schema,

src/index.ts

 export { Form } from './Form'
 export { formAction, performMutation } from './formAction.server'
 
-export type { FormProps, RenderFieldProps, RenderField } from './Form'
+export type {
+  FormProps,
+  RenderFieldProps,
+  RenderField,
+  FormSchema,
+} from './Form'
 
@@ -6,0 +11,0 @@ export type {

No alert changes

Improved metrics

Total package byte prevSize

94219

increased by1.45%

Lines of code

2827

increased by1.36%

No dependency changes