Load monaco using the webpack plugin

scalameta · Oct 5, 2018 · 3bfdaa8 · 3bfdaa8
1 parent 3175406
commit 3bfdaa8
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 267 deletions.
diff --git a/build.sbt b/build.sbt
@@ -79,11 +79,10 @@ lazy val cli = project
       val targetDir = (npmUpdate in (js, Compile)).value
       // scalajs-bundler does not support setting a custom output path so
       // explicitly include only those files that are generated by webpack.
-      val includes: FileFilter = "index.html" | "metadoc.*.css" | "*-bundle.js" | "favicon.png"
+      val includes: FileFilter = "index.html" | "metadoc.*.css" | "*-bundle.js" | "favicon.png" | "editor.worker.js"
       val paths: PathFinder =
         (
           targetDir./("assets").allPaths +++
-            targetDir./("vs").allPaths +++
             targetDir.*(includes)
         ) --- targetDir
       val mappings = paths.get pair Path.relativeTo(targetDir)
@@ -111,7 +110,7 @@ lazy val js = project
       "org.scala-js" %%% "scalajs-dom" % "0.9.6"
     ),
     npmDevDependencies in Compile ++= Seq(
-      "copy-webpack-plugin" -> "4.3.1",
+      "monaco-editor-webpack-plugin" -> "1.4.0",
       "css-loader" -> "0.28.9",
       "extract-text-webpack-plugin" -> "3.0.2",
       "file-loader" -> "1.1.6",

diff --git a/metadoc-js/src/main/resources/index.html b/metadoc-js/src/main/resources/index.html
@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <meta name="theme-color" content="#002b36">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <script src="vs/loader.js"></script>
   </head>
   <body class="mdc-typography">
     <header class="mdc-toolbar mdc-toolbar--fixed">

diff --git a/metadoc-js/src/main/resources/index.js b/metadoc-js/src/main/resources/index.js
@@ -9,5 +9,9 @@ window.ScalaLanguage = require('./scala.ts')
  * Load additional resources.
  */
 
+// Import special entry point to only include a subset of the features & languages
+// as configured via the Monaco Webpack plugin.
+window.monaco = require('node_modules/monaco-editor/esm/vs/editor/editor.api.js');
+
 require('node_modules/material-components-web/dist/material-components-web.css')
 require('./index.css')
diff --git a/metadoc-js/src/main/scala/metadoc/MetadocApp.scala b/metadoc-js/src/main/scala/metadoc/MetadocApp.scala
@@ -42,7 +42,6 @@ object MetadocApp {
     }
 
     for {
-      _ <- loadMonaco()
       workspace <- MetadocFetch.workspace()
     } {
       val index = new MutableBrowserIndex(MetadocState(s.TextDocument()))
@@ -193,23 +192,6 @@ object MetadocApp {
     }
   }
 
-  /**
-    * Load the Monaco Editor AMD bundle using `require`.
-    *
-    * The AMD bundle is not compatible with Webpack and must be loaded
-    * dynamically at runtime to avoid errors:
-    * https://github.com/Microsoft/monaco-editor/issues/18
-    */
-  def loadMonaco(): Future[Unit] = {
-    val promise = Promise[Unit]()
-    js.Dynamic.global.require(js.Array("vs/editor/editor.main"), {
-      ctx: js.Dynamic =>
-        println("Monaco Editor loaded")
-        promise.success(())
-    }: js.ThisFunction)
-    promise.future
-  }
-
   val ScalaLanguageExtensionPoint = {
     val language = jsObject[ILanguageExtensionPoint]
     language.id = "scala"

diff --git a/metadoc-js/webpack.config.js b/metadoc-js/webpack.config.js
@@ -4,8 +4,8 @@ const merge = require("webpack-merge")
 const config = require('./scalajs.webpack.config')
 
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 const ExtractCss = new ExtractTextPlugin({
   filename: 'metadoc.[contenthash].css',
@@ -60,14 +60,8 @@ module.exports = merge(config, {
     ]
   },
   plugins: [
+    new MonacoWebpackPlugin({ languages: [] }),
     ExtractCss,
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(MonacoEditorBaseDir, 'vs'),
-        to: 'vs',
-        ignore: [ 'basic-languages/**/*', 'language/**/*' ]
-      }
-    ]),
     new HtmlWebpackPlugin({
       inject: true,
       favicon: ResourcesDir + '/images/favicon.png',