Htmltools Concrete Example

[MayaGans]

I think it'd help me to understand why to use htmltools instead of just include a script tag and style tag if we had a concrete example and not just dummy inputs like script.js and compare the two ways of doing it. I tried to put that together in an example below but am stumbling, so it'd be great to see that comparison (and I hope I've provided enough so you get where I'm going with this). In fact this example can also probably be used at the end of chapter 2 for the resourcePath section! I think keeping one example and following it all the way through would be super helpful

For instance a little repo where we can side by side look at including scripts without htmltools:

app.R

library(shiny)

ui <- fluidPage(
    includeCSS("assets/styles.css"),
    includeScript("assets/script.js"),
    tags$p(id="content", class="stuff", "Trying JavaScript!")
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

assets/script.js

var cnt = document.getElementById("content");
cnt.innerText = "The text has changed";

assets/style.css

body {
  color: red;
  font-size: 30px;
}

And with htmltools [although this is error-ing so I need some help!]

library(shiny)

ui <- fluidPage(
   tags$p(id="content", class="stuff", "Trying JavaScript!"),
    htmltools::htmlDependency(
        name = "myDependency",
        version = "1.0.0",
        src = "assets",
        stylesheet = "styles.css",
        script = c(file = "script.js"),
        package = "myPackage" # user package
        )
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

[JohnCoene]

I initially only used shiny::addResourcePath, I personally find that much clearer to understand: 1) serve static files 2) include JS or CSS in shiny very much like you "normally" would in an HTML document.

In my defence, I personally find htmltools::htmlDependency extremely confusing, though the function provides amazing functionalities its interface is unwieldy.

Also, it seems there may be a slight preference for htmltools::htmlDependency (n = 22 lol) but it also provides more features to managing dependencies (which are uncovered later in the book).

So I introduce both but where I can I use shiny::addResourcePath, I'm not sure this is good pedagogy: should I pick one only?

Re your actual point, it's a fair one that was raised by the reviewers of CRC Press and to which I try to remedy: in the introductions of parts of the book (sets of chapters) I give rather dull examples that are not engaging.

Perhaps here this could be achieved by also using head.

 writeLines("var x = 42;", "assets/script.js")

htmltools::htmlDependency(
  name = "myDependency",
  version = "1.0.0",
  src = "assets",
  script = c(file = "script.js"),
  package = "myPackage",
  head = "<script>alert(x)</script>"
)

[MayaGans]

I definitely think it's good to introduce both concepts as you have it. Your example above is perfect, and it's okay for the examples to be dull haha! I just think it'd be nice use the same example script across different methods, (so use that var x = 42) file later in the static file section so the reader can run both and see they produce the same result?

[MayaGans]

Also worth noting about my example as opposed to the alert is that it carries from the first html script introduced so that's kind of nice, and includes a stylesheet. Just a suggestion of course but it's less onerous on the user to build on a single example throughout the entire chapter I think!