perf(editor): 2.3x* faster

[surajshetty3416]

Initial load

(on fairly large page with some components)

Before:

After:

Note: Further optimizing for initial load scripting overhead somehow degrades the UX. Might take a look at it again later once I have the better approach to solve it.

Summary:

• Event listeners reduced by ~91% (from 11,631 to 1,014 max listeners)
• Total execution time reduced by ~57% (from 5203ms to 2212ms)
• Scripting time reduced by ~57% (from 3579ms to 1540ms)
• Node count reduced by ~53% (from 28,677 to 13,372)
• Memory usage reduced significantly (peak JS heap reduced from 185MB to 105MB)

Following strategies were used to achieve this:

• Delegate block level event listeners to parent (this significantly reduces number of events and memory consumption)
• Commonify context menu, move it out of block and add global event listener. (Affects node count and number of listeners)
• Convert reference component of a block to computed property (avoids repeated function call to findBlock which highly impacts time required for scripting during initial load)
• Lazy load layers nodes (affects scripting overhead, node count, and number of listeners)
• Mark few blocks as "raw" using markRaw where reactivity is not needed (affects scripting overhead) (yet to properly test all scenarios)

Other performance benefits:

Due to event delegation
- Builder can scale better as more blocks are added to the page. (i.e. number of listeners will roughly be consistent irrespective of the size of the page)
- Toggling of other displays (breakpoints) are much snappier as there is very less overhead of attaching events per block. Also, now the breakpoint toggle does not re-render if it is already rendered once (thanks to lazy-show strategy)
- Faster undo/redo

UX Fixes:

• Do not show editor icon in mobile
• Show a small screen size warning instead of broken editor
• Reset hoveredBreakpoint and activeBreakpoint on new breakpoint selection
• Fade transition while loading page

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 41.94%. Comparing base (5a23825) to head (801b5c0).
Report is 34 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop     #276   +/-   ##
========================================
  Coverage    41.94%   41.94%           
========================================
  Files           15       15           
  Lines          906      906           
========================================
  Hits           380      380           
  Misses         526      526           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[surajshetty3416]

🎉 This PR is included in version 1.13.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀