@tanstack/solid-form 0.40.4 → 0.41.1

package/dist/cjs/createField.cjs

@@ -15,8 +15,19 @@ function createField(opts) {
   const api = new formCore.FieldApi(options);
   const extendedApi = api;
   extendedApi.Field = Field;
-  solidJs.createComputed(() => api.update(opts()));
-  solidJs.onMount(() => solidJs.onCleanup(api.mount()));
+  let mounted = false;
+  solidJs.onMount(() => {
+    const cleanupFn = api.mount();
+    mounted = true;
+    solidJs.onCleanup(() => {
+      cleanupFn();
+      mounted = false;
+    });
+  });
+  solidJs.createComputed(() => {
+    if (!mounted) return;
+    api.update(opts());
+  });
   return makeFieldReactive(extendedApi);
 }
 function Field(props) {

package/dist/cjs/createField.cjs.map

@@ -1 +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'\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\ninterface SolidFieldApi<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> {\n  Field: FieldComponent<TParentData, TFormValidator>\n}\n\nexport type CreateField<\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  opts: () => { name: Narrow<TName> } & Omit<\n    CreateFieldOptions<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator,\n      TData\n    >,\n    'form'\n  >,\n) => () => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  TData\n> &\n  SolidFieldApi<TParentData, TFormValidator>\n\n// ugly way to trick solid into triggering updates for changes on the fieldApi\nfunction makeFieldReactive<\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  FieldApiT extends FieldApi<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  > = FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> &\n    SolidFieldApi<TParentData, TFormValidator>,\n>(fieldApi: FieldApiT): () => 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  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: () => CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n) {\n  const options = opts()\n\n  const api = new FieldApi(options)\n\n  const extendedApi: typeof api & SolidFieldApi<TParentData, TFormValidator> =\n    api as never\n\n  extendedApi.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(() => api.update(opts()))\n\n  // Instantiates field meta and removes it when unrendered\n  onMount(() => onCleanup(api.mount()))\n\n  return makeFieldReactive(extendedApi 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} & Omit<\n  CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n  'form'\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}: Omit<\n  FieldComponentProps<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n  'form'\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  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  props: {\n    children: (\n      fieldApi: () => FieldApi<\n        TParentData,\n        TName,\n        TFieldValidator,\n        TFormValidator,\n        TData\n      >,\n    ) => JSXElement\n  } & CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n) {\n  const fieldApi = createField<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >(() => {\n    const { children, ...fieldOptions } = props\n    return fieldOptions\n  })\n\n  return <>{createComponent(() => props.children(fieldApi), {})}</>\n}\n"],"names":["makeFieldReactive","fieldApi","flag","setFlag","createSignal","fieldApiMemo","createMemo","unsubscribeStore","store","subscribe","f","onCleanup","createField","opts","options","api","FieldApi","extendedApi","Field","createComputed","update","onMount","mount","props","children","fieldOptions","_$memo","createComponent"],"mappings":";;;;;AA4DA,SAASA,kBAkBPC,UAAsC;AACtC,QAAM,CAACC,MAAMC,OAAO,IAAIC,QAAAA,aAAa,KAAK;AAC1C,QAAMC,eAAeC,QAAAA,WAAW,MAAM,CAACJ,KAAK,GAAGD,QAAQ,CAAU;AAC3DM,QAAAA,mBAAmBN,SAASO,MAAMC,UAAU,MAAMN,QAASO,CAAAA,MAAM,CAACA,CAAC,CAAC;AAC1EC,UAAAA,UAAUJ,gBAAgB;AACnB,SAAA,MAAMF,aAAa,EAAE,CAAC;AAC/B;AAEO,SAASO,YAWdC,MAOA;AACA,QAAMC,UAAUD,KAAK;AAEfE,QAAAA,MAAM,IAAIC,SAAAA,SAASF,OAAO;AAEhC,QAAMG,cACJF;AAEFE,cAAYC,QAAQA;AAQpBC,UAAAA,eAAe,MAAMJ,IAAIK,OAAOP,KAAM,CAAA,CAAC;AAGvCQ,UAAAA,QAAQ,MAAMV,QAAAA,UAAUI,IAAIO,MAAO,CAAA,CAAC;AAEpC,SAAOtB,kBAAkBiB,WAAoB;AAC/C;AA0DO,SAASC,MAWdK,OAiBA;AACMtB,QAAAA,WAAWW,YAMf,MAAM;AACA,UAAA;AAAA,MAAEY;AAAAA,MAAU,GAAGC;AAAAA,IAAAA,IAAiBF;AAC/BE,WAAAA;AAAAA,EAAAA,CACR;AAEDC,SAAAA,IAAAA,KAAA,MAAUC,QAAAA,gBAAgB,MAAMJ,MAAMC,SAASvB,QAAQ,GAAG,CAAA,CAAE,CAAC;AAC/D;;;"}
+{"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'\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\ninterface SolidFieldApi<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> {\n  Field: FieldComponent<TParentData, TFormValidator>\n}\n\nexport type CreateField<\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  opts: () => { name: Narrow<TName> } & Omit<\n    CreateFieldOptions<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator,\n      TData\n    >,\n    'form'\n  >,\n) => () => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  TData\n> &\n  SolidFieldApi<TParentData, TFormValidator>\n\n// ugly way to trick solid into triggering updates for changes on the fieldApi\nfunction makeFieldReactive<\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  FieldApiT extends FieldApi<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  > = FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> &\n    SolidFieldApi<TParentData, TFormValidator>,\n>(fieldApi: FieldApiT): () => 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  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: () => CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n) {\n  const options = opts()\n\n  const api = new FieldApi(options)\n\n  const extendedApi: typeof api & SolidFieldApi<TParentData, TFormValidator> =\n    api as never\n\n  extendedApi.Field = Field as never\n\n  let mounted = false\n  // Instantiates field meta and removes it when unrendered\n  onMount(() => {\n    const cleanupFn = api.mount()\n    mounted = true\n    onCleanup(() => {\n      cleanupFn()\n      mounted = false\n    })\n  })\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(() => {\n    if (!mounted) return\n    api.update(opts())\n  })\n\n  return makeFieldReactive(extendedApi 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} & Omit<\n  CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n  'form'\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}: Omit<\n  FieldComponentProps<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n  'form'\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  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  props: {\n    children: (\n      fieldApi: () => FieldApi<\n        TParentData,\n        TName,\n        TFieldValidator,\n        TFormValidator,\n        TData\n      >,\n    ) => JSXElement\n  } & CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n) {\n  const fieldApi = createField<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >(() => {\n    const { children, ...fieldOptions } = props\n    return fieldOptions\n  })\n\n  return <>{createComponent(() => props.children(fieldApi), {})}</>\n}\n"],"names":["makeFieldReactive","fieldApi","flag","setFlag","createSignal","fieldApiMemo","createMemo","unsubscribeStore","store","subscribe","f","onCleanup","createField","opts","options","api","FieldApi","extendedApi","Field","mounted","onMount","cleanupFn","mount","createComputed","update","props","children","fieldOptions","_$memo","createComponent"],"mappings":";;;;;AA4DA,SAASA,kBAkBPC,UAAsC;AACtC,QAAM,CAACC,MAAMC,OAAO,IAAIC,QAAAA,aAAa,KAAK;AAC1C,QAAMC,eAAeC,QAAAA,WAAW,MAAM,CAACJ,KAAK,GAAGD,QAAQ,CAAU;AAC3DM,QAAAA,mBAAmBN,SAASO,MAAMC,UAAU,MAAMN,QAASO,CAAAA,MAAM,CAACA,CAAC,CAAC;AAC1EC,UAAAA,UAAUJ,gBAAgB;AACnB,SAAA,MAAMF,aAAa,EAAE,CAAC;AAC/B;AAEO,SAASO,YAWdC,MAOA;AACA,QAAMC,UAAUD,KAAK;AAEfE,QAAAA,MAAM,IAAIC,SAAAA,SAASF,OAAO;AAEhC,QAAMG,cACJF;AAEFE,cAAYC,QAAQA;AAEpB,MAAIC,UAAU;AAEdC,UAAAA,QAAQ,MAAM;AACNC,UAAAA,YAAYN,IAAIO,MAAM;AAClB,cAAA;AACVX,YAAAA,UAAU,MAAM;AACJ,gBAAA;AACA,gBAAA;AAAA,IAAA,CACX;AAAA,EAAA,CACF;AAQDY,UAAAA,eAAe,MAAM;AACnB,QAAI,CAACJ,QAAS;AACVK,QAAAA,OAAOX,MAAM;AAAA,EAAA,CAClB;AAED,SAAOb,kBAAkBiB,WAAoB;AAC/C;AA0DO,SAASC,MAWdO,OAiBA;AACMxB,QAAAA,WAAWW,YAMf,MAAM;AACA,UAAA;AAAA,MAAEc;AAAAA,MAAU,GAAGC;AAAAA,IAAAA,IAAiBF;AAC/BE,WAAAA;AAAAA,EAAAA,CACR;AAEDC,SAAAA,IAAAA,KAAA,MAAUC,QAAAA,gBAAgB,MAAMJ,MAAMC,SAASzB,QAAQ,GAAG,CAAA,CAAE,CAAC;AAC/D;;;"}

package/dist/esm/createField.js

@@ -1,6 +1,6 @@
 import { memo } from "solid-js/web";
 import { FieldApi } from "@tanstack/form-core";
-import { createComputed, onMount, onCleanup, createComponent, createSignal, createMemo } from "solid-js";
+import { onMount, onCleanup, createComputed, createComponent, createSignal, createMemo } from "solid-js";
 function makeFieldReactive(fieldApi) {
   const [flag, setFlag] = createSignal(false);
   const fieldApiMemo = createMemo(() => [flag(), fieldApi]);
@@ -13,8 +13,19 @@ function createField(opts) {
   const api = new FieldApi(options);
   const extendedApi = api;
   extendedApi.Field = Field;
-  createComputed(() => api.update(opts()));
-  onMount(() => onCleanup(api.mount()));
+  let mounted = false;
+  onMount(() => {
+    const cleanupFn = api.mount();
+    mounted = true;
+    onCleanup(() => {
+      cleanupFn();
+      mounted = false;
+    });
+  });
+  createComputed(() => {
+    if (!mounted) return;
+    api.update(opts());
+  });
   return makeFieldReactive(extendedApi);
 }
 function Field(props) {

package/dist/esm/createField.js.map

@@ -1 +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'\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\ninterface SolidFieldApi<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> {\n  Field: FieldComponent<TParentData, TFormValidator>\n}\n\nexport type CreateField<\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  opts: () => { name: Narrow<TName> } & Omit<\n    CreateFieldOptions<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator,\n      TData\n    >,\n    'form'\n  >,\n) => () => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  TData\n> &\n  SolidFieldApi<TParentData, TFormValidator>\n\n// ugly way to trick solid into triggering updates for changes on the fieldApi\nfunction makeFieldReactive<\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  FieldApiT extends FieldApi<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  > = FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> &\n    SolidFieldApi<TParentData, TFormValidator>,\n>(fieldApi: FieldApiT): () => 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  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: () => CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n) {\n  const options = opts()\n\n  const api = new FieldApi(options)\n\n  const extendedApi: typeof api & SolidFieldApi<TParentData, TFormValidator> =\n    api as never\n\n  extendedApi.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(() => api.update(opts()))\n\n  // Instantiates field meta and removes it when unrendered\n  onMount(() => onCleanup(api.mount()))\n\n  return makeFieldReactive(extendedApi 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} & Omit<\n  CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n  'form'\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}: Omit<\n  FieldComponentProps<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n  'form'\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  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  props: {\n    children: (\n      fieldApi: () => FieldApi<\n        TParentData,\n        TName,\n        TFieldValidator,\n        TFormValidator,\n        TData\n      >,\n    ) => JSXElement\n  } & CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n) {\n  const fieldApi = createField<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >(() => {\n    const { children, ...fieldOptions } = props\n    return fieldOptions\n  })\n\n  return <>{createComponent(() => props.children(fieldApi), {})}</>\n}\n"],"names":["makeFieldReactive","fieldApi","flag","setFlag","createSignal","fieldApiMemo","createMemo","unsubscribeStore","store","subscribe","f","onCleanup","createField","opts","options","api","FieldApi","extendedApi","Field","createComputed","update","onMount","mount","props","children","fieldOptions","_$memo","createComponent"],"mappings":";;;AA4DA,SAASA,kBAkBPC,UAAsC;AACtC,QAAM,CAACC,MAAMC,OAAO,IAAIC,aAAa,KAAK;AAC1C,QAAMC,eAAeC,WAAW,MAAM,CAACJ,KAAK,GAAGD,QAAQ,CAAU;AAC3DM,QAAAA,mBAAmBN,SAASO,MAAMC,UAAU,MAAMN,QAASO,CAAAA,MAAM,CAACA,CAAC,CAAC;AAC1EC,YAAUJ,gBAAgB;AACnB,SAAA,MAAMF,aAAa,EAAE,CAAC;AAC/B;AAEO,SAASO,YAWdC,MAOA;AACA,QAAMC,UAAUD,KAAK;AAEfE,QAAAA,MAAM,IAAIC,SAASF,OAAO;AAEhC,QAAMG,cACJF;AAEFE,cAAYC,QAAQA;AAQpBC,iBAAe,MAAMJ,IAAIK,OAAOP,KAAM,CAAA,CAAC;AAGvCQ,UAAQ,MAAMV,UAAUI,IAAIO,MAAO,CAAA,CAAC;AAEpC,SAAOtB,kBAAkBiB,WAAoB;AAC/C;AA0DO,SAASC,MAWdK,OAiBA;AACMtB,QAAAA,WAAWW,YAMf,MAAM;AACA,UAAA;AAAA,MAAEY;AAAAA,MAAU,GAAGC;AAAAA,IAAAA,IAAiBF;AAC/BE,WAAAA;AAAAA,EAAAA,CACR;AAEDC,SAAAA,KAAA,MAAUC,gBAAgB,MAAMJ,MAAMC,SAASvB,QAAQ,GAAG,CAAA,CAAE,CAAC;AAC/D;"}
+{"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'\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\ninterface SolidFieldApi<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> {\n  Field: FieldComponent<TParentData, TFormValidator>\n}\n\nexport type CreateField<\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  opts: () => { name: Narrow<TName> } & Omit<\n    CreateFieldOptions<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator,\n      TData\n    >,\n    'form'\n  >,\n) => () => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  TData\n> &\n  SolidFieldApi<TParentData, TFormValidator>\n\n// ugly way to trick solid into triggering updates for changes on the fieldApi\nfunction makeFieldReactive<\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  FieldApiT extends FieldApi<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  > = FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> &\n    SolidFieldApi<TParentData, TFormValidator>,\n>(fieldApi: FieldApiT): () => 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  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  opts: () => CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n) {\n  const options = opts()\n\n  const api = new FieldApi(options)\n\n  const extendedApi: typeof api & SolidFieldApi<TParentData, TFormValidator> =\n    api as never\n\n  extendedApi.Field = Field as never\n\n  let mounted = false\n  // Instantiates field meta and removes it when unrendered\n  onMount(() => {\n    const cleanupFn = api.mount()\n    mounted = true\n    onCleanup(() => {\n      cleanupFn()\n      mounted = false\n    })\n  })\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(() => {\n    if (!mounted) return\n    api.update(opts())\n  })\n\n  return makeFieldReactive(extendedApi 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} & Omit<\n  CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n  'form'\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}: Omit<\n  FieldComponentProps<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n  'form'\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  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n  props: {\n    children: (\n      fieldApi: () => FieldApi<\n        TParentData,\n        TName,\n        TFieldValidator,\n        TFormValidator,\n        TData\n      >,\n    ) => JSXElement\n  } & CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n) {\n  const fieldApi = createField<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >(() => {\n    const { children, ...fieldOptions } = props\n    return fieldOptions\n  })\n\n  return <>{createComponent(() => props.children(fieldApi), {})}</>\n}\n"],"names":["makeFieldReactive","fieldApi","flag","setFlag","createSignal","fieldApiMemo","createMemo","unsubscribeStore","store","subscribe","f","onCleanup","createField","opts","options","api","FieldApi","extendedApi","Field","mounted","onMount","cleanupFn","mount","createComputed","update","props","children","fieldOptions","_$memo","createComponent"],"mappings":";;;AA4DA,SAASA,kBAkBPC,UAAsC;AACtC,QAAM,CAACC,MAAMC,OAAO,IAAIC,aAAa,KAAK;AAC1C,QAAMC,eAAeC,WAAW,MAAM,CAACJ,KAAK,GAAGD,QAAQ,CAAU;AAC3DM,QAAAA,mBAAmBN,SAASO,MAAMC,UAAU,MAAMN,QAASO,CAAAA,MAAM,CAACA,CAAC,CAAC;AAC1EC,YAAUJ,gBAAgB;AACnB,SAAA,MAAMF,aAAa,EAAE,CAAC;AAC/B;AAEO,SAASO,YAWdC,MAOA;AACA,QAAMC,UAAUD,KAAK;AAEfE,QAAAA,MAAM,IAAIC,SAASF,OAAO;AAEhC,QAAMG,cACJF;AAEFE,cAAYC,QAAQA;AAEpB,MAAIC,UAAU;AAEdC,UAAQ,MAAM;AACNC,UAAAA,YAAYN,IAAIO,MAAM;AAClB,cAAA;AACVX,cAAU,MAAM;AACJ,gBAAA;AACA,gBAAA;AAAA,IAAA,CACX;AAAA,EAAA,CACF;AAQDY,iBAAe,MAAM;AACnB,QAAI,CAACJ,QAAS;AACVK,QAAAA,OAAOX,MAAM;AAAA,EAAA,CAClB;AAED,SAAOb,kBAAkBiB,WAAoB;AAC/C;AA0DO,SAASC,MAWdO,OAiBA;AACMxB,QAAAA,WAAWW,YAMf,MAAM;AACA,UAAA;AAAA,MAAEc;AAAAA,MAAU,GAAGC;AAAAA,IAAAA,IAAiBF;AAC/BE,WAAAA;AAAAA,EAAAA,CACR;AAEDC,SAAAA,KAAA,MAAUC,gBAAgB,MAAMJ,MAAMC,SAASzB,QAAQ,GAAG,CAAA,CAAE,CAAC;AAC/D;"}

package/dist/source/createField.jsx

@@ -13,15 +13,27 @@ export function createField(opts) {
     const api = new FieldApi(options);
     const extendedApi = api;
     extendedApi.Field = Field;
+    let mounted = false;
+    // Instantiates field meta and removes it when unrendered
+    onMount(() => {
+        const cleanupFn = api.mount();
+        mounted = true;
+        onCleanup(() => {
+            cleanupFn();
+            mounted = false;
+        });
+    });
     /**
      * fieldApi.update should not have any side effects. Think of it like a `useRef`
      * that we need to keep updated every render with the most up-to-date information.
      *
      * createComputed to make sure this effect runs before render effects
      */
-    createComputed(() => api.update(opts()));
-    // Instantiates field meta and removes it when unrendered
-    onMount(() => onCleanup(api.mount()));
+    createComputed(() => {
+        if (!mounted)
+            return;
+        api.update(opts());
+    });
     return makeFieldReactive(extendedApi);
 }
 export function Field(props) {

package/dist/source/createField.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"createField.jsx","sourceRoot":"","sources":["../../src/createField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EACL,eAAe,EACf,cAAc,EACd,UAAU,EACV,YAAY,EACZ,SAAS,EACT,OAAO,GACR,MAAM,UAAU,CAAA;AAmDjB,8EAA8E;AAC9E,SAAS,iBAAiB,CAkBxB,QAAmB;IACnB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,YAAY,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE,QAAQ,CAAU,CAAC,CAAA;IAClE,MAAM,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3E,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC3B,OAAO,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAA;AAChC,CAAC;AAED,MAAM,UAAU,WAAW,CAWzB,IAMC;IAED,MAAM,OAAO,GAAG,IAAI,EAAE,CAAA;IAEtB,MAAM,GAAG,GAAG,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAA;IAEjC,MAAM,WAAW,GACf,GAAY,CAAA;IAEd,WAAW,CAAC,KAAK,GAAG,KAAc,CAAA;IAElC;;;;;OAKG;IACH,cAAc,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;IAExC,yDAAyD;IACzD,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;IAErC,OAAO,iBAAiB,CAAC,WAAoB,CAAC,CAAA;AAChD,CAAC;AA0DD,MAAM,UAAU,KAAK,CAWnB,KAgBC;IAED,MAAM,QAAQ,GAAG,WAAW,CAM1B,GAAG,EAAE;QACL,MAAM,EAAE,QAAQ,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,CAAA;QAC3C,OAAO,YAAY,CAAA;IACrB,CAAC,CAAC,CAAA;IAEF,OAAO,EAAE,CAAC,eAAe,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAA;AACnE,CAAC"}
+{"version":3,"file":"createField.jsx","sourceRoot":"","sources":["../../src/createField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EACL,eAAe,EACf,cAAc,EACd,UAAU,EACV,YAAY,EACZ,SAAS,EACT,OAAO,GACR,MAAM,UAAU,CAAA;AAmDjB,8EAA8E;AAC9E,SAAS,iBAAiB,CAkBxB,QAAmB;IACnB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,YAAY,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE,QAAQ,CAAU,CAAC,CAAA;IAClE,MAAM,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3E,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC3B,OAAO,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAA;AAChC,CAAC;AAED,MAAM,UAAU,WAAW,CAWzB,IAMC;IAED,MAAM,OAAO,GAAG,IAAI,EAAE,CAAA;IAEtB,MAAM,GAAG,GAAG,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAA;IAEjC,MAAM,WAAW,GACf,GAAY,CAAA;IAEd,WAAW,CAAC,KAAK,GAAG,KAAc,CAAA;IAElC,IAAI,OAAO,GAAG,KAAK,CAAA;IACnB,yDAAyD;IACzD,OAAO,CAAC,GAAG,EAAE;QACX,MAAM,SAAS,GAAG,GAAG,CAAC,KAAK,EAAE,CAAA;QAC7B,OAAO,GAAG,IAAI,CAAA;QACd,SAAS,CAAC,GAAG,EAAE;YACb,SAAS,EAAE,CAAA;YACX,OAAO,GAAG,KAAK,CAAA;QACjB,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF;;;;;OAKG;IACH,cAAc,CAAC,GAAG,EAAE;QAClB,IAAI,CAAC,OAAO;YAAE,OAAM;QACpB,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAA;IACpB,CAAC,CAAC,CAAA;IAEF,OAAO,iBAAiB,CAAC,WAAoB,CAAC,CAAA;AAChD,CAAC;AA0DD,MAAM,UAAU,KAAK,CAWnB,KAgBC;IAED,MAAM,QAAQ,GAAG,WAAW,CAM1B,GAAG,EAAE;QACL,MAAM,EAAE,QAAQ,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,CAAA;QAC3C,OAAO,YAAY,CAAA;IACrB,CAAC,CAAC,CAAA;IAEF,OAAO,EAAE,CAAC,eAAe,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAA;AACnE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-form",
-  "version": "0.40.4",
+  "version": "0.41.1",
   "description": "Powerful, type-safe forms for Solid.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -41,8 +41,8 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/solid-store": "^0.6.0",
-    "@tanstack/form-core": "0.40.4"
+    "@tanstack/solid-store": "^0.7.0",
+    "@tanstack/form-core": "0.41.1"
   },
   "devDependencies": {
     "solid-js": "^1.9.3",

package/src/createField.tsx

@@ -112,16 +112,27 @@ export function createField<
 
   extendedApi.Field = Field as never
 
+  let mounted = false
+  // Instantiates field meta and removes it when unrendered
+  onMount(() => {
+    const cleanupFn = api.mount()
+    mounted = true
+    onCleanup(() => {
+      cleanupFn()
+      mounted = false
+    })
+  })
+
   /**
    * fieldApi.update should not have any side effects. Think of it like a `useRef`
    * that we need to keep updated every render with the most up-to-date information.
    *
    * createComputed to make sure this effect runs before render effects
    */
-  createComputed(() => api.update(opts()))
-
-  // Instantiates field meta and removes it when unrendered
-  onMount(() => onCleanup(api.mount()))
+  createComputed(() => {
+    if (!mounted) return
+    api.update(opts())
+  })
 
   return makeFieldReactive(extendedApi as never)
 }