Merge pull request #1068 from japgolly/topic/react18

React 18 support

Author: japgolly

.envrc

@@ -0,0 +1,3 @@
+use flake
+layout node
+eval "$shellHook" 

.github/workflows/release.yml

@@ -13,7 +13,7 @@ jobs:
         include:
           - java: 14
             scala: 2
-          - java: 8
+          - java: 11
             scala: 3
     name: Scala v${{ matrix.scala }} / Java v${{ matrix.java }}
     steps:

.gitignore

@@ -17,4 +17,4 @@
 metals.sbt
 node_modules/
 target
-.direnv/
+.direnv/

README.md

@@ -20,6 +20,7 @@ Includes a router, testing utils, performance utils, more.
   - [Modules](doc/MODULES.md)
   - [VDOM](doc/VDOM.md)
   - [Hooks](doc/HOOKS.md)
+  - [Hooks via builder](doc/HOOKS_BUILDER.md)
   - [Refs](doc/REFS.md)
   - [IDE support](doc/IDE.md)
   - [The `Callback` class](doc/CALLBACK.md)
@@ -71,7 +72,7 @@ Includes a router, testing utils, performance utils, more.
   * [scastie](https://github.com/scalacenter/scastie) - An interactive playground for Scala [https://scastie.scala-lang.org](https://scastie.scala-lang.org)
 
 ##### Requirements:
-* React ≥ 17
+* React ≥ 18
 * Scala ≥ 2.13
 * Scala.JS ≥ 1.10
 

bin/update_react_version

@@ -1,10 +1,14 @@
 #!/bin/bash
-cd "$(dirname "$0")/../library" || exit 1
+cd "$(dirname "$0")/.." || exit 1
 
 [ $# -ne 1 ] && echo "Usage: $0 <version>" && exit 1
 ver="$1"
 
 perl -pi -e 's/(?<![a-zA-Z0-9_-])[1-3]\d\.\d+\.\d+(?![a-zA-Z0-9_-])/'"$ver"'/g' \
-      {doc,project}/*.* build.sbt *.md gh-pages/*.html \
+      *.md \
+      doc/*.md \
+      library/build.sbt \
+      library/ghpages/html/*.html \
+      library/project/*.* \
   && git diff -U0
 

doc/CONFIG.md

@@ -6,11 +6,10 @@
   * [`.component.names.all`](#componentnamesall)
   * [`.component.names.implicit`](#componentnamesimplicit)
   * [`.config.class` *(Scala 3 only)*](#configclass-scala-3-only)
-  * [`.test.warnings.react`](#testwarningsreact)
 * Runtime Settings *(development-mode only)*
   * [Usage](#runtime-settings-usage)
   * [`Reusability.disableGloballyInDev()`](#reusabilitydisablegloballyindev)
-  * [`ReusabilityOverlay.overrideGloballyInDev()`](#reusabilityoverlayoverridegloballyindev)
+  * ~~[`ReusabilityOverlay.overrideGloballyInDev()`](#reusabilityoverlayoverridegloballyindev)~~
   * [Custom `ReusabilityOverride`](#custom-reusabilityoverride)
 
 
@@ -26,6 +25,16 @@ If this is important to you or your organisation, feel free to reach out and spo
 
 # Compile-Time Settings: Usage
 
+First add this to your sbt:
+
+```scala
+scalacOptions ++= // Required since sbt 1.6.0
+  sys.props.iterator
+    .filter(_._1.contains("japgolly"))
+    .map(x => s"-D${x._1}=${x._2}")
+    .toSeq
+```
+
 Currently, you have to specify compile-time settings to `sbt` directly when you start it.
 
 Examples:
@@ -161,60 +170,6 @@ object CustomConfig extends ScalaJsReactConfig.Defaults {
 }
 ```
 
-
-# `.test.warnings.react`
-
-When using `ReactTestUtils`, this setting can be used to catch React warnings and turn them into exceptions.
-
-### Usage:
-
-```
-sbt -Djapgolly.scalajs.react.test.warnings.react=warn|fatal
-```
-
-| Setting | Outcome |
-| -- | -- |
-| `warn` (default) | Print warnings and move on |
-| `fatal`  | Throw warnings as exceptions |
-
-### Example:
-
-```
-sbt -Djapgolly.scalajs.react.test.warnings.react=fatal
-```
-
-```scala
-package com.example
-
-import japgolly.scalajs.react._
-import japgolly.scalajs.react.test._
-import japgolly.scalajs.react.vdom.html_<^._
-import utest._
-
-object ExampleTest extends TestSuite {
-
-  override def tests = Tests {
-    "example" - {
-      val comp = ScalaFnComponent[Int](i => <.p(<.td(s"i = $i")))
-      ReactTestUtils.withRenderedIntoBody(comp(123)).withParent { m =>
-        val html = m.outerHTML
-        assert(html == "<p><td>i = 123</td></p>")
-      }
-    }
-  }
-}
-```
-
-Running the above test will fail with this error message:
-
-```
-scala.scalajs.js.JavaScriptException: Warning: validateDOMNesting(...): <td> cannot appear as a child of <p>.
-  at td
-  at p
-  at $c_sjs_js_Any$.fromFunction1__F1__sjs_js_Function1
-```
-
-
 # Runtime Settings: Usage
 
 Runtime settings are designed for use in development-mode only (`fastOptJS`).
@@ -241,7 +196,8 @@ object Main {
 
     // Start app
     val container = dom.document.getElementById("root")
-    MyApp().renderIntoDOM(container)
+    val root = ReactDOMClient.createRoot(container)
+    root.render(MyApp())
   }
 }
 ```
@@ -255,6 +211,8 @@ This globally disables `Reusability.shouldComponentUpdate` so that it doesn't no
 
 # `ReusabilityOverlay.overrideGloballyInDev()`
 
+**[ReusabilityOverlay has been deprecated in v3 with no replacement — use React's Profiler instead]**
+
 *Note: Runtime settings only affect development-mode (`fastOptJS`) and must be applied before any components are created.*
 
 This makes calls to `Reusability.shouldComponentUpdate` also display a little UI overlay for you to inspect/debug
@@ -293,7 +251,8 @@ object Main {
 
     // Start app
     val container = dom.document.getElementById("root")
-    MyApp().renderIntoDOM(container)
+    val root = ReactDOMClient.createRoot(container)
+    root.render(MyApp())
   }
 }
 ```

doc/CONTEXT.md

@@ -72,7 +72,8 @@ object Content {
   private val component = ScalaComponent
     .builder[Unit]("content")
     .initialState(State())
-    .renderBackend[Backend]
+    .backend(new Backend(_))
+    .renderS(_.backend.render(_))
     .componentDidMount($ ⇒ $.backend.refresh($.state))
     .build
 
@@ -89,7 +90,7 @@ some point calls a page, which wants to display the username. A few things to no
 ```scala
 object AboutPage  {
   case class State()
-  class Backend($ : BackendScope[_, State]) {
+  class Backend($ : BackendScope[Unit, State]) {
     def render(S: State): VdomElement =
       MyGlobalState.ctx.consume { myGlobalState =>
         <.div(s"Hi there${myGlobalState.user.fold("!")(u => s" ${u.username}!")}")
@@ -98,13 +99,14 @@ object AboutPage  {
   private val component = ScalaComponent
     .builder[Unit]("AboutPage")
     .initialState(State())
-    .renderBackend[Backend]
+    .backend(new Backend(_))
+    .renderS(_.backend.render(_))
     .build
 
   def apply(): Unmounted[Unit, State, Backend] = component()
 }
 ```
 
 One additional note: Other parts of the documentation suggest that your router should always be your top level component. While in general that is true,
-I though that moving the provider to a higher level component delineated the responsibilities better, you are welcome to collapse them into a single 
-component. 
+I though that moving the provider to a higher level component delineated the responsibilities better, you are welcome to collapse them into a single
+component.