Merge branch 'remove-blob-viewer-bundles-ee' into 'master'

Port of "Remove blob viewer bundles"

See merge request gitlab-org/gitlab-ee!4775

app/assets/javascripts/blob/balsamiq_viewer.js

@@ -7,7 +7,7 @@ function onError() {
   return flash;
 }
 
-function loadBalsamiqFile() {
+export default function loadBalsamiqFile() {
   const viewer = document.getElementById('js-balsamiq-viewer');
 
   if (!(viewer instanceof Element)) return;
@@ -17,5 +17,3 @@ function loadBalsamiqFile() {
   const balsamiqViewer = new BalsamiqViewer(viewer);
   balsamiqViewer.loadFile(endpoint).catch(onError);
 }
-
-$(loadBalsamiqFile);

app/assets/javascripts/blob/notebook_viewer.js

 import renderNotebook from './notebook';
 
-document.addEventListener('DOMContentLoaded', renderNotebook);
+export default renderNotebook;

app/assets/javascripts/blob/pdf_viewer.js

 import renderPDF from './pdf';
 
-document.addEventListener('DOMContentLoaded', renderPDF);
+export default renderPDF;

app/assets/javascripts/blob/sketch_viewer.js

 /* eslint-disable no-new */
 import SketchLoader from './sketch';
 
-document.addEventListener('DOMContentLoaded', () => {
+export default () => {
   const el = document.getElementById('js-sketch-viewer');
 
   new SketchLoader(el);
-});
+};

app/assets/javascripts/blob/stl_viewer.js

 import Renderer from './3d_viewer';
 
-document.addEventListener('DOMContentLoaded', () => {
+export default () => {
   const viewer = new Renderer(document.getElementById('js-stl-viewer'));
 
   [].slice.call(document.querySelectorAll('.js-material-changer')).forEach((el) => {
@@ -16,4 +16,4 @@ document.addEventListener('DOMContentLoaded', () => {
       viewer.changeObjectMaterials(target.dataset.type);
     });
   });
-});
+};

app/assets/javascripts/blob/viewer/index.js

@@ -5,6 +5,7 @@ import axios from '../../lib/utils/axios_utils';
 export default class BlobViewer {
   constructor() {
     BlobViewer.initAuxiliaryViewer();
+    BlobViewer.initRichViewer();
 
     this.initMainViewers();
   }
@@ -16,6 +17,38 @@ export default class BlobViewer {
     BlobViewer.loadViewer(auxiliaryViewer);
   }
 
+  static initRichViewer() {
+    const viewer = document.querySelector('.blob-viewer[data-type="rich"]');
+    if (!viewer || !viewer.dataset.richType) return;
+
+    const initViewer = promise => promise
+      .then(module => module.default(viewer))
+      .catch((error) => {
+        Flash('Error loading file viewer.');
+        throw error;
+      });
+
+    switch (viewer.dataset.richType) {
+      case 'balsamiq':
+        initViewer(import(/* webpackChunkName: 'balsamiq_viewer' */ '../balsamiq_viewer'));
+        break;
+      case 'notebook':
+        initViewer(import(/* webpackChunkName: 'notebook_viewer' */ '../notebook_viewer'));
+        break;
+      case 'pdf':
+        initViewer(import(/* webpackChunkName: 'pdf_viewer' */ '../pdf_viewer'));
+        break;
+      case 'sketch':
+        initViewer(import(/* webpackChunkName: 'sketch_viewer' */ '../sketch_viewer'));
+        break;
+      case 'stl':
+        initViewer(import(/* webpackChunkName: 'stl_viewer' */ '../stl_viewer'));
+        break;
+      default:
+        break;
+    }
+  }
+
   initMainViewers() {
     this.$fileHolder = $('.file-holder');
     if (!this.$fileHolder.length) return;

app/views/projects/blob/_viewer.html.haml

 - hidden = local_assigns.fetch(:hidden, false)
 - render_error = viewer.render_error
+- rich_type = viewer.type == :rich ? viewer.partial_name : nil
 - load_async = local_assigns.fetch(:load_async, viewer.load_async? && render_error.nil?)
 
 - viewer_url = local_assigns.fetch(:viewer_url) { url_for(params.merge(viewer: viewer.type, format: :json)) } if load_async
-.blob-viewer{ data: { type: viewer.type, url: viewer_url }, class: ('hidden' if hidden) }
+.blob-viewer{ data: { type: viewer.type, rich_type: rich_type, url: viewer_url }, class: ('hidden' if hidden) }
   - if render_error
     = render 'projects/blob/render_error', viewer: viewer
   - elsif load_async

app/views/projects/blob/viewers/_balsamiq.html.haml

-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag('balsamiq_viewer')
-
 .file-content.balsamiq-viewer#js-balsamiq-viewer{ data: { endpoint: blob_raw_path } }

app/views/projects/blob/viewers/_notebook.html.haml

-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag('common_vue')
-  = webpack_bundle_tag('notebook_viewer')
-
 .file-content#js-notebook-viewer{ data: { endpoint: blob_raw_path } }

app/views/projects/blob/viewers/_pdf.html.haml

-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag('common_vue')
-  = webpack_bundle_tag('pdf_viewer')
-
 .file-content#js-pdf-viewer{ data: { endpoint: blob_raw_path } }

app/views/projects/blob/viewers/_sketch.html.haml

-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag('common_vue')
-  = webpack_bundle_tag('sketch_viewer')
-
 .file-content#js-sketch-viewer{ data: { endpoint: blob_raw_path } }
   .js-loading-icon.text-center.prepend-top-default.append-bottom-default.js-loading-icon{ 'aria-label' => 'Loading Sketch preview' }
     = icon('spinner spin 2x', 'aria-hidden' => 'true');

app/views/projects/blob/viewers/_stl.html.haml

-- content_for :page_specific_javascripts do
-  = webpack_bundle_tag('stl_viewer')
-
 .file-content.is-stl-loading
   .text-center#js-stl-viewer{ data: { endpoint: blob_raw_path } }
     = icon('spinner spin 2x', class: 'prepend-top-default append-bottom-default', 'aria-hidden' => 'true', 'aria-label' => 'Loading')

config/webpack.config.js

@@ -48,15 +48,10 @@ function generateEntries() {
   autoEntriesCount = Object.keys(autoEntries).length;
 
   const manualEntries = {
-    balsamiq_viewer:      './blob/balsamiq_viewer.js',
     monitoring:           './monitoring/monitoring_bundle.js',
     mr_notes:             './mr_notes/index.js',
-    notebook_viewer:      './blob/notebook_viewer.js',
-    pdf_viewer:           './blob/pdf_viewer.js',
     protected_branches:   './protected_branches',
     registry_list:        './registry/index.js',
-    sketch_viewer:        './blob/sketch_viewer.js',
-    stl_viewer:           './blob/stl_viewer.js',
     terminal:             './terminal/terminal_bundle.js',
     two_factor_auth:      './two_factor_auth.js',
 
@@ -239,33 +234,6 @@ const config = {
       return `${moduleNames[0]}-${hash.substr(0, 6)}`;
     }),
 
-    // create cacheable common library bundle for all vue chunks
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'common_vue',
-      chunks: [
-        'boards',
-        'deploy_keys',
-        'environments',
-        'filtered_search',
-        'groups',
-        'monitoring',
-        'mr_notes',
-        'notebook_viewer',
-        'pdf_viewer',
-        'pipelines',
-        'pipelines_details',
-        'registry_list',
-        'ide',
-        'schedule_form',
-        'schedules_index',
-        'sidebar',
-        'vue_merge_request_widget',
-      ],
-      minChunks: function(module, count) {
-        return module.resource && (/vue_shared/).test(module.resource);
-      },
-    }),
-
     // create cacheable common library bundles
     new webpack.optimize.CommonsChunkPlugin({
       names: ['main', 'common', 'webpack_runtime'],