Add Laminar library of text counter application

lulunac27a · Mar 6, 2024 · 6a1978b · 6a1978b
1 parent 6ac763b
commit 6a1978b
Show file tree

Hide file tree

Showing 13 changed files with 640 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,8 +1,12 @@
 # Ignore generated Metals files
 .metals
+**/metals.sbt
 # Ignore Scala.js generated output files
 **/target
 **/.scala-build
 **/.bsp
+**/.bloop
 # Ignore generated Mac files
 **/.DS_Store
+# Ignore generated Node.js generated output files
+**/node_modules
diff --git a/scala-js/LICENSE → LICENSE b/scala-js/LICENSE → LICENSE
diff --git a/laminar/.scalafmt.conf b/laminar/.scalafmt.conf
@@ -0,0 +1,2 @@
+version = "3.7.15"
+runner.dialect = scala213
diff --git a/laminar/README.md b/laminar/README.md
@@ -0,0 +1,3 @@
+# Text Counter Application in Laminar
+
+This is a text counter application using Laminar. It is based on Scala.js and uses Scala code to build HTML code.
diff --git a/laminar/build.sbt b/laminar/build.sbt
@@ -0,0 +1,6 @@
+enablePlugins(ScalaJSPlugin)
+name := "Text Counter Application using Laminar"
+scalaVersion := "2.13.12"
+scalaJSUseMainModuleInitializer := true
+libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "2.4.0"
+libraryDependencies += "com.raquo" %%% "laminar" % "16.0.0"
diff --git a/laminar/index.html b/laminar/index.html
@@ -0,0 +1,9 @@
+<head>
+  <title>Text Counter Application using Laminar</title>
+</head>
+<body>
+  <script
+    type="module"
+    src="target/scala-2.13/text-counter-application-using-laminar-fastopt/main.js"
+  ></script>
+</body>
diff --git a/laminar/project/build.properties b/laminar/project/build.properties
@@ -0,0 +1 @@
+sbt.version=1.9.9
diff --git a/laminar/project/plugins.sbt b/laminar/project/plugins.sbt
@@ -0,0 +1 @@
+addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.15.0")
diff --git a/laminar/project/project/build.properties b/laminar/project/project/build.properties
@@ -0,0 +1 @@
+sbt.version=1.9.9
diff --git a/laminar/src/main/scala/textcounter/Model.scala b/laminar/src/main/scala/textcounter/Model.scala
@@ -0,0 +1,37 @@
+import org.scalajs.dom.document
+import org.scalajs.dom
+import com.raquo.laminar.api.L._
+case class FormState(
+    textContent: String = ""
+)
+object TextCounterApp {
+  private val stateVarForm = Var(FormState())
+  private val submitter = Observer[FormState] { state =>
+    val textContent = document
+      .getElementById("textContent")
+      .asInstanceOf[dom.html.TextArea]
+      .value
+    val characters = textContent.length
+    val words = textContent.trim.split("\\s+").length
+    val lines = textContent.split("\\n").length
+    document.getElementById("textOutput").innerHTML =
+      s"Characters: $characters\nWords: $words\nLines: $lines"
+  }
+  def main(args: Array[String]): Unit = {
+    def textCounterContent: HtmlElement = {
+      div(
+        idAttr := "app",
+        h1("Text Counter Application using Laminar"),
+        div(
+          textArea(idAttr := "textContent", rows := 10, cols := 80),
+          button(
+            "Update Text Counter Output",
+            onClick.preventDefault.mapTo(stateVarForm.now()) --> submitter
+          ),
+          div(idAttr := "textOutput")
+        )
+      )
+    }
+    renderOnDomContentLoaded(document.body, textCounterContent)
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Text Counter Application in Laminar

		This is a text counter application using Laminar. It is based on Scala.js and uses Scala code to build HTML code.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.15.0")