fix global context and relative_url_root for monaco editor

app/assets/javascripts/repo/monaco_loader.js

+/* eslint-disable no-underscore-dangle, camelcase */
+/* global __webpack_public_path__ */
+
+import monacoContext from 'monaco-editor/dev/vs/loader';
+
+monacoContext.require.config({
+  paths: {
+    vs: `${__webpack_public_path__}monaco-editor/vs`,
+  },
+});
+
+window.__monaco_context__ = monacoContext;
+export default monacoContext.require;

app/assets/javascripts/repo/repo_editor.js

@@ -2,6 +2,7 @@
 import Vue from 'vue';
 import Store from './repo_store';
 import Helper from './repo_helper';
+import monacoLoader from './monaco_loader';
 
 export default class RepoEditor {
   constructor() {
@@ -19,8 +20,7 @@ export default class RepoEditor {
   }
 
   initMonaco() {
-    window.require.config({ paths: { vs: '/assets/webpack/vs' } });
-    window.require(['vs/editor/editor.main'], () => {
+    monacoLoader(['vs/editor/editor.main'], () => {
       this.monacoEditor = monaco.editor
       .create(
         document.getElementById('ide'), {
@@ -115,7 +115,7 @@ export default class RepoEditor {
                 Helper
                   .getLanguageForFile(
                     this.activeFile,
-                    monaco.languages.getLanguages()
+                    monaco.languages.getLanguages(),
                   ),
               ),
             );

app/helpers/javascript_helper.rb

@@ -11,6 +11,6 @@ module JavascriptHelper
   def repo_bundle_tags
     return unless body_data_page =~ /projects\:(tree|blob)\:show/
 
-    javascript_include_tag('/assets/webpack/vs/loader') + webpack_bundle_tag('repo')
+    webpack_bundle_tag('repo')
   end
 end

config/webpack.config.js

@@ -4,11 +4,11 @@ var fs = require('fs');
 var path = require('path');
 var webpack = require('webpack');
 var StatsPlugin = require('stats-webpack-plugin');
+var CopyWebpackPlugin = require('copy-webpack-plugin');
 var CompressionPlugin = require('compression-webpack-plugin');
 var NameAllModulesPlugin = require('name-all-modules-plugin');
 var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
-var CopyWebpackPlugin = require('copy-webpack-plugin');
 
 var ROOT_PATH = path.resolve(__dirname, '..');
 var IS_PRODUCTION = process.env.NODE_ENV === 'production';
@@ -110,7 +110,16 @@ var config = {
         test: /locale\/\w+\/(.*)\.js$/,
         loader: 'exports-loader?locales',
       },
-    ]
+      {
+        test: /monaco-editor\/\w+\/vs\/loader\.js$/,
+        use: [
+          { loader: 'exports-loader', options: 'l.global' },
+          { loader: 'imports-loader', options: 'l=>{},this=>l,AMDLoader=>this,module=>undefined' },
+        ],
+      }
+    ],
+
+    noParse: [/monaco-editor\/\w+\/vs\//],
   },
 
   plugins: [
@@ -193,10 +202,22 @@ var config = {
       names: ['main', 'locale', 'common', 'runtime'],
     }),
 
+    // copy pre-compiled vendor libraries verbatim
     new CopyWebpackPlugin([
       {
-        from: `../../../node_modules/monaco-editor/${IS_PRODUCTION ? 'min' : 'dev'}/vs`,
-        to: 'vs'
+        from: path.join(ROOT_PATH, `node_modules/monaco-editor/${IS_PRODUCTION ? 'min' : 'dev'}/vs`),
+        to: 'monaco-editor/vs',
+        transform: function(content, path) {
+          if (/\.js$/.test(path)) {
+            return (
+              '(function(){\n' +
+              'var define = this.define, require = this.require;\n' +
+              content +
+              '\n}.call(window.__monaco_context__ || (window.__monaco_context__ = {})));'
+            );
+          }
+          return content;
+        }
       }
     ]),
   ],

package.json

@@ -20,6 +20,7 @@
     "babel-preset-stage-2": "^6.22.0",
     "bootstrap-sass": "^3.3.6",
     "compression-webpack-plugin": "^0.3.2",
+    "copy-webpack-plugin": "^4.0.1",
     "core-js": "^2.4.1",
     "css-loader": "^0.28.0",
     "d3": "^3.5.11",
@@ -30,6 +31,7 @@
     "eslint-plugin-html": "^2.0.1",
     "exports-loader": "^0.6.4",
     "file-loader": "^0.11.1",
+    "imports-loader": "^0.7.1",
     "jed": "^1.1.1",
     "jquery": "^2.2.1",
     "jquery-ujs": "^1.2.1",

yarn.lock

@@ -2764,6 +2764,13 @@ immediate@~3.0.5:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
 
+imports-loader@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/imports-loader/-/imports-loader-0.7.1.tgz#f204b5f34702a32c1db7d48d89d5e867a0441253"
+  dependencies:
+    loader-utils "^1.0.2"
+    source-map "^0.5.6"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"