adding scalajs & laminar

https://www.scala-js.org/doc/tutorial/laminar.html

.gitignore

@@ -24,3 +24,9 @@ dist-ssr
 *.sw?
 
 .direnv
+.bsp
+target
+.bloop
+.metals
+project/project
+project/metals.sbt

build.sbt

@@ -0,0 +1,29 @@
+import org.scalajs.linker.interface.ModuleSplitStyle
+
+lazy val planningPokerGrargh = project.in(file("."))
+  .enablePlugins(ScalaJSPlugin) // Enable the Scala.js plugin in this project
+  .settings(
+    scalaVersion := "3.2.0",
+
+    // Tell Scala.js that this is an application with a main method
+    scalaJSUseMainModuleInitializer := true,
+
+    /* Configure Scala.js to emit modules in the optimal way to
+     * connect to Vite's incremental reload.
+     * - emit ECMAScript modules
+     * - emit as many small modules as possible for classes in the "livechart" package
+     * - emit as few (large) modules as possible for all other classes
+     *   (in particular, for the standard library)
+     */
+    scalaJSLinkerConfig ~= {
+      _.withModuleKind(ModuleKind.ESModule)
+        .withModuleSplitStyle(
+          ModuleSplitStyle.SmallModulesFor(List("livechart")))
+    },
+
+    /* Depend on the scalajs-dom library.
+     * It provides static types for the browser DOM APIs.
+     */
+    libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "2.4.0",
+    libraryDependencies += "com.raquo" %%% "laminar" % "15.0.1",
+  )

main.js

@@ -1,24 +1,2 @@
 import './style.css'
-import javascriptLogo from './javascript.svg'
-import viteLogo from '/vite.svg'
-import { setupCounter } from './counter.js'
-
-document.querySelector('#app').innerHTML = `
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="${viteLogo}" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
-      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
-    </a>
-    <h1>Hello Vite!</h1>
-    <div class="card">
-      <button id="counter" type="button"></button>
-    </div>
-    <p class="read-the-docs">
-      Click on the Vite logo to learn more
-    </p>
-  </div>
-`
-
-setupCounter(document.querySelector('#counter'))
+import 'scalajs:main.js'

package-lock.json

@@ -8,6 +8,7 @@
       "name": "planning-poker-grargh",
       "version": "0.0.0",
       "devDependencies": {
+        "@scala-js/vite-plugin-scalajs": "^1.0.0",
         "vite": "^4.3.0"
       }
     },
@@ -363,6 +364,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/@scala-js/vite-plugin-scalajs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@scala-js/vite-plugin-scalajs/-/vite-plugin-scalajs-1.0.0.tgz",
+      "integrity": "sha512-QqeOXFWiwZyl4LrtAg7ZMeoShVWTD+4qcmuv0M7QNCu8QYzf+h3ysozbmyWYJKVpxJYMLnuSZZSiygD8Tzh+eg==",
+      "dev": true,
+      "dependencies": {
+        "vite": "^4.1.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.17.17",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.17.tgz",

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@scala-js/vite-plugin-scalajs": "^1.0.0",
     "vite": "^4.3.0"
   }
 }

project/build.properties

@@ -0,0 +1 @@
+sbt.version=1.8.2

project/plugins.sbt

@@ -0,0 +1 @@
+addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.13.1")

src/main/scala/industries/sunshine/planningpoker/LiveChart.scala

@@ -0,0 +1,44 @@
+package industries.sunshine.planningpoker
+
+import scala.scalajs.js
+import scala.scalajs.js.annotation.*
+
+import org.scalajs.dom
+
+// import javascriptLogo from "/javascript.svg"
+@js.native @JSImport("/javascript.svg", JSImport.Default)
+val javascriptLogo: String = js.native
+
+@main
+def LiveChart(): Unit =
+  dom.document.querySelector("#app").innerHTML = s"""
+    <div>
+      <a href="https://vitejs.dev" target="_blank">
+        <img src="/vite.svg" class="logo" alt="Vite logo" />
+      </a>
+      <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
+        <img src="$javascriptLogo" class="logo vanilla" alt="JavaScript logo" />
+      </a>
+      <h1>Hello Scala.js and Vite!</h1>
+      <div class="card">
+        <button id="counter" type="button"></button>
+      </div>
+      <p class="read-the-docs">
+        Click on the Vite logo to learn more
+      </p>
+    </div>
+  """
+
+  setupCounter(dom.document.getElementById("counter"))
+end LiveChart
+
+def setupCounter(element: dom.Element): Unit =
+  var counter = 0
+
+  def setCounter(count: Int): Unit =
+    counter = count
+    element.innerHTML = s"count is $counter"
+
+  element.addEventListener("click", e => setCounter(counter + 1))
+  setCounter(0)
+end setupCounter

vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import scalaJSPlugin from "@scala-js/vite-plugin-scalajs";
+
+export default defineConfig({
+  plugins: [scalaJSPlugin()],
+});