Skip to content

Commit

Permalink
Diff properties in the commit phase instead of generating an update p…
Browse files Browse the repository at this point in the history
…ayload

This removes the concept of prepareUpdate().

React Native already does everything in the commit phase, but generates
a temporary update payload before applying it.

React Fabric does it both in the render phase. Now it just moves it to a
single host config.

For DOM I forked updateProperties into one that does diffing and updating
in one pass vs just applying a pre-diffed updatePayload.
  • Loading branch information
sebmarkbage committed Apr 10, 2023
1 parent ac5fe38 commit e350d9b
Show file tree
Hide file tree
Showing 11 changed files with 590 additions and 95 deletions.
49 changes: 46 additions & 3 deletions packages/react-dom-bindings/src/client/CSSPropertyOperations.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,26 @@ export function createDangerousStringForStyles(styles) {
}
}

export function clearPreviousStyles(node, prevStyles, nextStyles) {
const style = node.style;
for (const styleName in prevStyles) {
if (
prevStyles.hasOwnProperty(styleName) &&
(nextStyles == null || !nextStyles.hasOwnProperty(styleName))
) {
// Clear style
const isCustomProperty = styleName.indexOf('--') === 0;
if (isCustomProperty) {
style.setProperty(styleName, '');
} else if (styleName === 'float') {
style.cssFloat = '';
} else {
style[styleName] = '';
}
}
}
}

/**
* Sets the value for multiple styles on a node. If a value is specified as
* '' (empty string), the corresponding style property will be unset.
Expand Down Expand Up @@ -167,15 +187,38 @@ function expandShorthandMap(styles) {
* becomes .style.fontVariant = ''
*/
export function validateShorthandPropertyCollisionInDev(
styleUpdates,
prevStyles,
nextStyles,
) {
if (__DEV__) {
if (!nextStyles) {
return;
}

const expandedUpdates = expandShorthandMap(styleUpdates);
// Compute the diff as it would happen elsewhere.
const expandedUpdates = {};
if (prevStyles) {
for (const key in prevStyles) {
if (prevStyles.hasOwnProperty(key) && !nextStyles.hasOwnProperty(key)) {
const longhands = shorthandToLonghand[key] || [key];
for (let i = 0; i < longhands.length; i++) {
expandedUpdates[longhands[i]] = key;
}
}
}
}
for (const key in nextStyles) {
if (
nextStyles.hasOwnProperty(key) &&
(!prevStyles || prevStyles[key] !== nextStyles[key])
) {
const longhands = shorthandToLonghand[key] || [key];
for (let i = 0; i < longhands.length; i++) {
expandedUpdates[longhands[i]] = key;
}
}
}

const expandedStyles = expandShorthandMap(nextStyles);
const warnedAbout = {};
for (const key in expandedUpdates) {
Expand All @@ -193,7 +236,7 @@ export function validateShorthandPropertyCollisionInDev(
"avoid this, don't mix shorthand and non-shorthand properties " +
'for the same value; instead, replace the shorthand with ' +
'separate values.',
isValueEmpty(styleUpdates[originalKey]) ? 'Removing' : 'Updating',
isValueEmpty(nextStyles[originalKey]) ? 'Removing' : 'Updating',
originalKey,
correctOriginalKey,
);
Expand Down
Loading

0 comments on commit e350d9b

Please sign in to comment.