feat: upgrade React to 18.3.1 (#80)

Co-authored-by: Jakub Sobolewski <jakub.sobolewski@appsilon.com>

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: shiny.react
 Title: Tools for Using React in Shiny
-Version: 0.3.0
+Version: 0.4.0
 Authors@R:
   c(
     person("Kamil", "Żyła", role = c("aut", "cre"), email = "opensource+kamil@appsilon.com"),
@@ -14,7 +14,7 @@ Description:
 License: LGPL (>= 3)
 Encoding: UTF-8
 Roxygen: list(markdown = TRUE)
-RoxygenNote: 7.2.3
+RoxygenNote: 7.3.1
 VignetteBuilder: knitr
 Imports:
   glue,
@@ -23,7 +23,8 @@ Imports:
   logger,
   purrr,
   rlang,
-  shiny
+  shiny,
+  stringi
 Suggests:
   chromote,
   covr,

R/dependencies.R

@@ -46,8 +46,8 @@ reactDependency <- function(useCdn = FALSE) {
     glue::glue("react-dom.{fileVersionInfix}.js")
   )
   cdnPaths <- c(
-    glue::glue("react@17.0.1/umd/react.{fileVersionInfix}.js"),
-    glue::glue("react-dom@17.0.1/umd/react-dom.{fileVersionInfix}.js")
+    glue::glue("react@{reactVersion()}/umd/react.{fileVersionInfix}.js"),
+    glue::glue("react-dom@{reactVersion()}/umd/react-dom.{fileVersionInfix}.js")
   )
 
   depSources <- if (useCdn) {
@@ -69,7 +69,33 @@ reactDependency <- function(useCdn = FALSE) {
 
 #' @keywords internal
 reactVersion <- function() {
-  "17.0.1"
+  "18.3.1"
+}
+
+#' Upgrade React dependencies files
+#'
+#' It downloads the React and React DOM files from the UNPKG CDN and saves
+#' them as assets of the package for local sourcing of React dependencies.
+#'
+#' Update the version of React by changing the `reactVersion` function.
+#'
+#' For React versions > 19 see the new upgrade guide:
+#' https://react.dev/blog/2024/04/25/react-19-upgrade-guide#umd-builds-removed
+#' @noRd
+upgradeReact <- function(version = reactVersion()) {
+  cdnPaths <- c(
+    glue::glue("https://www.unpkg.com/react@{version}/umd/react.development.js"),
+    glue::glue("https://www.unpkg.com/react@{version}/umd/react.production.min.js"),
+    glue::glue("https://www.unpkg.com/react-dom@{version}/umd/react-dom.development.js"),
+    glue::glue("https://www.unpkg.com/react-dom@{version}/umd/react-dom.production.min.js")
+  )
+  lapply(cdnPaths, function(path) {
+    utils::download.file(
+      url = path,
+      destfile = file.path("inst/www/react", basename(path)),
+      mode = "w"
+    )
+  })
 }
 
 allShinyReactDependencies <- function() {

R/utilities.R

@@ -35,11 +35,17 @@ reactDataTag <- function(data) {
 }
 
 reactContainer <- function(..., data = NULL) {
-  tag <- htmltools::div(class = "react-container", allShinyReactDependencies(), ...)
+  id <- stringi::stri_rand_strings(1, 20, "[a-z]")
+  tag <- htmltools::div(
+    class = "react-container",
+    `data-react-id` = id,
+    allShinyReactDependencies(),
+    ...
+  )
   if (!is.null(data)) {
     tag <- htmltools::tagAppendChildren(tag,
       reactDataTag(data),
-      htmltools::tags$script("jsmodule['@/shiny.react'].findAndRenderReactData()")
+      htmltools::tags$script(glue::glue("jsmodule['@/shiny.react'].findAndRenderReactData('{id}')"))
     )
   }
   structure(tag, reactData = data)