Merge branch 'mg-remove-sanitize-html-from-main-bundle' into 'master'

Remove sanitize-html dependency from the main bundle

See merge request gitlab-org/gitlab!32628

app/assets/javascripts/frequent_items/index.js

 import $ from 'jquery';
 import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
-import eventHub from '~/frequent_items/event_hub';
-import frequentItems from './components/app.vue';
+import eventHub from './event_hub';
 
 Vue.use(Translate);
 
@@ -17,7 +16,7 @@ const frequentItemDropdowns = [
   },
 ];
 
-const initFrequentItemDropdowns = () => {
+export default function initFrequentItemDropdowns() {
   frequentItemDropdowns.forEach(dropdown => {
     const { namespace, key } = dropdown;
     const el = document.getElementById(`js-${namespace}-dropdown`);
@@ -29,45 +28,40 @@ const initFrequentItemDropdowns = () => {
       return;
     }
 
-    $(navEl).on('shown.bs.dropdown', () => {
-      eventHub.$emit(`${namespace}-dropdownOpen`);
-    });
+    $(navEl).on('shown.bs.dropdown', () =>
+      import('./components/app.vue').then(({ default: FrequentItems }) => {
+        // eslint-disable-next-line no-new
+        new Vue({
+          el,
+          data() {
+            const { dataset } = this.$options.el;
+            const item = {
+              id: Number(dataset[`${key}Id`]),
+              name: dataset[`${key}Name`],
+              namespace: dataset[`${key}Namespace`],
+              webUrl: dataset[`${key}WebUrl`],
+              avatarUrl: dataset[`${key}AvatarUrl`] || null,
+              lastAccessedOn: Date.now(),
+            };
 
-    // eslint-disable-next-line no-new
-    new Vue({
-      el,
-      components: {
-        frequentItems,
-      },
-      data() {
-        const { dataset } = this.$options.el;
-        const item = {
-          id: Number(dataset[`${key}Id`]),
-          name: dataset[`${key}Name`],
-          namespace: dataset[`${key}Namespace`],
-          webUrl: dataset[`${key}WebUrl`],
-          avatarUrl: dataset[`${key}AvatarUrl`] || null,
-          lastAccessedOn: Date.now(),
-        };
-
-        return {
-          currentUserName: dataset.userName,
-          currentItem: item,
-        };
-      },
-      render(createElement) {
-        return createElement('frequent-items', {
-          props: {
-            namespace,
-            currentUserName: this.currentUserName,
-            currentItem: this.currentItem,
+            return {
+              currentUserName: dataset.userName,
+              currentItem: item,
+            };
+          },
+          render(createElement) {
+            return createElement(FrequentItems, {
+              props: {
+                namespace,
+                currentUserName: this.currentUserName,
+                currentItem: this.currentItem,
+              },
+            });
           },
         });
-      },
-    });
-  });
-};
 
-document.addEventListener('DOMContentLoaded', () => {
-  requestIdleCallback(initFrequentItemDropdowns);
-});
+        eventHub.$emit(`${namespace}-dropdownOpen`);
+      }),
+    );
+  });
+}

app/assets/javascripts/main.js

@@ -28,7 +28,7 @@ import initLayoutNav from './layout_nav';
 import './feature_highlight/feature_highlight_options';
 import LazyLoader from './lazy_loader';
 import initLogoAnimation from './logo';
-import './frequent_items';
+import initFrequentItemDropdowns from './frequent_items';
 import initBreadcrumbs from './breadcrumb';
 import initUsagePingConsent from './usage_ping_consent';
 import initPerformanceBar from './performance_bar';
@@ -107,6 +107,7 @@ function deferredInitialisation() {
   initUsagePingConsent();
   initUserPopovers();
   initBroadcastNotifications();
+  initFrequentItemDropdowns();
 
   const recoverySettingsCallout = document.querySelector('.js-recovery-settings-callout');
   PersistentUserCallout.factory(recoverySettingsCallout);