Find alternative ways of rendering Merge Request Diffs
## Problem Currently we operate under this flow: * Backend sends the diffs per file, per line. * for each line provides the metadata + the rendered HTML for that line * Frontend puts it all together in a data structure * Frontend iterates over that data structure and renders it Current we're treating the diff lines as normal Vue app templates. The Backend representation doesn't clearly match the frontend representation, leading to data wrangling efforts to make them match. ## Hypothesis Finding other ways to get the content of the diffs on the page. Leverage Vue for sprinkling all the interactive bits around the page. (hydrating) ## Open questions * Can/should we do this before we update Vue to Vue 3? * Can/should we leverage web components for this? * Can we find a better way to represent diffs that works better for ~backend and ~frontend? * Should we consider some form of server side rendering, even if not in the traditional sense? (SSR with hypernova, requiring node https://gitlab.com/gitlab-org/gitlab/-/merge_requests/33052) * Should we rethink the Diffs/MRs with a webapp/PWA approach? * ...?
epic