integrate with webpack's asset importer

build.sbt

@@ -10,7 +10,7 @@ lazy val global = project
   .in(file("."))
   .settings(settings)
   .disablePlugins(AssemblyPlugin)
-  .aggregate(common.jvm, common.js, backend, frontend)
+  .aggregate(common.jvm, common.js, backend, frontend, macroSub)
 
 lazy val common = crossProject(JSPlatform, JVMPlatform)
   .crossType(CrossType.Pure)
@@ -31,10 +31,22 @@ lazy val frontend = project
   .settings(name := "frontend",
             settings,
             libraryDependencies ++= dependencies.js.value,
-            scalaJSUseMainModuleInitializer := true)
+            scalaJSUseMainModuleInitializer := true,
+            // include the macro classes and resources in the main js
+            Compile / packageBin / mappings ++= (macroSub / Compile / packageBin / mappings).value,
+            // include the macro sources in the main source js
+            Compile / packageSrc / mappings ++= (macroSub / Compile / packageSrc / mappings).value)
   .disablePlugins(AssemblyPlugin)
   .enablePlugins(ScalaJSPlugin)
   .dependsOn(common.js)
+  .dependsOn(macroSub % "compile-internal, test-internal")
+
+lazy val macroSub = (project in file("macro"))
+  .settings(name := "macro",
+            commonSettings,
+            libraryDependencies += "org.scala-lang" % "scala-reflect" % scalaVersion.value)
+  .disablePlugins(AssemblyPlugin)
+  .enablePlugins(ScalaJSPlugin)
 
 // Settings
 lazy val compilerOptions = Seq("-unchecked", "-feature", "-deprecation", "-Wunused:imports", "-Ymacro-annotations",

frontend/src/main/scala/org/kys/athena/components/LandingPage.scala

@@ -2,11 +2,13 @@ package org.kys.athena.components
 
 import com.raquo.laminar.api.L._
 import org.kys.athena.riot.api.dto.common.Platform
+import org.kys.athena.util.assets.AssetLoader
+
 
 object LandingPage {
   def render: HtmlElement = {
     div(cls := "flex flex-col items-center container-md flex-grow justify-center",
-        img(src := "/images/aleph256.png", width := "256px", height := "256px"),
+        img(src := AssetLoader.require("/images/aleph256.png"), width := "256px", height := "256px"),
         span(fontFamily := "heorotregular",
              fontSize := "6rem",
              color := "#780522",

frontend/src/main/scala/org/kys/athena/components/common/AppBar.scala

@@ -3,7 +3,8 @@ package org.kys.athena.components.common
 import com.raquo.laminar.api.L._
 import org.kys.athena.riot.api.dto.common.Platform
 import org.kys.athena.routes.LandingRoute
-import org.kys.athena.util.{CSSUtil, Config}
+import org.kys.athena.util.assets.AssetLoader
+import org.kys.athena.util.CSSUtil
 
 
 object AppBar {
@@ -20,7 +21,8 @@ object AppBar {
         div(
           cls := "flex flex-row h-full",
           a(cls := "mx-2", href := "https://github.com/greg2010/Athena", target := "_blank",
-            ImgSized(s"${Config.FRONTEND_URL}/images/gh_logo.png", 40, Some(40))),
+            ImgSized(AssetLoader.require("/images/gh_logo.png"), 40,
+                     Some(40))),
           child <-- showSearch.map {
             case true => SearchBar("", Platform.NA, cls := "border shadow-lg rounded-lg bg-white")
             case false => div()

frontend/src/main/scala/org/kys/athena/components/common/SearchBar.scala

@@ -5,6 +5,7 @@ import com.raquo.laminar.api.L._
 import org.kys.athena.App
 import org.kys.athena.riot.api.dto.common.Platform
 import org.kys.athena.routes.OngoingRoute
+import org.kys.athena.util.assets.AssetLoader
 import org.scalajs.dom
 import org.scalajs.dom.Event
 
@@ -34,7 +35,9 @@ object SearchBar {
                                 Some(s"border shadow-lg border-gray-500 p-1 rounded-sm bg-white"),
                                 Some("focus:outline-none text-md"),
                                 cls := s"px-1 focus:outline-none appearance-none"),
-         button(`type` := "submit", img(src := "/icons/search.svg", width := "24px", height := "auto")),
+         button(`type` := "submit", img(src := AssetLoader.require("/icons/search.svg"),
+                                        width := "24px",
+                                        height := "auto")),
          onSubmit.preventDefault --> formObserver,
          mods)
   }

frontend/src/main/scala/org/kys/athena/components/ongoing/OngoingError.scala

@@ -2,6 +2,7 @@ package org.kys.athena.components.ongoing
 
 import com.raquo.laminar.api.L._
 import org.kys.athena.routes.OngoingRoute
+import org.kys.athena.util.assets.AssetLoader
 import org.scalajs.dom
 
 
@@ -10,7 +11,7 @@ object OngoingError {
     div(
       cls := s"flex flex-col items-center p-4",
       img(
-        src := "/images/amumu_error.png"
+        src := AssetLoader.require("/images/amumu_error.png")
         ),
       span(
         cls := "text-xl mt-4",

frontend/src/main/scala/org/kys/athena/components/ongoing/OngoingNotFound.scala

@@ -3,14 +3,15 @@ package org.kys.athena.components.ongoing
 import org.kys.athena.routes.OngoingRoute
 import com.raquo.laminar.api.L._
 import org.kys.athena.components.common.SearchBar
+import org.kys.athena.util.assets.AssetLoader
 import org.scalajs.dom
 
 
 object OngoingNotFound {
   def render(p: OngoingRoute, refreshCb: () => Unit) = {
     div(
       cls := s"flex flex-col items-center p-4",
-      img(src := "/images/blitzcrank_logo.png"),
+      img(src := AssetLoader.require("/images/blitzcrank_logo.png")),
       span(
         cls := "text-xl mt-4", "Summoner ", b(s"${p.realm.toString}/${p.name}"), " is not currently in game."),
       SearchBar(p.name,

frontend/src/main/scala/org/kys/athena/components/ongoing/OngoingPage.scala

@@ -15,7 +15,8 @@ import org.kys.athena.routes.OngoingRoute
 import org.kys.athena.riot.api.dto.common.{GameQueueTypeEnum, Platform}
 import org.kys.athena.riot.api.dto.currentgameinfo.BannedChampion
 import org.kys.athena.util.CSSUtil._
-import org.kys.athena.util.{Config, DataState, Failed, Infallible, Loading, Ready, Time}
+import org.kys.athena.util.assets.AssetLoader
+import org.kys.athena.util.{DataState, Failed, Infallible, Loading, Ready, Time}
 import org.scalajs.dom.html
 import zio._
 
@@ -310,7 +311,7 @@ object OngoingPage {
                   zIndex := 1,
                   new CStyle("filter", "filter") := "grayscale(50%)",
                   cls := "rounded-lg"),
-                ImgSized(s"${Config.FRONTEND_URL}/images/slash_red_256.png",
+                ImgSized(AssetLoader.require("/images/slash_red_256.png"),
                          imgWidth = 64,
                          imgHeight = Some(64),
                          position := "relative",

frontend/src/main/scala/org/kys/athena/components/ongoing/OngoingPlayerCard.scala

@@ -11,11 +11,25 @@ import org.kys.athena.http.models.common.RankedLeague
 import org.kys.athena.riot.api.dto.common.{Platform, SummonerSpellsEnum}
 import org.kys.athena.riot.api.dto.ddragon.runes.Rune
 import org.kys.athena.riot.api.dto.league.{MiniSeries, RankedQueueTypeEnum, TierEnum}
-import org.kys.athena.util.{Config, Infallible, Loading, Ready}
+import org.kys.athena.util.assets.AssetLoader
+import org.kys.athena.util.{Infallible, Loading, Ready}
 import org.scalajs.dom.html
 
+
 object OngoingPlayerCard {
 
+  // Ugly, but enables webpack's asset importer plugin thus giving more safety.
+  // Cannot be replaced by a loop as the paths **must** be compile-time literals to be inlined properly.
+  private val rankedAssets: Map[TierEnum, String] = Map(
+    (TierEnum.Iron, AssetLoader.require("/images/Emblem_Iron.png")),
+    (TierEnum.Bronze, AssetLoader.require("/images/Emblem_Bronze.png")),
+    (TierEnum.Silver, AssetLoader.require("/images/Emblem_Silver.png")),
+    (TierEnum.Gold, AssetLoader.require("/images/Emblem_Gold.png")),
+    (TierEnum.Platinum, AssetLoader.require("/images/Emblem_Platinum.png")),
+    (TierEnum.Diamond, AssetLoader.require("/images/Emblem_Diamond.png")),
+    (TierEnum.Grandmaster, AssetLoader.require("/images/Emblem_Grandmaster.png")),
+    (TierEnum.Challenger, AssetLoader.require("/images/Emblem_Challenger.png")))
+
   private def renderSummonerSpell(ss: SummonerSpellsEnum)(implicit dd: CombinedDD) = {
     val url = dd.summonerUrlById(ss.value).getOrElse("")
     ImgSized(url, 32, Some(32), minWidth := "32px", cls := "rounded-md")
@@ -90,21 +104,23 @@ object OngoingPlayerCard {
       cls := "flex flex-col items-center justify-center mr-1", width := "86px",
       rl match {
         case Some(l) => {
-          val t   = l.tier.entryName.toLowerCase.capitalize
-          val url = s"${Config.FRONTEND_URL}/images/Emblem_${t}.png"
+          val url = rankedAssets.getOrElse(l.tier, AssetLoader.require("/images/Emblem_Unranked.png"))
           List(
             ImgSized(url, 40, None),
             l.tier match {
               case t if t.in(TierEnum.Master, TierEnum.Grandmaster, TierEnum.Challenger) => {
                 span(cls := "text-xs leading-tight mt-1", s"${t}")
               }
-              case _ => span(cls := "text-xs leading-tight mt-1", s"${t} ${l.rank}")
+              case _ => {
+                span(cls := "text-xs leading-tight mt-1",
+                     s"${l.tier.entryName.toLowerCase.capitalize} ${l.rank}")
+              }
             },
             span(cls := "text-xs leading-tight", s"${l.leaguePoints} LP"),
             l.miniSeries.map(renderMiniSeries).getOrElse(div()))
         }
         case None => {
-          val url = s"${Config.FRONTEND_URL}/images/Emblem_Unranked.png"
+          val url = AssetLoader.require("/images/Emblem_Unranked.png")
           List(
             ImgSized(url, 46, None),
             span(cls := "text-sm leading-tight mt-1", "Unranked"))

frontend/webpack.config.js

@@ -7,8 +7,8 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin')
 
-const scalaOutputPath = path.resolve(__dirname, './target/scala-2.13');
-const scalaResourcesPath = path.resolve(__dirname, './src/main/resources')
+const scalaOutputPath = path.resolve(__dirname, 'target/scala-2.13');
+const scalaResourcesPath = path.resolve(__dirname, 'src/main/resources')
 
 const devServerPort = 8080;
 
@@ -24,7 +24,7 @@ const devServer = {
   historyApiFallback: {
     index: ''
   },
-  stats: {warnings: false}
+  //stats: {warnings: false}
 };
 
 function common(variables, mode) {
@@ -38,30 +38,30 @@ function common(variables, mode) {
     },
     output: {
       publicPath: '/',
-      filename: '[name].[hash].js',
+      filename: '[name].[fullhash].js',
       library: 'app',
       libraryTarget: 'var'
     },
     entry: [
       path.resolve(scalaResourcesPath, './index.css')
     ],
     module: {
-      rules: [{
+      rules: [/*{
           test: /\.js$/,
           use: [{
             loader: "scalajs-friendly-source-map-loader",
             options: {
               name: '[name].[contenthash:8].[ext]',
               skipFileURLWarnings: true, // or false, default is true
               bundleHttp: true, // or false, default is true,
-              cachePath: ".scala-js-sources", // cache dir name, exclude in .gitignore
+              cachePath: path.resolve(__dirname, ".scala-js-sources"), // cache dir name, exclude in .gitignore
               noisyCache: false, // whether http cache changes are output
               useCache: true, // false => remove any http cache processing
             }
           }],
           enforce: "pre",
           include: [scalaOutputPath],
-        },
+        },*/
         {
           test: /\.js$/,
           use: ["source-map-loader"],
@@ -111,13 +111,7 @@ function common(variables, mode) {
         },
         {
           test: /\.(woff(2)?|ttf|eot|svg|png|jpg|ico|txt|json)(\?v=\d+\.\d+\.\d+)?$/,
-          use: [{
-            loader: 'file-loader',
-            options: {
-              name: '[name].[ext]',
-              outputPath: './'
-            }
-          }]
+          type: 'asset'
         }
       ]
     },
@@ -131,7 +125,7 @@ function common(variables, mode) {
       }),
 
       new ExtractCssChunks({
-        filename: '[name].[hash].css',
+        filename: '[name].[fullhash].css',
         chunkFilename: '[id].css'
       }),
       new CopyWebpackPlugin({