WIP: feat(solid-form): support Solid 2 beta 6

packages/solid-form/package.json

@@ -59,11 +59,13 @@
     "@tanstack/solid-store": "^0.9.1"
   },
   "devDependencies": {
-    "solid-js": "^1.9.9",
+    "@solidjs/web": "2.0.0-beta.6",
+    "@testing-library/dom": "^10.4.0",
+    "solid-js": "2.0.0-beta.6",
     "vite": "^7.2.2",
-    "vite-plugin-solid": "^2.11.8"
+    "vite-plugin-solid": "3.0.0-next.4"
   },
   "peerDependencies": {
-    "solid-js": ">=1.9.9"
+    "solid-js": ">=2.0.0-beta.6 <2.0.0-experimental.0"
   }
 }

packages/solid-form/src/createField.tsx

@@ -1,10 +1,9 @@
 import { FieldApi } from '@tanstack/form-core'
 import {
   createComponent,
-  createComputed,
+  createRenderEffect,
   createSignal,
-  onCleanup,
-  onMount,
+  onSettled,
 } from 'solid-js'
 import { useStore } from '@tanstack/solid-store'
 import type {
@@ -254,12 +253,16 @@ function makeFieldReactive<
   const [field, setField] = createSignal(fieldApi, { equals: false })
   // Handle shallow comparison to make sure that Derived doesn't create a new setField call every time
   const store = useStore(fieldApi.store, (store) => store)
-  // Run before initial render
-  createComputed(() => {
-    // Use the store to track dependencies
-    store()
-    setField(fieldApi)
-  })
+  createRenderEffect(
+    () => {
+      // Use the store to track dependencies
+      store()
+      return fieldApi
+    },
+    (nextFieldApi) => {
+      setField(() => nextFieldApi)
+    },
+  )
   return field
 }
 
@@ -346,25 +349,35 @@ export function createField<
 
   let mounted = false
   // Instantiates field meta and removes it when unrendered
-  onMount(() => {
+  onSettled(() => {
+    api.update(opts())
     const cleanupFn = api.mount()
     mounted = true
-    onCleanup(() => {
-      cleanupFn()
+    return () => {
       mounted = false
-    })
+      cleanupFn()
+    }
   })
 
   /**
    * fieldApi.update should not have any side effects. Think of it like a `useRef`
    * that we need to keep updated every render with the most up-to-date information.
    *
-   * createComputed to make sure this effect runs before render effects
+   * createRenderEffect keeps the api options in sync before user effects run.
    */
-  createComputed(() => {
-    if (!mounted) return
-    api.update(opts())
-  })
+  createRenderEffect(
+    () => {
+      const nextOptions = opts()
+      return mounted ? nextOptions : undefined
+    },
+    (options) => {
+      if (options) {
+        api.update(options)
+      }
+
+      return undefined
+    },
+  )
 
   return makeFieldReactive<
     TParentData,

packages/solid-form/src/createFieldGroup.tsx

@@ -1,6 +1,6 @@
 import { FieldGroupApi, functionalUpdate } from '@tanstack/form-core'
 import { useStore } from '@tanstack/solid-store'
-import { onCleanup, onMount } from 'solid-js'
+import { onSettled } from 'solid-js'
 import type { Component, JSX, ParentProps } from 'solid-js'
 import type {
   DeepKeysOfType,
@@ -194,26 +194,25 @@ export function createFieldGroup<
   > = api as never
 
   extendedApi.AppForm = (appFormProps) => <form.AppForm {...appFormProps} />
-  extendedApi.AppField = (props) => (
-    <form.AppField {...(api.getFormFieldOptions(props) as any)} />
-  )
-  extendedApi.Field = (props) => (
-    <form.Field {...(api.getFormFieldOptions(props) as any)} />
-  )
+  extendedApi.AppField = (props) => {
+    const fieldOptions = () => api.getFormFieldOptions(props)
+    return <form.AppField {...(fieldOptions() as any)} />
+  }
+  extendedApi.Field = (props) => {
+    const fieldOptions = () => api.getFormFieldOptions(props)
+    return <form.Field {...(fieldOptions() as any)} />
+  }
   extendedApi.Subscribe = (props) => {
     const data = useStore(api.store, props.selector)
 
     return functionalUpdate(props.children, data()) as Element
   }
 
-  let mounted = false
-  onMount(() => {
+  onSettled(() => {
     const cleanupFn = api.mount()
-    mounted = true
-    onCleanup(() => {
+    return () => {
       cleanupFn()
-      mounted = false
-    })
+    }
   })
 
   return Object.assign(extendedApi, {

packages/solid-form/src/createForm.tsx

@@ -1,5 +1,5 @@
 import { FormApi, functionalUpdate } from '@tanstack/form-core'
-import { createComputed, onMount } from 'solid-js'
+import { createRenderEffect, onSettled } from 'solid-js'
 import { useStore } from '@tanstack/solid-store'
 import { Field, createField } from './createField'
 import type {
@@ -239,13 +239,19 @@ export function createForm<
   extendedApi.Subscribe = (props) =>
     functionalUpdate(props.children, useStore(api.store, props.selector))
 
-  onMount(api.mount)
+  onSettled(api.mount)
 
   /**
    * formApi.update should not have any side effects. Think of it like a `useRef`
    * that we need to keep updated every render with the most up-to-date information.
    */
-  createComputed(() => api.update(opts?.()))
+  createRenderEffect(
+    () => opts?.(),
+    (options) => {
+      api.update(options)
+      return undefined
+    },
+  )
 
   return extendedApi
 }

packages/solid-form/src/createFormHook.tsx

@@ -1,8 +1,8 @@
 import {
   createComponent,
   createContext,
-  mergeProps,
-  splitProps,
+  merge,
+  omit,
   useContext,
 } from 'solid-js'
 import { createFieldGroup } from './createFieldGroup'
@@ -351,26 +351,18 @@ export function createFormHook<
 
     const AppForm = ((formProps) => {
       return (
-        <opts.formContext.Provider value={form}>
-          {formProps.children}
-        </opts.formContext.Provider>
+        <opts.formContext value={form}>{formProps.children}</opts.formContext>
       )
     }) as Component<ParentProps>
 
     const AppField = ((_props) => {
-      const [childProps, fieldProps] = splitProps(_props, ['children'])
+      const fieldProps = omit(_props, 'children')
       return (
         <form.Field {...fieldProps}>
           {(field) => (
-            <opts.fieldContext.Provider value={field}>
-              {createComponent(
-                () =>
-                  childProps.children(
-                    Object.assign(field, opts.fieldComponents),
-                  ),
-                {},
-              )}
-            </opts.fieldContext.Provider>
+            <opts.fieldContext value={field}>
+              {_props.children(Object.assign(field, opts.fieldComponents))}
+            </opts.fieldContext>
           )}
         </form.Field>
       )
@@ -472,7 +464,7 @@ export function createFormHook<
     return (innerProps) =>
       createComponent(
         render as Component<any>,
-        mergeProps(props ?? {}, innerProps),
+        props ? merge(props, innerProps) : innerProps,
       )
   }
 
@@ -560,7 +552,7 @@ export function createFormHook<
       const fieldGroupApi = createFieldGroup(() => fieldGroupProps)
       return createComponent(
         render as Component<any>,
-        mergeProps(props ?? {}, innerProps, { group: fieldGroupApi as any }),
+        merge(props ?? {}, innerProps, { group: fieldGroupApi as any }),
       )
     }
   }

packages/solid-form/tests/createField.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest'
 import { render, waitFor } from '@solidjs/testing-library'
 import { userEvent } from '@testing-library/user-event'
-import { Index, Show } from 'solid-js'
+import { Repeat, Show } from 'solid-js'
 import { createForm } from '../src/index'
 import { sleep } from './utils'
 
@@ -402,8 +402,8 @@ describe('createField', () => {
                 <div>
                   <Show when={field().state.value.length > 0}>
                     {/* Do not change this to For or the test will fail */}
-                    <Index each={field().state.value}>
-                      {(_, i) => {
+                    <Repeat count={field().state.value.length}>
+                      {(i) => {
                         return (
                           <form.Field name={`people[${i}]`}>
                             {(subField) => (
@@ -430,7 +430,7 @@ describe('createField', () => {
                           </form.Field>
                         )
                       }}
-                    </Index>
+                    </Repeat>
                   </Show>
 
                   <button onClick={() => field().pushValue('')} type="button">
@@ -496,8 +496,8 @@ describe('createField', () => {
                 <div>
                   <Show when={field().state.value.length > 0}>
                     {/* Do not change this to For or the test will fail */}
-                    <Index each={field().state.value}>
-                      {(_, i) => {
+                    <Repeat count={field().state.value.length}>
+                      {(i) => {
                         return (
                           <form.Field name={`people[${i}].name`}>
                             {(subField) => (
@@ -524,7 +524,7 @@ describe('createField', () => {
                           </form.Field>
                         )
                       }}
-                    </Index>
+                    </Repeat>
                   </Show>
 
                   <button

packages/solid-form/tests/createForm.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest'
 import { render, screen, waitFor } from '@solidjs/testing-library'
 import { userEvent } from '@testing-library/user-event'
-import { Index, Show, createSignal, onCleanup } from 'solid-js'
+import { Repeat, Show, createSignal, onCleanup } from 'solid-js'
 import { createForm } from '../src/index'
 import { sleep } from './utils'
 import type { FormValidationErrorMap } from '../src/index'
@@ -502,8 +502,8 @@ describe('createForm', () => {
         <>
           <form.Field name="foo" mode="array">
             {(arrayField) => (
-              <Index each={arrayField().state.value}>
-                {(_, i) => (
+              <Repeat count={arrayField().state.value.length}>
+                {(i) => (
                   <form.Field name={`foo[${i}].name`}>
                     {(field) => {
                       expect(field().name).toBe(`foo[${i}].name`)
@@ -512,7 +512,7 @@ describe('createForm', () => {
                     }}
                   </form.Field>
                 )}
-              </Index>
+              </Repeat>
             )}
           </form.Field>
           <button
@@ -560,8 +560,8 @@ describe('createForm', () => {
                     Add Item
                   </button>
                   <div>
-                    <Index each={fieldArray().state.value}>
-                      {(_, index) => (
+                    <Repeat count={fieldArray().state.value.length}>
+                      {(index) => (
                         <form.Field name={`items[${index}]`}>
                           {(field) => (
                             <div>
@@ -573,7 +573,7 @@ describe('createForm', () => {
                           )}
                         </form.Field>
                       )}
-                    </Index>
+                    </Repeat>
                   </div>
                 </div>
               )}
@@ -610,10 +610,9 @@ describe('createForm', () => {
           <form.Field name="foo" mode="array">
             {(arrayField) => (
               // This unit test provides different result based on
-              // using For vs. Index. Unit test both
-              // once that's fixed.
-              <Index each={arrayField().state.value}>
-                {(_, i) => (
+              // Keep index-based array field rendering covered.
+              <Repeat count={arrayField().state.value.length}>
+                {(i) => (
                   <form.Field name={`foo[${i}].name`}>
                     {(field) => {
                       expect(field().name).toBe(`foo[${i}].name`)
@@ -622,7 +621,7 @@ describe('createForm', () => {
                     }}
                   </form.Field>
                 )}
-              </Index>
+              </Repeat>
             )}
           </form.Field>
           <button

packages/solid-form/tests/createFormHook.test.tsx

@@ -593,9 +593,12 @@ describe('createFormHook', () => {
       ...formOpts,
       props: { status: 'idle' as 'idle' | 'loading' },
       render: (props) => {
-        createEffect(() => {
-          spy(props.status)
-        })
+        createEffect(
+          () => props.status,
+          (status) => {
+            spy(status)
+          },
+        )
         return <div data-testid="status">{props.status}</div>
       },
     })