@jfdevelops/react-multi-step-form 1.0.0-alpha.28 → 1.0.0-alpha.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/field.cjs.map +1 -1
- package/dist/field.d.cts +0 -8
- package/dist/field.d.mts +0 -8
- package/dist/field.mjs.map +1 -1
- package/dist/hooks/use-selector.cjs +4 -1
- package/dist/hooks/use-selector.cjs.map +1 -1
- package/dist/hooks/use-selector.mjs +4 -1
- package/dist/hooks/use-selector.mjs.map +1 -1
- package/package.json +1 -1
package/dist/field.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.cjs","names":["Field: field.component<TResolvedStep, TSteps, TChosenSteps>","selector"],"sources":["../src/field.tsx"],"sourcesContent":["import type {\n AnyResolvedStep,\n Expand,\n fields,\n HelperFnChosenSteps,\n HelperFnCtx,\n Override,\n StepNumbers,\n UpdateFn,\n Updater,\n} from '@jfdevelops/multi-step-form-core';\nimport type { ReactNode } from 'react';\nimport { memo, useSyncExternalStore } from 'react';\nimport type { SelectorFn } from './hooks/use-selector';\nimport { selector } from './selector';\n\nexport namespace field {\n type sharedProps<TField extends string> = {\n /**\n * The name of the field.\n */\n name: TField;\n };\n\n // aliases for types in `fields` namespace\n type getDeep<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n > = fields.getDeep<\n TResolvedStep,\n HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TChosenSteps>\n >;\n type resolveDeepPath<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>\n > = fields.resolveDeepPath<\n TResolvedStep,\n HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TChosenSteps>,\n TField\n >;\n type get<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n > = fields.get<\n TResolvedStep,\n HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TChosenSteps>\n >;\n export type onInputChangeOptions<\n TStrict extends boolean,\n TPartial extends boolean\n > = UpdateFn.ModeOptions<{\n strict: TStrict;\n partial: TPartial;\n }> &\n UpdateFn.DebugOptions;\n\n export type childrenProps<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>,\n TValue extends resolveDeepPath<\n TResolvedStep,\n TSteps,\n TChosenSteps,\n TField\n > = resolveDeepPath<TResolvedStep, TSteps, TChosenSteps, TField>\n > = sharedProps<TField> &\n Override<\n get<TResolvedStep, TSteps, TChosenSteps>[fields.parentOf<TField>],\n 'defaultValue',\n TValue\n > & {\n /**\n * A useful wrapper around `update` to update the specific field.\n * @param value The new value for the field.\n * @param options The options for the update operation.\n */\n onInputChange: <\n strict extends boolean = true,\n partial extends boolean = false\n >(\n value: Updater<\n UpdateFn.resolvedUpdaterReturnType<\n TValue,\n { strict: strict; partial: partial },\n {}\n >\n >,\n options?: onInputChangeOptions<strict, partial>\n ) => void;\n /**\n * Resets the field's value to the original value that was\n * defined in the config.\n */\n reset: (options?: UpdateFn.DebugOptions) => void;\n };\n export type childrenPropsWithSelected<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>,\n TSelected\n > = childrenProps<TResolvedStep, TSteps, TChosenSteps, TField> & {\n selected: {\n /**\n * The result of the `selectorFn`.\n */\n value: TSelected;\n };\n };\n export type
|
|
1
|
+
{"version":3,"file":"field.cjs","names":["Field: field.component<TResolvedStep, TSteps, TChosenSteps>","selector"],"sources":["../src/field.tsx"],"sourcesContent":["import type {\n AnyResolvedStep,\n Expand,\n fields,\n HelperFnChosenSteps,\n HelperFnCtx,\n Override,\n StepNumbers,\n UpdateFn,\n Updater,\n} from '@jfdevelops/multi-step-form-core';\nimport type { ReactNode } from 'react';\nimport { memo, useSyncExternalStore } from 'react';\nimport type { SelectorFn } from './hooks/use-selector';\nimport { selector } from './selector';\n\nexport namespace field {\n type sharedProps<TField extends string> = {\n /**\n * The name of the field.\n */\n name: TField;\n };\n\n // aliases for types in `fields` namespace\n type getDeep<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n > = fields.getDeep<\n TResolvedStep,\n HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TChosenSteps>\n >;\n type resolveDeepPath<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>\n > = fields.resolveDeepPath<\n TResolvedStep,\n HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TChosenSteps>,\n TField\n >;\n type get<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n > = fields.get<\n TResolvedStep,\n HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TChosenSteps>\n >;\n export type onInputChangeOptions<\n TStrict extends boolean,\n TPartial extends boolean\n > = UpdateFn.ModeOptions<{\n strict: TStrict;\n partial: TPartial;\n }> &\n UpdateFn.DebugOptions;\n\n export type childrenProps<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>,\n TValue extends resolveDeepPath<\n TResolvedStep,\n TSteps,\n TChosenSteps,\n TField\n > = resolveDeepPath<TResolvedStep, TSteps, TChosenSteps, TField>\n > = sharedProps<TField> &\n Override<\n get<TResolvedStep, TSteps, TChosenSteps>[fields.parentOf<TField>],\n 'defaultValue',\n TValue\n > & {\n /**\n * A useful wrapper around `update` to update the specific field.\n * @param value The new value for the field.\n * @param options The options for the update operation.\n */\n onInputChange: <\n strict extends boolean = true,\n partial extends boolean = false\n >(\n value: Updater<\n UpdateFn.resolvedUpdaterReturnType<\n TValue,\n { strict: strict; partial: partial },\n {}\n >\n >,\n options?: onInputChangeOptions<strict, partial>\n ) => void;\n /**\n * Resets the field's value to the original value that was\n * defined in the config.\n */\n reset: (options?: UpdateFn.DebugOptions) => void;\n };\n\n export type childrenPropsWithSelected<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>,\n TSelected\n > = childrenProps<TResolvedStep, TSteps, TChosenSteps, TField> & {\n selected: {\n /**\n * The result of the `selectorFn`.\n */\n value: TSelected;\n };\n };\n export type props<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>,\n TSelected\n > = sharedProps<TField> & {\n selectorFn?: SelectorFn<TResolvedStep, TSteps, TChosenSteps, TSelected>;\n children: (\n props: [TSelected] extends [never]\n ? childrenProps<TResolvedStep, TSteps, TChosenSteps, TField>\n : childrenPropsWithSelected<\n TResolvedStep,\n TSteps,\n TChosenSteps,\n TField,\n TSelected\n >\n ) => ReactNode;\n };\n export type component<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n > = <\n field extends fields.getDeep<\n TResolvedStep,\n HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TChosenSteps>\n >,\n selected = never\n >(\n props: props<TResolvedStep, TSteps, TChosenSteps, field, selected>\n ) => ReactNode;\n\n export type createOptions<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n > = {\n propsCreator: <TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>>(\n name: TField\n ) => field.childrenProps<TResolvedStep, TSteps, TChosenSteps, TField>;\n subscribe?: (listener: () => void) => () => void;\n getValue?: <TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>>(\n name: TField\n ) => resolveDeepPath<TResolvedStep, TSteps, TChosenSteps, TField>;\n selectorCtx: Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>;\n };\n\n /**\n * Create a field.\n * @param propsCreator\n * @param subscribe - Optional subscription function for reactivity\n * @param getValue - Optional function to get the current field value reactively\n * @returns\n */\n export function create<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n >(options: createOptions<TResolvedStep, TSteps, TChosenSteps>) {\n const { propsCreator, subscribe, getValue, selectorCtx } = options;\n\n const Field: field.component<TResolvedStep, TSteps, TChosenSteps> = (\n props\n ) => {\n const { name, children, selectorFn } = props;\n\n // Always call the hook, but use no-op functions if subscribe/getValue aren't provided\n const subscribeFn = subscribe || (() => () => { });\n const getValueFn = getValue || (() => undefined);\n\n // Subscribe to changes to trigger rerenders\n const currentValue = useSyncExternalStore(\n subscribeFn,\n () => getValueFn(name),\n () => getValueFn(name)\n );\n\n let createdProps = propsCreator(name);\n\n // If getValue is provided, override defaultValue with the reactive value\n if (getValue) {\n createdProps = {\n ...createdProps,\n defaultValue: currentValue,\n } as typeof createdProps;\n }\n\n if (selectorFn) {\n const Selector = selector.create<TResolvedStep, TSteps, TChosenSteps>(\n () => selectorCtx,\n subscribeFn\n );\n\n return (\n <Selector selector={selectorFn}>\n {(value) =>\n children({\n ...createdProps,\n selected: { value: value as never },\n })\n }\n </Selector>\n );\n }\n\n return children(createdProps as never);\n };\n\n return memo(Field);\n }\n}"],"mappings":";;;;;;;CA4KS,SAAS,OAId,SAA6D;EAC7D,MAAM,EAAE,cAAc,WAAW,UAAU,gBAAgB;EAE3D,MAAMA,SACJ,UACG;GACH,MAAM,EAAE,MAAM,UAAU,eAAe;GAGvC,MAAM,cAAc,0BAA0B;GAC9C,MAAM,aAAa,mBAAmB;GAGtC,MAAM,+CACJ,mBACM,WAAW,KAAK,QAChB,WAAW,KAAK,CACvB;GAED,IAAI,eAAe,aAAa,KAAK;AAGrC,OAAI,SACF,gBAAe;IACb,GAAG;IACH,cAAc;IACf;AAGH,OAAI,WAMF,QACE,2CANeC,0BAAS,aAClB,aACN,YACD;IAGW,UAAU;eAChB,UACA,SAAS;KACP,GAAG;KACH,UAAU,EAAS,OAAgB;KACpC,CAAC;KAEK;AAIf,UAAO,SAAS,aAAsB;;AAGxC,yBAAY,MAAM"}
|
package/dist/field.d.cts
CHANGED
|
@@ -42,14 +42,6 @@ declare namespace field {
|
|
|
42
42
|
value: TSelected;
|
|
43
43
|
};
|
|
44
44
|
};
|
|
45
|
-
export type selectorChildrenProps<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>, TSelected> = childrenProps<TResolvedStep, TSteps, TChosenSteps, TField> & {
|
|
46
|
-
selected: {
|
|
47
|
-
/**
|
|
48
|
-
* The selected value.
|
|
49
|
-
*/
|
|
50
|
-
value: TSelected;
|
|
51
|
-
};
|
|
52
|
-
};
|
|
53
45
|
export type props<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>, TSelected> = sharedProps<TField> & {
|
|
54
46
|
selectorFn?: SelectorFn<TResolvedStep, TSteps, TChosenSteps, TSelected>;
|
|
55
47
|
children: (props: [TSelected] extends [never] ? childrenProps<TResolvedStep, TSteps, TChosenSteps, TField> : childrenPropsWithSelected<TResolvedStep, TSteps, TChosenSteps, TField, TSelected>) => ReactNode;
|
package/dist/field.d.mts
CHANGED
|
@@ -42,14 +42,6 @@ declare namespace field {
|
|
|
42
42
|
value: TSelected;
|
|
43
43
|
};
|
|
44
44
|
};
|
|
45
|
-
export type selectorChildrenProps<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>, TSelected> = childrenProps<TResolvedStep, TSteps, TChosenSteps, TField> & {
|
|
46
|
-
selected: {
|
|
47
|
-
/**
|
|
48
|
-
* The selected value.
|
|
49
|
-
*/
|
|
50
|
-
value: TSelected;
|
|
51
|
-
};
|
|
52
|
-
};
|
|
53
45
|
export type props<TResolvedStep extends AnyResolvedStep, TSteps extends StepNumbers<TResolvedStep>, TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>, TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>, TSelected> = sharedProps<TField> & {
|
|
54
46
|
selectorFn?: SelectorFn<TResolvedStep, TSteps, TChosenSteps, TSelected>;
|
|
55
47
|
children: (props: [TSelected] extends [never] ? childrenProps<TResolvedStep, TSteps, TChosenSteps, TField> : childrenPropsWithSelected<TResolvedStep, TSteps, TChosenSteps, TField, TSelected>) => ReactNode;
|
package/dist/field.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.mjs","names":["Field: field.component<TResolvedStep, TSteps, TChosenSteps>"],"sources":["../src/field.tsx"],"sourcesContent":["import type {\n AnyResolvedStep,\n Expand,\n fields,\n HelperFnChosenSteps,\n HelperFnCtx,\n Override,\n StepNumbers,\n UpdateFn,\n Updater,\n} from '@jfdevelops/multi-step-form-core';\nimport type { ReactNode } from 'react';\nimport { memo, useSyncExternalStore } from 'react';\nimport type { SelectorFn } from './hooks/use-selector';\nimport { selector } from './selector';\n\nexport namespace field {\n type sharedProps<TField extends string> = {\n /**\n * The name of the field.\n */\n name: TField;\n };\n\n // aliases for types in `fields` namespace\n type getDeep<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n > = fields.getDeep<\n TResolvedStep,\n HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TChosenSteps>\n >;\n type resolveDeepPath<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>\n > = fields.resolveDeepPath<\n TResolvedStep,\n HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TChosenSteps>,\n TField\n >;\n type get<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n > = fields.get<\n TResolvedStep,\n HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TChosenSteps>\n >;\n export type onInputChangeOptions<\n TStrict extends boolean,\n TPartial extends boolean\n > = UpdateFn.ModeOptions<{\n strict: TStrict;\n partial: TPartial;\n }> &\n UpdateFn.DebugOptions;\n\n export type childrenProps<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>,\n TValue extends resolveDeepPath<\n TResolvedStep,\n TSteps,\n TChosenSteps,\n TField\n > = resolveDeepPath<TResolvedStep, TSteps, TChosenSteps, TField>\n > = sharedProps<TField> &\n Override<\n get<TResolvedStep, TSteps, TChosenSteps>[fields.parentOf<TField>],\n 'defaultValue',\n TValue\n > & {\n /**\n * A useful wrapper around `update` to update the specific field.\n * @param value The new value for the field.\n * @param options The options for the update operation.\n */\n onInputChange: <\n strict extends boolean = true,\n partial extends boolean = false\n >(\n value: Updater<\n UpdateFn.resolvedUpdaterReturnType<\n TValue,\n { strict: strict; partial: partial },\n {}\n >\n >,\n options?: onInputChangeOptions<strict, partial>\n ) => void;\n /**\n * Resets the field's value to the original value that was\n * defined in the config.\n */\n reset: (options?: UpdateFn.DebugOptions) => void;\n };\n export type childrenPropsWithSelected<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>,\n TSelected\n > = childrenProps<TResolvedStep, TSteps, TChosenSteps, TField> & {\n selected: {\n /**\n * The result of the `selectorFn`.\n */\n value: TSelected;\n };\n };\n export type
|
|
1
|
+
{"version":3,"file":"field.mjs","names":["Field: field.component<TResolvedStep, TSteps, TChosenSteps>"],"sources":["../src/field.tsx"],"sourcesContent":["import type {\n AnyResolvedStep,\n Expand,\n fields,\n HelperFnChosenSteps,\n HelperFnCtx,\n Override,\n StepNumbers,\n UpdateFn,\n Updater,\n} from '@jfdevelops/multi-step-form-core';\nimport type { ReactNode } from 'react';\nimport { memo, useSyncExternalStore } from 'react';\nimport type { SelectorFn } from './hooks/use-selector';\nimport { selector } from './selector';\n\nexport namespace field {\n type sharedProps<TField extends string> = {\n /**\n * The name of the field.\n */\n name: TField;\n };\n\n // aliases for types in `fields` namespace\n type getDeep<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n > = fields.getDeep<\n TResolvedStep,\n HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TChosenSteps>\n >;\n type resolveDeepPath<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>\n > = fields.resolveDeepPath<\n TResolvedStep,\n HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TChosenSteps>,\n TField\n >;\n type get<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n > = fields.get<\n TResolvedStep,\n HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TChosenSteps>\n >;\n export type onInputChangeOptions<\n TStrict extends boolean,\n TPartial extends boolean\n > = UpdateFn.ModeOptions<{\n strict: TStrict;\n partial: TPartial;\n }> &\n UpdateFn.DebugOptions;\n\n export type childrenProps<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>,\n TValue extends resolveDeepPath<\n TResolvedStep,\n TSteps,\n TChosenSteps,\n TField\n > = resolveDeepPath<TResolvedStep, TSteps, TChosenSteps, TField>\n > = sharedProps<TField> &\n Override<\n get<TResolvedStep, TSteps, TChosenSteps>[fields.parentOf<TField>],\n 'defaultValue',\n TValue\n > & {\n /**\n * A useful wrapper around `update` to update the specific field.\n * @param value The new value for the field.\n * @param options The options for the update operation.\n */\n onInputChange: <\n strict extends boolean = true,\n partial extends boolean = false\n >(\n value: Updater<\n UpdateFn.resolvedUpdaterReturnType<\n TValue,\n { strict: strict; partial: partial },\n {}\n >\n >,\n options?: onInputChangeOptions<strict, partial>\n ) => void;\n /**\n * Resets the field's value to the original value that was\n * defined in the config.\n */\n reset: (options?: UpdateFn.DebugOptions) => void;\n };\n\n export type childrenPropsWithSelected<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>,\n TSelected\n > = childrenProps<TResolvedStep, TSteps, TChosenSteps, TField> & {\n selected: {\n /**\n * The result of the `selectorFn`.\n */\n value: TSelected;\n };\n };\n export type props<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>,\n TSelected\n > = sharedProps<TField> & {\n selectorFn?: SelectorFn<TResolvedStep, TSteps, TChosenSteps, TSelected>;\n children: (\n props: [TSelected] extends [never]\n ? childrenProps<TResolvedStep, TSteps, TChosenSteps, TField>\n : childrenPropsWithSelected<\n TResolvedStep,\n TSteps,\n TChosenSteps,\n TField,\n TSelected\n >\n ) => ReactNode;\n };\n export type component<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n > = <\n field extends fields.getDeep<\n TResolvedStep,\n HelperFnChosenSteps.resolve<TResolvedStep, TSteps, TChosenSteps>\n >,\n selected = never\n >(\n props: props<TResolvedStep, TSteps, TChosenSteps, field, selected>\n ) => ReactNode;\n\n export type createOptions<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n > = {\n propsCreator: <TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>>(\n name: TField\n ) => field.childrenProps<TResolvedStep, TSteps, TChosenSteps, TField>;\n subscribe?: (listener: () => void) => () => void;\n getValue?: <TField extends getDeep<TResolvedStep, TSteps, TChosenSteps>>(\n name: TField\n ) => resolveDeepPath<TResolvedStep, TSteps, TChosenSteps, TField>;\n selectorCtx: Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>;\n };\n\n /**\n * Create a field.\n * @param propsCreator\n * @param subscribe - Optional subscription function for reactivity\n * @param getValue - Optional function to get the current field value reactively\n * @returns\n */\n export function create<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n >(options: createOptions<TResolvedStep, TSteps, TChosenSteps>) {\n const { propsCreator, subscribe, getValue, selectorCtx } = options;\n\n const Field: field.component<TResolvedStep, TSteps, TChosenSteps> = (\n props\n ) => {\n const { name, children, selectorFn } = props;\n\n // Always call the hook, but use no-op functions if subscribe/getValue aren't provided\n const subscribeFn = subscribe || (() => () => { });\n const getValueFn = getValue || (() => undefined);\n\n // Subscribe to changes to trigger rerenders\n const currentValue = useSyncExternalStore(\n subscribeFn,\n () => getValueFn(name),\n () => getValueFn(name)\n );\n\n let createdProps = propsCreator(name);\n\n // If getValue is provided, override defaultValue with the reactive value\n if (getValue) {\n createdProps = {\n ...createdProps,\n defaultValue: currentValue,\n } as typeof createdProps;\n }\n\n if (selectorFn) {\n const Selector = selector.create<TResolvedStep, TSteps, TChosenSteps>(\n () => selectorCtx,\n subscribeFn\n );\n\n return (\n <Selector selector={selectorFn}>\n {(value) =>\n children({\n ...createdProps,\n selected: { value: value as never },\n })\n }\n </Selector>\n );\n }\n\n return children(createdProps as never);\n };\n\n return memo(Field);\n }\n}"],"mappings":";;;;;;;CA4KS,SAAS,OAId,SAA6D;EAC7D,MAAM,EAAE,cAAc,WAAW,UAAU,gBAAgB;EAE3D,MAAMA,SACJ,UACG;GACH,MAAM,EAAE,MAAM,UAAU,eAAe;GAGvC,MAAM,cAAc,0BAA0B;GAC9C,MAAM,aAAa,mBAAmB;GAGtC,MAAM,eAAe,qBACnB,mBACM,WAAW,KAAK,QAChB,WAAW,KAAK,CACvB;GAED,IAAI,eAAe,aAAa,KAAK;AAGrC,OAAI,SACF,gBAAe;IACb,GAAG;IACH,cAAc;IACf;AAGH,OAAI,WAMF,QACE,oBANe,SAAS,aAClB,aACN,YACD;IAGW,UAAU;eAChB,UACA,SAAS;KACP,GAAG;KACH,UAAU,EAAS,OAAgB;KACpC,CAAC;KAEK;AAIf,UAAO,SAAS,aAAsB;;AAGxC,SAAO,KAAK,MAAM"}
|
|
@@ -5,8 +5,11 @@ let react = require("react");
|
|
|
5
5
|
function createUseSelector(createCtx, subscribe) {
|
|
6
6
|
return (selector) => {
|
|
7
7
|
const snapshotCacheRef = (0, react.useRef)(null);
|
|
8
|
+
const selectorRef = (0, react.useRef)(selector);
|
|
9
|
+
selectorRef.current = selector;
|
|
8
10
|
const getSnapshot = () => {
|
|
9
|
-
const
|
|
11
|
+
const currentCtx = createCtx();
|
|
12
|
+
const newValue = selectorRef.current(currentCtx);
|
|
10
13
|
if (snapshotCacheRef.current === null) {
|
|
11
14
|
snapshotCacheRef.current = { value: newValue };
|
|
12
15
|
return newValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-selector.cjs","names":["path"],"sources":["../../src/hooks/use-selector.ts"],"sourcesContent":["import type {\n AnyResolvedStep,\n StepNumbers,\n HelperFnChosenSteps,\n Expand,\n HelperFnCtx,\n} from '@jfdevelops/multi-step-form-core';\nimport { path } from '@jfdevelops/multi-step-form-core/_internals';\nimport { useSyncExternalStore, useRef } from 'react';\n\nexport type UseSelector<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n> = ReturnType<typeof createUseSelector<TResolvedStep, TSteps, TChosenSteps>>;\nexport type SelectorFn<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TSelected\n> = (\n ctx: Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>\n) => TSelected;\n\nexport function createUseSelector<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n>(\n createCtx: () => Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>,\n subscribe: (listener: () => void) => () => void\n) {\n return <selected>(\n selector: SelectorFn<TResolvedStep, TSteps, TChosenSteps, selected>\n ) => {\n const snapshotCacheRef = useRef<{ value: selected } | null>(null);\n\n const getSnapshot = () => {\n const currentCtx = createCtx();\n const newValue =
|
|
1
|
+
{"version":3,"file":"use-selector.cjs","names":["path"],"sources":["../../src/hooks/use-selector.ts"],"sourcesContent":["import type {\n AnyResolvedStep,\n StepNumbers,\n HelperFnChosenSteps,\n Expand,\n HelperFnCtx,\n} from '@jfdevelops/multi-step-form-core';\nimport { path } from '@jfdevelops/multi-step-form-core/_internals';\nimport { useSyncExternalStore, useRef } from 'react';\n\nexport type UseSelector<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n> = ReturnType<typeof createUseSelector<TResolvedStep, TSteps, TChosenSteps>>;\nexport type SelectorFn<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TSelected\n> = (\n ctx: Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>\n) => TSelected;\n\nexport function createUseSelector<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n>(\n createCtx: () => Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>,\n subscribe: (listener: () => void) => () => void\n) {\n return <selected>(\n selector: SelectorFn<TResolvedStep, TSteps, TChosenSteps, selected>\n ) => {\n const snapshotCacheRef = useRef<{ value: selected } | null>(null);\n const selectorRef = useRef(selector);\n\n // Update the selector ref on every render to ensure we always use the latest selector\n selectorRef.current = selector;\n\n const getSnapshot = () => {\n const currentCtx = createCtx();\n const newValue = selectorRef.current(currentCtx);\n\n // Cache the result to ensure stable reference\n if (snapshotCacheRef.current === null) {\n snapshotCacheRef.current = { value: newValue };\n return newValue;\n }\n\n // Only update if the value actually changed (deep comparison using path.equalsAtPaths)\n const comparisonResult = path.equalsAtPaths(\n { value: snapshotCacheRef.current.value },\n ['value'],\n newValue\n );\n\n if (!comparisonResult.ok) {\n snapshotCacheRef.current = { value: newValue };\n }\n\n return snapshotCacheRef.current.value;\n };\n\n return useSyncExternalStore(\n subscribe,\n () => getSnapshot(),\n () => getSnapshot()\n );\n };\n}\n"],"mappings":";;;;AAwBA,SAAgB,kBAKd,WACA,WACA;AACA,SACE,aACG;EACH,MAAM,qCAAsD,KAAK;EACjE,MAAM,gCAAqB,SAAS;AAGpC,cAAY,UAAU;EAEtB,MAAM,oBAAoB;GACxB,MAAM,aAAa,WAAW;GAC9B,MAAM,WAAW,YAAY,QAAQ,WAAW;AAGhD,OAAI,iBAAiB,YAAY,MAAM;AACrC,qBAAiB,UAAU,EAAE,OAAO,UAAU;AAC9C,WAAO;;AAUT,OAAI,CANqBA,kDAAK,cAC5B,EAAE,OAAO,iBAAiB,QAAQ,OAAO,EACzC,CAAC,QAAQ,EACT,SACD,CAEqB,GACpB,kBAAiB,UAAU,EAAE,OAAO,UAAU;AAGhD,UAAO,iBAAiB,QAAQ;;AAGlC,yCACE,iBACM,aAAa,QACb,aAAa,CACpB"}
|
|
@@ -5,8 +5,11 @@ import { useRef, useSyncExternalStore } from "react";
|
|
|
5
5
|
function createUseSelector(createCtx, subscribe) {
|
|
6
6
|
return (selector) => {
|
|
7
7
|
const snapshotCacheRef = useRef(null);
|
|
8
|
+
const selectorRef = useRef(selector);
|
|
9
|
+
selectorRef.current = selector;
|
|
8
10
|
const getSnapshot = () => {
|
|
9
|
-
const
|
|
11
|
+
const currentCtx = createCtx();
|
|
12
|
+
const newValue = selectorRef.current(currentCtx);
|
|
10
13
|
if (snapshotCacheRef.current === null) {
|
|
11
14
|
snapshotCacheRef.current = { value: newValue };
|
|
12
15
|
return newValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-selector.mjs","names":[],"sources":["../../src/hooks/use-selector.ts"],"sourcesContent":["import type {\n AnyResolvedStep,\n StepNumbers,\n HelperFnChosenSteps,\n Expand,\n HelperFnCtx,\n} from '@jfdevelops/multi-step-form-core';\nimport { path } from '@jfdevelops/multi-step-form-core/_internals';\nimport { useSyncExternalStore, useRef } from 'react';\n\nexport type UseSelector<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n> = ReturnType<typeof createUseSelector<TResolvedStep, TSteps, TChosenSteps>>;\nexport type SelectorFn<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TSelected\n> = (\n ctx: Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>\n) => TSelected;\n\nexport function createUseSelector<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n>(\n createCtx: () => Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>,\n subscribe: (listener: () => void) => () => void\n) {\n return <selected>(\n selector: SelectorFn<TResolvedStep, TSteps, TChosenSteps, selected>\n ) => {\n const snapshotCacheRef = useRef<{ value: selected } | null>(null);\n\n const getSnapshot = () => {\n const currentCtx = createCtx();\n const newValue =
|
|
1
|
+
{"version":3,"file":"use-selector.mjs","names":[],"sources":["../../src/hooks/use-selector.ts"],"sourcesContent":["import type {\n AnyResolvedStep,\n StepNumbers,\n HelperFnChosenSteps,\n Expand,\n HelperFnCtx,\n} from '@jfdevelops/multi-step-form-core';\nimport { path } from '@jfdevelops/multi-step-form-core/_internals';\nimport { useSyncExternalStore, useRef } from 'react';\n\nexport type UseSelector<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n> = ReturnType<typeof createUseSelector<TResolvedStep, TSteps, TChosenSteps>>;\nexport type SelectorFn<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>,\n TSelected\n> = (\n ctx: Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>\n) => TSelected;\n\nexport function createUseSelector<\n TResolvedStep extends AnyResolvedStep,\n TSteps extends StepNumbers<TResolvedStep>,\n TChosenSteps extends HelperFnChosenSteps<TResolvedStep, TSteps>\n>(\n createCtx: () => Expand<HelperFnCtx<TResolvedStep, TSteps, TChosenSteps>>,\n subscribe: (listener: () => void) => () => void\n) {\n return <selected>(\n selector: SelectorFn<TResolvedStep, TSteps, TChosenSteps, selected>\n ) => {\n const snapshotCacheRef = useRef<{ value: selected } | null>(null);\n const selectorRef = useRef(selector);\n\n // Update the selector ref on every render to ensure we always use the latest selector\n selectorRef.current = selector;\n\n const getSnapshot = () => {\n const currentCtx = createCtx();\n const newValue = selectorRef.current(currentCtx);\n\n // Cache the result to ensure stable reference\n if (snapshotCacheRef.current === null) {\n snapshotCacheRef.current = { value: newValue };\n return newValue;\n }\n\n // Only update if the value actually changed (deep comparison using path.equalsAtPaths)\n const comparisonResult = path.equalsAtPaths(\n { value: snapshotCacheRef.current.value },\n ['value'],\n newValue\n );\n\n if (!comparisonResult.ok) {\n snapshotCacheRef.current = { value: newValue };\n }\n\n return snapshotCacheRef.current.value;\n };\n\n return useSyncExternalStore(\n subscribe,\n () => getSnapshot(),\n () => getSnapshot()\n );\n };\n}\n"],"mappings":";;;;AAwBA,SAAgB,kBAKd,WACA,WACA;AACA,SACE,aACG;EACH,MAAM,mBAAmB,OAAmC,KAAK;EACjE,MAAM,cAAc,OAAO,SAAS;AAGpC,cAAY,UAAU;EAEtB,MAAM,oBAAoB;GACxB,MAAM,aAAa,WAAW;GAC9B,MAAM,WAAW,YAAY,QAAQ,WAAW;AAGhD,OAAI,iBAAiB,YAAY,MAAM;AACrC,qBAAiB,UAAU,EAAE,OAAO,UAAU;AAC9C,WAAO;;AAUT,OAAI,CANqB,KAAK,cAC5B,EAAE,OAAO,iBAAiB,QAAQ,OAAO,EACzC,CAAC,QAAQ,EACT,SACD,CAEqB,GACpB,kBAAiB,UAAU,EAAE,OAAO,UAAU;AAGhD,UAAO,iBAAiB,QAAQ;;AAGlC,SAAO,qBACL,iBACM,aAAa,QACb,aAAa,CACpB"}
|