expose a FormFragment component for use in complex components #129

scamden · 2023-07-15T00:05:28Z

@iway1 I think this approach might be more versatile (and better performance) than the recursive component walking I added. This lets you render whatever remaining piece of the form your component is responsible for reducing duplication but giving full control.

This is close but still WIP needs at least:

write a few more tests for more complex cases
is real recursion possible with this?
is it ok for FormFragment's name prop to be an intermediate name, and should it be renamed?
should useTsContoller's new name prop follow the same pattern and derive the prefix from context? (are there cases where we need to be able to fully override the name prefix? i think not)
does form fragment need to be able to support non-object schemas? (aka what if I want to make a custom array field of type number(), should i be able to reuse FormFragment to render the number field? or maybe we expose a third component which is a wrapper around renderComponentForSchemaDeep for this case)

I think these are not necessary to merge

fix use of getValues() to also useWatch() (this won't always rerender IIRC, maybe it's why my error messages weren't rerendering) - tried this and it didn't fix
might want to disable the previous recursion stuff we added or at least make the depth configurable and default to 0 (but that would be a breaking change, unless we're pretty sure no one but me is using it haha)
pull the schema from the field controller hook (i think this already exists with type but isn't strongly typed). i'm not sure this is important since we will have to cast it's type regardless. It does bring up a point though. That these custom components don't "know' their own schema. They only are coupled to the schema in the mapping. That's kinda fine but it would be cool to think of a way to more strongly couple them

Thoughts?

vercel · 2023-07-15T00:05:31Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-ts-form	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 2, 2023 10:57pm

iway1 · 2023-07-15T00:13:01Z

@scamden Cool! Checking it out.

Just curious what the main motivation for this is, was there a concrete use case you're wanting it for or just a general idea for improvement?

scamden · 2023-07-15T00:14:20Z

I have a bunch of concrete use cases! On phone but I'll write out more later! I can add tests that show case them

scamden · 2023-07-15T00:17:59Z

src/createSchemaForm.tsx

+                renderBefore:
+                  renderBefore && (() => renderBefore({ submit: submitFn })),
+                children: CustomChildrenComponent,
+              } as any)}


I couldn't for the life of me get it to accept these props even though I'm certain they're right..

…able jest timeout, improve test form components

scamden · 2023-07-18T18:07:38Z

@iway1 alright added a few more test cases! This allows us to write array components without duplicating any of the Fields. It also allows us to handle recursive schemas (with a lot of frustrating Zod type writing but these should be a power user feature and at least this proves it possible).

This also provides IMO a better way to handle nested schemas than the automatic recursive thing I added previously. That solution is a little bit less work to use if you don't have any customizations but it's performance impact on TS is still significant. And also in real life I find that you end up needing to customize at different levels of nesting pretty often. We could leave it, but I'd love to discuss defaulting the recursion depth to only a single level or maybe removing the feature entirely and publishing our first breaking change.

One question I still have that I'd love your feedback on:
I needed to allow you to pass "name" for array based components so they could insert the necessary [index] into the field path. I'll comment inline where i did this, but i wasn't sure whether it's better to force the user to prefix the name themselves or automatically supply the prefix from context and let the user assume they are only providing the name for their "level" of the data (eg just the [1] instead of previousKeys[1]). I chose the former, but maybe we could make name something more clear? something like nameAtThisLevel? idk naming is hard..

scamden · 2023-07-18T18:09:06Z

src/FieldContext.tsx

@@ -73,6 +73,11 @@ export function FieldContextProvider({
  );
 }

+export function useMaybeFieldName() {


let us automatically derive the name from context if there are any Fields already provided above us

src/FieldContext.tsx

src/__tests__/utils/testForm.tsx

scamden · 2023-07-18T18:11:38Z

src/__tests__/utils/testForm.tsx

  return (
    <div data-testid={textFieldTestId}>
      {label && <label>{label}</label>}
      <input
-        data-testid={props.testId}
+        name={props.name}


for debugging names via screen.debug()

scamden · 2023-07-18T18:11:54Z

src/__tests__/utils/testForm.tsx

  return (
    <div data-testid={textFieldTestId}>
      {label && <label>{label}</label>}
      <input
-        data-testid={props.testId}
+        name={props.name}
+        data-testid={props.testId || defaultTextInputTestId}


added default test ids to all the inputs to easily select them in tests

scamden · 2023-07-18T18:12:17Z

src/__tests__/utils/testForm.tsx

    </div>
  );
 }

-function BooleanField(props: {
+export function BooleanField(props: {


just made these test fields a little more robust and exported them, didn't break any previous tests

src/createSchemaForm.tsx

scamden · 2023-07-18T18:20:17Z

src/createSchemaForm.tsx

+    const { control, getValues } = useFormContext<z.TypeOf<SchemaType>>();
+
+    const namePrefix = useMaybeFieldName();
+    const submitter = useSubmitterContext();


i only needed this within FormFragment to supply the submitters addToCoerceUndefined methods on the field provider

scamden · 2023-07-18T18:21:43Z

src/isZodTypeEqual.tsx

 ) {
  // Recursively check objects
  // if typeNames are equal Unwrap Appropriate Types:
  // optional

  let { type: a, _rtf_id: idA } = unwrap(_a);
  let { type: b, _rtf_id: idB } = unwrap(_b);
+  if (visitedTypes.has(a) && visitedTypes.has(b)) return true;


this allows for equality checking even in circular objects. if both a and b have been seen that means a call higher up in the stack is responsible for checking their equality. if every other property on the schema is equal for that call then they are equal so returning true here defers that check to the call higher up. (and prevents an infinite loop ofc :P )

scamden · 2023-07-18T18:22:00Z

src/supportedZodTypes.ts

@@ -39,4 +40,5 @@ export type RTFBaseZodType =
 export type RTFSupportedZodTypes =
  | RTFBaseZodType
  | ZodOptional<any>
-  | ZodNullable<any>;
+  | ZodNullable<any>
+  | ZodLazy<any>;


supporting ZodLazy to allow the recursive schemas

scamden · 2023-07-18T18:22:41Z

src/unwrap.tsx


 export type UnwrappedRTFSupportedZodTypes = {
  type: RTFSupportedZodTypes;
  [HIDDEN_ID_PROPERTY]: string | null;
 };

+export function assertNever(x: never): never {


cleaned up the types a little here to make sure our switch is fully implemented

src/__tests__/createSchemaForm.test.tsx

… move render props outside fragment and fix a bug

scamden · 2023-07-19T22:14:28Z

jest.config.cjs

@@ -1,6 +1,9 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
  preset: "ts-jest",
+  testTimeout: process.env.JEST_TIMEOUT


nice for debugging

scamden · 2023-07-19T22:30:30Z

@iway1 ok iterated quite a bit and found a nice API for this i think! can you TAL now?

Maybe we can add a section to the docs under complex-fields as well if we like this. (Can do as a follow on as I'm hoping to make use of this feature for a project this week)

src/__tests__/createSchemaForm.test.tsx

…e from a mapped component

scamden · 2023-08-01T01:12:29Z

@iway1 i'm feeling pretty solid about this contract and it's a non breaking change but I don't really want to merge without your go ahead. i could merge in our fork and test it out that way for a bit, or if you're feeling comfortable I can merge here myself. lemme know what you're thinking.

i'll probably need to merge one of the two ways by tomorrow so we can make use of this for a project.

…nt_for_use_in_complex_components # Conflicts: # src/__tests__/createSchemaForm.test.tsx # src/createSchemaForm.tsx

scamden · 2023-11-10T19:11:00Z

@iway1 One more ping on this. I may go ahead and merge to keep us in sync. This is working well for us.

One add on I'll probably do eventually is a wrapper around useFieldArray similar to the usTsController as we end up using that hook a lot with these.

scamden · 2024-03-26T04:53:43Z

@iway1 you kinda done with this lib? Totally ok if so just want to set my expectations

expose a FormFragment component for use in complex components

6614d18

vercel bot deployed to Preview July 15, 2023 00:07 View deployment

scamden commented Jul 15, 2023

View reviewed changes

add more test cases for FormFragment, support ZodLazy, allow configur…

0bb22cd

…able jest timeout, improve test form components

vercel bot deployed to Preview July 18, 2023 18:00 View deployment