The Scala.js Tutorial

From f85a3be173f125a20eefcdca93ddc2c8ec0a8db7 Mon Sep 17 00:00:00 2001 From: Tobias Schlatter Date: Thu, 12 Jun 2014 15:40:22 +0200 Subject: [PATCH 1/7] Step 1: Setup --- build.sbt | 7 +++++++ project/build.properties | 1 + project/plugins.sbt | 1 + src/main/scala/tutorial/webapp/TutorialApp.scala | 7 +++++++ 4 files changed, 16 insertions(+) create mode 100644 build.sbt create mode 100644 project/build.properties create mode 100644 project/plugins.sbt create mode 100644 src/main/scala/tutorial/webapp/TutorialApp.scala diff --git a/build.sbt b/build.sbt new file mode 100644 index 0000000..92dae19 --- /dev/null +++ b/build.sbt @@ -0,0 +1,7 @@ +enablePlugins(ScalaJSPlugin) + +name := "Scala.js Tutorial" +scalaVersion := "2.13.1" + +// This is an application with a main method +scalaJSUseMainModuleInitializer := true diff --git a/project/build.properties b/project/build.properties new file mode 100644 index 0000000..a82bb05 --- /dev/null +++ b/project/build.properties @@ -0,0 +1 @@ +sbt.version=1.3.7 diff --git a/project/plugins.sbt b/project/plugins.sbt new file mode 100644 index 0000000..e93be7d --- /dev/null +++ b/project/plugins.sbt @@ -0,0 +1 @@ +addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.32") diff --git a/src/main/scala/tutorial/webapp/TutorialApp.scala b/src/main/scala/tutorial/webapp/TutorialApp.scala new file mode 100644 index 0000000..9be2dd8 --- /dev/null +++ b/src/main/scala/tutorial/webapp/TutorialApp.scala @@ -0,0 +1,7 @@ +package tutorial.webapp + +object TutorialApp { + def main(args: Array[String]): Unit = { + println("Hello world!") + } +} From 488f06a5d5075ed09dbb329d4dba6d97fc3cf2a1 Mon Sep 17 00:00:00 2001 From: Tobias Schlatter Date: Fri, 13 Jun 2014 08:58:35 +0200 Subject: [PATCH 2/7] Step 2: Integrating with HTML --- scalajs-tutorial-fastopt.html | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 scalajs-tutorial-fastopt.html diff --git a/scalajs-tutorial-fastopt.html b/scalajs-tutorial-fastopt.html new file mode 100644 index 0000000..f931017 --- /dev/null +++ b/scalajs-tutorial-fastopt.html @@ -0,0 +1,11 @@ + + + + + The Scala.js Tutorial + + + + + + From 57fac5c5165a4c53ff2f4824190e596a41d9ffe8 Mon Sep 17 00:00:00 2001 From: Tobias Schlatter Date: Fri, 13 Jun 2014 10:42:28 +0200 Subject: [PATCH 3/7] Step 3: Using the DOM --- build.sbt | 2 ++ src/main/scala/tutorial/webapp/TutorialApp.scala | 12 +++++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/build.sbt b/build.sbt index 92dae19..7ba6621 100644 --- a/build.sbt +++ b/build.sbt @@ -5,3 +5,5 @@ scalaVersion := "2.13.1" // This is an application with a main method scalaJSUseMainModuleInitializer := true + +libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "1.0.0" diff --git a/src/main/scala/tutorial/webapp/TutorialApp.scala b/src/main/scala/tutorial/webapp/TutorialApp.scala index 9be2dd8..eb1f5a7 100644 --- a/src/main/scala/tutorial/webapp/TutorialApp.scala +++ b/src/main/scala/tutorial/webapp/TutorialApp.scala @@ -1,7 +1,17 @@ package tutorial.webapp +import org.scalajs.dom +import org.scalajs.dom.document + object TutorialApp { def main(args: Array[String]): Unit = { - println("Hello world!") + appendPar(document.body, "Hello World") + } + + def appendPar(targetNode: dom.Node, text: String): Unit = { + val parNode = document.createElement("p") + val textNode = document.createTextNode(text) + parNode.appendChild(textNode) + targetNode.appendChild(parNode) } } From a3c792182b8ec98c5b2fbd58cb6fa51a762bf9dd Mon Sep 17 00:00:00 2001 From: Tobias Schlatter Date: Fri, 13 Jun 2014 10:57:20 +0200 Subject: [PATCH 4/7] Step 4: Reacting on User Input --- scalajs-tutorial-fastopt.html | 4 ++++ src/main/scala/tutorial/webapp/TutorialApp.scala | 7 +++++++ 2 files changed, 11 insertions(+) diff --git a/scalajs-tutorial-fastopt.html b/scalajs-tutorial-fastopt.html index f931017..f17aefd 100644 --- a/scalajs-tutorial-fastopt.html +++ b/scalajs-tutorial-fastopt.html @@ -5,6 +5,10 @@ The Scala.js Tutorial + + diff --git a/src/main/scala/tutorial/webapp/TutorialApp.scala b/src/main/scala/tutorial/webapp/TutorialApp.scala index eb1f5a7..27c903c 100644 --- a/src/main/scala/tutorial/webapp/TutorialApp.scala +++ b/src/main/scala/tutorial/webapp/TutorialApp.scala @@ -1,5 +1,7 @@ package tutorial.webapp +import scala.scalajs.js.annotation.JSExportTopLevel + import org.scalajs.dom import org.scalajs.dom.document @@ -14,4 +16,9 @@ object TutorialApp { parNode.appendChild(textNode) targetNode.appendChild(parNode) } + + @JSExportTopLevel("addClickedMessage") + def addClickedMessage(): Unit = { + appendPar(document.body, "You clicked the button!") + } } From a719e7610ecf31cd57a64044e2f0686d076b37a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Doeraene?= Date: Sat, 23 Jan 2016 11:10:26 +0100 Subject: [PATCH 5/7] Step 5: Using jQuery --- build.sbt | 5 +++++ scalajs-tutorial-fastopt.html | 4 +++- .../scala/tutorial/webapp/TutorialApp.scala | 18 ++++++------------ 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/build.sbt b/build.sbt index 7ba6621..be13d96 100644 --- a/build.sbt +++ b/build.sbt @@ -7,3 +7,8 @@ scalaVersion := "2.13.1" scalaJSUseMainModuleInitializer := true libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "1.0.0" +libraryDependencies += "be.doeraene" %%% "scalajs-jquery" % "1.0.0" + +skip in packageJSDependencies := false +jsDependencies += + "org.webjars" % "jquery" % "2.2.1" / "jquery.js" minified "jquery.min.js" diff --git a/scalajs-tutorial-fastopt.html b/scalajs-tutorial-fastopt.html index f17aefd..827c303 100644 --- a/scalajs-tutorial-fastopt.html +++ b/scalajs-tutorial-fastopt.html @@ -5,10 +5,12 @@ The Scala.js Tutorial - + + diff --git a/src/main/scala/tutorial/webapp/TutorialApp.scala b/src/main/scala/tutorial/webapp/TutorialApp.scala index 27c903c..26e48d4 100644 --- a/src/main/scala/tutorial/webapp/TutorialApp.scala +++ b/src/main/scala/tutorial/webapp/TutorialApp.scala @@ -1,24 +1,18 @@ package tutorial.webapp -import scala.scalajs.js.annotation.JSExportTopLevel - -import org.scalajs.dom -import org.scalajs.dom.document +import org.scalajs.jquery._ object TutorialApp { def main(args: Array[String]): Unit = { - appendPar(document.body, "Hello World") + jQuery(() => setupUI()) } - def appendPar(targetNode: dom.Node, text: String): Unit = { - val parNode = document.createElement("p") - val textNode = document.createTextNode(text) - parNode.appendChild(textNode) - targetNode.appendChild(parNode) + def setupUI(): Unit = { + jQuery("body").append("

Hello World

") + jQuery("#click-me-button").click(() => addClickedMessage()) } - @JSExportTopLevel("addClickedMessage") def addClickedMessage(): Unit = { - appendPar(document.body, "You clicked the button!") + jQuery("body").append("

You clicked the button!

") } } From 8a226c9489e10c86711ac1ab60940a06dd6659b0 Mon Sep 17 00:00:00 2001 From: Tobias Schlatter Date: Sat, 14 Jun 2014 16:18:27 +0200 Subject: [PATCH 6/7] Step 6: Testing --- build.sbt | 6 ++++ scalajs-tutorial-fastopt.html | 4 --- .../scala/tutorial/webapp/TutorialApp.scala | 4 ++- .../scala/tutorial/webapp/TutorialTest.scala | 31 +++++++++++++++++++ 4 files changed, 40 insertions(+), 5 deletions(-) create mode 100644 src/test/scala/tutorial/webapp/TutorialTest.scala diff --git a/build.sbt b/build.sbt index be13d96..e302029 100644 --- a/build.sbt +++ b/build.sbt @@ -12,3 +12,9 @@ libraryDependencies += "be.doeraene" %%% "scalajs-jquery" % "1.0.0" skip in packageJSDependencies := false jsDependencies += "org.webjars" % "jquery" % "2.2.1" / "jquery.js" minified "jquery.min.js" + +jsEnv := new org.scalajs.jsenv.jsdomnodejs.JSDOMNodeJSEnv() + +// uTest settings +libraryDependencies += "com.lihaoyi" %%% "utest" % "0.7.4" % "test" +testFrameworks += new TestFramework("utest.runner.Framework") diff --git a/scalajs-tutorial-fastopt.html b/scalajs-tutorial-fastopt.html index 827c303..582c082 100644 --- a/scalajs-tutorial-fastopt.html +++ b/scalajs-tutorial-fastopt.html @@ -5,10 +5,6 @@ The Scala.js Tutorial - - diff --git a/src/main/scala/tutorial/webapp/TutorialApp.scala b/src/main/scala/tutorial/webapp/TutorialApp.scala index 26e48d4..b81ab24 100644 --- a/src/main/scala/tutorial/webapp/TutorialApp.scala +++ b/src/main/scala/tutorial/webapp/TutorialApp.scala @@ -8,8 +8,10 @@ object TutorialApp { } def setupUI(): Unit = { + jQuery("""""") + .click(() => addClickedMessage()) + .appendTo(jQuery("body")) jQuery("body").append("

Hello World

") - jQuery("#click-me-button").click(() => addClickedMessage()) } def addClickedMessage(): Unit = { diff --git a/src/test/scala/tutorial/webapp/TutorialTest.scala b/src/test/scala/tutorial/webapp/TutorialTest.scala new file mode 100644 index 0000000..9d598a6 --- /dev/null +++ b/src/test/scala/tutorial/webapp/TutorialTest.scala @@ -0,0 +1,31 @@ +package tutorial.webapp + +import utest._ + +import org.scalajs.jquery._ + +object TutorialTest extends TestSuite { + + // Initialize App + TutorialApp.setupUI() + + def tests = Tests { + test("HelloWorld") { + assert(jQuery("p:contains('Hello World')").length == 1) + } + + test("ButtonClick") { + def messageCount = + jQuery("p:contains('You clicked the button!')").length + + val button = jQuery("button:contains('Click me!')") + assert(button.length == 1) + assert(messageCount == 0) + + for (c <- 1 to 5) { + button.click() + assert(messageCount == c) + } + } + } +} From a7dd06846542f5a8f78a79ebbfc40fd8abc42a4b Mon Sep 17 00:00:00 2001 From: Tobias Schlatter Date: Fri, 13 Jun 2014 17:00:28 +0200 Subject: [PATCH 7/7] Step 7: Optimizing for Production --- scalajs-tutorial.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 scalajs-tutorial.html diff --git a/scalajs-tutorial.html b/scalajs-tutorial.html new file mode 100644 index 0000000..300bdd8 --- /dev/null +++ b/scalajs-tutorial.html @@ -0,0 +1,13 @@ + + + + + The Scala.js Tutorial + + + + + + + +