Repository navigation
perf(grid-item): write the position style to the element instead of re-rendering - #74
Closed
zahidzorbaz wants to merge 8 commits into
Closed
zahidzorbaz wants to merge 8 commits into
zahidzorbaz wants to merge 8 commits into
Conversation
…loop Validation, compactor result checks and the engine collision helpers ran an O(n^2) pairwise loop on every layout, even when layouts have no collision. hasAnyCollision sorts items by their top edge (y) and sweeps once; the pairwise loop now only runs when the sweep found an overlap, to report the same first colliding item as before.
The engine's committed layout, session base and working copies and each evaluation's next layout are now deep-frozen after their validating clone and recorded in a private WeakSet. Snapshotting a recorded array copies it field by field instead of re-reading every descriptor, and states that never change are shared instead of cloned. External inputs keep the validating path. Returned and emitted layout arrays and items remain mutable copies, isolated from internal state.
…hanged Every commit and drag step bumps positionStyleRevision and each GridItem recomputes its style. A new object with the same values still triggered a re-render, so every item re-rendered whenever any item moved. GridItem now assigns the style only when sameStyle finds a difference; GridLayout keeps the root height object and renderedLayoutStyle the same way.
The layout watcher runs before the config watcher, so a layout that arrived together with a new colNum was validated with the old column count. Going from a narrow to a wide grid (colNum 1 -> 12) emitted a transient invalid-layout and one invalid-registration (missing-id) per new item, then recovered a tick later. In non-responsive mode the layout is now observed with the incoming colNum (restored when the layout is not accepted), and snapshotObservedLayout validates with the same next config acceptExternalLayout applies. A layout that does not fit the new colNum is still rejected.
Every GridItem onUpdated validated the whole registry synchronously and each registration queued another full pass; every pass searched the deep reactive currentLayout linearly per item. With n items re-rendering this was O(n^3) proxy reads during a flush that re-rendered all items. - the registry keeps at most one deferred pass, queued with queuePostFlushCb so it runs at the end of the current flush; synchronous passes consume it - hasLayoutItem, the injected GridItem lookup and the resize constraint check use an id index built from the raw layout once per replacement - id-change cancellation and the interaction/layout-sync passes stay synchronous
…ndler Vue runs post-flush callbacks without try/finally, so a throw from the queuePostFlushCb validation left activePostFlushCbs set and stopped every later updated/mounted hook and flush: 'post' watcher on the page. The callback now catches and reports through handleError (SCHEDULER) on the GridLayout instance; a throwing errorHandler is rethrown from a microtask. Tests: the scheduler keeps running after a throwing pass; an invalid registration is emitted in the same flush, before a later nextTick; an id removed by an external layout update is missing-id through the index.
…e-rendering A box-only change re-rendered every moved GridItem, and each re-render queued a registry pass that read offsetParent and forced a style/layout of the whole grid. GridItem now keeps state.style as the source and syncs a non-reactive renderStyle plus the element's inline style from a synchronous watcher, writing only the changed properties. Other re-renders still patch the current values, so merged fallthrough styles never restore a stale box. The root renders under v-if="renderStyle" so a GridItem outside GridLayout keeps rendering nothing (E2E-26).
…rites The registry pass now reads layout membership and the DOM ownership facts of all registered items first, then applies registration state, style resets, interaction unbinding and errors in the same order as before. A rejected item's style reset no longer sits between two offsetParent reads, so it no longer forces a style/layout per rejected item.
This was referenced Oct 6, 2026
✅ Deploy Preview for grid-layout-plus ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
qmhc
marked this pull request as ready for review
October 13, 2026 04:06
qmhc
approved these changes
Oct 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Item 6 of the proposal in #71, stacked on #73. Please review only the last two commits. Draft until the earlier PRs are merged.
Problem
Even with equal styles skipped, an item whose box does change is re-rendered. Each re-render runs
onUpdated, which requests a registry pass, and the pass readsoffsetParent, forcing a style/layout recalculation of the whole grid. During a drag this happens on every pointer step.Change
perf(grid-item): write the position style to the element instead of re-rendering:GridItemkeepsstate.styleas the source of truth. A synchronous watcher mirrors it into a non-reactiverenderStyleobject and into the element's inline style, writing only changed properties and removing keys the next style no longer has. The template bindsrenderStyle, so other re-renders (fallthroughstyle/class, SSR, first mount) always output current values. The root renders underv-if="renderStyle", so aGridItemoutside aGridLayoutstill renders nothing. Position style keys and values are limited byvalidatePositionStyleResultand cannot change the item's containing block, so skipping the registry pass for a box-only change does not weaken the ownership guarantee.perf(grid-layout): read every ownership fact before a registry pass writes: a registry pass reads layout membership and the DOM ownership facts of all registered items first, then applies registration state, style resets, interaction unbinding and errors in the same order as before. A rejected item's style reset no longer sits between twooffsetParentreads.In a Chrome run with 300 cells and the earlier PRs applied, the
pointermovehandler during a drag went from 345 ms to 2 ms. No public API change.Behaviour note for review: position keys (
transform,top,width, ...) passed through an externalstyleattribute onGridItemare not supported; the direct write wins until the next render. If you want that case handled explicitly (for example by dropping those keys from the fallthroughstyle), I can add it.Tests
tests/style-equality.spec.tsx(newdescribe): an external update validates once; drag steps start no registry pass (with a positive control); fallthrough style/class re-renders keep the current box; the exposed style state and the element agree after moves and a reset; the placeholder follows the drag.tests/registry-validation.spec.tsx: a pass reads every containing block before it writes any rejected item.pnpm test(456 passed),pnpm lint,pnpm lint:style,pnpm test:types,pnpm check:docsandpnpm buildpass.