@vaadin/hilla-react-form 24.5.0-alpha1 → 24.5.0-alpha2
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/index.d.ts.map +1 -1
- package/index.js +5 -1
- package/index.js.map +2 -2
- package/package.json +2 -2
package/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,mBAAmB,EAIxB,KAAK,wBAAwB,EAM7B,KAAK,SAAS,EACd,KAAK,KAAK,EACV,KAAK,UAAU,EAChB,MAAM,wBAAwB,CAAC;AAahC,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,IAAI,IAAI,CAAC;IACf,QAAQ,IAAI,IAAI,CAAC;IACjB,OAAO,IAAI,IAAI,CAAC;IAChB,GAAG,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;CACxC,CAAC,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,oBAAoB,CAAC;AAE5E,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,aAAa,IAAI,QAAQ,CAAC;IAChE,YAAY,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACxB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,CAAC;IACtB,SAAS,EAAE,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,SAAS,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACnD,aAAa,CAAC,UAAU,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACpE,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC;IAC5C,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,QAAQ,IAAI,OAAO,CAAC,SAAS,UAAU,EAAE,CAAC,CAAC;CAC5C,CAAC,CAAC;AAEH,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,aAAa,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GACnG,QAAQ,CAAC;IACP,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACvC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAChC,MAAM,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,CAAC;IAC/C,KAAK,IAAI,IAAI,CAAC;IACd,KAAK,IAAI,IAAI,CAAC;IACd,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/C,MAAM,IAAI,IAAI,CAAC;CAChB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,mBAAmB,EAIxB,KAAK,wBAAwB,EAM7B,KAAK,SAAS,EACd,KAAK,KAAK,EACV,KAAK,UAAU,EAChB,MAAM,wBAAwB,CAAC;AAahC,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,IAAI,IAAI,CAAC;IACf,QAAQ,IAAI,IAAI,CAAC;IACjB,OAAO,IAAI,IAAI,CAAC;IAChB,GAAG,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;CACxC,CAAC,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,oBAAoB,CAAC;AAE5E,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,aAAa,IAAI,QAAQ,CAAC;IAChE,YAAY,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACxB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,CAAC;IACtB,SAAS,EAAE,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,SAAS,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACnD,aAAa,CAAC,UAAU,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACpE,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC;IAC5C,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,QAAQ,IAAI,OAAO,CAAC,SAAS,UAAU,EAAE,CAAC,CAAC;CAC5C,CAAC,CAAC;AAEH,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,aAAa,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GACnG,QAAQ,CAAC;IACP,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACvC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAChC,MAAM,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,CAAC;IAC/C,KAAK,IAAI,IAAI,CAAC;IACd,KAAK,IAAI,IAAI,CAAC;IACd,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/C,MAAM,IAAI,IAAI,CAAC;CAChB,CAAC,CAAC;AA+IL,wBAAgB,OAAO,CAAC,CAAC,SAAS,aAAa,EAC7C,KAAK,EAAE,wBAAwB,CAAC,CAAC,CAAC,EAClC,MAAM,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GACrC,aAAa,CAAC,CAAC,CAAC,CAgClB;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,aAAa,EAAE,KAAK,EAAE,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAQnF"}
|
package/index.js
CHANGED
|
@@ -2,7 +2,7 @@ function __REGISTER__(feature, vaadinObj = window.Vaadin ??= {}) {
|
|
|
2
2
|
vaadinObj.registrations ??= [];
|
|
3
3
|
vaadinObj.registrations.push({
|
|
4
4
|
is: feature ? `${"@vaadin/hilla-react-form"}/${feature}` : "@vaadin/hilla-react-form",
|
|
5
|
-
version: "24.5.0-
|
|
5
|
+
version: "24.5.0-alpha2"
|
|
6
6
|
});
|
|
7
7
|
}
|
|
8
8
|
import {
|
|
@@ -51,6 +51,7 @@ function getFormPart(node) {
|
|
|
51
51
|
};
|
|
52
52
|
}
|
|
53
53
|
function useFields(node) {
|
|
54
|
+
const update = useUpdate();
|
|
54
55
|
return useMemo(() => {
|
|
55
56
|
const registry = /* @__PURE__ */ new WeakMap();
|
|
56
57
|
return (model) => {
|
|
@@ -76,6 +77,7 @@ function useFields(node) {
|
|
|
76
77
|
fieldState.strategy?.removeEventListeners();
|
|
77
78
|
fieldState.element = void 0;
|
|
78
79
|
fieldState.strategy = void 0;
|
|
80
|
+
update();
|
|
79
81
|
return;
|
|
80
82
|
}
|
|
81
83
|
if (!isFieldElement(element)) {
|
|
@@ -87,6 +89,7 @@ function useFields(node) {
|
|
|
87
89
|
fieldState.element.addEventListener("input", fieldState.updateValue);
|
|
88
90
|
fieldState.element.addEventListener("blur", fieldState.changeBlurHandler);
|
|
89
91
|
fieldState.strategy = getDefaultFieldStrategy(element, model);
|
|
92
|
+
update();
|
|
90
93
|
}
|
|
91
94
|
},
|
|
92
95
|
required: false,
|
|
@@ -138,6 +141,7 @@ function useForm(Model, config) {
|
|
|
138
141
|
useEffect(() => {
|
|
139
142
|
binder.addEventListener(CHANGED.type, update);
|
|
140
143
|
clear();
|
|
144
|
+
return () => binder.removeEventListener(CHANGED.type, update);
|
|
141
145
|
}, [binder]);
|
|
142
146
|
return {
|
|
143
147
|
...getFormPart(binder),
|
package/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../scripts/register.js", "src/index.ts"],
|
|
4
|
-
"sourcesContent": ["export function __REGISTER__(feature, vaadinObj = (window.Vaadin ??= {})) {\n vaadinObj.registrations ??= [];\n vaadinObj.registrations.push({\n is: feature ? `${__NAME__}/${feature}` : __NAME__,\n version: __VERSION__,\n });\n}\n", "/* eslint-disable @typescript-eslint/unbound-method */\nimport {\n _fromString,\n _validity,\n type AbstractModel,\n type BinderConfiguration,\n type BinderNode,\n BinderRoot,\n CHANGED,\n type DetachedModelConstructor,\n type FieldStrategy,\n getBinderNode,\n getDefaultFieldStrategy,\n hasFromString,\n isFieldElement,\n type Validator,\n type Value,\n type ValueError,\n} from '@vaadin/hilla-lit-form';\nimport { useEffect, useMemo, useReducer, useRef } from 'react';\nimport type { Writable } from 'type-fest';\n\n// @ts-expect-error: esbuild injection\n// eslint-disable-next-line @typescript-eslint/no-unsafe-call\n__REGISTER__();\n\nfunction useUpdate() {\n const [_, update] = useReducer((x: number) => x + 1, 0);\n return update;\n}\n\nexport type FieldDirectiveResult = Readonly<{\n name: string;\n onBlur(): void;\n onChange(): void;\n onInput(): void;\n ref(element: HTMLElement | null): void;\n}>;\n\nexport type FieldDirective = (model: AbstractModel) => FieldDirectiveResult;\n\nexport type UseFormPartResult<M extends AbstractModel> = Readonly<{\n defaultValue?: Value<M>;\n dirty: boolean;\n errors: readonly ValueError[];\n invalid: boolean;\n model: M;\n name: string;\n field: FieldDirective;\n ownErrors: ReadonlyArray<ValueError<Value<M>>>;\n required: boolean;\n validators: ReadonlyArray<Validator<Value<M>>>;\n value?: Value<M>;\n visited: boolean;\n addValidator(validator: Validator<Value<M>>): void;\n setValidators(validators: ReadonlyArray<Validator<Value<M>>>): void;\n setValue(value: Value<M> | undefined): void;\n setVisited(visited: boolean): void;\n validate(): Promise<readonly ValueError[]>;\n}>;\n\nexport type UseFormResult<M extends AbstractModel> = Omit<UseFormPartResult<M>, 'setValue' | 'value'> &\n Readonly<{\n value: Value<M>;\n submitting: boolean;\n setDefaultValue(value: Value<M>): void;\n setValue(value: Value<M>): void;\n submit(): Promise<Value<M> | undefined | void>;\n reset(): void;\n clear(): void;\n read(value: Value<M> | null | undefined): void;\n update(): void;\n }>;\n\ntype FieldState<T = unknown> = {\n required: boolean;\n invalid: boolean;\n errorMessage: string;\n strategy?: FieldStrategy<T>;\n element?: HTMLElement;\n changeBlurHandler(): void;\n updateValue(): void;\n markVisited(): void;\n ref(element: HTMLElement | null): void;\n};\n\nfunction convertFieldValue<T extends AbstractModel>(model: T, fieldValue: unknown) {\n return typeof fieldValue === 'string' && hasFromString(model) ? model[_fromString](fieldValue) : fieldValue;\n}\n\nfunction getFormPart<M extends AbstractModel>(node: BinderNode<M>): Omit<UseFormPartResult<M>, 'field'> {\n return {\n addValidator: node.addValidator.bind(node),\n defaultValue: node.defaultValue,\n dirty: node.dirty,\n errors: node.errors,\n invalid: node.invalid,\n model: node.model,\n name: node.name,\n ownErrors: node.ownErrors,\n required: node.required,\n setValidators(validators) {\n node.validators = validators;\n },\n setValue(value) {\n node.value = value;\n },\n setVisited(visited: boolean) {\n node.visited = visited;\n },\n validate: node.validate.bind(node),\n validators: node.validators,\n value: node.value,\n visited: node.visited,\n };\n}\n\nfunction useFields<M extends AbstractModel>(node: BinderNode<M>): FieldDirective {\n return useMemo(() => {\n const registry = new WeakMap<AbstractModel, FieldState>();\n\n return ((model: AbstractModel) => {\n const n = getBinderNode(model);\n\n let fieldState = registry.get(model);\n\n if (!fieldState) {\n fieldState = {\n element: undefined,\n errorMessage: '',\n invalid: false,\n changeBlurHandler() {\n fieldState!.updateValue();\n fieldState!.markVisited();\n },\n markVisited() {\n n.visited = true;\n },\n ref(element: HTMLElement | null) {\n if (!element) {\n fieldState!.element?.removeEventListener('change', fieldState!.changeBlurHandler);\n fieldState!.element?.removeEventListener('input', fieldState!.updateValue);\n fieldState!.element?.removeEventListener('blur', fieldState!.changeBlurHandler);\n fieldState!.strategy?.removeEventListeners();\n fieldState!.element = undefined;\n fieldState!.strategy = undefined;\n return;\n }\n\n if (!isFieldElement(element)) {\n throw new TypeError(`Element '${element.localName}' is not a form element`);\n }\n\n if (fieldState!.element !== element) {\n fieldState!.element = element;\n fieldState!.element.addEventListener('change', fieldState!.changeBlurHandler);\n fieldState!.element.addEventListener('input', fieldState!.updateValue);\n fieldState!.element.addEventListener('blur', fieldState!.changeBlurHandler);\n fieldState!.strategy = getDefaultFieldStrategy(element, model);\n }\n },\n required: false,\n strategy: undefined,\n updateValue() {\n if (fieldState!.strategy) {\n // Remove invalid flag, so that .checkValidity() in Vaadin Components\n // does not interfere with errors from Hilla.\n fieldState!.strategy.invalid = false;\n // When bad input is detected, skip reading new value in binder state\n fieldState!.strategy.checkValidity();\n n[_validity] = fieldState!.strategy.validity;\n n.value = convertFieldValue(model, fieldState!.strategy.value);\n }\n },\n };\n\n registry.set(model, fieldState);\n }\n\n if (fieldState.strategy) {\n const valueFromField = convertFieldValue(model, fieldState.strategy.value);\n if (valueFromField !== n.value && !(Number.isNaN(n.value) && Number.isNaN(valueFromField))) {\n fieldState.strategy.value = Number.isNaN(n.value) ? '' : n.value;\n }\n\n if (fieldState.required !== n.required) {\n fieldState.required = n.required;\n fieldState.strategy.required = n.required;\n }\n\n const firstError = n.ownErrors.at(0);\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n const errorMessage = firstError?.message ?? '';\n if (fieldState.errorMessage !== errorMessage) {\n fieldState.errorMessage = errorMessage;\n fieldState.strategy.errorMessage = errorMessage;\n }\n\n // Make sure invalid state is always in sync\n fieldState.invalid = n.invalid;\n fieldState.strategy.invalid = n.invalid;\n }\n\n return {\n name: n.name,\n ref: fieldState.ref,\n };\n }) as FieldDirective;\n }, [node]);\n}\n\nexport function useForm<M extends AbstractModel>(\n Model: DetachedModelConstructor<M>,\n config?: BinderConfiguration<Value<M>>,\n): UseFormResult<M> {\n const configRef = useRef<Writable<BinderConfiguration<Value<M>>>>({});\n configRef.current.onSubmit = config?.onSubmit;\n configRef.current.onChange = config?.onChange;\n const update = useUpdate();\n const binder = useMemo(() => new BinderRoot(Model, configRef.current), [Model]);\n const field = useFields(binder);\n const clear = binder.clear.bind(binder);\n\n useEffect(() => {\n binder.addEventListener(CHANGED.type, update);\n clear(); // this allows to initialize the validation strategies (issue 2282)\n }, [binder]);\n\n return {\n ...getFormPart(binder),\n clear,\n field,\n read: binder.read.bind(binder),\n reset: binder.reset.bind(binder),\n setDefaultValue(defaultValue) {\n binder.defaultValue = defaultValue;\n },\n setValue(value) {\n binder.value = value;\n },\n submit: binder.submit.bind(binder),\n value: binder.value,\n submitting: binder.submitting,\n update,\n };\n}\n\nexport function useFormPart<M extends AbstractModel>(model: M): UseFormPartResult<M> {\n const binderNode = getBinderNode(model);\n const field = useFields(binderNode);\n return {\n ...getFormPart(binderNode),\n field,\n };\n}\n"],
|
|
5
|
-
"mappings": "AAAO,SAAS,aAAa,SAAS,YAAa,OAAO,WAAW,CAAC,GAAI;AACxE,YAAU,kBAAkB,CAAC;AAC7B,YAAU,cAAc,KAAK;AAAA,IAC3B,IAAI,UAAU,GAAG,0BAAQ,IAAI,OAAO,KAAK;AAAA,IACzC,SAAS;AAAA,EACX,CAAC;AACH;ACLA;AAAA,EACE;AAAA,EACA;AAAA,EAIA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,WAAW,SAAS,YAAY,cAAc;AAKvD,aAAa;AAEb,SAAS,YAAY;AACnB,QAAM,CAAC,GAAG,MAAM,IAAI,WAAW,CAAC,MAAc,IAAI,GAAG,CAAC;AACtD,SAAO;AACT;AAyDA,SAAS,kBAA2C,OAAU,YAAqB;AACjF,SAAO,OAAO,eAAe,YAAY,cAAc,KAAK,IAAI,MAAM,WAAW,EAAE,UAAU,IAAI;AACnG;AAEA,SAAS,YAAqC,MAA0D;AACtG,SAAO;AAAA,IACL,cAAc,KAAK,aAAa,KAAK,IAAI;AAAA,IACzC,cAAc,KAAK;AAAA,IACnB,OAAO,KAAK;AAAA,IACZ,QAAQ,KAAK;AAAA,IACb,SAAS,KAAK;AAAA,IACd,OAAO,KAAK;AAAA,IACZ,MAAM,KAAK;AAAA,IACX,WAAW,KAAK;AAAA,IAChB,UAAU,KAAK;AAAA,IACf,cAAc,YAAY;AACxB,WAAK,aAAa;AAAA,IACpB;AAAA,IACA,SAAS,OAAO;AACd,WAAK,QAAQ;AAAA,IACf;AAAA,IACA,WAAW,SAAkB;AAC3B,WAAK,UAAU;AAAA,IACjB;AAAA,IACA,UAAU,KAAK,SAAS,KAAK,IAAI;AAAA,IACjC,YAAY,KAAK;AAAA,IACjB,OAAO,KAAK;AAAA,IACZ,SAAS,KAAK;AAAA,EAChB;AACF;AAEA,SAAS,UAAmC,MAAqC;AAC/E,SAAO,QAAQ,MAAM;AACnB,UAAM,WAAW,oBAAI,QAAmC;AAExD,WAAQ,CAAC,UAAyB;AAChC,YAAM,IAAI,cAAc,KAAK;AAE7B,UAAI,aAAa,SAAS,IAAI,KAAK;AAEnC,UAAI,CAAC,YAAY;AACf,qBAAa;AAAA,UACX,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,oBAAoB;AAClB,uBAAY,YAAY;AACxB,uBAAY,YAAY;AAAA,UAC1B;AAAA,UACA,cAAc;AACZ,cAAE,UAAU;AAAA,UACd;AAAA,UACA,IAAI,SAA6B;AAC/B,gBAAI,CAAC,SAAS;AACZ,yBAAY,SAAS,oBAAoB,UAAU,WAAY,iBAAiB;AAChF,yBAAY,SAAS,oBAAoB,SAAS,WAAY,WAAW;AACzE,yBAAY,SAAS,oBAAoB,QAAQ,WAAY,iBAAiB;AAC9E,yBAAY,UAAU,qBAAqB;AAC3C,yBAAY,UAAU;AACtB,yBAAY,WAAW;AACvB;AAAA,YACF;AAEA,gBAAI,CAAC,eAAe,OAAO,GAAG;AAC5B,oBAAM,IAAI,UAAU,YAAY,QAAQ,SAAS,yBAAyB;AAAA,YAC5E;AAEA,gBAAI,WAAY,YAAY,SAAS;AACnC,yBAAY,UAAU;AACtB,yBAAY,QAAQ,iBAAiB,UAAU,WAAY,iBAAiB;AAC5E,yBAAY,QAAQ,iBAAiB,SAAS,WAAY,WAAW;AACrE,yBAAY,QAAQ,iBAAiB,QAAQ,WAAY,iBAAiB;AAC1E,yBAAY,WAAW,wBAAwB,SAAS,KAAK;AAAA,
|
|
4
|
+
"sourcesContent": ["export function __REGISTER__(feature, vaadinObj = (window.Vaadin ??= {})) {\n vaadinObj.registrations ??= [];\n vaadinObj.registrations.push({\n is: feature ? `${__NAME__}/${feature}` : __NAME__,\n version: __VERSION__,\n });\n}\n", "/* eslint-disable @typescript-eslint/unbound-method */\nimport {\n _fromString,\n _validity,\n type AbstractModel,\n type BinderConfiguration,\n type BinderNode,\n BinderRoot,\n CHANGED,\n type DetachedModelConstructor,\n type FieldStrategy,\n getBinderNode,\n getDefaultFieldStrategy,\n hasFromString,\n isFieldElement,\n type Validator,\n type Value,\n type ValueError,\n} from '@vaadin/hilla-lit-form';\nimport { useEffect, useMemo, useReducer, useRef } from 'react';\nimport type { Writable } from 'type-fest';\n\n// @ts-expect-error: esbuild injection\n// eslint-disable-next-line @typescript-eslint/no-unsafe-call\n__REGISTER__();\n\nfunction useUpdate() {\n const [_, update] = useReducer((x: number) => x + 1, 0);\n return update;\n}\n\nexport type FieldDirectiveResult = Readonly<{\n name: string;\n onBlur(): void;\n onChange(): void;\n onInput(): void;\n ref(element: HTMLElement | null): void;\n}>;\n\nexport type FieldDirective = (model: AbstractModel) => FieldDirectiveResult;\n\nexport type UseFormPartResult<M extends AbstractModel> = Readonly<{\n defaultValue?: Value<M>;\n dirty: boolean;\n errors: readonly ValueError[];\n invalid: boolean;\n model: M;\n name: string;\n field: FieldDirective;\n ownErrors: ReadonlyArray<ValueError<Value<M>>>;\n required: boolean;\n validators: ReadonlyArray<Validator<Value<M>>>;\n value?: Value<M>;\n visited: boolean;\n addValidator(validator: Validator<Value<M>>): void;\n setValidators(validators: ReadonlyArray<Validator<Value<M>>>): void;\n setValue(value: Value<M> | undefined): void;\n setVisited(visited: boolean): void;\n validate(): Promise<readonly ValueError[]>;\n}>;\n\nexport type UseFormResult<M extends AbstractModel> = Omit<UseFormPartResult<M>, 'setValue' | 'value'> &\n Readonly<{\n value: Value<M>;\n submitting: boolean;\n setDefaultValue(value: Value<M>): void;\n setValue(value: Value<M>): void;\n submit(): Promise<Value<M> | undefined | void>;\n reset(): void;\n clear(): void;\n read(value: Value<M> | null | undefined): void;\n update(): void;\n }>;\n\ntype FieldState<T = unknown> = {\n required: boolean;\n invalid: boolean;\n errorMessage: string;\n strategy?: FieldStrategy<T>;\n element?: HTMLElement;\n changeBlurHandler(): void;\n updateValue(): void;\n markVisited(): void;\n ref(element: HTMLElement | null): void;\n};\n\nfunction convertFieldValue<T extends AbstractModel>(model: T, fieldValue: unknown) {\n return typeof fieldValue === 'string' && hasFromString(model) ? model[_fromString](fieldValue) : fieldValue;\n}\n\nfunction getFormPart<M extends AbstractModel>(node: BinderNode<M>): Omit<UseFormPartResult<M>, 'field'> {\n return {\n addValidator: node.addValidator.bind(node),\n defaultValue: node.defaultValue,\n dirty: node.dirty,\n errors: node.errors,\n invalid: node.invalid,\n model: node.model,\n name: node.name,\n ownErrors: node.ownErrors,\n required: node.required,\n setValidators(validators) {\n node.validators = validators;\n },\n setValue(value) {\n node.value = value;\n },\n setVisited(visited: boolean) {\n node.visited = visited;\n },\n validate: node.validate.bind(node),\n validators: node.validators,\n value: node.value,\n visited: node.visited,\n };\n}\n\nfunction useFields<M extends AbstractModel>(node: BinderNode<M>): FieldDirective {\n const update = useUpdate();\n\n return useMemo(() => {\n const registry = new WeakMap<AbstractModel, FieldState>();\n\n return ((model: AbstractModel) => {\n const n = getBinderNode(model);\n\n let fieldState = registry.get(model);\n\n if (!fieldState) {\n fieldState = {\n element: undefined,\n errorMessage: '',\n invalid: false,\n changeBlurHandler() {\n fieldState!.updateValue();\n fieldState!.markVisited();\n },\n markVisited() {\n n.visited = true;\n },\n ref(element: HTMLElement | null) {\n if (!element) {\n fieldState!.element?.removeEventListener('change', fieldState!.changeBlurHandler);\n fieldState!.element?.removeEventListener('input', fieldState!.updateValue);\n fieldState!.element?.removeEventListener('blur', fieldState!.changeBlurHandler);\n fieldState!.strategy?.removeEventListeners();\n fieldState!.element = undefined;\n fieldState!.strategy = undefined;\n update();\n return;\n }\n\n if (!isFieldElement(element)) {\n throw new TypeError(`Element '${element.localName}' is not a form element`);\n }\n\n if (fieldState!.element !== element) {\n fieldState!.element = element;\n fieldState!.element.addEventListener('change', fieldState!.changeBlurHandler);\n fieldState!.element.addEventListener('input', fieldState!.updateValue);\n fieldState!.element.addEventListener('blur', fieldState!.changeBlurHandler);\n fieldState!.strategy = getDefaultFieldStrategy(element, model);\n update();\n }\n },\n required: false,\n strategy: undefined,\n updateValue() {\n if (fieldState!.strategy) {\n // Remove invalid flag, so that .checkValidity() in Vaadin Components\n // does not interfere with errors from Hilla.\n fieldState!.strategy.invalid = false;\n // When bad input is detected, skip reading new value in binder state\n fieldState!.strategy.checkValidity();\n n[_validity] = fieldState!.strategy.validity;\n n.value = convertFieldValue(model, fieldState!.strategy.value);\n }\n },\n };\n\n registry.set(model, fieldState);\n }\n\n if (fieldState.strategy) {\n const valueFromField = convertFieldValue(model, fieldState.strategy.value);\n if (valueFromField !== n.value && !(Number.isNaN(n.value) && Number.isNaN(valueFromField))) {\n fieldState.strategy.value = Number.isNaN(n.value) ? '' : n.value;\n }\n\n if (fieldState.required !== n.required) {\n fieldState.required = n.required;\n fieldState.strategy.required = n.required;\n }\n\n const firstError = n.ownErrors.at(0);\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n const errorMessage = firstError?.message ?? '';\n if (fieldState.errorMessage !== errorMessage) {\n fieldState.errorMessage = errorMessage;\n fieldState.strategy.errorMessage = errorMessage;\n }\n\n // Make sure invalid state is always in sync\n fieldState.invalid = n.invalid;\n fieldState.strategy.invalid = n.invalid;\n }\n\n return {\n name: n.name,\n ref: fieldState.ref,\n };\n }) as FieldDirective;\n }, [node]);\n}\n\nexport function useForm<M extends AbstractModel>(\n Model: DetachedModelConstructor<M>,\n config?: BinderConfiguration<Value<M>>,\n): UseFormResult<M> {\n const configRef = useRef<Writable<BinderConfiguration<Value<M>>>>({});\n configRef.current.onSubmit = config?.onSubmit;\n configRef.current.onChange = config?.onChange;\n const update = useUpdate();\n const binder = useMemo(() => new BinderRoot(Model, configRef.current), [Model]);\n const field = useFields(binder);\n const clear = binder.clear.bind(binder);\n\n useEffect(() => {\n binder.addEventListener(CHANGED.type, update);\n clear(); // this allows to initialize the validation strategies (issue 2282)\n return () => binder.removeEventListener(CHANGED.type, update);\n }, [binder]);\n\n return {\n ...getFormPart(binder),\n clear,\n field,\n read: binder.read.bind(binder),\n reset: binder.reset.bind(binder),\n setDefaultValue(defaultValue) {\n binder.defaultValue = defaultValue;\n },\n setValue(value) {\n binder.value = value;\n },\n submit: binder.submit.bind(binder),\n value: binder.value,\n submitting: binder.submitting,\n update,\n };\n}\n\nexport function useFormPart<M extends AbstractModel>(model: M): UseFormPartResult<M> {\n const binderNode = getBinderNode(model);\n const field = useFields(binderNode);\n\n return {\n ...getFormPart(binderNode),\n field,\n };\n}\n"],
|
|
5
|
+
"mappings": "AAAO,SAAS,aAAa,SAAS,YAAa,OAAO,WAAW,CAAC,GAAI;AACxE,YAAU,kBAAkB,CAAC;AAC7B,YAAU,cAAc,KAAK;AAAA,IAC3B,IAAI,UAAU,GAAG,0BAAQ,IAAI,OAAO,KAAK;AAAA,IACzC,SAAS;AAAA,EACX,CAAC;AACH;ACLA;AAAA,EACE;AAAA,EACA;AAAA,EAIA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,WAAW,SAAS,YAAY,cAAc;AAKvD,aAAa;AAEb,SAAS,YAAY;AACnB,QAAM,CAAC,GAAG,MAAM,IAAI,WAAW,CAAC,MAAc,IAAI,GAAG,CAAC;AACtD,SAAO;AACT;AAyDA,SAAS,kBAA2C,OAAU,YAAqB;AACjF,SAAO,OAAO,eAAe,YAAY,cAAc,KAAK,IAAI,MAAM,WAAW,EAAE,UAAU,IAAI;AACnG;AAEA,SAAS,YAAqC,MAA0D;AACtG,SAAO;AAAA,IACL,cAAc,KAAK,aAAa,KAAK,IAAI;AAAA,IACzC,cAAc,KAAK;AAAA,IACnB,OAAO,KAAK;AAAA,IACZ,QAAQ,KAAK;AAAA,IACb,SAAS,KAAK;AAAA,IACd,OAAO,KAAK;AAAA,IACZ,MAAM,KAAK;AAAA,IACX,WAAW,KAAK;AAAA,IAChB,UAAU,KAAK;AAAA,IACf,cAAc,YAAY;AACxB,WAAK,aAAa;AAAA,IACpB;AAAA,IACA,SAAS,OAAO;AACd,WAAK,QAAQ;AAAA,IACf;AAAA,IACA,WAAW,SAAkB;AAC3B,WAAK,UAAU;AAAA,IACjB;AAAA,IACA,UAAU,KAAK,SAAS,KAAK,IAAI;AAAA,IACjC,YAAY,KAAK;AAAA,IACjB,OAAO,KAAK;AAAA,IACZ,SAAS,KAAK;AAAA,EAChB;AACF;AAEA,SAAS,UAAmC,MAAqC;AAC/E,QAAM,SAAS,UAAU;AAEzB,SAAO,QAAQ,MAAM;AACnB,UAAM,WAAW,oBAAI,QAAmC;AAExD,WAAQ,CAAC,UAAyB;AAChC,YAAM,IAAI,cAAc,KAAK;AAE7B,UAAI,aAAa,SAAS,IAAI,KAAK;AAEnC,UAAI,CAAC,YAAY;AACf,qBAAa;AAAA,UACX,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,oBAAoB;AAClB,uBAAY,YAAY;AACxB,uBAAY,YAAY;AAAA,UAC1B;AAAA,UACA,cAAc;AACZ,cAAE,UAAU;AAAA,UACd;AAAA,UACA,IAAI,SAA6B;AAC/B,gBAAI,CAAC,SAAS;AACZ,yBAAY,SAAS,oBAAoB,UAAU,WAAY,iBAAiB;AAChF,yBAAY,SAAS,oBAAoB,SAAS,WAAY,WAAW;AACzE,yBAAY,SAAS,oBAAoB,QAAQ,WAAY,iBAAiB;AAC9E,yBAAY,UAAU,qBAAqB;AAC3C,yBAAY,UAAU;AACtB,yBAAY,WAAW;AACvB,qBAAO;AACP;AAAA,YACF;AAEA,gBAAI,CAAC,eAAe,OAAO,GAAG;AAC5B,oBAAM,IAAI,UAAU,YAAY,QAAQ,SAAS,yBAAyB;AAAA,YAC5E;AAEA,gBAAI,WAAY,YAAY,SAAS;AACnC,yBAAY,UAAU;AACtB,yBAAY,QAAQ,iBAAiB,UAAU,WAAY,iBAAiB;AAC5E,yBAAY,QAAQ,iBAAiB,SAAS,WAAY,WAAW;AACrE,yBAAY,QAAQ,iBAAiB,QAAQ,WAAY,iBAAiB;AAC1E,yBAAY,WAAW,wBAAwB,SAAS,KAAK;AAC7D,qBAAO;AAAA,YACT;AAAA,UACF;AAAA,UACA,UAAU;AAAA,UACV,UAAU;AAAA,UACV,cAAc;AACZ,gBAAI,WAAY,UAAU;AAGxB,yBAAY,SAAS,UAAU;AAE/B,yBAAY,SAAS,cAAc;AACnC,gBAAE,SAAS,IAAI,WAAY,SAAS;AACpC,gBAAE,QAAQ,kBAAkB,OAAO,WAAY,SAAS,KAAK;AAAA,YAC/D;AAAA,UACF;AAAA,QACF;AAEA,iBAAS,IAAI,OAAO,UAAU;AAAA,MAChC;AAEA,UAAI,WAAW,UAAU;AACvB,cAAM,iBAAiB,kBAAkB,OAAO,WAAW,SAAS,KAAK;AACzE,YAAI,mBAAmB,EAAE,SAAS,EAAE,OAAO,MAAM,EAAE,KAAK,KAAK,OAAO,MAAM,cAAc,IAAI;AAC1F,qBAAW,SAAS,QAAQ,OAAO,MAAM,EAAE,KAAK,IAAI,KAAK,EAAE;AAAA,QAC7D;AAEA,YAAI,WAAW,aAAa,EAAE,UAAU;AACtC,qBAAW,WAAW,EAAE;AACxB,qBAAW,SAAS,WAAW,EAAE;AAAA,QACnC;AAEA,cAAM,aAAa,EAAE,UAAU,GAAG,CAAC;AAEnC,cAAM,eAAe,YAAY,WAAW;AAC5C,YAAI,WAAW,iBAAiB,cAAc;AAC5C,qBAAW,eAAe;AAC1B,qBAAW,SAAS,eAAe;AAAA,QACrC;AAGA,mBAAW,UAAU,EAAE;AACvB,mBAAW,SAAS,UAAU,EAAE;AAAA,MAClC;AAEA,aAAO;AAAA,QACL,MAAM,EAAE;AAAA,QACR,KAAK,WAAW;AAAA,MAClB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AACX;AAEO,SAAS,QACd,OACA,QACkB;AAClB,QAAM,YAAY,OAAgD,CAAC,CAAC;AACpE,YAAU,QAAQ,WAAW,QAAQ;AACrC,YAAU,QAAQ,WAAW,QAAQ;AACrC,QAAM,SAAS,UAAU;AACzB,QAAM,SAAS,QAAQ,MAAM,IAAI,WAAW,OAAO,UAAU,OAAO,GAAG,CAAC,KAAK,CAAC;AAC9E,QAAM,QAAQ,UAAU,MAAM;AAC9B,QAAM,QAAQ,OAAO,MAAM,KAAK,MAAM;AAEtC,YAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,MAAM,MAAM;AAC5C,UAAM;AACN,WAAO,MAAM,OAAO,oBAAoB,QAAQ,MAAM,MAAM;AAAA,EAC9D,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AAAA,IACL,GAAG,YAAY,MAAM;AAAA,IACrB;AAAA,IACA;AAAA,IACA,MAAM,OAAO,KAAK,KAAK,MAAM;AAAA,IAC7B,OAAO,OAAO,MAAM,KAAK,MAAM;AAAA,IAC/B,gBAAgB,cAAc;AAC5B,aAAO,eAAe;AAAA,IACxB;AAAA,IACA,SAAS,OAAO;AACd,aAAO,QAAQ;AAAA,IACjB;AAAA,IACA,QAAQ,OAAO,OAAO,KAAK,MAAM;AAAA,IACjC,OAAO,OAAO;AAAA,IACd,YAAY,OAAO;AAAA,IACnB;AAAA,EACF;AACF;AAEO,SAAS,YAAqC,OAAgC;AACnF,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,QAAQ,UAAU,UAAU;AAElC,SAAO;AAAA,IACL,GAAG,YAAY,UAAU;AAAA,IACzB;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/hilla-react-form",
|
|
3
|
-
"version": "24.5.0-
|
|
3
|
+
"version": "24.5.0-alpha2",
|
|
4
4
|
"description": "Hilla form utils for React",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"access": "public"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@vaadin/hilla-lit-form": "24.5.0-
|
|
49
|
+
"@vaadin/hilla-lit-form": "24.5.0-alpha2"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"react": "^18"
|