repository·main·Indexed 42 days ago
https://github.com/scala-js/scala-js-websiteDocumentation and release notes for Scala.js, including guides on JavaScript interoperability, sbt plugin configuration (fastOptJS, fullOptJS), and CLI tools like scalajsc and scalajsld. Covers version-specific updates from 0.5.0 to 0.5.4, including js.UndefOr, TypedArrays, and binary compatibility guidelines.
If you are new to Scala.js, you can start with the [official tutorial]({{ BASE_PATH }}/tutorial/).
For help and discussions, you can use the following channels:
#scala-js channel.scala.js tag.By default, Scala.js entities (classes, objects, methods, and properties) are not accessible to JavaScript. To make them available, you must explicitly annotate them using @JSExportTopLevel or @JSExport.
@JSExportTopLevel for entities that should exist in the JavaScript global scope (like top-level objects or classes) or as module exports.@JSExport for members (methods, properties) inside an exported class or object.package example
import scala.scalajs.js.annotation._
@JSExportTopLevel("HelloWorld")
object HelloWorld {
@JSExport
def sayHello(): Unit = {
println("Hello world!")
}
}The Scala.js ecosystem provides several ways to extend your development experience:
The Scala.js community maintains a collection of presentations and videos categorized by topic to help developers learn the ecosystem. Available resources include:
Scala.js 0.6.15 introduced several new features for better JS interoperability:
@JSExportStatic: Use this to define static members on Scala.js-defined JavaScript classes.@JSExportTopLevel: Now supports fields in addition to methods and top-level classes/objects.js.Symbol (ES2015 symbols)js.Iterable[+A]js.Iterator[+A]@JSName: The @JSName annotation now accepts a js.Symbol (instead of just a constant string) to declare members whose name is a JavaScript symbol.When writing code that must run on both the JVM and JavaScript, you typically need two separate sbt projects. The CrossProject type and its crossProject builder allow you to define these pairs in a DRY (Don't Repeat Yourself) manner.
For detailed implementation details, refer to the org.scalajs.sbtplugin.cross.CrossProject documentation.
Scala.js splits modules along class boundaries. To ensure effective module splitting (e.g., when using SmallestModules), avoid grouping unrelated features into a single object or class.
Bad Pattern (Poor Splitting): Grouping multiple features into one object prevents the linker from splitting them into separate files.
object UI {
def renderFeature1(): Unit = ???
def renderFeature2(): Unit = ???
}Good Pattern (Better Splitting): Group code that belongs to the same feature into its own object/class. This allows the linker to isolate features into their own modules.
object Feature1 {
def render(): Unit = ???
def calc(): Unit = ???
}
object Feature2 {
def render(): Unit = ???
def calc(): Unit = ???
}Scala.js 0.6.10 is a minor release with the following compatibility characteristics:
In Scala.js 1.7.1, default parameter values specified in @js.native def facades are ignored during compilation. Instead, the parameter is omitted in the generated JavaScript call, allowing the underlying JavaScript implementation to handle its own default behavior (typically by checking if the parameter is undefined).
Key behaviors:
y: Int = 2) has no impact on the actual JavaScript call. The parameter is simply omitted.= js.native as a default value in @js.native defs, which was previously unsupported for top-level method facades.Example: If you have a JavaScript object:
const Foo = {
bar(x, y) {
return x + (y === undefined ? 1 : y);
}
};Defining the Scala facade as:
@js.native @JSGlobal
object Foo extends js.Object {
def bar(x: Int, y: Int = 2): Int = js.native
}Calling Foo.bar(5) will compile to Foo.bar(5) in JavaScript. The JavaScript engine will then use its own default (1), ignoring the Scala-defined default of 2.
@js.native @JSGlobal
object Foo extends js.Object {
def bar(x: Int, y: Int = js.native): Int = js.native
}
// Calling this:
println(Foo.bar(5))
// Compiles to JS:
// Foo.bar(5)Scala allows you to define parameters that are evaluated only when they are actually used inside the function body, rather than when the function is called. This is known as call-by-name. In the function signature, this is denoted by the => syntax (e.g., cPos: => Int). This is more concise and safer than the JavaScript pattern of wrapping expensive computations in anonymous functions.
def compute(value: Int, cPos: => Int, cNeg: => Int) = {
if (value >= 0)
cPos
else
cNeg
}
// cPos and cNeg are only evaluated if the condition is met
compute(x, expCalc, expCalc2)Scala supports defining functions with multiple parameter lists (e.g., def func(a: Int)(b: String)). This enables several patterns:
val f = func(1)_, which returns a new function expecting the remaining parameters.def minmaxBy[T](seq: Seq[T])(f: T => Int), the type T is inferred from seq, so you don't need to explicitly provide it when calling the function with the second parameter list.// Example of currying and type inference
def minmaxBy[T](seq: Seq[T])(f: T => Int): (Int, Int) = {
seq.foldLeft((Int.MaxValue, Int.MinValue)) {
case ((min, max), e) =>
val v = f(e)
(math.min(min, v), math.max(max, v))
}
}
// Type T is inferred from 'persons', so no explicit type needed for the second list
val (youngest, oldest) = minmaxBy(persons)(_.age)To bridge a reactive Laminar application with an imperative JavaScript library (like Chart.js), use the onMountUnmountCallback within a Laminar tag (e.g., canvasTag).
mount callback, obtain the underlying DOM element via nodeCtx.thisNode.ref and instantiate the JS library using that element and your configuration.Option[T]). In the unmount callback, call the library's cleanup method (e.g., .destroy()) to prevent memory leaks.dataSignal --> { ... }) to bridge the FRP (Functional Reactive Programming) world to the imperative world. Inside the binder, access the stored JS instance and call its update methods (e.g., .update()) whenever the signal changes.import scala.scalajs.js.JSConverters.*
import typings.chartJs.mod.*
def renderDataChart(): Element =
var optChart: Option[Chart] = None
canvasTag(
onMountUnmountCallback(
mount = { nodeCtx =>
val domCanvas: dom.HTMLCanvasElement = nodeCtx.thisNode.ref
val chart = Chart.apply.newInstance2(domCanvas, chartConfig)
optChart = Some(chart)
},
unmount = { thisNode =>
for (chart <- optChart) chart.destroy()
optChart = None
}
),
// Bridge FRP signal to imperative JS update
dataSignal --> { data =>
for (chart <- optChart) {
chart.data.labels = data.map(_.label).toJSArray
chart.data.datasets.get(0).data = data.map(_.price).toJSArray
chart.update()
}
}
)