JarCasting
Scala.js Facades
Simple Facade, a (macro-free) library for zero-boilerplate scalajs-react facades, plus (partial) facades for several react components built with it.
Installation
resolvers += Resolver.jcenterRepo
// Facade for @material-ui/core version 4.11.0
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "material-ui-core_4" % "0.13.2"
// Facade for @material-ui/lab version 4.0.0-alpha.56
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "material-ui-lab_4" % "0.13.2"
// Facade for react-autocomplete version 1.8.1
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "react-autocomplete_1" % "0.13.2"
// Facade for react-datepicker version 3.1.3
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "react-datepicker_3" % "0.13.2"
// Facade for react-input-mask version 2.0.4
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "react-input-mask_2" % "0.13.2"
// Facade for react-phone-number-input version 3.0.25
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "react-phone-number-input_3" % "0.13.2"
// Facade for react-select version 3.1.0
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "react-select_3" % "0.13.2"
// Facade for react-waypoint version 9.0.3
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "react-waypoint_9" % "0.13.2"
// Facade for react-widgets version 4.5.0
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "react-widgets_4" % "0.13.2"
// Library for react component facades that are simple to write and simple to use
libraryDependencies += "io.github.nafg.scalajs-facades" %%% "simplefacade" % "0.13.2"
Simple Facade
A better way to define and use Scala.js facades for React components
Existing approaches suffer from some issues:
- Require dealing with low-level javascript interop types like js.UndefOr and union types
- Pass all props, necessitating everything to be optional (js.UndefOr, or Option, if you solve the first issue)
- Reliance on macros
- Tedious to define or to use
import io.github.nafg.simplefacade.Implicits.elementTypeWriter
import io.github.nafg.simplefacade.Implicits.vdomNodeWriter
import japgolly.scalajs.react.vdom.VdomNode
import scala.scalajs.js
import scala.scalajs.js.annotation.JSImport
import io.github.nafg.simplefacade.{FacadeModule, PropTypes}
object Badge extends FacadeModule.NodeChildren.Simple {
@JSImport("@material-ui/core/Badge", JSImport.Default) @js.native object raw extends js.Object
override def mkProps = new Props
class Props extends PropTypes.WithChildren[VdomNode] {
val anchorOrigin = of[js.Object]
val badgeContent = of[VdomNode]
val className = of[String]
val classes = of[js.Object]
val color = of[String]
// more props
}
}
// in some render method
Badge( _.badgeContent := "1", _.color := "secondary", _.dynamicProp(72))(
Icon(_.children := "mail")
)
Facade code generation using react-docgen
Currently, the Material-UI facade is generated by extracting the components and props from react-docgen.