Repository navigation
perf(grid-item): place a new item from its first render - #75
Closed
zahidzorbaz wants to merge 9 commits into
Closed
zahidzorbaz wants to merge 9 commits into
zahidzorbaz wants to merge 9 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.
An item the registry has not confirmed yet now renders with the box GridLayout already committed for its id instead of an empty style. The empty first render let a forced style read fix transform: none, so new items flew in from the container origin over the transform transition. registered stays false until the registry pass, so ownership, interaction binding and container-resized side effects are unchanged; a rejected item has its style cleared whether it was registered before or not.
✅ 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 7 of the proposal in #71, stacked on #74. Please review only the last commit. Draft until the earlier PRs are merged.
Symptom
When a grid mounts or new items are added, items visibly fly in from the top-left corner of the container (in a 300-cell grid, all 300 did on load).
Cause
A
GridItemthat the registry has not confirmed yet renders with an empty style. If anything forces a style recalculation before the next render (common while a large page mounts), the browser fixestransform: noneas the starting value of the transition, and thetransformtransition then animates each item from the container origin to its real position.Change
GridLayouthas already committed for its id, instead of an empty style.registeredstaysfalseuntil the registry pass, so ownership, interaction binding (nointeractjsinstance, nodragstartlistener) andcontainer-resizedside effects are unchanged.Result: corner fly-in 300 → 0 cells. No public API change.
Tests
tests/first-placement.spec.tsx: the committed box is rendered before the registry confirms the item; an item with an invalid containing block has its box cleared and errors keep their order;missing-idand duplicate-id paths are unchanged; an unconfirmed item cannot start an interaction (checked on the per-elementinteractjsinstance anddragstartlistener, with a confirmed item as positive control).pnpm test(460 passed),pnpm lint,pnpm lint:style,pnpm test:types,pnpm check:docsandpnpm buildpass.