diff --git a/app/assets/javascripts/repo/monaco_loader.js b/app/assets/javascripts/repo/monaco_loader.js new file mode 100644 index 0000000000000000000000000000000000000000..ad1370a773067a26abb56da1717b17e3baa56793 --- /dev/null +++ b/app/assets/javascripts/repo/monaco_loader.js @@ -0,0 +1,13 @@ +/* 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; diff --git a/app/assets/javascripts/repo/repo_editor.js b/app/assets/javascripts/repo/repo_editor.js index 9e1dfaa6d108e7fa67016823f73a897f1d4b4300..06f08f06d4db687fe6dca5fdbd1868b2fed1b64c 100644 --- a/app/assets/javascripts/repo/repo_editor.js +++ b/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(), ), ), ); diff --git a/app/helpers/javascript_helper.rb b/app/helpers/javascript_helper.rb index a250c7f93754885480e43903e2445d24491ff9e3..a21d302aad1e202c6820380e2abea9710f842461 100644 --- a/app/helpers/javascript_helper.rb +++ b/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 diff --git a/config/webpack.config.js b/config/webpack.config.js index 398324569cb2582c003a225a42aac302c39d1304..fc644f9a9c95bfd2273ff3ccf922984386a75917 100644 --- a/config/webpack.config.js +++ b/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; + } } ]), ], diff --git a/package.json b/package.json index 4a1d6e0b6afabafff130f6c622d912eec35ee500..7783b2c2dd41be71674dca2f7950452363c3299e 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 500f39409c301f5323d5b760376d703fa45dbe54..c943bec5e6340478076495769b31fcc468110286 100644 --- a/yarn.lock +++ b/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"