Wraps Select 2 Import into its own webpack bundle

Wraps all imports for select 2 to deferred imports,
especially in the main.js we are actually checking if there 
is any select 2 element on the page or not.

1 files changed, 89 insertions, 85 deletions

diff --git a/app/assets/javascripts/project_select.js b/app/assets/javascripts/project_select.js
index a33835472bb..5ee510eb11d 100644
--- a/app/assets/javascripts/project_select.js
+++ b/app/assets/javascripts/project_select.js
@@ -5,97 +5,101 @@ import Api from './api';
 import ProjectSelectComboButton from './project_select_combo_button';
 
 export default function projectSelect() {
-  $('.ajax-project-select').each(function(i, select) {
-    var placeholder;
-    const simpleFilter = $(select).data('simpleFilter') || false;
-    this.groupId = $(select).data('groupId');
-    this.includeGroups = $(select).data('includeGroups');
-    this.allProjects = $(select).data('allProjects') || false;
-    this.orderBy = $(select).data('orderBy') || 'id';
-    this.withIssuesEnabled = $(select).data('withIssuesEnabled');
-    this.withMergeRequestsEnabled = $(select).data('withMergeRequestsEnabled');
-    this.withShared =
-      $(select).data('withShared') === undefined ? true : $(select).data('withShared');
-    this.includeProjectsInSubgroups = $(select).data('includeProjectsInSubgroups') || false;
-    this.allowClear = $(select).data('allowClear') || false;
+  import(/* webpackChunkName: 'select2' */ 'select2/select2')
+    .then(() => {
+      $('.ajax-project-select').each(function(i, select) {
+        var placeholder;
+        const simpleFilter = $(select).data('simpleFilter') || false;
+        this.groupId = $(select).data('groupId');
+        this.includeGroups = $(select).data('includeGroups');
+        this.allProjects = $(select).data('allProjects') || false;
+        this.orderBy = $(select).data('orderBy') || 'id';
+        this.withIssuesEnabled = $(select).data('withIssuesEnabled');
+        this.withMergeRequestsEnabled = $(select).data('withMergeRequestsEnabled');
+        this.withShared =
+          $(select).data('withShared') === undefined ? true : $(select).data('withShared');
+        this.includeProjectsInSubgroups = $(select).data('includeProjectsInSubgroups') || false;
+        this.allowClear = $(select).data('allowClear') || false;
 
-    placeholder = 'Search for project';
-    if (this.includeGroups) {
-      placeholder += ' or group';
-    }
+        placeholder = 'Search for project';
+        if (this.includeGroups) {
+          placeholder += ' or group';
+        }
 
-    $(select).select2({
-      placeholder: placeholder,
-      minimumInputLength: 0,
-      query: (function(_this) {
-        return function(query) {
-          var finalCallback, projectsCallback;
-          finalCallback = function(projects) {
-            var data;
-            data = {
-              results: projects,
-            };
-            return query.callback(data);
-          };
-          if (_this.includeGroups) {
-            projectsCallback = function(projects) {
-              var groupsCallback;
-              groupsCallback = function(groups) {
+        $(select).select2({
+          placeholder: placeholder,
+          minimumInputLength: 0,
+          query: (function(_this) {
+            return function(query) {
+              var finalCallback, projectsCallback;
+              finalCallback = function(projects) {
                 var data;
-                data = groups.concat(projects);
-                return finalCallback(data);
+                data = {
+                  results: projects,
+                };
+                return query.callback(data);
               };
-              return Api.groups(query.term, {}, groupsCallback);
+              if (_this.includeGroups) {
+                projectsCallback = function(projects) {
+                  var groupsCallback;
+                  groupsCallback = function(groups) {
+                    var data;
+                    data = groups.concat(projects);
+                    return finalCallback(data);
+                  };
+                  return Api.groups(query.term, {}, groupsCallback);
+                };
+              } else {
+                projectsCallback = finalCallback;
+              }
+              if (_this.groupId) {
+                return Api.groupProjects(
+                  _this.groupId,
+                  query.term,
+                  {
+                    with_issues_enabled: _this.withIssuesEnabled,
+                    with_merge_requests_enabled: _this.withMergeRequestsEnabled,
+                    with_shared: _this.withShared,
+                    include_subgroups: _this.includeProjectsInSubgroups,
+                  },
+                  projectsCallback,
+                );
+              } else {
+                return Api.projects(
+                  query.term,
+                  {
+                    order_by: _this.orderBy,
+                    with_issues_enabled: _this.withIssuesEnabled,
+                    with_merge_requests_enabled: _this.withMergeRequestsEnabled,
+                    membership: !_this.allProjects,
+                  },
+                  projectsCallback,
+                );
+              }
             };
-          } else {
-            projectsCallback = finalCallback;
-          }
-          if (_this.groupId) {
-            return Api.groupProjects(
-              _this.groupId,
-              query.term,
-              {
-                with_issues_enabled: _this.withIssuesEnabled,
-                with_merge_requests_enabled: _this.withMergeRequestsEnabled,
-                with_shared: _this.withShared,
-                include_subgroups: _this.includeProjectsInSubgroups,
-              },
-              projectsCallback,
-            );
-          } else {
-            return Api.projects(
-              query.term,
-              {
-                order_by: _this.orderBy,
-                with_issues_enabled: _this.withIssuesEnabled,
-                with_merge_requests_enabled: _this.withMergeRequestsEnabled,
-                membership: !_this.allProjects,
-              },
-              projectsCallback,
-            );
-          }
-        };
-      })(this),
-      id: function(project) {
-        if (simpleFilter) return project.id;
-        return JSON.stringify({
-          name: project.name,
-          url: project.web_url,
-        });
-      },
-      text: function(project) {
-        return project.name_with_namespace || project.name;
-      },
+          })(this),
+          id: function(project) {
+            if (simpleFilter) return project.id;
+            return JSON.stringify({
+              name: project.name,
+              url: project.web_url,
+            });
+          },
+          text: function(project) {
+            return project.name_with_namespace || project.name;
+          },
 
-      initSelection: function(el, callback) {
-        return Api.project(el.val()).then(({ data }) => callback(data));
-      },
+          initSelection: function(el, callback) {
+            return Api.project(el.val()).then(({ data }) => callback(data));
+          },
 
-      allowClear: this.allowClear,
+          allowClear: this.allowClear,
 
-      dropdownCssClass: 'ajax-project-dropdown',
-    });
-    if (simpleFilter) return select;
-    return new ProjectSelectComboButton(select);
-  });
+          dropdownCssClass: 'ajax-project-dropdown',
+        });
+        if (simpleFilter) return select;
+        return new ProjectSelectComboButton(select);
+      });
+    })
+    .catch(() => {});
 }