Render blob viewer Vue app

app/assets/javascripts/pages/projects/blob/show/index.js

@@ -5,10 +5,29 @@ import GpgBadges from '~/gpg_badges';
 import initBlob from '~/pages/projects/init_blob';
 import initWebIdeLink from '~/pages/projects/shared/web_ide_link';
 import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
+import BlobContentViewer from '~/repository/components/blob_content_viewer.vue';
 import '~/sourcegraph/load';
 
-new BlobViewer(); // eslint-disable-line no-new
-initBlob();
+const viewBlobEl = document.querySelector('#js-view-blob-app');
+
+if (viewBlobEl) {
+  const { blobPath } = viewBlobEl.dataset;
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: viewBlobEl,
+    render(createElement) {
+      return createElement(BlobContentViewer, {
+        props: {
+          path: blobPath,
+        },
+      });
+    },
+  });
+} else {
+  new BlobViewer(); // eslint-disable-line no-new
+  initBlob();
+}
 
 const CommitPipelineStatusEl = document.querySelector('.js-commit-pipeline-status');
 const statusLink = document.querySelector('.commit-actions .ci-status-link');

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

@@ -11,6 +11,11 @@
 #blob-content-holder.blob-content-holder
   - if @code_navigation_path
     #js-code-navigation{ data: { code_navigation_path: @code_navigation_path, blob_path: blob.path, definition_path_prefix: project_blob_path(@project, @ref) } }
-  %article.file-holder
-    = render 'projects/blob/header', blob: blob
-    = render 'projects/blob/content', blob: blob
+  - if Feature.enabled?(:refactor_blob_viewer, @project, default_enabled: :yaml)
+    #js-view-blob-app{ data: { blob_path: blob.path } }
+      .gl-spinner-container
+        = loading_icon(size: 'md')
+  - else
+    %article.file-holder
+      = render 'projects/blob/header', blob: blob
+      = render 'projects/blob/content', blob: blob

spec/features/projects_spec.rb

@@ -290,7 +290,6 @@ RSpec.describe 'Project' do
     let(:project) { create(:forked_project_with_submodules) }
 
     before do
-      stub_feature_flags(refactor_blob_viewer: false)
       project.add_maintainer(user)
       sign_in user
       visit project_path(project)

spec/spec_helper.rb

@@ -277,6 +277,11 @@ RSpec.configure do |config|
       # Vue issues page has feature parity with the current Haml page
       stub_feature_flags(vue_issues_list: false)
 
+      # Disable `refactor_blob_viewer` as we refactor
+      # the blob viewer. See the follwing epic for more:
+      # https://gitlab.com/groups/gitlab-org/-/epics/5531
+      stub_feature_flags(refactor_blob_viewer: false)
+
       allow(Gitlab::GitalyClient).to receive(:can_use_disk?).and_return(enable_rugged)
     else
       unstub_all_feature_flags