Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use == where possible and precompute .length #4599

Merged
merged 2 commits into from
Dec 8, 2024
Merged

Use == where possible and precompute .length #4599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f33cc3e
Use == where possible and precompute .length
JoviDeCroock Dec 7, 2024
da20015
Merge branch 'main' into optimize-bundles
JoviDeCroock Dec 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 13 additions & 12 deletions src/diff/children.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,8 @@ export function diffChildren(
newParentVNode,
renderResult,
oldChildren,
oldDom
oldDom,
newChildrenLength
);

for (i = 0; i < newChildrenLength; i++) {
Expand Down Expand Up @@ -151,7 +152,8 @@ function constructNewChildrenArray(
newParentVNode,
renderResult,
oldChildren,
oldDom
oldDom,
newChildrenLength
) {
/** @type {number} */
let i;
Expand All @@ -160,7 +162,6 @@ function constructNewChildrenArray(
/** @type {VNode} */
let oldVNode;

const newChildrenLength = renderResult.length;
let oldChildrenLength = oldChildren.length,
remainingOldChildren = oldChildrenLength;

Expand All @@ -177,7 +178,7 @@ function constructNewChildrenArray(
typeof childVNode == 'boolean' ||
typeof childVNode == 'function'
) {
childVNode = newParentVNode._children[i] = null;
newParentVNode._children[i] = null;
continue;
}
// If this newVNode is being reused (e.g. <div>{reuse}{reuse}</div>) in the same diff,
Expand Down Expand Up @@ -258,7 +259,7 @@ function constructNewChildrenArray(
if (typeof childVNode.type != 'function') {
childVNode._flags |= INSERT_VNODE;
}
} else if (matchingIndex !== skewedIndex) {
} else if (matchingIndex != skewedIndex) {
// When we move elements around i.e. [0, 1, 2] --> [1, 0, 2]
// --> we diff 1, we find it at position 1 while our skewed index is 0 and our skew is 0
// we set the skew to 1 as we found an offset.
Expand Down Expand Up @@ -301,7 +302,7 @@ function constructNewChildrenArray(
if (remainingOldChildren) {
for (i = 0; i < oldChildrenLength; i++) {
oldVNode = oldChildren[i];
if (oldVNode != null && (oldVNode._flags & MATCHED) === 0) {
if (oldVNode != null && (oldVNode._flags & MATCHED) == 0) {
if (oldVNode._dom == oldDom) {
oldDom = getDomSibling(oldVNode);
}
Expand Down Expand Up @@ -347,7 +348,7 @@ function insert(parentVNode, oldDom, parentDom) {

do {
oldDom = oldDom && oldDom.nextSibling;
} while (oldDom != null && oldDom.nodeType === 8);
} while (oldDom != null && oldDom.nodeType == 8);

return oldDom;
}
Expand Down Expand Up @@ -402,16 +403,16 @@ function findMatchingIndex(
// If there is an unkeyed functional VNode, that isn't a built-in like our Fragment,
// we should not search as we risk re-using state of an unrelated VNode.
let shouldSearch =
(typeof type !== 'function' || type === Fragment || key) &&
(typeof type != 'function' || type === Fragment || key) &&
remainingOldChildren >
(oldVNode != null && (oldVNode._flags & MATCHED) === 0 ? 1 : 0);
(oldVNode != null && (oldVNode._flags & MATCHED) == 0 ? 1 : 0);

if (
oldVNode === null ||
(oldVNode &&
key == oldVNode.key &&
type === oldVNode.type &&
(oldVNode._flags & MATCHED) === 0)
(oldVNode._flags & MATCHED) == 0)
) {
return skewedIndex;
} else if (shouldSearch) {
Expand All @@ -420,7 +421,7 @@ function findMatchingIndex(
oldVNode = oldChildren[x];
if (
oldVNode &&
(oldVNode._flags & MATCHED) === 0 &&
(oldVNode._flags & MATCHED) == 0 &&
key == oldVNode.key &&
type === oldVNode.type
) {
Expand All @@ -433,7 +434,7 @@ function findMatchingIndex(
oldVNode = oldChildren[y];
if (
oldVNode &&
(oldVNode._flags & MATCHED) === 0 &&
(oldVNode._flags & MATCHED) == 0 &&
key == oldVNode.key &&
type === oldVNode.type
) {
Expand Down
26 changes: 13 additions & 13 deletions src/diff/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,10 +171,10 @@ export function diff(
c._nextState,
componentContext
) === false) ||
newVNode._original === oldVNode._original)
newVNode._original == oldVNode._original)
) {
// More info about this here: https://gist.github.com/JoviDeCroock/bec5f2ce93544d2e6070ef8e0036e4e8
if (newVNode._original !== oldVNode._original) {
if (newVNode._original != oldVNode._original) {
// When we are dealing with a bail because of sCU we have to update
// the props, state and dirty-state.
// when we are dealing with strict-equality we don't as the child could still
Expand Down Expand Up @@ -294,7 +294,7 @@ export function diff(
? MODE_HYDRATE | MODE_SUSPENDED
: MODE_SUSPENDED;

while (oldDom && oldDom.nodeType === 8 && oldDom.nextSibling) {
while (oldDom && oldDom.nodeType == 8 && oldDom.nextSibling) {
oldDom = oldDom.nextSibling;
}

Expand All @@ -313,7 +313,7 @@ export function diff(
}
} else if (
excessDomChildren == null &&
newVNode._original === oldVNode._original
newVNode._original == oldVNode._original
) {
newVNode._children = oldVNode._children;
newVNode._dom = oldVNode._dom;
Expand Down Expand Up @@ -405,8 +405,8 @@ function diffElementNodes(
let checked;

// Tracks entering and exiting namespaces when descending through the tree.
if (nodeType === 'svg') namespace = SVG_NAMESPACE;
else if (nodeType === 'math') namespace = MATH_NAMESPACE;
if (nodeType == 'svg') namespace = SVG_NAMESPACE;
else if (nodeType == 'math') namespace = MATH_NAMESPACE;
else if (!namespace) namespace = XHTML_NAMESPACE;

if (excessDomChildren != null) {
Expand All @@ -418,8 +418,8 @@ function diffElementNodes(
// excessDomChildren so it isn't later removed in diffChildren
if (
value &&
'setAttribute' in value === !!nodeType &&
(nodeType ? value.localName === nodeType : value.nodeType === 3)
'setAttribute' in value == !!nodeType &&
(nodeType ? value.localName == nodeType : value.nodeType == 3)
) {
dom = value;
excessDomChildren[i] = null;
Expand All @@ -429,7 +429,7 @@ function diffElementNodes(
}

if (dom == null) {
if (nodeType === null) {
if (nodeType == null) {
return document.createTextNode(newProps);
}

Expand Down Expand Up @@ -530,7 +530,7 @@ function diffElementNodes(
newVNode,
oldVNode,
globalContext,
nodeType === 'foreignObject' ? XHTML_NAMESPACE : namespace,
nodeType == 'foreignObject' ? XHTML_NAMESPACE : namespace,
excessDomChildren,
commitQueue,
excessDomChildren
Expand All @@ -551,7 +551,7 @@ function diffElementNodes(
// As above, don't diff props during hydration
if (!isHydrating) {
i = 'value';
if (nodeType === 'progress' && inputValue == null) {
if (nodeType == 'progress' && inputValue == null) {
dom.removeAttribute('value');
} else if (
inputValue !== UNDEFINED &&
Expand All @@ -560,11 +560,11 @@ function diffElementNodes(
// is missing the progress bar is treated as indeterminate.
// To fix that we'll always update it when it is 0 for progress elements
(inputValue !== dom[i] ||
(nodeType === 'progress' && !inputValue) ||
(nodeType == 'progress' && !inputValue) ||
// This is only for IE 11 to fix <select> value not being updated.
// To avoid a stale select value we need to set the option.value
// again, which triggers IE11 to re-evaluate the select value
(nodeType === 'option' && inputValue !== oldProps[i]))
(nodeType == 'option' && inputValue !== oldProps[i]))
) {
setProperty(dom, i, inputValue, oldProps[i], namespace);
}
Expand Down
14 changes: 7 additions & 7 deletions src/diff/props.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { IS_NON_DIMENSIONAL, SVG_NAMESPACE } from '../constants';
import options from '../options';

function setStyle(style, key, value) {
if (key[0] === '-') {
if (key[0] == '-') {
style.setProperty(key, value == null ? '' : value);
} else if (value == null) {
style[key] = '';
Expand Down Expand Up @@ -39,7 +39,7 @@ let eventClock = 0;
export function setProperty(dom, name, value, oldValue, namespace) {
let useCapture;

o: if (name === 'style') {
o: if (name == 'style') {
if (typeof value == 'string') {
dom.style.cssText = value;
} else {
Expand All @@ -65,14 +65,14 @@ export function setProperty(dom, name, value, oldValue, namespace) {
}
}
// Benchmark for comparison: https://esbench.com/bench/574c954bdb965b9a00965ac6
else if (name[0] === 'o' && name[1] === 'n') {
useCapture = name !== (name = name.replace(CAPTURE_REGEX, '$1'));
else if (name[0] == 'o' && name[1] == 'n') {
useCapture = name != (name = name.replace(CAPTURE_REGEX, '$1'));

// Infer correct casing for DOM built-in events:
if (
name.toLowerCase() in dom ||
name === 'onFocusOut' ||
name === 'onFocusIn'
name == 'onFocusOut' ||
name == 'onFocusIn'
)
name = name.toLowerCase().slice(2);
else name = name.slice(2);
Expand Down Expand Up @@ -136,7 +136,7 @@ export function setProperty(dom, name, value, oldValue, namespace) {

if (typeof value == 'function') {
// never serialize functions as attribute values
} else if (value != null && (value !== false || name[4] === '-')) {
} else if (value != null && (value !== false || name[4] == '-')) {
dom.setAttribute(name, name == 'popover' && value == true ? '' : value);
} else {
dom.removeAttribute(name);
Expand Down
2 changes: 1 addition & 1 deletion src/render.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { slice } from './util';
*/
export function render(vnode, parentDom, replaceNode) {
// https://github.com/preactjs/preact/issues/3794
if (parentDom === document) {
if (parentDom == document) {
parentDom = document.documentElement;
}

Expand Down
Loading