Appsilon / shiny.react

Use React in Shiny applications.
https://appsilon.github.io/shiny.react
GNU Lesser General Public License v3.0
96 stars 12 forks source link

Update to 0.2.0 make_output, mark_as_react_tag going away... #9

Closed janzjos closed 3 years ago

janzjos commented 3 years ago

Excited to take advantage of the new version! Looking at the news.md some critical functions i was using went away, in particular make_output() and mark_as_react_tag(). When i update to 0.2.0 this breaks my app do the missing functions. Sounds like can solve doing something like this "Components can now be defined by combining reactElement() and asProps().", but i'm having trouble doing so.

# old code

Provider <- shiny.react::make_output(NULL, "FabricRedux", "Provider")

make_component <- function(component_name) {
  function(...) {
    component <- shiny::tag(component_name, rlang::dots_list(...))
    component <- shiny.react:::mark_as_react_tag("FabricRedux", component)
    return(component)
  }
}
# new code something like this
Provider <- function(...) reactElement( # nolint
  module = "@/shiny.react", name = "Provider", props = asProps(...)
)

Any insights/tips to help combine reactElement and asProps to achieve would be appreciated!

kamilzyla commented 3 years ago

Hi @janzjos, thanks for the question! Your new code looks good, but instead of module = "@/shiny.react", you'll need to provide the actual name of the JavaScript module, where the component is available. For example, if you write:

Provider <- function(...) reactElement(
  module = "FabricRedux", name = "Provider", props = asProps(...)
)

Then jsmodule['FabricRedux'].Provider must work in JavaScript. This means that you'll need to update the JavaScript code - previously shiny.react would look for the Provider component in a global variable, i.e. FabricRedux.Provider.

The make_component function now translates to:

makeComponent <- function(name) {
  function(...) reactElement(
    module = "FabricRedux", name = name, props = asProps(...)
  )
}

We'll need to add some tutorials for shiny.react to explain this machinery in the future. For now, I hope this explanation helps a bit! I'm going to close this issue - if you have any further questions, please use the discussions feature in shiny.react repo.