From 57dbe6e36fa75012f793cc7d01faf93db086b1fd Mon Sep 17 00:00:00 2001
From: Illya Klymov <xanf@xanf.me>
Date: Wed, 19 Oct 2022 16:54:40 +0300
Subject: [PATCH 01/13] wip

---
 .../javascripts/diffs/components/diff_row.vue |   2 +-
 .../emoji/components/emoji_group.vue          |   2 +-
 .../import_groups/components/import_table.vue |   9 +-
 .../notes/components/diff_with_note.vue       |   1 -
 .../javascripts/pages/import/history/index.js |   1 +
 .../test_reports/test_suite_table.vue         |   4 +-
 .../test_reports/test_summary_table.vue       |   6 +-
 .../components/form/form_footer_actions.vue   |   2 +-
 config/vue3migration/compiler.js              |  40 ++++
 config/vue3migration/compiler_options.js      |  40 ++++
 config/webpack.config.js                      |  46 ++++-
 .../components/vulnerability_detail.vue       |   4 +-
 jest.config.base.js                           |  36 +++-
 package.json                                  |   9 +-
 .../frontend/__helpers__/shared_test_setup.js |   4 +-
 spec/frontend/environment.js                  |   3 +
 spec/frontend/test_setup.js                   |  16 +-
 spec/frontend/vue_compat_test_setup.js        |  60 ++++++
 yarn.lock                                     | 186 ++++++++++++++++--
 19 files changed, 429 insertions(+), 42 deletions(-)
 create mode 100644 config/vue3migration/compiler.js
 create mode 100644 config/vue3migration/compiler_options.js
 create mode 100644 spec/frontend/vue_compat_test_setup.js

diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue
index e5695c4390f165..2466c829557b16 100644
--- a/app/assets/javascripts/diffs/components/diff_row.vue
+++ b/app/assets/javascripts/diffs/components/diff_row.vue
@@ -164,7 +164,7 @@ export default {
 </script>
 
 <!-- eslint-disable-next-line vue/no-deprecated-functional-template -->
-<template functional>
+<template>
   <div
     :class="[
       $options.classNameMap(props),
diff --git a/app/assets/javascripts/emoji/components/emoji_group.vue b/app/assets/javascripts/emoji/components/emoji_group.vue
index 4f4c32af113426..2da0b23250b537 100644
--- a/app/assets/javascripts/emoji/components/emoji_group.vue
+++ b/app/assets/javascripts/emoji/components/emoji_group.vue
@@ -18,7 +18,7 @@ export default {
 </script>
 
 <!-- eslint-disable-next-line vue/no-deprecated-functional-template -->
-<template functional>
+<template>
   <div class="gl-display-flex gl-flex-wrap gl-mb-2">
     <template v-if="props.renderGroup">
       <button
diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
index 66dff77eef89a8..06827f74e5021c 100644
--- a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
+++ b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
@@ -452,7 +452,7 @@ export default {
       // If we've reached this Vue application we have at least one potential import destination
       const defaultTargetNamespace =
         // first option: namespace id was explicitly provided
-        this.availableNamespaces.find((ns) => ns.id === this.defaultTargetNamespace) ??
+        this.availableNamespaces?.find((ns) => ns.id === this.defaultTargetNamespace) ??
         // second option: first available namespace
         this.availableNamespaces[0] ??
         // last resort: if no namespaces are available - suggest creating new namespace at root
@@ -719,6 +719,13 @@ export default {
           </template>
         </gl-table>
       </template>
+      <pagination-bar
+        v-if="hasGroups"
+        :page-info="bulkImportSourceGroups.pageInfo"
+        class="gl-mt-3"
+        @set-page="setPage"
+        @set-page-size="setPageSize"
+      />
     </template>
     <pagination-bar
       v-show="!$apollo.loading && hasGroups"
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index 3bdf8349a12b60..3128b534ee9015 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -89,7 +89,6 @@ export default {
         <template v-if="hasTruncatedDiffLines">
           <tr
             v-for="line in discussion.truncated_diff_lines"
-            v-once
             :key="line.line_code"
             class="line_holder"
           >
diff --git a/app/assets/javascripts/pages/import/history/index.js b/app/assets/javascripts/pages/import/history/index.js
index d540272c26615f..ddcce7a6929c2b 100644
--- a/app/assets/javascripts/pages/import/history/index.js
+++ b/app/assets/javascripts/pages/import/history/index.js
@@ -4,6 +4,7 @@ import ImportHistoryApp from './components/import_history_app.vue';
 function mountImportHistoryApp(mountElement) {
   if (!mountElement) return undefined;
 
+  debugger;
   return new Vue({
     el: mountElement,
     name: 'ImportHistoryRoot',
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
index 1cd28e027f3bf9..2974bd2dd37031 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
@@ -100,7 +100,7 @@ export default {
           {{ __('Duration') }}
         </div>
         <div role="rowheader" class="table-section section-10">
-          {{ __('Details'), }}
+          {{ __('Details') }}
         </div>
       </div>
 
@@ -162,7 +162,7 @@ export default {
         </div>
 
         <div class="table-section section-10 section-wrap">
-          <div role="rowheader" class="table-mobile-header">{{ __('Details'), }}</div>
+          <div role="rowheader" class="table-mobile-header">{{ __('Details') }}</div>
           <div class="table-mobile-content">
             <gl-button v-gl-modal-directive="`test-case-details-${index}`">{{
               __('View details')
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue b/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
index 7ab48da1a9d722..2b7b2d78424569 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
@@ -50,13 +50,13 @@ export default {
           {{ __('Failed') }}
         </div>
         <div role="rowheader" class="table-section section-10 gl-text-center">
-          {{ __('Errors'), }}
+          {{ __('Errors') }}
         </div>
         <div role="rowheader" class="table-section section-10 gl-text-center">
-          {{ __('Skipped'), }}
+          {{ __('Skipped') }}
         </div>
         <div role="rowheader" class="table-section section-10 gl-text-center">
-          {{ __('Passed'), }}
+          {{ __('Passed') }}
         </div>
         <div role="rowheader" class="table-section section-10 gl-pr-5 gl-text-right">
           {{ __('Total') }}
diff --git a/app/assets/javascripts/vue_shared/components/form/form_footer_actions.vue b/app/assets/javascripts/vue_shared/components/form/form_footer_actions.vue
index 26c50345c19f0f..95928dce5b46a8 100644
--- a/app/assets/javascripts/vue_shared/components/form/form_footer_actions.vue
+++ b/app/assets/javascripts/vue_shared/components/form/form_footer_actions.vue
@@ -1,5 +1,5 @@
 <!-- eslint-disable-next-line vue/no-deprecated-functional-template -->
-<template functional>
+<template>
   <footer class="form-actions d-flex justify-content-between">
     <div><slot name="prepend"></slot></div>
     <div><slot></slot></div>
diff --git a/config/vue3migration/compiler.js b/config/vue3migration/compiler.js
new file mode 100644
index 00000000000000..86a194e5abb5b5
--- /dev/null
+++ b/config/vue3migration/compiler.js
@@ -0,0 +1,40 @@
+const { parse, compile: compilerDomCompile } = require('@vue/compiler-dom');
+
+module.exports = {
+  parse,
+  compile(template, options) {
+    const rootNode = parse(template, options);
+    const pendingNodes = [rootNode];
+    while (pendingNodes.length) {
+      const currentNode = pendingNodes.pop();
+      if (
+        currentNode.tag === 'template' &&
+        currentNode.props &&
+        currentNode.props.find((p) => p.name === 'for')
+      ) {
+        let keyCandidate = null;
+        currentNode.children.forEach((node) => {
+          const forIndex = node.props
+            ? node.props.findIndex((prop) => prop.arg && prop.arg.content === 'key')
+            : -1;
+          if (forIndex !== -1) {
+            if (!keyCandidate) {
+              keyCandidate = node.props[forIndex];
+            }
+            node.props.splice(forIndex, 1);
+          }
+        });
+
+        if (keyCandidate) {
+          currentNode.props.push(keyCandidate);
+        }
+      }
+
+      if (currentNode.children) {
+        currentNode.children.forEach((child) => pendingNodes.push(child));
+      }
+    }
+
+    return compilerDomCompile(rootNode, options);
+  },
+};
diff --git a/config/vue3migration/compiler_options.js b/config/vue3migration/compiler_options.js
new file mode 100644
index 00000000000000..86a194e5abb5b5
--- /dev/null
+++ b/config/vue3migration/compiler_options.js
@@ -0,0 +1,40 @@
+const { parse, compile: compilerDomCompile } = require('@vue/compiler-dom');
+
+module.exports = {
+  parse,
+  compile(template, options) {
+    const rootNode = parse(template, options);
+    const pendingNodes = [rootNode];
+    while (pendingNodes.length) {
+      const currentNode = pendingNodes.pop();
+      if (
+        currentNode.tag === 'template' &&
+        currentNode.props &&
+        currentNode.props.find((p) => p.name === 'for')
+      ) {
+        let keyCandidate = null;
+        currentNode.children.forEach((node) => {
+          const forIndex = node.props
+            ? node.props.findIndex((prop) => prop.arg && prop.arg.content === 'key')
+            : -1;
+          if (forIndex !== -1) {
+            if (!keyCandidate) {
+              keyCandidate = node.props[forIndex];
+            }
+            node.props.splice(forIndex, 1);
+          }
+        });
+
+        if (keyCandidate) {
+          currentNode.props.push(keyCandidate);
+        }
+      }
+
+      if (currentNode.children) {
+        currentNode.children.forEach((child) => pendingNodes.push(child));
+      }
+    }
+
+    return compilerDomCompile(rootNode, options);
+  },
+};
diff --git a/config/webpack.config.js b/config/webpack.config.js
index d79e6e12b39b89..d2750b6e19eb35 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -1,6 +1,16 @@
 // eslint-disable-next-line import/order
 const crypto = require('./helpers/patched_crypto');
 
+// const USE_VUE3 = process.env.VUE_VERSION === '3';
+const USE_VUE3 = true;
+if (USE_VUE3) {
+  console.log('using vue3');
+  // @vue/compat does not ship compler-sfc. This should be handled early
+  // eslint-disable-next-line global-require
+  const moduleAlias = require('module-alias');
+  moduleAlias.addAlias('vue/compiler-sfc', '@vue/compiler-sfc');
+}
+
 const fs = require('fs');
 const path = require('path');
 
@@ -12,8 +22,12 @@ const BABEL_LOADER_VERSION = require('babel-loader/package.json').version;
 const CompressionPlugin = require('compression-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const glob = require('glob');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
-const VUE_LOADER_VERSION = require('vue-loader/package.json').version;
+
+const VUE_LOADER = USE_VUE3 ? 'vue-loader-vue3' : 'vue-loader';
+// eslint-disable-next-line import/no-dynamic-require
+const { VueLoaderPlugin } = require(VUE_LOADER);
+// eslint-disable-next-line import/no-dynamic-require
+const VUE_LOADER_VERSION = require(`${VUE_LOADER}/package.json`).version;
 const VUE_VERSION = require('vue/package.json').version;
 
 const { ESBuildMinifyPlugin } = require('esbuild-loader');
@@ -172,6 +186,15 @@ function generateEntries() {
 }
 
 const alias = {
+  ...(USE_VUE3
+    ? {
+        vue: '@vue/compat',
+      }
+    : {}),
+  // We are using source version of @gitlab-ui
+  '@gitlab/ui/scss_to_js': path.join(ROOT_PATH, 'node_modules/@gitlab/ui/scss_to_js'),
+  '@gitlab/ui/dist': '@gitlab/ui/src',
+  '@gitlab/ui': '@gitlab/ui/src',
   // Map Apollo client to apollo/client/core to prevent react related imports from being loaded
   '@apollo/client$': '@apollo/client/core',
   '~': path.join(ROOT_PATH, 'app/assets/javascripts'),
@@ -316,7 +339,10 @@ module.exports = {
       !WEBPACK_USE_ESBUILD_LOADER && {
         test: /\.js$/,
         exclude: (modulePath) =>
-          /node_modules|vendor[\\/]assets/.test(modulePath) && !/\.vue\.js/.test(modulePath),
+          /node_modules|vendor[\\/]assets/.test(modulePath) &&
+          !/\.vue\.js/.test(modulePath) &&
+          !/node_modules[\\/]@gitlab[\\/]ui/.test(modulePath) &&
+          !/node_modules[\\/]bootstrap-vue/.test(modulePath),
         loader: 'babel-loader',
         options: defaultJsOptions,
       },
@@ -343,14 +369,23 @@ module.exports = {
       },
       {
         test: /\.vue$/,
-        loader: 'vue-loader',
+        loader: VUE_LOADER,
         options: {
+          ...(USE_VUE3
+            ? {
+                // eslint-disable-next-line global-require
+                compiler: require('./vue3migration/compiler'),
+                // eslint-disable-next-line global-require
+                compilerOptions: require('./vue3migration/compiler_options'),
+              }
+            : {}),
           cacheDirectory: path.join(CACHE_PATH, 'vue-loader'),
           cacheIdentifier: [
             process.env.NODE_ENV || 'development',
             webpack.version,
             VUE_VERSION,
             VUE_LOADER_VERSION,
+            USE_VUE3 ? 'vue3' : 'vue2',
           ].join('|'),
         },
       },
@@ -400,7 +435,7 @@ module.exports = {
       {
         test: /.css$/,
         use: [
-          'vue-style-loader',
+          'style-loader',
           {
             loader: 'css-loader',
             options: {
@@ -825,6 +860,7 @@ module.exports = {
     ...(DEV_SERVER_ALLOWED_HOSTS ? { allowedHosts: DEV_SERVER_ALLOWED_HOSTS } : {}),
     client: {
       ...(DEV_SERVER_PUBLIC_ADDR ? { webSocketURL: DEV_SERVER_PUBLIC_ADDR } : {}),
+      overlay: false,
     },
   },
 
diff --git a/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue b/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue
index 6445cbb99d7652..9f4bf9d582bf1d 100644
--- a/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue
+++ b/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_detail.vue
@@ -11,9 +11,9 @@ export default {
 </script>
 
 <!-- eslint-disable-next-line vue/no-deprecated-functional-template -->
-<template functional>
+<template>
   <div class="d-sm-flex my-sm-2 my-4">
-    <label class="col-sm-2 text-sm-right gl-font-weight-bold gl-pl-0">{{ props.label }}:</label>
+    <label class="col-sm-2 text-sm-right gl-font-weight-bold gl-pl-0">{{ label }}:</label>
     <div class="col-sm-10 gl-pl-0 gl-text-gray-500">
       <slot></slot>
     </div>
diff --git a/jest.config.base.js b/jest.config.base.js
index 30e11122f81a10..569f3b88613377 100644
--- a/jest.config.base.js
+++ b/jest.config.base.js
@@ -1,6 +1,8 @@
+const { index } = require('d3');
 const IS_EE = require('./config/helpers/is_ee_env');
 const isESLint = require('./config/helpers/is_eslint');
 const IS_JH = require('./config/helpers/is_jh_env');
+const USE_VUE_3 = process.env.VUE_VERSION === '3';
 
 module.exports = (path, options = {}) => {
   const {
@@ -10,6 +12,28 @@ module.exports = (path, options = {}) => {
   } = options;
 
   const reporters = ['default'];
+  const VUE_JEST_TRANSFORMER = USE_VUE_3 ? '@vue/vue3-jest' : '@vue/vue2-jest';
+  const setupFilesAfterEnv = [`<rootDir>/${path}/test_setup.js`, 'jest-canvas-mock'];
+  const vueModuleNameMappers = {};
+  const globals = {};
+
+  if (USE_VUE_3) {
+    setupFilesAfterEnv.unshift(`<rootDir>/${path}/vue_compat_test_setup.js`);
+    Object.assign(vueModuleNameMappers, {
+      '^vue$': '@vue/compat',
+      '^@vue/test-utils$': '@vue/test-utils-vue3',
+    });
+    Object.assign(globals, {
+      'vue-jest': {
+        compiler: require('./config/vue3migration/compiler'),
+        compilerOptions: {
+          compatConfig: {
+            MODE: 2,
+          },
+        },
+      },
+    });
+  }
 
   // To have consistent date time parsing both in local and CI environments we set
   // the timezone of the Node process. https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/27738
@@ -64,6 +88,12 @@ module.exports = (path, options = {}) => {
     '^ee_else_ce_jest/(.*)$': '<rootDir>/spec/frontend/$1',
     '^jquery$': '<rootDir>/node_modules/jquery/dist/jquery.slim.js',
     ...extModuleNameMapper,
+    '^@gitlab/ui': '<rootDir>/node_modules/@gitlab/ui/src/index.js',
+    '^@gitlab/ui/dist/(.*).js$': [
+      '<rootDir>/node_modules/@gitlab/ui/src/$1.vue',
+      '<rootDir>/node_modules/@gitlab/ui/src/$1.js',
+    ],
+    ...vueModuleNameMappers,
   };
 
   const collectCoverageFrom = ['<rootDir>/app/assets/javascripts/**/*.{js,vue}'];
@@ -138,6 +168,7 @@ module.exports = (path, options = {}) => {
   ];
 
   const transformIgnoreNodeModules = [
+    'vue-test-utils-compat',
     '@gitlab/ui',
     '@gitlab/favicon-overlay',
     'bootstrap-vue',
@@ -157,6 +188,7 @@ module.exports = (path, options = {}) => {
   ];
 
   return {
+    globals,
     clearMocks: true,
     testMatch,
     moduleFileExtensions: ['js', 'json', 'vue', 'gql', 'graphql', 'yaml', 'yml'],
@@ -170,14 +202,14 @@ module.exports = (path, options = {}) => {
     modulePathIgnorePatterns: ['<rootDir>/.yarn-cache/'],
     reporters,
     resolver: './jest_resolver.js',
-    setupFilesAfterEnv: [`<rootDir>/${path}/test_setup.js`, 'jest-canvas-mock'],
+    setupFilesAfterEnv,
     restoreMocks: true,
     slowTestThreshold: process.env.CI ? 6000 : 500,
     transform: {
       '^.+\\.(gql|graphql)$': './spec/frontend/__helpers__/graphql_transformer.js',
       '^.+_worker\\.js$': './spec/frontend/__helpers__/web_worker_transformer.js',
       '^.+\\.js$': 'babel-jest',
-      '^.+\\.vue$': '@vue/vue2-jest',
+      '^.+\\.vue$': VUE_JEST_TRANSFORMER,
       'spec/frontend/editor/schema/ci/yaml_tests/.+\\.(yml|yaml)$':
         './spec/frontend/__helpers__/yaml_transformer.js',
       '^.+\\.(md|zip|png|yml|yaml)$': './spec/frontend/__helpers__/raw_transformer.js',
diff --git a/package.json b/package.json
index b793fbbde73591..00333379778328 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@gitlab/at.js": "1.5.7",
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/svgs": "3.6.0",
-    "@gitlab/ui": "49.2.1",
+    "@gitlab/ui": "git+https://gitlab.com/gitlab-org/gitlab-ui.git#xanf-vue3-v4",
     "@gitlab/visual-review-tools": "1.7.3",
     "@gitlab/web-ide": "0.0.1-dev-20220815034418",
     "@rails/actioncable": "6.1.4-7",
@@ -93,6 +93,9 @@
     "@tiptap/extension-text": "^2.0.0-beta.17",
     "@tiptap/suggestion": "^2.0.0-beta.96",
     "@tiptap/vue-2": "^2.0.0-beta.84",
+    "@vue/compat": "^3.2.41",
+    "@vue/compiler-sfc": "^3.2.41",
+    "@vue/vue3-jest": "^29.1.1",
     "apollo-upload-client": "15.0.0",
     "autosize": "^5.0.1",
     "axios": "^0.24.0",
@@ -187,6 +190,7 @@
     "vue": "2.6.14",
     "vue-apollo": "^3.0.7",
     "vue-loader": "15.9.6",
+    "vue-loader-vue3": "npm:vue-loader@17",
     "vue-observe-visibility": "^1.0.0",
     "vue-resize": "^1.0.1",
     "vue-router": "3.4.9",
@@ -210,6 +214,7 @@
     "@testing-library/dom": "^7.16.2",
     "@types/jest": "^27.5.1",
     "@vue/test-utils": "1.3.0",
+    "@vue/test-utils-vue3": "npm:@vue/test-utils@2.1.0",
     "@vue/vue2-jest": "^27.0.0",
     "ajv": "^8.10.0",
     "ajv-formats": "^2.1.1",
@@ -242,6 +247,7 @@
     "markdownlint-cli": "0.32.2",
     "miragejs": "^0.1.40",
     "mock-apollo-client": "1.2.0",
+    "module-alias": "^2.2.2",
     "nodemon": "^2.0.19",
     "prettier": "2.2.1",
     "prosemirror-schema-basic": "^1.2.0",
@@ -253,6 +259,7 @@
     "stylelint": "^14.9.1",
     "swagger-cli": "^4.0.4",
     "timezone-mock": "^1.0.8",
+    "vue-test-utils-compat": "^0.0.5",
     "webpack-dev-server": "4.11.1",
     "xhr-mock": "^2.5.1",
     "yarn-check-webpack-plugin": "^1.2.0",
diff --git a/spec/frontend/__helpers__/shared_test_setup.js b/spec/frontend/__helpers__/shared_test_setup.js
index 2fe9fe89a90ec2..a1f90f39d15e85 100644
--- a/spec/frontend/__helpers__/shared_test_setup.js
+++ b/spec/frontend/__helpers__/shared_test_setup.js
@@ -1,7 +1,7 @@
 /* Common setup for both unit and integration test environments */
 import * as jqueryMatchers from 'custom-jquery-matchers';
 import Vue from 'vue';
-import { enableAutoDestroy } from '@vue/test-utils';
+import * as VTU from '@vue/test-utils';
 import 'jquery';
 import Translate from '~/vue_shared/translate';
 import setWindowLocation from './set_window_location_helper';
@@ -13,7 +13,7 @@ import './dom_shims';
 import './jquery';
 import '~/commons/bootstrap';
 
-enableAutoDestroy(afterEach);
+VTU.enableAutoDestroy(afterEach);
 
 // This module has some fairly decent visual test coverage in it's own repository.
 jest.mock('@gitlab/favicon-overlay');
diff --git a/spec/frontend/environment.js b/spec/frontend/environment.js
index 1c84350bd8eaba..c93441e8dd909d 100644
--- a/spec/frontend/environment.js
+++ b/spec/frontend/environment.js
@@ -32,6 +32,9 @@ class CustomEnvironment extends JSDOMEnvironment {
         if (args[0].includes('The updateQuery callback for fetchMore is deprecated')) {
           return;
         }
+        if (args[0].includes('[Vue warn]: (deprecation')) {
+          return;
+        }
         throw new ErrorWithStack(
           `Unexpected call of console.warn() with:\n\n${args.join(', ')}`,
           this.warn,
diff --git a/spec/frontend/test_setup.js b/spec/frontend/test_setup.js
index 3fb226e5ed3cd1..b986fee661449f 100644
--- a/spec/frontend/test_setup.js
+++ b/spec/frontend/test_setup.js
@@ -3,11 +3,11 @@
 import { setImmediate } from 'timers';
 import 'helpers/shared_test_setup';
 
-afterEach(() =>
-  // give Promises a bit more time so they fail the right test
-  // eslint-disable-next-line no-restricted-syntax
-  new Promise(setImmediate).then(() => {
-    // wait for pending setTimeout()s
-    jest.runOnlyPendingTimers();
-  }),
-);
+// afterEach(() =>
+//   // give Promises a bit more time so they fail the right test
+//   // eslint-disable-next-line no-restricted-syntax
+//   new Promise(setImmediate).then(() => {
+//     // wait for pending setTimeout()s
+//     jest.runOnlyPendingTimers();
+//   }),
+// );
diff --git a/spec/frontend/vue_compat_test_setup.js b/spec/frontend/vue_compat_test_setup.js
new file mode 100644
index 00000000000000..0fd33a859ad614
--- /dev/null
+++ b/spec/frontend/vue_compat_test_setup.js
@@ -0,0 +1,60 @@
+/* eslint-disable import/no-commonjs */
+const Vue = require('vue');
+const VTU = require('@vue/test-utils');
+const { installCompat: installVTUCompat, fullCompatConfig } = require('vue-test-utils-compat');
+
+if (global.document) {
+  const compatConfig = {
+    MODE: 2,
+
+    GLOBAL_MOUNT: 'suppress-warning',
+    GLOBAL_EXTEND: 'suppress-warning',
+    GLOBAL_PROTOTYPE: 'suppress-warning',
+    RENDER_FUNCTION: 'suppress-warning',
+
+    INSTANCE_DESTROY: 'suppress-warning',
+    INSTANCE_DELETE: 'suppress-warning',
+
+    INSTANCE_ATTRS_CLASS_STYLE: 'suppress-warning',
+    INSTANCE_CHILDREN: 'suppress-warning',
+    INSTANCE_SCOPED_SLOTS: 'suppress-warning',
+    INSTANCE_LISTENERS: 'suppress-warning',
+    INSTANCE_EVENT_EMITTER: 'suppress-warning',
+    INSTANCE_EVENT_HOOKS: 'suppress-warning',
+    INSTANCE_SET: 'suppress-warning',
+    GLOBAL_OBSERVABLE: 'suppress-warning',
+    GLOBAL_SET: 'suppress-warning',
+    COMPONENT_FUNCTIONAL: 'suppress-warning',
+    COMPONENT_V_MODEL: 'suppress-warning',
+    CUSTOM_DIR: 'suppress-warning',
+    OPTIONS_BEFORE_DESTROY: 'suppress-warning',
+    OPTIONS_DATA_MERGE: 'suppress-warning',
+    OPTIONS_DESTROYED: 'suppress-warning',
+    ATTR_FALSE_VALUE: 'suppress-warning',
+
+    COMPILER_V_ON_NATIVE: 'suppress-warning',
+    COMPILER_V_BIND_OBJECT_ORDER: 'suppress-warning',
+
+    CONFIG_WHITESPACE: 'suppress-warning',
+    PRIVATE_APIS: 'suppress-warning',
+    WATCH_ARRAY: 'suppress-warning',
+  };
+
+  let compatH;
+  Vue.config.compilerOptions.whitespace = 'condense';
+  Vue.createApp({
+    compatConfig: {
+      MODE: 3,
+      RENDER_FUNCTION: 'suppress-warning',
+    },
+    render(h) {
+      compatH = h;
+    },
+  }).mount(document.createElement('div'));
+
+  debugger;
+  Vue.configureCompat(compatConfig);
+  installVTUCompat(VTU, fullCompatConfig, compatH);
+  VTU.config.renderStubDefaultSlot = true;
+  VTU.config.global.renderStubDefaultSlot = true;
+}
diff --git a/yarn.lock b/yarn.lock
index 98a5bdb2d19593..d25f808655e165 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -344,7 +344,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.16.7", "@babel/parser@^7.16.8", "@babel/parser@^7.18.5":
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.16.4", "@babel/parser@^7.16.7", "@babel/parser@^7.16.8", "@babel/parser@^7.18.5":
   version "7.18.11"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.11.tgz#68bb07ab3d380affa9a3f96728df07969645d2d9"
   integrity sha512-9JKn5vN+hDt0Hdqn1PiJ2guflwP+B6Ga8qbDuoF0PzzVhrzsKIJo8yGqVk6CmMHiMei9w1C1Bp9IMJSIK+HPIQ==
@@ -1113,13 +1113,12 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-3.6.0.tgz#3967cda46087ff2bc163ff339adf7ae6eaaa415f"
   integrity sha512-UXTvFmPa1lK7+S+r2iWrN6CIvRpjCNIJFbcJiimEF1UJ8uR+JY3/fGIJXLjd53ZNXkqbffSXurxY35Zd4SeTkg==
 
-"@gitlab/ui@49.2.1":
-  version "49.2.1"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-49.2.1.tgz#362dda68799d6ecfd32c8e0a4eb1409f20ddec4d"
-  integrity sha512-dutmZTGQDDn7nPzGFtI6YEnqF7yhnD6tY6ymGQ1U0bkdDcjR8GOMvDn3Gc09505go6ESt0A4dXwleboDgoFP0w==
+"@gitlab/ui@git+https://gitlab.com/gitlab-org/gitlab-ui.git#xanf-vue3-v4":
+  version "47.0.0"
+  resolved "git+https://gitlab.com/gitlab-org/gitlab-ui.git#a4a1d698acf4bf407733417fcc5860a9008dd6db"
   dependencies:
     "@popperjs/core" "^2.11.2"
-    bootstrap-vue "2.20.1"
+    bootstrap-vue "git+https://github.com/bootstrap-vue/bootstrap-vue.git#vue3-compat-build"
     dompurify "^2.4.0"
     echarts "^5.3.2"
     iframe-resizer "^4.3.2"
@@ -2244,6 +2243,16 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
   integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
 
+"@types/strip-bom@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/strip-bom/-/strip-bom-3.0.0.tgz#14a8ec3956c2e81edb7520790aecf21c290aebd2"
+  integrity sha512-xevGOReSYGM7g/kUBZzPqCrR/KYAo+F0yiPc85WFTJa0MSLtyFTVTU6cJu/aV4mid7IffDIWqo69THF2o4JiEQ==
+
+"@types/strip-json-comments@0.0.30":
+  version "0.0.30"
+  resolved "https://registry.yarnpkg.com/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz#9aa30c04db212a9a0649d6ae6fd50accc40748a1"
+  integrity sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==
+
 "@types/unist@*", "@types/unist@^2.0.0":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
@@ -2328,6 +2337,57 @@
     "@typescript-eslint/types" "5.38.0"
     eslint-visitor-keys "^3.3.0"
 
+"@vue/compat@^3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/compat/-/compat-3.2.41.tgz#c939592cab0be151b454130e0bdc4c49b2aa0cc9"
+  integrity sha512-N7APL8Dlxfdth0tH0+TcJDXDljxdnAkMdf5IZryA1yJWIg3COi9WnkolEzk5tNw/WYnF1tvEou3EJPKjSj0jWw==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
+
+"@vue/compiler-core@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.41.tgz#fb5b25f23817400f44377d878a0cdead808453ef"
+  integrity sha512-oA4mH6SA78DT+96/nsi4p9DX97PHcNROxs51lYk7gb9Z4BPKQ3Mh+BLn6CQZBw857Iuhu28BfMSRHAlPvD4vlw==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/shared" "3.2.41"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
+
+"@vue/compiler-dom@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz#dc63dcd3ce8ca8a8721f14009d498a7a54380299"
+  integrity sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==
+  dependencies:
+    "@vue/compiler-core" "3.2.41"
+    "@vue/shared" "3.2.41"
+
+"@vue/compiler-sfc@^3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz#238fb8c48318408c856748f4116aff8cc1dc2a73"
+  integrity sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.41"
+    "@vue/compiler-dom" "3.2.41"
+    "@vue/compiler-ssr" "3.2.41"
+    "@vue/reactivity-transform" "3.2.41"
+    "@vue/shared" "3.2.41"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+    postcss "^8.1.10"
+    source-map "^0.6.1"
+
+"@vue/compiler-ssr@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.41.tgz#344f564d68584b33367731c04ffc949784611fcb"
+  integrity sha512-Y5wPiNIiaMz/sps8+DmhaKfDm1xgj6GrH99z4gq2LQenfVQcYXmHIOBcs5qPwl7jaW3SUQWjkAPKMfQemEQZwQ==
+  dependencies:
+    "@vue/compiler-dom" "3.2.41"
+    "@vue/shared" "3.2.41"
+
 "@vue/component-compiler-utils@^3.1.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
@@ -2344,6 +2404,27 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/reactivity-transform@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.41.tgz#9ff938877600c97f646e09ac1959b5150fb11a0c"
+  integrity sha512-mK5+BNMsL4hHi+IR3Ft/ho6Za+L3FA5j8WvreJ7XzHrqkPq8jtF/SMo7tuc9gHjLDwKZX1nP1JQOKo9IEAn54A==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.41"
+    "@vue/shared" "3.2.41"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+
+"@vue/shared@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.41.tgz#fbc95422df654ea64e8428eced96ba6ad555d2bb"
+  integrity sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==
+
+"@vue/test-utils-vue3@npm:@vue/test-utils@2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.1.0.tgz#c2f646aa2d6ac779f79a83f18c5b82fc40952bfd"
+  integrity sha512-U4AxAD/tKJ3ajxYew1gkfEotpr96DE/gLXpbl+nPbsNRqGBfQZZA7YhwGoQNDPgon56v+IGZDrYq7pe3GDl9aw==
+
 "@vue/test-utils@1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.3.0.tgz#d563decdcd9c68a7bca151d4179a2bfd6d5c3e15"
@@ -2364,6 +2445,18 @@
     css-tree "^2.0.1"
     source-map "0.5.6"
 
+"@vue/vue3-jest@^29.1.1":
+  version "29.1.1"
+  resolved "https://registry.yarnpkg.com/@vue/vue3-jest/-/vue3-jest-29.1.1.tgz#0165addaae2acc15e4a1d802da1f6a5295aa45de"
+  integrity sha512-obk8SGx8HKDu68y9+eR0M4vQA2oIn7RoXUUMuL0wVpTrvsDgdqt7ok9yOqOLbz40QEYfB+wnSOwfxz02lFyTAA==
+  dependencies:
+    "@babel/plugin-transform-modules-commonjs" "^7.2.0"
+    chalk "^2.1.0"
+    convert-source-map "^1.6.0"
+    css-tree "^2.0.1"
+    source-map "0.5.6"
+    tsconfig "^7.0.0"
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -3118,22 +3211,26 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap-vue@2.20.1:
-  version "2.20.1"
-  resolved "https://registry.yarnpkg.com/bootstrap-vue/-/bootstrap-vue-2.20.1.tgz#1b6cd4368632c1a6dd4a5ed161242baa131c3cd5"
-  integrity sha512-s+w83q0T2mo/RbFwTM8gExbLJMEOYpdTUqmyFaHv2Ir+TFprMvTWpeAzeNuawJ130W1gePZ3LW3cNp1t/tZbOw==
+"bootstrap-vue@git+https://github.com/bootstrap-vue/bootstrap-vue.git#vue3-compat-build":
+  version "2.23.0"
+  resolved "git+https://github.com/bootstrap-vue/bootstrap-vue.git#dbfa11904469e20ed052ba855535e377bf6697b9"
   dependencies:
     "@nuxt/opencollective" "^0.3.2"
-    bootstrap ">=4.5.3 <5.0.0"
+    bootstrap "^4.6.1"
     popper.js "^1.16.1"
     portal-vue "^2.1.7"
     vue-functional-data-merge "^3.1.0"
 
-bootstrap@4.5.3, "bootstrap@>=4.5.3 <5.0.0":
+bootstrap@4.5.3:
   version "4.5.3"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.3.tgz#c6a72b355aaf323920be800246a6e4ef30997fe6"
   integrity sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ==
 
+bootstrap@^4.6.1:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.2.tgz#8e0cd61611728a5bf65a3a2b8d6ff6c77d5d7479"
+  integrity sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -5653,6 +5750,11 @@ estraverse@^5.1.0, estraverse@^5.2.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
   integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
 
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -6517,6 +6619,11 @@ hash-sum@^1.0.2:
   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
   integrity sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==
 
+hash-sum@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
+  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
+
 hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
@@ -8249,6 +8356,13 @@ lz-string@^1.4.4:
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
   integrity sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==
 
+magic-string@^0.25.7:
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
+  integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
 make-dir@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -9119,6 +9233,11 @@ mock-apollo-client@1.2.0:
   resolved "https://registry.yarnpkg.com/mock-apollo-client/-/mock-apollo-client-1.2.0.tgz#72543df0d74577d29be1b34cecba8898c7e71451"
   integrity sha512-zCVHv3p7zvUmen9zce9l965ZrI6rMbrm2/oqGaTerVYOaYskl/cVgTG/L7iIToTIpI7onk/f6tu8hxPXZdyy/g==
 
+module-alias@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/module-alias/-/module-alias-2.2.2.tgz#151cdcecc24e25739ff0aa6e51e1c5716974c0e0"
+  integrity sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==
+
 moment-mini@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.24.0.tgz#fa68d98f7fe93ae65bf1262f6abb5fb6983d8d18"
@@ -9973,6 +10092,15 @@ postcss@^7.0.14, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
+postcss@^8.1.10:
+  version "8.4.18"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.18.tgz#6d50046ea7d3d66a85e0e782074e7203bc7fbca2"
+  integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -11125,6 +11253,11 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
+sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
 space-separated-tokens@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz#43193cec4fb858a2ce934b7f98b7f2c18107098b"
@@ -11350,6 +11483,11 @@ strip-indent@^3.0.0:
   dependencies:
     min-indent "^1.0.0"
 
+strip-json-comments@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+  integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
+
 strip-json-comments@^3.1.0, strip-json-comments@^3.1.1, strip-json-comments@~3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
@@ -11814,6 +11952,16 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tsconfig@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/tsconfig/-/tsconfig-7.0.0.tgz#84538875a4dc216e5c4a5432b3a4dec3d54e91b7"
+  integrity sha512-vZXmzPrL+EmC4T/4rVlT2jNVMWCi/O4DIiSj3UHg1OE5kCKbk4mfrXc6dZksLgRM/TZlKnousKH9bbTazUWRRw==
+  dependencies:
+    "@types/strip-bom" "^3.0.0"
+    "@types/strip-json-comments" "0.0.30"
+    strip-bom "^3.0.0"
+    strip-json-comments "^2.0.0"
+
 tslib@2.3.0, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
@@ -12301,6 +12449,15 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+"vue-loader-vue3@npm:vue-loader@17":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-17.0.0.tgz#2eaa80aab125b19f00faa794b5bd867b17f85acb"
+  integrity sha512-OWSXjrzIvbF2LtOUmxT3HYgwwubbfFelN8PAP9R9dwpIkj48TVioHhWWSx7W7fk+iF5cgg3CBJRxwTdtLU4Ecg==
+  dependencies:
+    chalk "^4.1.0"
+    hash-sum "^2.0.0"
+    loader-utils "^2.0.0"
+
 vue-loader@15.9.6:
   version "15.9.6"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.6.tgz#f4bb9ae20c3a8370af3ecf09b8126d38ffdb6b8b"
@@ -12355,6 +12512,11 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-test-utils-compat@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/vue-test-utils-compat/-/vue-test-utils-compat-0.0.5.tgz#d759499b08d1babbb93c80c2113b99679a0961c6"
+  integrity sha512-QTQX+DcsWiXt7Vbns7ugHokES0ViOsbxjs8jndn1U4gEOH9RcjVOv7CIblVpNa5QvjC8o0pfY9bRRPJl20v44A==
+
 vue-virtual-scroll-list@^1.4.7:
   version "1.4.7"
   resolved "https://registry.yarnpkg.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.4.7.tgz#12ee26833885f5bb4d37dc058085ccf3ce5b5a74"
-- 
GitLab


From e0af7e6479695a28a4fe85a88f90815aa3ce2814 Mon Sep 17 00:00:00 2001
From: Illya Klymov <xanf@xanf.me>
Date: Fri, 4 Nov 2022 15:00:32 +0200
Subject: [PATCH 02/13] Use v4 VueApollo with @vue/compat

* Pick correct version depending on env
---
 .../lib/utils/vue3compat/vue_apollo.js        | 22 +++++++++++++++++++
 config/webpack.config.js                      |  4 ++++
 jest.config.base.js                           |  1 +
 package.json                                  |  2 ++
 yarn.lock                                     | 19 ++++++++++++++++
 5 files changed, 48 insertions(+)
 create mode 100644 app/assets/javascripts/lib/utils/vue3compat/vue_apollo.js

diff --git a/app/assets/javascripts/lib/utils/vue3compat/vue_apollo.js b/app/assets/javascripts/lib/utils/vue3compat/vue_apollo.js
new file mode 100644
index 00000000000000..574a633d2fc211
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/vue3compat/vue_apollo.js
@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import { createApolloProvider } from '@vue/apollo-option';
+import { ApolloMutation } from '@vue/apollo-components';
+
+export { ApolloMutation };
+
+export default class VueApollo {
+  constructor(...args) {
+    // eslint-disable-next-line no-constructor-return
+    return createApolloProvider(...args);
+  }
+
+  static install() {
+    Vue.mixin({
+      beforeCreate() {
+        if (this.$options.apolloProvider) {
+          this.$.appContext.app.use(this.$options.apolloProvider);
+        }
+      },
+    });
+  }
+}
diff --git a/config/webpack.config.js b/config/webpack.config.js
index d2750b6e19eb35..e5448463f03113 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -189,6 +189,10 @@ const alias = {
   ...(USE_VUE3
     ? {
         vue: '@vue/compat',
+        'vue-apollo': path.join(
+          ROOT_PATH,
+          'app/assets/javascripts/lib/utils/vue3compat/vue_apollo.js',
+        ),
       }
     : {}),
   // We are using source version of @gitlab-ui
diff --git a/jest.config.base.js b/jest.config.base.js
index 569f3b88613377..0289eb03bd4707 100644
--- a/jest.config.base.js
+++ b/jest.config.base.js
@@ -22,6 +22,7 @@ module.exports = (path, options = {}) => {
     Object.assign(vueModuleNameMappers, {
       '^vue$': '@vue/compat',
       '^@vue/test-utils$': '@vue/test-utils-vue3',
+      '^vue-apollo$': '<rootDir>/app/assets/javascripts/lib/utils/vue3compat/vue_apollo.js',
     });
     Object.assign(globals, {
       'vue-jest': {
diff --git a/package.json b/package.json
index 00333379778328..e87df22e5d824e 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,8 @@
     "@tiptap/extension-text": "^2.0.0-beta.17",
     "@tiptap/suggestion": "^2.0.0-beta.96",
     "@tiptap/vue-2": "^2.0.0-beta.84",
+    "@vue/apollo-components": "^4.0.0-alpha.20",
+    "@vue/apollo-option": "^4.0.0-alpha.20",
     "@vue/compat": "^3.2.41",
     "@vue/compiler-sfc": "^3.2.41",
     "@vue/vue3-jest": "^29.1.1",
diff --git a/yarn.lock b/yarn.lock
index d25f808655e165..73f56343547310 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2337,6 +2337,20 @@
     "@typescript-eslint/types" "5.38.0"
     eslint-visitor-keys "^3.3.0"
 
+"@vue/apollo-components@^4.0.0-alpha.20":
+  version "4.0.0-alpha.20"
+  resolved "https://registry.yarnpkg.com/@vue/apollo-components/-/apollo-components-4.0.0-alpha.20.tgz#11b1488f92019025df2171704789bbc3fb6cbe58"
+  integrity sha512-39ppfxabMGx4rASvpZDvSxDMnLl9iJdvIIaNx/lRfXRgzvH4aUcUH5jwsuxtzTtLZ30FuxSw394yRI+smLiSHQ==
+  dependencies:
+    "@vue/apollo-option" "^4.0.0-alpha.20"
+
+"@vue/apollo-option@^4.0.0-alpha.20":
+  version "4.0.0-alpha.20"
+  resolved "https://registry.yarnpkg.com/@vue/apollo-option/-/apollo-option-4.0.0-alpha.20.tgz#469da22cd5925dc8d1b6089c087d0a89f39855ef"
+  integrity sha512-iCiv4rVc4yBWRVmQ5OoI7rfX5BfOEYLKM8jtNEia2Z7kuVIo5FKn/Wj3c5BUsu2Gly/j8UwYI42jIeZMXriOLw==
+  dependencies:
+    throttle-debounce "^3.0.1"
+
 "@vue/compat@^3.2.41":
   version "3.2.41"
   resolved "https://registry.yarnpkg.com/@vue/compat/-/compat-3.2.41.tgz#c939592cab0be151b454130e0bdc4c49b2aa0cc9"
@@ -11772,6 +11786,11 @@ throttle-debounce@^2.1.0:
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.1.0.tgz#257e648f0a56bd9e54fe0f132c4ab8611df4e1d5"
   integrity sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg==
 
+throttle-debounce@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
+  integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==
+
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
-- 
GitLab


From 4730f61dfcd52f318d36d1be491659a0cebdac70 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Tue, 15 Nov 2022 17:45:30 +0400
Subject: [PATCH 03/13] Initial rendering on a client with Vue 3

---
 .../javascripts/diffs/components/diff_row.vue |  4 +++
 .../diffs/store/modules/diff_state.js         |  2 +-
 app/assets/javascripts/merge_request_tabs.js  |  2 +-
 app/assets/javascripts/mr_notes/index.js      | 36 +++++++++++++++++--
 app/assets/javascripts/mr_notes/init_notes.js |  3 +-
 package.json                                  |  4 +--
 yarn.lock                                     | 16 +++++----
 7 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/diff_row.vue b/app/assets/javascripts/diffs/components/diff_row.vue
index 2466c829557b16..ceebf8f5bda6b0 100644
--- a/app/assets/javascripts/diffs/components/diff_row.vue
+++ b/app/assets/javascripts/diffs/components/diff_row.vue
@@ -160,6 +160,10 @@ export default {
   CONFLICT_MARKER_THEIR,
   CONFLICT_OUR,
   CONFLICT_THEIR,
+  computed: {
+    props() { return this.$props },
+    listeners() { return this.$listeners },
+  },
 };
 </script>
 
diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index 329db1fe2cf1ee..65ba9941b983ea 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -42,5 +42,5 @@ export default () => ({
   defaultSuggestionCommitMessage: '',
   mrReviews: {},
   latestDiff: true,
-  disableVirtualScroller: false,
+  disableVirtualScroller: true,
 });
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 17ee2a0d8b6b51..aa2226a982971e 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -277,7 +277,7 @@ export default class MergeRequestTabs {
         });
       }
 
-      const tabPane = this.mergeRequestTabPanes.querySelector(`#${action}`);
+      const tabPane = this.mergeRequestTabPanes.querySelector(`.${action}`);
       if (tabPane) tabPane.style.display = 'block';
       const tab = this.mergeRequestTabs.querySelector(`.${action}-tab`);
       if (tab) tab.classList.add('active');
diff --git a/app/assets/javascripts/mr_notes/index.js b/app/assets/javascripts/mr_notes/index.js
index c32a1f4c2acf69..97ea8827115a22 100644
--- a/app/assets/javascripts/mr_notes/index.js
+++ b/app/assets/javascripts/mr_notes/index.js
@@ -6,8 +6,38 @@ import initDiffsApp from '../diffs';
 import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
 import MergeRequest from '../merge_request';
 import DiscussionCounter from '../notes/components/discussion_counter.vue';
+import types from './stores/mutation_types';
 import initNotesApp from './init_notes';
 
+function initPage() {
+  store.commit(types.SET_ACTIVE_TAB, window.mrTabs.currentAction);
+  if (window.mrTabs.currentAction === 'show') {
+    initNotesApp();
+  } else {
+    initDiffsApp(store);
+  }
+}
+
+function initMetadataEvents() {
+  let stop;
+  window.mrTabs.eventHub.$on('MergeRequestTabChange', (action) => {
+    if (action !== 'show') {
+      if (stop) stop();
+      return;
+    }
+    stop = store.watch(
+      () => store.state.page.mrMetadata,
+      (metadata) => {
+        if (!metadata) return;
+        window.mrTabs.eventHub.$emit('MergeRequestMetadataLoaded');
+        if (stop) stop();
+        stop = undefined;
+      },
+      { immediate: true },
+    );
+  });
+}
+
 export default function initMrNotes() {
   resetServiceWorkersPublicPath();
 
@@ -17,8 +47,10 @@ export default function initMrNotes() {
     action: mrShowNode.dataset.mrAction,
   });
 
-  initDiffsApp(store);
-  initNotesApp();
+  initMetadataEvents();
+
+  initPage();
+  window.mrTabs.eventHub.$once('MergeRequestTabChange', initPage);
 
   document.addEventListener('merged:UpdateActions', () => {
     initRevertCommitModal('i_code_review_post_merge_submit_revert_modal');
diff --git a/app/assets/javascripts/mr_notes/init_notes.js b/app/assets/javascripts/mr_notes/init_notes.js
index 3a67e7925c34e3..3e7b411a278ec4 100644
--- a/app/assets/javascripts/mr_notes/init_notes.js
+++ b/app/assets/javascripts/mr_notes/init_notes.js
@@ -70,7 +70,6 @@ export default () => {
       },
     },
     created() {
-      this.setActiveTab(window.mrTabs.getCurrentAction());
       this.setEndpoints(this.endpoints);
 
       this.fetchMrMetadata();
@@ -87,7 +86,7 @@ export default () => {
     methods: {
       ...mapActions(['setActiveTab', 'setEndpoints', 'fetchMrMetadata']),
       updateDiscussionTabCounter() {
-        this.notesCountBadge.text(this.discussionTabCounter);
+        this.notesCountBadge?.text(this.discussionTabCounter);
       },
     },
     render(createElement) {
diff --git a/package.json b/package.json
index e87df22e5d824e..69eba2fa717f6a 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@gitlab/at.js": "1.5.7",
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/svgs": "3.6.0",
-    "@gitlab/ui": "git+https://gitlab.com/gitlab-org/gitlab-ui.git#xanf-vue3-v4",
+    "@gitlab/ui": "^49.9.0",
     "@gitlab/visual-review-tools": "1.7.3",
     "@gitlab/web-ide": "0.0.1-dev-20220815034418",
     "@rails/actioncable": "6.1.4-7",
@@ -199,7 +199,7 @@
     "vue-template-compiler": "2.6.14",
     "vue-virtual-scroll-list": "^1.4.7",
     "vuedraggable": "^2.23.0",
-    "vuex": "^3.6.2",
+    "vuex": "^4.1.0",
     "web-vitals": "^0.2.4",
     "webpack": "^4.46.0",
     "webpack-bundle-analyzer": "^4.6.1",
diff --git a/yarn.lock b/yarn.lock
index 73f56343547310..ebfe6aead83930 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1113,12 +1113,13 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-3.6.0.tgz#3967cda46087ff2bc163ff339adf7ae6eaaa415f"
   integrity sha512-UXTvFmPa1lK7+S+r2iWrN6CIvRpjCNIJFbcJiimEF1UJ8uR+JY3/fGIJXLjd53ZNXkqbffSXurxY35Zd4SeTkg==
 
-"@gitlab/ui@git+https://gitlab.com/gitlab-org/gitlab-ui.git#xanf-vue3-v4":
-  version "47.0.0"
-  resolved "git+https://gitlab.com/gitlab-org/gitlab-ui.git#a4a1d698acf4bf407733417fcc5860a9008dd6db"
+"@gitlab/ui@^49.9.0":
+  version "49.9.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-49.9.0.tgz#395af0250285dbf7a062e5290c1b6b0eb4040cc1"
+  integrity sha512-rh1mo1sTdFBCyUe4y05jdJW28MSnW/0LMs6c8rGyQ3xmy8WKik9BdpcTkNKYCJ8wnNhJW2GilnXTm1XQEUPodQ==
   dependencies:
     "@popperjs/core" "^2.11.2"
-    bootstrap-vue "git+https://github.com/bootstrap-vue/bootstrap-vue.git#vue3-compat-build"
+    bootstrap-vue "2.23.1"
     dompurify "^2.4.0"
     echarts "^5.3.2"
     iframe-resizer "^4.3.2"
@@ -3225,9 +3226,10 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-"bootstrap-vue@git+https://github.com/bootstrap-vue/bootstrap-vue.git#vue3-compat-build":
-  version "2.23.0"
-  resolved "git+https://github.com/bootstrap-vue/bootstrap-vue.git#dbfa11904469e20ed052ba855535e377bf6697b9"
+bootstrap-vue@2.23.1:
+  version "2.23.1"
+  resolved "https://registry.yarnpkg.com/bootstrap-vue/-/bootstrap-vue-2.23.1.tgz#8f866f7cda27eb0e7e13a0bea8d55d8fc7a82199"
+  integrity sha512-SEWkG4LzmMuWjQdSYmAQk1G/oOKm37dtNfjB5kxq0YafnL2W6qUAmeDTcIZVbPiQd2OQlIkWOMPBRGySk/zGsg==
   dependencies:
     "@nuxt/opencollective" "^0.3.2"
     bootstrap "^4.6.1"
-- 
GitLab


From ffc6adad160fecb721beeff8dbb5a68b4fda3db9 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Thu, 17 Nov 2022 01:42:30 +0400
Subject: [PATCH 04/13] Render diffs in a Web Worker

---
 .../javascripts/diffs/components/app.vue      | 212 ++++++++++--------
 .../diffs/components/diff_batch_fetcher.vue   |  55 +++++
 .../diffs/components/diff_content.vue         |  12 +-
 .../diffs/components/diff_file.vue            |  22 +-
 .../diffs/components/diff_file_header.vue     |  10 +-
 .../diffs/components/diff_files.vue           |  71 ++++++
 .../diffs/components/diff_row_utils.js        |   8 +-
 .../diffs/components/diff_view.vue            |  25 ++-
 .../javascripts/diffs/diff_renderer_worker.js |  35 +++
 app/assets/javascripts/diffs/index.js         |  74 ++++--
 .../diffs/store/modules/diff_state.js         |   5 +-
 .../javascripts/diffs/store/modules/index.js  |   4 +-
 app/assets/javascripts/diffs/streaming.js     |  25 +++
 app/assets/javascripts/lib/dompurify.js       |   6 +-
 .../lib/utils/axios_startup_calls.js          |   2 +-
 .../javascripts/lib/utils/axios_utils.js      |   8 +-
 .../javascripts/lib/utils/color_utils.js      |   2 +-
 .../javascripts/lib/utils/common_utils.js     |   4 +-
 app/assets/javascripts/lib/utils/cookies.js   |   2 +-
 app/assets/javascripts/lib/utils/csrf.js      |   6 +-
 .../javascripts/lib/utils/icons_path.js       |   8 +-
 .../lib/utils/is_navigating_away.js           |   2 +-
 app/assets/javascripts/locale/index.js        |   6 +-
 .../javascripts/mr_notes/stores/index.js      |  11 +-
 .../notes/components/diff_with_note.vue       |   7 +-
 app/assets/javascripts/sidebar/event_hub.js   |   2 +-
 config/webpack.config.js                      |  23 ++
 .../assets/javascripts/diffs/store/actions.js |   6 +-
 .../diffs/store/modules/diff_state.js         |   4 +-
 package.json                                  |   1 +
 yarn.lock                                     |  54 ++++-
 31 files changed, 509 insertions(+), 203 deletions(-)
 create mode 100644 app/assets/javascripts/diffs/components/diff_batch_fetcher.vue
 create mode 100644 app/assets/javascripts/diffs/components/diff_files.vue
 create mode 100644 app/assets/javascripts/diffs/diff_renderer_worker.js
 create mode 100644 app/assets/javascripts/diffs/streaming.js

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index bc49464a560651..da244852dd47d3 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -53,6 +53,7 @@ import HiddenFilesWarning from './hidden_files_warning.vue';
 import NoChanges from './no_changes.vue';
 import TreeList from './tree_list.vue';
 import VirtualScrollerScrollSync from './virtual_scroller_scroll_sync';
+import {renderStream} from "~/diffs/streaming";
 
 export default {
   name: 'DiffsApp',
@@ -178,6 +179,11 @@ export default {
       required: false,
       default: false,
     },
+    stream: {
+      type: Object,
+      required: false,
+      default: null,
+    },
   },
   data() {
     const treeWidth =
@@ -244,7 +250,7 @@ export default {
       return this.diffFiles.length > 0;
     },
     renderFileTree() {
-      return this.renderDiffFiles && this.showTreeList;
+      return this.showTreeList;
     },
     hideFileStats() {
       return this.treeWidth <= TREE_HIDE_STATS_WIDTH;
@@ -317,6 +323,13 @@ export default {
     renderFileTree: 'adjustView',
   },
   mounted() {
+    this.$watch(() => this.stream, (value) => {
+      if (value) {
+        this.$nextTick(() => {
+          renderStream(value, this.$refs.streamingRoot);
+        });
+      }
+    }, { immediate: true });
     this.setBaseConfig({
       endpoint: this.endpoint,
       endpointMetadata: this.endpointMetadata,
@@ -485,20 +498,20 @@ export default {
           });
         });
 
-      this.fetchDiffFilesBatch()
-        .then(() => {
-          if (toggleTree) this.setTreeDisplay();
-          // Guarantee the discussions are assigned after the batch finishes.
-          // Just watching the length of the discussions or the diff files
-          // isn't enough, because with split diff loading, neither will
-          // change when loading the other half of the diff files.
-          this.setDiscussions();
-        })
-        .catch(() => {
-          createAlert({
-            message: __('Something went wrong on our end. Please try again!'),
-          });
-        });
+      // this.fetchDiffFilesBatch()
+      //   .then(() => {
+      //     if (toggleTree) this.setTreeDisplay();
+      //     // Guarantee the discussions are assigned after the batch finishes.
+      //     // Just watching the length of the discussions or the diff files
+      //     // isn't enough, because with split diff loading, neither will
+      //     // change when loading the other half of the diff files.
+      //     this.setDiscussions();
+      //   })
+      //   .catch(() => {
+      //     createAlert({
+      //       message: __('Something went wrong on our end. Please try again!'),
+      //     });
+      //   });
 
       if (this.endpointCoverage) {
         this.fetchCoverageFiles();
@@ -635,8 +648,8 @@ export default {
 
 <template>
   <div v-show="shouldShow">
-    <div v-if="isLoading || !isTreeLoaded" class="loading"><gl-loading-icon size="lg" /></div>
-    <div v-else id="diffs" :class="{ active: shouldShow }" class="diffs tab-pane">
+    <div v-if="!stream && (isLoading || !isTreeLoaded)" class="loading"><gl-loading-icon size="lg" /></div>
+    <div v-else id="diffs" :class="{ active: shouldShow || stream }" class="diffs tab-pane">
       <compare-versions :diff-files-count-text="numTotalFiles" />
 
       <template v-if="!isBatchLoadingError">
@@ -681,88 +694,89 @@ export default {
           >
             {{ __("Error: Couldn't load some or all of the changes.") }}
           </gl-alert>
-          <div v-if="isBatchLoading && !isBatchLoadingError" class="loading">
-            <gl-loading-icon size="lg" />
-          </div>
-          <template v-else-if="renderDiffFiles">
-            <dynamic-scroller
-              v-if="isVirtualScrollingEnabled"
-              :items="diffs"
-              :min-item-size="70"
-              :buffer="1000"
-              :use-transform="false"
-              page-mode
-            >
-              <template #default="{ item, index, active }">
-                <dynamic-scroller-item :item="item" :active="active" :class="{ active }">
-                  <diff-file
-                    :file="item"
-                    :reviewed="fileReviews[item.id]"
-                    :is-first-file="index === 0"
-                    :is-last-file="index === diffFilesLength - 1"
-                    :help-page-path="helpPagePath"
-                    :can-current-user-fork="canCurrentUserFork"
-                    :view-diffs-file-by-file="viewDiffsFileByFile"
-                    :active="active"
-                  />
-                </dynamic-scroller-item>
-              </template>
-              <template #before>
-                <pre-renderer :max-length="diffFilesLength">
-                  <template #default="{ item, index, active }">
-                    <dynamic-scroller-item :item="item" :active="active">
-                      <diff-file
-                        :file="item"
-                        :reviewed="fileReviews[item.id]"
-                        :is-first-file="index === 0"
-                        :is-last-file="index === diffFilesLength - 1"
-                        :help-page-path="helpPagePath"
-                        :can-current-user-fork="canCurrentUserFork"
-                        :view-diffs-file-by-file="viewDiffsFileByFile"
-                        pre-render
-                      />
-                    </dynamic-scroller-item>
-                  </template>
-                </pre-renderer>
-                <virtual-scroller-scroll-sync v-model="virtualScrollCurrentIndex" />
-              </template>
-            </dynamic-scroller>
-            <template v-else>
-              <diff-file
-                v-for="(file, index) in diffs"
-                :key="file.new_path"
-                :file="file"
-                :reviewed="fileReviews[file.id]"
-                :is-first-file="index === 0"
-                :is-last-file="index === diffFilesLength - 1"
-                :help-page-path="helpPagePath"
-                :can-current-user-fork="canCurrentUserFork"
-                :view-diffs-file-by-file="viewDiffsFileByFile"
-              />
-            </template>
-            <div
-              v-if="showFileByFileNavigation"
-              data-testid="file-by-file-navigation"
-              class="gl-display-grid gl-text-center"
-            >
-              <gl-pagination
-                class="gl-mx-auto"
-                :value="currentFileNumber"
-                :prev-page="previousFileNumber"
-                :next-page="nextFileNumber"
-                @input="navigateToDiffFileNumber"
-              />
-              <gl-sprintf :message="__('File %{current} of %{total}')">
-                <template #current>{{ currentFileNumber }}</template>
-                <template #total>{{ diffFiles.length }}</template>
-              </gl-sprintf>
-            </div>
-            <gl-loading-icon v-else-if="retrievingBatches" size="lg" />
-          </template>
-          <no-changes
-            v-else-if="!isBatchLoadingError"
-            :changes-empty-state-illustration="changesEmptyStateIllustration"
-          />
+          <div ref="streamingRoot"></div>
+<!--          <div v-if="isBatchLoading && !isBatchLoadingError" class="loading">-->
+<!--            <gl-loading-icon size="lg" />-->
+<!--          </div>-->
+<!--          <template v-else-if="renderDiffFiles">-->
+<!--            <dynamic-scroller-->
+<!--              v-if="isVirtualScrollingEnabled"-->
+<!--              :items="diffs"-->
+<!--              :min-item-size="70"-->
+<!--              :buffer="1000"-->
+<!--              :use-transform="false"-->
+<!--              page-mode-->
+<!--            >-->
+<!--              <template #default="{ item, index, active }">-->
+<!--                <dynamic-scroller-item :item="item" :active="active" :class="{ active }">-->
+<!--                  <diff-file-->
+<!--                    :file="item"-->
+<!--                    :reviewed="fileReviews[item.id]"-->
+<!--                    :is-first-file="index === 0"-->
+<!--                    :is-last-file="index === diffFilesLength - 1"-->
+<!--                    :help-page-path="helpPagePath"-->
+<!--                    :can-current-user-fork="canCurrentUserFork"-->
+<!--                    :view-diffs-file-by-file="viewDiffsFileByFile"-->
+<!--                    :active="active"-->
+<!--                  />-->
+<!--                </dynamic-scroller-item>-->
+<!--              </template>-->
+<!--              <template #before>-->
+<!--                <pre-renderer :max-length="diffFilesLength">-->
+<!--                  <template #default="{ item, index, active }">-->
+<!--                    <dynamic-scroller-item :item="item" :active="active">-->
+<!--                      <diff-file-->
+<!--                        :file="item"-->
+<!--                        :reviewed="fileReviews[item.id]"-->
+<!--                        :is-first-file="index === 0"-->
+<!--                        :is-last-file="index === diffFilesLength - 1"-->
+<!--                        :help-page-path="helpPagePath"-->
+<!--                        :can-current-user-fork="canCurrentUserFork"-->
+<!--                        :view-diffs-file-by-file="viewDiffsFileByFile"-->
+<!--                        pre-render-->
+<!--                      />-->
+<!--                    </dynamic-scroller-item>-->
+<!--                  </template>-->
+<!--                </pre-renderer>-->
+<!--                <virtual-scroller-scroll-sync v-model="virtualScrollCurrentIndex" />-->
+<!--              </template>-->
+<!--            </dynamic-scroller>-->
+<!--            <template v-else>-->
+<!--              <diff-file-->
+<!--                v-for="(file, index) in diffs"-->
+<!--                :key="file.new_path"-->
+<!--                :file="file"-->
+<!--                :reviewed="fileReviews[file.id]"-->
+<!--                :is-first-file="index === 0"-->
+<!--                :is-last-file="index === diffFilesLength - 1"-->
+<!--                :help-page-path="helpPagePath"-->
+<!--                :can-current-user-fork="canCurrentUserFork"-->
+<!--                :view-diffs-file-by-file="viewDiffsFileByFile"-->
+<!--              />-->
+<!--            </template>-->
+<!--            <div-->
+<!--              v-if="showFileByFileNavigation"-->
+<!--              data-testid="file-by-file-navigation"-->
+<!--              class="gl-display-grid gl-text-center"-->
+<!--            >-->
+<!--              <gl-pagination-->
+<!--                class="gl-mx-auto"-->
+<!--                :value="currentFileNumber"-->
+<!--                :prev-page="previousFileNumber"-->
+<!--                :next-page="nextFileNumber"-->
+<!--                @input="navigateToDiffFileNumber"-->
+<!--              />-->
+<!--              <gl-sprintf :message="__('File %{current} of %{total}')">-->
+<!--                <template #current>{{ currentFileNumber }}</template>-->
+<!--                <template #total>{{ diffFiles.length }}</template>-->
+<!--              </gl-sprintf>-->
+<!--            </div>-->
+<!--            <gl-loading-icon v-else-if="retrievingBatches" size="lg" />-->
+<!--          </template>-->
+<!--          <no-changes-->
+<!--            v-else-if="!isBatchLoadingError"-->
+<!--            :changes-empty-state-illustration="changesEmptyStateIllustration"-->
+<!--          />-->
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/diffs/components/diff_batch_fetcher.vue b/app/assets/javascripts/diffs/components/diff_batch_fetcher.vue
new file mode 100644
index 00000000000000..a46e9824e91788
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_batch_fetcher.vue
@@ -0,0 +1,55 @@
+<script>
+import axios from "~/lib/utils/axios_utils";
+import { mergeUrlParams } from "~/lib/utils/url_utility";
+import * as types from "~/diffs/store/mutation_types";
+import {mapMutations} from "vuex";
+
+export default {
+  name: 'BatchFetcher',
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
+    },
+    page: {
+      type: Number,
+      required: true,
+    },
+    perPage: {
+      type: Number,
+      required: true,
+    },
+    showWhitespace: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  async serverPrefetch() {
+    await this.fetchFilesBatch();
+  },
+  data() {
+    return {
+      filesBatch: null,
+    }
+  },
+  methods: {
+    ...mapMutations('diffs', [types.SET_DIFF_DATA_BATCH]),
+    async fetchFilesBatch() {
+      const urlParams = {
+        w: this.showWhitespace ? '0' : '1',
+        view: 'inline',
+      };
+      const { data: { diff_files: filesBatch } } = await axios
+        .get(mergeUrlParams({ ...urlParams, page: this.page, per_page: this.perPage }, this.endpoint));
+      this.filesBatch = filesBatch;
+      this[types.SET_DIFF_DATA_BATCH]({ diff_files: filesBatch });
+    },
+  },
+}
+</script>
+
+<template>
+  <div>
+    <slot :files="filesBatch" ></slot>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
index d7b63d205dc7a2..ce1f045790c184 100644
--- a/app/assets/javascripts/diffs/components/diff_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -2,19 +2,16 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { mapParallel } from 'ee_else_ce/diffs/components/diff_row_utils';
-import DiffFileDrafts from '~/batch_comments/components/diff_file_drafts.vue';
 import draftCommentsMixin from '~/diffs/mixins/draft_comments';
 import { diffViewerModes } from '~/ide/constants';
 import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form';
 import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
 import NoPreviewViewer from '~/vue_shared/components/diff_viewer/viewers/no_preview.vue';
 import NotDiffableViewer from '~/vue_shared/components/diff_viewer/viewers/not_diffable.vue';
-import NoteForm from '~/notes/components/note_form.vue';
 import eventHub from '~/notes/event_hub';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { IMAGE_DIFF_POSITION_TYPE } from '../constants';
 import { getDiffMode } from '../store/utils';
-import DiffDiscussions from './diff_discussions.vue';
 import DiffView from './diff_view.vue';
 import ImageDiffOverlay from './image_diff_overlay.vue';
 
@@ -23,13 +20,16 @@ export default {
     GlLoadingIcon,
     DiffView,
     DiffViewer,
-    NoteForm,
-    DiffDiscussions,
+    // GFM dependency
+    NoteForm: () => import('~/notes/components/note_form.vue'),
+    // GFM dependency
+    DiffDiscussions: () => import('./diff_discussions.vue'),
     ImageDiffOverlay,
     NotDiffableViewer,
     NoPreviewViewer,
     UserAvatarLink,
-    DiffFileDrafts,
+    // GFM dependency
+    DiffFileDrafts: () => import('~/batch_comments/components/diff_file_drafts.vue'),
   },
   mixins: [diffLineNoteFormMixin, draftCommentsMixin],
   props: {
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 422bf52a1fa47c..21d6c13a190c85 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -8,7 +8,7 @@ import {
 } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { IdState } from 'vendor/vue-virtual-scroller';
+import IdState from 'vendor/vue-virtual-scroller/src/mixins/IdState';
 import DiffContent from 'jh_else_ce/diffs/components/diff_content.vue';
 import { createAlert } from '~/flash';
 import { hasDiff } from '~/helpers/diffs_helper';
@@ -115,6 +115,7 @@ export default {
       return getShortShaFromFile(this.file);
     },
     showLoadingIcon() {
+      return false;
       return this.idState.isLoadingCollapsedDiff || (!this.file.renderIt && !this.isCollapsed);
     },
     hasDiff() {
@@ -171,6 +172,7 @@ export default {
       return Boolean(gon.current_user_id);
     },
     codequalityDiffForFile() {
+      return [];
       return this.codequalityDiff?.files?.[this.file.file_path] || [];
     },
     isCollapsed() {
@@ -329,10 +331,8 @@ export default {
   <div
     :id="!preRender && active && file.file_hash"
     :class="{
-      'is-active': currentDiffFileId === file.file_hash,
       'comments-disabled': Boolean(file.brokenSymlink),
       'has-body': showBody,
-      'is-virtual-scrolling': isVirtualScrollingEnabled,
     }"
     :data-path="file.new_path"
     class="diff-file file-holder gl-border-none"
@@ -472,19 +472,3 @@ export default {
   </div>
 </template>
 
-<style>
-@keyframes shadow-fade {
-  from {
-    box-shadow: 0 0 4px #919191;
-  }
-
-  to {
-    box-shadow: 0 0 0 #dfdfdf;
-  }
-}
-
-.diff-file.is-active {
-  box-shadow: 0 0 0 #dfdfdf;
-  animation: shadow-fade 1.2s 0.1s 1;
-}
-</style>
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 91c3df39e32b8a..2eaab56034ac72 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -14,7 +14,7 @@ import {
 } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { IdState } from 'vendor/vue-virtual-scroller';
+import IdState from 'vendor/vue-virtual-scroller/src/mixins/IdState';
 import { scrollToElement } from '~/lib/utils/common_utils';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { __, s__, sprintf } from '~/locale';
@@ -108,7 +108,7 @@ export default {
   },
   computed: {
     ...mapState('diffs', ['latestDiff']),
-    ...mapGetters('diffs', ['diffHasExpandedDiscussions', 'diffHasDiscussions']),
+    // ...mapGetters('diffs', ['diffHasExpandedDiscussions', 'diffHasDiscussions']),
     diffContentIDSelector() {
       return `#diff-content-${this.diffFile.file_hash}`;
     },
@@ -270,6 +270,12 @@ export default {
         this.$emit('toggleFile');
       }
     },
+    diffHasExpandedDiscussions() {
+      return false;
+    },
+    diffHasDiscussions() {
+      return false;
+    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/diffs/components/diff_files.vue b/app/assets/javascripts/diffs/components/diff_files.vue
new file mode 100644
index 00000000000000..dd8f8ef7e11641
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_files.vue
@@ -0,0 +1,71 @@
+<script>
+import BatchFetcher from './diff_batch_fetcher.vue';
+import DiffFile from './diff_file.vue';
+
+export default {
+  name: "DiffFiles",
+  components: {
+    BatchFetcher,
+    DiffFile,
+  },
+  props: {
+    diffFilesLength: {
+      type: Number,
+      required: true,
+    },
+    endpointBatch: {
+      type: Number,
+      required: true,
+    },
+    showWhitespace: {
+      type: Number,
+      required: true,
+    },
+    fileReviews: {
+      type: Number,
+      required: true,
+    },
+    helpPagePath: {
+      type: Number,
+      required: true,
+    },
+    canCurrentUserFork: {
+      type: Number,
+      required: true,
+    },
+    viewDiffsFileByFile: {
+      type: Number,
+      required: true,
+    },
+  },
+}
+</script>
+
+<template>
+  <div class="diff-files">
+    <batch-fetcher
+      v-for="index in Math.ceil(diffFilesLength / 30)"
+      :key="index"
+      :page="(index - 1) * 30"
+      :per-page="30"
+      :endpoint="endpointBatch"
+      :show-whitespace="showWhitespace"
+    >
+      <template #default="{ files }">
+        <div
+          v-for="file in files"
+          :key="file.new_path"
+        >
+          <diff-file
+            :file="file"
+            :reviewed="fileReviews[file.id]"
+            :help-page-path="helpPagePath"
+            :can-current-user-fork="canCurrentUserFork"
+            :view-diffs-file-by-file="viewDiffsFileByFile"
+          />
+          <diff-file-fetched :path="file.new_path"></diff-file-fetched>
+        </div>
+      </template>
+    </batch-fetcher>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/diff_row_utils.js b/app/assets/javascripts/diffs/components/diff_row_utils.js
index e0749b63021d76..f049eb124a02de 100644
--- a/app/assets/javascripts/diffs/components/diff_row_utils.js
+++ b/app/assets/javascripts/diffs/components/diff_row_utils.js
@@ -118,8 +118,8 @@ export const mapParallel = (content) => (line) => {
     left = {
       ...left,
       renderDiscussion: hasExpandedDiscussionOnLeft,
-      hasDraft: content.hasParallelDraftLeft(content.diffFile.file_hash, line),
-      lineDrafts: content.draftsForLine(content.diffFile.file_hash, line, 'left'),
+      hasDraft: content.hasParallelDraftLeft?.(content.diffFile.file_hash, line) || false,
+      lineDrafts: content.draftsForLine?.(content.diffFile.file_hash, line, 'left') || [],
       hasCommentForm: left.hasForm,
       isConflictMarker:
         line.left.type === CONFLICT_MARKER_OUR || line.left.type === CONFLICT_MARKER_THEIR,
@@ -133,8 +133,8 @@ export const mapParallel = (content) => (line) => {
       renderDiscussion: Boolean(
         hasExpandedDiscussionOnRight && right.type && right.type !== EXPANDED_LINE_TYPE,
       ),
-      hasDraft: content.hasParallelDraftRight(content.diffFile.file_hash, line),
-      lineDrafts: content.draftsForLine(content.diffFile.file_hash, line, 'right'),
+      hasDraft: content.hasParallelDraftRight?.(content.diffFile.file_hash, line) || false,
+      lineDrafts: content.draftsForLine?.(content.diffFile.file_hash, line, 'right') || [],
       hasCommentForm: Boolean(right.hasForm && right.type && right.type !== EXPANDED_LINE_TYPE),
       emptyCellClassMap: { conflict_their: line.left?.type === CONFLICT_OUR },
       addCommentTooltip: addCommentTooltip(line.right),
diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue
index 5ea118afe78a23..997539483aff5d 100644
--- a/app/assets/javascripts/diffs/components/diff_view.vue
+++ b/app/assets/javascripts/diffs/components/diff_view.vue
@@ -1,14 +1,12 @@
 <script>
 import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { mapGetters, mapState, mapActions } from 'vuex';
-import { IdState } from 'vendor/vue-virtual-scroller';
+import IdState from 'vendor/vue-virtual-scroller/src/mixins/IdState';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import DraftNote from '~/batch_comments/components/draft_note.vue';
 import draftCommentsMixin from '~/diffs/mixins/draft_comments';
 import { getCommentedLines } from '~/notes/components/multiline_comment_utils';
 import { hide } from '~/tooltips';
 import { pickDirection } from '../utils/diff_line';
-import DiffCommentCell from './diff_comment_cell.vue';
 import DiffLine from './diff_line.vue';
 import DiffExpansionCell from './diff_expansion_cell.vue';
 import DiffRow from './diff_row.vue';
@@ -19,8 +17,10 @@ export default {
     DiffExpansionCell,
     DiffRow,
     DiffLine,
-    DiffCommentCell,
-    DraftNote,
+    // GFM dependency
+    DiffCommentCell: () => import('./diff_comment_cell.vue'),
+    // GFM dependency
+    DraftNote: () => import('~/batch_comments/components/draft_note.vue'),
   },
   directives: {
     SafeHtml,
@@ -65,8 +65,8 @@ export default {
     ...mapGetters('diffs', ['commitId', 'fileLineCoverage']),
     ...mapState('diffs', ['codequalityDiff', 'highlightedRow', 'coverageLoaded']),
     ...mapState({
-      selectedCommentPosition: ({ notes }) => notes.selectedCommentPosition,
-      selectedCommentPositionHover: ({ notes }) => notes.selectedCommentPositionHover,
+      selectedCommentPosition: ({ notes }) => notes?.selectedCommentPosition,
+      selectedCommentPositionHover: ({ notes }) => notes?.selectedCommentPositionHover,
     }),
     diffLinesLength() {
       return this.diffLines.length;
@@ -80,6 +80,9 @@ export default {
     hasCodequalityChanges() {
       return this.codequalityDiff?.files?.[this.diffFile.file_path]?.length > 0;
     },
+    userColorScheme() {
+      return globalThis?.gon?.user_color_scheme || 'white';
+    },
   },
   methods: {
     ...mapActions(['setSelectedCommentPosition']),
@@ -183,15 +186,17 @@ export default {
     lineHasDrafts(line, side) {
       return this.lineDrafts(line, side).length > 0;
     },
+    shouldRenderParallelDraftRowUniversal(...args) {
+      return this.shouldRenderParallelDraftRow?.(...args);
+    },
   },
-  userColorScheme: window.gon.user_color_scheme,
 };
 </script>
 
 <template>
   <div
     :class="[
-      $options.userColorScheme,
+      userColorScheme,
       { 'inline-diff-view': inline, 'with-codequality': hasCodequalityChanges },
     ]"
     :data-commit-id="commitId"
@@ -297,7 +302,7 @@ export default {
         </div>
       </div>
       <div
-        v-if="shouldRenderParallelDraftRow(diffFile.file_hash, line)"
+        v-if="shouldRenderParallelDraftRowUniversal(diffFile.file_hash, line)"
         :key="`drafts-${index}`"
         :class="line.draftRowClasses"
         class="diff-grid-drafts diff-tr notes_holder"
diff --git a/app/assets/javascripts/diffs/diff_renderer_worker.js b/app/assets/javascripts/diffs/diff_renderer_worker.js
new file mode 100644
index 00000000000000..d4ea05d50a230a
--- /dev/null
+++ b/app/assets/javascripts/diffs/diff_renderer_worker.js
@@ -0,0 +1,35 @@
+import Vue, { createSSRApp } from 'vue';
+import { createStore } from 'vuex';
+import { renderToWebStream } from '@vue/server-renderer';
+import DiffFiles from './components/diff_files.vue';
+import diffsModule from '~/diffs/store/modules';
+import { __, s__ } from '~/locale';
+
+Vue.prototype.__ = __;
+Vue.prototype.s__ = s__;
+
+self.addEventListener('message', async (e) => {
+  const { data } = e;
+
+  if (data === undefined) {
+    return;
+  }
+
+  const { globals, props, storeState } = data;
+
+  if (globals) Object.assign(globalThis, globals);
+
+  if (props) {
+    const store = createStore({
+      modules: {
+        diffs: diffsModule(storeState),
+        batchComments: { state() {} },
+      },
+    });
+    const app = createSSRApp(DiffFiles, props);
+    app.use(store);
+    const stream = renderToWebStream(app);
+
+    self.postMessage(stream, [stream]);
+  }
+});
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index b4ff5e4f250e70..e07dcdd180a307 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -1,6 +1,7 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { getCookie, parseBoolean, removeCookie } from '~/lib/utils/common_utils';
+import DiffRenderer from '~/diffs/diff_renderer_worker';
 
 import eventHub from '../notes/event_hub';
 import DiffsApp from './components/app.vue';
@@ -10,15 +11,13 @@ import { getReviewsForMergeRequest } from './utils/file_reviews';
 import { getDerivedMergeRequestInformation } from './utils/merge_request';
 
 export default function initDiffsApp(store) {
-  const vm = new Vue({
-    el: '#js-diffs-app',
+  const app = createApp({
     name: 'MergeRequestDiffs',
     components: {
       DiffsApp,
     },
-    store,
     data() {
-      const { dataset } = document.querySelector(this.$options.el);
+      const { dataset } = document.querySelector('#js-diffs-app');
 
       return {
         endpoint: dataset.endpoint,
@@ -40,6 +39,7 @@ export default function initDiffsApp(store) {
         sourceProjectDefaultUrl: dataset.sourceProjectDefaultUrl,
         sourceProjectFullPath: dataset.sourceProjectFullPath,
         isForked: parseBoolean(dataset.isForked),
+        stream: null,
       };
     },
     computed: {
@@ -51,7 +51,8 @@ export default function initDiffsApp(store) {
       const treeListStored = localStorage.getItem(TREE_LIST_STORAGE_KEY);
       const renderTreeList = treeListStored !== null ? parseBoolean(treeListStored) : true;
 
-      this.setRenderTreeList({ renderTreeList, trackClick: false });
+      // this.setRenderTreeList({ renderTreeList, trackClick: false });
+      let showWhitespace = this.showWhitespaceDefault;
 
       // NOTE: A "true" or "checked" value for `showWhitespace` is '0' not '1'.
       // Check for cookie and save that setting for future use.
@@ -59,20 +60,48 @@ export default function initDiffsApp(store) {
       // NOTE: This can/should be removed later
       if (getCookie(DIFF_WHITESPACE_COOKIE_NAME)) {
         const hideWhitespace = getCookie(DIFF_WHITESPACE_COOKIE_NAME);
-        this.setShowWhitespace({
-          url: this.endpointUpdateUser,
-          showWhitespace: hideWhitespace !== '1',
-          trackClick: false,
-        });
+        showWhitespace = hideWhitespace !== '1';
+        // this.setShowWhitespace({
+        //   url: this.endpointUpdateUser,
+        //   showWhitespace,
+        //   trackClick: false,
+        // });
         removeCookie(DIFF_WHITESPACE_COOKIE_NAME);
       } else {
         // This is only to set the the user preference in Vuex for use later
-        this.setShowWhitespace({
-          showWhitespace: this.showWhitespaceDefault,
-          updateDatabase: false,
-          trackClick: false,
-        });
+        // this.setShowWhitespace({
+        //   showWhitespace,
+        //   updateDatabase: false,
+        //   trackClick: false,
+        // });
       }
+
+      const { endpointBatch, helpPagePath, viewDiffsFileByFile } = this;
+
+      const endpoint = new URL(endpointBatch, window.location.origin);
+
+      const renderer = new DiffRenderer();
+      renderer.addEventListener('message', ({ data: stream }) => {
+        this.stream = stream;
+      });
+      renderer.postMessage({
+        globals: {
+          csrf: document.querySelector('meta[name=csrf-token]').getAttribute('content'),
+          gon: window.gon || {},
+        },
+        props: {
+          diffFilesLength: parseInt(document.querySelector('.diffs-tab .badge').textContent, 10),
+          endpointBatch: endpoint.toString(),
+          showWhitespace,
+          fileReviews: {},
+          helpPagePath,
+          canCurrentUserFork: false,
+          viewDiffsFileByFile,
+        },
+        storeState: {
+          diffViewType: this.$store.state.diffs.diffViewType,
+        },
+      });
     },
     methods: {
       ...mapActions('diffs', ['setRenderTreeList', 'setShowWhitespace']),
@@ -102,18 +131,20 @@ export default function initDiffsApp(store) {
           sourceProjectDefaultUrl: this.sourceProjectDefaultUrl,
           sourceProjectFullPath: this.sourceProjectFullPath,
           isForked: this.isForked,
+          stream: this.stream,
         },
       });
     },
   });
 
+  app.use(store);
+  app.mount('#js-diffs-app');
+
   const fileFinderEl = document.getElementById('js-diff-file-finder');
 
   if (fileFinderEl) {
     // eslint-disable-next-line no-new
-    new Vue({
-      el: fileFinderEl,
-      store,
+    const finderApp = createApp({
       components: {
         FindFile: () => import('~/vue_shared/components/file_finder/index.vue'),
       },
@@ -152,7 +183,8 @@ export default function initDiffsApp(store) {
         });
       },
     });
-  }
 
-  return vm;
+    finderApp.use(store);
+    finderApp.mount(fileFinderEl);
+  }
 }
diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index 65ba9941b983ea..c341a7ddb586df 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -7,7 +7,7 @@ const getViewTypeFromQueryString = () => getParameterValues('view')[0];
 const viewTypeFromCookie = getCookie(DIFF_VIEW_COOKIE_NAME);
 const defaultViewType = INLINE_DIFF_VIEW_TYPE;
 
-export default () => ({
+export default ({ diffViewType } = {}) => ({
   isLoading: true,
   isTreeLoaded: false,
   batchLoadingState: null,
@@ -24,7 +24,8 @@ export default () => ({
   coverageLoaded: false,
   mergeRequestDiffs: [],
   mergeRequestDiff: null,
-  diffViewType: getViewTypeFromQueryString() || viewTypeFromCookie || defaultViewType,
+  diffViewType:
+    diffViewType || getViewTypeFromQueryString() || viewTypeFromCookie || defaultViewType,
   tree: [],
   treeEntries: {},
   showTreeList: true,
diff --git a/app/assets/javascripts/diffs/store/modules/index.js b/app/assets/javascripts/diffs/store/modules/index.js
index 169502a957b472..0fef603bdaf9a9 100644
--- a/app/assets/javascripts/diffs/store/modules/index.js
+++ b/app/assets/javascripts/diffs/store/modules/index.js
@@ -3,9 +3,9 @@ import * as getters from 'ee_else_ce/diffs/store/getters';
 import createState from 'ee_else_ce/diffs/store/modules/diff_state';
 import mutations from 'ee_else_ce/diffs/store/mutations';
 
-export default () => ({
+export default (storeState) => ({
   namespaced: true,
-  state: createState(),
+  state: createState(storeState),
   getters,
   actions,
   mutations,
diff --git a/app/assets/javascripts/diffs/streaming.js b/app/assets/javascripts/diffs/streaming.js
new file mode 100644
index 00000000000000..cef02661b457e1
--- /dev/null
+++ b/app/assets/javascripts/diffs/streaming.js
@@ -0,0 +1,25 @@
+export const renderStream = async (stream, element) => {
+  const reader = stream.getReader();
+  const decoder = new TextDecoder('utf-8');
+
+  const streamDocument = document.implementation.createHTMLDocument('stream');
+
+  streamDocument.open();
+  streamDocument.write('<streaming-element>');
+
+  const virtualStreamingElement = streamDocument.querySelector('streaming-element');
+  element.appendChild(virtualStreamingElement);
+
+  await reader.read().then(async function processText({ done, value }) {
+    if (done) {
+      streamDocument.write('</streaming-element>');
+      streamDocument.close();
+      return;
+    }
+
+    streamDocument.write(decoder.decode(value).normalize('NFC'));
+
+    const result = await reader.read();
+    await processText(result);
+  });
+};
diff --git a/app/assets/javascripts/lib/dompurify.js b/app/assets/javascripts/lib/dompurify.js
index 27760e483aa5c1..768ccde74c393f 100644
--- a/app/assets/javascripts/lib/dompurify.js
+++ b/app/assets/javascripts/lib/dompurify.js
@@ -78,7 +78,7 @@ const sanitizeSvgIcon = (node) => {
   removeUnsafeHref(node, 'xlink:href');
 };
 
-addHook('afterSanitizeAttributes', (node) => {
+addHook?.('afterSanitizeAttributes', (node) => {
   if (node.tagName.toLowerCase() === 'use') {
     sanitizeSvgIcon(node);
   }
@@ -86,13 +86,13 @@ addHook('afterSanitizeAttributes', (node) => {
 
 const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
 
-addHook('beforeSanitizeAttributes', (node) => {
+addHook?.('beforeSanitizeAttributes', (node) => {
   if (node.tagName === 'A' && node.hasAttribute('target')) {
     node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target'));
   }
 });
 
-addHook('afterSanitizeAttributes', (node) => {
+addHook?.('afterSanitizeAttributes', (node) => {
   if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
     node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE));
     node.removeAttribute(TEMPORARY_ATTRIBUTE);
diff --git a/app/assets/javascripts/lib/utils/axios_startup_calls.js b/app/assets/javascripts/lib/utils/axios_startup_calls.js
index f9d58ff9b1dae7..15c179c59be20a 100644
--- a/app/assets/javascripts/lib/utils/axios_startup_calls.js
+++ b/app/assets/javascripts/lib/utils/axios_startup_calls.js
@@ -37,7 +37,7 @@ const handleStartupCall = async ({ fetchCall }, req) => {
 };
 
 const setupAxiosStartupCalls = (axios) => {
-  const { startup_calls: startupCalls } = window.gl || {};
+  const { startup_calls: startupCalls } = globalThis.gl || {};
 
   if (!startupCalls || isEmpty(startupCalls)) {
     return;
diff --git a/app/assets/javascripts/lib/utils/axios_utils.js b/app/assets/javascripts/lib/utils/axios_utils.js
index de6d85b8a189f4..abf11ffe8591b7 100644
--- a/app/assets/javascripts/lib/utils/axios_utils.js
+++ b/app/assets/javascripts/lib/utils/axios_utils.js
@@ -12,8 +12,8 @@ axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 // Maintain a global counter for active requests
 // see: spec/support/wait_for_requests.rb
 axios.interceptors.request.use((config) => {
-  window.pendingRequests = window.pendingRequests || 0;
-  window.pendingRequests += 1;
+  globalThis.pendingRequests = globalThis.pendingRequests || 0;
+  globalThis.pendingRequests += 1;
   return config;
 });
 
@@ -22,11 +22,11 @@ setupAxiosStartupCalls(axios);
 // Remove the global counter
 axios.interceptors.response.use(
   (response) => {
-    window.pendingRequests -= 1;
+    globalThis.pendingRequests -= 1;
     return response;
   },
   (err) => {
-    window.pendingRequests -= 1;
+    globalThis.pendingRequests -= 1;
     return Promise.reject(err);
   },
 );
diff --git a/app/assets/javascripts/lib/utils/color_utils.js b/app/assets/javascripts/lib/utils/color_utils.js
index 3d8df4fde05895..dc713a681137a5 100644
--- a/app/assets/javascripts/lib/utils/color_utils.js
+++ b/app/assets/javascripts/lib/utils/color_utils.js
@@ -1,4 +1,4 @@
-const colorValidatorEl = document.createElement('div');
+const colorValidatorEl = globalThis?.document?.createElement('div');
 
 /**
  * Validates whether the specified color expression
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index beced4f9144d6e..149e82002986f7 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -683,7 +683,7 @@ export const removeCookie = (name) => Cookies.remove(name);
  * @param {String} flag Feature flag
  * @returns {Boolean} on/off
  */
-export const isFeatureFlagEnabled = (flag) => window.gon.features?.[flag];
+export const isFeatureFlagEnabled = (flag) => globalThis?.gon?.features?.[flag];
 
 /**
  * This method takes in array with snake_case strings
@@ -694,7 +694,7 @@ export const isFeatureFlagEnabled = (flag) => window.gon.features?.[flag];
  */
 export const convertArrayToCamelCase = (array) => array.map((i) => convertToCamelCase(i));
 
-export const isLoggedIn = () => Boolean(window.gon?.current_user_id);
+export const isLoggedIn = () => Boolean(globalThis?.gon?.current_user_id);
 
 /**
  * This method takes in array of objects with snake_case
diff --git a/app/assets/javascripts/lib/utils/cookies.js b/app/assets/javascripts/lib/utils/cookies.js
index be0491376c9b36..18996a81d3e54e 100644
--- a/app/assets/javascripts/lib/utils/cookies.js
+++ b/app/assets/javascripts/lib/utils/cookies.js
@@ -2,7 +2,7 @@ import CookiesBuilder from 'js-cookie';
 
 // set default path for cookies
 const Cookies = CookiesBuilder.withAttributes({
-  path: gon.relative_url_root || '/',
+  path: globalThis?.gon?.relative_url_root || '/',
 });
 
 export default Cookies;
diff --git a/app/assets/javascripts/lib/utils/csrf.js b/app/assets/javascripts/lib/utils/csrf.js
index 3114a2a0dfbc84..6269b34174aa1d 100644
--- a/app/assets/javascripts/lib/utils/csrf.js
+++ b/app/assets/javascripts/lib/utils/csrf.js
@@ -20,9 +20,9 @@ and https://github.com/rails/jquery-rails/blob/v4.3.1/vendor/assets/javascripts/
  */
 const csrf = {
   init() {
-    const tokenEl = document.querySelector('meta[name=csrf-token]');
+    const tokenEl = globalThis.document?.querySelector('meta[name=csrf-token]');
 
-    if (tokenEl !== null) {
+    if (tokenEl != null) {
       this.csrfToken = tokenEl.getAttribute('content');
     } else {
       this.csrfToken = null;
@@ -30,7 +30,7 @@ const csrf = {
   },
 
   get token() {
-    return this.csrfToken;
+    return globalThis.csrf || this.csrfToken;
   },
 
   get headerKey() {
diff --git a/app/assets/javascripts/lib/utils/icons_path.js b/app/assets/javascripts/lib/utils/icons_path.js
index 1a1c3c8e7b3528..e47fdecaf9581c 100644
--- a/app/assets/javascripts/lib/utils/icons_path.js
+++ b/app/assets/javascripts/lib/utils/icons_path.js
@@ -1,3 +1,9 @@
 // any import of '@gitlab/svgs/dist/icons.svg' will be overridden with this
 // to avoid asset duplication between sprockets and webpack
-export default gon && gon.sprite_icons;
+const resolveIcon = () => globalThis.gon?.sprite_icons;
+
+const obj = {
+  toString: resolveIcon,
+  toPrimitive: resolveIcon,
+};
+export default obj;
diff --git a/app/assets/javascripts/lib/utils/is_navigating_away.js b/app/assets/javascripts/lib/utils/is_navigating_away.js
index 7df00b45379940..7d4ec51754201f 100644
--- a/app/assets/javascripts/lib/utils/is_navigating_away.js
+++ b/app/assets/javascripts/lib/utils/is_navigating_away.js
@@ -1,6 +1,6 @@
 let navigating = false;
 
-window.addEventListener('beforeunload', () => {
+globalThis.addEventListener('beforeunload', () => {
   navigating = true;
 });
 
diff --git a/app/assets/javascripts/locale/index.js b/app/assets/javascripts/locale/index.js
index ad01da2eb1724f..f34ba72a8b133c 100644
--- a/app/assets/javascripts/locale/index.js
+++ b/app/assets/javascripts/locale/index.js
@@ -5,9 +5,9 @@ import sprintf from './sprintf';
 const GITLAB_FALLBACK_LANGUAGE = 'en';
 
 const languageCode = () =>
-  document.querySelector('html').getAttribute('lang') || GITLAB_FALLBACK_LANGUAGE;
-const locale = new Jed(window.translations || {});
-delete window.translations;
+  globalThis?.document?.querySelector('html')?.getAttribute('lang') || globalThis.lang || GITLAB_FALLBACK_LANGUAGE;
+const locale = new Jed(globalThis.translations || {});
+delete globalThis.translations;
 
 /**
   Translates `text`
diff --git a/app/assets/javascripts/mr_notes/stores/index.js b/app/assets/javascripts/mr_notes/stores/index.js
index 7527c685c71e08..c8e9515170e48c 100644
--- a/app/assets/javascripts/mr_notes/stores/index.js
+++ b/app/assets/javascripts/mr_notes/stores/index.js
@@ -1,12 +1,9 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
+import { createStore } from 'vuex';
 import batchCommentsModule from '~/batch_comments/stores/modules/batch_comments';
 import diffsModule from '~/diffs/store/modules';
 import notesModule from '~/notes/stores/modules';
 import mrPageModule from './modules';
 
-Vue.use(Vuex);
-
 export const createModules = () => ({
   page: mrPageModule(),
   notes: notesModule(),
@@ -14,9 +11,9 @@ export const createModules = () => ({
   batchComments: batchCommentsModule(),
 });
 
-export const createStore = () =>
-  new Vuex.Store({
+export const createMrStore = () =>
+  createStore({
     modules: createModules(),
   });
 
-export default createStore();
+export default createMrStore();
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index 3128b534ee9015..ce6db028a514f7 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -52,6 +52,10 @@ export default {
     isCollapsed() {
       return isCollapsed(this.discussion.diff_file);
     },
+    // gon is not available in worker on the import phase
+    userColorSchemeClass() {
+      return globalThis?.gon?.user_color_scheme || 'white'
+    },
   },
   mounted() {
     if (this.isTextFile && !this.hasTruncatedDiffLines) {
@@ -72,7 +76,6 @@ export default {
       return line.replace(FIRST_CHAR_REGEX, '');
     },
   },
-  userColorSchemeClass: window.gon.user_color_scheme,
 };
 </script>
 
@@ -85,7 +88,7 @@ export default {
       :expanded="!isCollapsed"
     />
     <div v-if="isTextFile" class="diff-content">
-      <table class="code js-syntax-highlight" :class="$options.userColorSchemeClass">
+      <table class="code js-syntax-highlight" :class="userColorSchemeClass">
         <template v-if="hasTruncatedDiffLines">
           <tr
             v-for="line in discussion.truncated_diff_lines"
diff --git a/app/assets/javascripts/sidebar/event_hub.js b/app/assets/javascripts/sidebar/event_hub.js
index dd4bd9a5ab77d4..387f4da64ba8d0 100644
--- a/app/assets/javascripts/sidebar/event_hub.js
+++ b/app/assets/javascripts/sidebar/event_hub.js
@@ -3,6 +3,6 @@ import createEventHub from '~/helpers/event_hub_factory';
 const eventHub = createEventHub();
 
 // TODO: remove eventHub hack after code splitting refactor
-window.emitSidebarEvent = (...args) => eventHub.$emit(...args);
+globalThis.emitSidebarEvent = (...args) => eventHub.$emit(...args);
 
 export default eventHub;
diff --git a/config/webpack.config.js b/config/webpack.config.js
index e5448463f03113..6c97c77ed59958 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -303,6 +303,9 @@ if (WEBPACK_USE_ESBUILD_LOADER) {
   console.log('esbuild-loader is active');
 }
 
+const windowReplacementPaths = ['get_event_like_time_stamp.js', 'pikaday.js'];
+const documentReplacementPaths = ['get_event_like_time_stamp.js'];
+
 module.exports = {
   mode: IS_PRODUCTION ? 'production' : 'development',
 
@@ -814,6 +817,26 @@ module.exports = {
       'process.env.SOURCEGRAPH_PUBLIC_PATH': JSON.stringify(SOURCEGRAPH_PUBLIC_PATH),
       'process.env.GITLAB_WEB_IDE_PUBLIC_PATH': JSON.stringify(GITLAB_WEB_IDE_PUBLIC_PATH),
       ...(IS_PRODUCTION ? {} : { LIVE_RELOAD: DEV_SERVER_LIVERELOAD }),
+      window: webpack.DefinePlugin.runtimeValue(function ({ module }) {
+        if (
+          windowReplacementPaths.some((replacementPath) =>
+            module.resource.includes(replacementPath),
+          )
+        ) {
+          return 'globalThis';
+        }
+        return 'window';
+      }),
+      document: webpack.DefinePlugin.runtimeValue(function ({ module }) {
+        if (
+          documentReplacementPaths.some((replacementPath) =>
+            module.resource.includes(replacementPath),
+          )
+        ) {
+          return 'globalThis?.document?';
+        }
+        return 'document';
+      }),
     }),
 
     /* Pikaday has a optional dependency to moment.
diff --git a/ee/app/assets/javascripts/diffs/store/actions.js b/ee/app/assets/javascripts/diffs/store/actions.js
index ef33bc75220e41..1d082d6bd8ab2d 100644
--- a/ee/app/assets/javascripts/diffs/store/actions.js
+++ b/ee/app/assets/javascripts/diffs/store/actions.js
@@ -1,4 +1,3 @@
-import Visibility from 'visibilityjs';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
@@ -28,7 +27,8 @@ export const restartCodequalityPolling = () => {
   if (codequalityPoll) codequalityPoll.restart();
 };
 
-export const fetchCodequality = ({ commit, state, dispatch }) => {
+export const fetchCodequality = async ({ commit, state, dispatch }) => {
+  if (typeof window === 'undefined') return;
   let retryCount = 0;
 
   codequalityPoll = new Poll({
@@ -66,6 +66,8 @@ export const fetchCodequality = ({ commit, state, dispatch }) => {
     },
   });
 
+  const Visibility = await import('visibilityjs');
+
   if (!Visibility.hidden()) {
     codequalityPoll.makeRequest();
   }
diff --git a/ee/app/assets/javascripts/diffs/store/modules/diff_state.js b/ee/app/assets/javascripts/diffs/store/modules/diff_state.js
index 3956c1813b3150..0b5a896d3e38ea 100644
--- a/ee/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/ee/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -1,7 +1,7 @@
 import createStateCE from '~/diffs/store/modules/diff_state';
 
-export default () => ({
-  ...createStateCE(),
+export default (storeState) => ({
+  ...createStateCE(storeState),
 
   endpointCodequality: '',
   codequalityDiff: {},
diff --git a/package.json b/package.json
index 69eba2fa717f6a..86c65c6ae4ca52 100644
--- a/package.json
+++ b/package.json
@@ -97,6 +97,7 @@
     "@vue/apollo-option": "^4.0.0-alpha.20",
     "@vue/compat": "^3.2.41",
     "@vue/compiler-sfc": "^3.2.41",
+    "@vue/server-renderer": "^3.2.45",
     "@vue/vue3-jest": "^29.1.1",
     "apollo-upload-client": "15.0.0",
     "autosize": "^5.0.1",
diff --git a/yarn.lock b/yarn.lock
index ebfe6aead83930..f044214a6176be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2371,6 +2371,16 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
+"@vue/compiler-core@3.2.45":
+  version "3.2.45"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.45.tgz#d9311207d96f6ebd5f4660be129fb99f01ddb41b"
+  integrity sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/shared" "3.2.45"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
+
 "@vue/compiler-dom@3.2.41":
   version "3.2.41"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz#dc63dcd3ce8ca8a8721f14009d498a7a54380299"
@@ -2379,6 +2389,14 @@
     "@vue/compiler-core" "3.2.41"
     "@vue/shared" "3.2.41"
 
+"@vue/compiler-dom@3.2.45":
+  version "3.2.45"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz#c43cc15e50da62ecc16a42f2622d25dc5fd97dce"
+  integrity sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==
+  dependencies:
+    "@vue/compiler-core" "3.2.45"
+    "@vue/shared" "3.2.45"
+
 "@vue/compiler-sfc@^3.2.41":
   version "3.2.41"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz#238fb8c48318408c856748f4116aff8cc1dc2a73"
@@ -2403,6 +2421,14 @@
     "@vue/compiler-dom" "3.2.41"
     "@vue/shared" "3.2.41"
 
+"@vue/compiler-ssr@3.2.45":
+  version "3.2.45"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz#bd20604b6e64ea15344d5b6278c4141191c983b2"
+  integrity sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==
+  dependencies:
+    "@vue/compiler-dom" "3.2.45"
+    "@vue/shared" "3.2.45"
+
 "@vue/component-compiler-utils@^3.1.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
@@ -2419,6 +2445,11 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/devtools-api@^6.0.0-beta.11":
+  version "6.4.5"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.4.5.tgz#d54e844c1adbb1e677c81c665ecef1a2b4bb8380"
+  integrity sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==
+
 "@vue/reactivity-transform@3.2.41":
   version "3.2.41"
   resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.41.tgz#9ff938877600c97f646e09ac1959b5150fb11a0c"
@@ -2430,11 +2461,24 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
+"@vue/server-renderer@^3.2.45":
+  version "3.2.45"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.45.tgz#ca9306a0c12b0530a1a250e44f4a0abac6b81f3f"
+  integrity sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==
+  dependencies:
+    "@vue/compiler-ssr" "3.2.45"
+    "@vue/shared" "3.2.45"
+
 "@vue/shared@3.2.41":
   version "3.2.41"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.41.tgz#fbc95422df654ea64e8428eced96ba6ad555d2bb"
   integrity sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==
 
+"@vue/shared@3.2.45":
+  version "3.2.45"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.45.tgz#a3fffa7489eafff38d984e23d0236e230c818bc2"
+  integrity sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==
+
 "@vue/test-utils-vue3@npm:@vue/test-utils@2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.1.0.tgz#c2f646aa2d6ac779f79a83f18c5b82fc40952bfd"
@@ -12555,10 +12599,12 @@ vuedraggable@^2.23.0:
   dependencies:
     sortablejs "^1.9.0"
 
-vuex@^3.6.2:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
-  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
+vuex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.1.0.tgz#aa1b3ea5c7385812b074c86faeeec2217872e36c"
+  integrity sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.11"
 
 w3c-hr-time@^1.0.2:
   version "1.0.2"
-- 
GitLab


From e76d4bbb93008d0d3855bb07274b22d568caaa2b Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Tue, 22 Nov 2022 03:33:31 +0400
Subject: [PATCH 05/13] Improve worker rendering performance

---
 .../javascripts/diffs/components/app.vue      |  31 ++--
 .../diffs/components/diff_files.vue           |   8 +-
 app/assets/javascripts/diffs/index.js         | 162 +++++++++---------
 app/assets/javascripts/diffs/streaming.js     |   7 +-
 config/webpack.config.js                      |   2 +-
 5 files changed, 106 insertions(+), 104 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index da244852dd47d3..4069199db58cbf 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -1,5 +1,6 @@
 <script>
-import { GlLoadingIcon, GlPagination, GlSprintf, GlAlert } from '@gitlab/ui';
+import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
+// import { GlLoadingIcon, GlPagination, GlSprintf, GlAlert } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import Mousetrap from 'mousetrap';
 import { mapState, mapGetters, mapActions } from 'vuex';
@@ -21,6 +22,7 @@ import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import notesEventHub from '~/notes/event_hub';
+import { renderStream } from "~/diffs/streaming";
 import {
   TREE_LIST_WIDTH_STORAGE_KEY,
   INITIAL_TREE_WIDTH,
@@ -48,33 +50,32 @@ import { queueRedisHllEvents } from '../utils/queue_events';
 import CollapsedFilesWarning from './collapsed_files_warning.vue';
 import CommitWidget from './commit_widget.vue';
 import CompareVersions from './compare_versions.vue';
-import DiffFile from './diff_file.vue';
+// import DiffFile from './diff_file.vue';
 import HiddenFilesWarning from './hidden_files_warning.vue';
-import NoChanges from './no_changes.vue';
+// import NoChanges from './no_changes.vue';
 import TreeList from './tree_list.vue';
-import VirtualScrollerScrollSync from './virtual_scroller_scroll_sync';
-import {renderStream} from "~/diffs/streaming";
+// import VirtualScrollerScrollSync from './virtual_scroller_scroll_sync';
 
 export default {
   name: 'DiffsApp',
   components: {
-    DynamicScroller: () =>
-      import('vendor/vue-virtual-scroller').then(({ DynamicScroller }) => DynamicScroller),
-    DynamicScrollerItem: () =>
-      import('vendor/vue-virtual-scroller').then(({ DynamicScrollerItem }) => DynamicScrollerItem),
-    PreRenderer: () => import('./pre_renderer.vue').then((PreRenderer) => PreRenderer),
-    VirtualScrollerScrollSync,
+  //   DynamicScroller: () =>
+  //     import('vendor/vue-virtual-scroller').then(({ DynamicScroller }) => DynamicScroller),
+  //   DynamicScrollerItem: () =>
+  //     import('vendor/vue-virtual-scroller').then(({ DynamicScrollerItem }) => DynamicScrollerItem),
+    // PreRenderer: () => import('./pre_renderer.vue').then((PreRenderer) => PreRenderer),
+    // VirtualScrollerScrollSync,
     CompareVersions,
-    DiffFile,
-    NoChanges,
+    // DiffFile,
+    // NoChanges,
     HiddenFilesWarning,
     CollapsedFilesWarning,
     CommitWidget,
     TreeList,
     GlLoadingIcon,
     PanelResizer,
-    GlPagination,
-    GlSprintf,
+    // GlPagination,
+    // GlSprintf,
     GlAlert,
   },
   mixins: [glFeatureFlagsMixin()],
diff --git a/app/assets/javascripts/diffs/components/diff_files.vue b/app/assets/javascripts/diffs/components/diff_files.vue
index dd8f8ef7e11641..cf26b3ea5f1055 100644
--- a/app/assets/javascripts/diffs/components/diff_files.vue
+++ b/app/assets/javascripts/diffs/components/diff_files.vue
@@ -38,16 +38,17 @@ export default {
       required: true,
     },
   },
+  perPage: 50,
 }
 </script>
 
 <template>
   <div class="diff-files">
     <batch-fetcher
-      v-for="index in Math.ceil(diffFilesLength / 30)"
+      v-for="index in Math.ceil(diffFilesLength / $options.perPage)"
       :key="index"
-      :page="(index - 1) * 30"
-      :per-page="30"
+      :page="(index - 1) * $options.perPage"
+      :per-page="$options.perPage"
       :endpoint="endpointBatch"
       :show-whitespace="showWhitespace"
     >
@@ -63,7 +64,6 @@ export default {
             :can-current-user-fork="canCurrentUserFork"
             :view-diffs-file-by-file="viewDiffsFileByFile"
           />
-          <diff-file-fetched :path="file.new_path"></diff-file-fetched>
         </div>
       </template>
     </batch-fetcher>
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index e07dcdd180a307..11a09c6e26763a 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -1,4 +1,4 @@
-import { createApp } from 'vue';
+import { ref, createApp } from 'vue';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { getCookie, parseBoolean, removeCookie } from '~/lib/utils/common_utils';
 import DiffRenderer from '~/diffs/diff_renderer_worker';
@@ -6,40 +6,76 @@ import DiffRenderer from '~/diffs/diff_renderer_worker';
 import eventHub from '../notes/event_hub';
 import DiffsApp from './components/app.vue';
 
-import { TREE_LIST_STORAGE_KEY, DIFF_WHITESPACE_COOKIE_NAME } from './constants';
+import { DIFF_WHITESPACE_COOKIE_NAME } from './constants';
 import { getReviewsForMergeRequest } from './utils/file_reviews';
 import { getDerivedMergeRequestInformation } from './utils/merge_request';
 
 export default function initDiffsApp(store) {
+  const { dataset } = document.querySelector('#js-diffs-app');
+  const data = {
+    endpoint: dataset.endpoint,
+    endpointMetadata: dataset.endpointMetadata || '',
+    endpointBatch: dataset.endpointBatch || '',
+    endpointCoverage: dataset.endpointCoverage || '',
+    endpointCodequality: dataset.endpointCodequality || '',
+    endpointUpdateUser: dataset.updateCurrentUserPath,
+    projectPath: dataset.projectPath,
+    helpPagePath: dataset.helpPagePath,
+    currentUser: JSON.parse(dataset.currentUserData) || {},
+    changesEmptyStateIllustration: dataset.changesEmptyStateIllustration,
+    isFluidLayout: parseBoolean(dataset.isFluidLayout),
+    dismissEndpoint: dataset.dismissEndpoint,
+    showSuggestPopover: parseBoolean(dataset.showSuggestPopover),
+    showWhitespaceDefault: parseBoolean(dataset.showWhitespaceDefault),
+    viewDiffsFileByFile: parseBoolean(dataset.fileByFileDefault),
+    defaultSuggestionCommitMessage: dataset.defaultSuggestionCommitMessage,
+    sourceProjectDefaultUrl: dataset.sourceProjectDefaultUrl,
+    sourceProjectFullPath: dataset.sourceProjectFullPath,
+    isForked: parseBoolean(dataset.isForked),
+  };
+
+  const { endpointBatch, helpPagePath, viewDiffsFileByFile, showWhitespaceDefault } = data;
+
+  const endpoint = new URL(endpointBatch, window.location.origin);
+
+  const renderer = new DiffRenderer();
+
+  // this.setRenderTreeList({ renderTreeList, trackClick: false });
+  let showWhitespace = showWhitespaceDefault;
+
+  // NOTE: A "true" or "checked" value for `showWhitespace` is '0' not '1'.
+  // Check for cookie and save that setting for future use.
+  // Then delete the cookie as we are phasing it out and using the database as SSOT.
+  // NOTE: This can/should be removed later
+  if (getCookie(DIFF_WHITESPACE_COOKIE_NAME)) {
+    const hideWhitespace = getCookie(DIFF_WHITESPACE_COOKIE_NAME);
+    showWhitespace = hideWhitespace !== '1';
+    // this.setShowWhitespace({
+    //   url: this.endpointUpdateUser,
+    //   showWhitespace,
+    //   trackClick: false,
+    // });
+    removeCookie(DIFF_WHITESPACE_COOKIE_NAME);
+  } else {
+    // This is only to set the the user preference in Vuex for use later
+    // this.setShowWhitespace({
+    //   showWhitespace,
+    //   updateDatabase: false,
+    //   trackClick: false,
+    // });
+  }
+
+  const stream = ref(null);
+
   const app = createApp({
     name: 'MergeRequestDiffs',
     components: {
       DiffsApp,
     },
     data() {
-      const { dataset } = document.querySelector('#js-diffs-app');
-
       return {
-        endpoint: dataset.endpoint,
-        endpointMetadata: dataset.endpointMetadata || '',
-        endpointBatch: dataset.endpointBatch || '',
-        endpointCoverage: dataset.endpointCoverage || '',
-        endpointCodequality: dataset.endpointCodequality || '',
-        endpointUpdateUser: dataset.updateCurrentUserPath,
-        projectPath: dataset.projectPath,
-        helpPagePath: dataset.helpPagePath,
-        currentUser: JSON.parse(dataset.currentUserData) || {},
-        changesEmptyStateIllustration: dataset.changesEmptyStateIllustration,
-        isFluidLayout: parseBoolean(dataset.isFluidLayout),
-        dismissEndpoint: dataset.dismissEndpoint,
-        showSuggestPopover: parseBoolean(dataset.showSuggestPopover),
-        showWhitespaceDefault: parseBoolean(dataset.showWhitespaceDefault),
-        viewDiffsFileByFile: parseBoolean(dataset.fileByFileDefault),
-        defaultSuggestionCommitMessage: dataset.defaultSuggestionCommitMessage,
-        sourceProjectDefaultUrl: dataset.sourceProjectDefaultUrl,
-        sourceProjectFullPath: dataset.sourceProjectFullPath,
-        isForked: parseBoolean(dataset.isForked),
-        stream: null,
+        ...data,
+        stream,
       };
     },
     computed: {
@@ -47,62 +83,6 @@ export default function initDiffsApp(store) {
         activeTab: (state) => state.page.activeTab,
       }),
     },
-    created() {
-      const treeListStored = localStorage.getItem(TREE_LIST_STORAGE_KEY);
-      const renderTreeList = treeListStored !== null ? parseBoolean(treeListStored) : true;
-
-      // this.setRenderTreeList({ renderTreeList, trackClick: false });
-      let showWhitespace = this.showWhitespaceDefault;
-
-      // NOTE: A "true" or "checked" value for `showWhitespace` is '0' not '1'.
-      // Check for cookie and save that setting for future use.
-      // Then delete the cookie as we are phasing it out and using the database as SSOT.
-      // NOTE: This can/should be removed later
-      if (getCookie(DIFF_WHITESPACE_COOKIE_NAME)) {
-        const hideWhitespace = getCookie(DIFF_WHITESPACE_COOKIE_NAME);
-        showWhitespace = hideWhitespace !== '1';
-        // this.setShowWhitespace({
-        //   url: this.endpointUpdateUser,
-        //   showWhitespace,
-        //   trackClick: false,
-        // });
-        removeCookie(DIFF_WHITESPACE_COOKIE_NAME);
-      } else {
-        // This is only to set the the user preference in Vuex for use later
-        // this.setShowWhitespace({
-        //   showWhitespace,
-        //   updateDatabase: false,
-        //   trackClick: false,
-        // });
-      }
-
-      const { endpointBatch, helpPagePath, viewDiffsFileByFile } = this;
-
-      const endpoint = new URL(endpointBatch, window.location.origin);
-
-      const renderer = new DiffRenderer();
-      renderer.addEventListener('message', ({ data: stream }) => {
-        this.stream = stream;
-      });
-      renderer.postMessage({
-        globals: {
-          csrf: document.querySelector('meta[name=csrf-token]').getAttribute('content'),
-          gon: window.gon || {},
-        },
-        props: {
-          diffFilesLength: parseInt(document.querySelector('.diffs-tab .badge').textContent, 10),
-          endpointBatch: endpoint.toString(),
-          showWhitespace,
-          fileReviews: {},
-          helpPagePath,
-          canCurrentUserFork: false,
-          viewDiffsFileByFile,
-        },
-        storeState: {
-          diffViewType: this.$store.state.diffs.diffViewType,
-        },
-      });
-    },
     methods: {
       ...mapActions('diffs', ['setRenderTreeList', 'setShowWhitespace']),
     },
@@ -137,6 +117,28 @@ export default function initDiffsApp(store) {
     },
   });
 
+  renderer.addEventListener('message', ({ data: sharedStream }) => {
+    stream.value = sharedStream;
+  });
+  renderer.postMessage({
+    globals: {
+      csrf: document.querySelector('meta[name=csrf-token]').getAttribute('content'),
+      gon: window.gon || {},
+    },
+    props: {
+      diffFilesLength: parseInt(document.querySelector('.diffs-tab .badge').textContent, 10),
+      endpointBatch: endpoint.toString(),
+      showWhitespace,
+      fileReviews: {},
+      helpPagePath,
+      canCurrentUserFork: false,
+      viewDiffsFileByFile,
+    },
+    storeState: {
+      diffViewType: store.state.diffs.diffViewType,
+    },
+  });
+
   app.use(store);
   app.mount('#js-diffs-app');
 
diff --git a/app/assets/javascripts/diffs/streaming.js b/app/assets/javascripts/diffs/streaming.js
index cef02661b457e1..916abc1b274b08 100644
--- a/app/assets/javascripts/diffs/streaming.js
+++ b/app/assets/javascripts/diffs/streaming.js
@@ -1,4 +1,4 @@
-export const renderStream = async (stream, element) => {
+export const renderStream = (stream, element) => {
   const reader = stream.getReader();
   const decoder = new TextDecoder('utf-8');
 
@@ -10,7 +10,7 @@ export const renderStream = async (stream, element) => {
   const virtualStreamingElement = streamDocument.querySelector('streaming-element');
   element.appendChild(virtualStreamingElement);
 
-  await reader.read().then(async function processText({ done, value }) {
+  reader.read().then(function processText({ done, value }) {
     if (done) {
       streamDocument.write('</streaming-element>');
       streamDocument.close();
@@ -19,7 +19,6 @@ export const renderStream = async (stream, element) => {
 
     streamDocument.write(decoder.decode(value).normalize('NFC'));
 
-    const result = await reader.read();
-    await processText(result);
+    reader.read().then(processText);
   });
 };
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 6c97c77ed59958..6e5df8fe07540a 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -425,7 +425,7 @@ module.exports = {
             loader: 'worker-loader',
             options: {
               name: '[name].[contenthash:8].worker.js',
-              inline: IS_DEV_SERVER,
+              inline: false, // IS_DEV_SERVER,
             },
           },
           'babel-loader',
-- 
GitLab


From 4dce87874ebca36b59c2b3529eb1030616c10d97 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Mon, 31 Oct 2022 23:35:26 +0400
Subject: [PATCH 06/13] Add diff batch startup api call

(cherry picked from commit f05c5f937d106c4155b18d114df7118bdecab8cb)
---
 app/controllers/projects/merge_requests_controller.rb | 9 +++++++++
 app/views/projects/merge_requests/show.html.haml      | 1 +
 2 files changed, 10 insertions(+)

diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index cfc565a8b567df..e6c8b9cb53178b 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -129,6 +129,7 @@ def show
         @coverage_path = coverage_reports_project_merge_request_path(@project, @merge_request, format: :json) if @merge_request.has_coverage_reports?
         @update_current_user_path = expose_path(api_v4_user_preferences_path)
         @endpoint_metadata_url = endpoint_metadata_url(@project, @merge_request)
+        @endpoint_diff_batch_url = endpoint_diff_batch_url(@project, @merge_request)
 
         set_pipeline_variables
 
@@ -559,6 +560,14 @@ def endpoint_metadata_url(project, merge_request)
     diffs_metadata_project_json_merge_request_path(project, merge_request, 'json', params)
   end
 
+  def endpoint_diff_batch_url(project, merge_request)
+    per_page = current_user&.view_diffs_file_by_file ? '1' : '5'
+    w = current_user&.show_whitespace_in_diffs ? '0' : '1'
+    params = request.query_parameters.merge(view: 'inline', diff_head: true, w: w, page: '0', per_page: per_page)
+
+    diffs_batch_project_json_merge_request_path(project, merge_request, 'json', params)
+  end
+
   def convert_date_to_epoch(date)
     Date.strptime(date, "%Y-%m-%d")&.to_time&.to_i if date
   rescue Date::Error, TypeError
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 615aac340bcaeb..8fd90a716c3908 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -15,6 +15,7 @@
 - add_page_specific_style 'page_bundles/ci_status'
 
 - add_page_startup_api_call @endpoint_metadata_url
+- add_page_startup_api_call @endpoint_diff_batch_url
 
 .merge-request{ data: { mr_action: mr_action, url: merge_request_path(@merge_request, format: :json), project_path: project_path(@merge_request.project), lock_version: @merge_request.lock_version } }
   - if moved_mr_sidebar_enabled?
-- 
GitLab


From 16a70c5c09b64112060a3446f10fbb453c82133e Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Fri, 4 Nov 2022 18:41:40 +0400
Subject: [PATCH 07/13] Refactor whitespace endpoint url parameter

(cherry picked from commit e970f78da94e3097ddc932fdea76d1e2f38c8392)
---
 app/controllers/projects/merge_requests_controller.rb | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index e6c8b9cb53178b..6744ea87555c6c 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -554,16 +554,19 @@ def authorize_read_actual_head_pipeline!
     return render_404 unless can?(current_user, :read_build, merge_request.actual_head_pipeline)
   end
 
+  def show_whitespace
+    current_user&.show_whitespace_in_diffs ? '0' : '1'
+  end
+
   def endpoint_metadata_url(project, merge_request)
-    params = request.query_parameters.merge(view: 'inline', diff_head: true, w: current_user&.show_whitespace_in_diffs ? '0' : '1')
+    params = request.query_parameters.merge(view: 'inline', diff_head: true, w: show_whitespace)
 
     diffs_metadata_project_json_merge_request_path(project, merge_request, 'json', params)
   end
 
   def endpoint_diff_batch_url(project, merge_request)
     per_page = current_user&.view_diffs_file_by_file ? '1' : '5'
-    w = current_user&.show_whitespace_in_diffs ? '0' : '1'
-    params = request.query_parameters.merge(view: 'inline', diff_head: true, w: w, page: '0', per_page: per_page)
+    params = request.query_parameters.merge(view: 'inline', diff_head: true, w: show_whitespace, page: '0', per_page: per_page)
 
     diffs_batch_project_json_merge_request_path(project, merge_request, 'json', params)
   end
-- 
GitLab


From 1dbfd82dc01c440848a76a5243931d6c1d538520 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Thu, 10 Nov 2022 02:34:44 +0400
Subject: [PATCH 08/13] Make a diffs startup call only on the diffs page

(cherry picked from commit 2b05bcb9ccb36aa8c75a6f5c941c43cf46669c54)
---
 app/views/projects/merge_requests/show.html.haml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 8fd90a716c3908..94a92be35d623d 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -15,7 +15,8 @@
 - add_page_specific_style 'page_bundles/ci_status'
 
 - add_page_startup_api_call @endpoint_metadata_url
-- add_page_startup_api_call @endpoint_diff_batch_url
+- if mr_action == 'diffs'
+  - add_page_startup_api_call @endpoint_diff_batch_url
 
 .merge-request{ data: { mr_action: mr_action, url: merge_request_path(@merge_request, format: :json), project_path: project_path(@merge_request.project), lock_version: @merge_request.lock_version } }
   - if moved_mr_sidebar_enabled?
-- 
GitLab


From 2cdfd46ff5aba6c662464f9c71d99ddab1c8c005 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Tue, 22 Nov 2022 17:16:20 +0400
Subject: [PATCH 09/13] Fix whitespace params incorrect value

---
 app/controllers/projects/merge_requests_controller.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index 6744ea87555c6c..d33bf3a843552f 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -555,7 +555,7 @@ def authorize_read_actual_head_pipeline!
   end
 
   def show_whitespace
-    current_user&.show_whitespace_in_diffs ? '0' : '1'
+    (current_user.nil? || current_user.show_whitespace_in_diffs) ? '0' : '1'
   end
 
   def endpoint_metadata_url(project, merge_request)
@@ -565,7 +565,7 @@ def endpoint_metadata_url(project, merge_request)
   end
 
   def endpoint_diff_batch_url(project, merge_request)
-    per_page = current_user&.view_diffs_file_by_file ? '1' : '5'
+    per_page = current_user&.view_diffs_file_by_file ? '1' : '50'
     params = request.query_parameters.merge(view: 'inline', diff_head: true, w: show_whitespace, page: '0', per_page: per_page)
 
     diffs_batch_project_json_merge_request_path(project, merge_request, 'json', params)
-- 
GitLab


From 4cb7c0d9041a9bea12cc31e6ba6a717f440ecfd6 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Tue, 22 Nov 2022 17:18:04 +0400
Subject: [PATCH 10/13] Improve Worker rendering

Add Backpressure handling

Make first files batch request ASAP and pass it to the Worker

Optimize diff_files.vue template

Pre-warm globalThis on the Worker
---
 .../diffs/components/diff_files.vue           |  46 +++++--
 .../javascripts/diffs/diff_renderer_worker.js |  10 +-
 app/assets/javascripts/diffs/index.js         | 123 +++++++++++-------
 app/assets/javascripts/diffs/streaming.js     |  34 ++++-
 4 files changed, 142 insertions(+), 71 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/diff_files.vue b/app/assets/javascripts/diffs/components/diff_files.vue
index cf26b3ea5f1055..7481216f59080b 100644
--- a/app/assets/javascripts/diffs/components/diff_files.vue
+++ b/app/assets/javascripts/diffs/components/diff_files.vue
@@ -13,6 +13,10 @@ export default {
       type: Number,
       required: true,
     },
+    perPage: {
+      type: Number,
+      required: true,
+    },
     endpointBatch: {
       type: Number,
       required: true,
@@ -37,34 +41,48 @@ export default {
       type: Number,
       required: true,
     },
+    firstFiles: {
+      type: Object,
+      required: true,
+    },
   },
-  perPage: 50,
+  computed: {
+    totalPages() {
+      return Math.max(Math.ceil(this.diffFilesLength / this.perPage) - 1, 0);
+    },
+  }
 }
 </script>
 
 <template>
   <div class="diff-files">
+    <diff-file
+      v-for="file in firstFiles"
+      :key="file.new_path"
+      :file="file"
+      :reviewed="fileReviews[file.id]"
+      :help-page-path="helpPagePath"
+      :can-current-user-fork="canCurrentUserFork"
+      :view-diffs-file-by-file="viewDiffsFileByFile"
+    />
     <batch-fetcher
-      v-for="index in Math.ceil(diffFilesLength / $options.perPage)"
+      v-for="index in totalPages"
       :key="index"
-      :page="(index - 1) * $options.perPage"
-      :per-page="$options.perPage"
+      :page="index * perPage"
+      :per-page="perPage"
       :endpoint="endpointBatch"
       :show-whitespace="showWhitespace"
     >
       <template #default="{ files }">
-        <div
+        <diff-file
           v-for="file in files"
           :key="file.new_path"
-        >
-          <diff-file
-            :file="file"
-            :reviewed="fileReviews[file.id]"
-            :help-page-path="helpPagePath"
-            :can-current-user-fork="canCurrentUserFork"
-            :view-diffs-file-by-file="viewDiffsFileByFile"
-          />
-        </div>
+          :file="file"
+          :reviewed="fileReviews[file.id]"
+          :help-page-path="helpPagePath"
+          :can-current-user-fork="canCurrentUserFork"
+          :view-diffs-file-by-file="viewDiffsFileByFile"
+        />
       </template>
     </batch-fetcher>
   </div>
diff --git a/app/assets/javascripts/diffs/diff_renderer_worker.js b/app/assets/javascripts/diffs/diff_renderer_worker.js
index d4ea05d50a230a..e55d698f568189 100644
--- a/app/assets/javascripts/diffs/diff_renderer_worker.js
+++ b/app/assets/javascripts/diffs/diff_renderer_worker.js
@@ -4,17 +4,12 @@ import { renderToWebStream } from '@vue/server-renderer';
 import DiffFiles from './components/diff_files.vue';
 import diffsModule from '~/diffs/store/modules';
 import { __, s__ } from '~/locale';
+import * as types from '~/diffs/store/mutation_types';
 
 Vue.prototype.__ = __;
 Vue.prototype.s__ = s__;
 
-self.addEventListener('message', async (e) => {
-  const { data } = e;
-
-  if (data === undefined) {
-    return;
-  }
-
+self.addEventListener('message', async ({ data }) => {
   const { globals, props, storeState } = data;
 
   if (globals) Object.assign(globalThis, globals);
@@ -26,6 +21,7 @@ self.addEventListener('message', async (e) => {
         batchComments: { state() {} },
       },
     });
+    store.commit('diffs/' + types.SET_DIFF_DATA_BATCH, { diff_files: props.firstFiles });
     const app = createSSRApp(DiffFiles, props);
     app.use(store);
     const stream = renderToWebStream(app);
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index 11a09c6e26763a..140e570b61e579 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -9,6 +9,19 @@ import DiffsApp from './components/app.vue';
 import { DIFF_WHITESPACE_COOKIE_NAME } from './constants';
 import { getReviewsForMergeRequest } from './utils/file_reviews';
 import { getDerivedMergeRequestInformation } from './utils/merge_request';
+import axios from '~/lib/utils/axios_utils';
+import { mergeUrlParams } from '~/lib/utils/url_utility';
+
+const renderer = new DiffRenderer();
+
+renderer.postMessage({
+  globals: {
+    csrf: document.querySelector('meta[name=csrf-token]').getAttribute('content'),
+    gon: window.gon || {},
+  },
+});
+
+const PER_PAGE = 50;
 
 export default function initDiffsApp(store) {
   const { dataset } = document.querySelector('#js-diffs-app');
@@ -38,35 +51,44 @@ export default function initDiffsApp(store) {
 
   const endpoint = new URL(endpointBatch, window.location.origin);
 
-  const renderer = new DiffRenderer();
-
-  // this.setRenderTreeList({ renderTreeList, trackClick: false });
-  let showWhitespace = showWhitespaceDefault;
-
-  // NOTE: A "true" or "checked" value for `showWhitespace` is '0' not '1'.
-  // Check for cookie and save that setting for future use.
-  // Then delete the cookie as we are phasing it out and using the database as SSOT.
-  // NOTE: This can/should be removed later
-  if (getCookie(DIFF_WHITESPACE_COOKIE_NAME)) {
-    const hideWhitespace = getCookie(DIFF_WHITESPACE_COOKIE_NAME);
-    showWhitespace = hideWhitespace !== '1';
-    // this.setShowWhitespace({
-    //   url: this.endpointUpdateUser,
-    //   showWhitespace,
-    //   trackClick: false,
-    // });
-    removeCookie(DIFF_WHITESPACE_COOKIE_NAME);
-  } else {
-    // This is only to set the the user preference in Vuex for use later
-    // this.setShowWhitespace({
-    //   showWhitespace,
-    //   updateDatabase: false,
-    //   trackClick: false,
-    // });
-  }
-
   const stream = ref(null);
 
+  const makeRequest = async () => {
+    const urlParams = {
+      w: showWhitespaceDefault ? '0' : '1',
+      view: 'inline',
+    };
+    const {
+      data: { diff_files: filesBatch },
+    } = await axios.get(
+      mergeUrlParams({ ...urlParams, page: 0, per_page: PER_PAGE }, endpoint.toString()),
+    );
+    return filesBatch;
+  };
+
+  renderer.addEventListener('message', ({ data: sharedStream }) => {
+    stream.value = sharedStream;
+  });
+
+  makeRequest().then((firstFiles) => {
+    renderer.postMessage({
+      props: {
+        diffFilesLength: parseInt(document.querySelector('.diffs-tab .badge').textContent, 10),
+        endpointBatch: endpoint.toString(),
+        showWhitespace: showWhitespaceDefault,
+        fileReviews: {},
+        helpPagePath,
+        canCurrentUserFork: false,
+        viewDiffsFileByFile,
+        firstFiles,
+        perPage: PER_PAGE,
+      },
+      storeState: {
+        diffViewType: store.state.diffs.diffViewType,
+      },
+    });
+  });
+
   const app = createApp({
     name: 'MergeRequestDiffs',
     components: {
@@ -83,6 +105,31 @@ export default function initDiffsApp(store) {
         activeTab: (state) => state.page.activeTab,
       }),
     },
+    created() {
+      let showWhitespace = showWhitespaceDefault;
+
+      // NOTE: A "true" or "checked" value for `showWhitespace` is '0' not '1'.
+      // Check for cookie and save that setting for future use.
+      // Then delete the cookie as we are phasing it out and using the database as SSOT.
+      // NOTE: This can/should be removed later
+      if (getCookie(DIFF_WHITESPACE_COOKIE_NAME)) {
+        const hideWhitespace = getCookie(DIFF_WHITESPACE_COOKIE_NAME);
+        showWhitespace = hideWhitespace !== '1';
+        this.setShowWhitespace({
+          url: this.endpointUpdateUser,
+          showWhitespace,
+          trackClick: false,
+        });
+        removeCookie(DIFF_WHITESPACE_COOKIE_NAME);
+      } else {
+        // This is only to set the the user preference in Vuex for use later
+        this.setShowWhitespace({
+          showWhitespace,
+          updateDatabase: false,
+          trackClick: false,
+        });
+      }
+    },
     methods: {
       ...mapActions('diffs', ['setRenderTreeList', 'setShowWhitespace']),
     },
@@ -117,28 +164,6 @@ export default function initDiffsApp(store) {
     },
   });
 
-  renderer.addEventListener('message', ({ data: sharedStream }) => {
-    stream.value = sharedStream;
-  });
-  renderer.postMessage({
-    globals: {
-      csrf: document.querySelector('meta[name=csrf-token]').getAttribute('content'),
-      gon: window.gon || {},
-    },
-    props: {
-      diffFilesLength: parseInt(document.querySelector('.diffs-tab .badge').textContent, 10),
-      endpointBatch: endpoint.toString(),
-      showWhitespace,
-      fileReviews: {},
-      helpPagePath,
-      canCurrentUserFork: false,
-      viewDiffsFileByFile,
-    },
-    storeState: {
-      diffViewType: store.state.diffs.diffViewType,
-    },
-  });
-
   app.use(store);
   app.mount('#js-diffs-app');
 
diff --git a/app/assets/javascripts/diffs/streaming.js b/app/assets/javascripts/diffs/streaming.js
index 916abc1b274b08..d30b3db3c8653e 100644
--- a/app/assets/javascripts/diffs/streaming.js
+++ b/app/assets/javascripts/diffs/streaming.js
@@ -1,3 +1,27 @@
+class BackpressureBuffer {
+  threshold = 50000;
+  bufferLength = 0;
+  buffer = [];
+
+  constructor(onOverflow) {
+    this.onOverflow = onOverflow;
+  }
+
+  push(string) {
+    if (this.bufferLength >= this.threshold) {
+      this.release();
+    }
+    this.buffer.push(string);
+    this.bufferLength += string.length;
+  }
+
+  release() {
+    this.onOverflow(this.buffer);
+    this.buffer = [];
+    this.bufferLength = 0;
+  }
+}
+
 export const renderStream = (stream, element) => {
   const reader = stream.getReader();
   const decoder = new TextDecoder('utf-8');
@@ -10,14 +34,22 @@ export const renderStream = (stream, element) => {
   const virtualStreamingElement = streamDocument.querySelector('streaming-element');
   element.appendChild(virtualStreamingElement);
 
+  // we need a backpressure mitigation mechanism here
+  // because inserting very small chunks of html (20-50 chars) causes layout thrashing
+  // and worsens streaming overhead
+  const backpressure = new BackpressureBuffer((buffer) => {
+    streamDocument.write(buffer.join(''));
+  });
+
   reader.read().then(function processText({ done, value }) {
     if (done) {
+      backpressure.release();
       streamDocument.write('</streaming-element>');
       streamDocument.close();
       return;
     }
 
-    streamDocument.write(decoder.decode(value).normalize('NFC'));
+    backpressure.push(decoder.decode(value).normalize('NFC'));
 
     reader.read().then(processText);
   });
-- 
GitLab


From fe77364a20c7b620fe3d57e57f7741898be3e56e Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Tue, 22 Nov 2022 18:22:11 +0400
Subject: [PATCH 11/13] Destroy rendering Worker after it's done

---
 app/assets/javascripts/diffs/components/app.vue | 4 +++-
 app/assets/javascripts/diffs/index.js           | 5 +++++
 app/assets/javascripts/diffs/streaming.js       | 8 ++++++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 4069199db58cbf..a190c0697b02be 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -327,7 +327,9 @@ export default {
     this.$watch(() => this.stream, (value) => {
       if (value) {
         this.$nextTick(() => {
-          renderStream(value, this.$refs.streamingRoot);
+          renderStream(value, this.$refs.streamingRoot).then(() => {
+            this.$emit('streamingEnd');
+          });
         });
       }
     }, { immediate: true });
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index 140e570b61e579..0d743c452707cd 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -66,6 +66,8 @@ export default function initDiffsApp(store) {
     return filesBatch;
   };
 
+  const terminate = () => renderer.terminate();
+
   renderer.addEventListener('message', ({ data: sharedStream }) => {
     stream.value = sharedStream;
   });
@@ -160,6 +162,9 @@ export default function initDiffsApp(store) {
           isForked: this.isForked,
           stream: this.stream,
         },
+        on: {
+          streamingEnd: terminate,
+        },
       });
     },
   });
diff --git a/app/assets/javascripts/diffs/streaming.js b/app/assets/javascripts/diffs/streaming.js
index d30b3db3c8653e..e58a9d1a88eb37 100644
--- a/app/assets/javascripts/diffs/streaming.js
+++ b/app/assets/javascripts/diffs/streaming.js
@@ -41,11 +41,17 @@ export const renderStream = (stream, element) => {
     streamDocument.write(buffer.join(''));
   });
 
+  let res;
+  const result = new Promise((resolve) => {
+    res = resolve;
+  });
+
   reader.read().then(function processText({ done, value }) {
     if (done) {
       backpressure.release();
       streamDocument.write('</streaming-element>');
       streamDocument.close();
+      res();
       return;
     }
 
@@ -53,4 +59,6 @@ export const renderStream = (stream, element) => {
 
     reader.read().then(processText);
   });
+
+  return result;
 };
-- 
GitLab


From 8ce9c7ab14c13eef02897c5a26a9fa1573b50a15 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Wed, 23 Nov 2022 01:05:11 +0400
Subject: [PATCH 12/13] Decrease streaming backpressure buffer threshold

Fix production build
---
 app/assets/javascripts/diffs/streaming.js | 2 +-
 config/webpack.config.js                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/diffs/streaming.js b/app/assets/javascripts/diffs/streaming.js
index e58a9d1a88eb37..516a52416828ac 100644
--- a/app/assets/javascripts/diffs/streaming.js
+++ b/app/assets/javascripts/diffs/streaming.js
@@ -1,5 +1,5 @@
 class BackpressureBuffer {
-  threshold = 50000;
+  threshold = 30000;
   bufferLength = 0;
   buffer = [];
 
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 6e5df8fe07540a..c4c0dd61b3704e 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -833,7 +833,7 @@ module.exports = {
             module.resource.includes(replacementPath),
           )
         ) {
-          return 'globalThis?.document?';
+          return '(globalThis.document ? globalThis.document : { createEvent() {} })';
         }
         return 'document';
       }),
-- 
GitLab


From 450a2ea7d549f6df5669b5a0b3a15b5be436a7dd Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Wed, 23 Nov 2022 02:01:12 +0400
Subject: [PATCH 13/13] Fix development build

---
 config/webpack.config.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/config/webpack.config.js b/config/webpack.config.js
index c4c0dd61b3704e..9f4c60623d2818 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -833,7 +833,10 @@ module.exports = {
             module.resource.includes(replacementPath),
           )
         ) {
-          return '(globalThis.document ? globalThis.document : { createEvent() {} })';
+          if (IS_PRODUCTION) {
+            return '(globalThis.document ? globalThis.document : { createEvent() {} })';
+          }
+          return 'globalThis?.document?';
         }
         return 'document';
       }),
-- 
GitLab