Use scalajs-bundler (#907)

build.sbt

@@ -190,7 +190,7 @@ lazy val cli = project
   )
 
 lazy val web = project
-  .enablePlugins(ScalaJSPlugin)
+  .enablePlugins(ScalaJSPlugin, ScalaJSBundlerPlugin)
   .dependsOn(coreJs, cacheJs)
   .settings(
     shared,
@@ -214,36 +214,16 @@ lazy val web = project
     },
     noTests,
     webjarBintrayRepository,
-    jsDependencies ++= Seq(
-      WebDeps.bootstrap
-        .intransitive()
-        ./("bootstrap.min.js")
-        .commonJSName("Bootstrap"),
-      WebDeps.react
-        .intransitive()
-        ./("react-with-addons.js")
-        .minified("react-with-addons.min.js")
-        .commonJSName("React"),
-      WebDeps.react
-        .intransitive()
-        ./("react-dom.js")
-        .minified("react-dom.min.js")
-        .dependsOn("react-with-addons.js")
-        .commonJSName("ReactDOM"),
-      WebDeps.react
-        .intransitive()
-        ./("react-dom-server.js")
-        .minified("react-dom-server.min.js")
-        .dependsOn("react-dom.js")
-        .commonJSName("ReactDOMServer"),
-      WebDeps.bootstrapTreeView
-        .intransitive()
-        ./("bootstrap-treeview.min.js")
-        .commonJSName("Treeview"),
-      WebDeps.raphael
-        .intransitive()
-        ./("raphael-min.js")
-        .commonJSName("Raphael")
+    scalaJSUseMainModuleInitializer := true,
+    webpackConfigFile := Some(resourceDirectory.in(Compile).value / "webpack.config.js"),
+    npmDependencies.in(Compile) ++= Seq(
+      "bootstrap" -> "3.3.4",
+      "bootstrap-treeview" -> "1.2.0",
+      "graphdracula" -> "1.2.1",
+      "webpack-raphael" -> "2.1.4",
+      "react" -> "15.6.1",
+      "react-dom" -> "15.6.1",
+      "requirejs" -> "2.3.6"
     )
   )
 

project/WebDeps.scala

@@ -1,10 +0,0 @@
-
-import sbt._
-import sbt.Keys._
-
-object WebDeps {
-  def bootstrap = "org.webjars.bower" % "bootstrap" % "3.3.4"
-  def react = "org.webjars.bower" % "react" % "15.6.1"
-  def bootstrapTreeView = "org.webjars.bower" % "bootstrap-treeview" % "1.2.0"
-  def raphael = "org.webjars.bower" % "raphael" % "2.1.4"
-}

project/plugins.sbt

@@ -7,6 +7,7 @@ plugins_(
   "com.lightbend.sbt"  % "sbt-proguard"             % "0.3.0",
   "com.github.gseitz"  % "sbt-release"              % "1.0.8",
   "org.scala-js"       % "sbt-scalajs"              % "0.6.23",
+  "ch.epfl.scala"      % "sbt-scalajs-bundler"      % "0.13.1",
   "org.portable-scala" % "sbt-scalajs-crossproject" % "0.4.0",
   "io.get-coursier"    % "sbt-shading"              % coursierVersion,
   "org.xerial.sbt"     % "sbt-sonatype"             % "2.3",

web/src/main/resources/index.html

@@ -6,7 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <!-- FIXME Get from WebJars -->
+    <!-- TODO Get from NPM packages -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   <link rel="stylesheet" href="css/bootstrap-treeview.css">
 
@@ -85,6 +85,7 @@
 </div>
 
 <script>
+
     // From scalajs-react examples
 
     function jsonp(url, callback) {
@@ -103,11 +104,7 @@
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 
 <!-- Paths changed by push-gh-pages.sh before pushing to gh-pages -->
-<script src="../web-jsdeps.js"></script>
-<script src="../web-fastopt.js"></script>
-
-<script src="https://cdn.rawgit.com/strathausen/dracula/26010eb3b0df037cf507886897e20c02c4ec041b/lib/dracula_graph.js"></script>
-<script src="https://cdn.rawgit.com/strathausen/dracula/26010eb3b0df037cf507886897e20c02c4ec041b/lib/dracula_graffle.js"></script>
+<script src="../scalajs-bundler/main/web-fastopt-bundle.js"></script>
 
 <script>
 // From http://www.bootply.com/VQqzOawoYc
@@ -125,9 +122,5 @@ $('.nav-tabs a').on('shown.bs.tab', function (e) {
 });
 </script>
 
-<script>
-  CoursierWeb.main();
-</script>
-
 </body>
 </html>

web/src/main/resources/webpack.config.js

@@ -0,0 +1,13 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = require('./scalajs.webpack.config');
+
+module.exports.resolve = module.exports.resolve || {};
+module.exports.resolve.alias = module.exports.resolve.alias || {};
+
+module.exports.resolve.alias['raphael'] = 'webpack-raphael';
+
+// inspired by https://stackoverflow.com/q/38610824/3714539
+module.exports.resolve.alias['bootstrap-treeview'] =
+  path.join(__dirname, 'node_modules', 'bootstrap-treeview', 'src', 'js', 'bootstrap-treeview.js');

web/src/main/scala/coursier/web/App.scala

@@ -375,9 +375,9 @@ object App {
 
   val initialState = State(
     List(
-      Dependency(Module("org.apache.spark", "spark-sql_2.11"), "2.2.1") // DEBUG
+      Dependency(Module("io.get-coursier", "coursier-cache_2.12"), "1.1.0-M7") // DEBUG
     ),
-    Seq("central" -> MavenRepository("https://repo1.maven.org/maven2/")),
+    Seq("central" -> MavenRepository("https://repo1.maven.org/maven2")),
     ResolutionOptions(),
     None,
     -1,

web/src/main/scala/coursier/web/Backend.scala

@@ -39,7 +39,7 @@ final class Backend($: BackendScope[_, State]) {
   def updateDepGraph(resolution: Resolution) = {
     println("Rendering canvas")
 
-    val graph = js.Dynamic.newInstance(g.Graph)()
+    val graph = js.Dynamic.newInstance(Dracula.Graph)()
 
     var nodes = Set.empty[String]
     def addNode(name: String) =
@@ -68,7 +68,7 @@ final class Backend($: BackendScope[_, State]) {
       graph.addEdge(from, to)
     }
 
-    val layouter = js.Dynamic.newInstance(g.Graph.Layout.Spring)(graph)
+    val layouter = js.Dynamic.newInstance(Dracula.Layout.Spring)(graph)
     layouter.layout()
 
     val width = jQuery("#dependencies")
@@ -83,8 +83,8 @@ final class Backend($: BackendScope[_, State]) {
     jQuery("#depgraphcanvas")
       .html("") // empty()
 
-    val renderer = js.Dynamic.newInstance(g.Graph.Renderer.Raphael)(
-      "depgraphcanvas", graph, width, height
+    val renderer = js.Dynamic.newInstance(Dracula.Renderer.Raphael)(
+      "#depgraphcanvas", graph, width, height
     )
     renderer.draw()
     println("Rendered canvas")
@@ -134,7 +134,7 @@ final class Backend($: BackendScope[_, State]) {
         .map(tree)
         .map(js.JSON.stringify(_))
     )
-    g.$(target)
+    jQuery(target).asInstanceOf[js.Dynamic]
       .treeview(js.Dictionary("data" -> js.Array(minDependencies.toList.map(tree): _*)))
   }
 

web/src/main/scala/coursier/web/Dracula.scala

@@ -0,0 +1,22 @@
+package coursier.web
+
+import scala.scalajs.js
+import scala.scalajs.js.annotation.JSImport
+
+@js.native
+@JSImport("graphdracula", JSImport.Namespace)
+object Dracula extends js.Object {
+  def Graph: js.Dynamic = js.native
+  def Layout: Layout = js.native
+  def Renderer: Renderer = js.native
+}
+
+@js.native
+trait Layout extends js.Any {
+  def Spring: js.Dynamic
+}
+
+@js.native
+trait Renderer extends js.Any {
+  def Raphael: js.Dynamic
+}

web/src/main/scala/coursier/web/Main.scala

@@ -1,12 +1,35 @@
 package coursier.web
 
-import scala.scalajs.js.annotation.{JSExport, JSExportTopLevel}
+import scala.scalajs.js
+import scala.scalajs.js.annotation.{JSExport, JSExportTopLevel, JSImport}
 import org.scalajs.dom.document
 
+// Initializing bootstrap, like
+// https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-javascript
+// but from scala-js, see e.g.
+// https://github.com/scalacenter/scalajs-bundler/issues/62#issuecomment-266695471
+@js.native
+@JSImport("bootstrap", JSImport.Namespace)
+object Bootstrap extends js.Object
+
+@js.native
+@JSImport("bootstrap-treeview", JSImport.Namespace)
+object BootstrapTreeView extends js.Object
+
 @JSExportTopLevel("CoursierWeb")
 object Main {
   @JSExport
-  def main(): Unit =
+  def main(args: Array[String]): Unit = {
+
+    println("bootstrap")
+    val bootstrap = Bootstrap
+
+    println("bootstrap-treeview")
+    val bootstrapTreeView = BootstrapTreeView
+
+    println("Initializing")
     App.app()
       .renderIntoDOM(document.getElementById("demoContent"))
+    println("Initialized")
+  }
 }