Feature request for a `createForm` function or another way to wrap `useForm`

Hey, I’m building a library where I have a custom form helper that looks exactly like SlimeForm. I think SlimeForm is doing a very good job, and I would love to depend on it for my own form helper.

The issue is that I need to override the submit function with custom logic (this is for a routing library). I wanted to provide my own useForm that would defer the logic to SlimeForm, but I can’t get the typings because they’re not exported.

I was initially going to PR to export them, but I thought it would be nice if SlimeForm provided some API to generate a pre-configured useForm hook.

I’d happily PR that but I wanted to see if that would be accepted. I’m not sure about the API, but I’m thinking something like that:

// Somewhere in my own library
import { router } from './router'
import type { VisitOptions } from './types'
import { createForm } from 'slimeform'

export const useForm = createForm({
  submit: ({ form }) => async (overrides?: VisitOptions) => {
    // Here I implement my custom submit method, and this method is returned
    return await router.visit({
      method: overrides.method ?? 'POST',
      data: form,
      ...overrides
    })
  },
})

// Somewhere in userland, using my library
import { useForm } from 'my-library'

const { form, submit } = useForm({
  form: () => ({
    email: '',
    password: '',
  })
})

// These parameters are from `VisitOptions`
submit({ url: '/register', method: 'POST' })

Basically, every property from the object given to createForm would be a callback that return a function, and that function would be provided to the user. The callback would have form and status given to it.

It seems a bit complicated, but it’s also flexible. If you have another idea on how I could achieve my goal, I’m open to it too!

[innocenzi]

I’ll investigate and report back, thanks!

[LittleSound]

About these questions:

Question 1

The submitter function was not designed to be used in this way, perhaps you can read the documentation to understand its intent.

import { mySubmitForm } from './myFetch.ts'
const { _, submitter } = useForm(/* ... */)
// Wrap the generic submission code and use it later
const { submit, submitting } = submitter(mySubmitForm({ url: '/register', method: 'POST' }))

In general, the submit function is bound to the form’s @submit.prevent, so it doesn’t really need to be called with parameters. But you can provide various arguments when you create it as in the code above.

Question 2 and 3

I tried reading the code you provided, but I can’t see what is causing these errors, I need a runnable minimal reproduction and an issue. Note: They are currently working fine in 🚀 slimeform-playground.