Skip to content

Refactor preview React code.

Massive refactor to use Hooks and stop Preview.tsx just getting bigger and bigger.

  1. Fixed multiple fetch requests getting sent each time data is changed
  2. Deleting a component now also deletes its model data in the JSON
  3. Moved loads of iframe based logic to their own hooks.
  4. Implemented a mutation observer inside the preview iFrames so that the iFrame itself is always the same height as its content (to prevent having scrollbars on the preview)
  5. Implemented resize/mutation observers to make sure Outline is always kept in sync with size/position of the element it is drawn around.
  6. Fixed issues with deleting components that are hovered or selected where the outline would get stuck
  7. Added a couple of slightly less awful looking test SDC's as a temporay measure to get something nice to work with
  8. Added a rudimentary visual loading state when the iFrame is being re-loaded

Merge request reports