Added webr with shinylive

documents/shinylive/index.qmd

@@ -56,7 +56,7 @@ shinyApp(ui, server)
 ```
 ````
 
-## Embedded app
+## App in a chunk
 
 ::: {.callout-note}
 The app can take a while to load. For full code, use code-tools, ie; click 'Code' at the top.
@@ -127,6 +127,84 @@ server <- function(input, output, session) {
 app <- shinyApp(ui = ui, server = server)
 ```
 
+## More options
+
+Adding `#| components: [editor, viewer]` displays code editor and viewer side by side.
+
+```{shinylive-r}
+#| standalone: true
+#| components: [editor, viewer]
+
+shinyApp(
+  ui=fluidPage(
+    sliderInput("value", label="Value", min=1, max=50, step=1, value=2),
+    textOutput("out")
+  ),
+  server=function(input, output, session) {
+    output$out <- renderText(paste0("Squared: ",input$value^2))
+  }
+)
+```
+
+Adding `#| layout: vertical` displays editor and viewer vertically.
+
+```{shinylive-r}
+#| standalone: true
+#| components: [editor, viewer]
+#| layout: vertical
+
+shinyApp(
+  ui=fluidPage(
+    sliderInput("value", label="Value", min=1, max=50, step=1, value=2),
+    textOutput("out")
+  ),
+  server=function(input, output, session) {
+    output$out <- renderText(paste0("Squared: ",input$value^2))
+  }
+)
+```
+
+
+## Multi-file app
+
+The app code can be split into separate files by specifying `## file: filename.r`.
+
+````
+```{{shinylive-r}}
+#| standalone: true
+#| components: [editor, viewer]
+
+## file: ui.r
+ui <- fluidPage(
+  sliderInput("value", label="Value", min=1, max=50, step=1, value=2),
+  textOutput("out")
+)
+
+## file: server.r
+server <- function(input, output, session) {
+  output$out <- renderText(paste0("Squared: ",input$value^2))
+}
+```
+````
+
+```{shinylive-r}
+#| standalone: true
+#| components: [editor, viewer]
+
+## file: ui.r
+ui <- fluidPage(
+  sliderInput("value", label="Value", min=1, max=50, step=1, value=2),
+  textOutput("out")
+)
+
+## file: server.r
+server <- function(input, output, session) {
+  output$out <- renderText(paste0("Squared: ",input$value^2))
+}
+
+shinyApp(ui=ui,server=server)
+```
+
 ## Acknowledgements
 
 - <https://quarto.thecoatlessprofessor.com/r-shinylive-demo/>

documents/webr-shinylive/index.qmd

@@ -0,0 +1,54 @@
+---
+pagetitle: "Shinylive with WebR"
+title: "Shinylive with WebR"
+subtitle: "Run shiny apps alongside webr in the browser"
+author: "Roy Francis"
+date: last-modified
+format:
+  html:
+    title-block-banner: true
+    toc: true
+    number-sections: true
+    code-tools: true
+    resources: 
+      - shinylive-sw.js
+filters:
+  - shinylive
+  - webr
+---
+
+WebR and shinylive can work together on the same page, but they have separate environments.
+
+## Shinylive
+
+This is a shinylive app chunk
+
+```{shinylive-r}
+#| standalone: true
+#| components: [editor, viewer]
+#| layout: vertical
+shinyApp(
+  ui=fluidPage(
+    sliderInput("value", label="Value", min=1, max=50, step=1, value=2),
+    textOutput("result"),
+    verbatimTextOutput("session")
+  ),
+  server=function(input, output, session) {
+    output$result <- renderText(paste0("Squared: ",input$value^2))
+    output$session <- renderPrint(capture.output(sessionInfo()))
+  }
+)
+```
+
+## WebR
+
+This is a webr chunk
+
+```{webr-r}
+#| autorun: true
+sessionInfo()
+```
+
+<!--
+docker run --platform linux/amd64 --rm -p 4202:4202 -v ${PWD}:/home/rstudio/raukr ghcr.io/nbisweden/workshop-raukr:latest quarto preview --port 4202 --host 0.0.0.0
+-->

index.qmd

@@ -11,37 +11,40 @@ format:
 
 In parameterized reports, one or more parameters used in the document are provided to the document at the time of rendering.
 
-- [Parameterized html report](documents/report/index.qmd)
-- [Parameterized html revealjs presentation](documents/revealjs/index.qmd)
+- [Parameterized html report](documents/report)
+- [Parameterized html revealjs presentation](documents/revealjs)
 - [Parameterized pdf](documents/pdf/index.pdf)
-- [Parameterized html report from external file](documents/param-text/index.qmd)
+- [Parameterized html report from external file](documents/param-text)
 
 ## OJS
 
 [Observable Plot](https://observablehq.github.io/plot/) is a javascript framework for exploratory data visualization. OJS is supported natively in quarto. Read more about OJS in quarto [here](https://quarto.org/docs/interactive/ojs/).
 
-- [OJS and R](documents/ojs/index.qmd)
-- [OJS widgets, upload and download](documents/ojs-widgets/index.qmd)
-- [OJS and ggplot plots](documents/ojs-plots/index.qmd)
-- [OJS linked plots](documents/ojs-linked/index.qmd)
+- [OJS and R](documents/ojs)
+- [OJS widgets, upload and download](documents/ojs-widgets)
+- [OJS and ggplot plots](documents/ojs-plots)
+- [OJS linked plots](documents/ojs-linked)
 
 ## WebR
 
 [WebR](https://docs.r-wasm.org/webr/latest/) allows to run R in the browser. Try out a [demo](https://webr.r-wasm.org/latest/) of R IDE running in the browser. R packages need to be specifically compiled for use with webr. He is the current list of [webr R packages](https://repo.r-wasm.org).
 
-- [WebR in HTML report using Quarto webr extension](documents/webr/index.qmd)
-- [WebR in RevealJS presentation](documents/webr-revealjs/index.qmd)
-- Intro to WebR & Shinylive by George Stagg: <https://www.youtube.com/watch?v=GlZKReTx8GA>
+- [WebR in HTML report using Quarto webr extension](documents/webr)
+- [WebR in RevealJS presentation](documents/webr-revealjs)
+- [WebR with Shinylive](documents/webr-shinylive)
+
+Intro to WebR & Shinylive by George Stagg: <https://www.youtube.com/watch?v=GlZKReTx8GA>
 
 ## Shinylive
 
 Shinylive allows shiny applications to run in the browser wthout the need for a Shiny server. Shinylive is available for R and Python.
 
-- [Shiny app in the browser](documents/shinylive/index.qmd)
+- [Shiny app in the browser](documents/shinylive)
+- [WebR with Shinylive](documents/webr-shinylive)
 
 ## Other
 
-- [Icons in quarto](documents/icons/index.qmd)
+- [Icons in quarto](documents/icons)
 
 <br>