liveBook · Manning

patchStyles

As explained in Build a Frontend Web Framework (From Scratch)

patchStyles is a book-specific function that synchronizes DOM element styles with virtual-node style data.

patchStyles keeps an element’s inline styles aligned with style data from old and new virtual nodes. It compares the two style objects, removes obsolete styles, and applies new or changed values. section 8.2.5

Style synchronization

function patchStyles(el, oldStyle = {}, newStyle = {}) { const { added, removed, updated } = objectsDiff(oldStyle, newStyle); for (const style of removed) removeStyle(el, style); for (const style of added.concat(updated)) setStyle(el, style, newStyle[style]); }

How Build a Frontend Web Framework (From Scratch) covers it

How deep it goes
Implements style diffing with removal and update loops, relying on helper functions for actual DOM style changes.
Examples
Uses oldStyle and newStyle objects to remove missing properties and apply added or changed properties.
What it assumes
Assumes virtual nodes, style objects, objectsDiff(), removeStyle(), and setStyle() are available.
What you can do after
Build it from scratch as a small JavaScript function that applies style-object differences to an element.
How it connects
Connects virtual DOM reconciliation with DOM style manipulation, object diffing, and element-node patching.
Cover of Build a Frontend Web Framework (From Scratch)
liveBookmanning.com
Read Build a Frontend Web Framework (From Scratch) on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of Build a Frontend Web Framework (From Scratch). The section links point to the parts of the book it draws on.