cross-state 0.16.0 → 0.16.1
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/lib/wildcardMatch.ts","../../../src/react/form/formError.tsx","../../../src/react/form/formField.tsx","../../../src/react/form/form.tsx","../../../src/react/read.ts","../../../src/react/useDecoupledState.ts","../../../src/lib/castArray.ts","../../../src/react/useUrlParamScope.ts"],"sourcesContent":["import { type KeyType } from './path';\nimport { castArrayPath } from './propAccess';\n\nexport function wildcardMatch(s: KeyType[] | string, w: KeyType[] | string): boolean {\n if (typeof s === 'string') {\n s = castArrayPath(s);\n }\n\n if (typeof w === 'string') {\n w = castArrayPath(w);\n }\n\n return s.length === w.length && s.every((s, i) => w[i] === '*' || s === w[i]);\n}\n\nexport function getWildCardMatches(object: any, path: KeyType[] | string): Record<KeyType, any> {\n const matches: Record<KeyType, any> = {};\n const [first, ...rest] = castArrayPath(path);\n\n if (first === undefined) {\n return object;\n }\n\n if (!(object instanceof Object)) {\n return {};\n }\n\n if (first === '*') {\n for (const [key, value] of Object.entries(object)) {\n matches[key] = getWildCardMatches(value, rest);\n }\n } else {\n matches[first] = getWildCardMatches(object[first], rest);\n }\n\n return matches;\n}\n","import { type Form } from './form';\nimport { type PathAsString } from '@lib/path';\n\nexport type FormErrorProps<TDraft, TPath extends PathAsString<TDraft>> = {\n name: TPath;\n};\n\nexport function FormError<TDraft, TPath extends PathAsString<TDraft>>(\n this: Form<TDraft, any>,\n { name }: FormErrorProps<TDraft, TPath>,\n) {\n const { errors, isDirty } = this.useField(name);\n\n return isDirty ? <>{errors.join(', ')}</> : null;\n}\n","import { type PathAsString } from '@index';\nimport { type Value } from '@lib/path';\nimport { useScope } from '@react/scope';\nimport {\n createElement,\n useEffect,\n useMemo,\n useState,\n type ComponentPropsWithoutRef,\n type ComponentType,\n type HTMLProps,\n} from 'react';\nimport { type Form } from './form';\n\ninterface FormFieldComponentProps<T> {\n id: string;\n value: T;\n onChange: (event: { target: { value: T } } | T | undefined, ...args: any[]) => void;\n onFocus: (...args: any[]) => void;\n onBlur: (...args: any[]) => void;\n}\n\ntype NativeInputType = 'input' | 'select' | 'textarea';\n\ntype FieldValue<T extends FormFieldComponent<any>> = ComponentPropsWithoutRef<T & 'input'> extends {\n value: infer U;\n}\n ? U\n : ComponentPropsWithoutRef<T & 'input'> extends {\n value?: infer U;\n }\n ? U | undefined\n : never;\n\ntype FieldChangeValue<T extends FormFieldComponent<any>> = ComponentPropsWithoutRef<\n T & 'input'\n> extends {\n onChange?: (update: infer U) => void;\n}\n ? U extends { target: { value: infer V } }\n ? V\n : U\n : never;\n\nexport type FormFieldComponent<T> =\n | (string | number extends T ? NativeInputType : never)\n | ComponentType<FormFieldComponentProps<T>>;\n\nexport type FormFieldProps<\n TDraft,\n TPath extends PathAsString<TDraft>,\n TComponent extends FormFieldComponent<any>,\n> = {\n name: TPath;\n commitOnBlur?: boolean;\n commitDebounce?: number;\n inputFilter?: (value: FieldChangeValue<TComponent>) => boolean;\n onChange?: ComponentPropsWithoutRef<TComponent>['onChange'];\n onBlur?: ComponentPropsWithoutRef<TComponent>['onBlur'];\n} & (TComponent extends 'input' | ((props: HTMLProps<HTMLInputElement>) => JSX.Element)\n ? { component?: TComponent } | { children?: TComponent }\n : { component: TComponent } | { children: TComponent }) &\n Omit<\n ComponentPropsWithoutRef<TComponent>,\n | 'form'\n | 'name'\n | 'component'\n | 'commitOnBlur'\n | 'commitDebounce'\n | 'value'\n | 'onChange'\n | 'onBlur'\n | 'children'\n > &\n (Value<TDraft, TPath> extends FieldValue<TComponent>\n ? { serialize?: (value: Value<TDraft, TPath>) => FieldValue<TComponent> }\n : { serialize: (value: Value<TDraft, TPath>) => FieldValue<TComponent> }) &\n (FieldChangeValue<TComponent> extends Value<TDraft, TPath>\n ? { deserialize?: (value: FieldChangeValue<TComponent>) => Value<TDraft, TPath> }\n : { deserialize: (value: FieldChangeValue<TComponent>) => Value<TDraft, TPath> });\n\nexport function FormField<\n TDraft,\n TPath extends PathAsString<TDraft>,\n TComponent extends FormFieldComponent<any>,\n>(\n this: Form<TDraft, any>,\n {\n // id,\n name,\n commitOnBlur,\n commitDebounce,\n inputFilter,\n serialize = (x) => x as FieldValue<TComponent>,\n deserialize = (x) => x as Value<TDraft, TPath>,\n ...restProps\n }: FormFieldProps<TDraft, TPath, TComponent>,\n): JSX.Element {\n type T = FieldChangeValue<TComponent>;\n const id = '';\n const component = (('component' in restProps\n ? restProps.component\n : 'children' in restProps\n ? restProps.children\n : undefined) ?? 'input') as TComponent;\n\n const form = this.useForm();\n const state = useScope(this.state);\n const { value, setValue, errors } = this.useField(name);\n\n const errorString = useMemo(\n () => errors.map((error) => form.options.localizeError?.(error, name) ?? error).join('\\n'),\n [errors, form.options.localizeError],\n );\n const [localValue, setLocalValue] = useState<T>();\n const _id = useMemo(\n () =>\n id || `f${Math.random().toString(36).slice(2, 15)}${Math.random().toString(36).slice(2, 15)}`,\n\n [id],\n );\n\n useEffect(() => {\n if (localValue === undefined || !commitDebounce) {\n return;\n }\n\n const timeout = setTimeout(() => {\n setValue(deserialize(localValue));\n setLocalValue(undefined);\n }, commitDebounce);\n\n return () => clearTimeout(timeout);\n }, [localValue, commitDebounce]);\n\n useEffect(() => {\n const element = document.querySelector(\n [`#${_id} input`, `#${_id} select`, `#${_id} textarea`, `#${_id}`].join(','),\n );\n\n if (\n !(\n element instanceof HTMLInputElement ||\n element instanceof HTMLSelectElement ||\n element instanceof HTMLTextAreaElement\n )\n ) {\n return;\n }\n\n element.setCustomValidity(errorString);\n }, [_id, errorString]);\n\n const props = {\n ...restProps,\n component: undefined,\n children: undefined,\n id: _id,\n name,\n value: localValue ?? serialize(value),\n onChange: (event: { target: { value: T } } | T, ...moreArgs: any[]) => {\n const value =\n typeof event === 'object' && event !== null && 'target' in event\n ? event.target.value\n : event;\n\n if (inputFilter && !inputFilter(value)) {\n return;\n }\n\n if (commitOnBlur || commitDebounce) {\n setLocalValue(value);\n } else {\n setValue(deserialize(value));\n }\n\n restProps.onChange?.(event, ...moreArgs);\n },\n onFocus(...args: any[]) {\n state.set('touched', (touched) => {\n touched = new Set(touched);\n touched.add(_id);\n return touched;\n });\n\n restProps.onFocus?.apply(null, args);\n },\n onBlur(...args: any[]) {\n if (localValue !== undefined) {\n setValue(deserialize(localValue));\n setLocalValue(undefined);\n }\n\n restProps.onBlur?.apply(null, args);\n },\n };\n\n return createElement(component, props);\n}\n","import { Scope, type Store, connectUrl, createStore, type UrlStoreOptions } from '@core';\nimport { autobind } from '@lib/autobind';\nimport { deepEqual } from '@lib/equals';\nimport { hash } from '@lib/hash';\nimport {\n type PathAsString,\n type Value,\n type WildcardPathAsString,\n type WildcardValue,\n} from '@lib/path';\nimport { get } from '@lib/propAccess';\nimport { getWildCardMatches, wildcardMatch } from '@lib/wildcardMatch';\nimport {\n type ReactNode,\n createContext,\n useContext,\n useEffect,\n useMemo,\n type ComponentPropsWithoutRef,\n type HTMLProps,\n} from 'react';\nimport { ScopeProvider, useScope } from '../scope';\nimport { useStore, type UseStoreOptions } from '../useStore';\nimport { FormError, type FormErrorProps } from './formError';\nimport { FormField, type FormFieldComponent, type FormFieldProps } from './formField';\n\n/// /////////////////////////////////////////////////////////////////////////////\n// Form types\n/// /////////////////////////////////////////////////////////////////////////////\n\nexport interface FormOptions<TDraft, TOriginal> {\n defaultValue: TDraft;\n validations?: Validations<TDraft, TOriginal>;\n localizeError?: (error: string, field: string) => string | undefined;\n urlState?: boolean | UrlStoreOptions<TDraft>;\n}\n\nexport type Validations<TDraft, TOriginal> = {\n [P in WildcardPathAsString<TDraft>]?: Record<\n string,\n Validation<WildcardValue<TDraft, P>, TDraft, TOriginal>\n >;\n} & Record<string, Record<string, Validation<any, TDraft, TOriginal>>>;\n\nexport type Validation<TValue, TDraft, TOriginal> = (\n value: TValue,\n context: { draft: TDraft; original: TOriginal; field: PathAsString<TDraft> },\n) => boolean;\n\nexport interface Field<TDraft, TOriginal, TPath extends PathAsString<TDraft>> {\n originalValue: Value<TOriginal, TPath> | undefined;\n value: Value<TDraft, TPath>;\n setValue: (\n value: Value<TDraft, TPath> | ((value: Value<TDraft, TPath>) => Value<TDraft, TPath>),\n ) => void;\n isDirty: boolean;\n errors: string[];\n}\n\ninterface FormState<TDraft> {\n draft?: TDraft;\n touched: Set<string>;\n errors: Map<string, string[]>;\n hasTriggeredValidations?: boolean;\n}\n\n/// /////////////////////////////////////////////////////////////////////////////\n// Implementation\n/// /////////////////////////////////////////////////////////////////////////////\n\nfunction FormContainer({\n form,\n ...formProps\n}: { form: Form<any, any> } & Omit<HTMLProps<HTMLFormElement>, 'form'>) {\n const _form = form.useForm();\n\n return (\n <form\n {...formProps}\n noValidate\n onSubmit={(event) => {\n event.preventDefault();\n\n _form.validate();\n\n let button;\n\n if (\n event.nativeEvent instanceof SubmitEvent &&\n (button = event.nativeEvent.submitter) &&\n (button instanceof HTMLButtonElement || button instanceof HTMLInputElement) &&\n button.setCustomValidity\n ) {\n const errors = _form.errors.map(\n ({ field, error }) => _form.options.localizeError?.(error, field) ?? error,\n );\n button.setCustomValidity(errors.join('\\n'));\n }\n event.currentTarget.reportValidity();\n }}\n />\n );\n}\n\nfunction getFormInstance<TDraft, TOriginal extends TDraft>(\n original: TOriginal | undefined,\n options: FormOptions<TDraft, TOriginal>,\n state: Store<FormState<TDraft>>,\n) {\n const instance = {\n original,\n\n draft: state.map(\n (state) => state.draft ?? original ?? options.defaultValue,\n (draft) => (state) => ({ ...state, draft }),\n ),\n\n options,\n\n getField: <TPath extends PathAsString<TDraft>>(\n path: TPath,\n ): Field<TDraft, TOriginal, TPath> => {\n const { draft } = instance;\n\n return {\n get originalValue() {\n return original !== undefined ? get(original as any, path as any) : undefined;\n },\n\n get value() {\n return get(draft.get(), path);\n },\n\n setValue(update) {\n draft.set(path, update);\n },\n\n get isDirty() {\n const comparisonValue = this.originalValue ?? get(options.defaultValue, path);\n\n return state.get().hasTriggeredValidations || !deepEqual(comparisonValue, this.value);\n },\n\n get errors() {\n const blocks: (Validation<any, any, any> | Record<string, Validation<any, any, any>>)[] =\n Object.entries(options.validations ?? {})\n .filter(([key]) => wildcardMatch(path, key))\n .map(([, value]) => value);\n\n const value = this.value;\n const draftValue = draft.get();\n const errors: string[] = [];\n\n for (const block of blocks ?? []) {\n for (const [validationName, validate] of Object.entries(block)) {\n if (!validate(value, { draft: draftValue, original, field: path })) {\n errors.push(validationName);\n }\n }\n }\n\n return errors;\n },\n };\n },\n\n get hasChanges() {\n const { draft } = state.get();\n return !!draft && !deepEqual(draft, original ?? options.defaultValue);\n },\n\n get errors() {\n const draft = instance.draft.get();\n const errors = new Set<{ field: string; error: string }>();\n\n for (const [path, block] of Object.entries(options.validations ?? {})) {\n for (const [validationName, validate] of Object.entries(\n block as Record<string, Validation<any, any, any>>,\n )) {\n for (const [field, value] of Object.entries(getWildCardMatches(draft, path))) {\n if (!validate(value, { draft, original, field })) {\n errors.add({ field, error: validationName });\n }\n }\n }\n }\n\n return [...errors];\n },\n\n get isValid() {\n return instance.errors.length === 0;\n },\n\n validate: () => {\n state.set('hasTriggeredValidations', true);\n return instance.isValid;\n },\n\n reset() {\n state.set('draft', undefined);\n },\n };\n\n return instance;\n}\n\nexport class Form<TDraft, TOriginal extends TDraft = TDraft> {\n context = createContext({\n original: undefined as TOriginal | undefined,\n options: this.options,\n });\n\n state = new Scope<FormState<TDraft>>({\n touched: new Set(),\n errors: new Map(),\n });\n\n constructor(public readonly options: FormOptions<TDraft, TOriginal>) {\n autobind(Form);\n }\n\n useForm() {\n const { original, options } = useContext(this.context);\n const state = useScope(this.state);\n\n return useMemo(() => getFormInstance(original, options, state), [original, options, state]);\n }\n\n useFormState<S>(selector: (state: ReturnType<typeof getFormInstance<TDraft, TOriginal>>) => S) {\n const { original, options } = useContext(this.context);\n const state = useScope(this.state);\n\n return useStore(state.map(() => selector(getFormInstance(original, options, state))));\n }\n\n useField<TPath extends PathAsString<TDraft>>(path: TPath, useStoreOptions?: UseStoreOptions) {\n const form = this.useForm();\n const state = useScope(this.state);\n\n useStore(\n form.draft.map((draft) => get(draft, path)),\n useStoreOptions,\n );\n\n useStore(\n state.map((state) => state.hasTriggeredValidations),\n useStoreOptions,\n );\n\n return form.getField(path);\n }\n\n useHasChanges() {\n const form = this.useForm();\n\n return useStore(form.draft.map(() => form.hasChanges));\n }\n\n useIsValid() {\n const form = this.useForm();\n\n return useStore(form.draft.map(() => form.isValid));\n }\n\n // ///////////////////////////////////////////////////////////////////////////\n // React Components\n // ///////////////////////////////////////////////////////////////////////////\n\n Form({\n original,\n defaultValue,\n validations,\n localizeError,\n urlState,\n ...formProps\n }: {\n original?: TOriginal;\n } & Partial<FormOptions<TDraft, TOriginal>> &\n Omit<HTMLProps<HTMLFormElement>, 'defaultValue'>) {\n const value = useMemo(\n () => ({\n original,\n options: {\n defaultValue: { ...this.options.defaultValue, ...defaultValue },\n validations: { ...this.options.validations, ...validations } as Validations<\n TDraft,\n TOriginal\n >,\n localizeError: localizeError ?? this.options.localizeError,\n },\n }),\n [original, defaultValue, validations],\n );\n\n const store = useMemo(() => {\n return createStore(this.state.defaultValue);\n }, []);\n\n useEffect(() => {\n if (urlState) {\n return connectUrl(\n store.map('draft'),\n typeof urlState === 'object' ? urlState : { key: 'form' },\n );\n }\n\n return undefined;\n }, [store, hash(urlState)]);\n\n return (\n <this.context.Provider value={value}>\n <ScopeProvider scope={this.state} store={store}>\n <FormContainer {...formProps} form={this} />\n </ScopeProvider>\n </this.context.Provider>\n );\n }\n\n Subscribe<S>({\n selector,\n children,\n }: {\n selector: (form: ReturnType<typeof getFormInstance<TDraft, TOriginal>>) => S;\n children: (selectedState: S) => ReactNode;\n }) {\n const selectedState = this.useFormState(selector);\n return <>{children(selectedState)}</>;\n }\n\n Field<\n TPath extends PathAsString<TDraft>,\n TComponent extends FormFieldComponent<any> = (\n props: ComponentPropsWithoutRef<'input'>,\n ) => JSX.Element,\n >(props: FormFieldProps<TDraft, TPath, TComponent>): JSX.Element {\n return Reflect.apply(FormField, this, [props]);\n }\n\n Error<TPath extends PathAsString<TDraft>>({ name }: FormErrorProps<TDraft, TPath>) {\n return Reflect.apply(FormError, this, [{ name }]);\n }\n}\n\nexport function createForm<TDraft, TOriginal extends TDraft = TDraft>(\n options: FormOptions<TDraft, TOriginal>,\n) {\n return new Form(options);\n}\n","import { useCache } from './useCache';\nimport type { UseStoreOptions } from './useStore';\nimport type { Cache } from '@core';\n\nexport function read<T>(cache: Cache<T>, options?: UseStoreOptions): T {\n const { status, value, error } = useCache(cache, options);\n\n if (status === 'value') {\n return value;\n }\n\n if (status === 'error') {\n throw error;\n }\n\n throw cache.state.once((state) => state.status !== 'pending');\n}\n","import { startTransition, useEffect, useMemo, useRef, useState } from 'react';\nimport { type Duration } from '@core';\nimport { debounce } from '@lib/debounce';\nimport { hash } from '@lib/hash';\nimport { throttle } from '@lib/throttle';\n\nexport interface UseDecoupledStateOptions<T> {\n debounce?: Duration;\n throttle?: Duration;\n onCommit?: (value: T) => void;\n}\n\nexport function useDecoupledState<T>(\n value: T,\n onChange: (value: T) => void,\n options: UseDecoupledStateOptions<T> = {},\n): [state: T, setState: (value: T) => void] {\n const [dirty, setDirty] = useState<{ v: T }>();\n const ref = useRef({ onChange, onCommit: options.onCommit });\n\n useEffect(() => {\n ref.current = { onChange, onCommit: options.onCommit };\n }, [onChange]);\n\n const update = useMemo(() => {\n const { onChange, onCommit } = ref.current;\n\n const update = (value: T) => {\n onChange(value);\n setDirty(undefined);\n onCommit?.(value);\n };\n\n let delayedUpdate: (value: T) => void;\n\n if (options.debounce) {\n delayedUpdate = debounce(update, options.debounce);\n } else if (options.throttle) {\n delayedUpdate = throttle(update, options.throttle);\n } else {\n delayedUpdate = (value) => startTransition(() => update(value));\n }\n\n return (value: T) => {\n setDirty({ v: value });\n delayedUpdate(value);\n };\n }, [hash([options.debounce, options.throttle])]);\n\n return [dirty ? dirty.v : value, update];\n}\n","export function castArray<T>(value: T | T[]): T[] {\n return Array.isArray(value) ? value : [value];\n}\n","import { type ReactNode, useEffect } from 'react';\nimport { castArray } from '@lib/castArray';\nimport { hash } from '@lib/hash';\n\nexport function useUrlParamScope({\n key,\n type = 'search',\n}: {\n key: string | string[];\n type?: 'search' | 'hash';\n}) {\n useEffect(\n () => () => {\n const url = new URL(window.location.href);\n const parameters = new URLSearchParams(url[type].slice(1));\n\n for (const _key of castArray(key)) {\n parameters.delete(_key);\n }\n\n url[type] = parameters.toString();\n window.history.replaceState(null, '', url.toString());\n },\n [hash(key), type],\n );\n}\n"],"names":["castArrayPath","s","jsx","Fragment","useScope","useMemo","useState","useEffect","value","createElement","state","get","deepEqual","createContext","Scope","autobind","useContext","useStore","store","createStore","connectUrl","hash","ScopeProvider","useCache","useRef","onChange","update","debounce","throttle","startTransition"],"mappings":";;;;;;;;AAGgB,SAAA,cAAc,GAAuB,GAAgC;AAC/E,MAAA,OAAO,MAAM,UAAU;AACzB,QAAIA,MAAAA,cAAc,CAAC;AAAA,EACrB;AAEI,MAAA,OAAO,MAAM,UAAU;AACzB,QAAIA,MAAAA,cAAc,CAAC;AAAA,EACrB;AAEA,SAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,CAACC,IAAG,MAAM,EAAE,CAAC,MAAM,OAAOA,OAAM,EAAE,CAAC,CAAC;AAC9E;AAEgB,SAAA,mBAAmB,QAAa,MAAgD;AAC9F,QAAM,UAAgC,CAAA;AACtC,QAAM,CAAC,OAAO,GAAG,IAAI,IAAID,oBAAc,IAAI;AAE3C,MAAI,UAAU,QAAW;AAChB,WAAA;AAAA,EACT;AAEI,MAAA,EAAE,kBAAkB,SAAS;AAC/B,WAAO;EACT;AAEA,MAAI,UAAU,KAAK;AACjB,eAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,GAAG;AACjD,cAAQ,GAAG,IAAI,mBAAmB,OAAO,IAAI;AAAA,IAC/C;AAAA,EAAA,OACK;AACL,YAAQ,KAAK,IAAI,mBAAmB,OAAO,KAAK,GAAG,IAAI;AAAA,EACzD;AAEO,SAAA;AACT;AC7BgB,SAAA,UAEd,EAAE,QACF;AACA,QAAM,EAAE,QAAQ,QAAA,IAAY,KAAK,SAAS,IAAI;AAE9C,SAAO,UAAaE,2BAAAA,IAAAC,WAAA,UAAA,EAAA,UAAA,OAAO,KAAK,IAAI,GAAE,IAAM;AAC9C;ACmEO,SAAS,UAMd;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,CAAC,MAAM;AAAA,EACnB,cAAc,CAAC,MAAM;AAAA,EACrB,GAAG;AACL,GACa;AAEb,QAAM,KAAK;AACL,QAAA,aAAc,eAAe,YAC/B,UAAU,YACV,cAAc,YACd,UAAU,WACV,WAAc;AAEZ,QAAA,OAAO,KAAK;AACZ,QAAA,QAAQC,SAAAA,SAAS,KAAK,KAAK;AACjC,QAAM,EAAE,OAAO,UAAU,OAAW,IAAA,KAAK,SAAS,IAAI;AAEtD,QAAM,cAAcC,WAAA;AAAA,IAClB,MAAM,OAAO,IAAI,CAAC;;AAAU,+BAAK,SAAQ,kBAAb,4BAA6B,OAAO,UAAS;AAAA,KAAK,EAAE,KAAK,IAAI;AAAA,IACzF,CAAC,QAAQ,KAAK,QAAQ,aAAa;AAAA,EAAA;AAErC,QAAM,CAAC,YAAY,aAAa,IAAIC,WAAY,SAAA;AAChD,QAAM,MAAMD,WAAA;AAAA,IACV,MACQ,IAAI,KAAK,SAAS,SAAS,EAAE,EAAE,MAAM,GAAG,EAAE,IAAI,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,EAAE;AAAA,IAE5F,CAAC,EAAE;AAAA,EAAA;AAGLE,aAAAA,UAAU,MAAM;AACV,QAAA,eAAe,UAAa,CAAC,gBAAgB;AAC/C;AAAA,IACF;AAEM,UAAA,UAAU,WAAW,MAAM;AACtB,eAAA,YAAY,UAAU,CAAC;AAChC,oBAAc,MAAS;AAAA,OACtB,cAAc;AAEV,WAAA,MAAM,aAAa,OAAO;AAAA,EAAA,GAChC,CAAC,YAAY,cAAc,CAAC;AAE/BA,aAAAA,UAAU,MAAM;AACd,UAAM,UAAU,SAAS;AAAA,MACvB,CAAC,IAAI,aAAa,IAAI,cAAc,IAAI,gBAAgB,IAAI,KAAK,EAAE,KAAK,GAAG;AAAA,IAAA;AAG7E,QACE,EACE,mBAAmB,oBACnB,mBAAmB,qBACnB,mBAAmB,sBAErB;AACA;AAAA,IACF;AAEA,YAAQ,kBAAkB,WAAW;AAAA,EAAA,GACpC,CAAC,KAAK,WAAW,CAAC;AAErB,QAAM,QAAQ;AAAA,IACZ,GAAG;AAAA,IACH,WAAW;AAAA,IACX,UAAU;AAAA,IACV,IAAI;AAAA,IACJ;AAAA,IACA,OAAO,cAAc,UAAU,KAAK;AAAA,IACpC,UAAU,CAAC,UAAwC,aAAoB;;AAC/DC,YAAAA,SACJ,OAAO,UAAU,YAAY,UAAU,QAAQ,YAAY,QACvD,MAAM,OAAO,QACb;AAEN,UAAI,eAAe,CAAC,YAAYA,MAAK,GAAG;AACtC;AAAA,MACF;AAEA,UAAI,gBAAgB,gBAAgB;AAClC,sBAAcA,MAAK;AAAA,MAAA,OACd;AACI,iBAAA,YAAYA,MAAK,CAAC;AAAA,MAC7B;AAEU,sBAAA,aAAA,mCAAW,OAAO,GAAG;AAAA,IACjC;AAAA,IACA,WAAW,MAAa;;AAChB,YAAA,IAAI,WAAW,CAAC,YAAY;AACtB,kBAAA,IAAI,IAAI,OAAO;AACzB,gBAAQ,IAAI,GAAG;AACR,eAAA;AAAA,MAAA,CACR;AAES,sBAAA,YAAA,mBAAS,MAAM,MAAM;AAAA,IACjC;AAAA,IACA,UAAU,MAAa;;AACrB,UAAI,eAAe,QAAW;AACnB,iBAAA,YAAY,UAAU,CAAC;AAChC,sBAAc,MAAS;AAAA,MACzB;AAEU,sBAAA,WAAA,mBAAQ,MAAM,MAAM;AAAA,IAChC;AAAA,EAAA;AAGK,SAAAC,WAAA,cAAc,WAAW,KAAK;AACvC;AChIA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA,GAAG;AACL,GAAwE;AAChE,QAAA,QAAQ,KAAK;AAGjB,SAAAP,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,YAAU;AAAA,MACV,UAAU,CAAC,UAAU;AACnB,cAAM,eAAe;AAErB,cAAM,SAAS;AAEX,YAAA;AAEJ,YACE,MAAM,uBAAuB,gBAC5B,SAAS,MAAM,YAAY,eAC3B,kBAAkB,qBAAqB,kBAAkB,qBAC1D,OAAO,mBACP;AACM,gBAAA,SAAS,MAAM,OAAO;AAAA,YAC1B,CAAC,EAAE,OAAO,MAAM;;AAAM,wCAAM,SAAQ,kBAAd,4BAA8B,OAAO,WAAU;AAAA;AAAA,UAAA;AAEvE,iBAAO,kBAAkB,OAAO,KAAK,IAAI,CAAC;AAAA,QAC5C;AACA,cAAM,cAAc;MACtB;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAAS,gBACP,UACA,SACA,OACA;AACA,QAAM,WAAW;AAAA,IACf;AAAA,IAEA,OAAO,MAAM;AAAA,MACX,CAACQ,WAAUA,OAAM,SAAS,YAAY,QAAQ;AAAA,MAC9C,CAAC,UAAU,CAACA,YAAW,EAAE,GAAGA,QAAO,MAAM;AAAA,IAC3C;AAAA,IAEA;AAAA,IAEA,UAAU,CACR,SACoC;AAC9B,YAAA,EAAE,MAAU,IAAA;AAEX,aAAA;AAAA,QACL,IAAI,gBAAgB;AAClB,iBAAO,aAAa,SAAYC,MAAAA,IAAI,UAAiB,IAAW,IAAI;AAAA,QACtE;AAAA,QAEA,IAAI,QAAQ;AACV,iBAAOA,MAAI,IAAA,MAAM,IAAI,GAAG,IAAI;AAAA,QAC9B;AAAA,QAEA,SAAS,QAAQ;AACT,gBAAA,IAAI,MAAM,MAAM;AAAA,QACxB;AAAA,QAEA,IAAI,UAAU;AACZ,gBAAM,kBAAkB,KAAK,iBAAiBA,MAAI,IAAA,QAAQ,cAAc,IAAI;AAErE,iBAAA,MAAM,MAAM,2BAA2B,CAACC,MAAAA,UAAU,iBAAiB,KAAK,KAAK;AAAA,QACtF;AAAA,QAEA,IAAI,SAAS;AACL,gBAAA,SACJ,OAAO,QAAQ,QAAQ,eAAe,CAAE,CAAA,EACrC,OAAO,CAAC,CAAC,GAAG,MAAM,cAAc,MAAM,GAAG,CAAC,EAC1C,IAAI,CAAC,CAAGJ,EAAAA,MAAK,MAAMA,MAAK;AAE7B,gBAAM,QAAQ,KAAK;AACb,gBAAA,aAAa,MAAM;AACzB,gBAAM,SAAmB,CAAA;AAEd,qBAAA,SAAS,UAAU,IAAI;AAChC,uBAAW,CAAC,gBAAgB,QAAQ,KAAK,OAAO,QAAQ,KAAK,GAAG;AAC1D,kBAAA,CAAC,SAAS,OAAO,EAAE,OAAO,YAAY,UAAU,OAAO,KAAK,CAAC,GAAG;AAClE,uBAAO,KAAK,cAAc;AAAA,cAC5B;AAAA,YACF;AAAA,UACF;AAEO,iBAAA;AAAA,QACT;AAAA,MAAA;AAAA,IAEJ;AAAA,IAEA,IAAI,aAAa;AACf,YAAM,EAAE,MAAA,IAAU,MAAM,IAAI;AACrB,aAAA,CAAC,CAAC,SAAS,CAACI,gBAAU,OAAO,YAAY,QAAQ,YAAY;AAAA,IACtE;AAAA,IAEA,IAAI,SAAS;AACL,YAAA,QAAQ,SAAS,MAAM,IAAI;AAC3B,YAAA,6BAAa;AAER,iBAAA,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQ,QAAQ,eAAe,CAAA,CAAE,GAAG;AACrE,mBAAW,CAAC,gBAAgB,QAAQ,KAAK,OAAO;AAAA,UAC9C;AAAA,QAAA,GACC;AACU,qBAAA,CAAC,OAAO,KAAK,KAAK,OAAO,QAAQ,mBAAmB,OAAO,IAAI,CAAC,GAAG;AACxE,gBAAA,CAAC,SAAS,OAAO,EAAE,OAAO,UAAU,MAAA,CAAO,GAAG;AAChD,qBAAO,IAAI,EAAE,OAAO,OAAO,eAAgB,CAAA;AAAA,YAC7C;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAEO,aAAA,CAAC,GAAG,MAAM;AAAA,IACnB;AAAA,IAEA,IAAI,UAAU;AACL,aAAA,SAAS,OAAO,WAAW;AAAA,IACpC;AAAA,IAEA,UAAU,MAAM;AACR,YAAA,IAAI,2BAA2B,IAAI;AACzC,aAAO,SAAS;AAAA,IAClB;AAAA,IAEA,QAAQ;AACA,YAAA,IAAI,SAAS,MAAS;AAAA,IAC9B;AAAA,EAAA;AAGK,SAAA;AACT;AAEO,MAAM,KAAgD;AAAA,EAW3D,YAA4B,SAAyC;AAAzC,SAAA,UAAA;AAV5B,SAAA,UAAUC,yBAAc;AAAA,MACtB,UAAU;AAAA,MACV,SAAS,KAAK;AAAA,IAAA,CACf;AAED,SAAA,QAAQ,IAAIC,YAAyB;AAAA,MACnC,6BAAa,IAAI;AAAA,MACjB,4BAAY,IAAI;AAAA,IAAA,CACjB;AAGCC,UAAA,SAAS,IAAI;AAAA,EACf;AAAA,EAEA,UAAU;AACR,UAAM,EAAE,UAAU,QAAA,IAAYC,WAAAA,WAAW,KAAK,OAAO;AAC/C,UAAA,QAAQZ,SAAAA,SAAS,KAAK,KAAK;AAE1B,WAAAC,mBAAQ,MAAM,gBAAgB,UAAU,SAAS,KAAK,GAAG,CAAC,UAAU,SAAS,KAAK,CAAC;AAAA,EAC5F;AAAA,EAEA,aAAgB,UAA+E;AAC7F,UAAM,EAAE,UAAU,QAAA,IAAYW,WAAAA,WAAW,KAAK,OAAO;AAC/C,UAAA,QAAQZ,SAAAA,SAAS,KAAK,KAAK;AAE1B,WAAAa,kBAAS,MAAM,IAAI,MAAM,SAAS,gBAAgB,UAAU,SAAS,KAAK,CAAC,CAAC,CAAC;AAAA,EACtF;AAAA,EAEA,SAA6C,MAAa,iBAAmC;AACrF,UAAA,OAAO,KAAK;AACZ,UAAA,QAAQb,SAAAA,SAAS,KAAK,KAAK;AAEjCa,aAAA;AAAA,MACE,KAAK,MAAM,IAAI,CAAC,UAAUN,UAAI,OAAO,IAAI,CAAC;AAAA,MAC1C;AAAA,IAAA;AAGFM,aAAA;AAAA,MACE,MAAM,IAAI,CAACP,WAAUA,OAAM,uBAAuB;AAAA,MAClD;AAAA,IAAA;AAGK,WAAA,KAAK,SAAS,IAAI;AAAA,EAC3B;AAAA,EAEA,gBAAgB;AACR,UAAA,OAAO,KAAK;AAElB,WAAOO,SAAAA,SAAS,KAAK,MAAM,IAAI,MAAM,KAAK,UAAU,CAAC;AAAA,EACvD;AAAA,EAEA,aAAa;AACL,UAAA,OAAO,KAAK;AAElB,WAAOA,SAAAA,SAAS,KAAK,MAAM,IAAI,MAAM,KAAK,OAAO,CAAC;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA,EAMA,KAAK;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAI+C;AAClD,UAAM,QAAQZ,WAAA;AAAA,MACZ,OAAO;AAAA,QACL;AAAA,QACA,SAAS;AAAA,UACP,cAAc,EAAE,GAAG,KAAK,QAAQ,cAAc,GAAG,aAAa;AAAA,UAC9D,aAAa,EAAE,GAAG,KAAK,QAAQ,aAAa,GAAG,YAAY;AAAA,UAI3D,eAAe,iBAAiB,KAAK,QAAQ;AAAA,QAC/C;AAAA,MAAA;AAAA,MAEF,CAAC,UAAU,cAAc,WAAW;AAAA,IAAA;AAGhC,UAAAa,UAAQb,WAAAA,QAAQ,MAAM;AACnB,aAAAc,kBAAY,KAAK,MAAM,YAAY;AAAA,IAC5C,GAAG,CAAE,CAAA;AAELZ,eAAAA,UAAU,MAAM;AACd,UAAI,UAAU;AACL,eAAAa,SAAA;AAAA,UACLF,QAAM,IAAI,OAAO;AAAA,UACjB,OAAO,aAAa,WAAW,WAAW,EAAE,KAAK,OAAO;AAAA,QAAA;AAAA,MAE5D;AAEO,aAAA;AAAA,OACN,CAACA,SAAOG,MAAAA,KAAK,QAAQ,CAAC,CAAC;AAE1B,0CACG,KAAK,QAAQ,UAAb,EAAsB,OACrB,yCAACC,wBAAc,EAAA,OAAO,KAAK,OAAOJ,OAAAA,SAChC,yCAAC,eAAe,EAAA,GAAG,WAAW,MAAM,KAAA,CAAM,EAC5C,CAAA,EACF,CAAA;AAAA,EAEJ;AAAA,EAEA,UAAa;AAAA,IACX;AAAA,IACA;AAAA,EAAA,GAIC;AACK,UAAA,gBAAgB,KAAK,aAAa,QAAQ;AACzC,WAAAhB,2BAAAA,IAAAC,WAAAA,UAAA,EAAG,UAAS,SAAA,aAAa,EAAE,CAAA;AAAA,EACpC;AAAA,EAEA,MAKE,OAA+D;AAC/D,WAAO,QAAQ,MAAM,WAAW,MAAM,CAAC,KAAK,CAAC;AAAA,EAC/C;AAAA,EAEA,MAA0C,EAAE,QAAuC;AAC1E,WAAA,QAAQ,MAAM,WAAW,MAAM,CAAC,EAAE,KAAM,CAAA,CAAC;AAAA,EAClD;AACF;AAEO,SAAS,WACd,SACA;AACO,SAAA,IAAI,KAAK,OAAO;AACzB;ACxVgB,SAAA,KAAQ,OAAiB,SAA8B;AACrE,QAAM,EAAE,QAAQ,OAAO,MAAU,IAAAoB,kBAAS,OAAO,OAAO;AAExD,MAAI,WAAW,SAAS;AACf,WAAA;AAAA,EACT;AAEA,MAAI,WAAW,SAAS;AAChB,UAAA;AAAA,EACR;AAEA,QAAM,MAAM,MAAM,KAAK,CAAC,UAAU,MAAM,WAAW,SAAS;AAC9D;ACJO,SAAS,kBACd,OACA,UACA,UAAuC,CAAA,GACG;AAC1C,QAAM,CAAC,OAAO,QAAQ,IAAIjB,WAAmB,SAAA;AAC7C,QAAM,MAAMkB,WAAAA,OAAO,EAAE,UAAU,UAAU,QAAQ,UAAU;AAE3DjB,aAAAA,UAAU,MAAM;AACd,QAAI,UAAU,EAAE,UAAU,UAAU,QAAQ;EAAS,GACpD,CAAC,QAAQ,CAAC;AAEP,QAAA,SAASF,WAAAA,QAAQ,MAAM;AAC3B,UAAM,EAAE,UAAAoB,WAAU,SAAA,IAAa,IAAI;AAE7BC,UAAAA,UAAS,CAAClB,WAAa;AAC3BiB,gBAASjB,MAAK;AACd,eAAS,MAAS;AAClB,2CAAWA;AAAAA,IAAK;AAGd,QAAA;AAEJ,QAAI,QAAQ,UAAU;AACJ,sBAAAmB,MAAAA,SAASD,SAAQ,QAAQ,QAAQ;AAAA,IAAA,WACxC,QAAQ,UAAU;AACX,sBAAAE,MAAAA,SAASF,SAAQ,QAAQ,QAAQ;AAAA,IAAA,OAC5C;AACL,sBAAgB,CAAClB,WAAUqB,WAAAA,gBAAgB,MAAMH,QAAOlB,MAAK,CAAC;AAAA,IAChE;AAEA,WAAO,CAACA,WAAa;AACV,eAAA,EAAE,GAAGA,OAAAA,CAAO;AACrB,oBAAcA,MAAK;AAAA,IAAA;AAAA,EACrB,GACC,CAACa,MAAAA,KAAK,CAAC,QAAQ,UAAU,QAAQ,QAAQ,CAAC,CAAC,CAAC;AAE/C,SAAO,CAAC,QAAQ,MAAM,IAAI,OAAO,MAAM;AACzC;AClDO,SAAS,UAAa,OAAqB;AAChD,SAAO,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AAC9C;ACEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,OAAO;AACT,GAGG;AACDd,aAAA;AAAA,IACE,MAAM,MAAM;AACV,YAAM,MAAM,IAAI,IAAI,OAAO,SAAS,IAAI;AAClC,YAAA,aAAa,IAAI,gBAAgB,IAAI,IAAI,EAAE,MAAM,CAAC,CAAC;AAE9C,iBAAA,QAAQ,UAAU,GAAG,GAAG;AACjC,mBAAW,OAAO,IAAI;AAAA,MACxB;AAEI,UAAA,IAAI,IAAI,WAAW,SAAS;AAChC,aAAO,QAAQ,aAAa,MAAM,IAAI,IAAI,UAAU;AAAA,IACtD;AAAA,IACA,CAACc,MAAA,KAAK,GAAG,GAAG,IAAI;AAAA,EAAA;AAEpB;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/lib/wildcardMatch.ts","../../../src/react/form/formError.tsx","../../../src/react/form/formField.tsx","../../../src/react/form/form.tsx","../../../src/react/read.ts","../../../src/react/useDecoupledState.ts","../../../src/lib/castArray.ts","../../../src/react/useUrlParamScope.ts"],"sourcesContent":["import { type KeyType } from './path';\nimport { castArrayPath } from './propAccess';\n\nexport function wildcardMatch(s: KeyType[] | string, w: KeyType[] | string): boolean {\n if (typeof s === 'string') {\n s = castArrayPath(s);\n }\n\n if (typeof w === 'string') {\n w = castArrayPath(w);\n }\n\n return s.length === w.length && s.every((s, i) => w[i] === '*' || s === w[i]);\n}\n\nexport function getWildCardMatches(object: any, path: KeyType[] | string): Record<KeyType, any> {\n const matches: Record<KeyType, any> = {};\n const [first, ...rest] = castArrayPath(path);\n\n if (first === undefined) {\n return object;\n }\n\n if (!(object instanceof Object)) {\n return {};\n }\n\n if (first === '*') {\n for (const [key, value] of Object.entries(object)) {\n matches[key] = getWildCardMatches(value, rest);\n }\n } else {\n matches[first] = getWildCardMatches(object[first], rest);\n }\n\n return matches;\n}\n","import { type Form } from './form';\nimport { type PathAsString } from '@lib/path';\n\nexport type FormErrorProps<TDraft, TPath extends PathAsString<TDraft>> = {\n name: TPath;\n};\n\nexport function FormError<TDraft, TPath extends PathAsString<TDraft>>(\n this: Form<TDraft, any>,\n { name }: FormErrorProps<TDraft, TPath>,\n) {\n const { errors, isDirty } = this.useField(name);\n\n return isDirty ? <>{errors.join(', ')}</> : null;\n}\n","import { type PathAsString } from '@index';\nimport { type Value } from '@lib/path';\nimport { useScope } from '@react/scope';\nimport {\n createElement,\n useEffect,\n useMemo,\n useState,\n type ComponentPropsWithoutRef,\n type ComponentType,\n type HTMLProps,\n} from 'react';\nimport { type Form } from './form';\n\ninterface FormFieldComponentProps<TValue, TPath> {\n id: string;\n name: TPath;\n value: TValue;\n onChange: (event: { target: { value: TValue } } | TValue | undefined, ...args: any[]) => void;\n onFocus: (...args: any[]) => void;\n onBlur: (...args: any[]) => void;\n}\n\ntype NativeInputType = 'input' | 'select' | 'textarea';\n\ntype FieldValue<T extends FormFieldComponent<any, any>> = ComponentPropsWithoutRef<\n T & 'input'\n> extends {\n value: infer U;\n}\n ? U\n : ComponentPropsWithoutRef<T & 'input'> extends {\n value?: infer U;\n }\n ? U | undefined\n : never;\n\ntype FieldChangeValue<T extends FormFieldComponent<any, any>> = ComponentPropsWithoutRef<\n T & 'input'\n> extends {\n onChange?: (update: infer U) => void;\n}\n ? U extends { target: { value: infer V } }\n ? V\n : U\n : never;\n\ntype A = FieldChangeValue<'input'>;\n\nexport type FormFieldComponent<TValue, TPath> =\n | (string | number extends TValue ? NativeInputType : never)\n | ComponentType<FormFieldComponentProps<TValue, TPath>>;\n\nexport type FormFieldProps<\n TDraft,\n TPath extends PathAsString<TDraft>,\n TComponent extends FormFieldComponent<any, TPath>,\n> = {\n name: TPath;\n commitOnBlur?: boolean;\n commitDebounce?: number;\n inputFilter?: (value: FieldChangeValue<TComponent>) => boolean;\n onChange?: ComponentPropsWithoutRef<TComponent>['onChange'];\n onBlur?: ComponentPropsWithoutRef<TComponent>['onBlur'];\n} & (TComponent extends\n | 'input'\n | ((props: ComponentPropsWithoutRef<'input'> & { name: TPath }) => JSX.Element)\n ? { component?: TComponent } | { children?: TComponent }\n : { component: TComponent } | { children: TComponent }) &\n Omit<\n ComponentPropsWithoutRef<TComponent>,\n | 'form'\n | 'name'\n | 'component'\n | 'commitOnBlur'\n | 'commitDebounce'\n | 'value'\n | 'onChange'\n | 'onBlur'\n | 'children'\n > &\n (Value<TDraft, TPath> extends FieldValue<TComponent>\n ? { serialize?: (value: Value<TDraft, TPath>) => FieldValue<TComponent> }\n : { serialize: (value: Value<TDraft, TPath>) => FieldValue<TComponent> }) &\n (FieldChangeValue<TComponent> extends Value<TDraft, TPath>\n ? { deserialize?: (value: FieldChangeValue<TComponent>) => Value<TDraft, TPath> }\n : { deserialize: (value: FieldChangeValue<TComponent>) => Value<TDraft, TPath> });\n\nexport function FormField<\n TDraft,\n TPath extends PathAsString<TDraft>,\n TComponent extends FormFieldComponent<any, any>,\n>(\n this: Form<TDraft, any>,\n {\n // id,\n name,\n commitOnBlur,\n commitDebounce,\n inputFilter,\n serialize = (x) => x as FieldValue<TComponent>,\n deserialize = (x) => x as Value<TDraft, TPath>,\n ...restProps\n }: FormFieldProps<TDraft, TPath, TComponent>,\n): JSX.Element {\n type T = FieldChangeValue<TComponent>;\n const id = '';\n const component = (('component' in restProps\n ? restProps.component\n : 'children' in restProps\n ? restProps.children\n : undefined) ?? 'input') as TComponent;\n\n const form = this.useForm();\n const state = useScope(this.state);\n const { value, setValue, errors } = this.useField(name);\n\n const errorString = useMemo(\n () => errors.map((error) => form.options.localizeError?.(error, name) ?? error).join('\\n'),\n [errors, form.options.localizeError],\n );\n const [localValue, setLocalValue] = useState<T>();\n const _id = useMemo(\n () =>\n id || `f${Math.random().toString(36).slice(2, 15)}${Math.random().toString(36).slice(2, 15)}`,\n\n [id],\n );\n\n useEffect(() => {\n if (localValue === undefined || !commitDebounce) {\n return;\n }\n\n const timeout = setTimeout(() => {\n setValue(deserialize(localValue));\n setLocalValue(undefined);\n }, commitDebounce);\n\n return () => clearTimeout(timeout);\n }, [localValue, commitDebounce]);\n\n useEffect(() => {\n const element = document.querySelector(\n [`#${_id} input`, `#${_id} select`, `#${_id} textarea`, `#${_id}`].join(','),\n );\n\n if (\n !(\n element instanceof HTMLInputElement ||\n element instanceof HTMLSelectElement ||\n element instanceof HTMLTextAreaElement\n )\n ) {\n return;\n }\n\n element.setCustomValidity(errorString);\n }, [_id, errorString]);\n\n const props = {\n ...restProps,\n component: undefined,\n children: undefined,\n id: _id,\n name,\n value: localValue ?? serialize(value),\n onChange: (event: { target: { value: T } } | T, ...moreArgs: any[]) => {\n const value =\n typeof event === 'object' && event !== null && 'target' in event\n ? event.target.value\n : event;\n\n if (inputFilter && !inputFilter(value)) {\n return;\n }\n\n if (commitOnBlur || commitDebounce) {\n setLocalValue(value);\n } else {\n setValue(deserialize(value));\n }\n\n restProps.onChange?.(event, ...moreArgs);\n },\n onFocus(...args: any[]) {\n state.set('touched', (touched) => {\n touched = new Set(touched);\n touched.add(_id);\n return touched;\n });\n\n restProps.onFocus?.apply(null, args);\n },\n onBlur(...args: any[]) {\n if (localValue !== undefined) {\n setValue(deserialize(localValue));\n setLocalValue(undefined);\n }\n\n restProps.onBlur?.apply(null, args);\n },\n };\n\n return createElement(component, props);\n}\n","import { Scope, type Store, connectUrl, createStore, type UrlStoreOptions } from '@core';\nimport { autobind } from '@lib/autobind';\nimport { deepEqual } from '@lib/equals';\nimport { hash } from '@lib/hash';\nimport {\n type PathAsString,\n type Value,\n type WildcardPathAsString,\n type WildcardValue,\n} from '@lib/path';\nimport { get } from '@lib/propAccess';\nimport { getWildCardMatches, wildcardMatch } from '@lib/wildcardMatch';\nimport {\n type ReactNode,\n createContext,\n useContext,\n useEffect,\n useMemo,\n type ComponentPropsWithoutRef,\n type HTMLProps,\n} from 'react';\nimport { ScopeProvider, useScope } from '../scope';\nimport { useStore, type UseStoreOptions } from '../useStore';\nimport { FormError, type FormErrorProps } from './formError';\nimport { FormField, type FormFieldComponent, type FormFieldProps } from './formField';\n\n/// /////////////////////////////////////////////////////////////////////////////\n// Form types\n/// /////////////////////////////////////////////////////////////////////////////\n\nexport interface FormOptions<TDraft, TOriginal> {\n defaultValue: TDraft;\n validations?: Validations<TDraft, TOriginal>;\n localizeError?: (error: string, field: string) => string | undefined;\n urlState?: boolean | UrlStoreOptions<TDraft>;\n}\n\nexport type Validations<TDraft, TOriginal> = {\n [P in WildcardPathAsString<TDraft>]?: Record<\n string,\n Validation<WildcardValue<TDraft, P>, TDraft, TOriginal>\n >;\n} & Record<string, Record<string, Validation<any, TDraft, TOriginal>>>;\n\nexport type Validation<TValue, TDraft, TOriginal> = (\n value: TValue,\n context: { draft: TDraft; original: TOriginal; field: PathAsString<TDraft> },\n) => boolean;\n\nexport interface Field<TDraft, TOriginal, TPath extends PathAsString<TDraft>> {\n originalValue: Value<TOriginal, TPath> | undefined;\n value: Value<TDraft, TPath>;\n setValue: (\n value: Value<TDraft, TPath> | ((value: Value<TDraft, TPath>) => Value<TDraft, TPath>),\n ) => void;\n isDirty: boolean;\n errors: string[];\n}\n\ninterface FormState<TDraft> {\n draft?: TDraft;\n touched: Set<string>;\n errors: Map<string, string[]>;\n hasTriggeredValidations?: boolean;\n}\n\n/// /////////////////////////////////////////////////////////////////////////////\n// Implementation\n/// /////////////////////////////////////////////////////////////////////////////\n\nfunction FormContainer({\n form,\n ...formProps\n}: { form: Form<any, any> } & Omit<HTMLProps<HTMLFormElement>, 'form'>) {\n const _form = form.useForm();\n\n return (\n <form\n {...formProps}\n noValidate\n onSubmit={(event) => {\n event.preventDefault();\n\n _form.validate();\n\n let button;\n\n if (\n event.nativeEvent instanceof SubmitEvent &&\n (button = event.nativeEvent.submitter) &&\n (button instanceof HTMLButtonElement || button instanceof HTMLInputElement) &&\n button.setCustomValidity\n ) {\n const errors = _form.errors.map(\n ({ field, error }) => _form.options.localizeError?.(error, field) ?? error,\n );\n button.setCustomValidity(errors.join('\\n'));\n }\n event.currentTarget.reportValidity();\n }}\n />\n );\n}\n\nfunction getFormInstance<TDraft, TOriginal extends TDraft>(\n original: TOriginal | undefined,\n options: FormOptions<TDraft, TOriginal>,\n state: Store<FormState<TDraft>>,\n) {\n const instance = {\n original,\n\n draft: state.map(\n (state) => state.draft ?? original ?? options.defaultValue,\n (draft) => (state) => ({ ...state, draft }),\n ),\n\n options,\n\n getField: <TPath extends PathAsString<TDraft>>(\n path: TPath,\n ): Field<TDraft, TOriginal, TPath> => {\n const { draft } = instance;\n\n return {\n get originalValue() {\n return original !== undefined ? get(original as any, path as any) : undefined;\n },\n\n get value() {\n return get(draft.get(), path);\n },\n\n setValue(update) {\n draft.set(path, update);\n },\n\n get isDirty() {\n const comparisonValue = this.originalValue ?? get(options.defaultValue, path);\n\n return state.get().hasTriggeredValidations || !deepEqual(comparisonValue, this.value);\n },\n\n get errors() {\n const blocks: (Validation<any, any, any> | Record<string, Validation<any, any, any>>)[] =\n Object.entries(options.validations ?? {})\n .filter(([key]) => wildcardMatch(path, key))\n .map(([, value]) => value);\n\n const value = this.value;\n const draftValue = draft.get();\n const errors: string[] = [];\n\n for (const block of blocks ?? []) {\n for (const [validationName, validate] of Object.entries(block)) {\n if (!validate(value, { draft: draftValue, original, field: path })) {\n errors.push(validationName);\n }\n }\n }\n\n return errors;\n },\n };\n },\n\n get hasChanges() {\n const { draft } = state.get();\n return !!draft && !deepEqual(draft, original ?? options.defaultValue);\n },\n\n get errors() {\n const draft = instance.draft.get();\n const errors = new Set<{ field: string; error: string }>();\n\n for (const [path, block] of Object.entries(options.validations ?? {})) {\n for (const [validationName, validate] of Object.entries(\n block as Record<string, Validation<any, any, any>>,\n )) {\n for (const [field, value] of Object.entries(getWildCardMatches(draft, path))) {\n if (!validate(value, { draft, original, field })) {\n errors.add({ field, error: validationName });\n }\n }\n }\n }\n\n return [...errors];\n },\n\n get isValid() {\n return instance.errors.length === 0;\n },\n\n validate: () => {\n state.set('hasTriggeredValidations', true);\n return instance.isValid;\n },\n\n reset() {\n state.set('draft', undefined);\n },\n };\n\n return instance;\n}\n\nexport class Form<TDraft, TOriginal extends TDraft = TDraft> {\n context = createContext({\n original: undefined as TOriginal | undefined,\n options: this.options,\n });\n\n state = new Scope<FormState<TDraft>>({\n touched: new Set(),\n errors: new Map(),\n });\n\n constructor(public readonly options: FormOptions<TDraft, TOriginal>) {\n autobind(Form);\n }\n\n useForm() {\n const { original, options } = useContext(this.context);\n const state = useScope(this.state);\n\n return useMemo(() => getFormInstance(original, options, state), [original, options, state]);\n }\n\n useFormState<S>(selector: (state: ReturnType<typeof getFormInstance<TDraft, TOriginal>>) => S) {\n const { original, options } = useContext(this.context);\n const state = useScope(this.state);\n\n return useStore(state.map(() => selector(getFormInstance(original, options, state))));\n }\n\n useField<TPath extends PathAsString<TDraft>>(path: TPath, useStoreOptions?: UseStoreOptions) {\n const form = this.useForm();\n const state = useScope(this.state);\n\n useStore(\n form.draft.map((draft) => get(draft, path)),\n useStoreOptions,\n );\n\n useStore(\n state.map((state) => state.hasTriggeredValidations),\n useStoreOptions,\n );\n\n return form.getField(path);\n }\n\n useHasChanges() {\n const form = this.useForm();\n\n return useStore(form.draft.map(() => form.hasChanges));\n }\n\n useIsValid() {\n const form = this.useForm();\n\n return useStore(form.draft.map(() => form.isValid));\n }\n\n // ///////////////////////////////////////////////////////////////////////////\n // React Components\n // ///////////////////////////////////////////////////////////////////////////\n\n Form({\n original,\n defaultValue,\n validations,\n localizeError,\n urlState,\n ...formProps\n }: {\n original?: TOriginal;\n } & Partial<FormOptions<TDraft, TOriginal>> &\n Omit<HTMLProps<HTMLFormElement>, 'defaultValue'>) {\n const value = useMemo(\n () => ({\n original,\n options: {\n defaultValue: { ...this.options.defaultValue, ...defaultValue },\n validations: { ...this.options.validations, ...validations } as Validations<\n TDraft,\n TOriginal\n >,\n localizeError: localizeError ?? this.options.localizeError,\n },\n }),\n [original, defaultValue, validations],\n );\n\n const store = useMemo(() => {\n return createStore(this.state.defaultValue);\n }, []);\n\n useEffect(() => {\n if (urlState) {\n return connectUrl(\n store.map('draft'),\n typeof urlState === 'object' ? urlState : { key: 'form' },\n );\n }\n\n return undefined;\n }, [store, hash(urlState)]);\n\n return (\n <this.context.Provider value={value}>\n <ScopeProvider scope={this.state} store={store}>\n <FormContainer {...formProps} form={this} />\n </ScopeProvider>\n </this.context.Provider>\n );\n }\n\n Subscribe<S>({\n selector,\n children,\n }: {\n selector: (form: ReturnType<typeof getFormInstance<TDraft, TOriginal>>) => S;\n children: (selectedState: S) => ReactNode;\n }) {\n const selectedState = this.useFormState(selector);\n return <>{children(selectedState)}</>;\n }\n\n Field<\n TPath extends PathAsString<TDraft>,\n TComponent extends FormFieldComponent<any, TPath> = (\n props: ComponentPropsWithoutRef<'input'> & { name: TPath },\n ) => JSX.Element,\n >(props: FormFieldProps<TDraft, TPath, TComponent>): JSX.Element {\n return Reflect.apply(FormField, this, [props]);\n }\n\n Error<TPath extends PathAsString<TDraft>>({ name }: FormErrorProps<TDraft, TPath>) {\n return Reflect.apply(FormError, this, [{ name }]);\n }\n}\n\nexport function createForm<TDraft, TOriginal extends TDraft = TDraft>(\n options: FormOptions<TDraft, TOriginal>,\n) {\n return new Form(options);\n}\n","import { useCache } from './useCache';\nimport type { UseStoreOptions } from './useStore';\nimport type { Cache } from '@core';\n\nexport function read<T>(cache: Cache<T>, options?: UseStoreOptions): T {\n const { status, value, error } = useCache(cache, options);\n\n if (status === 'value') {\n return value;\n }\n\n if (status === 'error') {\n throw error;\n }\n\n throw cache.state.once((state) => state.status !== 'pending');\n}\n","import { startTransition, useEffect, useMemo, useRef, useState } from 'react';\nimport { type Duration } from '@core';\nimport { debounce } from '@lib/debounce';\nimport { hash } from '@lib/hash';\nimport { throttle } from '@lib/throttle';\n\nexport interface UseDecoupledStateOptions<T> {\n debounce?: Duration;\n throttle?: Duration;\n onCommit?: (value: T) => void;\n}\n\nexport function useDecoupledState<T>(\n value: T,\n onChange: (value: T) => void,\n options: UseDecoupledStateOptions<T> = {},\n): [state: T, setState: (value: T) => void] {\n const [dirty, setDirty] = useState<{ v: T }>();\n const ref = useRef({ onChange, onCommit: options.onCommit });\n\n useEffect(() => {\n ref.current = { onChange, onCommit: options.onCommit };\n }, [onChange]);\n\n const update = useMemo(() => {\n const { onChange, onCommit } = ref.current;\n\n const update = (value: T) => {\n onChange(value);\n setDirty(undefined);\n onCommit?.(value);\n };\n\n let delayedUpdate: (value: T) => void;\n\n if (options.debounce) {\n delayedUpdate = debounce(update, options.debounce);\n } else if (options.throttle) {\n delayedUpdate = throttle(update, options.throttle);\n } else {\n delayedUpdate = (value) => startTransition(() => update(value));\n }\n\n return (value: T) => {\n setDirty({ v: value });\n delayedUpdate(value);\n };\n }, [hash([options.debounce, options.throttle])]);\n\n return [dirty ? dirty.v : value, update];\n}\n","export function castArray<T>(value: T | T[]): T[] {\n return Array.isArray(value) ? value : [value];\n}\n","import { type ReactNode, useEffect } from 'react';\nimport { castArray } from '@lib/castArray';\nimport { hash } from '@lib/hash';\n\nexport function useUrlParamScope({\n key,\n type = 'search',\n}: {\n key: string | string[];\n type?: 'search' | 'hash';\n}) {\n useEffect(\n () => () => {\n const url = new URL(window.location.href);\n const parameters = new URLSearchParams(url[type].slice(1));\n\n for (const _key of castArray(key)) {\n parameters.delete(_key);\n }\n\n url[type] = parameters.toString();\n window.history.replaceState(null, '', url.toString());\n },\n [hash(key), type],\n );\n}\n"],"names":["castArrayPath","s","jsx","Fragment","useScope","useMemo","useState","useEffect","value","createElement","state","get","deepEqual","createContext","Scope","autobind","useContext","useStore","store","createStore","connectUrl","hash","ScopeProvider","useCache","useRef","onChange","update","debounce","throttle","startTransition"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../src/lib/wildcardMatch.ts","../../../src/react/form/formError.tsx","../../../src/react/form/formField.tsx","../../../src/react/form/form.tsx","../../../src/react/read.ts","../../../src/react/useDecoupledState.ts","../../../src/lib/castArray.ts","../../../src/react/useUrlParamScope.ts"],"sourcesContent":["import { type KeyType } from './path';\nimport { castArrayPath } from './propAccess';\n\nexport function wildcardMatch(s: KeyType[] | string, w: KeyType[] | string): boolean {\n if (typeof s === 'string') {\n s = castArrayPath(s);\n }\n\n if (typeof w === 'string') {\n w = castArrayPath(w);\n }\n\n return s.length === w.length && s.every((s, i) => w[i] === '*' || s === w[i]);\n}\n\nexport function getWildCardMatches(object: any, path: KeyType[] | string): Record<KeyType, any> {\n const matches: Record<KeyType, any> = {};\n const [first, ...rest] = castArrayPath(path);\n\n if (first === undefined) {\n return object;\n }\n\n if (!(object instanceof Object)) {\n return {};\n }\n\n if (first === '*') {\n for (const [key, value] of Object.entries(object)) {\n matches[key] = getWildCardMatches(value, rest);\n }\n } else {\n matches[first] = getWildCardMatches(object[first], rest);\n }\n\n return matches;\n}\n","import { type Form } from './form';\nimport { type PathAsString } from '@lib/path';\n\nexport type FormErrorProps<TDraft, TPath extends PathAsString<TDraft>> = {\n name: TPath;\n};\n\nexport function FormError<TDraft, TPath extends PathAsString<TDraft>>(\n this: Form<TDraft, any>,\n { name }: FormErrorProps<TDraft, TPath>,\n) {\n const { errors, isDirty } = this.useField(name);\n\n return isDirty ? <>{errors.join(', ')}</> : null;\n}\n","import { type PathAsString } from '@index';\nimport { type Value } from '@lib/path';\nimport { useScope } from '@react/scope';\nimport {\n createElement,\n useEffect,\n useMemo,\n useState,\n type ComponentPropsWithoutRef,\n type ComponentType,\n type HTMLProps,\n} from 'react';\nimport { type Form } from './form';\n\ninterface FormFieldComponentProps<T> {\n id: string;\n value: T;\n onChange: (event: { target: { value: T } } | T | undefined, ...args: any[]) => void;\n onFocus: (...args: any[]) => void;\n onBlur: (...args: any[]) => void;\n}\n\ntype NativeInputType = 'input' | 'select' | 'textarea';\n\ntype FieldValue<T extends FormFieldComponent<any>> = ComponentPropsWithoutRef<T & 'input'> extends {\n value: infer U;\n}\n ? U\n : ComponentPropsWithoutRef<T & 'input'> extends {\n value?: infer U;\n }\n ? U | undefined\n : never;\n\ntype FieldChangeValue<T extends FormFieldComponent<any>> = ComponentPropsWithoutRef<\n T & 'input'\n> extends {\n onChange?: (update: infer U) => void;\n}\n ? U extends { target: { value: infer V } }\n ? V\n : U\n : never;\n\nexport type FormFieldComponent<T> =\n | (string | number extends T ? NativeInputType : never)\n | ComponentType<FormFieldComponentProps<T>>;\n\nexport type FormFieldProps<\n TDraft,\n TPath extends PathAsString<TDraft>,\n TComponent extends FormFieldComponent<any>,\n> = {\n name: TPath;\n commitOnBlur?: boolean;\n commitDebounce?: number;\n inputFilter?: (value: FieldChangeValue<TComponent>) => boolean;\n onChange?: ComponentPropsWithoutRef<TComponent>['onChange'];\n onBlur?: ComponentPropsWithoutRef<TComponent>['onBlur'];\n} & (TComponent extends 'input' | ((props: HTMLProps<HTMLInputElement>) => JSX.Element)\n ? { component?: TComponent } | { children?: TComponent }\n : { component: TComponent } | { children: TComponent }) &\n Omit<\n ComponentPropsWithoutRef<TComponent>,\n | 'form'\n | 'name'\n | 'component'\n | 'commitOnBlur'\n | 'commitDebounce'\n | 'value'\n | 'onChange'\n | 'onBlur'\n | 'children'\n > &\n (Value<TDraft, TPath> extends FieldValue<TComponent>\n ? { serialize?: (value: Value<TDraft, TPath>) => FieldValue<TComponent> }\n : { serialize: (value: Value<TDraft, TPath>) => FieldValue<TComponent> }) &\n (FieldChangeValue<TComponent> extends Value<TDraft, TPath>\n ? { deserialize?: (value: FieldChangeValue<TComponent>) => Value<TDraft, TPath> }\n : { deserialize: (value: FieldChangeValue<TComponent>) => Value<TDraft, TPath> });\n\nexport function FormField<\n TDraft,\n TPath extends PathAsString<TDraft>,\n TComponent extends FormFieldComponent<any>,\n>(\n this: Form<TDraft, any>,\n {\n // id,\n name,\n commitOnBlur,\n commitDebounce,\n inputFilter,\n serialize = (x) => x as FieldValue<TComponent>,\n deserialize = (x) => x as Value<TDraft, TPath>,\n ...restProps\n }: FormFieldProps<TDraft, TPath, TComponent>,\n): JSX.Element {\n type T = FieldChangeValue<TComponent>;\n const id = '';\n const component = (('component' in restProps\n ? restProps.component\n : 'children' in restProps\n ? restProps.children\n : undefined) ?? 'input') as TComponent;\n\n const form = this.useForm();\n const state = useScope(this.state);\n const { value, setValue, errors } = this.useField(name);\n\n const errorString = useMemo(\n () => errors.map((error) => form.options.localizeError?.(error, name) ?? error).join('\\n'),\n [errors, form.options.localizeError],\n );\n const [localValue, setLocalValue] = useState<T>();\n const _id = useMemo(\n () =>\n id || `f${Math.random().toString(36).slice(2, 15)}${Math.random().toString(36).slice(2, 15)}`,\n\n [id],\n );\n\n useEffect(() => {\n if (localValue === undefined || !commitDebounce) {\n return;\n }\n\n const timeout = setTimeout(() => {\n setValue(deserialize(localValue));\n setLocalValue(undefined);\n }, commitDebounce);\n\n return () => clearTimeout(timeout);\n }, [localValue, commitDebounce]);\n\n useEffect(() => {\n const element = document.querySelector(\n [`#${_id} input`, `#${_id} select`, `#${_id} textarea`, `#${_id}`].join(','),\n );\n\n if (\n !(\n element instanceof HTMLInputElement ||\n element instanceof HTMLSelectElement ||\n element instanceof HTMLTextAreaElement\n )\n ) {\n return;\n }\n\n element.setCustomValidity(errorString);\n }, [_id, errorString]);\n\n const props = {\n ...restProps,\n component: undefined,\n children: undefined,\n id: _id,\n name,\n value: localValue ?? serialize(value),\n onChange: (event: { target: { value: T } } | T, ...moreArgs: any[]) => {\n const value =\n typeof event === 'object' && event !== null && 'target' in event\n ? event.target.value\n : event;\n\n if (inputFilter && !inputFilter(value)) {\n return;\n }\n\n if (commitOnBlur || commitDebounce) {\n setLocalValue(value);\n } else {\n setValue(deserialize(value));\n }\n\n restProps.onChange?.(event, ...moreArgs);\n },\n onFocus(...args: any[]) {\n state.set('touched', (touched) => {\n touched = new Set(touched);\n touched.add(_id);\n return touched;\n });\n\n restProps.onFocus?.apply(null, args);\n },\n onBlur(...args: any[]) {\n if (localValue !== undefined) {\n setValue(deserialize(localValue));\n setLocalValue(undefined);\n }\n\n restProps.onBlur?.apply(null, args);\n },\n };\n\n return createElement(component, props);\n}\n","import { Scope, type Store, connectUrl, createStore, type UrlStoreOptions } from '@core';\nimport { autobind } from '@lib/autobind';\nimport { deepEqual } from '@lib/equals';\nimport { hash } from '@lib/hash';\nimport {\n type PathAsString,\n type Value,\n type WildcardPathAsString,\n type WildcardValue,\n} from '@lib/path';\nimport { get } from '@lib/propAccess';\nimport { getWildCardMatches, wildcardMatch } from '@lib/wildcardMatch';\nimport {\n type ReactNode,\n createContext,\n useContext,\n useEffect,\n useMemo,\n type ComponentPropsWithoutRef,\n type HTMLProps,\n} from 'react';\nimport { ScopeProvider, useScope } from '../scope';\nimport { useStore, type UseStoreOptions } from '../useStore';\nimport { FormError, type FormErrorProps } from './formError';\nimport { FormField, type FormFieldComponent, type FormFieldProps } from './formField';\n\n/// /////////////////////////////////////////////////////////////////////////////\n// Form types\n/// /////////////////////////////////////////////////////////////////////////////\n\nexport interface FormOptions<TDraft, TOriginal> {\n defaultValue: TDraft;\n validations?: Validations<TDraft, TOriginal>;\n localizeError?: (error: string, field: string) => string | undefined;\n urlState?: boolean | UrlStoreOptions<TDraft>;\n}\n\nexport type Validations<TDraft, TOriginal> = {\n [P in WildcardPathAsString<TDraft>]?: Record<\n string,\n Validation<WildcardValue<TDraft, P>, TDraft, TOriginal>\n >;\n} & Record<string, Record<string, Validation<any, TDraft, TOriginal>>>;\n\nexport type Validation<TValue, TDraft, TOriginal> = (\n value: TValue,\n context: { draft: TDraft; original: TOriginal; field: PathAsString<TDraft> },\n) => boolean;\n\nexport interface Field<TDraft, TOriginal, TPath extends PathAsString<TDraft>> {\n originalValue: Value<TOriginal, TPath> | undefined;\n value: Value<TDraft, TPath>;\n setValue: (\n value: Value<TDraft, TPath> | ((value: Value<TDraft, TPath>) => Value<TDraft, TPath>),\n ) => void;\n isDirty: boolean;\n errors: string[];\n}\n\ninterface FormState<TDraft> {\n draft?: TDraft;\n touched: Set<string>;\n errors: Map<string, string[]>;\n hasTriggeredValidations?: boolean;\n}\n\n/// /////////////////////////////////////////////////////////////////////////////\n// Implementation\n/// /////////////////////////////////////////////////////////////////////////////\n\nfunction FormContainer({\n form,\n ...formProps\n}: { form: Form<any, any> } & Omit<HTMLProps<HTMLFormElement>, 'form'>) {\n const _form = form.useForm();\n\n return (\n <form\n {...formProps}\n noValidate\n onSubmit={(event) => {\n event.preventDefault();\n\n _form.validate();\n\n let button;\n\n if (\n event.nativeEvent instanceof SubmitEvent &&\n (button = event.nativeEvent.submitter) &&\n (button instanceof HTMLButtonElement || button instanceof HTMLInputElement) &&\n button.setCustomValidity\n ) {\n const errors = _form.errors.map(\n ({ field, error }) => _form.options.localizeError?.(error, field) ?? error,\n );\n button.setCustomValidity(errors.join('\\n'));\n }\n event.currentTarget.reportValidity();\n }}\n />\n );\n}\n\nfunction getFormInstance<TDraft, TOriginal extends TDraft>(\n original: TOriginal | undefined,\n options: FormOptions<TDraft, TOriginal>,\n state: Store<FormState<TDraft>>,\n) {\n const instance = {\n original,\n\n draft: state.map(\n (state) => state.draft ?? original ?? options.defaultValue,\n (draft) => (state) => ({ ...state, draft }),\n ),\n\n options,\n\n getField: <TPath extends PathAsString<TDraft>>(\n path: TPath,\n ): Field<TDraft, TOriginal, TPath> => {\n const { draft } = instance;\n\n return {\n get originalValue() {\n return original !== undefined ? get(original as any, path as any) : undefined;\n },\n\n get value() {\n return get(draft.get(), path);\n },\n\n setValue(update) {\n draft.set(path, update);\n },\n\n get isDirty() {\n const comparisonValue = this.originalValue ?? get(options.defaultValue, path);\n\n return state.get().hasTriggeredValidations || !deepEqual(comparisonValue, this.value);\n },\n\n get errors() {\n const blocks: (Validation<any, any, any> | Record<string, Validation<any, any, any>>)[] =\n Object.entries(options.validations ?? {})\n .filter(([key]) => wildcardMatch(path, key))\n .map(([, value]) => value);\n\n const value = this.value;\n const draftValue = draft.get();\n const errors: string[] = [];\n\n for (const block of blocks ?? []) {\n for (const [validationName, validate] of Object.entries(block)) {\n if (!validate(value, { draft: draftValue, original, field: path })) {\n errors.push(validationName);\n }\n }\n }\n\n return errors;\n },\n };\n },\n\n get hasChanges() {\n const { draft } = state.get();\n return !!draft && !deepEqual(draft, original ?? options.defaultValue);\n },\n\n get errors() {\n const draft = instance.draft.get();\n const errors = new Set<{ field: string; error: string }>();\n\n for (const [path, block] of Object.entries(options.validations ?? {})) {\n for (const [validationName, validate] of Object.entries(\n block as Record<string, Validation<any, any, any>>,\n )) {\n for (const [field, value] of Object.entries(getWildCardMatches(draft, path))) {\n if (!validate(value, { draft, original, field })) {\n errors.add({ field, error: validationName });\n }\n }\n }\n }\n\n return [...errors];\n },\n\n get isValid() {\n return instance.errors.length === 0;\n },\n\n validate: () => {\n state.set('hasTriggeredValidations', true);\n return instance.isValid;\n },\n\n reset() {\n state.set('draft', undefined);\n },\n };\n\n return instance;\n}\n\nexport class Form<TDraft, TOriginal extends TDraft = TDraft> {\n context = createContext({\n original: undefined as TOriginal | undefined,\n options: this.options,\n });\n\n state = new Scope<FormState<TDraft>>({\n touched: new Set(),\n errors: new Map(),\n });\n\n constructor(public readonly options: FormOptions<TDraft, TOriginal>) {\n autobind(Form);\n }\n\n useForm() {\n const { original, options } = useContext(this.context);\n const state = useScope(this.state);\n\n return useMemo(() => getFormInstance(original, options, state), [original, options, state]);\n }\n\n useFormState<S>(selector: (state: ReturnType<typeof getFormInstance<TDraft, TOriginal>>) => S) {\n const { original, options } = useContext(this.context);\n const state = useScope(this.state);\n\n return useStore(state.map(() => selector(getFormInstance(original, options, state))));\n }\n\n useField<TPath extends PathAsString<TDraft>>(path: TPath, useStoreOptions?: UseStoreOptions) {\n const form = this.useForm();\n const state = useScope(this.state);\n\n useStore(\n form.draft.map((draft) => get(draft, path)),\n useStoreOptions,\n );\n\n useStore(\n state.map((state) => state.hasTriggeredValidations),\n useStoreOptions,\n );\n\n return form.getField(path);\n }\n\n useHasChanges() {\n const form = this.useForm();\n\n return useStore(form.draft.map(() => form.hasChanges));\n }\n\n useIsValid() {\n const form = this.useForm();\n\n return useStore(form.draft.map(() => form.isValid));\n }\n\n // ///////////////////////////////////////////////////////////////////////////\n // React Components\n // ///////////////////////////////////////////////////////////////////////////\n\n Form({\n original,\n defaultValue,\n validations,\n localizeError,\n urlState,\n ...formProps\n }: {\n original?: TOriginal;\n } & Partial<FormOptions<TDraft, TOriginal>> &\n Omit<HTMLProps<HTMLFormElement>, 'defaultValue'>) {\n const value = useMemo(\n () => ({\n original,\n options: {\n defaultValue: { ...this.options.defaultValue, ...defaultValue },\n validations: { ...this.options.validations, ...validations } as Validations<\n TDraft,\n TOriginal\n >,\n localizeError: localizeError ?? this.options.localizeError,\n },\n }),\n [original, defaultValue, validations],\n );\n\n const store = useMemo(() => {\n return createStore(this.state.defaultValue);\n }, []);\n\n useEffect(() => {\n if (urlState) {\n return connectUrl(\n store.map('draft'),\n typeof urlState === 'object' ? urlState : { key: 'form' },\n );\n }\n\n return undefined;\n }, [store, hash(urlState)]);\n\n return (\n <this.context.Provider value={value}>\n <ScopeProvider scope={this.state} store={store}>\n <FormContainer {...formProps} form={this} />\n </ScopeProvider>\n </this.context.Provider>\n );\n }\n\n Subscribe<S>({\n selector,\n children,\n }: {\n selector: (form: ReturnType<typeof getFormInstance<TDraft, TOriginal>>) => S;\n children: (selectedState: S) => ReactNode;\n }) {\n const selectedState = this.useFormState(selector);\n return <>{children(selectedState)}</>;\n }\n\n Field<\n TPath extends PathAsString<TDraft>,\n TComponent extends FormFieldComponent<any> = (\n props: ComponentPropsWithoutRef<'input'>,\n ) => JSX.Element,\n >(props: FormFieldProps<TDraft, TPath, TComponent>): JSX.Element {\n return Reflect.apply(FormField, this, [props]);\n }\n\n Error<TPath extends PathAsString<TDraft>>({ name }: FormErrorProps<TDraft, TPath>) {\n return Reflect.apply(FormError, this, [{ name }]);\n }\n}\n\nexport function createForm<TDraft, TOriginal extends TDraft = TDraft>(\n options: FormOptions<TDraft, TOriginal>,\n) {\n return new Form(options);\n}\n","import { useCache } from './useCache';\nimport type { UseStoreOptions } from './useStore';\nimport type { Cache } from '@core';\n\nexport function read<T>(cache: Cache<T>, options?: UseStoreOptions): T {\n const { status, value, error } = useCache(cache, options);\n\n if (status === 'value') {\n return value;\n }\n\n if (status === 'error') {\n throw error;\n }\n\n throw cache.state.once((state) => state.status !== 'pending');\n}\n","import { startTransition, useEffect, useMemo, useRef, useState } from 'react';\nimport { type Duration } from '@core';\nimport { debounce } from '@lib/debounce';\nimport { hash } from '@lib/hash';\nimport { throttle } from '@lib/throttle';\n\nexport interface UseDecoupledStateOptions<T> {\n debounce?: Duration;\n throttle?: Duration;\n onCommit?: (value: T) => void;\n}\n\nexport function useDecoupledState<T>(\n value: T,\n onChange: (value: T) => void,\n options: UseDecoupledStateOptions<T> = {},\n): [state: T, setState: (value: T) => void] {\n const [dirty, setDirty] = useState<{ v: T }>();\n const ref = useRef({ onChange, onCommit: options.onCommit });\n\n useEffect(() => {\n ref.current = { onChange, onCommit: options.onCommit };\n }, [onChange]);\n\n const update = useMemo(() => {\n const { onChange, onCommit } = ref.current;\n\n const update = (value: T) => {\n onChange(value);\n setDirty(undefined);\n onCommit?.(value);\n };\n\n let delayedUpdate: (value: T) => void;\n\n if (options.debounce) {\n delayedUpdate = debounce(update, options.debounce);\n } else if (options.throttle) {\n delayedUpdate = throttle(update, options.throttle);\n } else {\n delayedUpdate = (value) => startTransition(() => update(value));\n }\n\n return (value: T) => {\n setDirty({ v: value });\n delayedUpdate(value);\n };\n }, [hash([options.debounce, options.throttle])]);\n\n return [dirty ? dirty.v : value, update];\n}\n","export function castArray<T>(value: T | T[]): T[] {\n return Array.isArray(value) ? value : [value];\n}\n","import { type ReactNode, useEffect } from 'react';\nimport { castArray } from '@lib/castArray';\nimport { hash } from '@lib/hash';\n\nexport function useUrlParamScope({\n key,\n type = 'search',\n}: {\n key: string | string[];\n type?: 'search' | 'hash';\n}) {\n useEffect(\n () => () => {\n const url = new URL(window.location.href);\n const parameters = new URLSearchParams(url[type].slice(1));\n\n for (const _key of castArray(key)) {\n parameters.delete(_key);\n }\n\n url[type] = parameters.toString();\n window.history.replaceState(null, '', url.toString());\n },\n [hash(key), type],\n );\n}\n"],"names":["s","value","state","onChange","update"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../src/lib/wildcardMatch.ts","../../../src/react/form/formError.tsx","../../../src/react/form/formField.tsx","../../../src/react/form/form.tsx","../../../src/react/read.ts","../../../src/react/useDecoupledState.ts","../../../src/lib/castArray.ts","../../../src/react/useUrlParamScope.ts"],"sourcesContent":["import { type KeyType } from './path';\nimport { castArrayPath } from './propAccess';\n\nexport function wildcardMatch(s: KeyType[] | string, w: KeyType[] | string): boolean {\n if (typeof s === 'string') {\n s = castArrayPath(s);\n }\n\n if (typeof w === 'string') {\n w = castArrayPath(w);\n }\n\n return s.length === w.length && s.every((s, i) => w[i] === '*' || s === w[i]);\n}\n\nexport function getWildCardMatches(object: any, path: KeyType[] | string): Record<KeyType, any> {\n const matches: Record<KeyType, any> = {};\n const [first, ...rest] = castArrayPath(path);\n\n if (first === undefined) {\n return object;\n }\n\n if (!(object instanceof Object)) {\n return {};\n }\n\n if (first === '*') {\n for (const [key, value] of Object.entries(object)) {\n matches[key] = getWildCardMatches(value, rest);\n }\n } else {\n matches[first] = getWildCardMatches(object[first], rest);\n }\n\n return matches;\n}\n","import { type Form } from './form';\nimport { type PathAsString } from '@lib/path';\n\nexport type FormErrorProps<TDraft, TPath extends PathAsString<TDraft>> = {\n name: TPath;\n};\n\nexport function FormError<TDraft, TPath extends PathAsString<TDraft>>(\n this: Form<TDraft, any>,\n { name }: FormErrorProps<TDraft, TPath>,\n) {\n const { errors, isDirty } = this.useField(name);\n\n return isDirty ? <>{errors.join(', ')}</> : null;\n}\n","import { type PathAsString } from '@index';\nimport { type Value } from '@lib/path';\nimport { useScope } from '@react/scope';\nimport {\n createElement,\n useEffect,\n useMemo,\n useState,\n type ComponentPropsWithoutRef,\n type ComponentType,\n type HTMLProps,\n} from 'react';\nimport { type Form } from './form';\n\ninterface FormFieldComponentProps<TValue, TPath> {\n id: string;\n name: TPath;\n value: TValue;\n onChange: (event: { target: { value: TValue } } | TValue | undefined, ...args: any[]) => void;\n onFocus: (...args: any[]) => void;\n onBlur: (...args: any[]) => void;\n}\n\ntype NativeInputType = 'input' | 'select' | 'textarea';\n\ntype FieldValue<T extends FormFieldComponent<any, any>> = ComponentPropsWithoutRef<\n T & 'input'\n> extends {\n value: infer U;\n}\n ? U\n : ComponentPropsWithoutRef<T & 'input'> extends {\n value?: infer U;\n }\n ? U | undefined\n : never;\n\ntype FieldChangeValue<T extends FormFieldComponent<any, any>> = ComponentPropsWithoutRef<\n T & 'input'\n> extends {\n onChange?: (update: infer U) => void;\n}\n ? U extends { target: { value: infer V } }\n ? V\n : U\n : never;\n\ntype A = FieldChangeValue<'input'>;\n\nexport type FormFieldComponent<TValue, TPath> =\n | (string | number extends TValue ? NativeInputType : never)\n | ComponentType<FormFieldComponentProps<TValue, TPath>>;\n\nexport type FormFieldProps<\n TDraft,\n TPath extends PathAsString<TDraft>,\n TComponent extends FormFieldComponent<any, TPath>,\n> = {\n name: TPath;\n commitOnBlur?: boolean;\n commitDebounce?: number;\n inputFilter?: (value: FieldChangeValue<TComponent>) => boolean;\n onChange?: ComponentPropsWithoutRef<TComponent>['onChange'];\n onBlur?: ComponentPropsWithoutRef<TComponent>['onBlur'];\n} & (TComponent extends\n | 'input'\n | ((props: ComponentPropsWithoutRef<'input'> & { name: TPath }) => JSX.Element)\n ? { component?: TComponent } | { children?: TComponent }\n : { component: TComponent } | { children: TComponent }) &\n Omit<\n ComponentPropsWithoutRef<TComponent>,\n | 'form'\n | 'name'\n | 'component'\n | 'commitOnBlur'\n | 'commitDebounce'\n | 'value'\n | 'onChange'\n | 'onBlur'\n | 'children'\n > &\n (Value<TDraft, TPath> extends FieldValue<TComponent>\n ? { serialize?: (value: Value<TDraft, TPath>) => FieldValue<TComponent> }\n : { serialize: (value: Value<TDraft, TPath>) => FieldValue<TComponent> }) &\n (FieldChangeValue<TComponent> extends Value<TDraft, TPath>\n ? { deserialize?: (value: FieldChangeValue<TComponent>) => Value<TDraft, TPath> }\n : { deserialize: (value: FieldChangeValue<TComponent>) => Value<TDraft, TPath> });\n\nexport function FormField<\n TDraft,\n TPath extends PathAsString<TDraft>,\n TComponent extends FormFieldComponent<any, any>,\n>(\n this: Form<TDraft, any>,\n {\n // id,\n name,\n commitOnBlur,\n commitDebounce,\n inputFilter,\n serialize = (x) => x as FieldValue<TComponent>,\n deserialize = (x) => x as Value<TDraft, TPath>,\n ...restProps\n }: FormFieldProps<TDraft, TPath, TComponent>,\n): JSX.Element {\n type T = FieldChangeValue<TComponent>;\n const id = '';\n const component = (('component' in restProps\n ? restProps.component\n : 'children' in restProps\n ? restProps.children\n : undefined) ?? 'input') as TComponent;\n\n const form = this.useForm();\n const state = useScope(this.state);\n const { value, setValue, errors } = this.useField(name);\n\n const errorString = useMemo(\n () => errors.map((error) => form.options.localizeError?.(error, name) ?? error).join('\\n'),\n [errors, form.options.localizeError],\n );\n const [localValue, setLocalValue] = useState<T>();\n const _id = useMemo(\n () =>\n id || `f${Math.random().toString(36).slice(2, 15)}${Math.random().toString(36).slice(2, 15)}`,\n\n [id],\n );\n\n useEffect(() => {\n if (localValue === undefined || !commitDebounce) {\n return;\n }\n\n const timeout = setTimeout(() => {\n setValue(deserialize(localValue));\n setLocalValue(undefined);\n }, commitDebounce);\n\n return () => clearTimeout(timeout);\n }, [localValue, commitDebounce]);\n\n useEffect(() => {\n const element = document.querySelector(\n [`#${_id} input`, `#${_id} select`, `#${_id} textarea`, `#${_id}`].join(','),\n );\n\n if (\n !(\n element instanceof HTMLInputElement ||\n element instanceof HTMLSelectElement ||\n element instanceof HTMLTextAreaElement\n )\n ) {\n return;\n }\n\n element.setCustomValidity(errorString);\n }, [_id, errorString]);\n\n const props = {\n ...restProps,\n component: undefined,\n children: undefined,\n id: _id,\n name,\n value: localValue ?? serialize(value),\n onChange: (event: { target: { value: T } } | T, ...moreArgs: any[]) => {\n const value =\n typeof event === 'object' && event !== null && 'target' in event\n ? event.target.value\n : event;\n\n if (inputFilter && !inputFilter(value)) {\n return;\n }\n\n if (commitOnBlur || commitDebounce) {\n setLocalValue(value);\n } else {\n setValue(deserialize(value));\n }\n\n restProps.onChange?.(event, ...moreArgs);\n },\n onFocus(...args: any[]) {\n state.set('touched', (touched) => {\n touched = new Set(touched);\n touched.add(_id);\n return touched;\n });\n\n restProps.onFocus?.apply(null, args);\n },\n onBlur(...args: any[]) {\n if (localValue !== undefined) {\n setValue(deserialize(localValue));\n setLocalValue(undefined);\n }\n\n restProps.onBlur?.apply(null, args);\n },\n };\n\n return createElement(component, props);\n}\n","import { Scope, type Store, connectUrl, createStore, type UrlStoreOptions } from '@core';\nimport { autobind } from '@lib/autobind';\nimport { deepEqual } from '@lib/equals';\nimport { hash } from '@lib/hash';\nimport {\n type PathAsString,\n type Value,\n type WildcardPathAsString,\n type WildcardValue,\n} from '@lib/path';\nimport { get } from '@lib/propAccess';\nimport { getWildCardMatches, wildcardMatch } from '@lib/wildcardMatch';\nimport {\n type ReactNode,\n createContext,\n useContext,\n useEffect,\n useMemo,\n type ComponentPropsWithoutRef,\n type HTMLProps,\n} from 'react';\nimport { ScopeProvider, useScope } from '../scope';\nimport { useStore, type UseStoreOptions } from '../useStore';\nimport { FormError, type FormErrorProps } from './formError';\nimport { FormField, type FormFieldComponent, type FormFieldProps } from './formField';\n\n/// /////////////////////////////////////////////////////////////////////////////\n// Form types\n/// /////////////////////////////////////////////////////////////////////////////\n\nexport interface FormOptions<TDraft, TOriginal> {\n defaultValue: TDraft;\n validations?: Validations<TDraft, TOriginal>;\n localizeError?: (error: string, field: string) => string | undefined;\n urlState?: boolean | UrlStoreOptions<TDraft>;\n}\n\nexport type Validations<TDraft, TOriginal> = {\n [P in WildcardPathAsString<TDraft>]?: Record<\n string,\n Validation<WildcardValue<TDraft, P>, TDraft, TOriginal>\n >;\n} & Record<string, Record<string, Validation<any, TDraft, TOriginal>>>;\n\nexport type Validation<TValue, TDraft, TOriginal> = (\n value: TValue,\n context: { draft: TDraft; original: TOriginal; field: PathAsString<TDraft> },\n) => boolean;\n\nexport interface Field<TDraft, TOriginal, TPath extends PathAsString<TDraft>> {\n originalValue: Value<TOriginal, TPath> | undefined;\n value: Value<TDraft, TPath>;\n setValue: (\n value: Value<TDraft, TPath> | ((value: Value<TDraft, TPath>) => Value<TDraft, TPath>),\n ) => void;\n isDirty: boolean;\n errors: string[];\n}\n\ninterface FormState<TDraft> {\n draft?: TDraft;\n touched: Set<string>;\n errors: Map<string, string[]>;\n hasTriggeredValidations?: boolean;\n}\n\n/// /////////////////////////////////////////////////////////////////////////////\n// Implementation\n/// /////////////////////////////////////////////////////////////////////////////\n\nfunction FormContainer({\n form,\n ...formProps\n}: { form: Form<any, any> } & Omit<HTMLProps<HTMLFormElement>, 'form'>) {\n const _form = form.useForm();\n\n return (\n <form\n {...formProps}\n noValidate\n onSubmit={(event) => {\n event.preventDefault();\n\n _form.validate();\n\n let button;\n\n if (\n event.nativeEvent instanceof SubmitEvent &&\n (button = event.nativeEvent.submitter) &&\n (button instanceof HTMLButtonElement || button instanceof HTMLInputElement) &&\n button.setCustomValidity\n ) {\n const errors = _form.errors.map(\n ({ field, error }) => _form.options.localizeError?.(error, field) ?? error,\n );\n button.setCustomValidity(errors.join('\\n'));\n }\n event.currentTarget.reportValidity();\n }}\n />\n );\n}\n\nfunction getFormInstance<TDraft, TOriginal extends TDraft>(\n original: TOriginal | undefined,\n options: FormOptions<TDraft, TOriginal>,\n state: Store<FormState<TDraft>>,\n) {\n const instance = {\n original,\n\n draft: state.map(\n (state) => state.draft ?? original ?? options.defaultValue,\n (draft) => (state) => ({ ...state, draft }),\n ),\n\n options,\n\n getField: <TPath extends PathAsString<TDraft>>(\n path: TPath,\n ): Field<TDraft, TOriginal, TPath> => {\n const { draft } = instance;\n\n return {\n get originalValue() {\n return original !== undefined ? get(original as any, path as any) : undefined;\n },\n\n get value() {\n return get(draft.get(), path);\n },\n\n setValue(update) {\n draft.set(path, update);\n },\n\n get isDirty() {\n const comparisonValue = this.originalValue ?? get(options.defaultValue, path);\n\n return state.get().hasTriggeredValidations || !deepEqual(comparisonValue, this.value);\n },\n\n get errors() {\n const blocks: (Validation<any, any, any> | Record<string, Validation<any, any, any>>)[] =\n Object.entries(options.validations ?? {})\n .filter(([key]) => wildcardMatch(path, key))\n .map(([, value]) => value);\n\n const value = this.value;\n const draftValue = draft.get();\n const errors: string[] = [];\n\n for (const block of blocks ?? []) {\n for (const [validationName, validate] of Object.entries(block)) {\n if (!validate(value, { draft: draftValue, original, field: path })) {\n errors.push(validationName);\n }\n }\n }\n\n return errors;\n },\n };\n },\n\n get hasChanges() {\n const { draft } = state.get();\n return !!draft && !deepEqual(draft, original ?? options.defaultValue);\n },\n\n get errors() {\n const draft = instance.draft.get();\n const errors = new Set<{ field: string; error: string }>();\n\n for (const [path, block] of Object.entries(options.validations ?? {})) {\n for (const [validationName, validate] of Object.entries(\n block as Record<string, Validation<any, any, any>>,\n )) {\n for (const [field, value] of Object.entries(getWildCardMatches(draft, path))) {\n if (!validate(value, { draft, original, field })) {\n errors.add({ field, error: validationName });\n }\n }\n }\n }\n\n return [...errors];\n },\n\n get isValid() {\n return instance.errors.length === 0;\n },\n\n validate: () => {\n state.set('hasTriggeredValidations', true);\n return instance.isValid;\n },\n\n reset() {\n state.set('draft', undefined);\n },\n };\n\n return instance;\n}\n\nexport class Form<TDraft, TOriginal extends TDraft = TDraft> {\n context = createContext({\n original: undefined as TOriginal | undefined,\n options: this.options,\n });\n\n state = new Scope<FormState<TDraft>>({\n touched: new Set(),\n errors: new Map(),\n });\n\n constructor(public readonly options: FormOptions<TDraft, TOriginal>) {\n autobind(Form);\n }\n\n useForm() {\n const { original, options } = useContext(this.context);\n const state = useScope(this.state);\n\n return useMemo(() => getFormInstance(original, options, state), [original, options, state]);\n }\n\n useFormState<S>(selector: (state: ReturnType<typeof getFormInstance<TDraft, TOriginal>>) => S) {\n const { original, options } = useContext(this.context);\n const state = useScope(this.state);\n\n return useStore(state.map(() => selector(getFormInstance(original, options, state))));\n }\n\n useField<TPath extends PathAsString<TDraft>>(path: TPath, useStoreOptions?: UseStoreOptions) {\n const form = this.useForm();\n const state = useScope(this.state);\n\n useStore(\n form.draft.map((draft) => get(draft, path)),\n useStoreOptions,\n );\n\n useStore(\n state.map((state) => state.hasTriggeredValidations),\n useStoreOptions,\n );\n\n return form.getField(path);\n }\n\n useHasChanges() {\n const form = this.useForm();\n\n return useStore(form.draft.map(() => form.hasChanges));\n }\n\n useIsValid() {\n const form = this.useForm();\n\n return useStore(form.draft.map(() => form.isValid));\n }\n\n // ///////////////////////////////////////////////////////////////////////////\n // React Components\n // ///////////////////////////////////////////////////////////////////////////\n\n Form({\n original,\n defaultValue,\n validations,\n localizeError,\n urlState,\n ...formProps\n }: {\n original?: TOriginal;\n } & Partial<FormOptions<TDraft, TOriginal>> &\n Omit<HTMLProps<HTMLFormElement>, 'defaultValue'>) {\n const value = useMemo(\n () => ({\n original,\n options: {\n defaultValue: { ...this.options.defaultValue, ...defaultValue },\n validations: { ...this.options.validations, ...validations } as Validations<\n TDraft,\n TOriginal\n >,\n localizeError: localizeError ?? this.options.localizeError,\n },\n }),\n [original, defaultValue, validations],\n );\n\n const store = useMemo(() => {\n return createStore(this.state.defaultValue);\n }, []);\n\n useEffect(() => {\n if (urlState) {\n return connectUrl(\n store.map('draft'),\n typeof urlState === 'object' ? urlState : { key: 'form' },\n );\n }\n\n return undefined;\n }, [store, hash(urlState)]);\n\n return (\n <this.context.Provider value={value}>\n <ScopeProvider scope={this.state} store={store}>\n <FormContainer {...formProps} form={this} />\n </ScopeProvider>\n </this.context.Provider>\n );\n }\n\n Subscribe<S>({\n selector,\n children,\n }: {\n selector: (form: ReturnType<typeof getFormInstance<TDraft, TOriginal>>) => S;\n children: (selectedState: S) => ReactNode;\n }) {\n const selectedState = this.useFormState(selector);\n return <>{children(selectedState)}</>;\n }\n\n Field<\n TPath extends PathAsString<TDraft>,\n TComponent extends FormFieldComponent<any, TPath> = (\n props: ComponentPropsWithoutRef<'input'> & { name: TPath },\n ) => JSX.Element,\n >(props: FormFieldProps<TDraft, TPath, TComponent>): JSX.Element {\n return Reflect.apply(FormField, this, [props]);\n }\n\n Error<TPath extends PathAsString<TDraft>>({ name }: FormErrorProps<TDraft, TPath>) {\n return Reflect.apply(FormError, this, [{ name }]);\n }\n}\n\nexport function createForm<TDraft, TOriginal extends TDraft = TDraft>(\n options: FormOptions<TDraft, TOriginal>,\n) {\n return new Form(options);\n}\n","import { useCache } from './useCache';\nimport type { UseStoreOptions } from './useStore';\nimport type { Cache } from '@core';\n\nexport function read<T>(cache: Cache<T>, options?: UseStoreOptions): T {\n const { status, value, error } = useCache(cache, options);\n\n if (status === 'value') {\n return value;\n }\n\n if (status === 'error') {\n throw error;\n }\n\n throw cache.state.once((state) => state.status !== 'pending');\n}\n","import { startTransition, useEffect, useMemo, useRef, useState } from 'react';\nimport { type Duration } from '@core';\nimport { debounce } from '@lib/debounce';\nimport { hash } from '@lib/hash';\nimport { throttle } from '@lib/throttle';\n\nexport interface UseDecoupledStateOptions<T> {\n debounce?: Duration;\n throttle?: Duration;\n onCommit?: (value: T) => void;\n}\n\nexport function useDecoupledState<T>(\n value: T,\n onChange: (value: T) => void,\n options: UseDecoupledStateOptions<T> = {},\n): [state: T, setState: (value: T) => void] {\n const [dirty, setDirty] = useState<{ v: T }>();\n const ref = useRef({ onChange, onCommit: options.onCommit });\n\n useEffect(() => {\n ref.current = { onChange, onCommit: options.onCommit };\n }, [onChange]);\n\n const update = useMemo(() => {\n const { onChange, onCommit } = ref.current;\n\n const update = (value: T) => {\n onChange(value);\n setDirty(undefined);\n onCommit?.(value);\n };\n\n let delayedUpdate: (value: T) => void;\n\n if (options.debounce) {\n delayedUpdate = debounce(update, options.debounce);\n } else if (options.throttle) {\n delayedUpdate = throttle(update, options.throttle);\n } else {\n delayedUpdate = (value) => startTransition(() => update(value));\n }\n\n return (value: T) => {\n setDirty({ v: value });\n delayedUpdate(value);\n };\n }, [hash([options.debounce, options.throttle])]);\n\n return [dirty ? dirty.v : value, update];\n}\n","export function castArray<T>(value: T | T[]): T[] {\n return Array.isArray(value) ? value : [value];\n}\n","import { type ReactNode, useEffect } from 'react';\nimport { castArray } from '@lib/castArray';\nimport { hash } from '@lib/hash';\n\nexport function useUrlParamScope({\n key,\n type = 'search',\n}: {\n key: string | string[];\n type?: 'search' | 'hash';\n}) {\n useEffect(\n () => () => {\n const url = new URL(window.location.href);\n const parameters = new URLSearchParams(url[type].slice(1));\n\n for (const _key of castArray(key)) {\n parameters.delete(_key);\n }\n\n url[type] = parameters.toString();\n window.history.replaceState(null, '', url.toString());\n },\n [hash(key), type],\n );\n}\n"],"names":["s","value","state","onChange","update"],"mappings":"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"}
|
|
@@ -78,7 +78,9 @@ export declare class Form<TDraft, TOriginal extends TDraft = TDraft> {
|
|
|
78
78
|
selector: (form: ReturnType<typeof getFormInstance<TDraft, TOriginal>>) => S;
|
|
79
79
|
children: (selectedState: S) => ReactNode;
|
|
80
80
|
}): import("react/jsx-runtime").JSX.Element;
|
|
81
|
-
Field<TPath extends PathAsString<TDraft>, TComponent extends FormFieldComponent<any> = (props: ComponentPropsWithoutRef<'input'>
|
|
81
|
+
Field<TPath extends PathAsString<TDraft>, TComponent extends FormFieldComponent<any, TPath> = (props: ComponentPropsWithoutRef<'input'> & {
|
|
82
|
+
name: TPath;
|
|
83
|
+
}) => JSX.Element>(props: FormFieldProps<TDraft, TPath, TComponent>): JSX.Element;
|
|
82
84
|
Error<TPath extends PathAsString<TDraft>>({ name }: FormErrorProps<TDraft, TPath>): any;
|
|
83
85
|
}
|
|
84
86
|
export declare function createForm<TDraft, TOriginal extends TDraft = TDraft>(options: FormOptions<TDraft, TOriginal>): Form<TDraft, TOriginal>;
|
|
@@ -1,40 +1,43 @@
|
|
|
1
1
|
import { type PathAsString } from '../../index';
|
|
2
2
|
import { type Value } from '../../lib/path';
|
|
3
|
-
import { type ComponentPropsWithoutRef, type ComponentType
|
|
3
|
+
import { type ComponentPropsWithoutRef, type ComponentType } from 'react';
|
|
4
4
|
import { type Form } from './form';
|
|
5
|
-
interface FormFieldComponentProps<
|
|
5
|
+
interface FormFieldComponentProps<TValue, TPath> {
|
|
6
6
|
id: string;
|
|
7
|
-
|
|
7
|
+
name: TPath;
|
|
8
|
+
value: TValue;
|
|
8
9
|
onChange: (event: {
|
|
9
10
|
target: {
|
|
10
|
-
value:
|
|
11
|
+
value: TValue;
|
|
11
12
|
};
|
|
12
|
-
} |
|
|
13
|
+
} | TValue | undefined, ...args: any[]) => void;
|
|
13
14
|
onFocus: (...args: any[]) => void;
|
|
14
15
|
onBlur: (...args: any[]) => void;
|
|
15
16
|
}
|
|
16
17
|
type NativeInputType = 'input' | 'select' | 'textarea';
|
|
17
|
-
type FieldValue<T extends FormFieldComponent<any>> = ComponentPropsWithoutRef<T & 'input'> extends {
|
|
18
|
+
type FieldValue<T extends FormFieldComponent<any, any>> = ComponentPropsWithoutRef<T & 'input'> extends {
|
|
18
19
|
value: infer U;
|
|
19
20
|
} ? U : ComponentPropsWithoutRef<T & 'input'> extends {
|
|
20
21
|
value?: infer U;
|
|
21
22
|
} ? U | undefined : never;
|
|
22
|
-
type FieldChangeValue<T extends FormFieldComponent<any>> = ComponentPropsWithoutRef<T & 'input'> extends {
|
|
23
|
+
type FieldChangeValue<T extends FormFieldComponent<any, any>> = ComponentPropsWithoutRef<T & 'input'> extends {
|
|
23
24
|
onChange?: (update: infer U) => void;
|
|
24
25
|
} ? U extends {
|
|
25
26
|
target: {
|
|
26
27
|
value: infer V;
|
|
27
28
|
};
|
|
28
29
|
} ? V : U : never;
|
|
29
|
-
export type FormFieldComponent<
|
|
30
|
-
export type FormFieldProps<TDraft, TPath extends PathAsString<TDraft>, TComponent extends FormFieldComponent<any>> = {
|
|
30
|
+
export type FormFieldComponent<TValue, TPath> = (string | number extends TValue ? NativeInputType : never) | ComponentType<FormFieldComponentProps<TValue, TPath>>;
|
|
31
|
+
export type FormFieldProps<TDraft, TPath extends PathAsString<TDraft>, TComponent extends FormFieldComponent<any, TPath>> = {
|
|
31
32
|
name: TPath;
|
|
32
33
|
commitOnBlur?: boolean;
|
|
33
34
|
commitDebounce?: number;
|
|
34
35
|
inputFilter?: (value: FieldChangeValue<TComponent>) => boolean;
|
|
35
36
|
onChange?: ComponentPropsWithoutRef<TComponent>['onChange'];
|
|
36
37
|
onBlur?: ComponentPropsWithoutRef<TComponent>['onBlur'];
|
|
37
|
-
} & (TComponent extends 'input' | ((props:
|
|
38
|
+
} & (TComponent extends 'input' | ((props: ComponentPropsWithoutRef<'input'> & {
|
|
39
|
+
name: TPath;
|
|
40
|
+
}) => JSX.Element) ? {
|
|
38
41
|
component?: TComponent;
|
|
39
42
|
} | {
|
|
40
43
|
children?: TComponent;
|
|
@@ -51,5 +54,5 @@ export type FormFieldProps<TDraft, TPath extends PathAsString<TDraft>, TComponen
|
|
|
51
54
|
} : {
|
|
52
55
|
deserialize: (value: FieldChangeValue<TComponent>) => Value<TDraft, TPath>;
|
|
53
56
|
});
|
|
54
|
-
export declare function FormField<TDraft, TPath extends PathAsString<TDraft>, TComponent extends FormFieldComponent<any>>(this: Form<TDraft, any>, { name, commitOnBlur, commitDebounce, inputFilter, serialize, deserialize, ...restProps }: FormFieldProps<TDraft, TPath, TComponent>): JSX.Element;
|
|
57
|
+
export declare function FormField<TDraft, TPath extends PathAsString<TDraft>, TComponent extends FormFieldComponent<any, any>>(this: Form<TDraft, any>, { name, commitOnBlur, commitDebounce, inputFilter, serialize, deserialize, ...restProps }: FormFieldProps<TDraft, TPath, TComponent>): JSX.Element;
|
|
55
58
|
export {};
|