noble-gold

Losing all types when consuming form hook from component library

Hello there ! We've tried to implement pre-bound components in our component library as follows

const { useAppForm, withForm, withFieldGroup } = createFormHook({
    fieldContext,
    formContext,
    fieldComponents: {
        TextField: FormTextField,
        TextArea: FormTextArea,
        Select: FormSelect,
        DatePicker: FormDatePicker,
        DateRangePicker: FormDateRangePicker,
        RadioGroup: FormRadioGroup,
        Checkbox: FormCheckbox,
        CheckboxGroup: FormCheckboxGroup,
        Switch: FormSwitch,
        TimePicker: FormTimePicker,
    },
    formComponents: {
        Submit: FormSubmit,
    },
});

export { useAppForm, withForm, withFieldGroup };

It works perfectly while in the library, we were able to make stories with proper typing following the documentation However, once we import the useAppForm from the library into our app, then it loses all it's types, we do not even have proper autocomplete for the useAppForm params, and the result "form" is typed as any Any ideas how to fix this issue ?

11 Replies

noble-goldOP•2mo ago

in the consuming app

genetic-orange•2mo ago

what does the generated declaration file look like?

noble-goldOP•2mo ago

message.txt

genetic-orange•2mo ago

hmm, those import('@tanstack/form-core') types seem suspicious does the app use it as dependency? Or does it only use your library as dependency? though it also imports react ...

noble-goldOP•2mo ago

tanstack form is installed in both the component library and the consuming app when using useForm directely in the app we do not have typing issues, only when using the custom useAppForm from the component library we are building the library with vite "library mode" if that helps

genetic-orange•2mo ago

odd. What happens if the library creates the form contexts and field/form components, and the app calls createFormHook with the imported contexts and components it needs?

noble-goldOP•2mo ago

ok your suggestion fixed the issue, we now have proper types and autocomplete when importing the pieces and calling createHookForm directly in the app very odd indeed 🤷‍♂️

genetic-orange•2mo ago

I'll still check why the error happened, but here's a suggestion for why this would be my choice of library implementation:

// my-own-addition.tsx
// allows users to add their own if they want
import { useFieldContext } from 'saphir';
export function MyCustomField() {}

// my-own-addition.tsx
// allows users to add their own if they want
import { useFieldContext } from 'saphir';
export function MyCustomField() {}

// form.tsx
// Only import field / form components the user actually wants.
// If you want, the library can also support lazy-loading for
// field and form components.
import { TextField, NumberField, fieldContext, formContext } from 'saphir';
import { MyCustomField } from './my-own-addition';

export const { useAppForm } = createFormHook({
   fieldContext,
   formContext,
   fieldComponents: { TextField, NumberField, MyCustomField },
   formComponents: {}
})

// form.tsx
// Only import field / form components the user actually wants.
// If you want, the library can also support lazy-loading for
// field and form components.
import { TextField, NumberField, fieldContext, formContext } from 'saphir';
import { MyCustomField } from './my-own-addition';

export const { useAppForm } = createFormHook({
   fieldContext,
   formContext,
   fieldComponents: { TextField, NumberField, MyCustomField },
   formComponents: {}
})

noble-goldOP•2mo ago

hopefully you will find out what happened 🤞 if you need more informations let me know thanks for your help with such a fast reponse time 🙏

genetic-orange•2mo ago

well, you mentioned vite library mode, so that‘ll be a start. If I can‘t reproduce it, I‘ll let you know

noble-goldOP•2mo ago

aight, good luck ! https://www.npmjs.com/package/vite-plugin-dts this is the plugin we use for dts also*

npm

vite-plugin-dts

<h1 align="center">vite-plugin-dts</h1>. Latest version: 4.5.4, last published: 4 months ago. Start using vite-plugin-dts in your project by running npm i vite-plugin-dts. There are 2381 other projects in the npm registry using vite-plugin-dts.

Gaming

Programming

Losing all types when consuming form hook from component library

Did you find this page helpful?