Suggestion: Use JSImport annotations instead of requiring user to configure an 'mui' or similar variables

Currently, the raw components for material-ui are contained in the Mui Scala object, which pulls its definition from an mui Javascript object which the library user must configure, e.g., as

var mui = require("material-ui");
mui.Styles = require("material-ui/styles");
mui.SvgIcons = require('material-ui/svg-icons/index');

window.mui = mui;

However, depending on the tool chain used to manage Javascript dependencies, getting such an object into the global namespace may be inconvenient and/or finicky, and it is also not obvious that it needs to be done to begin with.

Scala.js has an @JSImport annotation which is designed for this use case, that of importing definitions from modules. @JSName("mui") can be replaced with @JSImport("material-ui",Namespace) It has the same semantics as the original Mui object, so the facade classes don’t need to be changed. It also works out of the box with sbt plugins like scalajs-bundler that manage NPM dependencies. Making such a tool chain work with scalajs-react-components’ current method of getting component definitions is something I haven’t managed to do yet.

(the above also applies to the other libraries this library provides facades for).

[beikern]

Fixed!!!

It works using this config:

webpack.config.js

var webpack = require('webpack');

// Load the config generated by scalajs-bundler
var config = require('./scalajs.webpack.config');

// Exported modules (here, React and ReactDOM)
var globalModules = {
  "material-ui": "mui",
  "material-ui/styles" : "mui.Styles",
  "material-ui/svg-icons/index" : "mui.SvgIcons"
};

Object.keys(config.entry).forEach(function(key) {
  // Prepend each entry with the globally exposed JS dependencies
  config.entry[key] = Object.keys(globalModules).concat(config.entry[key]);
});

// Globally expose the JS dependencies
config.module.loaders = Object.keys(globalModules).map(function (pkg) {
  return {
    test: require.resolve(pkg),
    loader: "expose-loader?" + globalModules[pkg]
  }
});

module.exports = config;

build.sbt

lazy val client: Project = (project in file("client"))
  .settings(
    name := "client",
    version := Settings.version,
    scalaVersion := Settings.versions.scala,
    scalacOptions ++= Settings.scalacOptions,
    useYarn := true,
    mainClass in Compile := Some("client.SPAMain"),
    libraryDependencies ++= Settings.scalajsDependencies.value,
    npmDependencies in Compile := Seq(
      "react"                             -> Settings.versions.reactVersion,
      "react-dom"                         -> Settings.versions.reactVersion,
      "react-addons-create-fragment"      -> Settings.versions.reactVersion,
      "react-addons-css-transition-group" -> Settings.versions.reactVersion,
      "react-addons-pure-render-mixin"    -> Settings.versions.reactVersion,
      "react-addons-transition-group"     -> Settings.versions.reactVersion,
      "react-addons-update"               -> Settings.versions.reactVersion,
      "material-ui"                       -> Settings.versions.MuiVersion,
      "react-tap-event-plugin"            -> "2.0.1",
      "jquery"                            -> Settings.versions.jQuery,
      "bootstrap"                         -> Settings.versions.bootstrap
    ),
    npmDevDependencies in Compile += "expose-loader" -> "0.7.1",
    webpackConfigFile := Some(baseDirectory.value/"webpack.config.js"),
    scalaJSUseMainModuleInitializer := true,
    scalaJSUseMainModuleInitializer.in(Test) := false,
    webpackEmitSourceMaps := false,
    enableReloadWorkflow := false
  )
  .enablePlugins(ScalaJSPlugin, ScalaJSBundlerPlugin, ScalaJSWeb)
  .dependsOn(sharedJS)

[oyvindberg]

Hey there! Yes, yes, this is the plan! In fact me and @rleibman have been working on it for a while in what will be version 1.0, see #89 . Feel free to give it a spin!