[Question]: How to properly add examples so shinylive works properly?

[vedhav]

What is your question?

Based on the readme I tried the following steps:

1. Installed the roxy.shinylive
2. Edited the DESCRIPTION file with roxygen: list(markdown = TRUE, packages = c("roxy.shinylive"))
3. In one of the examples (example_module), I included the @examplesShinylive tag.
4. Of course I had to run the docs via a static server to make it work so I did that using httpuv::runStaticServer(dir = "/Users/vedha/insightsengineering/teal/docs/"). Would be nice to mention this in the docs so people don't get confused when they don't see this working when opening the static HTML file like they're used to. I see that this is just an iframe embed so there is no need to serve it.

This had a few small issues with how the examples were written and to make it work I had to make sure that:

1. The library(teal) was called in the example. Should we have a hook to call the package before running any example?
2. Since the shinyApp() was run inside the if (interactive()) it did not work unless I changed the if condition to something like this interactive() || !is.null(getOption('webr_pkg_repos')) (not recommending this, I was just testing)
3. The iframe width of 140% seems to overlap and cause layout issues for me. I don't understand why we have this.
4. It would be nice if we display the shinylive app below the example code.

The final example roxygen code looked like this in my case:

#' @inheritParams teal_modules
#' @return A `teal` module which can be included in the `modules` argument to [init()].
#' @examplesShinylive
#' @examples
#' 
#' library(teal)
#' app <- init(
#'   data = teal_data(IRIS = iris, MTCARS = mtcars),
#'   modules = example_module()
#' )
#' if (interactive() || !is.null(getOption('webr_pkg_repos'))) {
#'   shinyApp(app$ui, app$server)
#' }
#' @export

So, I'm looking for a better way to write examples, or add supporting hooks to make it easier to use this package.

Code of Conduct

• I agree to follow this project's Code of Conduct.

Contribution Guidelines

• I agree to follow this project's Contribution Guidelines.

[pawelru]

Hey @vedhav - I am sorry for the delay - I totally missed that issue!

First of all, there is a new version since you tried it last time - I encourage you to do the update - maybe that resolves some of your issues.

The library(teal) was called in the example. Should we have a hook to call the package before running any example?

In general, you should not put library(<self>) in the example code. It's redundant for roxygen itself. On the other hand - it's needed for the shinylive as this is executed in a separate, sandbox environment. That's why I came up with the concept of decoration. For the library() alone it should look like this:

#' @examplesShinylive
#' library(teal)
#' {{ next_example }}
#' @examples
#' app <- init(
(...)

I was considering to automatically add library(<self>) but then I resigned to keep it very general. However, up until now I can't came up with a use case where this is not required so maybe it's a good idea to include it always.

Since the shinyApp() was run inside the if (interactive()) it did not work

Use decoration as explained above. So for interactive() alone, it should look like this:

#' @examplesShinylive
#' interactive <- function() TRUE
#' {{ next_example }}
#' @examples
(...)

I even include this example in the documentation.
Should we add this automatically? I am actually more resilient than previously. Folks might be having a different approach of fencing app init.

The iframe width of 140% seems to overlap and cause layout issues for me.

I know. It's imperfect. If kept 100% then the teal apps (on which I tested) reshuffle elements due to narrow size - that is: encoding, main panel and filter panel in its own row. I tried with keeping 100% and zoom-out a little but it doesn't look well. Ideally, this would be 100% of its parent width + send request to collapse TOC. I was not able to find a way to do this. Maybe you can have a look? :)

It would be nice if we display the shinylive app below the example code

You mean to have "Examples" and then "Examples in Shinylive"?