eclipsesource / jsonforms / 38413509179

85%

push

github

fix(vue): keep renderer bindings stable when they do not change (#2634)

Each change of the JSON Forms state recomputes the `control` bindings of
`useControl` and the `renderer` bindings of `useJsonFormsRenderer`. Both
getters return a new object each time, also when all the values in it are
the same. Vue compares a computed value by identity, thus one edit re-renders
all the renderers in the form. On forms with some hundred controls, this
gives a delay of hundreds of milliseconds for each keystroke.

The computed getters now return the previous bindings object when the new
object are equal. `data`, `schema` and `rootSchema` are compared by identity.
The compare uses identity for all objects that are not plain objects or arrays.
The latter are compared via a deep equal (i.e. compared structurally) because
`Date`, `RegExp`, `Map` and `Set` keep their contents out of their own keys.

The spec now marks its renderers raw, to prevent Vue warnings about reactive components.

`DispatchRenderer` forwards its slots with a `v-for`. Vue marks such slots as dynamic,
and renders the child again each time the dispatcher renders, also when the bindings
of the child did not change. This occurs when a parent gives a new clone of a UI schema
element to the dispatch. The dispatcher now binds no slots when it has none.

12564 of 31934 branches covered (39.34%)

20471 of 24203 relevant lines covered (84.58%)

33.73 hits per line