fix: several type and build errors and fix example type inference (#399)

* fix few type errors and fix example

* couple fixes

* fix babel

Author: flybayer

babel.config.js

@@ -30,10 +30,15 @@ module.exports = {
         ].replace(/^[^0-9]*/, ''),
       },
     ],
+    ['@babel/plugin-proposal-class-properties', { loose: false }],
   ].filter(Boolean),
   overrides: [
     {
-      exclude: ['./packages/solid-form/**', './packages/svelte-form/**', './packages/vue-form/**'],
+      exclude: [
+        './packages/solid-form/**',
+        './packages/svelte-form/**',
+        './packages/vue-form/**',
+      ],
       presets: ['@babel/react'],
     },
     {

docs/reference/fieldApi.md

@@ -205,7 +205,7 @@ An object type representing the state of a field.
 An object type representing the change and blur event handlers for a field.
 
 - ```tsx
-  onChange?: (updater: Updater<TData>) => void
+  onChange?: (value: TData) => void
   ```
   - An optional function to further handle the change event.
 - ```tsx
@@ -235,7 +235,7 @@ An object type representing the change and blur event handlers for a field.
   ```
   - The current value of the field.
 - ```tsx
-  onChange: (updater: Updater<TData>) => void
+  onChange: (value: TData) => void
   ```
   - A function to handle the change event.
 - ```tsx

examples/react/simple/src/index.tsx

@@ -181,12 +181,16 @@ export default function App() {
             />
           </div> */}
           <form.Subscribe
-            selector={(state) => [state.canSubmit, state.isSubmitting]}
-            children={([canSubmit, isSubmitting]) => (
-              <button type="submit" disabled={!canSubmit}>
-                {isSubmitting ? "..." : "Submit"}
-              </button>
-            )}
+            {...{
+              // TS bug - inference isn't working with props, so use object
+              selector: (state) =>
+                [state.canSubmit, state.isSubmitting] as const,
+              children: ([canSubmit, isSubmitting]) => (
+                <button type="submit" disabled={!canSubmit}>
+                  {isSubmitting ? "..." : "Submit"}
+                </button>
+              ),
+            }}
           />
         </form>
       </form.Provider>

packages/form-core/src/FieldApi.ts

@@ -58,7 +58,7 @@ export type UserInputProps = {
 
 export type ChangeProps<TData> = {
   value: TData
-  onChange: (updater: Updater<TData>) => void
+  onChange: (value: TData) => void
   onBlur: (event: any) => void
 }
 

packages/form-core/src/FormApi.ts

@@ -209,7 +209,7 @@ export class FormApi<TFormData> {
     return Promise.all(fieldValidationPromises)
   }
 
-  validateForm = async () => {}
+  // validateForm = async () => {}
 
   handleSubmit = async (e: FormSubmitEvent) => {
     e.preventDefault()
@@ -248,7 +248,7 @@ export class FormApi<TFormData> {
     }
 
     // Run validation for the form
-    await this.validateForm()
+    // await this.validateForm()
 
     if (!this.state.isValid) {
       done()

packages/react-form/src/useField.tsx

@@ -57,7 +57,7 @@ export function useField<TData, TFormData>(
   fieldApi.update({ ...opts, form: formApi })
 
   useStore(
-    fieldApi.store,
+    fieldApi.store as any,
     opts.mode === 'array'
       ? (state: any) => {
           return [state.meta, Object.keys(state.value || []).length]

packages/react-form/src/useForm.tsx

@@ -57,7 +57,7 @@ export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {
       selector,
     ) => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      return useStore(api.store, selector) as any
+      return useStore(api.store as any, selector as any) as any
     }
     api.Subscribe = (
       // @ts-ignore
@@ -66,7 +66,7 @@ export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {
       return functionalUpdate(
         props.children,
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        useStore(api.store, props.selector),
+        useStore(api.store as any, props.selector as any),
       ) as any
     }