@tanstack/solid-form 0.13.0 → 0.13.3

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.
Files changed (48) hide show
  1. package/dist/cjs/createField.cjs +56 -0
  2. package/dist/cjs/createField.cjs.map +1 -0
  3. package/dist/cjs/createForm.cjs +28 -0
  4. package/dist/cjs/createForm.cjs.map +1 -0
  5. package/dist/cjs/createFormFactory.cjs +16 -0
  6. package/dist/cjs/createFormFactory.cjs.map +1 -0
  7. package/dist/cjs/formContext.cjs +13 -0
  8. package/dist/cjs/formContext.cjs.map +1 -0
  9. package/dist/cjs/index.cjs +7 -88
  10. package/dist/cjs/index.cjs.map +1 -1
  11. package/dist/esm/createField.js +56 -0
  12. package/dist/esm/createField.js.map +1 -0
  13. package/dist/esm/createForm.js +28 -0
  14. package/dist/esm/createForm.js.map +1 -0
  15. package/dist/esm/createFormFactory.js +16 -0
  16. package/dist/esm/createFormFactory.js.map +1 -0
  17. package/dist/esm/formContext.js +13 -0
  18. package/dist/esm/formContext.js.map +1 -0
  19. package/dist/esm/index.js +14 -0
  20. package/dist/esm/index.js.map +1 -0
  21. package/package.json +11 -11
  22. package/dist/cjs/index.js +0 -104
  23. package/dist/cjs/tests/createField.test-d.d.ts +0 -2
  24. package/dist/cjs/tests/createField.test.d.ts +0 -1
  25. package/dist/cjs/tests/createForm.test.d.ts +0 -1
  26. package/dist/cjs/tests/createFormFactory.test.d.ts +0 -1
  27. package/dist/cjs/tests/utils.d.ts +0 -1
  28. package/dist/mjs/index.d.mts +0 -7
  29. package/dist/mjs/index.d.ts +0 -7
  30. package/dist/mjs/index.js +0 -96
  31. package/dist/mjs/index.mjs +0 -96
  32. package/dist/mjs/index.mjs.map +0 -1
  33. package/dist/mjs/tests/createField.test-d.d.ts +0 -2
  34. package/dist/mjs/tests/createField.test.d.ts +0 -1
  35. package/dist/mjs/tests/createForm.test.d.ts +0 -1
  36. package/dist/mjs/tests/createFormFactory.test.d.ts +0 -1
  37. package/dist/mjs/tests/utils.d.ts +0 -1
  38. /package/dist/cjs/{createField.d.ts → createField.d.cts} +0 -0
  39. /package/dist/cjs/{createForm.d.ts → createForm.d.cts} +0 -0
  40. /package/dist/cjs/{createFormFactory.d.ts → createFormFactory.d.cts} +0 -0
  41. /package/dist/cjs/{formContext.d.ts → formContext.d.cts} +0 -0
  42. /package/dist/cjs/{types.d.ts → types.d.cts} +0 -0
  43. /package/dist/{mjs → esm}/createField.d.ts +0 -0
  44. /package/dist/{mjs → esm}/createForm.d.ts +0 -0
  45. /package/dist/{mjs → esm}/createFormFactory.d.ts +0 -0
  46. /package/dist/{mjs → esm}/formContext.d.ts +0 -0
  47. /package/dist/{cjs → esm}/index.d.ts +0 -0
  48. /package/dist/{mjs → esm}/types.d.ts +0 -0
@@ -0,0 +1,56 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const web = require("solid-js/web");
4
+ const formCore = require("@tanstack/form-core");
5
+ const solidJs = require("solid-js");
6
+ const formContext = require("./formContext.cjs");
7
+ function makeFieldReactive(fieldApi) {
8
+ const [flag, setFlag] = solidJs.createSignal(false);
9
+ const fieldApiMemo = solidJs.createMemo(() => [flag(), fieldApi]);
10
+ const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f));
11
+ solidJs.onCleanup(unsubscribeStore);
12
+ return () => fieldApiMemo()[1];
13
+ }
14
+ function createField(opts) {
15
+ const {
16
+ formApi,
17
+ parentFieldName
18
+ } = formContext.useFormContext();
19
+ const options = opts();
20
+ const name = (typeof options.index === "number" ? [parentFieldName, options.index, options.name] : [parentFieldName, options.name]).filter((d) => d !== void 0).join(".");
21
+ const fieldApi = new formCore.FieldApi({
22
+ ...options,
23
+ form: formApi,
24
+ name
25
+ });
26
+ fieldApi.Field = Field;
27
+ solidJs.createComputed(() => fieldApi.update({
28
+ ...opts(),
29
+ form: formApi
30
+ }));
31
+ solidJs.onMount(() => solidJs.onCleanup(fieldApi.mount()));
32
+ return makeFieldReactive(fieldApi);
33
+ }
34
+ function Field(props) {
35
+ const fieldApi = createField(() => {
36
+ const {
37
+ children,
38
+ ...fieldOptions
39
+ } = props;
40
+ return fieldOptions;
41
+ });
42
+ return web.createComponent(formContext.formContext.Provider, {
43
+ get value() {
44
+ return {
45
+ formApi: fieldApi().form,
46
+ parentFieldName: String(fieldApi().name)
47
+ };
48
+ },
49
+ get children() {
50
+ return solidJs.createComponent(() => props.children(fieldApi), {});
51
+ }
52
+ });
53
+ }
54
+ exports.Field = Field;
55
+ exports.createField = createField;
56
+ //# sourceMappingURL=createField.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createField.cjs","sources":["../../src/createField.tsx"],"sourcesContent":["import { FieldApi, type Validator } 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 { DeepKeys, DeepValue, Narrow } 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":";;;;;;AAwDA,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;;;"}
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const web = require("solid-js/web");
4
+ const formCore = require("@tanstack/form-core");
5
+ const solidJs = require("solid-js");
6
+ const solidStore = require("@tanstack/solid-store");
7
+ const createField = require("./createField.cjs");
8
+ const formContext = require("./formContext.cjs");
9
+ function createForm(opts) {
10
+ const options = opts == null ? void 0 : opts();
11
+ const formApi = new formCore.FormApi(options);
12
+ formApi.Provider = function Provider(props) {
13
+ solidJs.onMount(formApi.mount);
14
+ return web.createComponent(formContext.formContext.Provider, web.mergeProps(props, {
15
+ value: {
16
+ formApi
17
+ }
18
+ }));
19
+ };
20
+ formApi.Field = createField.Field;
21
+ formApi.createField = createField.createField;
22
+ formApi.useStore = (selector) => solidStore.useStore(formApi.store, selector);
23
+ formApi.Subscribe = (props) => formCore.functionalUpdate(props.children, solidStore.useStore(formApi.store, props.selector));
24
+ solidJs.createComputed(() => formApi.update(opts == null ? void 0 : opts()));
25
+ return formApi;
26
+ }
27
+ exports.createForm = createForm;
28
+ //# sourceMappingURL=createForm.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createForm.cjs","sources":["../../src/createForm.tsx"],"sourcesContent":["import type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { createComputed, onMount, type JSXElement } from 'solid-js'\nimport { useStore } from '@tanstack/solid-store'\nimport {\n Field,\n createField,\n type CreateField,\n type FieldComponent,\n} from './createField'\nimport { formContext } from './formContext'\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":";;;;;;;;AA8BO,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;;"}
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const createField = require("./createField.cjs");
4
+ const createForm = require("./createForm.cjs");
5
+ const solidJs = require("solid-js");
6
+ function createFormFactory(defaultOpts) {
7
+ return {
8
+ createForm: (opts) => createForm.createForm(
9
+ () => solidJs.mergeProps((defaultOpts == null ? void 0 : defaultOpts()) ?? {}, (opts == null ? void 0 : opts()) ?? {})
10
+ ),
11
+ createField: createField.createField,
12
+ Field: createField.Field
13
+ };
14
+ }
15
+ exports.createFormFactory = createFormFactory;
16
+ //# sourceMappingURL=createFormFactory.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createFormFactory.cjs","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\n\nimport {\n type CreateField,\n type FieldComponent,\n Field,\n createField,\n} from './createField'\nimport { createForm } from './createForm'\nimport { mergeProps } from 'solid-js'\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":";;;;;AAsBO,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;;"}
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const solidJs = require("solid-js");
4
+ const formContext = solidJs.createContext(void 0);
5
+ function useFormContext() {
6
+ const formApi = solidJs.useContext(formContext);
7
+ if (!formApi)
8
+ throw new Error(`You are trying to use the form API outside of a form!`);
9
+ return formApi;
10
+ }
11
+ exports.formContext = formContext;
12
+ exports.useFormContext = useFormContext;
13
+ //# sourceMappingURL=formContext.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"formContext.cjs","sources":["../../src/formContext.ts"],"sourcesContent":["import { createContext, useContext } from 'solid-js'\nimport type { FormApi, Validator } from '@tanstack/form-core'\n\ntype FormContextType =\n | undefined\n | {\n formApi: FormApi<any, Validator<any, unknown> | undefined>\n parentFieldName?: string\n }\n\nexport const formContext = createContext<FormContextType>(undefined)\n\nexport function useFormContext() {\n const formApi: FormContextType = useContext(formContext)\n\n if (!formApi)\n throw new Error(`You are trying to use the form API outside of a form!`)\n\n return formApi\n}\n"],"names":["createContext","useContext"],"mappings":";;;AAUa,MAAA,cAAcA,QAAAA,cAA+B,MAAS;AAE5D,SAAS,iBAAiB;AACzB,QAAA,UAA2BC,mBAAW,WAAW;AAEvD,MAAI,CAAC;AACG,UAAA,IAAI,MAAM,uDAAuD;AAElE,SAAA;AACT;;;"}
@@ -1,90 +1,9 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const formCore = require("@tanstack/form-core");
4
- const web = require("solid-js/web");
5
- const solidJs = require("solid-js");
6
- const solidStore = require("@tanstack/solid-store");
7
- const formContext = solidJs.createContext(void 0);
8
- function useFormContext() {
9
- const formApi = solidJs.useContext(formContext);
10
- if (!formApi)
11
- throw new Error(`You are trying to use the form API outside of a form!`);
12
- return formApi;
13
- }
14
- function makeFieldReactive(fieldApi) {
15
- const [flag, setFlag] = solidJs.createSignal(false);
16
- const fieldApiMemo = solidJs.createMemo(() => [flag(), fieldApi]);
17
- const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f));
18
- solidJs.onCleanup(unsubscribeStore);
19
- return () => fieldApiMemo()[1];
20
- }
21
- function createField(opts) {
22
- const {
23
- formApi,
24
- parentFieldName
25
- } = useFormContext();
26
- const options = opts();
27
- const name = (typeof options.index === "number" ? [parentFieldName, options.index, options.name] : [parentFieldName, options.name]).filter((d) => d !== void 0).join(".");
28
- const fieldApi = new formCore.FieldApi({
29
- ...options,
30
- form: formApi,
31
- name
32
- });
33
- fieldApi.Field = Field;
34
- solidJs.createComputed(() => fieldApi.update({
35
- ...opts(),
36
- form: formApi
37
- }));
38
- solidJs.onMount(() => solidJs.onCleanup(fieldApi.mount()));
39
- return makeFieldReactive(fieldApi);
40
- }
41
- function Field(props) {
42
- const fieldApi = createField(() => {
43
- const {
44
- children,
45
- ...fieldOptions
46
- } = props;
47
- return fieldOptions;
48
- });
49
- return web.createComponent(formContext.Provider, {
50
- get value() {
51
- return {
52
- formApi: fieldApi().form,
53
- parentFieldName: String(fieldApi().name)
54
- };
55
- },
56
- get children() {
57
- return solidJs.createComponent(() => props.children(fieldApi), {});
58
- }
59
- });
60
- }
61
- function createForm(opts) {
62
- const options = opts == null ? void 0 : opts();
63
- const formApi = new formCore.FormApi(options);
64
- formApi.Provider = function Provider(props) {
65
- solidJs.onMount(formApi.mount);
66
- return web.createComponent(formContext.Provider, web.mergeProps(props, {
67
- value: {
68
- formApi
69
- }
70
- }));
71
- };
72
- formApi.Field = Field;
73
- formApi.createField = createField;
74
- formApi.useStore = (selector) => solidStore.useStore(formApi.store, selector);
75
- formApi.Subscribe = (props) => formCore.functionalUpdate(props.children, solidStore.useStore(formApi.store, props.selector));
76
- solidJs.createComputed(() => formApi.update(opts == null ? void 0 : opts()));
77
- return formApi;
78
- }
79
- function createFormFactory(defaultOpts) {
80
- return {
81
- createForm: (opts) => createForm(
82
- () => solidJs.mergeProps((defaultOpts == null ? void 0 : defaultOpts()) ?? {}, (opts == null ? void 0 : opts()) ?? {})
83
- ),
84
- createField,
85
- Field
86
- };
87
- }
4
+ const createForm = require("./createForm.cjs");
5
+ const createField = require("./createField.cjs");
6
+ const createFormFactory = require("./createFormFactory.cjs");
88
7
  Object.defineProperty(exports, "FieldApi", {
89
8
  enumerable: true,
90
9
  get: () => formCore.FieldApi
@@ -97,8 +16,8 @@ Object.defineProperty(exports, "functionalUpdate", {
97
16
  enumerable: true,
98
17
  get: () => formCore.functionalUpdate
99
18
  });
100
- exports.Field = Field;
101
- exports.createField = createField;
102
- exports.createForm = createForm;
103
- exports.createFormFactory = createFormFactory;
19
+ exports.createForm = createForm.createForm;
20
+ exports.Field = createField.Field;
21
+ exports.createField = createField.createField;
22
+ exports.createFormFactory = createFormFactory.createFormFactory;
104
23
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/formContext.ts","../../src/createField.tsx","../../src/createForm.tsx","../../src/createFormFactory.ts"],"sourcesContent":["import { createContext, useContext } from 'solid-js'\nimport type { FormApi, Validator } from '@tanstack/form-core'\n\ntype FormContextType =\n | undefined\n | {\n formApi: FormApi<any, Validator<any, unknown> | undefined>\n parentFieldName?: string\n }\n\nexport const formContext = createContext<FormContextType>(undefined)\n\nexport function useFormContext() {\n const formApi: FormContextType = useContext(formContext)\n\n if (!formApi)\n throw new Error(`You are trying to use the form API outside of a form!`)\n\n return formApi\n}\n","import { FieldApi, type Validator } 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 { DeepKeys, DeepValue, Narrow } 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","import type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { createComputed, onMount, type JSXElement } from 'solid-js'\nimport { useStore } from '@tanstack/solid-store'\nimport {\n Field,\n createField,\n type CreateField,\n type FieldComponent,\n} from './createField'\nimport { formContext } from './formContext'\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","import type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\n\nimport {\n type CreateField,\n type FieldComponent,\n Field,\n createField,\n} from './createField'\nimport { createForm } from './createForm'\nimport { mergeProps } from 'solid-js'\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":["createContext","useContext","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","createForm","FormApi","_$mergeProps","useStore","selector","Subscribe","functionalUpdate","mergeProps"],"mappings":";;;;;;AAUa,MAAA,cAAcA,QAAAA,cAA+B,MAAS;AAE5D,SAAS,iBAAiB;AACzB,QAAA,UAA2BC,mBAAW,WAAW;AAEvD,MAAI,CAAC;AACG,UAAA,IAAI,MAAM,uDAAuD;AAElE,SAAA;AACT;ACqCA,SAASC,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,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,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,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,QAAAA,gBAAgB,MAAMR,MAAMC,SAAS/B,QAAQ,GAAG,CAAA,CAAE;AAAA,IAAC;AAAA,EAAA,CAAA;AAG1D;ACxLO,SAASuC,WAMd3B,MACsC;AACtC,QAAMI,UAAUJ;AAChB,QAAMC,UAAU,IAAI2B,iBAAqCxB,OAAO;AAEhEH,UAAQsB,WAAW,SAASA,SAASL,OAAO;AAC1CF,oBAAQf,QAAQgB,KAAK;AACrB,WAAAI,IAAA,gBACGC,YAAYC,UAAQM,IAAAA,WAAKX,OAAK;AAAA,MAAEM,OAAO;AAAA,QAAEvB;AAAAA,MAA0B;AAAA,IAAC,CAAA,CAAA;AAAA;AAGzEA,UAAQY,QAAQA;AAChBZ,UAAQF,cAAcA;AACtBE,UAAQ6B,WAAYC,cAAaD,WAAAA,SAAS7B,QAAQN,OAAOoC,QAAQ;AACjE9B,UAAQ+B,YAAad,WACnBe,SAAAA,iBAAiBf,MAAMC,UAAUW,WAAQ,SAAC7B,QAAQN,OAAOuB,MAAMa,QAAQ,CAAC;AAM1EjB,UAAAA,eAAe,MAAMb,QAAQc,OAAOf,8BAAQ,CAAC;AAE7C,SAAOC;AACT;ACtCO,SAAS,kBAId,aACwC;AACjC,SAAA;AAAA,IACL,YAAY,CAAC,SACX;AAAA,MAAsC,MACpCiC,QAAAA,YAAW,iDAAmB,CAAI,IAAA,mCAAY,CAAA,CAAE;AAAA,IAClD;AAAA,IACF;AAAA,IACA;AAAA,EAAA;AAEJ;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,56 @@
1
+ import { createComponent } from "solid-js/web";
2
+ import { FieldApi } from "@tanstack/form-core";
3
+ import { createComputed, onMount, onCleanup, createComponent as createComponent$1, createSignal, createMemo } from "solid-js";
4
+ import { useFormContext, formContext } from "./formContext.js";
5
+ function makeFieldReactive(fieldApi) {
6
+ const [flag, setFlag] = createSignal(false);
7
+ const fieldApiMemo = createMemo(() => [flag(), fieldApi]);
8
+ const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f));
9
+ onCleanup(unsubscribeStore);
10
+ return () => fieldApiMemo()[1];
11
+ }
12
+ function createField(opts) {
13
+ const {
14
+ formApi,
15
+ parentFieldName
16
+ } = useFormContext();
17
+ const options = opts();
18
+ const name = (typeof options.index === "number" ? [parentFieldName, options.index, options.name] : [parentFieldName, options.name]).filter((d) => d !== void 0).join(".");
19
+ const fieldApi = new FieldApi({
20
+ ...options,
21
+ form: formApi,
22
+ name
23
+ });
24
+ fieldApi.Field = Field;
25
+ createComputed(() => fieldApi.update({
26
+ ...opts(),
27
+ form: formApi
28
+ }));
29
+ onMount(() => onCleanup(fieldApi.mount()));
30
+ return makeFieldReactive(fieldApi);
31
+ }
32
+ function Field(props) {
33
+ const fieldApi = createField(() => {
34
+ const {
35
+ children,
36
+ ...fieldOptions
37
+ } = props;
38
+ return fieldOptions;
39
+ });
40
+ return createComponent(formContext.Provider, {
41
+ get value() {
42
+ return {
43
+ formApi: fieldApi().form,
44
+ parentFieldName: String(fieldApi().name)
45
+ };
46
+ },
47
+ get children() {
48
+ return createComponent$1(() => props.children(fieldApi), {});
49
+ }
50
+ });
51
+ }
52
+ export {
53
+ Field,
54
+ createField
55
+ };
56
+ //# sourceMappingURL=createField.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createField.js","sources":["../../src/createField.tsx"],"sourcesContent":["import { FieldApi, type Validator } 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 { DeepKeys, DeepValue, Narrow } 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":";;;;AAwDA,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;"}
@@ -0,0 +1,28 @@
1
+ import { createComponent, mergeProps } from "solid-js/web";
2
+ import { FormApi, functionalUpdate } from "@tanstack/form-core";
3
+ import { onMount, createComputed } from "solid-js";
4
+ import { useStore } from "@tanstack/solid-store";
5
+ import { Field, createField } from "./createField.js";
6
+ import { formContext } from "./formContext.js";
7
+ function createForm(opts) {
8
+ const options = opts == null ? void 0 : opts();
9
+ const formApi = new FormApi(options);
10
+ formApi.Provider = function Provider(props) {
11
+ onMount(formApi.mount);
12
+ return createComponent(formContext.Provider, mergeProps(props, {
13
+ value: {
14
+ formApi
15
+ }
16
+ }));
17
+ };
18
+ formApi.Field = Field;
19
+ formApi.createField = createField;
20
+ formApi.useStore = (selector) => useStore(formApi.store, selector);
21
+ formApi.Subscribe = (props) => functionalUpdate(props.children, useStore(formApi.store, props.selector));
22
+ createComputed(() => formApi.update(opts == null ? void 0 : opts()));
23
+ return formApi;
24
+ }
25
+ export {
26
+ createForm
27
+ };
28
+ //# sourceMappingURL=createForm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createForm.js","sources":["../../src/createForm.tsx"],"sourcesContent":["import type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { createComputed, onMount, type JSXElement } from 'solid-js'\nimport { useStore } from '@tanstack/solid-store'\nimport {\n Field,\n createField,\n type CreateField,\n type FieldComponent,\n} from './createField'\nimport { formContext } from './formContext'\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":";;;;;;AA8BO,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;"}
@@ -0,0 +1,16 @@
1
+ import { createField, Field } from "./createField.js";
2
+ import { createForm } from "./createForm.js";
3
+ import { mergeProps } from "solid-js";
4
+ function createFormFactory(defaultOpts) {
5
+ return {
6
+ createForm: (opts) => createForm(
7
+ () => mergeProps((defaultOpts == null ? void 0 : defaultOpts()) ?? {}, (opts == null ? void 0 : opts()) ?? {})
8
+ ),
9
+ createField,
10
+ Field
11
+ };
12
+ }
13
+ export {
14
+ createFormFactory
15
+ };
16
+ //# sourceMappingURL=createFormFactory.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createFormFactory.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\n\nimport {\n type CreateField,\n type FieldComponent,\n Field,\n createField,\n} from './createField'\nimport { createForm } from './createForm'\nimport { mergeProps } from 'solid-js'\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":";;;AAsBO,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;"}
@@ -0,0 +1,13 @@
1
+ import { createContext, useContext } from "solid-js";
2
+ const formContext = createContext(void 0);
3
+ function useFormContext() {
4
+ const formApi = useContext(formContext);
5
+ if (!formApi)
6
+ throw new Error(`You are trying to use the form API outside of a form!`);
7
+ return formApi;
8
+ }
9
+ export {
10
+ formContext,
11
+ useFormContext
12
+ };
13
+ //# sourceMappingURL=formContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"formContext.js","sources":["../../src/formContext.ts"],"sourcesContent":["import { createContext, useContext } from 'solid-js'\nimport type { FormApi, Validator } from '@tanstack/form-core'\n\ntype FormContextType =\n | undefined\n | {\n formApi: FormApi<any, Validator<any, unknown> | undefined>\n parentFieldName?: string\n }\n\nexport const formContext = createContext<FormContextType>(undefined)\n\nexport function useFormContext() {\n const formApi: FormContextType = useContext(formContext)\n\n if (!formApi)\n throw new Error(`You are trying to use the form API outside of a form!`)\n\n return formApi\n}\n"],"names":[],"mappings":";AAUa,MAAA,cAAc,cAA+B,MAAS;AAE5D,SAAS,iBAAiB;AACzB,QAAA,UAA2B,WAAW,WAAW;AAEvD,MAAI,CAAC;AACG,UAAA,IAAI,MAAM,uDAAuD;AAElE,SAAA;AACT;"}
@@ -0,0 +1,14 @@
1
+ import { FieldApi, FormApi, functionalUpdate } from "@tanstack/form-core";
2
+ import { createForm } from "./createForm.js";
3
+ import { Field, createField } from "./createField.js";
4
+ import { createFormFactory } from "./createFormFactory.js";
5
+ export {
6
+ Field,
7
+ FieldApi,
8
+ FormApi,
9
+ createField,
10
+ createForm,
11
+ createFormFactory,
12
+ functionalUpdate
13
+ };
14
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/solid-form",
3
- "version": "0.13.0",
3
+ "version": "0.13.3",
4
4
  "description": "Powerful, type-safe forms for Solid.",
5
5
  "author": "tannerlinsley",
6
6
  "license": "MIT",
@@ -16,14 +16,14 @@
16
16
  "src"
17
17
  ],
18
18
  "type": "module",
19
- "types": "dist/mjs/index.d.mts",
19
+ "types": "dist/esm/index.d.ts",
20
20
  "main": "dist/cjs/index.cjs",
21
- "module": "dist/mjs/index.mjs",
21
+ "module": "dist/esm/index.js",
22
22
  "exports": {
23
23
  ".": {
24
24
  "import": {
25
- "types": "./dist/mjs/index.d.mts",
26
- "default": "./dist/mjs/index.mjs"
25
+ "types": "./dist/esm/index.d.ts",
26
+ "default": "./dist/esm/index.js"
27
27
  },
28
28
  "require": {
29
29
  "types": "./dist/cjs/index.d.cts",
@@ -38,7 +38,7 @@
38
38
  },
39
39
  "dependencies": {
40
40
  "@tanstack/solid-store": "^0.2.1",
41
- "@tanstack/form-core": "0.13.0"
41
+ "@tanstack/form-core": "0.13.3"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "solid-js": "^1.6.0"
@@ -46,12 +46,12 @@
46
46
  "scripts": {
47
47
  "clean": "rimraf ./dist && rimraf ./coverage",
48
48
  "test:eslint": "eslint --ext .ts,.tsx ./src",
49
- "test:types:versions49": "../../node_modules/typescript49/bin/tsc --noEmit",
50
- "test:types:versions50": "../../node_modules/typescript50/bin/tsc --noEmit",
51
- "test:types:versions51": "../../node_modules/typescript51/bin/tsc --noEmit",
52
- "test:types:versions52": "tsc --noEmit",
49
+ "test:types:versions49": "node ../../node_modules/typescript49/lib/tsc.js --project tsconfig.legacy.json",
50
+ "test:types:versions50": "node ../../node_modules/typescript50/lib/tsc.js",
51
+ "test:types:versions51": "node ../../node_modules/typescript51/lib/tsc.js",
52
+ "test:types:versions52": "tsc",
53
53
  "test:types": "pnpm run \"/^test:types:versions.*/\"",
54
- "test:lib": "vitest run --coverage",
54
+ "test:lib": "vitest",
55
55
  "test:lib:dev": "pnpm run test:lib --watch",
56
56
  "test:build": "publint --strict",
57
57
  "build": "vite build"
package/dist/cjs/index.js DELETED
@@ -1,104 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const formCore = require("@tanstack/form-core");
4
- const web = require("solid-js/web");
5
- const solidJs = require("solid-js");
6
- const solidStore = require("@tanstack/solid-store");
7
- const formContext = solidJs.createContext(void 0);
8
- function useFormContext() {
9
- const formApi = solidJs.useContext(formContext);
10
- if (!formApi)
11
- throw new Error(`You are trying to use the form API outside of a form!`);
12
- return formApi;
13
- }
14
- function makeFieldReactive(fieldApi) {
15
- const [flag, setFlag] = solidJs.createSignal(false);
16
- const fieldApiMemo = solidJs.createMemo(() => [flag(), fieldApi]);
17
- const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f));
18
- solidJs.onCleanup(unsubscribeStore);
19
- return () => fieldApiMemo()[1];
20
- }
21
- function createField(opts) {
22
- const {
23
- formApi,
24
- parentFieldName
25
- } = useFormContext();
26
- const options = opts();
27
- const name = (typeof options.index === "number" ? [parentFieldName, options.index, options.name] : [parentFieldName, options.name]).filter((d) => d !== void 0).join(".");
28
- const fieldApi = new formCore.FieldApi({
29
- ...options,
30
- form: formApi,
31
- name
32
- });
33
- fieldApi.Field = Field;
34
- solidJs.createComputed(() => fieldApi.update({
35
- ...opts(),
36
- form: formApi
37
- }));
38
- solidJs.onMount(() => solidJs.onCleanup(fieldApi.mount()));
39
- return makeFieldReactive(fieldApi);
40
- }
41
- function Field(props) {
42
- const fieldApi = createField(() => {
43
- const {
44
- children,
45
- ...fieldOptions
46
- } = props;
47
- return fieldOptions;
48
- });
49
- return web.createComponent(formContext.Provider, {
50
- get value() {
51
- return {
52
- formApi: fieldApi().form,
53
- parentFieldName: String(fieldApi().name)
54
- };
55
- },
56
- get children() {
57
- return solidJs.createComponent(() => props.children(fieldApi), {});
58
- }
59
- });
60
- }
61
- function createForm(opts) {
62
- const options = opts == null ? void 0 : opts();
63
- const formApi = new formCore.FormApi(options);
64
- formApi.Provider = function Provider(props) {
65
- solidJs.onMount(formApi.mount);
66
- return web.createComponent(formContext.Provider, web.mergeProps(props, {
67
- value: {
68
- formApi
69
- }
70
- }));
71
- };
72
- formApi.Field = Field;
73
- formApi.createField = createField;
74
- formApi.useStore = (selector) => solidStore.useStore(formApi.store, selector);
75
- formApi.Subscribe = (props) => formCore.functionalUpdate(props.children, solidStore.useStore(formApi.store, props.selector));
76
- solidJs.createComputed(() => formApi.update(opts == null ? void 0 : opts()));
77
- return formApi;
78
- }
79
- function createFormFactory(defaultOpts) {
80
- return {
81
- createForm: (opts) => createForm(
82
- () => solidJs.mergeProps((defaultOpts == null ? void 0 : defaultOpts()) ?? {}, (opts == null ? void 0 : opts()) ?? {})
83
- ),
84
- createField,
85
- Field
86
- };
87
- }
88
- Object.defineProperty(exports, "FieldApi", {
89
- enumerable: true,
90
- get: () => formCore.FieldApi
91
- });
92
- Object.defineProperty(exports, "FormApi", {
93
- enumerable: true,
94
- get: () => formCore.FormApi
95
- });
96
- Object.defineProperty(exports, "functionalUpdate", {
97
- enumerable: true,
98
- get: () => formCore.functionalUpdate
99
- });
100
- exports.Field = Field;
101
- exports.createField = createField;
102
- exports.createForm = createForm;
103
- exports.createFormFactory = createFormFactory;
104
- //# sourceMappingURL=index.cjs.map
@@ -1,2 +0,0 @@
1
- /// <reference lib="dom" />
2
- export {};
@@ -1 +0,0 @@
1
- /// <reference lib="dom" />
@@ -1 +0,0 @@
1
- /// <reference lib="dom" />
@@ -1 +0,0 @@
1
- /// <reference lib="dom" />
@@ -1 +0,0 @@
1
- export declare function sleep(timeout: number): Promise<void>;
@@ -1,7 +0,0 @@
1
- export type { DeepKeys, DeepValue, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, } from '@tanstack/form-core';
2
- export { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core';
3
- export { createForm } from './createForm';
4
- export type { CreateField, FieldComponent } from './createField';
5
- export { createField, Field } from './createField';
6
- export type { FormFactory } from './createFormFactory';
7
- export { createFormFactory } from './createFormFactory';
@@ -1,7 +0,0 @@
1
- export type { DeepKeys, DeepValue, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, } from '@tanstack/form-core';
2
- export { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core';
3
- export { createForm } from './createForm';
4
- export type { CreateField, FieldComponent } from './createField';
5
- export { createField, Field } from './createField';
6
- export type { FormFactory } from './createFormFactory';
7
- export { createFormFactory } from './createFormFactory';
package/dist/mjs/index.js DELETED
@@ -1,96 +0,0 @@
1
- import { FieldApi, FormApi, functionalUpdate } from "@tanstack/form-core";
2
- import { FieldApi as FieldApi2, FormApi as FormApi2, functionalUpdate as functionalUpdate2 } from "@tanstack/form-core";
3
- import { createComponent, mergeProps } from "solid-js/web";
4
- import { createContext, useContext, createComputed, onMount, onCleanup, createComponent as createComponent$1, createSignal, createMemo, mergeProps as mergeProps$1 } from "solid-js";
5
- import { useStore } from "@tanstack/solid-store";
6
- const formContext = createContext(void 0);
7
- function useFormContext() {
8
- const formApi = useContext(formContext);
9
- if (!formApi)
10
- throw new Error(`You are trying to use the form API outside of a form!`);
11
- return formApi;
12
- }
13
- function makeFieldReactive(fieldApi) {
14
- const [flag, setFlag] = createSignal(false);
15
- const fieldApiMemo = createMemo(() => [flag(), fieldApi]);
16
- const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f));
17
- onCleanup(unsubscribeStore);
18
- return () => fieldApiMemo()[1];
19
- }
20
- function createField(opts) {
21
- const {
22
- formApi,
23
- parentFieldName
24
- } = useFormContext();
25
- const options = opts();
26
- const name = (typeof options.index === "number" ? [parentFieldName, options.index, options.name] : [parentFieldName, options.name]).filter((d) => d !== void 0).join(".");
27
- const fieldApi = new FieldApi({
28
- ...options,
29
- form: formApi,
30
- name
31
- });
32
- fieldApi.Field = Field;
33
- createComputed(() => fieldApi.update({
34
- ...opts(),
35
- form: formApi
36
- }));
37
- onMount(() => onCleanup(fieldApi.mount()));
38
- return makeFieldReactive(fieldApi);
39
- }
40
- function Field(props) {
41
- const fieldApi = createField(() => {
42
- const {
43
- children,
44
- ...fieldOptions
45
- } = props;
46
- return fieldOptions;
47
- });
48
- return createComponent(formContext.Provider, {
49
- get value() {
50
- return {
51
- formApi: fieldApi().form,
52
- parentFieldName: String(fieldApi().name)
53
- };
54
- },
55
- get children() {
56
- return createComponent$1(() => props.children(fieldApi), {});
57
- }
58
- });
59
- }
60
- function createForm(opts) {
61
- const options = opts == null ? void 0 : opts();
62
- const formApi = new FormApi(options);
63
- formApi.Provider = function Provider(props) {
64
- onMount(formApi.mount);
65
- return createComponent(formContext.Provider, mergeProps(props, {
66
- value: {
67
- formApi
68
- }
69
- }));
70
- };
71
- formApi.Field = Field;
72
- formApi.createField = createField;
73
- formApi.useStore = (selector) => useStore(formApi.store, selector);
74
- formApi.Subscribe = (props) => functionalUpdate(props.children, useStore(formApi.store, props.selector));
75
- createComputed(() => formApi.update(opts == null ? void 0 : opts()));
76
- return formApi;
77
- }
78
- function createFormFactory(defaultOpts) {
79
- return {
80
- createForm: (opts) => createForm(
81
- () => mergeProps$1((defaultOpts == null ? void 0 : defaultOpts()) ?? {}, (opts == null ? void 0 : opts()) ?? {})
82
- ),
83
- createField,
84
- Field
85
- };
86
- }
87
- export {
88
- Field,
89
- FieldApi2 as FieldApi,
90
- FormApi2 as FormApi,
91
- createField,
92
- createForm,
93
- createFormFactory,
94
- functionalUpdate2 as functionalUpdate
95
- };
96
- //# sourceMappingURL=index.mjs.map
@@ -1,96 +0,0 @@
1
- import { FieldApi, FormApi, functionalUpdate } from "@tanstack/form-core";
2
- import { FieldApi as FieldApi2, FormApi as FormApi2, functionalUpdate as functionalUpdate2 } from "@tanstack/form-core";
3
- import { createComponent, mergeProps } from "solid-js/web";
4
- import { createContext, useContext, createComputed, onMount, onCleanup, createComponent as createComponent$1, createSignal, createMemo, mergeProps as mergeProps$1 } from "solid-js";
5
- import { useStore } from "@tanstack/solid-store";
6
- const formContext = createContext(void 0);
7
- function useFormContext() {
8
- const formApi = useContext(formContext);
9
- if (!formApi)
10
- throw new Error(`You are trying to use the form API outside of a form!`);
11
- return formApi;
12
- }
13
- function makeFieldReactive(fieldApi) {
14
- const [flag, setFlag] = createSignal(false);
15
- const fieldApiMemo = createMemo(() => [flag(), fieldApi]);
16
- const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f));
17
- onCleanup(unsubscribeStore);
18
- return () => fieldApiMemo()[1];
19
- }
20
- function createField(opts) {
21
- const {
22
- formApi,
23
- parentFieldName
24
- } = useFormContext();
25
- const options = opts();
26
- const name = (typeof options.index === "number" ? [parentFieldName, options.index, options.name] : [parentFieldName, options.name]).filter((d) => d !== void 0).join(".");
27
- const fieldApi = new FieldApi({
28
- ...options,
29
- form: formApi,
30
- name
31
- });
32
- fieldApi.Field = Field;
33
- createComputed(() => fieldApi.update({
34
- ...opts(),
35
- form: formApi
36
- }));
37
- onMount(() => onCleanup(fieldApi.mount()));
38
- return makeFieldReactive(fieldApi);
39
- }
40
- function Field(props) {
41
- const fieldApi = createField(() => {
42
- const {
43
- children,
44
- ...fieldOptions
45
- } = props;
46
- return fieldOptions;
47
- });
48
- return createComponent(formContext.Provider, {
49
- get value() {
50
- return {
51
- formApi: fieldApi().form,
52
- parentFieldName: String(fieldApi().name)
53
- };
54
- },
55
- get children() {
56
- return createComponent$1(() => props.children(fieldApi), {});
57
- }
58
- });
59
- }
60
- function createForm(opts) {
61
- const options = opts == null ? void 0 : opts();
62
- const formApi = new FormApi(options);
63
- formApi.Provider = function Provider(props) {
64
- onMount(formApi.mount);
65
- return createComponent(formContext.Provider, mergeProps(props, {
66
- value: {
67
- formApi
68
- }
69
- }));
70
- };
71
- formApi.Field = Field;
72
- formApi.createField = createField;
73
- formApi.useStore = (selector) => useStore(formApi.store, selector);
74
- formApi.Subscribe = (props) => functionalUpdate(props.children, useStore(formApi.store, props.selector));
75
- createComputed(() => formApi.update(opts == null ? void 0 : opts()));
76
- return formApi;
77
- }
78
- function createFormFactory(defaultOpts) {
79
- return {
80
- createForm: (opts) => createForm(
81
- () => mergeProps$1((defaultOpts == null ? void 0 : defaultOpts()) ?? {}, (opts == null ? void 0 : opts()) ?? {})
82
- ),
83
- createField,
84
- Field
85
- };
86
- }
87
- export {
88
- Field,
89
- FieldApi2 as FieldApi,
90
- FormApi2 as FormApi,
91
- createField,
92
- createForm,
93
- createFormFactory,
94
- functionalUpdate2 as functionalUpdate
95
- };
96
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/formContext.ts","../../src/createField.tsx","../../src/createForm.tsx","../../src/createFormFactory.ts"],"sourcesContent":["import { createContext, useContext } from 'solid-js'\nimport type { FormApi, Validator } from '@tanstack/form-core'\n\ntype FormContextType =\n | undefined\n | {\n formApi: FormApi<any, Validator<any, unknown> | undefined>\n parentFieldName?: string\n }\n\nexport const formContext = createContext<FormContextType>(undefined)\n\nexport function useFormContext() {\n const formApi: FormContextType = useContext(formContext)\n\n if (!formApi)\n throw new Error(`You are trying to use the form API outside of a form!`)\n\n return formApi\n}\n","import { FieldApi, type Validator } 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 { DeepKeys, DeepValue, Narrow } 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","import type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { createComputed, onMount, type JSXElement } from 'solid-js'\nimport { useStore } from '@tanstack/solid-store'\nimport {\n Field,\n createField,\n type CreateField,\n type FieldComponent,\n} from './createField'\nimport { formContext } from './formContext'\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","import type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\n\nimport {\n type CreateField,\n type FieldComponent,\n Field,\n createField,\n} from './createField'\nimport { createForm } from './createForm'\nimport { mergeProps } from 'solid-js'\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":["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","createForm","FormApi","_$mergeProps","useStore","selector","Subscribe","functionalUpdate","mergeProps"],"mappings":";;;;;AAUa,MAAA,cAAc,cAA+B,MAAS;AAE5D,SAAS,iBAAiB;AACzB,QAAA,UAA2B,WAAW,WAAW;AAEvD,MAAI,CAAC;AACG,UAAA,IAAI,MAAM,uDAAuD;AAElE,SAAA;AACT;ACqCA,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;ACxLO,SAASuC,WAMd3B,MACsC;AACtC,QAAMI,UAAUJ;AAChB,QAAMC,UAAU,IAAI2B,QAAqCxB,OAAO;AAEhEH,UAAQsB,WAAW,SAASA,SAASL,OAAO;AAC1CF,YAAQf,QAAQgB,KAAK;AACrB,WAAAI,gBACGC,YAAYC,UAAQM,WAAKX,OAAK;AAAA,MAAEM,OAAO;AAAA,QAAEvB;AAAAA,MAA0B;AAAA,IAAC,CAAA,CAAA;AAAA;AAGzEA,UAAQY,QAAQA;AAChBZ,UAAQF,cAAcA;AACtBE,UAAQ6B,WAAYC,cAAaD,SAAS7B,QAAQN,OAAOoC,QAAQ;AACjE9B,UAAQ+B,YAAad,WACnBe,iBAAiBf,MAAMC,UAAUW,SAAS7B,QAAQN,OAAOuB,MAAMa,QAAQ,CAAC;AAM1EjB,iBAAe,MAAMb,QAAQc,OAAOf,8BAAQ,CAAC;AAE7C,SAAOC;AACT;ACtCO,SAAS,kBAId,aACwC;AACjC,SAAA;AAAA,IACL,YAAY,CAAC,SACX;AAAA,MAAsC,MACpCiC,cAAW,iDAAmB,CAAI,IAAA,mCAAY,CAAA,CAAE;AAAA,IAClD;AAAA,IACF;AAAA,IACA;AAAA,EAAA;AAEJ;"}
@@ -1,2 +0,0 @@
1
- /// <reference lib="dom" />
2
- export {};
@@ -1 +0,0 @@
1
- /// <reference lib="dom" />
@@ -1 +0,0 @@
1
- /// <reference lib="dom" />
@@ -1 +0,0 @@
1
- /// <reference lib="dom" />
@@ -1 +0,0 @@
1
- export declare function sleep(timeout: number): Promise<void>;
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes