style property of Ink nodes contains the changed fields of style object, rather than a full style object itself. As a result, style in internal representation of an Ink node is inconsistent what's actually passed via a style prop to ink-box (rendered by Box) or ink-text (rendered by Text).
borderStyle hasn't been changed between renders, so it's no longer present in the internal style object. This led to https://github.com/vadimdemedes/ink/pull/345, which actually didn't have a proper solution to the root problem (style being out of sync), but rather a workaround that special-cased props like borderStyle to always be present in the style object.
Solution
This PR does several things to remove this workaround I shipped before:
Make setStyle function responsible for only setting styles and not updating Yoga node.
Change reconciler's prepareUpdate to diff props and props.style prop separately.
Skip update entirely if props or props.style hasn't changed. It's actually unrelated to this PR, but still a nice improvement.
Reconciler is now the one who updates styles of a Yoga node, not setStyle function.
With this update, style is always consistent between an internal representation of an Ink node and what's passed via style prop to a React component. At the same time, reconciler still updates Yoga node with styles that were changed since last render.
Problem
style
property of Ink nodes contains the changed fields ofstyle
object, rather than a fullstyle
object itself. As a result,style
in internal representation of an Ink node is inconsistent what's actually passed via astyle
prop toink-box
(rendered byBox
) orink-text
(rendered byText
).Here's example code demonstrating the problem:
borderStyle
hasn't been changed between renders, so it's no longer present in the internalstyle
object. This led to https://github.com/vadimdemedes/ink/pull/345, which actually didn't have a proper solution to the root problem (style
being out of sync), but rather a workaround that special-cased props likeborderStyle
to always be present in thestyle
object.Solution
This PR does several things to remove this workaround I shipped before:
setStyle
function responsible for only setting styles and not updating Yoga node.prepareUpdate
to diffprops
andprops.style
prop separately.props
orprops.style
hasn't changed. It's actually unrelated to this PR, but still a nice improvement.setStyle
function.With this update,
style
is always consistent between an internal representation of an Ink node and what's passed viastyle
prop to a React component. At the same time, reconciler still updates Yoga node with styles that were changed since last render.