[WIP] Support React Refresh

bin/ci

@@ -40,6 +40,7 @@ echo
 rm -rf */target/scala-*/{,test-}classes
 cmd=(
   sbt
+    -DCI=1
     -J-Xmx3G
     -J-XX:+UseG1GC
     ++$SCALA_VER

library/aliases.sbt

@@ -1,11 +1,17 @@
-addCommandAlias("CB", "project coreBundleCallback")
-addCommandAlias("CE", "project coreBundleCatsEffect")
-addCommandAlias("CG", "project coreGeneric")
-addCommandAlias("E",  "project extra")
-addCommandAlias("FM", "project facadeMain")
-addCommandAlias("FT", "project facadeTest")
-addCommandAlias("GH", "project ghpages")
-addCommandAlias("M2", "project extraExtMonocle2")
-addCommandAlias("M3", "project extraExtMonocle3")
-addCommandAlias("TS", "project tests")
-addCommandAlias("TU", "project testUtil")
+addCommandAlias("CB",  "project coreBundleCallback")
+addCommandAlias("CE",  "project coreBundleCatsEffect")
+addCommandAlias("CG",  "project coreGeneric")
+addCommandAlias("E",   "project extra")
+addCommandAlias("FM",  "project facadeMain")
+addCommandAlias("FT",  "project facadeTest")
+addCommandAlias("GH",  "project ghpages")
+addCommandAlias("M2",  "project extraExtMonocle2")
+addCommandAlias("M3",  "project extraExtMonocle3")
+addCommandAlias("TE",  "project testEmissions")
+addCommandAlias("TEJ", "project testEmissionsJS")
+addCommandAlias("TT",  "project tests")
+addCommandAlias("TU",  "project testUtil")
+
+addCommandAlias("tt",  "tests/test")
+addCommandAlias("te",  "testEmissions/test")
+addCommandAlias("cte", "testEmissionsJS/clean;testEmissions/test")

library/build.sbt

@@ -23,9 +23,11 @@ val ghpages               = ScalaJsReact.ghpages
 val ghpagesMacros         = ScalaJsReact.ghpagesMacros
 val root                  = ScalaJsReact.root
 val scalafixRules         = ScalaJsReact.scalafixRules
+val testEmissions         = ScalaJsReact.testEmissions
+val testEmissionsJS       = ScalaJsReact.testEmissionsJS
 val tests                 = ScalaJsReact.tests
-val testUtilMacros        = ScalaJsReact.testUtilMacros
 val testUtil              = ScalaJsReact.testUtil
+val testUtilMacros        = ScalaJsReact.testUtilMacros
 val util                  = ScalaJsReact.util
 val utilCatsEffect        = ScalaJsReact.utilCatsEffect
 val utilDummyDefaults     = ScalaJsReact.utilDummyDefaults

library/project/Build.scala

@@ -1,6 +1,7 @@
 import sbt._
 import sbt.Keys._
 import org.scalajs.jsdependencies.sbtplugin.JSDependenciesPlugin.autoImport._
+import org.scalajs.linker.interface.{ModuleInitializer, ModuleSplitStyle}
 import org.scalajs.sbtplugin.ScalaJSPlugin
 import org.scalajs.sbtplugin.ScalaJSPlugin.autoImport._
 import scalafix.sbt.BuildInfo.{scalafixVersion => ScalafixVer}
@@ -35,20 +36,25 @@ object ScalaJsReact {
       ghpages,
       ghpagesMacros,
       scalafixRules,
+      testEmissions,
+      testEmissionsJS,
       tests,
-      testUtilMacros,
       testUtil,
+      testUtilMacros,
       util,
       utilCatsEffect,
       utilDummyDefaults,
       utilFallbacks,
     )
 
-  def commonSettings: PE =
-    _.enablePlugins(ScalaJSPlugin, ScalafixPlugin)
+  def commonSettingsCross: PE =
+    _.enablePlugins(ScalafixPlugin)
       .dependsOn(scalafixRules % ScalafixConfig)
       .configure(commonSettingsWithoutPlugins)
 
+  def commonSettings: PE =
+    _.enablePlugins(ScalaJSPlugin).configure(commonSettingsCross)
+
   def shimDummyDefaults: PE =
     _.dependsOn(utilDummyDefaults % Provided)
 
@@ -209,6 +215,51 @@ object ScalaJsReact {
     )
     .configure(conditionallyDisable) // keep this last
 
+  lazy val testEmissions = project
+    .in(file("testEmissions/jvm"))
+    .configure(commonSettingsCross, preventPublication, utestSettingsCross)
+    .settings(
+      libraryDependencies += Dep.microlibsUtils.value,
+      Test / fork := true,
+      Test / javaOptions ++= {
+        val jsOutputDir = (testEmissionsJS / Compile / fastLinkJS / scalaJSLinkerOutputDirectory).value
+        val scalaVer    = scalaVersion.value
+        val tempDir     = (Test / classDirectory).value
+        val testResDir  = (Test / resourceDirectory).value
+        val testRootDir = (Test / sourceDirectory).value
+        Seq(
+          s"-DCI=${if (inCI) "1" else "0"}",
+          s"-DjsOutputDir=${jsOutputDir.absolutePath}",
+          s"-DscalaVer=$scalaVer",
+          s"-DtempDir=${tempDir.absolutePath}",
+          s"-DtestResDir=${testResDir.absolutePath}",
+          s"-DtestRootDir=${testRootDir.absolutePath}",
+        )
+      },
+      Test / test     := (Test / test    ).dependsOn(testEmissionsJS / Compile / fastLinkJS).value,
+      Test / testOnly := (Test / testOnly).dependsOn(testEmissionsJS / Compile / fastLinkJS).evaluated,
+    )
+
+  lazy val testEmissionsJS = project
+    .in(file("testEmissions/js"))
+    .configure(commonSettings, preventPublication, hasNoTests)
+    .dependsOn(coreBundleCallback)
+    .settings(
+      Compile / scalaJSLinkerConfig ~= { _
+        .withModuleKind(ModuleKind.ESModule)
+        .withModuleSplitStyle(ModuleSplitStyle.SmallestModules)
+        .withSourceMap(false)
+        // .withESFeatures(_.withESVersion(ESVersion.ES2021))
+        // .withSemantics(_
+        //   .withArrayIndexOutOfBounds(CheckedBehavior.Unchecked)
+        //   .withAsInstanceOfs(CheckedBehavior.Unchecked)
+        //   .withProductionMode(true)
+        // )
+      },
+      Compile / scalaJSModuleInitializers +=
+        ModuleInitializer.mainMethod("japgolly.scalajs.react.test.emissions.Main", "main")
+    )
+
   lazy val tests = project
     .dependsOn(testUtil, coreExtCatsEffect, extraExtMonocle3)
     .dependsOn(coreBundleCallback) // Low priority

library/project/Dependencies.scala

@@ -47,6 +47,7 @@ object Dependencies {
     val microlibsCompileTime = Def.setting("com.github.japgolly.microlibs" %%% "compile-time"                            % Ver.microlibs)
     val microlibsTestUtil    = Def.setting("com.github.japgolly.microlibs" %%% "test-util"                               % Ver.microlibs)
     val microlibsTypes       = Def.setting("com.github.japgolly.microlibs" %%% "types"                                   % Ver.microlibs)
+    val microlibsUtils       = Def.setting("com.github.japgolly.microlibs" %%% "utils"                       % Ver.microlibs)
     val monocle2             = Def.setting("com.github.julien-truffaut"    %%% "monocle-core"                            % Ver.monocle2 cross CrossVersion.for3Use2_13 excludeAll(ExclusionRule(organization = "org.typelevel")))
     val monocle3             = Def.setting("dev.optics"                    %%% "monocle-core"                            % Ver.monocle3)
     val nyayaGen             = Def.setting("com.github.japgolly.nyaya"     %%% "nyaya-gen"                               % Ver.nyaya)

library/project/Lib.scala

@@ -14,6 +14,12 @@ object Lib {
 
   val ghProject = "scalajs-react"
 
+  private def readConfigVar(name: String): String =
+    Option(System.getProperty(name)).orElse(Option(System.getenv(name)))
+      .fold("")(_.trim.toLowerCase)
+
+  val inCI = readConfigVar("CI") == "1"
+
   def scalacCommonFlags: Seq[String] = Seq(
     "-deprecation",
     "-feature",
@@ -113,14 +119,24 @@ object Lib {
   def preventPublication: PE =
     _.settings(publish / skip := true)
 
+  def utestSettingsCross(scope: Configuration): PE =
+    _.settings(
+      scope / scalacOptions ++= {
+        val isScala2 = scalaVersion.value.startsWith("2")
+        if (isScala2) Seq("-Wconf:msg=copyArrayToImmutableIndexedSeq:s") else Seq()
+      },
+      libraryDependencies += Dep.utest.value % scope,
+      libraryDependencies += Dep.microlibsTestUtil.value % scope,
+      testFrameworks      += new TestFramework("utest.runner.Framework"))
+
+  def utestSettingsCross: PE =
+    utestSettingsCross(Test)
+
   def utestSettings(scope: Configuration): PE =
-    _.configure(InBrowserTesting.js)
+    _.configure(InBrowserTesting.js, utestSettingsCross(scope))
       .settings(
         jsEnv                := new JSDOMNodeJSEnv,
-        Test / scalacOptions += "-language:reflectiveCalls",
-        libraryDependencies  += Dep.utest.value % scope,
-        libraryDependencies  += Dep.microlibsTestUtil.value % scope,
-        testFrameworks       += new TestFramework("utest.runner.Framework"))
+        Test / scalacOptions += "-language:reflectiveCalls")
 
   def utestSettings: PE =
     utestSettings(Test)

library/testEmissions/js/src/main/scala/japgolly/scalajs/react/test/emissions/Main.scala

@@ -0,0 +1,20 @@
+package japgolly.scalajs.react.test.emissions
+
+import japgolly.scalajs.react._
+import japgolly.scalajs.react.vdom.html_<^._
+import org.scalajs.dom
+
+object Main {
+
+  def main(): Unit = {
+    val app  = Component()
+    val cont = dom.document.getElementById("root")
+    app.renderIntoDOM(cont)
+  }
+
+  private val Component = ScalaFnComponent[Unit] { _ =>
+    <.div(
+      UseState.Component(),
+    )
+  }
+}

library/testEmissions/js/src/main/scala/japgolly/scalajs/react/test/emissions/UseState.scala

@@ -0,0 +1,16 @@
+package japgolly.scalajs.react.test.emissions
+
+import japgolly.scalajs.react._
+import japgolly.scalajs.react.vdom.html_<^._
+
+object UseState {
+
+  val Component = ScalaFnComponent.withHooks[Unit]
+    .useState(123)
+    .render { (_, s) =>
+      <.button(
+        "Count is ", s.value,
+        ^.onClick --> s.modState(_ + 1),
+      )
+    }
+}

library/testEmissions/jvm/src/test/node/.gitignore

@@ -0,0 +1 @@
+node_modules

library/testEmissions/jvm/src/test/node/babel.dev.json

@@ -0,0 +1,6 @@
+{
+  "presets": [],
+  "plugins": [
+    "react-refresh/cjs/react-refresh-babel.development"
+  ]
+}

library/testEmissions/jvm/src/test/node/babel.norm.json

@@ -0,0 +1,5 @@
+{
+  "comments": false,
+  "presets": [],
+  "plugins": []
+}

library/testEmissions/jvm/src/test/node/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "scalajs_react_testing",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.5",
+    "react-refresh": "^0.11.0"
+  }
+}

library/testEmissions/jvm/src/test/resources/rr-js/demo-in.js

@@ -0,0 +1,16 @@
+import React, { useState, useEffect } from 'react'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  useEffect(() => {
+    document.title = `You clicked ${count} times`;
+  });
+
+  return React.createElement("button", {
+    type: "button",
+    onClick: () => setCount(count => count + 1)
+  }, "count is: ", count);
+}
+
+export default App

library/testEmissions/jvm/src/test/resources/rr-js/demo-out.js

@@ -0,0 +1,25 @@
+var _s = $RefreshSig$();
+
+import React, { useState, useEffect } from 'react';
+
+function App() {
+  _s();
+
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    document.title = `You clicked ${count} times`;
+  });
+  return React.createElement("button", {
+    type: "button",
+    onClick: () => setCount(count => count + 1)
+  }, "count is: ", count);
+}
+
+_s(App, "/xL7qdScToREtqzbt5GZ1kHtYjQ=");
+
+_c = App;
+export default App;
+
+var _c;
+
+$RefreshReg$(_c, "App");

library/testEmissions/jvm/src/test/resources/sjr/UseState-out2.js

@@ -0,0 +1,37 @@
+function $c_Lsjr_test_emissions_UseState$() {
+  this.Lsjr_test_emissions_UseState$__f_Component = null;
+  $n_Lsjr_test_emissions_UseState$ = this;
+  $j_sjr_package$.$m_Lsjr_package$();
+  var this$4 = $j_sjr_hooks_HookComponentBuilder$.$m_Lsjr_hooks_HookComponentBuilder$().apply__Lsjr_hooks_HookComponentBuilder$ComponentP$First();
+  var initialState = new $j_AnonFunction0.$c_sjsr_AnonFunction0(() => 123);
+  var step = new $j_sjr_hooks_HookComponentBuilder$ComponentP$FirstStep.$c_Lsjr_hooks_HookComponentBuilder$ComponentP$FirstStep();
+  var this$18 = $j_sjr_hooks_Api$SecondaryWithRender.$as_Lsjr_hooks_Api$SecondaryWithRender($j_sjr_hooks_Api$Primary.$f_Lsjr_hooks_Api$Primary__useState__F0__Lsjr_hooks_Api$AbstractStep__O(this$4, initialState, step));
+  var f = new $j_AnonFunction2.$c_sjsr_AnonFunction2((x$1$2, s$2) => {
+    $j_java_lang_Object.$as_jl_Void(x$1$2);
+    var s = $j_sjr_hooks_Hooks$UseStateF.$as_Lsjr_hooks_Hooks$UseStateF(s$2);
+    var $$x2 = $j_sjr_vdom_HtmlTagOf$.$m_Lsjr_vdom_HtmlTagOf$();
+    $j_sjr_vdom_html_$.$m_Lsjr_vdom_html＿$();
+    $j_sjr_vdom_Exports$.$m_Lsjr_vdom_Exports$();
+    $j_sjr_vdom_html_$.$m_Lsjr_vdom_html＿$();
+    $j_sjr_vdom_VdomNode$.$m_Lsjr_vdom_VdomNode$();
+    var $$x1 = new $j_sjr_vdom_VdomNode$$anon$1.$c_Lsjr_vdom_VdomNode$$anon$1("Count is ");
+    $j_sjr_vdom_html_$.$m_Lsjr_vdom_html＿$();
+    var v = $j_java_lang_Object.$uI(s.Lsjr_hooks_Hooks$UseStateF$$anon$2__f_raw[0]);
+    $j_sjr_vdom_VdomNode$.$m_Lsjr_vdom_VdomNode$();
+    var array = [$$x1, new $j_sjr_vdom_VdomNode$$anon$1.$c_Lsjr_vdom_VdomNode$$anon$1(v), $j_sjr_vdom_html_$.$m_Lsjr_vdom_html＿$().Lsjr_vdom_html＿$__f_$up.Lsjr_vdom_HtmlAttrAndStyles$__f_onClick.$minus$minus$greater__F0__F1__Lsjr_vdom_TagMod(new $j_AnonFunction0.$c_sjsr_AnonFunction0((s$1 => () => {
+      $j_sjr_Reusable$.$m_Lsjr_Reusable$();
+      var r = $j_sjr_hooks_Hooks$UseStateF.$f_Lsjr_hooks_Hooks$UseStateF__modState__Lsjr_Reusable(s$1);
+      return new $j_sjr_callback_CallbackTo.$c_Lsjr_callback_CallbackTo($j_sjr_callback_CallbackTo.$as_Lsjr_callback_CallbackTo($j_scala_Function1.$as_F1(r.value__O()).apply__O__O(new $j_scala_Function1.$c_sjsr_AnonFunction1(x$2$2 => {
+        var x$2 = $j_java_lang_Object.$uI(x$2$2);
+        return 1 + x$2 | 0;
+      }))).Lsjr_callback_CallbackTo__f_japgolly$scalajs$react$callback$CallbackTo$$trampoline);
+    })(s)), $j_sjr_vdom_Attr$EventCallback$.$m_Lsjr_vdom_Attr$EventCallback$().Lsjr_vdom_Attr$EventCallback$__f_defaultSync)];
+    return $$x2.apply$extension__T__sci_Seq__Lsjr_vdom_TagOf("button", new $j_WrappedVarArgs.$c_sjsr_WrappedVarArgs(array));
+  });
+  var this$17 = $j_sjr_hooks_HookComponentBuilder$ComponentP$SubsequentStep$.$m_Lsjr_hooks_HookComponentBuilder$ComponentP$SubsequentStep$();
+  var step$1 = new $j_sjr_hooks_ComponentP_SubsequentSteps$$anon$1.$c_Lsjr_hooks_ComponentP＿SubsequentSteps$$anon$1(this$17);
+  var s$3 = $j_sjr_CtorType$Summoner$.$m_Lsjr_CtorType$Summoner$().summonN__Lsjr_internal_Singleton__Lsjr_CtorType$Summoner($j_sjr_internal_Singleton$.$m_Lsjr_internal_Singleton$().Lsjr_internal_Singleton$__f_BoxUnit);
+  this.Lsjr_test_emissions_UseState$__f_Component = $j_sjr_hooks_Api$SecondaryWithRender.$f_Lsjr_hooks_Api$SecondaryWithRender__render__O__Lsjr_hooks_Api$SubsequentStep__Lsjr_CtorType$Summoner__Lsjr_component_JsBaseComponentTemplate$ComponentWithRoot(this$18, f, step$1, s$3);
+}
+
+export { $c_Lsjr_test_emissions_UseState$ };

library/testEmissions/jvm/src/test/resources/sjr/UseState-out3.js

@@ -0,0 +1,40 @@
+function $c_Lsjr_test_emissions_UseState$() {
+  this.Lsjr_test_emissions_UseState$__f_Component = null;
+  $n_Lsjr_test_emissions_UseState$ = this;
+  $j_sjr_package$.$m_Lsjr_package$();
+  var this$4 = $j_sjr_hooks_HookComponentBuilder$.$m_Lsjr_hooks_HookComponentBuilder$().apply__Lsjr_hooks_HookComponentBuilder$ComponentP$First();
+  var initialState = new $j_AnonFunction0.$c_sjsr_AnonFunction0(() => 123);
+  var step = new $j_sjr_hooks_HookComponentBuilder$ComponentP$FirstStep.$c_Lsjr_hooks_HookComponentBuilder$ComponentP$FirstStep();
+  var this$16 = $j_sjr_hooks_Api$SecondaryWithRender.$as_Lsjr_hooks_Api$SecondaryWithRender($j_sjr_hooks_Api$Primary.$f_Lsjr_hooks_Api$Primary__useState__F0__Lsjr_hooks_Api$AbstractStep__O(this$4, initialState, step));
+  var f = new $j_AnonFunction2.$c_sjsr_AnonFunction2((_$1, s) => {
+    $j_java_lang_Object.$as_jl_Void(_$1);
+    var s$1 = $j_sjr_hooks_Hooks$UseStateF.$as_Lsjr_hooks_Hooks$UseStateF(s);
+    var this$14 = $j_sjr_vdom_HtmlTagOf$.$m_Lsjr_vdom_HtmlTagOf$();
+    $j_sjr_vdom_html_$.$m_Lsjr_vdom_html＿$();
+    $j_sjr_vdom_Exports$.$m_Lsjr_vdom_Exports$();
+    var self = "button";
+    var $$x2 = $j_java_lang_Character$.$m_sr_ScalaRunTime$();
+    $j_sjr_vdom_html_$.$m_Lsjr_vdom_html＿$();
+    $j_sjr_vdom_VdomNode$.$m_Lsjr_vdom_VdomNode$();
+    var $$x1 = new $j_sjr_vdom_VdomNode$$anon$1.$c_Lsjr_vdom_VdomNode$$anon$1("Count is ");
+    $j_sjr_vdom_html_$.$m_Lsjr_vdom_html＿$();
+    var v = $j_java_lang_Object.$uI(s$1.Lsjr_hooks_Hooks$$anon$2__f_raw[0]);
+    $j_sjr_vdom_VdomNode$.$m_Lsjr_vdom_VdomNode$();
+    var xs = $$x2.wrapRefArray__AO__sci_ArraySeq(new ($j_sjr_vdom_TagMod.$d_Lsjr_vdom_TagMod.getArrayOf().constr)([$$x1, new $j_sjr_vdom_VdomNode$$anon$1.$c_Lsjr_vdom_VdomNode$$anon$1(v), $j_sjr_vdom_html_$.$m_Lsjr_vdom_html＿$().Lsjr_vdom_html＿$__f_$up.Lsjr_vdom_HtmlAttrAndStyles$__f_onClick.$minus$minus$greater__F0__F1__Lsjr_vdom_TagMod(new $j_AnonFunction0.$c_sjsr_AnonFunction0((s$2 => () => {
+      $j_sjr_Reusable$.$m_Lsjr_Reusable$();
+      var r = $j_sjr_hooks_Hooks$UseStateF.$f_Lsjr_hooks_Hooks$UseStateF__modState__Lsjr_Reusable(s$2);
+      var ev$1 = $j_scala_Function1.$as_F1(r.value__O()).apply__O__O(new $j_scala_Function1.$c_sjsr_AnonFunction1(_$2 => {
+        var _$2$1 = $j_java_lang_Object.$uI(_$2);
+
+        return 1 + _$2$1 | 0;
+      }));
+      return new $j_sjr_callback_CallbackTo.$c_Lsjr_callback_CallbackTo(ev$1 === null ? null : $j_sjr_callback_CallbackTo.$as_Lsjr_callback_CallbackTo(ev$1).Lsjr_callback_CallbackTo__f_trampoline);
+    })(s$1)), $j_sjr_vdom_Attr$EventCallback$.$m_Lsjr_vdom_Attr$EventCallback$().Lsjr_vdom_Attr$EventCallback$__f_defaultSync)]));
+    return $j_sjr_vdom_TagLite.$f_Lsjr_vdom_TagLite__apply__T__sci_Seq__Lsjr_vdom_TagOf(this$14, self, xs);
+  });
+  var step$1 = new $j_sjr_hooks_ComponentP_SubsequentSteps$$anon$1.$c_Lsjr_hooks_ComponentP＿SubsequentSteps$$anon$1();
+  var s$3 = $j_sjr_CtorType$Summoner$.$m_Lsjr_CtorType$Summoner$().summonN__Lsjr_internal_Singleton__Lsjr_CtorType$Summoner($j_sjr_internal_Singleton$.$m_Lsjr_internal_Singleton$().Lsjr_internal_Singleton$__f_BoxUnit);
+  this.Lsjr_test_emissions_UseState$__f_Component = $j_sjr_hooks_Api$SecondaryWithRender.$f_Lsjr_hooks_Api$SecondaryWithRender__render__O__Lsjr_hooks_Api$SubsequentStep__Lsjr_CtorType$Summoner__Lsjr_component_JsBaseComponentTemplate$ComponentWithRoot(this$16, f, step$1, s$3);
+}
+
+export { $c_Lsjr_test_emissions_UseState$ };