Lit integration for Tanstack Form

[Christian24]

Hello everyone,

I think a Lit integration would make me very happy. I started a RFC on their repo a while back and it seems like an integration would be the right way to move forward.

With @crutchcorn's help I created a little POC: https://github.com/Christian24/tanstack-form-lit-prototype/tree/arrays

We have just had a call between myself, @crutchcorn and the Lit team. This discussion is meant to facility the development of the Lit integration.

[Christian24]

I think our idea for the API has one huge drawback: How do we deal with FieldApi.getSubField()? This returns a new FieldApi, but our field directive does take FieldOptions not a field itself.

A possible solution would be to change the field directive so it takes a field as an argument. This has some advantages:

• The template would be cleaner, because you create the fields beforehand
• Secondly, we could still mount and unmount in the directive itself

A disadvantage to this would be I think that handling arrays would be more difficult. A proposed solution might be to have a second directive that wraps repeat, creates a FieldApi under the hood for each element of the array and then for child elements the field directive could be used again.

I will create a POC of what I mean later.

[crutchcorn]

Having seen the POC, it appears to change our API too drastically for an unknown benefit (as getSubField's intended usage is exceedingly niche - it may even be removed in the future).

For context, the proposed POC was akin to this:

const field = new FieldAPI({
    // Opts ...
});

// ...

return html`
    ${form.field(field, (render) => (
        // ...
    )}`

This comes with the downsides of:

• Removing colocation of field and validation logic
• Removing the need to think of form-core

And a few other things that escape my mind at the moment.

Broadly, if/when we decide to ship our official Lit framework adapter, I'd like it to remain as consistent with our other framework adapters as possible.

[crutchcorn]

This is now official!

https://tanstack.com/form/latest/docs/framework/lit/quick-start

Thank you @Christian24 for making this real!