From fd7ddd95888610706c3a470ca5ca001fd49145b9 Mon Sep 17 00:00:00 2001 From: efim Date: Fri, 21 Apr 2023 17:22:17 +0400 Subject: [PATCH] adding scalajs & laminar https://www.scala-js.org/doc/tutorial/laminar.html --- .gitignore | 6 +++ build.sbt | 29 ++++++++++++ main.js | 24 +--------- package-lock.json | 10 +++++ package.json | 1 + project/build.properties | 1 + project/plugins.sbt | 1 + .../sunshine/planningpoker/LiveChart.scala | 44 +++++++++++++++++++ vite.config.js | 6 +++ 9 files changed, 99 insertions(+), 23 deletions(-) create mode 100644 build.sbt create mode 100644 project/build.properties create mode 100644 project/plugins.sbt create mode 100644 src/main/scala/industries/sunshine/planningpoker/LiveChart.scala create mode 100644 vite.config.js diff --git a/.gitignore b/.gitignore index 668095b..321b26d 100644 --- a/.gitignore +++ b/.gitignore @@ -24,3 +24,9 @@ dist-ssr *.sw? .direnv +.bsp +target +.bloop +.metals +project/project +project/metals.sbt diff --git a/build.sbt b/build.sbt new file mode 100644 index 0000000..6cc8e3e --- /dev/null +++ b/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", + ) diff --git a/main.js b/main.js index b400b4e..0b26a91 100644 --- a/main.js +++ b/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 = ` -
- - - - - - -

Hello Vite!

-
- -
-

- Click on the Vite logo to learn more -

-
-` - -setupCounter(document.querySelector('#counter')) +import 'scalajs:main.js' diff --git a/package-lock.json b/package-lock.json index ec1281d..b2a3a48 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index b51fe24..0b7ff4e 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "devDependencies": { + "@scala-js/vite-plugin-scalajs": "^1.0.0", "vite": "^4.3.0" } } diff --git a/project/build.properties b/project/build.properties new file mode 100644 index 0000000..46e43a9 --- /dev/null +++ b/project/build.properties @@ -0,0 +1 @@ +sbt.version=1.8.2 diff --git a/project/plugins.sbt b/project/plugins.sbt new file mode 100644 index 0000000..5c16d20 --- /dev/null +++ b/project/plugins.sbt @@ -0,0 +1 @@ +addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.13.1") diff --git a/src/main/scala/industries/sunshine/planningpoker/LiveChart.scala b/src/main/scala/industries/sunshine/planningpoker/LiveChart.scala new file mode 100644 index 0000000..dedbf3d --- /dev/null +++ b/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""" +
+ + + + + + +

Hello Scala.js and Vite!

+
+ +
+

+ Click on the Vite logo to learn more +

+
+ """ + + 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 diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..3b0b85e --- /dev/null +++ b/vite.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from "vite"; +import scalaJSPlugin from "@scala-js/vite-plugin-scalajs"; + +export default defineConfig({ + plugins: [scalaJSPlugin()], +});