@tanstack/solid-form 0.13.4 → 0.13.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/createField.cjs.map +1 -1
- package/dist/cjs/createField.d.cts +2 -2
- package/dist/cjs/createForm.cjs.map +1 -1
- package/dist/cjs/createForm.d.cts +2 -2
- package/dist/cjs/createFormFactory.cjs +1 -1
- package/dist/cjs/createFormFactory.cjs.map +1 -1
- package/dist/cjs/createFormFactory.d.cts +1 -1
- package/dist/cjs/types.d.cts +1 -1
- package/dist/esm/createField.d.ts +2 -2
- package/dist/esm/createField.js.map +1 -1
- package/dist/esm/createForm.d.ts +2 -2
- package/dist/esm/createForm.js.map +1 -1
- package/dist/esm/createFormFactory.d.ts +1 -1
- package/dist/esm/createFormFactory.js +1 -1
- package/dist/esm/createFormFactory.js.map +1 -1
- package/dist/esm/types.d.ts +1 -1
- package/package.json +3 -3
- package/src/createField.tsx +7 -2
- package/src/createForm.tsx +5 -4
- package/src/createFormFactory.ts +3 -4
- package/src/tests/createField.test.tsx +1 -1
- package/src/tests/createForm.test.tsx +1 -1
- package/src/tests/createFormFactory.test.tsx +1 -1
- package/src/types.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createField.cjs","sources":["../../src/createField.tsx"],"sourcesContent":["import { FieldApi
|
|
1
|
+
{"version":3,"file":"createField.cjs","sources":["../../src/createField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport {\n createComponent,\n createComputed,\n createMemo,\n createSignal,\n onCleanup,\n onMount,\n} from 'solid-js'\nimport { formContext, useFormContext } from './formContext'\n\nimport type {\n DeepKeys,\n DeepValue,\n Narrow,\n Validator,\n} from '@tanstack/form-core'\nimport type { JSXElement } from 'solid-js'\nimport type { CreateFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n > {\n Field: FieldComponent<TParentData, TFormValidator>\n }\n}\n\nexport type CreateField<TParentData> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n>(\n opts: () => { name: Narrow<TName> } & CreateFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator\n >,\n) => () => FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n DeepValue<TParentData, TName>\n>\n\n// ugly way to trick solid into triggering updates for changes on the fieldApi\nfunction makeFieldReactive<FieldApiT extends FieldApi<any, any, any, any>>(\n fieldApi: FieldApiT,\n): () => FieldApiT {\n const [flag, setFlag] = createSignal(false)\n const fieldApiMemo = createMemo(() => [flag(), fieldApi] as const)\n const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f))\n onCleanup(unsubscribeStore)\n return () => fieldApiMemo()[1]\n}\n\nexport function createField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n>(\n opts: () => CreateFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator\n >,\n): () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {\n // Get the form API either manually or from context\n const { formApi, parentFieldName } = useFormContext()\n\n const options = opts()\n const name = (\n typeof options.index === 'number'\n ? [parentFieldName, options.index, options.name]\n : [parentFieldName, options.name]\n )\n .filter((d) => d !== undefined)\n .join('.')\n\n const fieldApi = new FieldApi({\n ...options,\n form: formApi,\n name: name as typeof options.name as never,\n })\n fieldApi.Field = Field as never\n\n /**\n * fieldApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n *\n * createComputed to make sure this effect runs before render effects\n */\n createComputed(() => fieldApi.update({ ...opts(), form: formApi } as never))\n\n // Instantiates field meta and removes it when unrendered\n onMount(() => onCleanup(fieldApi.mount()))\n\n return makeFieldReactive(fieldApi) as never\n}\n\ntype FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n children: (\n fieldApi: () => FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n ) => JSXElement\n} & (TParentData extends any[]\n ? {\n name?: TName\n index: number\n }\n : {\n name: TName\n index?: never\n }) &\n Omit<\n CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n 'name' | 'index'\n >\n\nexport type FieldComponent<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n children,\n ...fieldOptions\n}: FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n>) => JSXElement\n\nexport function Field<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n>(\n props: {\n children: (\n fieldApi: () => FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator\n >,\n ) => JSXElement\n } & CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n) {\n const fieldApi = createField<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator\n >(() => {\n const { children, ...fieldOptions } = props\n return fieldOptions\n })\n\n return (\n <formContext.Provider\n value={{\n formApi: fieldApi().form as never,\n parentFieldName: String(fieldApi().name),\n }}\n >\n {/* createComponent to make sure the signals in the children component are not tracked */}\n {createComponent(() => props.children(fieldApi), {})}\n </formContext.Provider>\n )\n}\n"],"names":["makeFieldReactive","fieldApi","flag","setFlag","createSignal","fieldApiMemo","createMemo","unsubscribeStore","store","subscribe","f","onCleanup","createField","opts","formApi","parentFieldName","useFormContext","options","name","index","filter","d","undefined","join","FieldApi","form","Field","createComputed","update","onMount","mount","props","children","fieldOptions","_$createComponent","formContext","Provider","value","String","createComponent"],"mappings":";;;;;;AA6DA,SAASA,kBACPC,UACiB;AACjB,QAAM,CAACC,MAAMC,OAAO,IAAIC,QAAY,aAAC,KAAK;AAC1C,QAAMC,eAAeC,QAAAA,WAAW,MAAM,CAACJ,KAAM,GAAED,QAAQ,CAAU;AACjE,QAAMM,mBAAmBN,SAASO,MAAMC,UAAU,MAAMN,QAASO,OAAM,CAACA,CAAC,CAAC;AAC1EC,UAAS,UAACJ,gBAAgB;AAC1B,SAAO,MAAMF,eAAe,CAAC;AAC/B;AAEO,SAASO,YAUdC,MAMqE;AAErE,QAAM;AAAA,IAAEC;AAAAA,IAASC;AAAAA,EAAiB,IAAGC,YAAc,eAAA;AAEnD,QAAMC,UAAUJ;AAChB,QAAMK,QACJ,OAAOD,QAAQE,UAAU,WACrB,CAACJ,iBAAiBE,QAAQE,OAAOF,QAAQC,IAAI,IAC7C,CAACH,iBAAiBE,QAAQC,IAAI,GAEjCE,OAAQC,OAAMA,MAAMC,MAAS,EAC7BC,KAAK,GAAG;AAEX,QAAMtB,WAAW,IAAIuB,kBAAS;AAAA,IAC5B,GAAGP;AAAAA,IACHQ,MAAMX;AAAAA,IACNI;AAAAA,EACF,CAAC;AACDjB,WAASyB,QAAQA;AAQjBC,yBAAe,MAAM1B,SAAS2B,OAAO;AAAA,IAAE,GAAGf,KAAM;AAAA,IAAEY,MAAMX;AAAAA,EAAkB,CAAA,CAAC;AAG3Ee,UAAAA,QAAQ,MAAMlB,QAAS,UAACV,SAAS6B,MAAK,CAAE,CAAC;AAEzC,SAAO9B,kBAAkBC,QAAQ;AACnC;AA0DO,SAASyB,MAUdK,OAUA;AACA,QAAM9B,WAAWW,YAKf,MAAM;AACN,UAAM;AAAA,MAAEoB;AAAAA,MAAU,GAAGC;AAAAA,IAAc,IAAGF;AACtC,WAAOE;AAAAA,EACT,CAAC;AAED,SAAAC,IAAA,gBACGC,YAAW,YAACC,UAAQ;AAAA,IAAA,IACnBC,QAAK;AAAA,aAAE;AAAA,QACLvB,SAASb,SAAQ,EAAGwB;AAAAA,QACpBV,iBAAiBuB,OAAOrC,SAAU,EAACiB,IAAI;AAAA;IACxC;AAAA,IAAA,IAAAc,WAAA;AAAA,aAGAO,QAAAA,gBAAgB,MAAMR,MAAMC,SAAS/B,QAAQ,GAAG,CAAA,CAAE;AAAA,IAAC;AAAA,EAAA,CAAA;AAG1D;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FieldApi
|
|
2
|
-
import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core';
|
|
1
|
+
import { FieldApi } from '@tanstack/form-core';
|
|
2
|
+
import type { DeepKeys, DeepValue, Narrow, Validator } from '@tanstack/form-core';
|
|
3
3
|
import type { JSXElement } from 'solid-js';
|
|
4
4
|
import type { CreateFieldOptions } from './types.cjs';
|
|
5
5
|
declare module '@tanstack/form-core' {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createForm.cjs","sources":["../../src/createForm.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"createForm.cjs","sources":["../../src/createForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { createComputed, onMount } from 'solid-js'\nimport { useStore } from '@tanstack/solid-store'\nimport {\n type CreateField,\n Field,\n type FieldComponent,\n createField,\n} from './createField'\nimport { formContext } from './formContext'\nimport type { JSXElement } from 'solid-js'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\n\ntype NoInfer<T> = [T][T extends any ? 0 : never]\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData, TFormValidator> {\n Provider: (props: { children: any }) => JSXElement\n Field: FieldComponent<TFormData, TFormValidator>\n createField: CreateField<TFormData>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => () => TSelected\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children: ((state: () => NoInfer<TSelected>) => JSXElement) | JSXElement\n }) => JSXElement\n }\n}\n\nexport function createForm<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n>(\n opts?: () => FormOptions<TParentData, TFormValidator>,\n): FormApi<TParentData, TFormValidator> {\n const options = opts?.()\n const formApi = new FormApi<TParentData, TFormValidator>(options)\n\n formApi.Provider = function Provider(props) {\n onMount(formApi.mount)\n return (\n <formContext.Provider {...props} value={{ formApi: formApi as never }} />\n )\n }\n formApi.Field = Field as any\n formApi.createField = createField as CreateField<TParentData>\n formApi.useStore = (selector) => useStore(formApi.store, selector)\n formApi.Subscribe = (props) =>\n functionalUpdate(props.children, useStore(formApi.store, props.selector))\n\n /**\n * formApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n createComputed(() => formApi.update(opts?.()))\n\n return formApi\n}\n"],"names":["createForm","opts","options","formApi","FormApi","Provider","props","onMount","mount","_$createComponent","formContext","_$mergeProps","value","Field","createField","useStore","selector","store","Subscribe","functionalUpdate","children","createComputed","update"],"mappings":";;;;;;;;AA+BO,SAASA,WAMdC,MACsC;AACtC,QAAMC,UAAUD;AAChB,QAAME,UAAU,IAAIC,iBAAqCF,OAAO;AAEhEC,UAAQE,WAAW,SAASA,SAASC,OAAO;AAC1CC,oBAAQJ,QAAQK,KAAK;AACrB,WAAAC,IAAA,gBACGC,YAAW,YAACL,UAAQM,IAAAA,WAAKL,OAAK;AAAA,MAAEM,OAAO;AAAA,QAAET;AAAAA,MAA0B;AAAA,IAAC,CAAA,CAAA;AAAA;AAGzEA,UAAQU,QAAQA;AAChBV,UAAQW,cAAcA;AACtBX,UAAQY,WAAYC,cAAaD,WAAAA,SAASZ,QAAQc,OAAOD,QAAQ;AACjEb,UAAQe,YAAaZ,WACnBa,SAAAA,iBAAiBb,MAAMc,UAAUL,WAAQ,SAACZ,QAAQc,OAAOX,MAAMU,QAAQ,CAAC;AAM1EK,UAAAA,eAAe,MAAMlB,QAAQmB,OAAOrB,8BAAQ,CAAC;AAE7C,SAAOE;AACT;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import type { FormOptions, FormState, Validator } from '@tanstack/form-core';
|
|
2
1
|
import { FormApi } from '@tanstack/form-core';
|
|
3
|
-
import { type JSXElement } from 'solid-js';
|
|
4
2
|
import { type CreateField, type FieldComponent } from './createField.cjs';
|
|
3
|
+
import type { JSXElement } from 'solid-js';
|
|
4
|
+
import type { FormOptions, FormState, Validator } from '@tanstack/form-core';
|
|
5
5
|
type NoInfer<T> = [T][T extends any ? 0 : never];
|
|
6
6
|
declare module '@tanstack/form-core' {
|
|
7
7
|
interface FormApi<TFormData, TFormValidator> {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const solidJs = require("solid-js");
|
|
3
4
|
const createField = require("./createField.cjs");
|
|
4
5
|
const createForm = require("./createForm.cjs");
|
|
5
|
-
const solidJs = require("solid-js");
|
|
6
6
|
function createFormFactory(defaultOpts) {
|
|
7
7
|
return {
|
|
8
8
|
createForm: (opts) => createForm.createForm(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createFormFactory.cjs","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"createFormFactory.cjs","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import { mergeProps } from 'solid-js'\nimport {\n type CreateField,\n Field,\n type FieldComponent,\n createField,\n} from './createField'\nimport { createForm } from './createForm'\nimport type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\n\nexport type FormFactory<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n createForm: (\n opts?: () => FormOptions<TFormData, TFormValidator>,\n ) => FormApi<TFormData, TFormValidator>\n createField: CreateField<TFormData>\n Field: FieldComponent<TFormData, TFormValidator>\n}\n\nexport function createFormFactory<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n defaultOpts?: () => FormOptions<TFormData, TFormValidator>,\n): FormFactory<TFormData, TFormValidator> {\n return {\n createForm: (opts) =>\n createForm<TFormData, TFormValidator>(() =>\n mergeProps(defaultOpts?.() ?? {}, opts?.() ?? {}),\n ),\n createField,\n Field: Field as never,\n }\n}\n"],"names":["createForm","mergeProps","createField","Field"],"mappings":";;;;;AAqBO,SAAS,kBAId,aACwC;AACjC,SAAA;AAAA,IACL,YAAY,CAAC,SACXA,WAAA;AAAA,MAAsC,MACpCC,QAAAA,YAAW,iDAAmB,CAAI,IAAA,mCAAY,CAAA,CAAE;AAAA,IAClD;AAAA,IAAA,aACFC,YAAA;AAAA,IAAA,OACAC,YAAA;AAAA,EAAA;AAEJ;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { FormApi, FormOptions, Validator } from '@tanstack/form-core';
|
|
2
1
|
import { type CreateField, type FieldComponent } from './createField.cjs';
|
|
2
|
+
import type { FormApi, FormOptions, Validator } from '@tanstack/form-core';
|
|
3
3
|
export type FormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = {
|
|
4
4
|
createForm: (opts?: () => FormOptions<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
|
|
5
5
|
createField: CreateField<TFormData>;
|
package/dist/cjs/types.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { DeepKeys, DeepValue, FieldOptions, Validator } from '@tanstack/form-core';
|
|
2
2
|
export type CreateFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
|
|
3
3
|
mode?: 'value' | 'array';
|
|
4
4
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FieldApi
|
|
2
|
-
import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core';
|
|
1
|
+
import { FieldApi } from '@tanstack/form-core';
|
|
2
|
+
import type { DeepKeys, DeepValue, Narrow, Validator } from '@tanstack/form-core';
|
|
3
3
|
import type { JSXElement } from 'solid-js';
|
|
4
4
|
import type { CreateFieldOptions } from './types.js';
|
|
5
5
|
declare module '@tanstack/form-core' {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createField.js","sources":["../../src/createField.tsx"],"sourcesContent":["import { FieldApi
|
|
1
|
+
{"version":3,"file":"createField.js","sources":["../../src/createField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport {\n createComponent,\n createComputed,\n createMemo,\n createSignal,\n onCleanup,\n onMount,\n} from 'solid-js'\nimport { formContext, useFormContext } from './formContext'\n\nimport type {\n DeepKeys,\n DeepValue,\n Narrow,\n Validator,\n} from '@tanstack/form-core'\nimport type { JSXElement } from 'solid-js'\nimport type { CreateFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n > {\n Field: FieldComponent<TParentData, TFormValidator>\n }\n}\n\nexport type CreateField<TParentData> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n>(\n opts: () => { name: Narrow<TName> } & CreateFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator\n >,\n) => () => FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n DeepValue<TParentData, TName>\n>\n\n// ugly way to trick solid into triggering updates for changes on the fieldApi\nfunction makeFieldReactive<FieldApiT extends FieldApi<any, any, any, any>>(\n fieldApi: FieldApiT,\n): () => FieldApiT {\n const [flag, setFlag] = createSignal(false)\n const fieldApiMemo = createMemo(() => [flag(), fieldApi] as const)\n const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f))\n onCleanup(unsubscribeStore)\n return () => fieldApiMemo()[1]\n}\n\nexport function createField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n>(\n opts: () => CreateFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator\n >,\n): () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {\n // Get the form API either manually or from context\n const { formApi, parentFieldName } = useFormContext()\n\n const options = opts()\n const name = (\n typeof options.index === 'number'\n ? [parentFieldName, options.index, options.name]\n : [parentFieldName, options.name]\n )\n .filter((d) => d !== undefined)\n .join('.')\n\n const fieldApi = new FieldApi({\n ...options,\n form: formApi,\n name: name as typeof options.name as never,\n })\n fieldApi.Field = Field as never\n\n /**\n * fieldApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n *\n * createComputed to make sure this effect runs before render effects\n */\n createComputed(() => fieldApi.update({ ...opts(), form: formApi } as never))\n\n // Instantiates field meta and removes it when unrendered\n onMount(() => onCleanup(fieldApi.mount()))\n\n return makeFieldReactive(fieldApi) as never\n}\n\ntype FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n children: (\n fieldApi: () => FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n ) => JSXElement\n} & (TParentData extends any[]\n ? {\n name?: TName\n index: number\n }\n : {\n name: TName\n index?: never\n }) &\n Omit<\n CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n 'name' | 'index'\n >\n\nexport type FieldComponent<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n children,\n ...fieldOptions\n}: FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n>) => JSXElement\n\nexport function Field<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n>(\n props: {\n children: (\n fieldApi: () => FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator\n >,\n ) => JSXElement\n } & CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n) {\n const fieldApi = createField<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator\n >(() => {\n const { children, ...fieldOptions } = props\n return fieldOptions\n })\n\n return (\n <formContext.Provider\n value={{\n formApi: fieldApi().form as never,\n parentFieldName: String(fieldApi().name),\n }}\n >\n {/* createComponent to make sure the signals in the children component are not tracked */}\n {createComponent(() => props.children(fieldApi), {})}\n </formContext.Provider>\n )\n}\n"],"names":["makeFieldReactive","fieldApi","flag","setFlag","createSignal","fieldApiMemo","createMemo","unsubscribeStore","store","subscribe","f","onCleanup","createField","opts","formApi","parentFieldName","useFormContext","options","name","index","filter","d","undefined","join","FieldApi","form","Field","createComputed","update","onMount","mount","props","children","fieldOptions","_$createComponent","formContext","Provider","value","String","createComponent"],"mappings":";;;;AA6DA,SAASA,kBACPC,UACiB;AACjB,QAAM,CAACC,MAAMC,OAAO,IAAIC,aAAa,KAAK;AAC1C,QAAMC,eAAeC,WAAW,MAAM,CAACJ,KAAM,GAAED,QAAQ,CAAU;AACjE,QAAMM,mBAAmBN,SAASO,MAAMC,UAAU,MAAMN,QAASO,OAAM,CAACA,CAAC,CAAC;AAC1EC,YAAUJ,gBAAgB;AAC1B,SAAO,MAAMF,eAAe,CAAC;AAC/B;AAEO,SAASO,YAUdC,MAMqE;AAErE,QAAM;AAAA,IAAEC;AAAAA,IAASC;AAAAA,EAAiB,IAAGC,eAAc;AAEnD,QAAMC,UAAUJ;AAChB,QAAMK,QACJ,OAAOD,QAAQE,UAAU,WACrB,CAACJ,iBAAiBE,QAAQE,OAAOF,QAAQC,IAAI,IAC7C,CAACH,iBAAiBE,QAAQC,IAAI,GAEjCE,OAAQC,OAAMA,MAAMC,MAAS,EAC7BC,KAAK,GAAG;AAEX,QAAMtB,WAAW,IAAIuB,SAAS;AAAA,IAC5B,GAAGP;AAAAA,IACHQ,MAAMX;AAAAA,IACNI;AAAAA,EACF,CAAC;AACDjB,WAASyB,QAAQA;AAQjBC,iBAAe,MAAM1B,SAAS2B,OAAO;AAAA,IAAE,GAAGf,KAAM;AAAA,IAAEY,MAAMX;AAAAA,EAAkB,CAAA,CAAC;AAG3Ee,UAAQ,MAAMlB,UAAUV,SAAS6B,MAAK,CAAE,CAAC;AAEzC,SAAO9B,kBAAkBC,QAAQ;AACnC;AA0DO,SAASyB,MAUdK,OAUA;AACA,QAAM9B,WAAWW,YAKf,MAAM;AACN,UAAM;AAAA,MAAEoB;AAAAA,MAAU,GAAGC;AAAAA,IAAc,IAAGF;AACtC,WAAOE;AAAAA,EACT,CAAC;AAED,SAAAC,gBACGC,YAAYC,UAAQ;AAAA,IAAA,IACnBC,QAAK;AAAA,aAAE;AAAA,QACLvB,SAASb,SAAQ,EAAGwB;AAAAA,QACpBV,iBAAiBuB,OAAOrC,SAAU,EAACiB,IAAI;AAAA;IACxC;AAAA,IAAA,IAAAc,WAAA;AAAA,aAGAO,kBAAgB,MAAMR,MAAMC,SAAS/B,QAAQ,GAAG,CAAA,CAAE;AAAA,IAAC;AAAA,EAAA,CAAA;AAG1D;"}
|
package/dist/esm/createForm.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import type { FormOptions, FormState, Validator } from '@tanstack/form-core';
|
|
2
1
|
import { FormApi } from '@tanstack/form-core';
|
|
3
|
-
import { type JSXElement } from 'solid-js';
|
|
4
2
|
import { type CreateField, type FieldComponent } from './createField.js';
|
|
3
|
+
import type { JSXElement } from 'solid-js';
|
|
4
|
+
import type { FormOptions, FormState, Validator } from '@tanstack/form-core';
|
|
5
5
|
type NoInfer<T> = [T][T extends any ? 0 : never];
|
|
6
6
|
declare module '@tanstack/form-core' {
|
|
7
7
|
interface FormApi<TFormData, TFormValidator> {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createForm.js","sources":["../../src/createForm.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"createForm.js","sources":["../../src/createForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { createComputed, onMount } from 'solid-js'\nimport { useStore } from '@tanstack/solid-store'\nimport {\n type CreateField,\n Field,\n type FieldComponent,\n createField,\n} from './createField'\nimport { formContext } from './formContext'\nimport type { JSXElement } from 'solid-js'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\n\ntype NoInfer<T> = [T][T extends any ? 0 : never]\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData, TFormValidator> {\n Provider: (props: { children: any }) => JSXElement\n Field: FieldComponent<TFormData, TFormValidator>\n createField: CreateField<TFormData>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => () => TSelected\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children: ((state: () => NoInfer<TSelected>) => JSXElement) | JSXElement\n }) => JSXElement\n }\n}\n\nexport function createForm<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n>(\n opts?: () => FormOptions<TParentData, TFormValidator>,\n): FormApi<TParentData, TFormValidator> {\n const options = opts?.()\n const formApi = new FormApi<TParentData, TFormValidator>(options)\n\n formApi.Provider = function Provider(props) {\n onMount(formApi.mount)\n return (\n <formContext.Provider {...props} value={{ formApi: formApi as never }} />\n )\n }\n formApi.Field = Field as any\n formApi.createField = createField as CreateField<TParentData>\n formApi.useStore = (selector) => useStore(formApi.store, selector)\n formApi.Subscribe = (props) =>\n functionalUpdate(props.children, useStore(formApi.store, props.selector))\n\n /**\n * formApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n createComputed(() => formApi.update(opts?.()))\n\n return formApi\n}\n"],"names":["createForm","opts","options","formApi","FormApi","Provider","props","onMount","mount","_$createComponent","formContext","_$mergeProps","value","Field","createField","useStore","selector","store","Subscribe","functionalUpdate","children","createComputed","update"],"mappings":";;;;;;AA+BO,SAASA,WAMdC,MACsC;AACtC,QAAMC,UAAUD;AAChB,QAAME,UAAU,IAAIC,QAAqCF,OAAO;AAEhEC,UAAQE,WAAW,SAASA,SAASC,OAAO;AAC1CC,YAAQJ,QAAQK,KAAK;AACrB,WAAAC,gBACGC,YAAYL,UAAQM,WAAKL,OAAK;AAAA,MAAEM,OAAO;AAAA,QAAET;AAAAA,MAA0B;AAAA,IAAC,CAAA,CAAA;AAAA;AAGzEA,UAAQU,QAAQA;AAChBV,UAAQW,cAAcA;AACtBX,UAAQY,WAAYC,cAAaD,SAASZ,QAAQc,OAAOD,QAAQ;AACjEb,UAAQe,YAAaZ,WACnBa,iBAAiBb,MAAMc,UAAUL,SAASZ,QAAQc,OAAOX,MAAMU,QAAQ,CAAC;AAM1EK,iBAAe,MAAMlB,QAAQmB,OAAOrB,8BAAQ,CAAC;AAE7C,SAAOE;AACT;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { FormApi, FormOptions, Validator } from '@tanstack/form-core';
|
|
2
1
|
import { type CreateField, type FieldComponent } from './createField.js';
|
|
2
|
+
import type { FormApi, FormOptions, Validator } from '@tanstack/form-core';
|
|
3
3
|
export type FormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = {
|
|
4
4
|
createForm: (opts?: () => FormOptions<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
|
|
5
5
|
createField: CreateField<TFormData>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { mergeProps } from "solid-js";
|
|
1
2
|
import { createField, Field } from "./createField.js";
|
|
2
3
|
import { createForm } from "./createForm.js";
|
|
3
|
-
import { mergeProps } from "solid-js";
|
|
4
4
|
function createFormFactory(defaultOpts) {
|
|
5
5
|
return {
|
|
6
6
|
createForm: (opts) => createForm(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createFormFactory.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"createFormFactory.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import { mergeProps } from 'solid-js'\nimport {\n type CreateField,\n Field,\n type FieldComponent,\n createField,\n} from './createField'\nimport { createForm } from './createForm'\nimport type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\n\nexport type FormFactory<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n createForm: (\n opts?: () => FormOptions<TFormData, TFormValidator>,\n ) => FormApi<TFormData, TFormValidator>\n createField: CreateField<TFormData>\n Field: FieldComponent<TFormData, TFormValidator>\n}\n\nexport function createFormFactory<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n defaultOpts?: () => FormOptions<TFormData, TFormValidator>,\n): FormFactory<TFormData, TFormValidator> {\n return {\n createForm: (opts) =>\n createForm<TFormData, TFormValidator>(() =>\n mergeProps(defaultOpts?.() ?? {}, opts?.() ?? {}),\n ),\n createField,\n Field: Field as never,\n }\n}\n"],"names":[],"mappings":";;;AAqBO,SAAS,kBAId,aACwC;AACjC,SAAA;AAAA,IACL,YAAY,CAAC,SACX;AAAA,MAAsC,MACpC,YAAW,iDAAmB,CAAI,IAAA,mCAAY,CAAA,CAAE;AAAA,IAClD;AAAA,IACF;AAAA,IACA;AAAA,EAAA;AAEJ;"}
|
package/dist/esm/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { DeepKeys, DeepValue, FieldOptions, Validator } from '@tanstack/form-core';
|
|
2
2
|
export type CreateFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
|
|
3
3
|
mode?: 'value' | 'array';
|
|
4
4
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/solid-form",
|
|
3
|
-
"version": "0.13.
|
|
3
|
+
"version": "0.13.6",
|
|
4
4
|
"description": "Powerful, type-safe forms for Solid.",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"vite-plugin-solid": "^2.8.0"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@tanstack/solid-store": "^0.
|
|
41
|
-
"@tanstack/form-core": "0.13.
|
|
40
|
+
"@tanstack/solid-store": "^0.3.1",
|
|
41
|
+
"@tanstack/form-core": "0.13.6"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"solid-js": "^1.6.0"
|
package/src/createField.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FieldApi
|
|
1
|
+
import { FieldApi } from '@tanstack/form-core'
|
|
2
2
|
import {
|
|
3
3
|
createComponent,
|
|
4
4
|
createComputed,
|
|
@@ -9,7 +9,12 @@ import {
|
|
|
9
9
|
} from 'solid-js'
|
|
10
10
|
import { formContext, useFormContext } from './formContext'
|
|
11
11
|
|
|
12
|
-
import type {
|
|
12
|
+
import type {
|
|
13
|
+
DeepKeys,
|
|
14
|
+
DeepValue,
|
|
15
|
+
Narrow,
|
|
16
|
+
Validator,
|
|
17
|
+
} from '@tanstack/form-core'
|
|
13
18
|
import type { JSXElement } from 'solid-js'
|
|
14
19
|
import type { CreateFieldOptions } from './types'
|
|
15
20
|
|
package/src/createForm.tsx
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
import type { FormOptions, FormState, Validator } from '@tanstack/form-core'
|
|
2
1
|
import { FormApi, functionalUpdate } from '@tanstack/form-core'
|
|
3
|
-
import { createComputed, onMount
|
|
2
|
+
import { createComputed, onMount } from 'solid-js'
|
|
4
3
|
import { useStore } from '@tanstack/solid-store'
|
|
5
4
|
import {
|
|
6
|
-
Field,
|
|
7
|
-
createField,
|
|
8
5
|
type CreateField,
|
|
6
|
+
Field,
|
|
9
7
|
type FieldComponent,
|
|
8
|
+
createField,
|
|
10
9
|
} from './createField'
|
|
11
10
|
import { formContext } from './formContext'
|
|
11
|
+
import type { JSXElement } from 'solid-js'
|
|
12
|
+
import type { FormOptions, FormState, Validator } from '@tanstack/form-core'
|
|
12
13
|
|
|
13
14
|
type NoInfer<T> = [T][T extends any ? 0 : never]
|
|
14
15
|
|
package/src/createFormFactory.ts
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { mergeProps } from 'solid-js'
|
|
3
2
|
import {
|
|
4
3
|
type CreateField,
|
|
5
|
-
type FieldComponent,
|
|
6
4
|
Field,
|
|
5
|
+
type FieldComponent,
|
|
7
6
|
createField,
|
|
8
7
|
} from './createField'
|
|
9
8
|
import { createForm } from './createForm'
|
|
10
|
-
import {
|
|
9
|
+
import type { FormApi, FormOptions, Validator } from '@tanstack/form-core'
|
|
11
10
|
|
|
12
11
|
export type FormFactory<
|
|
13
12
|
TFormData,
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { render, waitFor } from '@solidjs/testing-library'
|
|
3
3
|
import userEvent from '@testing-library/user-event'
|
|
4
4
|
import '@testing-library/jest-dom'
|
|
5
|
-
import { createFormFactory } from '
|
|
5
|
+
import { createFormFactory } from '../index'
|
|
6
6
|
import { sleep } from './utils'
|
|
7
7
|
|
|
8
8
|
const user = userEvent.setup()
|
|
@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@solidjs/testing-library'
|
|
|
3
3
|
import '@testing-library/jest-dom'
|
|
4
4
|
import userEvent from '@testing-library/user-event'
|
|
5
5
|
import { Show, createSignal, onCleanup } from 'solid-js'
|
|
6
|
-
import { createForm, createFormFactory } from '
|
|
6
|
+
import { createForm, createFormFactory } from '../index'
|
|
7
7
|
import { sleep } from './utils'
|
|
8
8
|
import type { ValidationErrorMap } from '@tanstack/form-core'
|
|
9
9
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference lib="dom" />
|
|
2
2
|
import { render } from '@solidjs/testing-library'
|
|
3
3
|
import '@testing-library/jest-dom'
|
|
4
|
-
import { createFormFactory } from '
|
|
4
|
+
import { createFormFactory } from '../index'
|
|
5
5
|
|
|
6
6
|
describe('createFormFactory', () => {
|
|
7
7
|
it('should allow default values to be set', async () => {
|