Merge pull request #13 from vue-r/dev

add vue3

Author: timelyportfolio

.github/workflows/R-CMD-check.yaml

@@ -1,4 +1,4 @@
-# Workflow derived from https://github.com/r-lib/actions/tree/master/examples
+# Workflow derived from https://github.com/r-lib/actions/tree/v2/examples
 # Need help debugging build failures? Start at https://github.com/r-lib/actions#where-to-find-help
 on:
   push:
@@ -18,7 +18,7 @@ jobs:
       fail-fast: false
       matrix:
         config:
-          - {os: macOS-latest,   r: 'release'}
+          - {os: macos-latest,   r: 'release'}
           - {os: windows-latest, r: 'release'}
           - {os: ubuntu-latest,   r: 'devel', http-user-agent: 'release'}
           - {os: ubuntu-latest,   r: 'release'}
@@ -29,30 +29,21 @@ jobs:
       R_KEEP_PKG_SOURCE: yes
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: r-lib/actions/setup-pandoc@v1
+      - uses: r-lib/actions/setup-pandoc@v2
 
-      - uses: r-lib/actions/setup-r@v1
+      - uses: r-lib/actions/setup-r@v2
         with:
           r-version: ${{ matrix.config.r }}
           http-user-agent: ${{ matrix.config.http-user-agent }}
           use-public-rspm: true
 
-      - uses: r-lib/actions/setup-r-dependencies@v1
+      - uses: r-lib/actions/setup-r-dependencies@v2
         with:
-          extra-packages: rcmdcheck
+          extra-packages: any::rcmdcheck
+          needs: check
 
-      - uses: r-lib/actions/check-r-package@v1
-
-      - name: Show testthat output
-        if: always()
-        run: find check -name 'testthat.Rout*' -exec cat '{}' \; || true
-        shell: bash
-
-      - name: Upload check results
-        if: failure()
-        uses: actions/upload-artifact@main
+      - uses: r-lib/actions/check-r-package@v2
         with:
-          name: ${{ runner.os }}-r${{ matrix.config.r }}-results
-          path: check
+          upload-snapshots: true

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.0
+Date: 2023-10-01
 Authors@R: c(
       person(
         "Evan","You"
@@ -31,5 +31,5 @@ Suggests:
     rmarkdown,
     shiny,
     testthat
-RoxygenNote: 7.1.2
+RoxygenNote: 7.2.3
 VignetteBuilder: knitr

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

@@ -1,3 +1,8 @@
+# vueR 0.6.0
+
+* add `vue3` set of functions with vue3 @ `3.3.4`; see [issue 10](https://github.com/vue-r/vueR/issues/10)
+* update vue2 to 2.7.14
+
 # vueR 0.5.3
 
 * update vue to 2.6.14

NEWS.md

@@ -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,4 @@
 #'@keywords internal
-vue_version <- function(){'2.6.14'}
+vue_version <- function(){'2.7.14'}
+#'@keywords internal
+vue3_version <- function(){'3.3.4'}

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

@@ -15,6 +15,7 @@ knitr::opts_chunk$set(
 <!-- badges: start -->
 [![R-CMD-check](https://github.com/vue-r/vueR/workflows/R-CMD-check/badge.svg)](https://github.com/vue-r/vueR/actions)
 [![CRAN status](https://www.r-pkg.org/badges/version/vueR)](https://CRAN.R-project.org/package=vueR)
+[![R-CMD-check](https://github.com/vue-r/vueR/actions/workflows/R-CMD-check.yaml/badge.svg)](https://github.com/vue-r/vueR/actions/workflows/R-CMD-check.yaml)
 <!-- badges: end -->
 
 [Vue.js](https://vuejs.org) is a quiet, very popular JavaScript framework with an impressive set of features, a solid community, and MIT license.  Don't tell anybody, but I think I might even like it better than React.  With all this, Vue deserves its own set of helpers for `R`, just like [`d3r`](https://github.com/timelyportfolio/d3r) and [`reactR`](https://github.com/react-r/reactR).

README.Rmd

@@ -9,8 +9,16 @@ get_vue_latest <- function(){
   )
 }
 
+get_vue3_latest <- function(){
+  gsub(
+    x=github::get.latest.release("vuejs", "core")$content$tag_name,
+    pattern="v",
+    replacement=""
+  )
+}
 
-# get newest vue
+
+# get newest vue2
 download.file(
   url=sprintf(
     "https://unpkg.com/vue@%s/dist/vue.min.js",
@@ -27,12 +35,30 @@ download.file(
   destfile="./inst/www/vue/dist/vue.js"
 )
 
+# get newest vue3
+download.file(
+  url=sprintf(
+    "https://unpkg.com/vue@%s/dist/vue.global.prod.js",
+    get_vue3_latest()
+  ),
+  destfile="./inst/www/vue3/dist/vue.global.prod.js"
+)
+
+download.file(
+  url=sprintf(
+    "https://unpkg.com/vue@%s/dist/vue.global.js",
+    get_vue3_latest()
+  ),
+  destfile="./inst/www/vue3/dist/vue.global.js"
+)
+
 # write function with newest version
 #  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(),
+    get_vue3_latest()
   ),
   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: