add experimental Vue 3 support #10

Author: timelyportfolio

CRAN-RELEASE

@@ -1,8 +1,8 @@
 Package: vueR
 Type: Package
 Title: 'Vuejs' Helpers and 'Htmlwidget'
-Version: 0.5.3
-Date: 2021-11-25
+Version: 0.6
+Date: 2022-01-03
 Authors@R: c(
       person(
         "Evan","You"

DESCRIPTION

@@ -1,8 +1,12 @@
 # Generated by roxygen2: do not edit by hand
 
 export(html_dependency_vue)
+export(html_dependency_vue3)
 export(renderVue)
+export(renderVue3)
 export(vue)
+export(vue3)
+export(vue3Output)
 export(vueOutput)
 import(htmlwidgets)
 importFrom(htmltools,htmlDependency)

NAMESPACE

@@ -7,6 +7,7 @@
 #'
 #' @return \code{\link[htmltools]{htmlDependency}}
 #' @importFrom htmltools htmlDependency
+#' @family dependencies
 #' @export
 #'
 #' @examples
@@ -53,3 +54,64 @@ html_dependency_vue <- function(offline=TRUE, minified=TRUE){
 
   hd
 }
+
+
+#' Dependencies for 'Vue3'
+#'
+#' @param offline \code{logical} to use local file dependencies.  If \code{FALSE},
+#'          then the dependencies use cdn as its \code{src}.
+#' @param minified \code{logical} to use minified (production) version.  Use
+#'          \code{minified = FALSE} for debugging or working with Vue devtools.
+#'
+#' @return \code{\link[htmltools]{htmlDependency}}
+#' @importFrom htmltools htmlDependency
+#' @family dependencies
+#' @export
+#'
+#' @examples
+#' if(interactive()){
+#'
+#' library(vueR)
+#' library(htmltools)
+#'
+#' browsable(
+#'   tagList(
+#'     tags$div(id="app","{{message}}"),
+#'     tags$script(
+#'     "
+#'     var app = {
+#'       data: function() {
+#'         return {
+#'           message: 'Hello Vue!'
+#'         }
+#'       }
+#'     };
+#'
+#'     Vue.createApp(app).mount('#app');
+#'     "
+#'     ),
+#'     html_dependency_vue3()
+#'   )
+#' )
+#' }
+html_dependency_vue3 <- function(offline=TRUE, minified=TRUE){
+  hd <- htmltools::htmlDependency(
+    name = "vue",
+    version = vue3_version(),
+    src = system.file("www/vue3/dist",package="vueR"),
+    script = "vue.global.prod.js"
+  )
+
+  if(!minified) {
+    hd$script <- "vue.global.js"
+  }
+
+  if(!offline) {
+    hd$src <- list(href=sprintf(
+      "https://unpkg.com/vue@%s/dist/",
+      vue3_version()
+    ))
+  }
+
+  hd
+}

R/dependencies.R

@@ -1,2 +1,5 @@
 #'@keywords internal
 vue_version <- function(){'2.6.14'}
+
+#'@keywords internal
+vue3_version <- function(){'3.2.26'}

R/meta.R

@@ -15,6 +15,7 @@
 #'
 #' @import htmlwidgets
 #'
+#' @family htmlwidget
 #' @export
 #' @example ./inst/examples/vue_widget_examples.R
 #' @return vue htmlwidget
@@ -45,6 +46,56 @@ vue <- function(
   hw
 }
 
+#' 'Vue.js 3' 'htmlwidget'
+#'
+#' Use 'Vue.js 3' with the convenience and flexibility of 'htmlwidgets'.
+#' \code{vue3} is a little different from other 'htmlwidgets' though
+#' since it requires specification of the HTML tags/elements separately.
+#'
+#' @param app \code{list} with \code{el} and \code{data} and other pieces
+#'          of a 'Vue.js 3' app
+#' @param width,height any valid \code{CSS} size unit, but in reality
+#'          this will not currently have any impact
+#' @param elementId \code{character} id of the htmlwidget container
+#'          element
+#' @param minified \code{logical} to indicate minified (\code{minified=TRUE}) or
+#'          non-minified (\code{minified=FALSE}) Vue.js
+#'
+#' @import htmlwidgets
+#'
+#' @family htmlwidget
+#' @export
+#' @example ./inst/examples/vue3_widget_examples.R
+#' @return vue htmlwidget
+
+vue3 <- function(
+  app = list(),
+  width = NULL, height = NULL, elementId = NULL,
+  minified = TRUE
+) {
+
+  # forward options using x
+  x = app
+
+  # will try to convert data that is not a function in widget JS
+
+  # create widget
+  hw <- htmlwidgets::createWidget(
+    name = 'vue3',
+    x,
+    width = width,
+    height = height,
+    package = 'vueR',
+    elementId = elementId
+  )
+
+  hw$dependencies <- list(
+    html_dependency_vue3(offline=TRUE, minified=minified)
+  )
+
+  hw
+}
+
 #' Shiny bindings for vue
 #'
 #' Output and render functions for using vue within Shiny
@@ -62,6 +113,7 @@ vue <- function(
 #' @name vue-shiny
 #'
 #' @export
+#' @example ./inst/examples/vue3_shiny_examples.R
 vueOutput <- function(outputId, width = '100%', height = '400px'){
   htmlwidgets::shinyWidgetOutput(outputId, 'vue', width, height, package = 'vueR')
 }
@@ -72,3 +124,32 @@ renderVue <- function(expr, env = parent.frame(), quoted = FALSE) {
   if (!quoted) { expr <- substitute(expr) } # force quoted
   htmlwidgets::shinyRenderWidget(expr, vueOutput, env, quoted = TRUE)
 }
+
+
+#' Shiny bindings for 'vue 3'
+#'
+#' Output and render functions for using 'vue 3' within Shiny
+#' applications and interactive Rmd documents.
+#'
+#' @param outputId output variable to read from
+#' @param width,height Must be a valid CSS unit (like \code{'100\%'},
+#'   \code{'400px'}, \code{'auto'}) or a number, which will be coerced to a
+#'   string and have \code{'px'} appended.
+#' @param expr An expression that generates a vue
+#' @param env The environment in which to evaluate \code{expr}.
+#' @param quoted Is \code{expr} a quoted expression (with \code{quote()})? This
+#'   is useful if you want to save an expression in a variable.
+#'
+#' @name vue-shiny
+#'
+#' @export
+vue3Output <- function(outputId, width = '100%', height = '400px'){
+  htmlwidgets::shinyWidgetOutput(outputId, 'vue3', width, height, package = 'vueR')
+}
+
+#' @rdname vue-shiny
+#' @export
+renderVue3 <- function(expr, env = parent.frame(), quoted = FALSE) {
+  if (!quoted) { expr <- substitute(expr) } # force quoted
+  htmlwidgets::shinyRenderWidget(expr, vueOutput, env, quoted = TRUE)
+}

R/vue.R

@@ -31,8 +31,9 @@ download.file(
 #  for use when creating dependencies
 cat(
   sprintf(
-    "#'@keywords internal\nvue_version <- function(){'%s'}\n",
-    get_vue_latest()
+    "#'@keywords internal\nvue_version <- function(){'%s'}\n#'@keywords internal\nvue3_version <- function(){'%s'}\n",
+    get_vue_latest(),
+    "3.2.26" #hard coded for now
   ),
   file = "./R/meta.R"
 )

build/getvue.R

@@ -1,6 +1,6 @@
 ## Comments
 
-Second submission resolving license issue...
+Second submission resolving license issue by using CRAN template.
 
 ```
 Thanks, we see:

cran-comments.md

@@ -0,0 +1,33 @@
+if(interactive()) {
+
+  library(shiny)
+  library(vueR)
+
+  ui <- tagList(
+    tags$div(id="app-3",
+      tags$p("v-if"="seen", "Now you see me")
+    ),
+    vue3Output('vue1')
+  )
+
+  server <- function(input, output, session) {
+    output$vue1 <- renderVue3({
+      vue3(
+        list(
+          el = '#app-3',
+          data = list(seen = TRUE),
+          mounted = htmlwidgets::JS("function() {var that = this; setInterval(function(){that.seen=!that.seen},1000);}"),
+          watch = list(
+            seen = htmlwidgets::JS("function() {Shiny.setInputValue('seen',this.seen)}")
+          )
+        )
+      )
+    })
+
+    # show that Shiny input value is being updated
+    observeEvent(input$seen, {print(input$seen)})
+  }
+
+  shinyApp(ui, server)
+
+}

inst/examples/vue3_shiny_examples.R

@@ -0,0 +1,66 @@
+if(interactive()) {
+
+  library(vueR)
+  library(htmltools)
+
+  # recreate Hello Vue! example
+  browsable(
+    tagList(
+      tags$div(id="app", "{{message}}"),
+      vue3(
+        list(
+          el = "#app",
+          # vue 3 is more burdensome but robust requiring data as function
+          #   if data is not a function then widget will auto-convert
+          data = list(message = "Hello Vue3!")
+          # data = htmlwidgets::JS("
+          #   function() {return {message: 'Hello Vue3!'}}
+          # ")
+        )
+      )
+    )
+  )
+
+  # app2 from Vue.js introduction
+  browsable(
+    tagList(
+      tags$div(id="app-2",
+        tags$span(
+          "v-bind:title" = "message",
+          "Hover your mouse over me for a few seconds to see my dynamically bound title!"
+        )
+      ),
+      vue3(
+        list(
+          el = "#app-2",
+          # vue 3 is more burdensome but robust requiring data as function
+          #   if data is not a function then widget will auto-convert
+          data = htmlwidgets::JS("
+            function() {
+              return {message: 'You loaded this page on ' + new Date()}
+            }
+          ")
+        )
+      )
+    )
+  )
+
+  # app3 from Vue.js introduction
+  #  with a setInterval to toggle seen true and false
+  browsable(
+    tagList(
+      tags$div(id="app-3",
+        tags$p("v-if"="seen", "Now you see me")
+      ),
+      vue3(
+        list(
+          el = '#app-3',
+          data = list(seen = TRUE),
+          # data = htmlwidgets::JS("function() {return {seen: true}}"),
+          mounted = htmlwidgets::JS("function() {var that = this; setInterval(function(){that.seen=!that.seen},1000);}")
+        )
+      )
+    )
+  )
+
+}

inst/examples/vue3_widget_examples.R

@@ -7,7 +7,7 @@ if(interactive()) {
   browsable(
     tagList(
       tags$div(id="app", "{{message}}"),
-      vue(
+      vue3(
         list(
           el = "#app",
           data = list(

inst/examples/vue_widget_examples.R

@@ -0,0 +1,48 @@
+HTMLWidgets.widget({
+
+  name: 'vue3',
+
+  type: 'output',
+
+  factory: function(el, width, height) {
+
+    var instance = {};
+
+    return {
+
+      renderValue: function(x) {
+        // if x.el is specified then use it and
+        //   hide our htmlwidget container
+        if(x.el) {
+          el.style.display = "none";
+        } else {
+          // x.el not specified so use our htmlwidget el
+          //  container for our Vue app but this will
+          //  will probably not work as expected
+          //  since the tag is just a div
+          x.el = "#" + el.id;
+        }
+
+        // Vue 3 requires data to be a function
+        //  so if not a function then we will auto-convert to a function
+        if(typeof(x.data) !== 'function') {
+          var dat = Object.assign({}, x.data);
+          x.data = function() {return dat};
+        }
+
+        this.instance = Vue.createApp(x).mount(x.el);
+
+      },
+
+      resize: function(width, height) {
+
+        // for now ignore resize hopefully without
+        //   much consequence
+
+      },
+
+      instance: instance
+
+    };
+  }
+});