daattali / shinyalert

🗯️ Easily create pretty popup messages (modals) in Shiny
https://daattali.com/shiny/shinyalert-demo/
Other
239 stars 26 forks source link

Doesn't work in {shinylive} #88

Open daattali opened 1 month ago

daattali commented 1 month ago

https://github.com/posit-dev/r-shinylive/issues/86

daattali commented 3 weeks ago

@gadenbuie do you have any insights on why this package doesn't seem to work with shinylive?

Simple reprex (shinylive.io link):

library(shiny)
library(shinyalert)

ui <- fluidPage(
  actionButton("preview", "Preview")
)

server <- function(input, output, session) {
  observeEvent(input$preview, {
    shinyalert("test")
  })
}

shinyApp(ui, server)
gadenbuie commented 3 weeks ago

It seems that something is going wrong with the dependency resolution. Here are my notes in investigating this so far. In the example app above, shinyalert's HTML dependencies are added to the page with an insertUI() call:

https://github.com/daattali/shinyalert/blob/b632e61147bd518b90f610cc166764453fdd9d38/R/shinyalert.R#L279-L279

If you include useShinyalert(force = TRUE) in the app (shinylive example), shinyalert works as expected.

library(shiny)
library(shinyalert)

ui <- fluidPage(
  # useShinyalert(force=TRUE), #<< uncomment to get working
  actionButton("preview", "Preview")
)

server <- function(input, output, session) {
  observeEvent(input$preview, {
    shinyalert("test")
  })
}

shinyApp(ui, server)

In app I just linked, on shinylive I turned on tracing, where you can see the insertUI message:

{
  "shiny-insert-ui": {
    "selector": "head",
    "multiple": false,
    "where": "beforeEnd",
    "content": {
      "html": "<!--SHINY.SINGLETON[7cf2e3ceec8581b6ed0123813e6fa97f0034bc80]-->\n<head>\n  <script src=\"shinyalert-assets/shared/sweetalert-1.0.1/js/sweetalert.min.js\"><\\/script>\n  <link rel=\"stylesheet\" href=\"shinyalert-assets/shared/sweetalert-1.0.1/css/sweetalert.min.css\"/>\n  <script src=\"shinyalert-assets/shared/swalservice/swalservice.min.js\"><\\/script>\n  <script src=\"shinyalert-assets/srcjs/shinyalert.js\"><\\/script>\n  <link rel=\"stylesheet\" href=\"shinyalert-assets/css/shinyalert.css\"/>\n<\\/head>\n<!--/SHINY.SINGLETON[7cf2e3ceec8581b6ed0123813e6fa97f0034bc80]-->",
      "deps": []
    }
  }
}

Locally, this message is

{
  "shiny-insert-ui": {
    "selector": "head",
    "multiple": false,
    "where": "beforeEnd",
    "content": {
      "html": "",
      "deps": [
        {
          "name": "sweetalert-js",
          "version": "1.0.1",
          "src": {
            "href": "sweetalert-js-1.0.1"
          },
          "meta": null,
          "script": "js/sweetalert.min.js",
          "stylesheet": "css/sweetalert.min.css",
          "head": null,
          "attachment": null,
          "all_files": true
        },
        {
          "name": "swalservice-js",
          "version": "1.0.0",
          "src": {
            "href": "swalservice-js-1.0.0"
          },
          "meta": null,
          "script": "swalservice.min.js",
          "stylesheet": null,
          "head": null,
          "attachment": null,
          "all_files": true
        },
        {
          "name": "shinyalert-binding",
          "version": "3.1.0",
          "src": {
            "href": "shinyalert-binding-3.1.0"
          },
          "meta": null,
          "script": "shinyalert.js",
          "stylesheet": "shinyalert.css",
          "head": null,
          "attachment": null,
          "all_files": true
        }
      ]
    }
  }
}

Which is clearly quite different. I'm going to ask around to see if shinylive does something special with html dependencies.

gadenbuie commented 3 weeks ago

Ah! The reason the messages are different is because the shinyalert package versions are different. https://shinylive.io currently has shinyalert 3.0.0, which used a different method for attaching html dependencies that doesn't work on shinylive. We'll be releasing a shinylive update soon, which will include an update for CRAN packages, at which point the latest version of shinyalert will work on shinylive.io

daattali commented 3 weeks ago

Yep you're right that the newest CRAN version is using the better htmlDependency(). But even though I have the latest versions of shinyalert and shinylive, I still can't seem to get the code above to work for me locally. Are you actually able to get it to work locally?

daattali commented 3 weeks ago

I just noticed the warning message I get from shinylive:

Warning messages:
1: Package version mismatch for "shinyalert", ensure the versions below are compatible.
! Installed version: 3.1.0, WebAssembly version: 3.0.0.
ℹ Install a package version matching the WebAssembly version to silence this error.

So I suppose I'm not getting it to work locally because I'm not actually using the latest shinyalert version. I don't understand why webassembly is using shinyalert v3.0.0 though, because https://repo.r-wasm.org/ says it has version 3.1.0 - is there a way for me to update that?

gadenbuie commented 2 weeks ago

shinylive is still using R 4.3 for now until the next release of shinylive (will be out soon). At the moment, the r-wasm repo doesn't update older versions of R, so shinyalert is up-to-date in R 4.4 but out-of-date in the R 4.3 repo.

daattali commented 2 weeks ago

Got it. So you also could not get it to work as of right now, correct?