use esm in client js

neferure · Jun 20, 2023 · 09b310b · 09b310b
1 parent 70ff63e
commit 09b310b
Show file tree

Hide file tree

Showing 198 changed files with 1,438 additions and 1,686 deletions.
diff --git a/app/controllers/Editor.scala b/app/controllers/Editor.scala
@@ -10,24 +10,22 @@ import lila.common.Json.given
 
 final class Editor(env: Env) extends LilaController(env):
 
-  private lazy val positionsJson = lila.common.String.html.safeJsonValue {
+  private lazy val positionsJson =
     JsArray(chess.StartingPosition.all map { p =>
       Json.obj(
         "eco"  -> p.eco,
         "name" -> p.name,
         "fen"  -> p.fen
       )
     })
-  }
 
-  private lazy val endgamePositionsJson = lila.common.String.html.safeJsonValue {
+  private lazy val endgamePositionsJson =
     JsArray(chess.EndgamePosition.positions map { p =>
       Json.obj(
         "name" -> p.name,
         "fen"  -> p.fen
       )
     })
-  }
 
   def index = load("")
 

diff --git a/app/templating/AssetHelper.scala b/app/templating/AssetHelper.scala
@@ -2,9 +2,11 @@ package lila.app
 package templating
 
 import play.api.mvc.RequestHeader
+import play.api.libs.json.{ Json, JsValue }
 
 import lila.app.ui.ScalatagsTemplate.*
 import lila.common.AssetVersion
+import lila.common.String.html.safeJsonValue
 
 trait AssetHelper extends HasEnv { self: I18nHelper with SecurityHelper =>
 
@@ -51,33 +53,40 @@ if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all')
     document.querySelectorAll('[media="(prefers-color-scheme: dark)"]').forEach(e=>e.media='')
 """
 
-  // load scripts in <head> and always use defer
-  def jsAt(path: String): Frag = script(deferAttr, src := assetUrl(path))
-
-  def jsTag(name: String): Frag = jsAt(s"javascripts/$name")
+  // load iife scripts in <head> and defer
+  def iifeModule(path: String): Frag = script(deferAttr, src := assetUrl(path))
 
+  // jsModule is esm, no defer needed
   def jsModule(name: String): Frag =
-    jsAt(s"compiled/$name${minifiedAssets so ".min"}.js")
-
-  def depsTag = jsAt("compiled/deps.min.js")
-
-  def roundTag                            = jsModule("round")
-  def roundNvuiTag(using ctx: WebContext) = ctx.blind option jsModule("round.nvui")
-
-  def analyseTag                            = jsModule("analysisBoard")
-  def analyseStudyTag                       = jsModule("analysisBoard.study")
-  def analyseNvuiTag(using ctx: WebContext) = ctx.blind option jsModule("analysisBoard.nvui")
-
-  def puzzleTag                            = jsModule("puzzle")
-  def puzzleNvuiTag(using ctx: WebContext) = ctx.blind option jsModule("puzzle.nvui")
-
-  def captchaTag          = jsModule("captcha")
-  def infiniteScrollTag   = jsModule("infiniteScroll")
-  def chessgroundTag      = jsAt("javascripts/vendor/chessground.min.js")
-  def cashTag             = jsAt("javascripts/vendor/cash.min.js")
-  def fingerprintTag      = jsAt("javascripts/fipr.js")
-  def highchartsLatestTag = jsAt("vendor/highcharts-4.2.5/highcharts.js")
-  def highchartsMoreTag   = jsAt("vendor/highcharts-4.2.5/highcharts-more.js")
+    script(tpe := "module", src := assetUrl(s"compiled/$name${minifiedAssets so ".min"}.js"))
+  def jsModuleInit(name: String)(using WebContext) =
+    frag(jsModule(name), embedJsUnsafeLoadThen(s"lichess.loadEsm('$name')"))
+  def jsModuleInit(name: String, text: String)(using WebContext) =
+    frag(jsModule(name), embedJsUnsafeLoadThen(s"lichess.loadEsm('$name',{init:$text})"))
+  def jsModuleInit(name: String, json: JsValue)(using WebContext): Frag =
+    jsModuleInit(name, safeJsonValue(json))
+  def jsModuleInit(name: String, text: String, nonce: lila.api.Nonce) =
+    frag(jsModule(name), embedJsUnsafeLoadThen(s"lichess.loadEsm('$name',{init:$text})", nonce))
+  def jsModuleInit(name: String, json: JsValue, nonce: lila.api.Nonce) = frag(
+    jsModule(name),
+    embedJsUnsafeLoadThen(s"lichess.loadEsm('$name',{init:${safeJsonValue(json)}})", nonce)
+  )
+  def analyseInit(mode: String, json: JsValue)(using ctx: WebContext) =
+    jsModuleInit("analysisBoard", Json.obj("mode" -> mode, "cfg" -> json))
+  def analyseStudyInit(mode: String, json: JsValue)(using ctx: WebContext) =
+    jsModuleInit("analysisBoard.study", Json.obj("mode" -> mode, "cfg" -> json))
+
+  def analyseNvuiTag(using ctx: WebContext)    = ctx.blind option jsModule("analysisBoard.nvui")
+  def puzzleNvuiTag(using ctx: WebContext)     = ctx.blind option jsModule("puzzle.nvui")
+  def roundNvuiTag(using ctx: WebContext)      = ctx.blind option jsModule("round.nvui")
+  def infiniteScrollTag(using ctx: WebContext) = jsModuleInit("infiniteScroll", "'.infinite-scroll'")
+  def captchaTag                               = jsModule("captcha")
+  def depsTag                                  = iifeModule("compiled/deps.min.js")
+  def chessgroundTag                           = iifeModule("javascripts/vendor/chessground.min.js")
+  def cashTag                                  = iifeModule("javascripts/vendor/cash.min.js")
+  def fingerprintTag                           = iifeModule("javascripts/fipr.js")
+  def highchartsLatestTag                      = iifeModule("vendor/highcharts-4.2.5/highcharts.js")
+  def highchartsMoreTag                        = iifeModule("vendor/highcharts-4.2.5/highcharts-more.js")
 
   def prismicJs(using WebContext): Frag =
     raw:

diff --git a/app/views/account/passwd.scala b/app/views/account/passwd.scala
@@ -12,12 +12,7 @@ object passwd:
     account.layout(
       title = trans.changePassword.txt(),
       active = "password",
-      evenMoreJs = frag(
-        embedJsUnsafeLoadThen("""
-          lichess.loadModule('passwordComplexity').then(() =>
-            passwordComplexity.addPasswordChangeListener('form3-newPasswd1')
-          )""")
-      )
+      evenMoreJs = jsModuleInit("passwordComplexity", "'form3-newPasswd1'")
     ) {
       div(cls := "account box box-pad")(
         h1(cls := "box__top")(trans.changePassword()),

diff --git a/app/views/account/twoFactor.scala b/app/views/account/twoFactor.scala
@@ -19,8 +19,8 @@ object twoFactor:
       title = s"${me.username} - ${twoFactorAuth.txt()}",
       active = "twofactor",
       evenMoreJs = frag(
-        jsAt("javascripts/vendor/qrcode.min.js"),
-        jsTag("twofactor.form.js")
+        iifeModule("javascripts/vendor/qrcode.min.js"),
+        iifeModule("javascripts/twofactor.form.js")
       )
     ) {
       div(cls := "account twofactor box box-pad")(

diff --git a/app/views/analyse/embed.scala b/app/views/analyse/embed.scala
@@ -19,12 +19,8 @@ object embed:
       div(cls := "is2d")(div(pgn)),
       jsModule("lpv.embed"),
       embedJsUnsafe(
-        s"""document.addEventListener("DOMContentLoaded",function(){LpvEmbed(document.body.firstChild.firstChild,${safeJsonValue(
-            Json
-              .obj(
-                "i18n" -> i18nJsObject(lpvI18n)
-              )
-              .add("orientation", orientation.map(_.name))
+        s"""document.addEventListener('DOMContentLoaded',function(){LpvEmbed(${safeJsonValue(
+            Json.obj("i18n" -> i18nJsObject(lpvI18n)).add("orientation", orientation.map(_.name))
           )})})""",
         config.nonce
       )

diff --git a/app/views/analyse/replay.scala b/app/views/analyse/replay.scala
@@ -123,19 +123,19 @@ object replay:
         ctx.blind option cssTag("round.nvui")
       ),
       moreJs = frag(
-        analyseTag,
         analyseNvuiTag,
-        embedJsUnsafeLoadThen(s"""LichessAnalyse.boot(${safeJsonValue(
-            Json
-              .obj(
-                "data"   -> data,
-                "i18n"   -> jsI18n(),
-                "userId" -> ctx.userId,
-                "chat"   -> chatJson
-              )
-              .add("hunter" -> isGranted(_.ViewBlurs)) ++
-              views.html.board.bits.explorerAndCevalConfig
-          )})""")
+        analyseInit(
+          "replay",
+          Json
+            .obj(
+              "data"   -> data,
+              "i18n"   -> jsI18n(),
+              "userId" -> ctx.userId,
+              "chat"   -> chatJson
+            )
+            .add("hunter" -> isGranted(_.ViewBlurs)) ++
+            views.html.board.bits.explorerAndCevalConfig
+        )
       ),
       openGraph = povOpenGraph(pov).some
     )(

diff --git a/app/views/auth/bits.scala b/app/views/auth/bits.scala
@@ -77,12 +77,7 @@ object bits:
     views.html.base.layout(
       title = s"${me.username} - ${trans.changePassword.txt()}",
       moreCss = cssTag("form3"),
-      moreJs = frag(
-        embedJsUnsafeLoadThen("""
-          lichess.loadModule('passwordComplexity').then(() =>
-            passwordComplexity.addPasswordChangeListener('form3-newPasswd1')
-          )""")
-      )
+      moreJs = jsModuleInit("passwordComplexity", "'form3-newPasswd1'")
     ) {
       main(cls := "page-small box box-pad")(
         boxTop(

diff --git a/app/views/auth/login.scala b/app/views/auth/login.scala
@@ -15,10 +15,7 @@ object login:
   def apply(form: Form[?], referrer: Option[String])(using WebContext) =
     views.html.base.layout(
       title = trans.signIn.txt(),
-      moreJs = frag(
-        jsModule("login"),
-        embedJsUnsafeLoadThen("""loginSignup.loginStart()""")
-      ),
+      moreJs = jsModuleInit("login", "'login'"),
       moreCss = cssTag("auth"),
       withHrefLangs = lila.common.LangPath(routes.Auth.login).some
     ) {

diff --git a/app/views/auth/signup.scala b/app/views/auth/signup.scala
@@ -14,8 +14,7 @@ object signup:
     views.html.base.layout(
       title = trans.signUp.txt(),
       moreJs = frag(
-        jsModule("login"),
-        embedJsUnsafeLoadThen("""loginSignup.signupStart()"""),
+        jsModuleInit("login", "'signup'"),
         views.html.base.hcaptcha.script(form),
         fingerprintTag
       ),

diff --git a/app/views/base/embed.scala b/app/views/base/embed.scala
@@ -27,6 +27,7 @@ object embed:
           layout.dataAssetVersion := assetVersion.value,
           layout.dataTheme        := config.bg,
           layout.dataPieceSet     := config.pieceSet.name,
+          layout.dataDev,
           body
         )
       )

diff --git a/app/views/board/editor.scala b/app/views/board/editor.scala
@@ -1,6 +1,6 @@
 package views.html.board
 
-import play.api.libs.json.Json
+import play.api.libs.json.{ Json, JsArray }
 import controllers.routes
 
 import chess.format.Fen
@@ -14,17 +14,14 @@ object editor:
 
   def apply(
       fen: Option[Fen.Epd],
-      positionsJson: String,
-      endgamePositionsJson: String
+      positionsJson: JsArray,
+      endgamePositionsJson: JsArray
   )(using WebContext) =
     views.html.base.layout(
       title = trans.boardEditor.txt(),
-      moreJs = frag(
-        jsModule("editor"),
-        embedJsUnsafeLoadThen(
-          s"""const data=${safeJsonValue(jsData(fen))};data.positions=$positionsJson;
-data.endgamePositions=$endgamePositionsJson;LichessEditor(document.getElementById('board-editor'), data);"""
-        )
+      moreJs = jsModuleInit(
+        "editor",
+        jsData(fen) ++ Json.obj("positions" -> positionsJson, "endgamePositions" -> endgamePositionsJson)
       ),
       moreCss = cssTag("editor"),
       chessground = false,

diff --git a/app/views/board/userAnalysis.scala b/app/views/board/userAnalysis.scala
@@ -28,18 +28,18 @@ object userAnalysis:
         ctx.blind option cssTag("round.nvui")
       ),
       moreJs = frag(
-        analyseTag,
         analyseNvuiTag,
-        embedJsUnsafe(s"""lichess.userAnalysis=${safeJsonValue(
-            Json
-              .obj(
-                "data" -> data,
-                "i18n" -> userAnalysisI18n(withForecast = withForecast),
-                "wiki" -> pov.game.variant.standard
-              )
-              .add("inlinePgn", inlinePgn) ++
-              views.html.board.bits.explorerAndCevalConfig
-          )}""")
+        analyseInit(
+          "userAnalysis",
+          Json
+            .obj(
+              "data" -> data,
+              "i18n" -> userAnalysisI18n(withForecast = withForecast),
+              "wiki" -> pov.game.variant.standard
+            )
+            .add("inlinePgn", inlinePgn) ++
+            views.html.board.bits.explorerAndCevalConfig
+        )
       ),
       csp = analysisCsp.withWikiBooks.some,
       chessground = false,

diff --git a/app/views/challenge/bits.scala b/app/views/challenge/bits.scala
@@ -12,16 +12,14 @@ import controllers.routes
 object bits:
 
   def js(c: Challenge, json: JsObject, owner: Boolean, color: Option[chess.Color] = None)(using WebContext) =
-    frag(
-      jsModule("challengePage"),
-      embedJsUnsafeLoadThen(s"""challengePageStart(${safeJsonValue(
-          Json.obj(
-            "socketUrl" -> s"/challenge/${c.id}/socket/v$apiVersion",
-            "xhrUrl"    -> routes.Challenge.show(c.id, color.map(_.name)).url,
-            "owner"     -> owner,
-            "data"      -> json
-          )
-        )})""")
+    jsModuleInit(
+      "challengePage",
+      Json.obj(
+        "socketUrl" -> s"/challenge/${c.id}/socket/v$apiVersion",
+        "xhrUrl"    -> routes.Challenge.show(c.id, color.map(_.name)).url,
+        "owner"     -> owner,
+        "data"      -> json
+      )
     )
 
   def details(c: Challenge, requestedColor: Option[chess.Color])(using ctx: WebContext) =

diff --git a/app/views/coach/picture.scala b/app/views/coach/picture.scala
@@ -12,7 +12,7 @@ object picture:
   def apply(c: Coach.WithUser, error: Option[String] = None)(using WebContext) =
     views.html.account.layout(
       title = s"${c.user.titleUsername} coach picture",
-      evenMoreJs = jsTag("coach.form.js"),
+      evenMoreJs = iifeModule("javascripts/coach.form.js"),
       evenMoreCss = cssTag("coach.editor"),
       active = "coach"
     ) {

diff --git a/app/views/coordinate/show.scala b/app/views/coordinate/show.scala
@@ -16,14 +16,7 @@ object show:
         cssTag("coordinateTrainer"),
         cssTag("voice")
       ),
-      moreJs = frag(
-        jsModule("coordinateTrainer"),
-        embedJsUnsafeLoadThen(
-          s"""LichessCoordinateTrainer(document.getElementById('trainer'), ${safeJsonValue(
-              bits.coordinateConfig(scoreOption)
-            )});"""
-        )
-      ),
+      moreJs = jsModuleInit("coordinateTrainer", bits.coordinateConfig(scoreOption)),
       csp = defaultCsp.withPeer.withWebAssembly.some,
       openGraph = lila.app.ui
         .OpenGraph(

diff --git a/app/views/dgt.scala b/app/views/dgt.scala
@@ -68,7 +68,7 @@ object dgt:
     )
 
   def play(token: AccessToken)(using WebContext) =
-    layout("play", embedJsUnsafeLoadThen(s"""LichessDgt.playPage("${token.plain.value}")"""))(
+    layout("play", s"'${token.plain.value}'".some)(
       div(id := "dgt-play-zone")(pre(id := "dgt-play-zone-log")),
       div(cls := "dgt__play__help")(
         h2(iconTag(licon.InfoCircle, "If a move is not detected")),
@@ -84,7 +84,7 @@ object dgt:
     )
 
   def config(token: Option[lila.oauth.AccessToken])(using WebContext) =
-    layout("config", embedJsUnsafeLoadThen("LichessDgt.configPage()"))(
+    layout("config")(
       div(cls := "account")(
         h1(cls := "box__top")("DGT - configure"),
         form(action := routes.DgtCtrl.generateToken, method := "post")(
@@ -211,10 +211,10 @@ object dgt:
       }.toList
     )
 
-  private def layout(path: String, jsCall: Frag = emptyFrag)(body: Modifier*)(using WebContext) =
+  private def layout(path: String, token: Option[String] = None)(body: Modifier*)(using WebContext) =
     views.html.base.layout(
       moreCss = cssTag("dgt"),
-      moreJs = frag(jsModule("dgt"), jsCall),
+      moreJs = token.fold(jsModuleInit("dgt"))(jsModuleInit("dgt", _)),
       title = "Play with a DGT board",
       csp = defaultCsp.withAnyWs.some
     )(

diff --git a/app/views/event.scala b/app/views/event.scala
@@ -51,7 +51,7 @@ object event:
     views.html.base.layout(
       title = e.title,
       moreCss = cssTag("event"),
-      moreJs = jsTag("event-countdown.js")
+      moreJs = iifeModule("javascripts/event-countdown.js")
     ) {
       main(cls := "page-small event box box-pad")(
         boxTop(

diff --git a/app/views/game/importGame.scala b/app/views/game/importGame.scala
@@ -16,7 +16,7 @@ object importGame:
     views.html.base.layout(
       title = trans.importGame.txt(),
       moreCss = cssTag("importer"),
-      moreJs = jsTag("importer.js"),
+      moreJs = iifeModule("javascripts/importer.js"),
       openGraph = lila.app.ui
         .OpenGraph(
           title = "Paste PGN chess game",