Why do we need shiny-binding-wrapper?

[jonekeat]

For instance, I noticed shiny.react now checks if the className of elements contains the following patterns

shiny.react/js/src/react/shinyBindings.jsx

Lines 5 to 16 in 43679fa

	const regex = new RegExp([
	// `shiny::actionButton()` and `shiny::actionLink()`.
	'action-button',
	// All Shiny inputs, e.g. `shiny::textInput()`.
	'shiny-input-container',
	// All Shiny outputs, e.g. `shiny::textOutput()`.
	'shiny-\\w*-output',
	// Outputs created with the `htmlwidgets` package, e.g. `leaflet::leafletOutput()`.
	'html-widget-output',
	// `shiny.react::reactOutput()`.
	'react-container',
	].join('|'));

if yes, then the package will render the element with a div wrapper shiny-binding-wrapper as in

shiny.react/js/src/react/shinyBindings.jsx

Lines 22 to 37 in 43679fa

	export function ShinyBindingWrapper({ children }) {
	const ref = useRef();
	useEffect(() => {
	const wrapper = ref.current;
	Shiny.initializeInputs(wrapper);
	Shiny.bindAll(wrapper);
	return () => Shiny.unbindAll(wrapper);
	}, []);
	return (
	// Mark with a CSS class for HTML readability.
	<div ref={ref} className="shiny-binding-wrapper">
	{children}
	</div>
	);
	}

this may cause issues to layout / action if user incorporated their CSS & JS code, and defined custom className, here is an example:

Reproducible examples

Use className action-button

This looks weird, when we used class 'action-button'

library(shiny)
library(shiny.fluent)

shinyApp(
  ui = fluentPage(
    div(
      class = "example-card action-button",
      style = "margin-top: 10px; margin-bottom: 10px; width: max(450px, 35%);", # width: fit-content;
      div(
        class = "example-card-header action-button",
        style = "border-bottom: 1px solid rgb(161, 159, 157); overflow: hidden;",
        Stack(
          className = "example-card-header-stack",
          horizontal = TRUE,
          horizontalAlign = "left",
          tokens = list(childrenGap = 10L),
          list(
            h3(
              class = "example-card-title action-button",
              style = "font-size: 20px; font-weight: 600; color: #605e5c; display: inline-flex; flex-grow: 1; flex-shrink: 1; margin-bottom: 10px;",
              "Action Button"
            ),
            CommandButton.shinyInput(
              inputId = "code_action_btn",
              className = "example-card-code-button action-button",
              styles = list(
                root = list(
                  alignSelf = "flex-end",
                  borderWidth = "1px 1px 0px"
                )
              ),
              iconProps = list("iconName" = "Embed"),
              disabled = FALSE,
              text = "Show code"
            )
          )
        )
      )
    )
  ),
  server = function(input, output) {}
)

Use className action-btn

This looks normal, when we change class to 'action-btn'

library(shiny)
library(shiny.fluent)

shinyApp(
  ui = fluentPage(
    div(
      class = "example-card action-btn",
      style = "margin-top: 10px; margin-bottom: 10px; width: max(450px, 35%);", # width: fit-content;
      div(
        class = "example-card-header action-btn",
        style = "border-bottom: 1px solid rgb(161, 159, 157); overflow: hidden;",
        Stack(
          className = "example-card-header-stack",
          horizontal = TRUE,
          horizontalAlign = "left",
          tokens = list(childrenGap = 10L),
          list(
            h3(
              class = "example-card-title action-btn",
              style = "font-size: 20px; font-weight: 600; color: #605e5c; display: inline-flex; flex-grow: 1; flex-shrink: 1; margin-bottom: 10px;",
              "Action Button"
            ),
            CommandButton.shinyInput(
              inputId = "code_action_btn",
              className = "example-card-code-button action-btn",
              styles = list(
                root = list(
                  alignSelf = "flex-end",
                  borderWidth = "1px 1px 0px"
                )
              ),
              iconProps = list("iconName" = "Embed"),
              disabled = FALSE,
              text = "Show code"
            )
          )
        )
      )
    )
  ),
  server = function(input, output) {}
)

I just dont understand why we need this logic here, please let me know if i misunderstood anything @kamilzyla @jakubnowicki
I believe this is related to #52

[jakubsob]

Hi @jonekeat, yes, this is related to #52.

This wrapper was made to make it simpler to render Shiny bound nodes. A rendering mechanism of those nodes must be changed for us to be able to remove that wrapper.

There is work in progress on that issue in #83, but it requires thorough testing before it's merged to ensure that all dependent packages work as expected with that change.

[jonekeat]

thanks @jakubsob for your clarification