@tanstack/solid-form 1.32.0 → 1.33.0

package/dist/source/createFormGroup.jsx

@@ -0,0 +1,50 @@
+import { FormGroupApi } from '@tanstack/form-core';
+import { createComponent, createComputed, createSignal, onCleanup, onMount, } from 'solid-js';
+import { useStore } from '@tanstack/solid-store';
+// ugly way to trick solid into triggering updates for changes on the formGroupApi
+function makeFormGroupReactive(formGroupApi) {
+    const [group, setGroup] = createSignal(formGroupApi, { equals: false });
+    // Handle shallow comparison to make sure that Derived doesn't create a new setGroup call every time
+    const store = useStore(formGroupApi.store, (store) => store);
+    // Run before initial render
+    createComputed(() => {
+        // Use the store to track dependencies
+        store();
+        setGroup(formGroupApi);
+    });
+    return group;
+}
+export function createFormGroup(opts) {
+    const options = opts();
+    const api = new FormGroupApi(options);
+    let mounted = false;
+    // Instantiates form group meta and removes it when unrendered
+    onMount(() => {
+        const cleanupFn = api.mount();
+        mounted = true;
+        onCleanup(() => {
+            cleanupFn();
+            mounted = false;
+        });
+    });
+    /**
+     * formGroupApi.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
+     */
+    createComputed(() => {
+        if (!mounted)
+            return;
+        api.update(opts());
+    });
+    return makeFormGroupReactive(api);
+}
+export function FormGroup(props) {
+    const formGroupApi = createFormGroup(() => {
+        const { children, ...formGroupOptions } = props;
+        return formGroupOptions;
+    });
+    return <>{createComponent(() => props.children(formGroupApi), {})}</>;
+}
+//# sourceMappingURL=createFormGroup.jsx.map

package/dist/source/createFormGroup.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFormGroup.jsx","sourceRoot":"","sources":["../../src/createFormGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAoB,MAAM,qBAAqB,CAAA;AACpE,OAAO,EACL,eAAe,EACf,cAAc,EACd,YAAY,EACZ,SAAS,EACT,OAAO,GACR,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAahD,kFAAkF;AAClF,SAAS,qBAAqB,CAwC5B,YAyBC;IA2BD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,YAAY,CAAC,YAAY,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAA;IACvE,oGAAoG;IACpG,MAAM,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAA;IAC5D,4BAA4B;IAC5B,cAAc,CAAC,GAAG,EAAE;QAClB,sCAAsC;QACtC,KAAK,EAAE,CAAA;QACP,QAAQ,CAAC,YAAY,CAAC,CAAA;IACxB,CAAC,CAAC,CAAA;IACF,OAAO,KAAK,CAAA;AACd,CAAC;AAED,MAAM,UAAU,eAAe,CAwC7B,IAyBC;IAED,MAAM,OAAO,GAAG,IAAI,EAAE,CAAA;IAEtB,MAAM,GAAG,GAAG,IAAI,YAAY,CAAC,OAAO,CAAC,CAAA;IAErC,IAAI,OAAO,GAAG,KAAK,CAAA;IACnB,8DAA8D;IAC9D,OAAO,CAAC,GAAG,EAAE;QACX,MAAM,SAAS,GAAG,GAAG,CAAC,KAAK,EAAE,CAAA;QAC7B,OAAO,GAAG,IAAI,CAAA;QACd,SAAS,CAAC,GAAG,EAAE;YACb,SAAS,EAAE,CAAA;YACX,OAAO,GAAG,KAAK,CAAA;QACjB,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF;;;;;OAKG;IACH,cAAc,CAAC,GAAG,EAAE;QAClB,IAAI,CAAC,OAAO;YAAE,OAAM;QACpB,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAA;IACpB,CAAC,CAAC,CAAA;IAEF,OAAO,qBAAqB,CAyB1B,GAAG,CAAC,CAAA;AACR,CAAC;AAsRD,MAAM,UAAU,SAAS,CAwCvB,KAyBC;IAED,MAAM,YAAY,GAAG,eAAe,CAyBlC,GAAG,EAAE;QACL,MAAM,EAAE,QAAQ,EAAE,GAAG,gBAAgB,EAAE,GAAG,KAAK,CAAA;QAC/C,OAAO,gBAAgB,CAAA;IACzB,CAAC,CAAC,CAAA;IAEF,OAAO,EAAE,CAAC,eAAe,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAA;AACvE,CAAC"}

package/dist/source/index.d.ts

@@ -3,5 +3,6 @@ export { useStore } from '@tanstack/solid-store';
 export * from './createField';
 export * from './createForm';
 export * from './createFieldGroup';
+export * from './createFormGroup';
 export * from './createFormHook';
 export * from './types';

package/dist/source/index.jsx

@@ -3,6 +3,7 @@ export { useStore } from '@tanstack/solid-store';
 export * from './createField';
 export * from './createForm';
 export * from './createFieldGroup';
+export * from './createFormGroup';
 export * from './createFormHook';
 export * from './types';
 //# sourceMappingURL=index.jsx.map

package/dist/source/index.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAEhD,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAEhD,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-form",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "description": "Powerful, type-safe forms for Solid.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -41,8 +41,8 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/solid-store": "^0.9.1",
-    "@tanstack/form-core": "1.32.0"
+    "@tanstack/solid-store": "^0.11.0",
+    "@tanstack/form-core": "1.33.0"
   },
   "devDependencies": {
     "solid-js": "^1.9.9",
@@ -60,7 +60,8 @@
     "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js",
     "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js",
     "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js",
-    "test:types:ts58": "tsc",
+    "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js",
+    "test:types:ts59": "tsc",
     "test:lib": "vitest",
     "test:lib:dev": "pnpm run test:lib --watch",
     "test:build": "publint --strict",

package/src/createForm.tsx

@@ -2,6 +2,7 @@ import { FormApi, functionalUpdate } from '@tanstack/form-core'
 import { createComputed, onMount } from 'solid-js'
 import { useStore } from '@tanstack/solid-store'
 import { Field, createField } from './createField'
+import { FormGroup } from './createFormGroup'
 import type {
   FormAsyncValidateOrFn,
   FormOptions,
@@ -10,6 +11,7 @@ import type {
 } from '@tanstack/form-core'
 import type { JSXElement } from 'solid-js'
 import type { FieldComponent } from './createField'
+import type { FormGroupComponent } from './createFormGroup'
 
 export interface SolidFormApi<
   TParentData,
@@ -39,6 +41,20 @@ export interface SolidFormApi<
     TFormOnServer,
     TSubmitMeta
   >
+  FormGroup: FormGroupComponent<
+    TParentData,
+    TFormOnMount,
+    TFormOnChange,
+    TFormOnChangeAsync,
+    TFormOnBlur,
+    TFormOnBlurAsync,
+    TFormOnSubmit,
+    TFormOnSubmitAsync,
+    TFormOnDynamic,
+    TFormOnDynamicAsync,
+    TFormOnServer,
+    TSubmitMeta
+  >
   useStore: <
     TSelected = NoInfer<
       FormState<
@@ -217,6 +233,7 @@ export function createForm<
     > = api as never
 
   extendedApi.Field = (props) => <Field {...props} form={api} />
+  extendedApi.FormGroup = (props) => <FormGroup {...props} form={api} />
   extendedApi.useStore = (selector) => useStore(api.store, selector)
   extendedApi.Subscribe = (props) =>
     functionalUpdate(props.children, useStore(api.store, props.selector))