Update NEWS

Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>
Co-authored-by: Carson Sievert <cpsievert1@gmail.com>

.eslintrc.yml

@@ -35,10 +35,6 @@ rules:
 
   default-case:
     - error
-  indent:
-    - error
-    - 2
-    - SwitchCase: 1
   linebreak-style:
     - error
     - unix

.github/ISSUE_TEMPLATE/question.md

@@ -1,7 +1,7 @@
 ---
 name  : Ask a Question
-about : The issue tracker is not for questions -- please ask questions at https://community.rstudio.com/c/shiny.
+about : The issue tracker is not for questions -- please ask questions at https://forum.posit.co/tags/shiny.
 ---
 
-The issue tracker is not for questions. If you have a question, please feel free to ask it on our community site, at https://community.rstudio.com/c/shiny.
+The issue tracker is not for questions. If you have a question, please feel free to ask it on our community site, at https://forum.posit.co/c/shiny.
 

DESCRIPTION

@@ -91,8 +91,8 @@ Imports:
     withr,
     commonmark (>= 1.7),
     glue (>= 1.3.2),
-    bslib (>= 0.3.0),
-    cachem,
+    bslib (>= 0.6.0),
+    cachem (>= 1.1.0),
     lifecycle (>= 0.2.0)
 Suggests:
     datasets,
@@ -206,7 +206,7 @@ Collate:
     'version_selectize.R'
     'version_strftime.R'
     'viewer.R'
-RoxygenNote: 7.3.1
+RoxygenNote: 7.3.2
 Encoding: UTF-8
 Roxygen: list(markdown = TRUE)
 RdMacros: lifecycle

NAMESPACE

@@ -216,6 +216,7 @@ export(reactiveVal)
 export(reactiveValues)
 export(reactiveValuesToList)
 export(reactlog)
+export(reactlogAddMark)
 export(reactlogReset)
 export(reactlogShow)
 export(registerInputHandler)

NEWS.md

@@ -2,13 +2,24 @@
 
 ## New features and improvements
 
+* The client-side TypeScript code for Shiny has been refactored so that the `Shiny` object is now an instance of class `ShinyClass`. (#4063)
+
+* In TypeScript, the `Shiny` object has a new property `initializedPromise`, which is a Promise-like object that can be `await`ed or chained with `.then()`. This Promise-like object corresponds to the `shiny:sessioninitialized` JavaScript event, but is easier to use because it can be used both before and after the events have occurred. (#4063)
+
 * Added new functions, `useBusyIndicators()` and `busyIndicatorOptions()`, for enabling and customizing busy indication. Busy indicators provide a visual cue to users when the server is busy calculating outputs or otherwise serving requests to the client. When enabled, a spinner is shown on each calculating/recalculating output, and a pulsing banner is shown at the top of the page when the app is otherwise busy. (#4040)
+
 * Output bindings now include the `.recalculating` CSS class when they are first bound, up until the first render. This makes it possible/easier to show progress indication when the output is calculating for the first time. (#4039)
 
+* A new `shiny.client_devmode` option controls client-side devmode features, in particular the client-side error console introduced in shiny 1.8.1, independently of the R-side features of `shiny::devmode()`. This usage is primarily intended for automatic use in Shinylive. (#4073)
+
+* Added function `reactlogAddMark()` to programmatically add _mark_ed locations in the reactlog log without the requirement of keyboard bindings during an idle reactive moment. (#4103)
+
 ## Bug fixes
 
 * `downloadButton()` and `downloadLink()` are now disabled up until they are fully initialized. This prevents the user from clicking the button/link before the download is ready. (#4041)
+
 * Output bindings that are removed, invalidated, then inserted again (while invalidated) now correctly include the `.recalculating` CSS class. (#4039)
+
 * Fixed a recent issue with `uiOutput()` and `conditionalPanel()` not properly lower opacity when recalculation (in a Bootstrap 5 context). (#4027)
 
 # shiny 1.8.1.1
@@ -23,7 +34,7 @@
 
 * Added a JavaScript error dialog, reporting errors that previously were only discoverable by opening the browser's devtools open. Since this dialog is mainly useful for debugging and development, it must be enabled with `shiny::devmode()`. (#3931)
 
-* `runExamples()` now uses the `{bslib}` package to generate a better looking result. It also gains a `package` argument so that other packages can leverage this same function to run Shiny app examples. For more, see `?runExamples`. (#3963, #4005)
+* `runExample()` now uses the `{bslib}` package to generate a better looking result. It also gains a `package` argument so that other packages can leverage this same function to run Shiny app examples. For more, see `?runExample`. (#3963, #4005)
 
 * Added `onUnhandledError()` to register a function that will be called when an unhandled error occurs in a Shiny app. Note that this handler doesn't stop the error or prevent the session from closing, but it can be used to log the error or to clean up session-specific resources. (thanks @JohnCoene, #3993)
 

R/devmode.R

@@ -128,6 +128,12 @@ in_devmode <- function() {
     !identical(Sys.getenv("TESTTHAT"), "true")
 }
 
+in_client_devmode <- function() {
+  # Client-side devmode enables client-side only dev features without local
+  # devmode. Currently, the main feature is the client-side error console.
+  isTRUE(getOption("shiny.client_devmode", FALSE))
+}
+
 #' @describeIn devmode Temporarily set Shiny Developer Mode and Developer
 #'   message verbosity
 #' @param code Code to execute with the temporary Dev Mode options set

R/graph.R

@@ -1,4 +1,3 @@
-
 # domain is like session
 
 
@@ -20,7 +19,7 @@ reactIdStr <- function(num) {
 #' dependencies and execution in your application.
 #'
 #' To use the reactive log visualizer, start with a fresh R session and
-#' run the command `options(shiny.reactlog=TRUE)`; then launch your
+#' run the command `reactlog::reactlog_enable()`; then launch your
 #' application in the usual way (e.g. using [runApp()]). At
 #' any time you can hit Ctrl+F3 (or for Mac users, Command+F3) in your
 #' web browser to launch the reactive log visualization.
@@ -43,16 +42,20 @@ reactIdStr <- function(num) {
 #' call `reactlogShow()` explicitly.
 #'
 #' For security and performance reasons, do not enable
-#' `shiny.reactlog` in production environments. When the option is
-#' enabled, it's possible for any user of your app to see at least some
-#' of the source code of your reactive expressions and observers.
+#' `options(shiny.reactlog=TRUE)` (or `reactlog::reactlog_enable()`) in
+#' production environments. When the option is enabled, it's possible
+#' for any user of your app to see at least some of the source code of
+#' your reactive expressions and observers. In addition, reactlog
+#' should be considered a memory leak as it will constantly grow and
+#' will never reset until the R session is restarted.
 #'
 #' @name reactlog
 NULL
 
 
-#' @describeIn reactlog Return a list of reactive information.  Can be used in conjunction with
-#'   [reactlog::reactlog_show] to later display the reactlog graph.
+#' @describeIn reactlog Return a list of reactive information.  Can be used in
+#'   conjunction with [reactlog::reactlog_show] to later display the reactlog
+#'   graph.
 #' @export
 reactlog <- function() {
   rLog$asList()
@@ -67,12 +70,34 @@ reactlogShow <- function(time = TRUE) {
   reactlog::reactlog_show(reactlog(), time = time)
 }
 
-#' @describeIn reactlog Resets the entire reactlog stack.  Useful for debugging and removing all prior reactive history.
+#' @describeIn reactlog Resets the entire reactlog stack.  Useful for debugging
+#' and removing all prior reactive history.
 #' @export
 reactlogReset <- function() {
   rLog$reset()
 }
 
+#' @describeIn reactlog Adds "mark" entry into the reactlog stack. This is
+#' useful for programmatically adding a marked entry in the reactlog, rather
+#' than using your keyboard's key combination.
+#'
+#' For example, we can _mark_ the reactlog at the beginning of an
+#' `observeEvent`'s calculation:
+#' ```r
+#' observeEvent(input$my_event_trigger, {
+#'   # Add a mark in the reactlog
+#'   reactlogAddMark()
+#'   # Run your regular event reaction code here...
+#'   ....
+#' })
+#' ```
+#' @param session The Shiny session to assign the mark to. Defaults to the
+#' current session.
+#' @export
+reactlogAddMark <- function(session = getDefaultReactiveDomain()) {
+  rLog$userMark(session)
+}
+
 # called in "/reactlog" middleware
 renderReactlog <- function(sessionToken = NULL, time = TRUE) {
   check_reactlog()
@@ -98,7 +123,6 @@ RLog <- R6Class(
   private = list(
     option = "shiny.reactlog",
     msgOption = "shiny.reactlog.console",
-
     appendEntry = function(domain, logEntry) {
       if (self$isLogging()) {
         sessionToken <- if (is.null(domain)) NULL else domain$token
@@ -113,20 +137,19 @@ RLog <- R6Class(
   public = list(
     msg = "<MessageLogger>",
     logStack = "<Stack>",
-
     noReactIdLabel = "NoCtxReactId",
     noReactId = reactIdStr("NoCtxReactId"),
     dummyReactIdLabel = "DummyReactId",
     dummyReactId = reactIdStr("DummyReactId"),
-
     asList = function() {
       ret <- self$logStack$as_list()
       attr(ret, "version") <- "1"
       ret
     },
-
     ctxIdStr = function(ctxId) {
-      if (is.null(ctxId) || identical(ctxId, "")) return(NULL)
+      if (is.null(ctxId) || identical(ctxId, "")) {
+        return(NULL)
+      }
       paste0("ctx", ctxId)
     },
     namesIdStr = function(reactId) {
@@ -141,7 +164,6 @@ RLog <- R6Class(
     keyIdStr = function(reactId, key) {
       paste0(reactId, "$", key)
     },
-
     valueStr = function(value, n = 200) {
       if (!self$isLogging()) {
         # return a placeholder string to avoid calling str
@@ -151,10 +173,9 @@ RLog <- R6Class(
         # only capture the first level of the object
         utils::capture.output(utils::str(value, max.level = 1))
       })
-      outputTxt <- paste0(output, collapse="\n")
+      outputTxt <- paste0(output, collapse = "\n")
       msg$shortenString(outputTxt, n = n)
     },
-
     initialize = function(rlogOption = "shiny.reactlog", msgOption = "shiny.reactlog.console") {
       private$option <- rlogOption
       private$msgOption <- msgOption
@@ -174,7 +195,6 @@ RLog <- R6Class(
     isLogging = function() {
       isTRUE(getOption(private$option, FALSE))
     },
-
     define = function(reactId, value, label, type, domain) {
       valueStr <- self$valueStr(value)
       if (msg$hasReact(reactId)) {
@@ -205,9 +225,10 @@ RLog <- R6Class(
     defineObserver = function(reactId, label, domain) {
       self$define(reactId, value = NULL, label, "observer", domain)
     },
-
     dependsOn = function(reactId, depOnReactId, ctxId, domain) {
-      if (is.null(reactId)) return()
+      if (is.null(reactId)) {
+        return()
+      }
       ctxId <- ctxIdStr(ctxId)
       msg$log("dependsOn:", msg$reactStr(reactId), " on", msg$reactStr(depOnReactId), msg$ctxStr(ctxId))
       private$appendEntry(domain, list(
@@ -220,7 +241,6 @@ RLog <- R6Class(
     dependsOnKey = function(reactId, depOnReactId, key, ctxId, domain) {
       self$dependsOn(reactId, self$keyIdStr(depOnReactId, key), ctxId, domain)
     },
-
     dependsOnRemove = function(reactId, depOnReactId, ctxId, domain) {
       ctxId <- self$ctxIdStr(ctxId)
       msg$log("dependsOnRemove:", msg$reactStr(reactId), " on", msg$reactStr(depOnReactId), msg$ctxStr(ctxId))
@@ -234,7 +254,6 @@ RLog <- R6Class(
     dependsOnKeyRemove = function(reactId, depOnReactId, key, ctxId, domain) {
       self$dependsOnRemove(reactId, self$keyIdStr(depOnReactId, key), ctxId, domain)
     },
-
     createContext = function(ctxId, label, type, prevCtxId, domain) {
       ctxId <- self$ctxIdStr(ctxId)
       prevCtxId <- self$ctxIdStr(prevCtxId)
@@ -245,10 +264,9 @@ RLog <- R6Class(
         label = msg$shortenString(label),
         type = type,
         prevCtxId = prevCtxId,
-        srcref = as.vector(attr(label, "srcref")), srcfile=attr(label, "srcfile")
+        srcref = as.vector(attr(label, "srcref")), srcfile = attr(label, "srcfile")
       ))
     },
-
     enter = function(reactId, ctxId, type, domain) {
       ctxId <- self$ctxIdStr(ctxId)
       if (identical(type, "isolate")) {
@@ -291,7 +309,6 @@ RLog <- R6Class(
         ))
       }
     },
-
     valueChange = function(reactId, value, domain) {
       valueStr <- self$valueStr(value)
       msg$log("valueChange:", msg$reactStr(reactId), msg$valueStr(valueStr))
@@ -313,8 +330,6 @@ RLog <- R6Class(
     valueChangeKey = function(reactId, key, value, domain) {
       self$valueChange(self$keyIdStr(reactId, key), value, domain)
     },
-
-
     invalidateStart = function(reactId, ctxId, type, domain) {
       ctxId <- self$ctxIdStr(ctxId)
       if (identical(type, "isolate")) {
@@ -357,7 +372,6 @@ RLog <- R6Class(
         ))
       }
     },
-
     invalidateLater = function(reactId, runningCtx, millis, domain) {
       msg$log("invalidateLater: ", millis, "ms", msg$reactStr(reactId), msg$ctxStr(runningCtx))
       private$appendEntry(domain, list(
@@ -367,14 +381,12 @@ RLog <- R6Class(
         millis = millis
       ))
     },
-
     idle = function(domain = NULL) {
       msg$log("idle")
       private$appendEntry(domain, list(
         action = "idle"
       ))
     },
-
     asyncStart = function(domain = NULL) {
       msg$log("asyncStart")
       private$appendEntry(domain, list(
@@ -387,7 +399,6 @@ RLog <- R6Class(
         action = "asyncStop"
       ))
     },
-
     freezeReactiveVal = function(reactId, domain) {
       msg$log("freeze:", msg$reactStr(reactId))
       private$appendEntry(domain, list(
@@ -398,7 +409,6 @@ RLog <- R6Class(
     freezeReactiveKey = function(reactId, key, domain) {
       self$freezeReactiveVal(self$keyIdStr(reactId, key), domain)
     },
-
     thawReactiveVal = function(reactId, domain) {
       msg$log("thaw:", msg$reactStr(reactId))
       private$appendEntry(domain, list(
@@ -409,54 +419,60 @@ RLog <- R6Class(
     thawReactiveKey = function(reactId, key, domain) {
       self$thawReactiveVal(self$keyIdStr(reactId, key), domain)
     },
-
     userMark = function(domain = NULL) {
       msg$log("userMark")
       private$appendEntry(domain, list(
         action = "userMark"
       ))
     }
-
   )
 )
 
-MessageLogger = R6Class(
+MessageLogger <- R6Class(
   "MessageLogger",
   portable = FALSE,
   public = list(
     depth = 0L,
     reactCache = list(),
     option = "shiny.reactlog.console",
-
     initialize = function(option = "shiny.reactlog.console", depth = 0L) {
       if (!missing(depth)) self$depth <- depth
       if (!missing(option)) self$option <- option
     },
-
     isLogging = function() {
       isTRUE(getOption(self$option))
     },
     isNotLogging = function() {
-      ! isTRUE(getOption(self$option))
+      !isTRUE(getOption(self$option))
     },
     depthIncrement = function() {
-      if (self$isNotLogging()) return(NULL)
+      if (self$isNotLogging()) {
+        return(NULL)
+      }
       self$depth <- self$depth + 1L
     },
     depthDecrement = function() {
-      if (self$isNotLogging()) return(NULL)
+      if (self$isNotLogging()) {
+        return(NULL)
+      }
       self$depth <- self$depth - 1L
     },
     hasReact = function(reactId) {
-      if (self$isNotLogging()) return(FALSE)
+      if (self$isNotLogging()) {
+        return(FALSE)
+      }
       !is.null(self$getReact(reactId))
     },
     getReact = function(reactId, force = FALSE) {
-      if (identical(force, FALSE) && self$isNotLogging()) return(NULL)
+      if (identical(force, FALSE) && self$isNotLogging()) {
+        return(NULL)
+      }
       self$reactCache[[reactId]]
     },
     setReact = function(reactObj, force = FALSE) {
-      if (identical(force, FALSE) && self$isNotLogging()) return(NULL)
+      if (identical(force, FALSE) && self$isNotLogging()) {
+        return(NULL)
+      }
       self$reactCache[[reactObj$reactId]] <- reactObj
     },
     shortenString = function(txt, n = 250) {
@@ -475,13 +491,17 @@ MessageLogger = R6Class(
     },
     valueStr = function(valueStr) {
       paste0(
-        " '",  self$shortenString(self$singleLine(valueStr)), "'"
+        " '", self$shortenString(self$singleLine(valueStr)), "'"
       )
     },
     reactStr = function(reactId) {
-      if (self$isNotLogging()) return(NULL)
+      if (self$isNotLogging()) {
+        return(NULL)
+      }
       reactInfo <- self$getReact(reactId)
-      if (is.null(reactInfo)) return(" <UNKNOWN_REACTID>")
+      if (is.null(reactInfo)) {
+        return(" <UNKNOWN_REACTID>")
+      }
       paste0(
         " ", reactInfo$reactId, ":'", self$shortenString(self$singleLine(reactInfo$label)), "'"
       )
@@ -490,11 +510,15 @@ MessageLogger = R6Class(
       self$ctxStr(ctxId = NULL, type = type)
     },
     ctxStr = function(ctxId = NULL, type = NULL) {
-      if (self$isNotLogging()) return(NULL)
+      if (self$isNotLogging()) {
+        return(NULL)
+      }
       self$ctxPrevCtxStr(ctxId = ctxId, prevCtxId = NULL, type = type)
     },
     ctxPrevCtxStr = function(ctxId = NULL, prevCtxId = NULL, type = NULL, preCtxIdTxt = " in ") {
-      if (self$isNotLogging()) return(NULL)
+      if (self$isNotLogging()) {
+        return(NULL)
+      }
       paste0(
         if (!is.null(ctxId)) paste0(preCtxIdTxt, ctxId),
         if (!is.null(prevCtxId)) paste0(" from ", prevCtxId),
@@ -502,7 +526,9 @@ MessageLogger = R6Class(
       )
     },
     log = function(...) {
-      if (self$isNotLogging()) return(NULL)
+      if (self$isNotLogging()) {
+        return(NULL)
+      }
       msg <- paste0(
         paste0(rep("= ", depth), collapse = ""), "- ", paste0(..., collapse = ""),
         collapse = ""

R/input-date.R

@@ -153,6 +153,12 @@ datePickerDependency <- function(theme) {
   )
 }
 
+datePickerSass <- function() {
+  sass::sass_file(
+    system_file(package = "shiny", "www/shared/datepicker/scss/build3.scss")
+  )
+}
+
 datePickerCSS <- function(theme) {
   if (!is_bs_theme(theme)) {
     return(htmlDependency(
@@ -164,10 +170,8 @@ datePickerCSS <- function(theme) {
     ))
   }
 
-  scss_file <- system_file(package = "shiny", "www/shared/datepicker/scss/build3.scss")
-
   bslib::bs_dependency(
-    input = sass::sass_file(scss_file),
+    input = datePickerSass(),
     theme = theme,
     name = "bootstrap-datepicker",
     version = version_bs_date_picker,

R/input-select.R

@@ -241,11 +241,8 @@ selectizeDependencyFunc <- function(theme) {
     return(selectizeStaticDependency(version_selectize))
   }
 
-  selectizeDir <- system_file(package = "shiny", "www/shared/selectize/")
   bs_version <- bslib::theme_version(theme)
-  stylesheet <- file.path(
-    selectizeDir, "scss", paste0("selectize.bootstrap", bs_version, ".scss")
-  )
+
   # It'd be cleaner to ship the JS in a separate, href-based,
   # HTML dependency (which we currently do for other themable widgets),
   # but DT, crosstalk, and maybe other pkgs include selectize JS/CSS
@@ -253,10 +250,11 @@ selectizeDependencyFunc <- function(theme) {
   # name, the JS/CSS would be loaded/included twice, which leads to
   # strange issues, especially since we now include a 3rd party
   # accessibility plugin https://github.com/rstudio/shiny/pull/3153
+  selectizeDir <- system_file(package = "shiny", "www/shared/selectize/")
   script <- file.path(selectizeDir, selectizeScripts())
 
   bslib::bs_dependency(
-    input = sass::sass_file(stylesheet),
+    input = selectizeSass(bs_version),
     theme = theme,
     name = "selectize",
     version = version_selectize,
@@ -265,6 +263,14 @@ selectizeDependencyFunc <- function(theme) {
   )
 }
 
+selectizeSass <- function(bs_version) {
+  selectizeDir <- system_file(package = "shiny", "www/shared/selectize/")
+  stylesheet <- file.path(
+    selectizeDir, "scss", paste0("selectize.bootstrap", bs_version, ".scss")
+  )
+  sass::sass_file(stylesheet)
+}
+
 selectizeStaticDependency <- function(version) {
   htmlDependency(
     "selectize",

R/input-slider.R

@@ -222,6 +222,15 @@ ionRangeSliderDependency <- function() {
   )
 }
 
+ionRangeSliderDependencySass <- function() {
+  list(
+    list(accent = "$component-active-bg"),
+    sass::sass_file(
+      system_file(package = "shiny", "www/shared/ionrangeslider/scss/shiny.scss")
+    )
+  )
+}
+
 ionRangeSliderDependencyCSS <- function(theme) {
   if (!is_bs_theme(theme)) {
     return(htmlDependency(
@@ -234,12 +243,7 @@ ionRangeSliderDependencyCSS <- function(theme) {
   }
 
   bslib::bs_dependency(
-    input = list(
-      list(accent = "$component-active-bg"),
-      sass::sass_file(
-        system_file(package = "shiny", "www/shared/ionrangeslider/scss/shiny.scss")
-      )
-    ),
+    input = ionRangeSliderDependencySass(),
     theme = theme,
     name = "ionRangeSlider",
     version = version_ion_range_slider,

R/shiny-options.R

@@ -151,6 +151,11 @@ getShinyOption <- function(name, default = NULL) {
 # ' \item{shiny.devmode.verbose (defaults to `TRUE`)}{If `TRUE`, will display messages printed
 # '   about which options are being set. See [devmode()] for more details. }
 ### (end not documenting 'shiny.devmode.verbose')
+### start shiny.client_devmode is primarily for niche, internal shinylive usage
+# ' \item{shiny.client_devmode (defaults to `FALSE`)}{If `TRUE`, enables client-
+# '  side devmode features. Currently the primary feature is the client-side
+# '  error console.}
+### end shiny.client_devmode
 #' }
 #'
 #'

R/shinyui.R

@@ -69,7 +69,7 @@ renderPage <- function(ui, showcase=0, testMode=FALSE) {
       )
   }
 
-  if (in_devmode()) {
+  if (in_devmode() || in_client_devmode()) {
     # If we're in dev mode, add a simple script to the head that injects a
     # global variable for the client to use to detect dev mode.
     shiny_deps[[length(shiny_deps) + 1]] <-
@@ -135,6 +135,14 @@ shinyDependencies <- function() {
   )
 }
 
+shinyDependencySass <- function(bs_version) {
+  bootstrap_scss <- paste0("shiny.bootstrap", bs_version, ".scss")
+
+  scss_home <- system_file("www/shared/shiny_scss", package = "shiny")
+  scss_files <- file.path(scss_home, c(bootstrap_scss, "shiny.scss"))
+  lapply(scss_files, sass::sass_file)
+}
+
 shinyDependencyCSS <- function(theme) {
   version <- get_package_version("shiny")
 
@@ -150,14 +158,9 @@ shinyDependencyCSS <- function(theme) {
   }
 
   bs_version <- bslib::theme_version(theme)
-  bootstrap_scss <- paste0("shiny.bootstrap", bs_version, ".scss")
-
-  scss_home <- system_file("www/shared/shiny_scss", package = "shiny")
-  scss_files <- file.path(scss_home, c(bootstrap_scss, "shiny.scss"))
-  scss_files <- lapply(scss_files, sass::sass_file)
 
   bslib::bs_dependency(
-    input = scss_files,
+    input = shinyDependencySass(bs_version),
     theme = theme,
     name = "shiny-sass",
     version = version,

inst/www/shared/busy-indicators/busy-indicators.css

@@ -1,2 +1,2 @@
 /*! shiny 1.8.1.9001 | (c) 2012-2024 RStudio, PBC. | License: GPL-3 | file LICENSE */
-:where([data-shiny-busy-spinners] .recalculating){position:relative}[data-shiny-busy-spinners] .recalculating{opacity:1}[data-shiny-busy-spinners] .recalculating:after{position:absolute;content:"";--_shiny-spinner-url: var(--shiny-spinner-url, url(spinners/ring.svg));--_shiny-spinner-color: var(--shiny-spinner-color, var(--bs-primary, #007bc2));--_shiny-spinner-size: var(--shiny-spinner-size, 32px);--_shiny-spinner-delay: var(--shiny-spinner-delay, 1s);background:var(--_shiny-spinner-color);width:var(--_shiny-spinner-size);height:var(--_shiny-spinner-size);inset:calc(50% - var(--_shiny-spinner-size) / 2);mask-image:var(--_shiny-spinner-url);-webkit-mask-image:var(--_shiny-spinner-url);opacity:0;animation-delay:var(--_shiny-spinner-delay);animation-name:fade-in;animation-duration:.25s}[data-shiny-busy-spinners] .recalculating>*:not(.recalculating){opacity:.2;transition:opacity .25s ease var(--shiny-spinner-delay, 1s)}[data-shiny-busy-spinners] .recalculating.shiny-html-output:after{display:none}[data-shiny-busy-spinners][data-shiny-busy-pulse].shiny-busy:after{--_shiny-pulse-background: var( --shiny-pulse-background, linear-gradient( 120deg, var(--bs-body-bg, #fff), var(--bs-indigo, #4b00c1), var(--bs-purple, #74149c), var(--bs-pink, #bf007f), var(--bs-body-bg, #fff) ) );--_shiny-pulse-height: var(--shiny-pulse-height, 5px);--_shiny-pulse-speed: var(--shiny-pulse-speed, 1.85s);position:fixed;top:0;left:0;height:var(--_shiny-pulse-height);background:var(--_shiny-pulse-background);z-index:9999;animation-name:busy-page-pulse;animation-duration:var(--_shiny-pulse-speed);animation-iteration-count:infinite;animation-timing-function:ease-in-out;content:""}[data-shiny-busy-spinners][data-shiny-busy-pulse].shiny-busy:has(.recalculating):after{display:none}[data-shiny-busy-spinners][data-shiny-busy-pulse].shiny-busy:has(#shiny-disconnected-overlay):after{display:none}[data-shiny-busy-pulse]:not([data-shiny-busy-spinners]).shiny-busy:after{--_shiny-pulse-background: var( --shiny-pulse-background, linear-gradient( 120deg, var(--bs-body-bg, #fff), var(--bs-indigo, #4b00c1), var(--bs-purple, #74149c), var(--bs-pink, #bf007f), var(--bs-body-bg, #fff) ) );--_shiny-pulse-height: var(--shiny-pulse-height, 5px);--_shiny-pulse-speed: var(--shiny-pulse-speed, 1.85s);position:fixed;top:0;left:0;height:var(--_shiny-pulse-height);background:var(--_shiny-pulse-background);z-index:9999;animation-name:busy-page-pulse;animation-duration:var(--_shiny-pulse-speed);animation-iteration-count:infinite;animation-timing-function:ease-in-out;content:""}[data-shiny-busy-pulse]:not([data-shiny-busy-spinners]).shiny-busy:has(#shiny-disconnected-overlay):after{display:none}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes busy-page-pulse{0%{left:-75%;width:75%}50%{left:100%;width:75%}to{left:-75%;width:75%}}
+:where([data-shiny-busy-spinners] .recalculating){position:relative}[data-shiny-busy-spinners] .recalculating{opacity:1}[data-shiny-busy-spinners] .recalculating:after{position:absolute;content:"";--_shiny-spinner-url: var(--shiny-spinner-url, url(spinners/ring.svg));--_shiny-spinner-color: var(--shiny-spinner-color, var(--bs-primary, #007bc2));--_shiny-spinner-size: var(--shiny-spinner-size, 32px);--_shiny-spinner-delay: var(--shiny-spinner-delay, 1s);background:var(--_shiny-spinner-color);width:var(--_shiny-spinner-size);height:var(--_shiny-spinner-size);inset:calc(50% - var(--_shiny-spinner-size) / 2);mask-image:var(--_shiny-spinner-url);-webkit-mask-image:var(--_shiny-spinner-url);opacity:0;animation-delay:var(--_shiny-spinner-delay);animation-name:fade-in;animation-duration:.25s;animation-fill-mode:forwards}[data-shiny-busy-spinners] .recalculating>*:not(.recalculating){opacity:.2;transition:opacity .25s ease var(--shiny-spinner-delay, 1s)}[data-shiny-busy-spinners] .recalculating.shiny-html-output:after{display:none}[data-shiny-busy-spinners][data-shiny-busy-pulse].shiny-busy:after{--_shiny-pulse-background: var( --shiny-pulse-background, linear-gradient( 120deg, var(--bs-body-bg, #fff), var(--bs-indigo, #4b00c1), var(--bs-purple, #74149c), var(--bs-pink, #bf007f), var(--bs-body-bg, #fff) ) );--_shiny-pulse-height: var(--shiny-pulse-height, 5px);--_shiny-pulse-speed: var(--shiny-pulse-speed, 1.85s);position:fixed;top:0;left:0;height:var(--_shiny-pulse-height);background:var(--_shiny-pulse-background);z-index:9999;animation-name:busy-page-pulse;animation-duration:var(--_shiny-pulse-speed);animation-iteration-count:infinite;animation-timing-function:ease-in-out;content:""}[data-shiny-busy-spinners][data-shiny-busy-pulse].shiny-busy:has(.recalculating):after{display:none}[data-shiny-busy-spinners][data-shiny-busy-pulse].shiny-busy:has(#shiny-disconnected-overlay):after{display:none}[data-shiny-busy-pulse]:not([data-shiny-busy-spinners]).shiny-busy:after{--_shiny-pulse-background: var( --shiny-pulse-background, linear-gradient( 120deg, var(--bs-body-bg, #fff), var(--bs-indigo, #4b00c1), var(--bs-purple, #74149c), var(--bs-pink, #bf007f), var(--bs-body-bg, #fff) ) );--_shiny-pulse-height: var(--shiny-pulse-height, 5px);--_shiny-pulse-speed: var(--shiny-pulse-speed, 1.85s);position:fixed;top:0;left:0;height:var(--_shiny-pulse-height);background:var(--_shiny-pulse-background);z-index:9999;animation-name:busy-page-pulse;animation-duration:var(--_shiny-pulse-speed);animation-iteration-count:infinite;animation-timing-function:ease-in-out;content:""}[data-shiny-busy-pulse]:not([data-shiny-busy-spinners]).shiny-busy:has(#shiny-disconnected-overlay):after{display:none}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes busy-page-pulse{0%{left:-75%;width:75%}50%{left:100%;width:75%}to{left:-75%;width:75%}}

man/reactlog.Rd

@@ -4,6 +4,7 @@
 \alias{reactlog}
 \alias{reactlogShow}
 \alias{reactlogReset}
+\alias{reactlogAddMark}
 \title{Reactive Log Visualizer}
 \usage{
 reactlog()
@@ -11,10 +12,15 @@ reactlog()
 reactlogShow(time = TRUE)
 
 reactlogReset()
+
+reactlogAddMark(session = getDefaultReactiveDomain())
 }
 \arguments{
 \item{time}{A boolean that specifies whether or not to display the
 time that each reactive takes to calculate a result.}
+
+\item{session}{The Shiny session to assign the mark to. Defaults to the
+current session.}
 }
 \description{
 Provides an interactive browser-based tool for visualizing reactive
@@ -22,7 +28,7 @@ dependencies and execution in your application.
 }
 \details{
 To use the reactive log visualizer, start with a fresh R session and
-run the command \code{options(shiny.reactlog=TRUE)}; then launch your
+run the command \code{reactlog::reactlog_enable()}; then launch your
 application in the usual way (e.g. using \code{\link[=runApp]{runApp()}}). At
 any time you can hit Ctrl+F3 (or for Mac users, Command+F3) in your
 web browser to launch the reactive log visualization.
@@ -45,17 +51,37 @@ browser will not load new activity into the report; you will need to
 call \code{reactlogShow()} explicitly.
 
 For security and performance reasons, do not enable
-\code{shiny.reactlog} in production environments. When the option is
-enabled, it's possible for any user of your app to see at least some
-of the source code of your reactive expressions and observers.
+\code{options(shiny.reactlog=TRUE)} (or \code{reactlog::reactlog_enable()}) in
+production environments. When the option is enabled, it's possible
+for any user of your app to see at least some of the source code of
+your reactive expressions and observers. In addition, reactlog
+should be considered a memory leak as it will constantly grow and
+will never reset until the R session is restarted.
 }
 \section{Functions}{
 \itemize{
-\item \code{reactlog()}: Return a list of reactive information.  Can be used in conjunction with
-\link[reactlog:reactlog_show]{reactlog::reactlog_show} to later display the reactlog graph.
+\item \code{reactlog()}: Return a list of reactive information.  Can be used in
+conjunction with \link[reactlog:reactlog_show]{reactlog::reactlog_show} to later display the reactlog
+graph.
 
 \item \code{reactlogShow()}: Display a full reactlog graph for all sessions.
 
-\item \code{reactlogReset()}: Resets the entire reactlog stack.  Useful for debugging and removing all prior reactive history.
+\item \code{reactlogReset()}: Resets the entire reactlog stack.  Useful for debugging
+and removing all prior reactive history.
+
+\item \code{reactlogAddMark()}: Adds "mark" entry into the reactlog stack. This is
+useful for programmatically adding a marked entry in the reactlog, rather
+than using your keyboard's key combination.
+
+For example, we can \emph{mark} the reactlog at the beginning of an
+\code{observeEvent}'s calculation:
+
+\if{html}{\out{<div class="sourceCode r">}}\preformatted{observeEvent(input$my_event_trigger, \{
+  # Add a mark in the reactlog
+  reactlogAddMark()
+  # Run your regular event reaction code here...
+  ....
+\})
+}\if{html}{\out{</div>}}
 
 }}

srcts/extras/busy-indicators/busy-indicators.scss

@@ -29,6 +29,7 @@
       animation-delay: var(--_shiny-spinner-delay);
       animation-name: fade-in;
       animation-duration: 250ms;
+      animation-fill-mode: forwards;
     }
 
     /*

srcts/extras/globalShiny.ts

@@ -2,19 +2,12 @@
 // Project: Shiny <https://shiny.rstudio.com/>
 // Definitions by: RStudio <https://www.rstudio.com/>
 
-import type { Shiny as RStudioShiny } from "../src/shiny/index";
+import type { ShinyClass } from "../src/shiny/index";
 
 declare global {
-  // Tell Shiny variable globally exists
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const Shiny: RStudioShiny;
-
   // Tell window.Shiny exists
   interface Window {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    Shiny: RStudioShiny;
+    Shiny: ShinyClass;
   }
-
-  // Make `Shiny` a globally available type definition. (No need to import the type)
-  type Shiny = RStudioShiny;
 }

srcts/src/bindings/input/index.ts

@@ -18,11 +18,10 @@ import { TextInputBinding } from "./text";
 import { TextareaInputBinding } from "./textarea";
 
 // TODO-barret make this an init method
-type InitInputBindings = {
+function initInputBindings(): {
   inputBindings: BindingRegistry<InputBinding>;
   fileInputBinding: FileInputBinding;
-};
-function initInputBindings(): InitInputBindings {
+} {
   const inputBindings = new BindingRegistry<InputBinding>();
 
   inputBindings.register(new TextInputBinding(), "shiny.textInput");

srcts/src/components/errorConsole.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 
 import { css, html, LitElement } from "lit";
+import { Shiny } from "..";
 import { ShinyClientError } from "../shiny/error";
 
 const buttonStyles = css`

srcts/src/index.ts

@@ -1,3 +1,4 @@
 import { init } from "./initialize";
+export { Shiny, type ShinyClass } from "./initialize";
 
 init();

srcts/src/initialize/index.ts

@@ -2,15 +2,20 @@ import { determineBrowserInfo } from "./browser";
 import { disableFormSubmission } from "./disableForm";
 import { trackHistory } from "./history";
 
-import { setShiny } from "../shiny";
+import { ShinyClass } from "../shiny";
 import { setUserAgent } from "../utils/userAgent";
-import { windowShiny } from "../window/libraries";
 import { windowUserAgent } from "../window/userAgent";
 
 import { initReactlog } from "../shiny/reactlog";
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+let Shiny: ShinyClass;
+
 function init(): void {
-  setShiny(windowShiny());
+  if (window.Shiny) {
+    throw new Error("Trying to create window.Shiny, but it already exists!");
+  }
+  Shiny = window.Shiny = new ShinyClass();
   setUserAgent(windowUserAgent()); // before determineBrowserInfo()
 
   determineBrowserInfo();
@@ -21,4 +26,4 @@ function init(): void {
   initReactlog();
 }
 
-export { init };
+export { init, Shiny, type ShinyClass };

srcts/src/shiny/bind.ts

@@ -1,4 +1,5 @@
 import $ from "jquery";
+import { Shiny } from "..";
 import type { InputBinding, OutputBinding } from "../bindings";
 import { OutputBindingAdapter } from "../bindings/outputAdapter";
 import type { BindingRegistry } from "../bindings/registry";

srcts/src/shiny/index.ts

@@ -3,10 +3,33 @@ import $ from "jquery";
 import { InputBinding, OutputBinding } from "../bindings";
 import { initInputBindings } from "../bindings/input";
 import { initOutputBindings } from "../bindings/output";
+import type { BindingRegistry } from "../bindings/registry";
 import { showErrorInClientConsole } from "../components/errorConsole";
 import { resetBrush } from "../imageutils/resetBrush";
-import { $escape, compareVersion } from "../utils";
-import { initShiny } from "./init";
+import type { InputPolicy } from "../inputPolicies";
+import {
+  InputBatchSender,
+  InputDeferDecorator,
+  InputEventDecorator,
+  InputNoResendDecorator,
+  InputRateDecorator,
+  InputValidateDecorator,
+} from "../inputPolicies";
+import type { InputPolicyOpts } from "../inputPolicies/inputPolicy";
+import { addDefaultInputOpts } from "../inputPolicies/inputValidateDecorator";
+import { debounce, Debouncer } from "../time";
+import {
+  $escape,
+  compareVersion,
+  getComputedLinkColor,
+  getStyle,
+  hasDefinedProperty,
+  mapValues,
+  pixelRatio,
+} from "../utils";
+import { createInitStatus, type InitStatusPromise } from "../utils/promise";
+import type { BindInputsCtx, BindScope } from "./bind";
+import { bindAll, unbindAll, _bindAll } from "./bind";
 import type {
   shinyBindAll,
   shinyForgetLastInputValue,
@@ -14,11 +37,12 @@ import type {
   shinySetInputValue,
   shinyUnbindAll,
 } from "./initedMethods";
-import { setFileInputBinding } from "./initedMethods";
+import { setFileInputBinding, setShinyObj } from "./initedMethods";
 import { removeModal, showModal } from "./modal";
 import { removeNotification, showNotification } from "./notifications";
 import { hideReconnectDialog, showReconnectDialog } from "./reconnectDialog";
 import {
+  registerDependency,
   renderContent,
   renderContentAsync,
   renderDependencies,
@@ -26,17 +50,18 @@ import {
   renderHtml,
   renderHtmlAsync,
 } from "./render";
-import type { Handler, ShinyApp } from "./shinyapp";
-import { addCustomMessageHandler } from "./shinyapp";
+import { sendImageSizeFns } from "./sendImageSize";
+import { addCustomMessageHandler, ShinyApp, type Handler } from "./shinyapp";
+import { registerNames as singletonsRegisterNames } from "./singletons";
 
-interface Shiny {
+class ShinyClass {
   version: string;
   $escape: typeof $escape;
   compareVersion: typeof compareVersion;
-  inputBindings: ReturnType<typeof initInputBindings>["inputBindings"];
+  inputBindings: BindingRegistry<InputBinding>;
   // eslint-disable-next-line @typescript-eslint/naming-convention
   InputBinding: typeof InputBinding;
-  outputBindings: ReturnType<typeof initOutputBindings>["outputBindings"];
+  outputBindings: BindingRegistry<OutputBinding>;
   // eslint-disable-next-line @typescript-eslint/naming-convention
   OutputBinding: typeof OutputBinding;
   resetBrush: typeof resetBrush;
@@ -45,7 +70,6 @@ interface Shiny {
     remove: typeof removeNotification;
   };
   modal: { show: typeof showModal; remove: typeof removeModal };
-  createSocket?: () => WebSocket;
   showReconnectDialog: typeof showReconnectDialog;
   hideReconnectDialog: typeof hideReconnectDialog;
   renderDependenciesAsync: typeof renderDependenciesAsync;
@@ -54,9 +78,12 @@ interface Shiny {
   renderContent: typeof renderContent;
   renderHtmlAsync: typeof renderHtmlAsync;
   renderHtml: typeof renderHtml;
-  user: string;
-  progressHandlers?: ShinyApp["progressHandlers"];
   addCustomMessageHandler: typeof addCustomMessageHandler;
+
+  // The following are added in the initialization, by initShiny()
+  createSocket?: () => WebSocket;
+  user?: string;
+  progressHandlers?: ShinyApp["progressHandlers"];
   shinyapp?: ShinyApp;
   setInputValue?: typeof shinySetInputValue;
   onInputChange?: typeof shinySetInputValue;
@@ -65,77 +92,629 @@ interface Shiny {
   unbindAll?: typeof shinyUnbindAll;
   initializeInputs?: typeof shinyInitializeInputs;
 
+  // Promise-like object that is resolved after initialization.
+  initializedPromise: InitStatusPromise<void>;
+
   // Eventually deprecate
   // For old-style custom messages - should deprecate and migrate to new
   oncustommessage?: Handler;
 
+  constructor() {
+    // `process.env.SHINY_VERSION` is overwritten to the Shiny version at build time.
+    // During testing, the `Shiny.version` will be `"development"`
+    this.version = process.env.SHINY_VERSION || "development";
+
+    const { inputBindings, fileInputBinding } = initInputBindings();
+    const { outputBindings } = initOutputBindings();
+
+    setFileInputBinding(fileInputBinding);
+
+    this.$escape = $escape;
+    this.compareVersion = compareVersion;
+    this.inputBindings = inputBindings;
+    this.InputBinding = InputBinding;
+    this.outputBindings = outputBindings;
+    this.OutputBinding = OutputBinding;
+    this.resetBrush = resetBrush;
+    this.notifications = {
+      show: showNotification,
+      remove: removeNotification,
+    };
+    this.modal = { show: showModal, remove: removeModal };
+
+    this.addCustomMessageHandler = addCustomMessageHandler;
+    this.showReconnectDialog = showReconnectDialog;
+    this.hideReconnectDialog = hideReconnectDialog;
+    this.renderDependenciesAsync = renderDependenciesAsync;
+    this.renderDependencies = renderDependencies;
+    this.renderContentAsync = renderContentAsync;
+    this.renderContent = renderContent;
+    this.renderHtmlAsync = renderHtmlAsync;
+    this.renderHtml = renderHtml;
+
+    this.initializedPromise = createInitStatus<void>();
+
+    $(() => {
+      // Init Shiny a little later than document ready, so user code can
+      // run first (i.e. to register bindings)
+      setTimeout(async () => {
+        try {
+          await this.initialize();
+        } catch (e) {
+          showErrorInClientConsole(e);
+          throw e;
+        }
+      }, 1);
+    });
+  }
+
   /**
    * Method to check if Shiny is running in development mode. By packaging as a
    * method, we can we can avoid needing to look for the `__SHINY_DEV_MODE__`
    * variable in the global scope.
    * @returns `true` if Shiny is running in development mode, `false` otherwise.
    */
-  inDevMode: () => boolean;
-}
-
-let windowShiny: Shiny;
-
-function setShiny(windowShiny_: Shiny): void {
-  windowShiny = windowShiny_;
-
-  // `process.env.SHINY_VERSION` is overwritten to the Shiny version at build time.
-  // During testing, the `Shiny.version` will be `"development"`
-  windowShiny.version = process.env.SHINY_VERSION || "development";
-
-  const { inputBindings, fileInputBinding } = initInputBindings();
-  const { outputBindings } = initOutputBindings();
-
-  // set variable to be retrieved later
-  setFileInputBinding(fileInputBinding);
-
-  windowShiny.$escape = $escape;
-  windowShiny.compareVersion = compareVersion;
-  windowShiny.inputBindings = inputBindings;
-  windowShiny.InputBinding = InputBinding;
-  windowShiny.outputBindings = outputBindings;
-  windowShiny.OutputBinding = OutputBinding;
-  windowShiny.resetBrush = resetBrush;
-  windowShiny.notifications = {
-    show: showNotification,
-    remove: removeNotification,
-  };
-  windowShiny.modal = { show: showModal, remove: removeModal };
-
-  windowShiny.addCustomMessageHandler = addCustomMessageHandler;
-  windowShiny.showReconnectDialog = showReconnectDialog;
-  windowShiny.hideReconnectDialog = hideReconnectDialog;
-  windowShiny.renderDependenciesAsync = renderDependenciesAsync;
-  windowShiny.renderDependencies = renderDependencies;
-  windowShiny.renderContentAsync = renderContentAsync;
-  windowShiny.renderContent = renderContent;
-  windowShiny.renderHtmlAsync = renderHtmlAsync;
-  windowShiny.renderHtml = renderHtml;
-
-  windowShiny.inDevMode = () => {
+  inDevMode(): boolean {
     if ("__SHINY_DEV_MODE__" in window)
       return Boolean(window.__SHINY_DEV_MODE__);
 
     return false;
-  };
+  }
 
-  $(function () {
-    // Init Shiny a little later than document ready, so user code can
-    // run first (i.e. to register bindings)
-    setTimeout(async function () {
-      try {
-        await initShiny(windowShiny);
-      } catch (e) {
-        showErrorInClientConsole(e);
-        throw e;
+  async initialize(): Promise<void> {
+    setShinyObj(this);
+    this.shinyapp = new ShinyApp();
+    const shinyapp = this.shinyapp;
+
+    this.progressHandlers = shinyapp.progressHandlers;
+
+    const inputBatchSender = new InputBatchSender(shinyapp);
+    const inputsNoResend = new InputNoResendDecorator(inputBatchSender);
+    const inputsEvent = new InputEventDecorator(inputsNoResend);
+    const inputsRate = new InputRateDecorator(inputsEvent);
+    const inputsDefer = new InputDeferDecorator(inputsEvent);
+
+    let target: InputPolicy;
+
+    if ($('input[type="submit"], button[type="submit"]').length > 0) {
+      // If there is a submit button on the page, use defer decorator
+      target = inputsDefer;
+
+      $('input[type="submit"], button[type="submit"]').each(function () {
+        $(this).click(function (event) {
+          event.preventDefault();
+          inputsDefer.submit();
+        });
+      });
+    } else {
+      // By default, use rate decorator
+      target = inputsRate;
+    }
+
+    const inputs = new InputValidateDecorator(target);
+
+    this.setInputValue = this.onInputChange = function (
+      name: string,
+      value: unknown,
+      opts: Partial<InputPolicyOpts> = {}
+    ): void {
+      const newOpts = addDefaultInputOpts(opts);
+
+      inputs.setInput(name, value, newOpts);
+    };
+
+    // By default, Shiny deduplicates input value changes; that is, if
+    // `setInputValue` is called with the same value as the input already
+    // has, the call is ignored (unless opts.priority = "event"). Calling
+    // `forgetLastInputValue` tells Shiny that the very next call to
+    // `setInputValue` for this input id shouldn't be ignored, even if it
+    // is a dupe of the existing value.
+    this.forgetLastInputValue = function (name) {
+      inputsNoResend.forget(name);
+    };
+
+    // MUST be called after `setShiny()`
+    const inputBindings = this.inputBindings;
+    const outputBindings = this.outputBindings;
+
+    function shinyBindCtx(): BindInputsCtx {
+      return {
+        inputs,
+        inputsRate,
+        sendOutputHiddenState,
+        maybeAddThemeObserver,
+        inputBindings,
+        outputBindings,
+        initDeferredIframes,
+      };
+    }
+
+    this.bindAll = async function (scope: BindScope) {
+      await bindAll(shinyBindCtx(), scope);
+    };
+    this.unbindAll = function (scope: BindScope, includeSelf = false) {
+      unbindAll(shinyBindCtx(), scope, includeSelf);
+    };
+
+    // Calls .initialize() for all of the input objects in all input bindings,
+    // in the given scope.
+    function initializeInputs(scope: BindScope = document.documentElement) {
+      const bindings = inputBindings.getBindings();
+
+      // Iterate over all bindings
+      for (let i = 0; i < bindings.length; i++) {
+        const binding = bindings[i].binding;
+        const inputObjects = binding.find(scope);
+
+        if (inputObjects) {
+          // Iterate over all input objects for this binding
+          for (let j = 0; j < inputObjects.length; j++) {
+            const $inputObjectJ = $(inputObjects[j]);
+
+            if (!$inputObjectJ.data("_shiny_initialized")) {
+              $inputObjectJ.data("_shiny_initialized", true);
+              binding.initialize(inputObjects[j]);
+            }
+          }
+        }
       }
-    }, 1);
+    }
+    this.initializeInputs = initializeInputs;
+
+    function getIdFromEl(el: HTMLElement) {
+      const $el = $(el);
+      const bindingAdapter = $el.data("shiny-output-binding");
+
+      if (!bindingAdapter) return null;
+      else return bindingAdapter.getId();
+    }
+
+    // Initialize all input objects in the document, before binding
+    initializeInputs(document.documentElement);
+
+    // The input values returned by _bindAll() each have a structure like this:
+    //   { value: 123, opts: { ... } }
+    // We want to only keep the value. This is because when the initialValues is
+    // passed to ShinyApp.connect(), the ShinyApp object stores the
+    // initialValues object for the duration of the session, and the opts may
+    // have a reference to the DOM element, which would prevent it from being
+    // GC'd.
+    const initialValues = mapValues(
+      await _bindAll(shinyBindCtx(), document.documentElement),
+      (x) => x.value
+    );
+
+    // The server needs to know the size of each image and plot output element,
+    // in case it is auto-sizing
+    $(".shiny-image-output, .shiny-plot-output, .shiny-report-size").each(
+      function () {
+        const id = getIdFromEl(this),
+          rect = this.getBoundingClientRect();
+
+        if (rect.width !== 0 || rect.height !== 0) {
+          initialValues[".clientdata_output_" + id + "_width"] = rect.width;
+          initialValues[".clientdata_output_" + id + "_height"] = rect.height;
+        }
+      }
+    );
+
+    function getComputedBgColor(
+      el: HTMLElement | null
+    ): string | null | undefined {
+      if (!el) {
+        // Top of document, can't recurse further
+        return null;
+      }
+
+      const bgColor = getStyle(el, "background-color");
+
+      if (!bgColor) return bgColor;
+      const m = bgColor.match(
+        /^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/
+      );
+
+      if (bgColor === "transparent" || (m && parseFloat(m[4]) === 0)) {
+        // No background color on this element. See if it has a background image.
+        const bgImage = getStyle(el, "background-image");
+
+        if (bgImage && bgImage !== "none") {
+          // Failed to detect background color, since it has a background image
+          return null;
+        } else {
+          // Recurse
+          return getComputedBgColor(el.parentElement);
+        }
+      }
+      return bgColor;
+    }
+
+    function getComputedFont(el: HTMLElement) {
+      const fontFamily = getStyle(el, "font-family");
+      const fontSize = getStyle(el, "font-size");
+
+      return {
+        families: fontFamily?.replace(/"/g, "").split(", "),
+        size: fontSize,
+      };
+    }
+
+    $(".shiny-image-output, .shiny-plot-output, .shiny-report-theme").each(
+      function () {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const el = this;
+        const id = getIdFromEl(el);
+
+        initialValues[".clientdata_output_" + id + "_bg"] =
+          getComputedBgColor(el);
+        initialValues[".clientdata_output_" + id + "_fg"] = getStyle(
+          el,
+          "color"
+        );
+        initialValues[".clientdata_output_" + id + "_accent"] =
+          getComputedLinkColor(el);
+        initialValues[".clientdata_output_" + id + "_font"] =
+          getComputedFont(el);
+        maybeAddThemeObserver(el);
+      }
+    );
+
+    // Resend computed styles if *an output element's* class or style attribute changes.
+    // This gives us some level of confidence that getCurrentOutputInfo() will be
+    // properly invalidated if output container is mutated; but unfortunately,
+    // we don't have a reasonable way to detect change in *inherited* styles
+    // (other than session$setCurrentTheme())
+    // https://github.com/rstudio/shiny/issues/3196
+    // https://github.com/rstudio/shiny/issues/2998
+    function maybeAddThemeObserver(el: HTMLElement): void {
+      if (!window.MutationObserver) {
+        return; // IE10 and lower
+      }
+
+      const cl = el.classList;
+      const reportTheme =
+        cl.contains("shiny-image-output") ||
+        cl.contains("shiny-plot-output") ||
+        cl.contains("shiny-report-theme");
+
+      if (!reportTheme) {
+        return;
+      }
+
+      const $el = $(el);
+
+      if ($el.data("shiny-theme-observer")) {
+        return; // i.e., observer is already observing
+      }
+
+      const observerCallback = new Debouncer(null, () => doSendTheme(el), 100);
+      const observer = new MutationObserver(() =>
+        observerCallback.normalCall()
+      );
+      const config = { attributes: true, attributeFilter: ["style", "class"] };
+
+      observer.observe(el, config);
+      $el.data("shiny-theme-observer", observer);
+    }
+
+    function doSendTheme(el: HTMLElement): void {
+      // Sending theme info on error isn't necessary (it'd add an unnecessary additional round-trip)
+      if (el.classList.contains("shiny-output-error")) {
+        return;
+      }
+      const id = getIdFromEl(el);
+
+      inputs.setInput(
+        ".clientdata_output_" + id + "_bg",
+        getComputedBgColor(el)
+      );
+      inputs.setInput(
+        ".clientdata_output_" + id + "_fg",
+        getStyle(el, "color")
+      );
+      inputs.setInput(
+        ".clientdata_output_" + id + "_accent",
+        getComputedLinkColor(el)
+      );
+      inputs.setInput(
+        ".clientdata_output_" + id + "_font",
+        getComputedFont(el)
+      );
+    }
+
+    function doSendImageSize() {
+      $(".shiny-image-output, .shiny-plot-output, .shiny-report-size").each(
+        function () {
+          const id = getIdFromEl(this),
+            rect = this.getBoundingClientRect();
+
+          if (rect.width !== 0 || rect.height !== 0) {
+            inputs.setInput(".clientdata_output_" + id + "_width", rect.width);
+            inputs.setInput(
+              ".clientdata_output_" + id + "_height",
+              rect.height
+            );
+          }
+        }
+      );
+
+      $(".shiny-image-output, .shiny-plot-output, .shiny-report-theme").each(
+        function () {
+          doSendTheme(this);
+        }
+      );
+
+      $(".shiny-bound-output").each(function () {
+        const $this = $(this),
+          binding = $this.data("shiny-output-binding");
+
+        $this.trigger({
+          type: "shiny:visualchange",
+          // @ts-expect-error; Can not remove info on a established, malformed Event object
+          visible: !isHidden(this),
+          binding: binding,
+        });
+        binding.onResize();
+      });
+    }
+
+    sendImageSizeFns.setImageSend(inputBatchSender, doSendImageSize);
+
+    // Return true if the object or one of its ancestors in the DOM tree has
+    // style='display:none'; otherwise return false.
+    function isHidden(obj: HTMLElement | null): boolean {
+      // null means we've hit the top of the tree. If width or height is
+      // non-zero, then we know that no ancestor has display:none.
+      if (obj === null || obj.offsetWidth !== 0 || obj.offsetHeight !== 0) {
+        return false;
+      } else if (getStyle(obj, "display") === "none") {
+        return true;
+      } else {
+        return isHidden(obj.parentNode as HTMLElement | null);
+      }
+    }
+    let lastKnownVisibleOutputs: { [key: string]: boolean } = {};
+    // Set initial state of outputs to hidden, if needed
+
+    $(".shiny-bound-output").each(function () {
+      const id = getIdFromEl(this);
+
+      if (isHidden(this)) {
+        initialValues[".clientdata_output_" + id + "_hidden"] = true;
+      } else {
+        lastKnownVisibleOutputs[id] = true;
+        initialValues[".clientdata_output_" + id + "_hidden"] = false;
+      }
+    });
+    // Send update when hidden state changes
+    function doSendOutputHiddenState() {
+      const visibleOutputs: { [key: string]: boolean } = {};
+
+      $(".shiny-bound-output").each(function () {
+        const id = getIdFromEl(this);
+
+        delete lastKnownVisibleOutputs[id];
+        // Assume that the object is hidden when width and height are 0
+        const hidden = isHidden(this),
+          evt = {
+            type: "shiny:visualchange",
+            visible: !hidden,
+          };
+
+        if (hidden) {
+          inputs.setInput(".clientdata_output_" + id + "_hidden", true);
+        } else {
+          visibleOutputs[id] = true;
+          inputs.setInput(".clientdata_output_" + id + "_hidden", false);
+        }
+        const $this = $(this);
+
+        // @ts-expect-error; Can not remove info on a established, malformed Event object
+        evt.binding = $this.data("shiny-output-binding");
+        // @ts-expect-error; Can not remove info on a established, malformed Event object
+        $this.trigger(evt);
+      });
+      // Anything left in lastKnownVisibleOutputs is orphaned
+      for (const name in lastKnownVisibleOutputs) {
+        if (hasDefinedProperty(lastKnownVisibleOutputs, name))
+          inputs.setInput(".clientdata_output_" + name + "_hidden", true);
+      }
+      // Update the visible outputs for next time
+      lastKnownVisibleOutputs = visibleOutputs;
+    }
+    // sendOutputHiddenState gets called each time DOM elements are shown or
+    // hidden. This can be in the hundreds or thousands of times at startup.
+    // We'll debounce it, so that we do the actual work once per tick.
+    const sendOutputHiddenStateDebouncer = new Debouncer(
+      null,
+      doSendOutputHiddenState,
+      0
+    );
+
+    function sendOutputHiddenState() {
+      sendOutputHiddenStateDebouncer.normalCall();
+    }
+    // We need to make sure doSendOutputHiddenState actually gets called before
+    // the inputBatchSender sends data to the server. The lastChanceCallback
+    // here does that - if the debouncer has a pending call, flush it.
+    inputBatchSender.lastChanceCallback.push(function () {
+      if (sendOutputHiddenStateDebouncer.isPending())
+        sendOutputHiddenStateDebouncer.immediateCall();
+    });
+
+    // Given a namespace and a handler function, return a function that invokes
+    // the handler only when e's namespace matches. For example, if the
+    // namespace is "bs", it would match when e.namespace is "bs" or "bs.tab".
+    // If the namespace is "bs.tab", it would match for "bs.tab", but not "bs".
+    function filterEventsByNamespace(
+      namespace: string,
+      handler: (...handlerArgs: any[]) => void,
+      ...args: any[]
+    ) {
+      const namespaceArr = namespace.split(".");
+
+      return function (this: HTMLElement, e: JQuery.TriggeredEvent) {
+        const eventNamespace = e.namespace?.split(".") ?? [];
+
+        // If any of the namespace strings aren't present in this event, quit.
+        for (let i = 0; i < namespaceArr.length; i++) {
+          if (eventNamespace.indexOf(namespaceArr[i]) === -1) return;
+        }
+
+        handler.apply(this, [namespaceArr, handler, ...args]);
+      };
+    }
+
+    // The size of each image may change either because the browser window was
+    // resized, or because a tab was shown/hidden (hidden elements report size
+    // of 0x0). It's OK to over-report sizes because the input pipeline will
+    // filter out values that haven't changed.
+    $(window).resize(debounce(500, sendImageSizeFns.regular));
+    // Need to register callbacks for each Bootstrap 3 class.
+    const bs3classes = [
+      "modal",
+      "dropdown",
+      "tab",
+      "tooltip",
+      "popover",
+      "collapse",
+    ];
+
+    $.each(bs3classes, function (idx, classname) {
+      $(document.body).on(
+        "shown.bs." + classname + ".sendImageSize",
+        "*",
+        filterEventsByNamespace("bs", sendImageSizeFns.regular)
+      );
+      $(document.body).on(
+        "shown.bs." +
+          classname +
+          ".sendOutputHiddenState " +
+          "hidden.bs." +
+          classname +
+          ".sendOutputHiddenState",
+        "*",
+        filterEventsByNamespace("bs", sendOutputHiddenState)
+      );
+    });
+
+    // This is needed for Bootstrap 2 compatibility and for non-Bootstrap
+    // related shown/hidden events (like conditionalPanel)
+    $(document.body).on("shown.sendImageSize", "*", sendImageSizeFns.regular);
+    $(document.body).on(
+      "shown.sendOutputHiddenState hidden.sendOutputHiddenState",
+      "*",
+      sendOutputHiddenState
+    );
+
+    // Send initial pixel ratio, and update it if it changes
+    initialValues[".clientdata_pixelratio"] = pixelRatio();
+    $(window).resize(function () {
+      inputs.setInput(".clientdata_pixelratio", pixelRatio());
+    });
+
+    // Send initial URL
+    initialValues[".clientdata_url_protocol"] = window.location.protocol;
+    initialValues[".clientdata_url_hostname"] = window.location.hostname;
+    initialValues[".clientdata_url_port"] = window.location.port;
+    initialValues[".clientdata_url_pathname"] = window.location.pathname;
+
+    // Send initial URL search (query string) and update it if it changes
+    initialValues[".clientdata_url_search"] = window.location.search;
+
+    $(window).on("pushstate", function (e) {
+      inputs.setInput(".clientdata_url_search", window.location.search);
+      return;
+      e;
+    });
+
+    $(window).on("popstate", function (e) {
+      inputs.setInput(".clientdata_url_search", window.location.search);
+      return;
+      e;
+    });
+
+    // This is only the initial value of the hash. The hash can change, but
+    // a reactive version of this isn't sent because watching for changes can
+    // require polling on some browsers. The JQuery hashchange plugin can be
+    // used if this capability is important.
+    initialValues[".clientdata_url_hash_initial"] = window.location.hash;
+    initialValues[".clientdata_url_hash"] = window.location.hash;
+
+    $(window).on("hashchange", function (e) {
+      inputs.setInput(".clientdata_url_hash", window.location.hash);
+      return;
+      e;
+    });
+
+    // The server needs to know what singletons were rendered as part of
+    // the page loading
+    const singletonText = (initialValues[".clientdata_singletons"] = $(
+      'script[type="application/shiny-singletons"]'
+    ).text());
+
+    singletonsRegisterNames(singletonText.split(/,/));
+
+    const dependencyText = $(
+      'script[type="application/html-dependencies"]'
+    ).text();
+
+    $.each(dependencyText.split(/;/), function (i, depStr) {
+      const match = /\s*^(.+)\[(.+)\]\s*$/.exec(depStr);
+
+      if (match) {
+        registerDependency(match[1], match[2]);
+      }
+    });
+
+    // We've collected all the initial values--start the server process!
+    inputsNoResend.reset(initialValues);
+    shinyapp.connect(initialValues);
+    $(document).one("shiny:connected", () => {
+      initDeferredIframes();
+    });
+
+    $(document).one("shiny:sessioninitialized", () => {
+      this.initializedPromise.resolve();
+    });
+  }
+}
+
+// Give any deferred iframes a chance to load.
+function initDeferredIframes(): void {
+  // TODO-barret; This method uses `window.Shiny`. Could be replaced with `fullShinyObj_.shinyapp?.isConnected()`,
+  // but that would not use `window.Shiny`. Is it a problem???
+  if (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore; Do not want to define `window.Shiny` as a type to discourage usage of `window.Shiny`;
+    // Can not expect error when combining with window available Shiny definition
+    !window.Shiny ||
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore; Do not want to define `window.Shiny` as a type to discourage usage of `window.Shiny`;
+    // Can not expect error when combining with window available Shiny definition
+    !window.Shiny.shinyapp ||
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore; Do not want to define `window.Shiny` as a type to discourage usage of `window.Shiny`;
+    // Can not expect error when combining with window available Shiny definition
+    !window.Shiny.shinyapp.isConnected()
+  ) {
+    // If somehow we accidentally call this before the server connection is
+    // established, just ignore the call. At the time of this writing it
+    // doesn't happen, but it's easy to imagine a later refactoring putting
+    // us in this situation and it'd be hard to notice with either manual
+    // testing or automated tests, because the only effect is on HTTP request
+    // timing. (Update: Actually Aron saw this being called without even
+    // window.Shiny being defined, but it was hard to repro.)
+    return;
+  }
+
+  $(".shiny-frame-deferred").each(function (i, el) {
+    const $el = $(el);
+
+    $el.removeClass("shiny-frame-deferred");
+    // @ts-expect-error; If it is undefined, set using the undefined value
+    $el.attr("src", $el.attr("data-deferred-src"));
+    $el.attr("data-deferred-src", null);
   });
 }
 
-export { windowShiny, setShiny };
-export type { Shiny };
+export { ShinyClass };

srcts/src/shiny/init.ts

@@ -1,565 +0,0 @@
-import $ from "jquery";
-import type { Shiny } from ".";
-import type { InputPolicy } from "../inputPolicies";
-import {
-  InputBatchSender,
-  InputDeferDecorator,
-  InputEventDecorator,
-  InputNoResendDecorator,
-  InputRateDecorator,
-  InputValidateDecorator,
-} from "../inputPolicies";
-import type { InputPolicyOpts } from "../inputPolicies/inputPolicy";
-import { addDefaultInputOpts } from "../inputPolicies/inputValidateDecorator";
-import { debounce, Debouncer } from "../time";
-import {
-  getComputedLinkColor,
-  getStyle,
-  hasDefinedProperty,
-  mapValues,
-  pixelRatio,
-} from "../utils";
-import type { BindInputsCtx, BindScope } from "./bind";
-import { bindAll, unbindAll, _bindAll } from "./bind";
-import { setShinyObj } from "./initedMethods";
-import { registerDependency } from "./render";
-import { sendImageSizeFns } from "./sendImageSize";
-import { ShinyApp } from "./shinyapp";
-import { registerNames as singletonsRegisterNames } from "./singletons";
-
-// "init_shiny.js"
-async function initShiny(windowShiny: Shiny): Promise<void> {
-  setShinyObj(windowShiny);
-  const shinyapp = (windowShiny.shinyapp = new ShinyApp());
-
-  windowShiny.progressHandlers = shinyapp.progressHandlers;
-
-  const inputBatchSender = new InputBatchSender(shinyapp);
-  const inputsNoResend = new InputNoResendDecorator(inputBatchSender);
-  const inputsEvent = new InputEventDecorator(inputsNoResend);
-  const inputsRate = new InputRateDecorator(inputsEvent);
-  const inputsDefer = new InputDeferDecorator(inputsEvent);
-
-  let target: InputPolicy;
-
-  if ($('input[type="submit"], button[type="submit"]').length > 0) {
-    // If there is a submit button on the page, use defer decorator
-    target = inputsDefer;
-
-    $('input[type="submit"], button[type="submit"]').each(function () {
-      $(this).click(function (event) {
-        event.preventDefault();
-        inputsDefer.submit();
-      });
-    });
-  } else {
-    // By default, use rate decorator
-    target = inputsRate;
-  }
-
-  const inputs = new InputValidateDecorator(target);
-
-  windowShiny.setInputValue = windowShiny.onInputChange = function (
-    name: string,
-    value: unknown,
-    opts: Partial<InputPolicyOpts> = {}
-  ): void {
-    const newOpts = addDefaultInputOpts(opts);
-
-    inputs.setInput(name, value, newOpts);
-  };
-
-  // By default, Shiny deduplicates input value changes; that is, if
-  // `setInputValue` is called with the same value as the input already
-  // has, the call is ignored (unless opts.priority = "event"). Calling
-  // `forgetLastInputValue` tells Shiny that the very next call to
-  // `setInputValue` for this input id shouldn't be ignored, even if it
-  // is a dupe of the existing value.
-  windowShiny.forgetLastInputValue = function (name) {
-    inputsNoResend.forget(name);
-  };
-
-  // MUST be called after `setShiny()`
-  const inputBindings = windowShiny.inputBindings;
-  const outputBindings = windowShiny.outputBindings;
-
-  function shinyBindCtx(): BindInputsCtx {
-    return {
-      inputs,
-      inputsRate,
-      sendOutputHiddenState,
-      maybeAddThemeObserver,
-      inputBindings,
-      outputBindings,
-      initDeferredIframes,
-    };
-  }
-
-  windowShiny.bindAll = async function (scope: BindScope) {
-    await bindAll(shinyBindCtx(), scope);
-  };
-  windowShiny.unbindAll = function (scope: BindScope, includeSelf = false) {
-    unbindAll(shinyBindCtx(), scope, includeSelf);
-  };
-
-  // Calls .initialize() for all of the input objects in all input bindings,
-  // in the given scope.
-  function initializeInputs(scope: BindScope = document.documentElement) {
-    const bindings = inputBindings.getBindings();
-
-    // Iterate over all bindings
-    for (let i = 0; i < bindings.length; i++) {
-      const binding = bindings[i].binding;
-      const inputObjects = binding.find(scope);
-
-      if (inputObjects) {
-        // Iterate over all input objects for this binding
-        for (let j = 0; j < inputObjects.length; j++) {
-          const $inputObjectJ = $(inputObjects[j]);
-
-          if (!$inputObjectJ.data("_shiny_initialized")) {
-            $inputObjectJ.data("_shiny_initialized", true);
-            binding.initialize(inputObjects[j]);
-          }
-        }
-      }
-    }
-  }
-  windowShiny.initializeInputs = initializeInputs;
-
-  function getIdFromEl(el: HTMLElement) {
-    const $el = $(el);
-    const bindingAdapter = $el.data("shiny-output-binding");
-
-    if (!bindingAdapter) return null;
-    else return bindingAdapter.getId();
-  }
-
-  // Initialize all input objects in the document, before binding
-  initializeInputs(document.documentElement);
-
-  // The input values returned by _bindAll() each have a structure like this:
-  //   { value: 123, opts: { ... } }
-  // We want to only keep the value. This is because when the initialValues is
-  // passed to ShinyApp.connect(), the ShinyApp object stores the
-  // initialValues object for the duration of the session, and the opts may
-  // have a reference to the DOM element, which would prevent it from being
-  // GC'd.
-  const initialValues = mapValues(
-    await _bindAll(shinyBindCtx(), document.documentElement),
-    (x) => x.value
-  );
-
-  // The server needs to know the size of each image and plot output element,
-  // in case it is auto-sizing
-  $(".shiny-image-output, .shiny-plot-output, .shiny-report-size").each(
-    function () {
-      const id = getIdFromEl(this),
-        rect = this.getBoundingClientRect();
-
-      if (rect.width !== 0 || rect.height !== 0) {
-        initialValues[".clientdata_output_" + id + "_width"] = rect.width;
-        initialValues[".clientdata_output_" + id + "_height"] = rect.height;
-      }
-    }
-  );
-
-  function getComputedBgColor(
-    el: HTMLElement | null
-  ): string | null | undefined {
-    if (!el) {
-      // Top of document, can't recurse further
-      return null;
-    }
-
-    const bgColor = getStyle(el, "background-color");
-
-    if (!bgColor) return bgColor;
-    const m = bgColor.match(
-      /^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/
-    );
-
-    if (bgColor === "transparent" || (m && parseFloat(m[4]) === 0)) {
-      // No background color on this element. See if it has a background image.
-      const bgImage = getStyle(el, "background-image");
-
-      if (bgImage && bgImage !== "none") {
-        // Failed to detect background color, since it has a background image
-        return null;
-      } else {
-        // Recurse
-        return getComputedBgColor(el.parentElement);
-      }
-    }
-    return bgColor;
-  }
-
-  function getComputedFont(el: HTMLElement) {
-    const fontFamily = getStyle(el, "font-family");
-    const fontSize = getStyle(el, "font-size");
-
-    return {
-      families: fontFamily?.replace(/"/g, "").split(", "),
-      size: fontSize,
-    };
-  }
-
-  $(".shiny-image-output, .shiny-plot-output, .shiny-report-theme").each(
-    function () {
-      // eslint-disable-next-line @typescript-eslint/no-this-alias
-      const el = this;
-      const id = getIdFromEl(el);
-
-      initialValues[".clientdata_output_" + id + "_bg"] =
-        getComputedBgColor(el);
-      initialValues[".clientdata_output_" + id + "_fg"] = getStyle(el, "color");
-      initialValues[".clientdata_output_" + id + "_accent"] =
-        getComputedLinkColor(el);
-      initialValues[".clientdata_output_" + id + "_font"] = getComputedFont(el);
-      maybeAddThemeObserver(el);
-    }
-  );
-
-  // Resend computed styles if *an output element's* class or style attribute changes.
-  // This gives us some level of confidence that getCurrentOutputInfo() will be
-  // properly invalidated if output container is mutated; but unfortunately,
-  // we don't have a reasonable way to detect change in *inherited* styles
-  // (other than session$setCurrentTheme())
-  // https://github.com/rstudio/shiny/issues/3196
-  // https://github.com/rstudio/shiny/issues/2998
-  function maybeAddThemeObserver(el: HTMLElement): void {
-    if (!window.MutationObserver) {
-      return; // IE10 and lower
-    }
-
-    const cl = el.classList;
-    const reportTheme =
-      cl.contains("shiny-image-output") ||
-      cl.contains("shiny-plot-output") ||
-      cl.contains("shiny-report-theme");
-
-    if (!reportTheme) {
-      return;
-    }
-
-    const $el = $(el);
-
-    if ($el.data("shiny-theme-observer")) {
-      return; // i.e., observer is already observing
-    }
-
-    const observerCallback = new Debouncer(null, () => doSendTheme(el), 100);
-    const observer = new MutationObserver(() => observerCallback.normalCall());
-    const config = { attributes: true, attributeFilter: ["style", "class"] };
-
-    observer.observe(el, config);
-    $el.data("shiny-theme-observer", observer);
-  }
-
-  function doSendTheme(el: HTMLElement): void {
-    // Sending theme info on error isn't necessary (it'd add an unnecessary additional round-trip)
-    if (el.classList.contains("shiny-output-error")) {
-      return;
-    }
-    const id = getIdFromEl(el);
-
-    inputs.setInput(".clientdata_output_" + id + "_bg", getComputedBgColor(el));
-    inputs.setInput(".clientdata_output_" + id + "_fg", getStyle(el, "color"));
-    inputs.setInput(
-      ".clientdata_output_" + id + "_accent",
-      getComputedLinkColor(el)
-    );
-    inputs.setInput(".clientdata_output_" + id + "_font", getComputedFont(el));
-  }
-
-  function doSendImageSize() {
-    $(".shiny-image-output, .shiny-plot-output, .shiny-report-size").each(
-      function () {
-        const id = getIdFromEl(this),
-          rect = this.getBoundingClientRect();
-
-        if (rect.width !== 0 || rect.height !== 0) {
-          inputs.setInput(".clientdata_output_" + id + "_width", rect.width);
-          inputs.setInput(".clientdata_output_" + id + "_height", rect.height);
-        }
-      }
-    );
-
-    $(".shiny-image-output, .shiny-plot-output, .shiny-report-theme").each(
-      function () {
-        doSendTheme(this);
-      }
-    );
-
-    $(".shiny-bound-output").each(function () {
-      const $this = $(this),
-        binding = $this.data("shiny-output-binding");
-
-      $this.trigger({
-        type: "shiny:visualchange",
-        // @ts-expect-error; Can not remove info on a established, malformed Event object
-        visible: !isHidden(this),
-        binding: binding,
-      });
-      binding.onResize();
-    });
-  }
-
-  sendImageSizeFns.setImageSend(inputBatchSender, doSendImageSize);
-
-  // Return true if the object or one of its ancestors in the DOM tree has
-  // style='display:none'; otherwise return false.
-  function isHidden(obj: HTMLElement | null): boolean {
-    // null means we've hit the top of the tree. If width or height is
-    // non-zero, then we know that no ancestor has display:none.
-    if (obj === null || obj.offsetWidth !== 0 || obj.offsetHeight !== 0) {
-      return false;
-    } else if (getStyle(obj, "display") === "none") {
-      return true;
-    } else {
-      return isHidden(obj.parentNode as HTMLElement | null);
-    }
-  }
-  let lastKnownVisibleOutputs: { [key: string]: boolean } = {};
-  // Set initial state of outputs to hidden, if needed
-
-  $(".shiny-bound-output").each(function () {
-    const id = getIdFromEl(this);
-
-    if (isHidden(this)) {
-      initialValues[".clientdata_output_" + id + "_hidden"] = true;
-    } else {
-      lastKnownVisibleOutputs[id] = true;
-      initialValues[".clientdata_output_" + id + "_hidden"] = false;
-    }
-  });
-  // Send update when hidden state changes
-  function doSendOutputHiddenState() {
-    const visibleOutputs: { [key: string]: boolean } = {};
-
-    $(".shiny-bound-output").each(function () {
-      const id = getIdFromEl(this);
-
-      delete lastKnownVisibleOutputs[id];
-      // Assume that the object is hidden when width and height are 0
-      const hidden = isHidden(this),
-        evt = {
-          type: "shiny:visualchange",
-          visible: !hidden,
-        };
-
-      if (hidden) {
-        inputs.setInput(".clientdata_output_" + id + "_hidden", true);
-      } else {
-        visibleOutputs[id] = true;
-        inputs.setInput(".clientdata_output_" + id + "_hidden", false);
-      }
-      const $this = $(this);
-
-      // @ts-expect-error; Can not remove info on a established, malformed Event object
-      evt.binding = $this.data("shiny-output-binding");
-      // @ts-expect-error; Can not remove info on a established, malformed Event object
-      $this.trigger(evt);
-    });
-    // Anything left in lastKnownVisibleOutputs is orphaned
-    for (const name in lastKnownVisibleOutputs) {
-      if (hasDefinedProperty(lastKnownVisibleOutputs, name))
-        inputs.setInput(".clientdata_output_" + name + "_hidden", true);
-    }
-    // Update the visible outputs for next time
-    lastKnownVisibleOutputs = visibleOutputs;
-  }
-  // sendOutputHiddenState gets called each time DOM elements are shown or
-  // hidden. This can be in the hundreds or thousands of times at startup.
-  // We'll debounce it, so that we do the actual work once per tick.
-  const sendOutputHiddenStateDebouncer = new Debouncer(
-    null,
-    doSendOutputHiddenState,
-    0
-  );
-
-  function sendOutputHiddenState() {
-    sendOutputHiddenStateDebouncer.normalCall();
-  }
-  // We need to make sure doSendOutputHiddenState actually gets called before
-  // the inputBatchSender sends data to the server. The lastChanceCallback
-  // here does that - if the debouncer has a pending call, flush it.
-  inputBatchSender.lastChanceCallback.push(function () {
-    if (sendOutputHiddenStateDebouncer.isPending())
-      sendOutputHiddenStateDebouncer.immediateCall();
-  });
-
-  // Given a namespace and a handler function, return a function that invokes
-  // the handler only when e's namespace matches. For example, if the
-  // namespace is "bs", it would match when e.namespace is "bs" or "bs.tab".
-  // If the namespace is "bs.tab", it would match for "bs.tab", but not "bs".
-  function filterEventsByNamespace(
-    namespace: string,
-    handler: (...handlerArgs: any[]) => void,
-    ...args: any[]
-  ) {
-    const namespaceArr = namespace.split(".");
-
-    return function (this: HTMLElement, e: JQuery.TriggeredEvent) {
-      const eventNamespace = e.namespace?.split(".") ?? [];
-
-      // If any of the namespace strings aren't present in this event, quit.
-      for (let i = 0; i < namespaceArr.length; i++) {
-        if (eventNamespace.indexOf(namespaceArr[i]) === -1) return;
-      }
-
-      handler.apply(this, [namespaceArr, handler, ...args]);
-    };
-  }
-
-  // The size of each image may change either because the browser window was
-  // resized, or because a tab was shown/hidden (hidden elements report size
-  // of 0x0). It's OK to over-report sizes because the input pipeline will
-  // filter out values that haven't changed.
-  $(window).resize(debounce(500, sendImageSizeFns.regular));
-  // Need to register callbacks for each Bootstrap 3 class.
-  const bs3classes = [
-    "modal",
-    "dropdown",
-    "tab",
-    "tooltip",
-    "popover",
-    "collapse",
-  ];
-
-  $.each(bs3classes, function (idx, classname) {
-    $(document.body).on(
-      "shown.bs." + classname + ".sendImageSize",
-      "*",
-      filterEventsByNamespace("bs", sendImageSizeFns.regular)
-    );
-    $(document.body).on(
-      "shown.bs." +
-        classname +
-        ".sendOutputHiddenState " +
-        "hidden.bs." +
-        classname +
-        ".sendOutputHiddenState",
-      "*",
-      filterEventsByNamespace("bs", sendOutputHiddenState)
-    );
-  });
-
-  // This is needed for Bootstrap 2 compatibility and for non-Bootstrap
-  // related shown/hidden events (like conditionalPanel)
-  $(document.body).on("shown.sendImageSize", "*", sendImageSizeFns.regular);
-  $(document.body).on(
-    "shown.sendOutputHiddenState hidden.sendOutputHiddenState",
-    "*",
-    sendOutputHiddenState
-  );
-
-  // Send initial pixel ratio, and update it if it changes
-  initialValues[".clientdata_pixelratio"] = pixelRatio();
-  $(window).resize(function () {
-    inputs.setInput(".clientdata_pixelratio", pixelRatio());
-  });
-
-  // Send initial URL
-  initialValues[".clientdata_url_protocol"] = window.location.protocol;
-  initialValues[".clientdata_url_hostname"] = window.location.hostname;
-  initialValues[".clientdata_url_port"] = window.location.port;
-  initialValues[".clientdata_url_pathname"] = window.location.pathname;
-
-  // Send initial URL search (query string) and update it if it changes
-  initialValues[".clientdata_url_search"] = window.location.search;
-
-  $(window).on("pushstate", function (e) {
-    inputs.setInput(".clientdata_url_search", window.location.search);
-    return;
-    e;
-  });
-
-  $(window).on("popstate", function (e) {
-    inputs.setInput(".clientdata_url_search", window.location.search);
-    return;
-    e;
-  });
-
-  // This is only the initial value of the hash. The hash can change, but
-  // a reactive version of this isn't sent because watching for changes can
-  // require polling on some browsers. The JQuery hashchange plugin can be
-  // used if this capability is important.
-  initialValues[".clientdata_url_hash_initial"] = window.location.hash;
-  initialValues[".clientdata_url_hash"] = window.location.hash;
-
-  $(window).on("hashchange", function (e) {
-    inputs.setInput(".clientdata_url_hash", window.location.hash);
-    return;
-    e;
-  });
-
-  // The server needs to know what singletons were rendered as part of
-  // the page loading
-  const singletonText = (initialValues[".clientdata_singletons"] = $(
-    'script[type="application/shiny-singletons"]'
-  ).text());
-
-  singletonsRegisterNames(singletonText.split(/,/));
-
-  const dependencyText = $(
-    'script[type="application/html-dependencies"]'
-  ).text();
-
-  $.each(dependencyText.split(/;/), function (i, depStr) {
-    const match = /\s*^(.+)\[(.+)\]\s*$/.exec(depStr);
-
-    if (match) {
-      registerDependency(match[1], match[2]);
-    }
-  });
-
-  // We've collected all the initial values--start the server process!
-  inputsNoResend.reset(initialValues);
-  shinyapp.connect(initialValues);
-  $(document).one("shiny:connected", function () {
-    initDeferredIframes();
-  });
-
-  // window.console.log("Shiny version: ", windowShiny.version);
-} // function initShiny()
-
-// Give any deferred iframes a chance to load.
-function initDeferredIframes(): void {
-  // TODO-barret; This method uses `window.Shiny`. Could be replaced with `fullShinyObj_.shinyapp?.isConnected()`,
-  // but that would not use `window.Shiny`. Is it a problem???
-  if (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore; Do not want to define `window.Shiny` as a type to discourage usage of `window.Shiny`;
-    // Can not expect error when combining with window available Shiny definition
-    !window.Shiny ||
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore; Do not want to define `window.Shiny` as a type to discourage usage of `window.Shiny`;
-    // Can not expect error when combining with window available Shiny definition
-    !window.Shiny.shinyapp ||
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore; Do not want to define `window.Shiny` as a type to discourage usage of `window.Shiny`;
-    // Can not expect error when combining with window available Shiny definition
-    !window.Shiny.shinyapp.isConnected()
-  ) {
-    // If somehow we accidentally call this before the server connection is
-    // established, just ignore the call. At the time of this writing it
-    // doesn't happen, but it's easy to imagine a later refactoring putting
-    // us in this situation and it'd be hard to notice with either manual
-    // testing or automated tests, because the only effect is on HTTP request
-    // timing. (Update: Actually Aron saw this being called without even
-    // window.Shiny being defined, but it was hard to repro.)
-    return;
-  }
-
-  $(".shiny-frame-deferred").each(function (i, el) {
-    const $el = $(el);
-
-    $el.removeClass("shiny-frame-deferred");
-    // @ts-expect-error; If it is undefined, set using the undefined value
-    $el.attr("src", $el.attr("data-deferred-src"));
-    $el.attr("data-deferred-src", null);
-  });
-}
-
-export { initShiny };

srcts/src/shiny/initedMethods.ts

@@ -1,4 +1,4 @@
-import type { Shiny } from ".";
+import type { ShinyClass } from ".";
 import type { FileInputBinding } from "../bindings/input/fileinput";
 import type { OutputBindingAdapter } from "../bindings/outputAdapter";
 import type { EventPriority } from "../inputPolicies";
@@ -10,7 +10,7 @@ let fullShinyObj: FullShinyDef;
 // TODO-future; It would be nice to have a way to export this type value instead of / in addition to `Shiny`
 type FullShinyDef = Required<
   Pick<
-    Shiny,
+    ShinyClass,
     | "bindAll"
     | "forgetLastInputValue"
     | "initializeInputs"
@@ -21,9 +21,9 @@ type FullShinyDef = Required<
     | "user"
   >
 > &
-  Shiny;
+  ShinyClass;
 
-function setShinyObj(shiny: Shiny): void {
+function setShinyObj(shiny: ShinyClass): void {
   fullShinyObj = shiny as FullShinyDef;
 }
 

srcts/src/shiny/shinyapp.ts

@@ -109,6 +109,9 @@ function addCustomMessageHandler(type: string, handler: Handler): void {
 
 //// End message handler variables
 
+/**
+ * The ShinyApp class handles the communication with the Shiny Server.
+ */
 class ShinyApp {
   $socket: ShinyWebSocket | null = null;
 
@@ -1610,4 +1613,4 @@ class ShinyApp {
 }
 
 export { ShinyApp, addCustomMessageHandler };
-export type { Handler, ErrorsMessageValue };
+export type { Handler, ErrorsMessageValue, ShinyWebSocket };

srcts/src/utils/promise.ts

@@ -0,0 +1,46 @@
+// A shim for Promise.withResolvers. Once browser support is widespread, we can
+// remove this.
+export function promiseWithResolvers<T>(): {
+  promise: Promise<T>;
+  resolve: (value: PromiseLike<T> | T) => void;
+  reject: (reason?: any) => void;
+} {
+  let resolve: (value: PromiseLike<T> | T) => void;
+  let reject: (reason?: any) => void;
+  const promise = new Promise(
+    (res: (value: PromiseLike<T> | T) => void, rej: (reason?: any) => void) => {
+      resolve = res;
+      reject = rej;
+    }
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return { promise, resolve: resolve!, reject: reject! };
+}
+
+export interface InitStatusPromise<T> extends Promise<T> {
+  promise: Promise<T>;
+  resolve(x: T): void;
+  resolved(): boolean;
+}
+
+export function createInitStatus<T>(): InitStatusPromise<T> {
+  const { promise, resolve } = promiseWithResolvers<T>();
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  let _resolved = false;
+
+  return {
+    promise,
+    resolve(x: T) {
+      _resolved = true;
+      resolve(x);
+    },
+    then: promise.then.bind(promise),
+    catch: promise.catch.bind(promise),
+    finally: promise.finally.bind(promise),
+    [Symbol.toStringTag]: "InitStatus",
+    resolved() {
+      return _resolved;
+    },
+  };
+}

srcts/src/window/libraries.ts

@@ -1,12 +0,0 @@
-import type { Shiny } from "../shiny";
-
-function windowShiny(): Shiny {
-  // Use `any` type as we know what we are doing is _dangerous_
-  // Immediately init shiny on the window
-  if (!(window as any)["Shiny"]) {
-    (window as any)["Shiny"] = {};
-  }
-  return (window as any)["Shiny"];
-}
-
-export { windowShiny };

srcts/types/extras/globalShiny.d.ts

@@ -1,8 +1,6 @@
-import type { Shiny as RStudioShiny } from "../src/shiny/index";
+import type { ShinyClass } from "../src/shiny/index";
 declare global {
-    const Shiny: RStudioShiny;
     interface Window {
-        Shiny: RStudioShiny;
+        Shiny: ShinyClass;
     }
-    type Shiny = RStudioShiny;
 }

srcts/types/src/bindings/input/index.d.ts

@@ -1,9 +1,8 @@
 import { BindingRegistry } from "../registry";
 import { InputBinding } from "./inputBinding";
 import { FileInputBinding } from "./fileinput";
-type InitInputBindings = {
+declare function initInputBindings(): {
     inputBindings: BindingRegistry<InputBinding>;
     fileInputBinding: FileInputBinding;
 };
-declare function initInputBindings(): InitInputBindings;
 export { initInputBindings, InputBinding };

srcts/types/src/index.d.ts

@@ -1 +1 @@
-export {};
+export { Shiny, type ShinyClass } from "./initialize";

srcts/types/src/initialize/index.d.ts

@@ -1,2 +1,4 @@
+import { ShinyClass } from "../shiny";
+declare let Shiny: ShinyClass;
 declare function init(): void;
-export { init };
+export { init, Shiny, type ShinyClass };

srcts/types/src/shiny/index.d.ts

@@ -1,22 +1,21 @@
 import { InputBinding, OutputBinding } from "../bindings";
-import { initInputBindings } from "../bindings/input";
-import { initOutputBindings } from "../bindings/output";
+import type { BindingRegistry } from "../bindings/registry";
 import { resetBrush } from "../imageutils/resetBrush";
 import { $escape, compareVersion } from "../utils";
+import { type InitStatusPromise } from "../utils/promise";
 import type { shinyBindAll, shinyForgetLastInputValue, shinyInitializeInputs, shinySetInputValue, shinyUnbindAll } from "./initedMethods";
 import { removeModal, showModal } from "./modal";
 import { removeNotification, showNotification } from "./notifications";
 import { hideReconnectDialog, showReconnectDialog } from "./reconnectDialog";
 import { renderContent, renderContentAsync, renderDependencies, renderDependenciesAsync, renderHtml, renderHtmlAsync } from "./render";
-import type { Handler, ShinyApp } from "./shinyapp";
-import { addCustomMessageHandler } from "./shinyapp";
-interface Shiny {
+import { addCustomMessageHandler, ShinyApp, type Handler } from "./shinyapp";
+declare class ShinyClass {
     version: string;
     $escape: typeof $escape;
     compareVersion: typeof compareVersion;
-    inputBindings: ReturnType<typeof initInputBindings>["inputBindings"];
+    inputBindings: BindingRegistry<InputBinding>;
     InputBinding: typeof InputBinding;
-    outputBindings: ReturnType<typeof initOutputBindings>["outputBindings"];
+    outputBindings: BindingRegistry<OutputBinding>;
     OutputBinding: typeof OutputBinding;
     resetBrush: typeof resetBrush;
     notifications: {
@@ -27,7 +26,6 @@ interface Shiny {
         show: typeof showModal;
         remove: typeof removeModal;
     };
-    createSocket?: () => WebSocket;
     showReconnectDialog: typeof showReconnectDialog;
     hideReconnectDialog: typeof hideReconnectDialog;
     renderDependenciesAsync: typeof renderDependenciesAsync;
@@ -36,9 +34,10 @@ interface Shiny {
     renderContent: typeof renderContent;
     renderHtmlAsync: typeof renderHtmlAsync;
     renderHtml: typeof renderHtml;
-    user: string;
-    progressHandlers?: ShinyApp["progressHandlers"];
     addCustomMessageHandler: typeof addCustomMessageHandler;
+    createSocket?: () => WebSocket;
+    user?: string;
+    progressHandlers?: ShinyApp["progressHandlers"];
     shinyapp?: ShinyApp;
     setInputValue?: typeof shinySetInputValue;
     onInputChange?: typeof shinySetInputValue;
@@ -46,16 +45,16 @@ interface Shiny {
     bindAll?: typeof shinyBindAll;
     unbindAll?: typeof shinyUnbindAll;
     initializeInputs?: typeof shinyInitializeInputs;
+    initializedPromise: InitStatusPromise<void>;
     oncustommessage?: Handler;
+    constructor();
     /**
      * Method to check if Shiny is running in development mode. By packaging as a
      * method, we can we can avoid needing to look for the `__SHINY_DEV_MODE__`
      * variable in the global scope.
      * @returns `true` if Shiny is running in development mode, `false` otherwise.
      */
-    inDevMode: () => boolean;
+    inDevMode(): boolean;
+    initialize(): Promise<void>;
 }
-declare let windowShiny: Shiny;
-declare function setShiny(windowShiny_: Shiny): void;
-export { windowShiny, setShiny };
-export type { Shiny };
+export { ShinyClass };

srcts/types/src/shiny/init.d.ts

@@ -1,3 +0,0 @@
-import type { Shiny } from ".";
-declare function initShiny(windowShiny: Shiny): Promise<void>;
-export { initShiny };

srcts/types/src/shiny/initedMethods.d.ts

@@ -1,10 +1,10 @@
-import type { Shiny } from ".";
+import type { ShinyClass } from ".";
 import type { FileInputBinding } from "../bindings/input/fileinput";
 import type { OutputBindingAdapter } from "../bindings/outputAdapter";
 import type { EventPriority } from "../inputPolicies";
 import type { BindScope } from "./bind";
 import type { Handler, ShinyApp } from "./shinyapp";
-declare function setShinyObj(shiny: Shiny): void;
+declare function setShinyObj(shiny: ShinyClass): void;
 declare function shinySetInputValue(name: string, value: unknown, opts?: {
     priority?: EventPriority;
 }): void;

srcts/types/src/shiny/shinyapp.d.ts

@@ -19,6 +19,9 @@ type InputValues = {
 };
 type MessageValue = Parameters<WebSocket["send"]>[0];
 declare function addCustomMessageHandler(type: string, handler: Handler): void;
+/**
+ * The ShinyApp class handles the communication with the Shiny Server.
+ */
 declare class ShinyApp {
     $socket: ShinyWebSocket | null;
     taskQueue: AsyncQueue<() => Promise<void> | void>;
@@ -104,4 +107,4 @@ declare class ShinyApp {
     }): string;
 }
 export { ShinyApp, addCustomMessageHandler };
-export type { Handler, ErrorsMessageValue };
+export type { Handler, ErrorsMessageValue, ShinyWebSocket };

srcts/types/src/utils/promise.d.ts

@@ -0,0 +1,11 @@
+export declare function promiseWithResolvers<T>(): {
+    promise: Promise<T>;
+    resolve: (value: PromiseLike<T> | T) => void;
+    reject: (reason?: any) => void;
+};
+export interface InitStatusPromise<T> extends Promise<T> {
+    promise: Promise<T>;
+    resolve(x: T): void;
+    resolved(): boolean;
+}
+export declare function createInitStatus<T>(): InitStatusPromise<T>;

srcts/types/src/window/libraries.d.ts

@@ -1,3 +0,0 @@
-import type { Shiny } from "../shiny";
-declare function windowShiny(): Shiny;
-export { windowShiny };