Documentation around usage with Core

[EfstathiadisD]

I have the need of the Form and Field Classes so I can use them outside of React!

I have 2 major problems implementing a solution and proposing to the broader team at my company:

1. Documentation around usage of primitive JS Classes! I have to look at tests in core and implementation in adapters.
2. Excessive need for Generics which prompted me to turn TS off.
3. An import outside of React without bundling it in would be great as well.

Don't get me wrong it works and in serves me well up to a point in order to save me from writing my own but:

1. I have the need to move the logic outside of React.
2. I want to pass the values to my own store so I have a single interface to access them in a typesafe way.

Any help would be appreciated in those areas! Even if it is some code here! Especially in TSLand since passing 19 anys for generics isn't possible!

To be a bit more helpful we have the need to move all logic outside the React lifecycle in JS Classes.

We want our own store and it works great with useSyncExternalStore. We have move all non form usages but handling forms is difficult.

I can write our own implementation of a FormController but I would prefer to use this lib. Especially since with the adapters the work is minimal.

I don't mind the FormController using this underneath. I just have lots of questions and TS Issues! Thanks for the hard work!

[crutchcorn]

Can you explain your needs more in depth? Why vanilla JS?

[EfstathiadisD]

We need to centralize state management outside of the UI layer.

We’re creating a product core similar to how Spotify structures its packages. The core handles all essential functionality, while adapters (e.g., Express, Hono, Koa) provide flexible APIs and specific integration points.

This approach encapsulates the core logic and avoids duplication! Actually similar to @tanstack/form 😜🙃

We have a store so we won't be using the native one and as I said I somehow made it work! I just need some examples around TS.

And would prefer to not ship React stuff when bundling it, but I can live with that for the foreseeable future!

At the end of the day forms are part of our state and it would be great if we could encapsulate them cleanly alongside each module!

[EfstathiadisD]

I'm working on this form handler pattern and would love your thoughts. Here's the core typing and implementation:

import type { FormState, FormValidateOrFn } from '@tanstack/form-core';
import type { ZodAny, ZodObject, ZodString } from 'zod';

type Status = 'IDLE' | 'PENDING' | 'MOUNTED';

export type CustomerContext = { cart: { id: string } };

/* -- Email Form -- */
type FormFields = { email: string };
type FormFieldsZod = { email: ZodString };

export type EmailFormState = FormState<
  FormFields,
  FormValidateOrFn<FormFields> | undefined,
  ZodObject<FormFieldsZod, 'strip', ZodAny, FormFields, FormFields>,
  never,
  ZodObject<FormFieldsZod, 'strip', ZodAny, FormFields, FormFields>,
  never,
  never,
  never,
  never
>;

export type EmailHandler = {
  readonly resource: 'EMAIL';
  reconcile: (context: CustomerContext) => Promise<void>;
};

export class Email implements EmailHandler {
  private static instance: Email | null = null;

  #form: AnyFormApi; <-- This is where I am stuck. This is any

  #store: CustomerStore;
  #context: CustomerContext;

  private constructor(context: CustomerContext) {
    this.#store = CustomerStore.getInstance();
    this.#context = context;

    this.#form = new FormApi({
      defaultValues: { email: '' },
      validators: { onBlur: email_schema, onChange: email_schema },
    });

    const slice = this.#store.slice('EMAIL');

    slice.setState(() => ({ status: 'IDLE', form: this.#form.state })); // <-- This is where the error occurs
  }

  public static getInstance(context: CustomerContext) {
    if (!Email.instance) {
      Email.instance = new Email(context);
      return Email.instance;
    }

    return Email.instance;
  }

  public get resource() {
    return 'EMAIL' as const;
  }

  public reconcile = async (updated: CustomerContext) => {
    this.#context = updated;
  };
}

I'm getting this type error when trying to assign the form state:

Type 'FormState<any, any, any, any, any, any, any, any, any>' 
is not assignable to type 'EmailFormState'.

How would you properly type #form to match EmailFormState while keeping the generic form API flexibility? The goal is to maintain type safety while supporting n fields eventually. Would love your perspective!