gform-react 2.5.4 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/gform-react.development.js +93 -78
- package/dist/cjs/gform-react.development.js.map +1 -1
- package/dist/cjs/gform-react.production.js +1 -1
- package/dist/cjs/gform-react.production.js.map +1 -1
- package/dist/cjs/index.js +8 -7
- package/dist/esm/GForm.development.js +160 -0
- package/dist/esm/GForm.development.js.map +1 -0
- package/dist/esm/GForm.production.js +1 -1
- package/dist/esm/GForm.production.js.map +1 -1
- package/dist/esm/GInput.development.js +105 -0
- package/dist/esm/GInput.development.js.map +1 -0
- package/dist/esm/GInput.production.js +1 -1
- package/dist/esm/GInput.production.js.map +1 -1
- package/dist/esm/GValidator.development.js +118 -0
- package/dist/esm/GValidator.development.js.map +1 -0
- package/dist/esm/GValidator.production.js +1 -1
- package/dist/esm/GValidator.production.js.map +1 -1
- package/dist/esm/index.development.js +4 -761
- package/dist/esm/index.js +4 -4
- package/dist/esm/shared.development.js +411 -0
- package/dist/esm/shared.development.js.map +1 -0
- package/dist/esm/shared.production.js +1 -1
- package/dist/esm/shared.production.js.map +1 -1
- package/dist/esm/useFormSelector.development.js +6 -0
- package/dist/esm/useFormSelector.development.js.map +1 -0
- package/dist/esm/useFormSelector.production.js +2 -0
- package/dist/esm/useFormSelector.production.js.map +1 -0
- package/dist/index.d.ts +260 -291
- package/native/dist/cjs/{gform-react-native.development.js → gform-react.development.js} +94 -79
- package/native/dist/cjs/gform-react.development.js.map +1 -0
- package/native/dist/cjs/gform-react.production.js +2 -0
- package/native/dist/cjs/gform-react.production.js.map +1 -0
- package/native/dist/cjs/index.js +8 -7
- package/native/dist/esm/RNGForm.development.js +105 -0
- package/native/dist/esm/RNGForm.development.js.map +1 -0
- package/native/dist/esm/RNGForm.production.js +1 -1
- package/native/dist/esm/RNGForm.production.js.map +1 -1
- package/native/dist/esm/RNGInput.development.js +83 -0
- package/native/dist/esm/RNGInput.development.js.map +1 -0
- package/native/dist/esm/RNGInput.production.js +1 -1
- package/native/dist/esm/RNGInput.production.js.map +1 -1
- package/native/dist/esm/index.development.js +2 -592
- package/native/dist/esm/index.js +2 -2
- package/native/dist/esm/shared.development.js +431 -0
- package/native/dist/esm/shared.development.js.map +1 -0
- package/native/dist/esm/shared.production.js +1 -1
- package/native/dist/esm/shared.production.js.map +1 -1
- package/native/dist/index.d.ts +183 -73
- package/package.json +10 -7
- package/dist/esm/index.development.js.map +0 -1
- package/native/dist/cjs/gform-react-native.development.js.map +0 -1
- package/native/dist/cjs/gform-react-native.production.js +0 -2
- package/native/dist/cjs/gform-react-native.production.js.map +0 -1
- package/native/dist/esm/index.development.js.map +0 -1
- package/native/package.json +0 -15
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.production.js","sources":["../../../src/helpers.ts","../../../src/useFormHandlers.ts","../../../src/form-context.tsx","../../../src/selectors.ts"],"sourcesContent":["import type { GInputInitialState, GInputProps, GInputState, GInputStateMutable } from './fields';\r\nimport type { GChangeEvent, GDOMElement, IForm } from './form';\r\nimport type {GFormState, InitialState, RawData, ToFormDataOptions, ToRawDataOptions, ToURLSearchParamsOptions} from './state';\r\nimport type {ReactElement, ReactNode} from \"react\";\r\n\r\nexport const isObject = (o: any): o is object => (o && typeof o === 'object' && !Array.isArray(o));\r\n\r\nconst defaultFieldProps: { [key: string]: { value: string | number | boolean } } = {\r\n text: { value: '' },\r\n checkbox: { value: false },\r\n number: { value: 0 }\r\n};\r\n\r\nconst typeValueDict: { [key: string]: keyof HTMLFormElement | GDOMElement } = {\r\n checkbox: 'checked',\r\n number: 'valueAsNumber',\r\n};\r\n\r\nconst generateId = () => (+new Date()).toString(36) + (1 - Math.random()).toString(36).substring(2, 16);\r\n\r\nexport const _buildFormInitialValues = <T>(rows: ReactNode | ReactNode[] = []): InitialState<T> => {\r\n const fields: { [key: string]: GInputInitialState } = {};\r\n\r\n if (!Array.isArray(rows)) rows = [rows];\r\n\r\n if (__DEBUG__) {\r\n console.log('[buildFormInitialValues] -', 'building initial values for ', rows);\r\n }\r\n\r\n for (const row of rows) {\r\n const inputConfigs = _findInputs(row as any);\r\n\r\n inputConfigs.forEach(config => {\r\n if (__DEBUG__) {\r\n console.log('[buildFormInitialValues] -', 'building input', `(${config.formKey})`, config);\r\n }\r\n\r\n if (__DEV__ && fields[config.formKey]) {\r\n console.warn(`DEV ONLY - [Duplicate Keys] - field with key '${config.formKey}' has already been defined.`);\r\n }\r\n\r\n const { required = false, max, maxLength, min, minLength, step, pattern, type = 'text', defaultValue, value, checked, defaultChecked, formKey, debounce, validatorKey } = config;\r\n const defaultProps = defaultFieldProps[type] || defaultFieldProps.text;\r\n const inputValue = value || defaultValue || checked || defaultChecked || defaultProps.value;\r\n\r\n fields[config.formKey] = {\r\n formKey,\r\n type,\r\n required,\r\n max,\r\n maxLength,\r\n min,\r\n minLength,\r\n step,\r\n pattern,\r\n value: inputValue,\r\n validatorKey,\r\n debounce,\r\n dirty: false,\r\n touched: false,\r\n gid: generateId()\r\n };\r\n\r\n Object.keys(fields[config.formKey]).forEach(key => {\r\n if (typeof fields[config.formKey][key] === 'undefined') delete fields[config.formKey][key];\r\n });\r\n });\r\n }\r\n\r\n return { fields: fields as IForm<T>, key: generateId() };\r\n};\r\n\r\nconst _findInputs = (root?: ReactElement<any> | ReactElement<any>[] | undefined[], total: (GInputProps & GInputStateMutable)[] = []): (GInputProps & GInputStateMutable)[] => {\r\n if (!root) return total;\r\n\r\n if (Array.isArray(root)) {\r\n root.forEach(element => _findInputs(element, total));\r\n return total;\r\n }\r\n\r\n\r\n if (root.props?.formKey) {\r\n if (__DEBUG__) {\r\n console.log('[findInputs] -', 'input config found', `(${root.props.formKey})`);\r\n }\r\n total.push(root.props);\r\n return total;\r\n }\r\n\r\n return _findInputs(root.props?.children, total);\r\n};\r\n\r\nexport const _findValidityKey = (validity: Partial<ValidityState>, exclude: (keyof ValidityState)[] = []): keyof ValidityState | undefined => {\r\n for (const key in validity) {\r\n if (exclude.includes(key as keyof ValidityState)) continue;\r\n if (key !== 'valid' && validity[key as keyof ValidityState]) {\r\n if (__DEBUG__) {\r\n console.log('[findValidityKey] -', 'found validity key:', key);\r\n }\r\n return key as keyof ValidityState;\r\n }\r\n }\r\n};\r\n\r\nexport const _checkTypeMismatch = (input: GInputState<any>) => {\r\n const value = input.value?.toString().trim();\r\n if (!value) return false;\r\n\r\n switch (input.type) {\r\n case 'email':\r\n return !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value); // basic email pattern\r\n case 'url':\r\n try {\r\n new URL(value);\r\n return false;\r\n } catch {\r\n return true;\r\n }\r\n case 'tel':\r\n return !/^\\+?[0-9\\s\\-().]{7,}$/.test(value); // basic phone pattern\r\n default:\r\n return false;\r\n }\r\n};\r\n\r\n\r\nexport const hasSubmitter = (form?: HTMLFormElement | null): boolean => {\r\n if (!form) return false;\r\n\r\n for (const element of form) {\r\n if ((element as HTMLInputElement).type === 'submit') return true;\r\n }\r\n\r\n return false;\r\n};\r\n\r\nexport const _checkIfFormIsValid = <T>(fields: IForm<T>): boolean => {\r\n for (const f in fields) {\r\n if (fields[f].error) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n};\r\n\r\nexport const _toRawData = <T>(fields: IForm<T> & { [key: string]: GInputState<any> }, options: ToRawDataOptions<T> = {}): RawData<T> => {\r\n const data: { [key: string]: unknown } = {};\r\n\r\n const { include, exclude, transform } = options;\r\n\r\n if (include) {\r\n include.forEach(key => data[key as string] = fields[key]?.value);\r\n } else for (const f in fields) {\r\n data[f] = fields[f].value;\r\n }\r\n\r\n exclude?.forEach(key => delete data[key as string]);\r\n\r\n if (transform) {\r\n for (const key in transform) {\r\n const set = transform[key] as (value: GFormState<T>[typeof key]['value']) => any;\r\n data[key] = set(fields[key]?.value || fields[key]);\r\n }\r\n }\r\n\r\n return data as RawData<T>;\r\n};\r\n\r\nexport const _toFormData = <T>(form: HTMLFormElement | null, options?: ToFormDataOptions<T>): FormData => {\r\n if (!form) return new FormData();\r\n\r\n if (options) {\r\n const { exclude, include, transform } = options;\r\n let formData: FormData;\r\n\r\n if (include) {\r\n formData = new FormData();\r\n include.forEach(key => formData.set(key as string, form[key as string]?.value));\r\n } else {\r\n formData = new FormData(form);\r\n exclude?.forEach(key => formData.delete(key as string));\r\n }\r\n\r\n if (transform) {\r\n for (const key in transform) {\r\n const set = transform[key] as (value: GFormState<T>[typeof key]['value']) => any;\r\n formData.set(key, set(form[key]?.value));\r\n }\r\n }\r\n return formData;\r\n\r\n }\r\n\r\n return new FormData(form);\r\n};\r\n\r\nexport function _toURLSearchParams<T>(this: GFormState<T>, options?: ToURLSearchParamsOptions<T>): URLSearchParams {\r\n let data: Record<keyof T, any>;\r\n if (options) {\r\n const { exclude, include, transform } = options;\r\n if (include) {\r\n data = {} as Record<keyof T, any>;\r\n include.forEach(key => (data[key] = this[key]?.value));\r\n } else {\r\n data = this.toRawData();\r\n exclude?.forEach(key => delete data[key]);\r\n }\r\n\r\n if (transform) {\r\n for (const key in transform) {\r\n const set = transform[key] as (value: GFormState<T>[typeof key]['value']) => any;\r\n (data[key] = set(this[key]?.value));\r\n }\r\n }\r\n }\r\n else data = this.toRawData();\r\n\r\n return new URLSearchParams(data); // this is ok because URLSearchParams will stringify the values (boolean/number)\r\n}\r\n\r\nfunction __debounce(this: { [key: string]: { timerId: NodeJS.Timeout } }, timeout: number, id: string): Promise<void> {\r\n return new Promise(resolve => {\r\n if (this[id]?.timerId)\r\n clearTimeout(this[id].timerId);\r\n\r\n const timerId = setTimeout(() => resolve(), timeout);\r\n\r\n if (this[id]) {\r\n this[id].timerId = timerId;\r\n } else this[id] = { timerId };\r\n });\r\n}\r\n\r\nexport const _debounce = __debounce.bind({});\r\n\r\nexport const _extractValue = <T>(e?: GChangeEvent<GDOMElement | HTMLFormElement>, unknown?: { value: T } | string | number): undefined | string | number | boolean | T => {\r\n if (e?.target) {\r\n if (Object.hasOwn(typeValueDict, e.target.type)) return e.target[typeValueDict[e.target.type] as 'value'];\r\n return e.target.value;\r\n }\r\n return (e?.value as T) || (isObject(unknown) ? unknown.value : unknown);\r\n};\r\n\r\nexport const _checkResult = (handlerResult: boolean | RegExp | string, value: string | number | boolean): boolean => typeof handlerResult === 'boolean' ? handlerResult : typeof value === 'string' ? typeof handlerResult === 'string' ? !new RegExp(handlerResult).test(value) : !handlerResult.test(value) : false;\r\n\r\nexport const _merge = <T extends object>(target: { [key: string]: any } = {}, ...nodes: ({ [key: string]: any } | undefined | void)[]): T => {\r\n if (!nodes.length) return target as T;\r\n\r\n const next = nodes.shift();\r\n if (isObject(next)) {\r\n for (const key in next) {\r\n target[key] = target[key] ? { ...target[key], ...next[key] } : next[key];\r\n }\r\n }\r\n\r\n return _merge(target, ...nodes);\r\n};\r\n","import {_checkResult, _checkTypeMismatch, _debounce, _extractValue, _findValidityKey} from \"./helpers\";\r\nimport {type GInputValidator, type GValidators} from \"./validations\";\r\nimport type {GInputState} from \"./fields\";\r\nimport type {GChangeEvent, GDOMElement, GFocusEvent, GFormEvent, GInvalidEvent} from \"./form\";\r\nimport type {InitialState, Store} from \"./state\";\r\nimport {handlersMap, validityMap} from \"./validations/GValidator\";\r\n\r\nexport const useFormHandlers = (getState: Store['getState'], setState: Store['setState'], validators: GValidators = {}, optimized = false) => {\r\n /**\r\n * handler for validating a form input\r\n * @param input the input to be validated\r\n * @param e the event object\r\n */\r\n const _viHandler = (input: GInputState, e?: GFocusEvent<GDOMElement | HTMLFormElement> | GInvalidEvent<GDOMElement | HTMLFormElement> | GFormEvent<GDOMElement | HTMLFormElement> | GFormEvent): void => {\r\n if (!input) return;\r\n\r\n const element = e && e.target;\r\n const hasInitialValue = !input.dirty && input.value && !input.touched;\r\n\r\n if (!element && !hasInitialValue) return;\r\n\r\n if (typeof document !== 'undefined' && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)) {\r\n if (!input.checkValidity) input.checkValidity = () => element.checkValidity();\r\n\r\n if (hasInitialValue) { //if the field has initial value\r\n /**\r\n * for inputs with initial value we have to manually check for validations.\r\n * validity.tooShort is false even though initial value is smaller than minLength, because its required to be filled in by user (native dirty flag is true).\r\n * it only works for validity.valueMissing.\r\n * If an element has a minimum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), its value is not the empty string, and the length of the element's API value is less than the element's minimum allowed value length, then the element is suffering from being too short.\r\n * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute\r\n */\r\n _checkInputManually(input);\r\n _dispatchChanges(input, input.formKey);\r\n return;\r\n }\r\n element.setCustomValidity(''); //reset any previous error (custom)\r\n\r\n const exclude: (keyof ValidityState)[] = input.type && (input.pattern || hasCustomValidation(input)) ? ['typeMismatch'] : [];\r\n const validityKey = _findValidityKey(element.validity, exclude);\r\n _validateInput(input, validityKey, (v: string) => element.setCustomValidity(v));\r\n\r\n if (!validityKey && input.error) {\r\n element.setCustomValidity(input.errorText || 'error');\r\n }\r\n\r\n _dispatchChanges(input, input.formKey);\r\n } else {\r\n if (__DEBUG__) {\r\n console.log('[validateInputHandler] -', `the input '${input.formKey}' is not a native web element\\nevent:`, e);\r\n }\r\n\r\n //fallback - validate the input for validations manually\r\n input.checkValidity = () => _checkInputManually(input);\r\n input.checkValidity();\r\n\r\n _dispatchChanges(input, input.formKey);\r\n }\r\n };\r\n\r\n const _checkInputManually = (input: GInputState) => {\r\n const exclude: (keyof ValidityState)[] = input.type && (input.pattern || hasCustomValidation(input)) ? ['typeMismatch'] : [];\r\n\r\n let validityKey = _findValidityKey({\r\n valueMissing: input.required && !input.value || false,\r\n typeMismatch: _checkTypeMismatch(input),\r\n tooShort: input.minLength && input.value.toString().length < input.minLength || false,\r\n tooLong: input.maxLength && input.value.toString().length > input.maxLength || false,\r\n patternMismatch: input.pattern && _checkResult(input.pattern, input.value) || false,\r\n rangeUnderflow: input.min && Number(input.value) < Number(input.min) || false,\r\n rangeOverflow: input.max && Number(input.value) > Number(input.max) || false\r\n }, exclude);\r\n\r\n if (!validityKey && input.error) {\r\n validityKey = 'customError';\r\n }\r\n _validateInput(input, validityKey);\r\n return !input.error;\r\n };\r\n\r\n /**\r\n * handler for updating and validating a form input\r\n * @param input\r\n * @param e the event object\r\n * @param unknown\r\n */\r\n const _updateInputHandler = (input: GInputState, e?: GChangeEvent<GDOMElement | HTMLFormElement>, unknown?: {\r\n value: unknown\r\n } | string | number): void => {\r\n input.value = _extractValue(e, unknown) as GInputState['value'];\r\n _viHandler(input, e);\r\n };\r\n\r\n /**\r\n * Validates the input and updates the state with the result\r\n * @param input the input to be validated\r\n * @param validityKey the `Constraint Validation` key\r\n * @param setValidity\r\n */\r\n const _validateInput = (input: GInputState, validityKey?: keyof ValidityState, setValidity?: (e: string) => void): void => {\r\n const inputValidator = validators[input.validatorKey || input.formKey] || validators['*'];\r\n if (__DEBUG__) {\r\n console.log('[validateInput] -', 'validating input:', input.formKey, `(${validityKey ? validityKey : 'custom'})`);\r\n }\r\n\r\n if (__DEV__) {\r\n if (validityKey && !inputValidator?.hasConstraint(validityKey)) {\r\n if (validityKey === 'typeMismatch') console.warn(`DEV ONLY - [Missing Validator] - the input '${input.formKey}' has described the constraint '${validityMap[validityKey]}' however, a correspond validator / custom validation / pattern validator are missing.\\nadd '${handlersMap[validityMap[validityKey]]}' or 'withCustomValidation' or '${handlersMap[validityMap.patternMismatch]}' to the input validator.\\nexample:\\nconst validators: GValidators = {\\n\\temail: new GValidator().withPatternMismatchMessage('pattern mismatch'),\\n\\t...\\n}\\n\\nor either remove the constraint '${validityMap[validityKey]}' from the input props`);\r\n else console.warn(`DEV ONLY - [Missing Validator] - the input '${input.formKey}' has described the constraint '${validityMap[validityKey]}' however, a correspond validator is missing.\\nadd '${handlersMap[validityMap[validityKey]]}' to the input validator.\\nexample:\\nconst validators: GValidators = {\\n\\temail: new GValidator().withPatternMismatchMessage('pattern mismatch'),\\n\\t...\\n}\\n\\nor either remove the constraint '${validityMap[validityKey]}' from the input props`);\r\n }\r\n }\r\n\r\n if (inputValidator) {\r\n __validateInput(input, inputValidator, validityKey, setValidity);\r\n }\r\n input.touched = true;\r\n };\r\n\r\n const _dispatchChanges = (changes: Partial<InitialState> | Partial<GInputState>, key?: string) => setState(prev => {\r\n if (key) {\r\n return {...prev, fields: {...prev.fields, [key]: {...prev.fields[key], ...changes}}};\r\n }\r\n return {...prev, ...changes};\r\n });\r\n\r\n /**\r\n * @internal\r\n */\r\n const __validateInput = (input: GInputState, inputValidator: GInputValidator<any>, validityKey?: keyof ValidityState, setValidity?: (e: string) => void): void => {\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validating input (${input.formKey}) with handlers:`, inputValidator.handlers);\r\n }\r\n const fields = getState().fields;\r\n\r\n for (const index in inputValidator.constraintHandlers) {\r\n const result = inputValidator.constraintHandlers[index](input, validityKey);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for constraint handler (${index}):\\n`, inputValidator.constraintHandlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) return;\r\n }\r\n\r\n for (const index in inputValidator.handlers) {\r\n const result = inputValidator.handlers[index](input, fields);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for custom handler (${index}):\\n`, inputValidator.handlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) return;\r\n }\r\n\r\n input.errorText = '';\r\n\r\n if (inputValidator.asyncHandlers.length) {\r\n input.error = true;\r\n _debounce(input.debounce || 300, `${input.gid}-async`).then(() => {\r\n const validateAsync = async () => {\r\n for (const index in inputValidator.asyncHandlers) {\r\n const result = await inputValidator.asyncHandlers[index](input, fields);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for custom async handler (${index}):\\n`, inputValidator.asyncHandlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) break;\r\n }\r\n if (!input.error) input.errorText = '';\r\n\r\n _dispatchChanges({error: input.error, errorText: input.errorText}, input.formKey);\r\n if (setValidity) {\r\n setValidity(input.errorText);\r\n }\r\n };\r\n\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validating input (${input.formKey}) with async handlers:`, inputValidator.asyncHandlers);\r\n }\r\n validateAsync();\r\n });\r\n }\r\n };\r\n\r\n const hasCustomValidation = (input: GInputState) => {\r\n const validator = validators[input.validatorKey || input.formKey] || validators['*'];\r\n return validator && (validator.asyncHandlers.length > 0 || validator.handlers.length > 0);\r\n };\r\n\r\n return {_updateInputHandler, _viHandler, _dispatchChanges, optimized, _createInputChecker: _checkInputManually};\r\n};","import React, {createContext, useCallback, useContext, useEffect, useRef, useSyncExternalStore} from 'react';\r\nimport type {FC, PropsWithChildren} from 'react';\r\n\r\nimport {useFormHandlers} from \"./useFormHandlers\";\r\nimport type {InitialState, Store} from \"./state\";\r\nimport type {GValidators} from \"./validations\";\r\nimport type {GInputState} from './fields';\r\n\r\nconst GFormContext = createContext<Store>({} as Store);\r\n\r\ntype GFormContextProviderProps = PropsWithChildren & {\r\n initialState: InitialState;\r\n validators?: GValidators;\r\n optimized?: boolean;\r\n}\r\n\r\nexport const GFormContextProvider: FC<GFormContextProviderProps> = ({ children, initialState, validators, optimized }) => {\r\n const stateRef = useRef(initialState);\r\n const listeners = useRef(new Set<() => void>());\r\n\r\n const setState = useCallback((updater: InitialState | ((state: InitialState) => InitialState)) => {\r\n stateRef.current = typeof updater === 'function' ? updater(stateRef.current) : updater;\r\n listeners.current.forEach((l) => l());\r\n }, []);\r\n\r\n const handlers = useFormHandlers(() => stateRef.current, setState, validators, optimized);\r\n\r\n const getState = useCallback(() => stateRef.current, []);\r\n\r\n const subscribe = useCallback((listener: () => void) => {\r\n listeners.current.add(listener);\r\n return () => listeners.current.delete(listener);\r\n }, []);\r\n\r\n useEffect(() => {\r\n for (const fieldKey in initialState.fields) {\r\n initialState.fields[fieldKey].dispatchChanges = (changes: Partial<GInputState>) => handlers._dispatchChanges(changes, fieldKey);\r\n }\r\n }, []);\r\n\r\n const store = useRef<Store>({ getState, setState, subscribe, handlers });\r\n\r\n return <GFormContext.Provider value={store.current}>{children}</GFormContext.Provider>;\r\n};\r\n\r\nexport const useFormStore = () => {\r\n const store = useContext(GFormContext);\r\n if (!store) throw new Error('useGFormStore must be used within `GForm` component');\r\n return store;\r\n};\r\n\r\nexport const useFormSelector = <T extends any>(selector: (state: InitialState) => T): T => {\r\n const store = useFormStore();\r\n\r\n return useSyncExternalStore(\r\n store.subscribe,\r\n () => selector(store.getState()),\r\n () => selector(store.getState()) // for SSR\r\n );\r\n};\r\n\r\nexport function createSelector<\r\n State=InitialState,\r\n Selectors extends Array<(state: State) => any> = [],\r\n Result = any\r\n>(\r\n selectors: Selectors,\r\n combiner: (...args: {\r\n [K in keyof Selectors]: Selectors[K] extends (state: State) => infer R ? R : never;\r\n }) => Result\r\n): (state: State) => Result {\r\n let lastArgs: any[] = [];\r\n let lastResult: Result;\r\n\r\n return (state: State): Result => {\r\n const args = selectors.map(fn => fn(state));\r\n if (\r\n lastArgs.length === args.length &&\r\n args.every((val, i) => val === lastArgs[i])\r\n ) {\r\n return lastResult;\r\n }\r\n lastArgs = args;\r\n lastResult = combiner(...args as any);\r\n return lastResult;\r\n };\r\n}","import {createSelector} from \"./form-context\";\r\nimport {InitialState} from \"./state\";\r\n\r\nconst selectFields = [(state: InitialState) => state.fields];\r\n\r\nexport const selectFirstInvalidField =\r\n createSelector(\r\n selectFields,\r\n (fields) => {\r\n for (const f in fields) {\r\n if (fields[f].error) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n }\r\n );\r\n\r\nexport const makeSelectFields = (keys: string[] = []) =>\r\n createSelector(\r\n selectFields,\r\n (fields) => {\r\n const selected = keys.map((key) => fields[key]).filter(Boolean);\r\n return selected.length ? selected : null;\r\n }\r\n );"],"names":["isObject","o","Array","isArray","defaultFieldProps","text","value","checkbox","number","typeValueDict","generateId","Date","toString","Math","random","substring","_buildFormInitialValues","rows","fields","row","_findInputs","forEach","config","required","max","maxLength","min","minLength","step","pattern","type","defaultValue","checked","defaultChecked","formKey","debounce","validatorKey","inputValue","dirty","touched","gid","Object","keys","key","root","total","_root$props","_root$props2","element","props","push","children","_findValidityKey","validity","exclude","includes","_checkTypeMismatch","input","_input$value","trim","test","URL","_unused","_toRawData","options","data","include","transform","_fields$key","f","_fields$key2","set","_toURLSearchParams","_this$key","this","toRawData","_this$key2","URLSearchParams","_debounce","timeout","id","Promise","resolve","_this$id","timerId","clearTimeout","setTimeout","bind","_checkResult","handlerResult","RegExp","_merge","target","nodes","length","next","shift","_objectSpread","useFormHandlers","getState","setState","validators","optimized","_viHandler","e","hasInitialValue","document","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","checkValidity","_checkInputManually","_dispatchChanges","setCustomValidity","hasCustomValidation","validityKey","_validateInput","v","error","errorText","valueMissing","typeMismatch","tooShort","tooLong","patternMismatch","rangeUnderflow","Number","rangeOverflow","setValidity","inputValidator","__validateInput","changes","prev","index","constraintHandlers","result","handlers","asyncHandlers","then","async","validateAsync","validator","_updateInputHandler","unknown","_extractValue","hasOwn","_createInputChecker","GFormContext","createContext","GFormContextProvider","initialState","stateRef","useRef","listeners","Set","useCallback","updater","current","l","subscribe","listener","add","delete","useEffect","fieldKey","dispatchChanges","store","React","createElement","Provider","useFormStore","useContext","Error","useFormSelector","selector","useSyncExternalStore","createSelector","selectors","combiner","lastResult","lastArgs","state","args","map","fn","every","val","i","selectFields","selectFirstInvalidField","makeSelectFields","selected","filter","Boolean"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"shared.production.js","sources":["../../../src/helpers.ts","../../../src/useFormHandlers.ts","../../../src/form-context.tsx","../../../src/selectors.ts"],"sourcesContent":["import {Children, isValidElement, PropsWithChildren, ReactElement, ReactNode} from \"react\";\r\n\r\nimport type {GInputInitialState, GInputProps, GInputState, GInputStateMutable} from './fields';\r\nimport type {FormNode, FormTreeResult, GChangeEvent, GDOMElement, IForm} from './form';\r\nimport type {\r\n GFormState,\r\n InitialState,\r\n RawData,\r\n ToFormDataOptions,\r\n ToRawDataOptions,\r\n ToURLSearchParamsOptions\r\n} from './state';\r\n\r\nexport const isObject = (o: any): o is object => (o && typeof o === 'object' && !Array.isArray(o));\r\n\r\nconst defaultFieldProps: { [key: string]: { value: string | number | boolean } } = {\r\n text: {value: ''},\r\n checkbox: {value: false},\r\n number: {value: 0}\r\n};\r\n\r\nconst typeValueDict: { [key: string]: keyof HTMLFormElement | GDOMElement } = {\r\n checkbox: 'checked',\r\n number: 'valueAsNumber',\r\n};\r\n\r\nconst _generateIdUnsafe = () => (+new Date()).toString(36) + (1 - Math.random()).toString(36).substring(2, 16);\r\n\r\nexport const _copyStateFields = (source: InitialState, destination: InitialState) => {\r\n for (const key in destination.fields) {\r\n const sourceField = source.fields[key];\r\n const destField = destination.fields[key];\r\n\r\n if (!sourceField || sourceField.type !== destField.type) continue;\r\n\r\n destination.fields[key] = {...destField, ...sourceField};\r\n }\r\n};\r\n\r\nexport const _buildFormInitialValues = <T>(rows: ReactNode = []): InitialState<T> => {\r\n const fields: { [key: string]: GInputInitialState } = {};\r\n\r\n if (__DEBUG__) {\r\n console.log('[buildFormInitialValues] -', 'building initial values for ', rows);\r\n }\r\n\r\n const inputs = _findInputs(rows);\r\n\r\n inputs.forEach(config => {\r\n if (__DEBUG__) {\r\n console.log('[buildFormInitialValues] -', 'building input', `(${config.formKey})`, config);\r\n }\r\n\r\n if (__DEV__ && fields[config.formKey]) {\r\n console.warn(`DEV ONLY - [Duplicate Keys] - field with key '${config.formKey}' already defined.`);\r\n }\r\n\r\n const {\r\n required = false,\r\n max,\r\n maxLength,\r\n min,\r\n minLength,\r\n step,\r\n pattern,\r\n type = \"text\",\r\n defaultValue,\r\n value,\r\n checked,\r\n defaultChecked,\r\n formKey,\r\n debounce,\r\n validatorKey\r\n } = config;\r\n const defaultProps = defaultFieldProps[type] || defaultFieldProps.text;\r\n const inputValue = value || defaultValue || checked || defaultChecked || defaultProps.value;\r\n\r\n fields[formKey] = {\r\n formKey,\r\n type,\r\n required,\r\n max,\r\n maxLength,\r\n min,\r\n minLength,\r\n step,\r\n pattern,\r\n value: inputValue,\r\n validatorKey,\r\n debounce,\r\n dirty: false,\r\n touched: false,\r\n gid: _generateIdUnsafe(),\r\n };\r\n });\r\n\r\n return {fields: fields as IForm<T>};\r\n};\r\n\r\n\r\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\nconst _buildFormTree = (\r\n root?: ReactElement<any> | ReactElement<any>[] | undefined\r\n): FormNode[] => {\r\n if (!root) return [];\r\n\r\n if (Array.isArray(root)) {\r\n return root.flatMap(element => _buildFormTree(element));\r\n }\r\n\r\n if (root.props?.formKey) {\r\n if (__DEBUG__) {\r\n console.log(\"[findInputs] - input config found\", `(${root.props.formKey})`);\r\n }\r\n return [\r\n {\r\n type: \"input\",\r\n formKey: root.props.formKey,\r\n },\r\n ];\r\n }\r\n\r\n // Group node\r\n const childrenTree = _buildFormTree(root.props?.children);\r\n return [\r\n {\r\n type: \"group\",\r\n children: childrenTree,\r\n },\r\n ];\r\n};\r\n\r\nexport const buildFormTreeWithFlatAndSignature = (\r\n root?: ReactElement<any> | ReactElement<any>[] | undefined\r\n): FormTreeResult => {\r\n const flat: (GInputProps & GInputStateMutable)[] = [];\r\n let signature = '';\r\n\r\n const walk = (node?: ReactElement<any> | ReactElement<any>[] | undefined): FormNode[] => {\r\n if (!node) return [];\r\n\r\n if (Array.isArray(node)) {\r\n return node.flatMap(child => walk(child));\r\n }\r\n\r\n if (node.props?.formKey) {\r\n flat.push(node.props);\r\n signature = `${signature}I(${node.props.formKey})`;\r\n return [\r\n {\r\n type: \"input\",\r\n formKey: node.props.formKey,\r\n props: node.props,\r\n },\r\n ];\r\n }\r\n\r\n signature = `${signature}G(`;\r\n const childrenTree = walk(node.props?.children);\r\n signature = `${signature})`;\r\n\r\n return [\r\n {\r\n type: \"group\",\r\n children: childrenTree,\r\n },\r\n ];\r\n };\r\n\r\n const tree = walk(root);\r\n\r\n return {tree, flat, signature};\r\n};\r\n\r\nconst _findInputs = (root?: ReactNode, total: (GInputProps & GInputStateMutable)[] = []): (GInputProps & GInputStateMutable)[] => {\r\n if (!root) return total;\r\n\r\n Children.forEach(root, child => {\r\n if (!isValidElement(child)) return;\r\n\r\n if (child.props) {\r\n const {formKey, children} = child.props as PropsWithChildren<GInputProps & GInputStateMutable>;\r\n\r\n if (formKey) {\r\n if (__DEBUG__) {\r\n console.log(\"[findInputs] - input config found\", `(${formKey})`);\r\n }\r\n total.push(child.props as GInputProps & GInputStateMutable);\r\n }\r\n\r\n if (children) {\r\n _findInputs(children, total);\r\n }\r\n }\r\n });\r\n\r\n return total;\r\n};\r\n\r\nexport const _findValidityKey = (validity: Partial<ValidityState>, exclude: (keyof ValidityState)[] = []): keyof ValidityState | undefined => {\r\n for (const key in validity) {\r\n if (exclude.includes(key as keyof ValidityState)) continue;\r\n if (key !== 'valid' && validity[key as keyof ValidityState]) {\r\n if (__DEBUG__) {\r\n console.log('[findValidityKey] -', 'found validity key:', key);\r\n }\r\n return key as keyof ValidityState;\r\n }\r\n }\r\n};\r\n\r\nexport const _checkTypeMismatch = (input: GInputState<any>) => {\r\n const value = input.value?.toString().trim();\r\n if (!value) return false;\r\n\r\n switch (input.type) {\r\n case 'email':\r\n return !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value); // basic email pattern\r\n case 'url':\r\n try {\r\n new URL(value);\r\n return false;\r\n } catch {\r\n return true;\r\n }\r\n case 'tel':\r\n return !/^\\+?[0-9\\s\\-().]{7,}$/.test(value); // basic phone pattern\r\n default:\r\n return false;\r\n }\r\n};\r\n\r\n\r\nexport const hasSubmitter = (form?: HTMLFormElement | null): boolean => {\r\n if (!form) return false;\r\n\r\n for (const element of form) {\r\n if ((element as HTMLInputElement).type === 'submit') return true;\r\n }\r\n\r\n return false;\r\n};\r\n\r\nexport const _checkIfFormIsValid = <T>(fields: IForm<T>): boolean => {\r\n for (const f in fields) {\r\n if (fields[f].error) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n};\r\n\r\nexport const _toRawData = <T>(fields: IForm<T> & {\r\n [key: string]: GInputState<any>\r\n}, options: ToRawDataOptions<T> = {}): RawData<T> => {\r\n const data: { [key: string]: unknown } = {};\r\n\r\n const {include, exclude, transform} = options;\r\n\r\n if (include) {\r\n include.forEach(key => data[key as string] = fields[key]?.value);\r\n } else for (const f in fields) {\r\n data[f] = fields[f].value;\r\n }\r\n\r\n exclude?.forEach(key => delete data[key as string]);\r\n\r\n if (transform) {\r\n for (const key in transform) {\r\n const set = transform[key] as (value: GFormState<T>[typeof key]['value']) => any;\r\n data[key] = set(fields[key]?.value || fields[key]);\r\n }\r\n }\r\n\r\n return data as RawData<T>;\r\n};\r\n\r\nexport const _toFormData = <T>(form: HTMLFormElement | null, options?: ToFormDataOptions<T>): FormData => {\r\n if (!form) return new FormData();\r\n\r\n if (options) {\r\n const {exclude, include, transform} = options;\r\n let formData: FormData;\r\n\r\n if (include) {\r\n formData = new FormData();\r\n include.forEach(key => formData.set(key as string, form[key as string]?.value));\r\n } else {\r\n formData = new FormData(form);\r\n exclude?.forEach(key => formData.delete(key as string));\r\n }\r\n\r\n if (transform) {\r\n for (const key in transform) {\r\n const set = transform[key] as (value: GFormState<T>[typeof key]['value']) => any;\r\n formData.set(key, set(form[key]?.value));\r\n }\r\n }\r\n return formData;\r\n\r\n }\r\n\r\n return new FormData(form);\r\n};\r\n\r\nexport function _toURLSearchParams<T>(this: GFormState<T>, options?: ToURLSearchParamsOptions<T>): URLSearchParams {\r\n let data: Record<keyof T, any>;\r\n if (options) {\r\n const {exclude, include, transform} = options;\r\n if (include) {\r\n data = {} as Record<keyof T, any>;\r\n include.forEach(key => (data[key] = this[key]?.value));\r\n } else {\r\n data = this.toRawData();\r\n exclude?.forEach(key => delete data[key]);\r\n }\r\n\r\n if (transform) {\r\n for (const key in transform) {\r\n const set = transform[key] as (value: GFormState<T>[typeof key]['value']) => any;\r\n (data[key] = set(this[key]?.value));\r\n }\r\n }\r\n } else data = this.toRawData();\r\n\r\n return new URLSearchParams(data); // this is ok because URLSearchParams will stringify the values (boolean/number)\r\n}\r\n\r\nfunction __debounce(this: { [key: string]: { timerId: NodeJS.Timeout } }, timeout: number, id: string): Promise<void> {\r\n return new Promise(resolve => {\r\n if (this[id]?.timerId)\r\n clearTimeout(this[id].timerId);\r\n\r\n const timerId = setTimeout(() => resolve(), timeout);\r\n\r\n if (this[id]) {\r\n this[id].timerId = timerId;\r\n } else this[id] = {timerId};\r\n });\r\n}\r\n\r\nexport const _debounce = __debounce.bind({});\r\n\r\nexport const _extractValue = <T>(e?: GChangeEvent<GDOMElement | HTMLFormElement>, unknown?: {\r\n value: T\r\n} | string | number): undefined | string | number | boolean | T => {\r\n if (e?.target) {\r\n if (Object.hasOwn(typeValueDict, e.target.type)) return e.target[typeValueDict[e.target.type] as 'value'];\r\n return e.target.value;\r\n }\r\n return (e?.value as T) || (isObject(unknown) ? unknown.value : unknown);\r\n};\r\n\r\nexport const _checkResult = (handlerResult: boolean | RegExp | string, value: string | number | boolean): boolean => typeof handlerResult === 'boolean' ? handlerResult : typeof value === 'string' ? typeof handlerResult === 'string' ? !new RegExp(handlerResult).test(value) : !handlerResult.test(value) : false;\r\n\r\nexport const _merge = <T extends object>(target: { [key: string]: any } = {}, ...nodes: ({\r\n [key: string]: any\r\n} | undefined | void)[]): T => {\r\n if (!nodes.length) return target as T;\r\n\r\n const next = nodes.shift();\r\n if (isObject(next)) {\r\n for (const key in next) {\r\n target[key] = target[key] ? {...target[key], ...next[key]} : next[key];\r\n }\r\n }\r\n\r\n return _merge(target, ...nodes);\r\n};\r\n","import {_checkResult, _checkTypeMismatch, _debounce, _extractValue, _findValidityKey} from \"./helpers\";\r\nimport {type GInputValidator, type GValidators} from \"./validations\";\r\nimport type {GInputState} from \"./fields\";\r\nimport type {GChangeEvent, GDOMElement, GFocusEvent, GFormEvent, GInvalidEvent} from \"./form\";\r\nimport type {InitialState, Store} from \"./state\";\r\nimport {handlersMap, validityMap} from \"./validations/GValidator\";\r\n\r\nexport const useFormHandlers = (getState: Store['getState'], setState: Store['setState'], validators: GValidators = {}, optimized = false) => {\r\n /**\r\n * handler for validating a form input\r\n * @param input the input to be validated\r\n * @param e the event object\r\n */\r\n const _viHandler = (input: GInputState, e?: GFocusEvent<GDOMElement | HTMLFormElement> | GInvalidEvent<GDOMElement | HTMLFormElement> | GFormEvent<GDOMElement | HTMLFormElement> | GFormEvent): void => {\r\n if (!input) return;\r\n\r\n const element = e && e.target;\r\n const hasInitialValue = !input.dirty && input.value && !input.touched;\r\n\r\n if (!element && !hasInitialValue) return;\r\n\r\n if (typeof document !== 'undefined' && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)) {\r\n if (!input.checkValidity) input.checkValidity = () => element.checkValidity();\r\n\r\n if (hasInitialValue) { //if the field has initial value\r\n /**\r\n * for inputs with initial value we have to manually check for validations.\r\n * validity.tooShort is false even though initial value is smaller than minLength, because its required to be filled in by user (native dirty flag is true).\r\n * it only works for validity.valueMissing.\r\n * If an element has a minimum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), its value is not the empty string, and the length of the element's API value is less than the element's minimum allowed value length, then the element is suffering from being too short.\r\n * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute\r\n */\r\n _checkInputManually(input);\r\n _dispatchChanges(input, input.formKey);\r\n return;\r\n }\r\n element.setCustomValidity(''); //reset any previous error (custom)\r\n\r\n const exclude: (keyof ValidityState)[] = input.type && (input.pattern || hasCustomValidation(input)) ? ['typeMismatch'] : [];\r\n const validityKey = _findValidityKey(element.validity, exclude);\r\n _validateInput(input, validityKey, (v: string) => element.setCustomValidity(v));\r\n\r\n if (!validityKey && input.error) {\r\n element.setCustomValidity(input.errorText || 'error');\r\n }\r\n\r\n _dispatchChanges(input, input.formKey);\r\n } else {\r\n if (__DEBUG__) {\r\n console.log('[validateInputHandler] -', `the input '${input.formKey}' is not a native web element\\nevent:`, e);\r\n }\r\n\r\n //fallback - validate the input for validations manually\r\n input.checkValidity = () => _checkInputManually(input);\r\n input.checkValidity();\r\n\r\n _dispatchChanges(input, input.formKey);\r\n }\r\n };\r\n\r\n const _checkInputManually = (input: GInputState) => {\r\n const exclude: (keyof ValidityState)[] = input.type && (input.pattern || hasCustomValidation(input)) ? ['typeMismatch'] : [];\r\n\r\n let validityKey = _findValidityKey({\r\n valueMissing: input.required && !input.value || false,\r\n typeMismatch: _checkTypeMismatch(input),\r\n tooShort: input.minLength && input.value.toString().length < input.minLength || false,\r\n tooLong: input.maxLength && input.value.toString().length > input.maxLength || false,\r\n patternMismatch: input.pattern && _checkResult(input.pattern, input.value) || false,\r\n rangeUnderflow: input.min && Number(input.value) < Number(input.min) || false,\r\n rangeOverflow: input.max && Number(input.value) > Number(input.max) || false\r\n }, exclude);\r\n\r\n if (!validityKey && input.error) {\r\n validityKey = 'customError';\r\n }\r\n _validateInput(input, validityKey);\r\n return !input.error;\r\n };\r\n\r\n /**\r\n * handler for updating and validating a form input\r\n * @param input\r\n * @param e the event object\r\n * @param unknown\r\n */\r\n const _updateInputHandler = (input: GInputState, e?: GChangeEvent<GDOMElement | HTMLFormElement>, unknown?: {\r\n value: unknown\r\n } | string | number): void => {\r\n input.value = _extractValue(e, unknown) as GInputState['value'];\r\n _viHandler(input, e);\r\n };\r\n\r\n /**\r\n * Validates the input and updates the state with the result\r\n * @param input the input to be validated\r\n * @param validityKey the `Constraint Validation` key\r\n * @param setValidity\r\n */\r\n const _validateInput = (input: GInputState, validityKey?: keyof ValidityState, setValidity?: (e: string) => void): void => {\r\n const inputValidator = validators[input.validatorKey || input.formKey] || validators['*'];\r\n if (__DEBUG__) {\r\n console.log('[validateInput] -', 'validating input:', input.formKey, `(${validityKey ? validityKey : 'custom'})`);\r\n }\r\n\r\n if (__DEV__) {\r\n if (validityKey && !inputValidator?.hasConstraint(validityKey)) {\r\n if (validityKey === 'typeMismatch') console.warn(`DEV ONLY - [Missing Validator] - the input '${input.formKey}' has described the constraint '${validityMap[validityKey]}' however, a correspond validator/custom validation/pattern validator is missing.\\nadd '${handlersMap[validityMap[validityKey]]}' or 'withCustomValidation' or '${handlersMap[validityMap.patternMismatch]}' to the input validator.\\nexample:\\nconst validators: GValidators = {\\n\\temail: new GValidator().withPatternMismatchMessage('pattern mismatch'),\\n\\t...\\n}\\n\\nor either remove the constraint '${validityMap[validityKey]}' from the input props`);\r\n else console.warn(`DEV ONLY - [Missing Validator] - the input '${input.formKey}' has described the constraint '${validityMap[validityKey]}' however, a correspond validator is missing.\\nadd '${handlersMap[validityMap[validityKey]]}' to the input validator.\\nexample:\\nconst validators: GValidators = {\\n\\temail: new GValidator().withPatternMismatchMessage('pattern mismatch'),\\n\\t...\\n}\\n\\nor either remove the constraint '${validityMap[validityKey]}' from the input props`);\r\n }\r\n }\r\n\r\n if (inputValidator) {\r\n __validateInput(input, inputValidator, validityKey, setValidity);\r\n }\r\n input.touched = true;\r\n };\r\n\r\n const _dispatchChanges = (changes: Partial<InitialState> | Partial<GInputState>, key?: string) => setState(prev => {\r\n if (key) {\r\n return {...prev, fields: {...prev.fields, [key]: {...prev.fields[key], ...changes}}};\r\n }\r\n return {...prev, ...changes};\r\n });\r\n\r\n /**\r\n * @internal\r\n */\r\n const __validateInput = (input: GInputState, inputValidator: GInputValidator<any>, validityKey?: keyof ValidityState, setValidity?: (e: string) => void): void => {\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validating input (${input.formKey}) with handlers:`, inputValidator.handlers);\r\n }\r\n const fields = getState().fields;\r\n\r\n for (const index in inputValidator.constraintHandlers) {\r\n const result = inputValidator.constraintHandlers[index](input, validityKey);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for constraint handler (${index}):\\n`, inputValidator.constraintHandlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) return;\r\n }\r\n\r\n for (const index in inputValidator.handlers) {\r\n const result = inputValidator.handlers[index](input, fields);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for custom handler (${index}):\\n`, inputValidator.handlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) return;\r\n }\r\n\r\n input.errorText = '';\r\n\r\n if (inputValidator.asyncHandlers.length) {\r\n input.error = true;\r\n _debounce(input.debounce || 300, `${input.gid}-async`).then(() => {\r\n const validateAsync = async () => {\r\n for (const index in inputValidator.asyncHandlers) {\r\n const result = await inputValidator.asyncHandlers[index](input, fields);\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validation results for custom async handler (${index}):\\n`, inputValidator.asyncHandlers[index], '\\n\\nvalidator result:', result, '\\nviolation:', input.error, `(${input.error ? 'failed' : 'passed'})`);\r\n }\r\n\r\n input.error = _checkResult(result, input.value);\r\n if (input.error) break;\r\n }\r\n if (!input.error) input.errorText = '';\r\n\r\n _dispatchChanges({error: input.error, errorText: input.errorText}, input.formKey);\r\n if (setValidity) {\r\n setValidity(input.errorText);\r\n }\r\n };\r\n\r\n if (__DEBUG__) {\r\n console.log('[_validateInput] -', `validating input (${input.formKey}) with async handlers:`, inputValidator.asyncHandlers);\r\n }\r\n validateAsync();\r\n });\r\n }\r\n };\r\n\r\n const hasCustomValidation = (input: GInputState) => {\r\n const validator = validators[input.validatorKey || input.formKey] || validators['*'];\r\n return validator && (validator.asyncHandlers.length > 0 || validator.handlers.length > 0);\r\n };\r\n\r\n return {_updateInputHandler, _viHandler, _dispatchChanges, optimized, _createInputChecker: _checkInputManually};\r\n};","import React, {createContext, useCallback, useContext, useMemo, useRef, useSyncExternalStore} from 'react';\r\nimport type {FC, PropsWithChildren} from 'react';\r\n\r\nimport {useFormHandlers} from \"./useFormHandlers\";\r\nimport type {InitialState, Store} from \"./state\";\r\nimport type {GValidators} from \"./validations\";\r\nimport type {GInputState} from './fields';\r\nimport {_copyStateFields} from \"./helpers\";\r\n\r\nconst GFormContext = createContext<Store>({} as Store);\r\n\r\ntype GFormContextProviderProps = PropsWithChildren & {\r\n initialState: InitialState;\r\n validators?: GValidators;\r\n optimized?: boolean;\r\n}\r\n\r\nexport const GFormContextProvider: FC<GFormContextProviderProps> = ({ children, initialState, validators, optimized }) => {\r\n const stateRef = useRef(initialState);\r\n const listeners = useRef<Set<() => void>>(null);\r\n\r\n const setState = useCallback((updater: InitialState | ((state: InitialState) => InitialState)) => {\r\n stateRef.current = typeof updater === 'function' ? updater(stateRef.current) : updater;\r\n listeners.current!.forEach((l) => l());\r\n }, []);\r\n\r\n const handlers = useFormHandlers(() => stateRef.current, setState, validators, optimized);\r\n\r\n const store = useMemo<Store>(() => {\r\n if (!listeners.current) {\r\n listeners.current = new Set();\r\n } else {\r\n console.log(`form changed stated from`, stateRef.current, '\\nto\\n', initialState);\r\n listeners.current.clear();\r\n _copyStateFields(stateRef.current, initialState);\r\n }\r\n\r\n stateRef.current = initialState;\r\n\r\n for (const fieldKey in initialState.fields) {\r\n initialState.fields[fieldKey].dispatchChanges = (changes: Partial<GInputState>) => handlers._dispatchChanges(changes, fieldKey);\r\n }\r\n\r\n return {\r\n getState: () => stateRef.current,\r\n setState,\r\n subscribe: (listener: () => void) => {\r\n listeners.current!.add(listener);\r\n return () => listeners.current!.delete(listener);\r\n },\r\n handlers\r\n };\r\n }, [initialState]);\r\n\r\n return <GFormContext.Provider value={store}>{children}</GFormContext.Provider>;\r\n};\r\n\r\nexport const useFormStore = () => {\r\n const store = useContext(GFormContext);\r\n if (!store) throw new Error('useGFormStore must be used within `GForm` component');\r\n return store;\r\n};\r\n\r\nexport const useFormSelector = <T extends any>(selector: (state: InitialState) => T): T => {\r\n const store = useFormStore();\r\n\r\n return useSyncExternalStore(\r\n store.subscribe,\r\n () => selector(store.getState()),\r\n () => selector(store.getState()) // for SSR\r\n );\r\n};\r\n\r\nexport function createSelector<\r\n State=InitialState,\r\n Selectors extends Array<(state: State) => any> = [],\r\n Result = any\r\n>(\r\n selectors: Selectors,\r\n combiner: (...args: {\r\n [K in keyof Selectors]: Selectors[K] extends (state: State) => infer R ? R : never;\r\n }) => Result\r\n): (state: State) => Result {\r\n let lastArgs: any[] = [];\r\n let lastResult: Result;\r\n\r\n return (state: State): Result => {\r\n const args = selectors.map(fn => fn(state));\r\n if (\r\n lastArgs.length === args.length &&\r\n args.every((val, i) => val === lastArgs[i])\r\n ) {\r\n return lastResult;\r\n }\r\n lastArgs = args;\r\n lastResult = combiner(...args as any);\r\n return lastResult;\r\n };\r\n}","import {createSelector} from \"./form-context\";\r\nimport {InitialState} from \"./state\";\r\n\r\nconst selectFields = [(state: InitialState) => state.fields];\r\n\r\nexport const selectFirstInvalidField =\r\n createSelector(\r\n selectFields,\r\n (fields) => {\r\n for (const f in fields) {\r\n if (fields[f].error) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n }\r\n );\r\n\r\nexport const makeSelectFields = (keys: string[] = []) =>\r\n createSelector(\r\n selectFields,\r\n (fields) => {\r\n const selected = keys.map((key) => fields[key]).filter(Boolean);\r\n return selected.length ? selected : null;\r\n }\r\n );"],"names":["isObject","o","Array","isArray","defaultFieldProps","text","value","checkbox","number","typeValueDict","_buildFormInitialValues","rows","fields","_findInputs","forEach","config","required","max","maxLength","min","minLength","step","pattern","type","defaultValue","checked","defaultChecked","formKey","debounce","validatorKey","inputValue","dirty","touched","gid","Date","toString","Math","random","substring","root","total","Children","child","isValidElement","props","children","push","_findValidityKey","validity","exclude","key","includes","_checkTypeMismatch","input","_input$value","trim","test","URL","_unused","_toRawData","options","data","include","transform","_fields$key","f","_fields$key2","set","_toURLSearchParams","_this$key","this","toRawData","_this$key2","URLSearchParams","_debounce","timeout","id","Promise","resolve","_this$id","timerId","clearTimeout","setTimeout","bind","_checkResult","handlerResult","RegExp","_merge","target","nodes","length","next","shift","_objectSpread","useFormHandlers","getState","setState","validators","optimized","_viHandler","e","element","hasInitialValue","document","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","checkValidity","_checkInputManually","_dispatchChanges","setCustomValidity","hasCustomValidation","validityKey","_validateInput","v","error","errorText","valueMissing","typeMismatch","tooShort","tooLong","patternMismatch","rangeUnderflow","Number","rangeOverflow","setValidity","inputValidator","__validateInput","changes","prev","index","constraintHandlers","result","handlers","asyncHandlers","then","async","validateAsync","validator","_updateInputHandler","unknown","_extractValue","Object","hasOwn","_createInputChecker","GFormContext","createContext","GFormContextProvider","initialState","stateRef","useRef","listeners","useCallback","updater","current","l","store","useMemo","console","log","clear","_copyStateFields","source","destination","sourceField","destField","Set","fieldKey","dispatchChanges","subscribe","listener","add","delete","React","createElement","Provider","useFormStore","useContext","Error","useFormSelector","selector","useSyncExternalStore","createSelector","selectors","combiner","lastResult","lastArgs","state","args","map","fn","every","val","i","selectFields","selectFirstInvalidField","makeSelectFields","keys","selected","filter","Boolean"],"mappings":"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"}
|
package/native/dist/index.d.ts
CHANGED
|
@@ -1,73 +1,183 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
1
|
+
import React, { ReactNode, HTMLInputTypeAttribute, RefObject, FC } from 'react';
|
|
2
|
+
import * as react_native from 'react-native';
|
|
3
|
+
|
|
4
|
+
declare const RNGInput: React.NamedExoticComponent<BaseGenericFieldProps & react_native.TextInputProps & {
|
|
5
|
+
defaultValue?: string | number;
|
|
6
|
+
fetch?: (state: GInputStateMutable, fields: IForm & {
|
|
7
|
+
[key: string]: GInputStateMutable;
|
|
8
|
+
}) => void | Partial<GInputStateMutable> | Promise<void | Partial<GInputStateMutable>>;
|
|
9
|
+
fetchDeps?: string[];
|
|
10
|
+
debounce?: number;
|
|
11
|
+
} & {
|
|
12
|
+
type?: "text" | "email" | "tel" | "url" | "search";
|
|
13
|
+
minLength?: number;
|
|
14
|
+
maxLength?: number;
|
|
15
|
+
pattern?: string;
|
|
16
|
+
value?: string;
|
|
17
|
+
defaultValue?: string;
|
|
18
|
+
element?: (input: GInputState<string>, props: react_native.TextInputProps) => ReactNode;
|
|
19
|
+
} & React.RefAttributes<any>>;
|
|
20
|
+
|
|
21
|
+
type BaseGenericFieldProps = {
|
|
22
|
+
/** the key which is used to identify the input */
|
|
23
|
+
formKey: string;
|
|
24
|
+
/** refer to another input validator */
|
|
25
|
+
validatorKey?: string;
|
|
26
|
+
type?: HTMLInputTypeAttribute | undefined;
|
|
27
|
+
required?: boolean;
|
|
28
|
+
};
|
|
29
|
+
type GInputInitialState = BaseGenericFieldProps & {
|
|
30
|
+
[key: string]: any;
|
|
31
|
+
gid: string;
|
|
32
|
+
dirty: boolean;
|
|
33
|
+
touched: boolean;
|
|
34
|
+
};
|
|
35
|
+
type GInputState<T = string | number | boolean> = GInputInitialState & {
|
|
36
|
+
value: T;
|
|
37
|
+
error: boolean;
|
|
38
|
+
errorText: string;
|
|
39
|
+
checkValidity(): boolean;
|
|
40
|
+
dispatchChanges<C>(changes: Partial<GInputState | C>): void;
|
|
41
|
+
debounce?: number;
|
|
42
|
+
};
|
|
43
|
+
type GInputStateMutable<T = any> = GInputState<T> & {
|
|
44
|
+
max?: number;
|
|
45
|
+
maxLength?: number;
|
|
46
|
+
min?: number;
|
|
47
|
+
minLength?: number;
|
|
48
|
+
checked?: boolean;
|
|
49
|
+
step?: number;
|
|
50
|
+
pattern?: string | RegExp;
|
|
51
|
+
[key: string]: any;
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
type IForm<T = any> = {
|
|
55
|
+
[key in keyof T]: GInputState<T[key]>;
|
|
56
|
+
} & {
|
|
57
|
+
[key: string]: GInputState<any>;
|
|
58
|
+
};
|
|
59
|
+
type PartialForm<T> = Partial<{
|
|
60
|
+
[key in keyof T]: Partial<GInputStateMutable<T[key]>>;
|
|
61
|
+
}>;
|
|
62
|
+
|
|
63
|
+
/**a class for handling validations for input(s)
|
|
64
|
+
* @example
|
|
65
|
+
* const baseValidator = new GValidator().withRequiredMessage('this field is required');
|
|
66
|
+
*
|
|
67
|
+
* const validators: GValidators<SignInForm> = {
|
|
68
|
+
* username: new GValidator(baseValidator).withMinLengthMessage('...'),
|
|
69
|
+
* '*': baseValidator // a default validator for all other fields in the form
|
|
70
|
+
* };
|
|
71
|
+
*/
|
|
72
|
+
declare class GValidator<T = any> {
|
|
73
|
+
private _handlers;
|
|
74
|
+
private _constraintHandlers;
|
|
75
|
+
private _asyncHandlers;
|
|
76
|
+
track?: (keyof ValidityState)[];
|
|
77
|
+
get handlers(): GCustomValidatorHandler<T>[];
|
|
78
|
+
get constraintHandlers(): GConstraintValidatorHandler[];
|
|
79
|
+
get asyncHandlers(): GCustomValidatorHandlerAsync<T>[];
|
|
80
|
+
constructor(baseValidator?: GValidator<T>);
|
|
81
|
+
hasConstraint(constraint: keyof ValidityState): boolean;
|
|
82
|
+
/**register a `valueMissing` violation handler (use this with `required` attribute) */
|
|
83
|
+
withRequiredMessage(message: string | GConstraintValidator): GValidator<T>;
|
|
84
|
+
/**register a `tooLong` violation handler (use this with `maxLength` attribute) */
|
|
85
|
+
withMaxLengthMessage(message: string | GConstraintValidator): GValidator<T>;
|
|
86
|
+
/**register a `tooShort` violation handler (use this with `minLength` attribute)*/
|
|
87
|
+
withMinLengthMessage(message: string | GConstraintValidator): GValidator<T>;
|
|
88
|
+
/**register a `patternMismatch` violation handler (use this with `pattern` attribute)*/
|
|
89
|
+
withPatternMismatchMessage(message: string | GConstraintValidator): GValidator<T>;
|
|
90
|
+
/**register a `badInput` violation handler */
|
|
91
|
+
withBadInputMessage(message: string | GConstraintValidator): GValidator<T>;
|
|
92
|
+
/**register a `rangeUnderflow` violation handler (use this with `min` attribute) */
|
|
93
|
+
withRangeUnderflowMessage(message: string | GConstraintValidator): GValidator<T>;
|
|
94
|
+
/**register a `rangeOverflow` violation handler (use this with `max` attribute) */
|
|
95
|
+
withRangeOverflowMessage(message: string | GConstraintValidator): GValidator<T>;
|
|
96
|
+
/**
|
|
97
|
+
* register a `typeMismatch` violation handler<br />
|
|
98
|
+
* if its possible use `pattern` attribute (and `withPatternMismatchMessage`) or `custom validation` instead.<br/>
|
|
99
|
+
* use the `type` attribute to set the input's keyboard (for example type `'tel'` will show on mobile phones only numpads)
|
|
100
|
+
* and then with `pattern` or `custom validation` you can validate it.<br/>
|
|
101
|
+
* the reason for that is `type` is not a solid validation and likely will be replaced anyway.<br />
|
|
102
|
+
* if `pattern` or `custom` are used, then `withTypeMismatchMessage` is ignored
|
|
103
|
+
* */
|
|
104
|
+
withTypeMismatchMessage(message: string | GConstraintValidator): GValidator<T>;
|
|
105
|
+
/**register a `stepMismatch` violation handler (use this with `step` attribute)*/
|
|
106
|
+
withStepMismatchMessage(message: string | GConstraintValidator): GValidator<T>;
|
|
107
|
+
/**register a custom validation handler */
|
|
108
|
+
withCustomValidation(handler: GCustomValidatorHandler<T>): GValidator<T>;
|
|
109
|
+
/**register a custom validation async handler */
|
|
110
|
+
withCustomValidationAsync(handler: GCustomValidatorHandlerAsync<T>): GValidator<T>;
|
|
111
|
+
private __addConstraintValidationHandler;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
type GConstraintValidator = (input: GInputState<any>) => string;
|
|
115
|
+
type GConstraintValidatorHandler = (input: GInputState<any>, validityKey: keyof ValidityState | undefined) => boolean;
|
|
116
|
+
type GCustomValidatorHandler<T> = (input: GInputState<any>, fields: IForm<T>) => RegExp | boolean;
|
|
117
|
+
type GCustomValidatorHandlerAsync<T> = (input: GInputState<any>, fields: IForm<T>) => Promise<ReturnType<GCustomValidatorHandler<T>>>;
|
|
118
|
+
type GInputValidator<T> = GValidator<T> | {
|
|
119
|
+
handlers: GCustomValidatorHandler<T>[];
|
|
120
|
+
constraintHandlers: GConstraintValidatorHandler[];
|
|
121
|
+
asyncHandlers: GCustomValidatorHandlerAsync<T>[];
|
|
122
|
+
hasConstraint(constraint: keyof ValidityState): boolean;
|
|
123
|
+
};
|
|
124
|
+
type GValidators<T = any> = {
|
|
125
|
+
[key in keyof T]?: GInputValidator<T>;
|
|
126
|
+
} & {
|
|
127
|
+
[key: string]: GInputValidator<T> | undefined;
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
type RawData<T> = {
|
|
131
|
+
[key in keyof T]: T[key];
|
|
132
|
+
};
|
|
133
|
+
type ToURLSearchParamsOptions<T> = {
|
|
134
|
+
exclude?: (keyof T)[];
|
|
135
|
+
include?: (keyof T)[];
|
|
136
|
+
transform?: {
|
|
137
|
+
[key in keyof T]?: (value: GFormState<T>[key]['value']) => any;
|
|
138
|
+
};
|
|
139
|
+
};
|
|
140
|
+
type ToRawDataOptions<T> = ToURLSearchParamsOptions<T>;
|
|
141
|
+
type ToFormDataOptions<T> = ToURLSearchParamsOptions<T>;
|
|
142
|
+
type RNGFormState<T> = IForm<T> & {
|
|
143
|
+
/**indicates whether the form is valid */
|
|
144
|
+
isValid: boolean;
|
|
145
|
+
/**indicates whether the form is invalid */
|
|
146
|
+
isInvalid: boolean;
|
|
147
|
+
/**returns an object with key value pairs represents the form*/
|
|
148
|
+
toRawData(options?: ToRawDataOptions<T>): RawData<T>;
|
|
149
|
+
/**returns `URLSearchParams` instance represents the form*/
|
|
150
|
+
toURLSearchParams(options?: ToURLSearchParamsOptions<T>): URLSearchParams;
|
|
151
|
+
/**update the validity state (invokes all defined validators) */
|
|
152
|
+
checkValidity(): boolean;
|
|
153
|
+
/**manually dispatch any changes to input(s) */
|
|
154
|
+
dispatchChanges: (changes: PartialForm<T> & {
|
|
155
|
+
[key: string]: Partial<GInputState<any>>;
|
|
156
|
+
}) => void;
|
|
157
|
+
};
|
|
158
|
+
type GFormState<T> = RNGFormState<T> & {
|
|
159
|
+
/**returns `FormData` instance represents the form*/
|
|
160
|
+
toFormData(options?: ToFormDataOptions<T>): FormData;
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
type RNGFormProps<T> = {
|
|
164
|
+
children?: ReactNode | ReactNode[] | ((state: RNGFormState<T>) => ReactNode | ReactNode[]);
|
|
165
|
+
/** @param stateRef - pass a ref which will points to the current state of the form (optional). */
|
|
166
|
+
stateRef?: RefObject<RNGFormState<T> | undefined>;
|
|
167
|
+
/** @param validators - an object for handling validations (optional). */
|
|
168
|
+
validators?: GValidators<T>;
|
|
169
|
+
/** @param onInit - execute a handler once the form has initialized (optional). */
|
|
170
|
+
onInit?: (state: RNGFormState<T>) => void | PartialForm<T> | Promise<void | PartialForm<T>>;
|
|
171
|
+
/** @param el - the element to use as the form container. */
|
|
172
|
+
el: FC<any>;
|
|
173
|
+
};
|
|
174
|
+
/**
|
|
175
|
+
* build dynamic forms with validations.
|
|
176
|
+
* @link Docs - https://gform-react.onrender.com
|
|
177
|
+
* @link Npm - https://www.npmjs.com/package/gform-react
|
|
178
|
+
*/
|
|
179
|
+
declare const RNGForm: <T>(props: RNGFormProps<T> & {
|
|
180
|
+
ref?: React.Ref<HTMLFormElement>;
|
|
181
|
+
}) => React.ReactElement | null;
|
|
182
|
+
|
|
183
|
+
export { RNGForm, RNGInput };
|
package/package.json
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "gform-react",
|
|
3
|
-
"version": "2.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "2.6.0",
|
|
4
|
+
"description": "Build generic forms with validations for React-based applications",
|
|
5
5
|
"author": "Tal Maman, Arkady Birko",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"dev": "npm run clean && rollup -w -c rollup.dev-server.config.mjs --environment build:development",
|
|
9
9
|
"debug": "npm run clean && rollup -w -c rollup.dev-server.config.mjs --environment build:development --environment mode:debug",
|
|
10
10
|
"strict": "npm run clean && rollup -w -c rollup.dev-server.config.mjs --environment build:development --environment mode:debug|strict",
|
|
11
|
-
"clean": "rimraf ./dist && rimraf ./native",
|
|
12
|
-
"build:prod": "rollup -c --environment build:production",
|
|
13
11
|
"build:dev": "rollup -c --environment build:development",
|
|
12
|
+
"build:prod": "rollup -c --environment build:production",
|
|
14
13
|
"build": "npm run tscheck && npm run lint && npm run security:check && npm run clean && npm run build:dev && npm run build:prod",
|
|
15
14
|
"tscheck": "tsc --noEmit",
|
|
16
15
|
"security:check": "npm audit --production --audit-level high",
|
|
17
16
|
"lint": "eslint src --ext .ts --ext .tsx",
|
|
18
17
|
"lint:fix": "eslint src --ext .ts --ext .tsx --fix",
|
|
19
|
-
"
|
|
18
|
+
"clean": "rimraf ./dist && rimraf ./native",
|
|
19
|
+
"test": "echo \"No tests specified\" && exit 1"
|
|
20
20
|
},
|
|
21
|
-
"typings": "dist/index.d.ts",
|
|
22
21
|
"main": "dist/cjs/index.js",
|
|
23
22
|
"module": "dist/esm/index.js",
|
|
23
|
+
"typings": "dist/index.d.ts",
|
|
24
24
|
"exports": {
|
|
25
25
|
".": {
|
|
26
26
|
"require": "./dist/cjs/index.js",
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
"production": "./dist/esm/index.js",
|
|
29
29
|
"development": "./dist/esm/index.development.js"
|
|
30
30
|
},
|
|
31
|
+
"types": "./dist/index.d.ts",
|
|
31
32
|
"default": "./dist/esm/index.js"
|
|
32
33
|
},
|
|
33
34
|
"./native": {
|
|
@@ -36,6 +37,7 @@
|
|
|
36
37
|
"production": "./native/dist/esm/index.js",
|
|
37
38
|
"development": "./native/dist/esm/index.development.js"
|
|
38
39
|
},
|
|
40
|
+
"types": "./native/dist/index.d.ts",
|
|
39
41
|
"default": "./native/dist/esm/index.js"
|
|
40
42
|
}
|
|
41
43
|
},
|
|
@@ -77,6 +79,7 @@
|
|
|
77
79
|
"rimraf": "^5.0.1",
|
|
78
80
|
"rollup": "^4.53.2",
|
|
79
81
|
"rollup-plugin-copy": "^3.5.0",
|
|
82
|
+
"rollup-plugin-dts": "^6.3.0",
|
|
80
83
|
"rollup-plugin-live-server": "^2.0.0",
|
|
81
84
|
"typescript": "^5.9.3"
|
|
82
85
|
},
|
|
@@ -99,4 +102,4 @@
|
|
|
99
102
|
"bugs": {
|
|
100
103
|
"url": "https://github.com/talmaman/gform-react/issues"
|
|
101
104
|
}
|
|
102
|
-
}
|
|
105
|
+
}
|