React context can affect layout

[kamilzyla]

Problem

To ensure that Shiny inputs/outputs work when rendered by React, we use ShinyBindingWrapper. Unfortunately it adds an additional wrapper div into the rendered HTML, which makes it harder to read and can affect layout/styling.

The following snippet will render "Hi" and "there!" on separate lines. If we replace shiny.react:::ReactContext with tagList, both words will appear on one line.

shinyApp(
  ui = shiny.react:::ReactContext(
    actionLink("a", "Hi"),
    actionLink("b", "there!")
  ),
  server = function(input, output) {}
)

A similar issue can be observed for textOutput():

shinyApp(
  ui = shiny.react:::ReactContext(
    textOutput("a", inline = TRUE),
    textOutput("b", inline = TRUE)
  ),
  server = function(input, output) {
    output$a <- renderText("Hi")
    output$b <- renderText("there!")
  }
)

Solution

It is possible to avoid the wrapper div; a preliminary solution is available on with-shiny-bindings branch.