@tanstack/solid-form 0.6.1 → 0.7.1

package/build/dev.cjs

@@ -68,6 +68,7 @@ function createForm(opts) {
   const options = opts?.();
   const formApi = new formCore.FormApi(options);
   formApi.Provider = function Provider(props) {
+    solidJs.onMount(formApi.mount);
     return web.createComponent(formContext.Provider, web.mergeProps(props, {
       value: {
         formApi

package/build/dev.js

@@ -67,6 +67,7 @@ function createForm(opts) {
   const options = opts?.();
   const formApi = new FormApi(options);
   formApi.Provider = function Provider(props) {
+    onMount(formApi.mount);
     return createComponent(formContext.Provider, mergeProps(props, {
       value: {
         formApi

package/build/index.cjs

@@ -68,6 +68,7 @@ function createForm(opts) {
   const options = opts?.();
   const formApi = new formCore.FormApi(options);
   formApi.Provider = function Provider(props) {
+    solidJs.onMount(formApi.mount);
     return web.createComponent(formContext.Provider, web.mergeProps(props, {
       value: {
         formApi

package/build/index.js

@@ -67,6 +67,7 @@ function createForm(opts) {
   const options = opts?.();
   const formApi = new FormApi(options);
   formApi.Provider = function Provider(props) {
+    onMount(formApi.mount);
     return createComponent(formContext.Provider, mergeProps(props, {
       value: {
         formApi

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-form",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "description": "Powerful, type-safe forms for Solid.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@tanstack/solid-store": "^0.2.1",
-    "@tanstack/form-core": "0.6.1"
+    "@tanstack/form-core": "0.7.1"
   },
   "peerDependencies": {
     "solid-js": "^1.6.0"

package/src/createForm.tsx

@@ -1,6 +1,6 @@
 import type { FormOptions, FormState } from '@tanstack/form-core'
 import { FormApi, functionalUpdate } from '@tanstack/form-core'
-import { createComputed, type JSXElement } from 'solid-js'
+import { createComputed, onMount, type JSXElement } from 'solid-js'
 import { useStore } from '@tanstack/solid-store'
 import {
   Field,
@@ -35,6 +35,7 @@ export function createForm<TData, FormValidator>(
   const formApi = new FormApi<TData, FormValidator>(options)
 
   formApi.Provider = function Provider(props) {
+    onMount(formApi.mount)
     return <formContext.Provider {...props} value={{ formApi: formApi }} />
   }
   formApi.Field = Field as any

package/src/tests/createForm.test.tsx

@@ -2,6 +2,7 @@ import { render, screen, waitFor } from '@solidjs/testing-library'
 import '@testing-library/jest-dom'
 import userEvent from '@testing-library/user-event'
 import { createFormFactory, createForm } from '..'
+import { Show, createSignal } from 'solid-js'
 
 const user = userEvent.setup()
 
@@ -113,4 +114,37 @@ describe('createForm', () => {
     await user.click(getByText('Submit'))
     expect(submittedData?.firstName).toEqual('OtherName')
   })
+
+  it('should run on form mount', async () => {
+    const [formMounted, setFormMounted] = createSignal(false)
+    const [mountForm, setMountForm] = createSignal(false)
+    function Comp() {
+      const form = createForm(() => ({
+        defaultValues: {
+          firstName: 'FirstName',
+        },
+        onMount: () => {
+          setFormMounted(true)
+          return undefined
+        },
+      }))
+
+      return (
+        <Show
+          when={mountForm()}
+          fallback={
+            <button onClick={() => setMountForm(true)}>Mount form</button>
+          }
+        >
+          <form.Provider>
+            <h1>Form mounted</h1>
+          </form.Provider>
+        </Show>
+      )
+    }
+
+    const { getByText } = render(() => <Comp />)
+    await user.click(getByText('Mount form'))
+    expect(formMounted()).toBe(true)
+  })
 })