experiment with htmlwidget, improve README.md, and create some examples

Author: timelyportfolio

.gitignore

@@ -2,3 +2,4 @@
 .Rhistory
 .RData
 .Ruserdata
+inst/doc

DESCRIPTION

@@ -24,11 +24,11 @@ BugReports: https://github.com/timelyportfolio/vueR/issues
 License: MIT + file LICENSE
 LazyData: TRUE
 Imports:
-    htmltools
+    htmltools,
+    htmlwidgets (>= 0.6.0)    
 Suggests:
-    htmlwidgets (>= 0.6.0),
+    knitr,
     rmarkdown,
-    shiny,
-    knitr
+    shiny
 RoxygenNote: 5.0.1
 VignetteBuilder: knitr

LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

NAMESPACE

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

R/vue.R

@@ -0,0 +1,61 @@
+#' 'Vue.js' 'htmlwidget'
+#'
+#' Use 'Vue.js' with the convenience and flexibility of 'htmlwidgets'.
+#' \code{vue} is a little different from other 'htmlwidgets' though
+#' since it requires specification of the HTML tags/elements separately.
+#'
+#' @import htmlwidgets
+#'
+#' @export
+#' @example ./inst/examples/vue_widget_examples.R
+#' @return vue htmlwidget
+
+vue <- function(app = list(), width = NULL, height = NULL, elementId = NULL) {
+
+  # forward options using x
+  x = app
+
+  # create widget
+  hw <- htmlwidgets::createWidget(
+    name = 'vue',
+    x,
+    width = width,
+    height = height,
+    package = 'vueR',
+    elementId = elementId
+  )
+
+  hw$dependencies <- list(
+    html_dependency_vue(offline=TRUE)
+  )
+
+  hw
+}
+
+#' Shiny bindings for vue
+#'
+#' Output and render functions for using vue 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
+vueOutput <- function(outputId, width = '100%', height = '400px'){
+  htmlwidgets::shinyWidgetOutput(outputId, 'vue', width, height, package = 'vueR')
+}
+
+#' @rdname vue-shiny
+#' @export
+renderVue <- function(expr, env = parent.frame(), quoted = FALSE) {
+  if (!quoted) { expr <- substitute(expr) } # force quoted
+  htmlwidgets::shinyRenderWidget(expr, vueOutput, env, quoted = TRUE)
+}

README.Rmd

@@ -14,6 +14,48 @@ knitr::opts_chunk$set(
 
 [![Travis-CI Build Status](https://travis-ci.org/timelyportfolio/vuer.svg?branch=master)](https://travis-ci.org/timelyportfolio/vueR)[![CRAN_Status_Badge](http://www.r-pkg.org/badges/version/vueR)](https://cran.r-project.org/package=vueR)
 
+[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/d3r) and [`reactR`](https://github.com/reactR).  
+
+`vueR` provides these helpers with its dependency function `html_dependency_vue` and ?htmlwidget?.
+
+
+### Installation
+
+`vueR` aims to achieve CRAN status, but for now, it only exists on Github.
+
+```
+devtools::install_github("timelyportfolio/vueR")
+```
+
+### Example
+
+We'll start with a recreation of the simple "Hello World" example from the Vue.js documentation.
+
+```{r eval=FALSE}
+library(htmltools)
+library(vueR)
+
+browsable(
+  attachDependencies(
+    tagList(
+      tags$div(id="app","{{message}}"),
+      tags$script(
+      "
+      var app = new Vue({
+        el: '#app',
+        data: {
+          message: 'Hello Vue!'
+        }
+      });
+      "
+      )
+    ),
+    html_dependency_vue()
+  )
+)
+```
+
+
 ### Code of Conduct
 
-Please note that this project is released with a [Contributor Code of Conduct](CONDUCT.md). By participating in this project you agree to abide by its terms.
+I would love for you to participate and help with `vueR`, but please note that this project is released with a [Contributor Code of Conduct](CONDUCT.md). By participating in this project you agree to abide by its terms.

README.md

@@ -2,6 +2,42 @@
 <!-- README.md is generated from README.Rmd. Please edit that file -->
 [![Travis-CI Build Status](https://travis-ci.org/timelyportfolio/vuer.svg?branch=master)](https://travis-ci.org/timelyportfolio/vueR)[![CRAN\_Status\_Badge](http://www.r-pkg.org/badges/version/vueR)](https://cran.r-project.org/package=vueR)
 
+[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/d3r) and [`reactR`](https://github.com/reactR).
+
+`vueR` provides these helpers with its dependency function `html_dependency_vue` and ?htmlwidget?.
+
+### Installation
+
+`vueR` aims to achieve CRAN status, but for now, it only exists on Github.
+
+    devtools::install_github("timelyportfolio/vueR")
+
+### Example
+
+We'll start with a recreation of the simple "Hello World" example from the Vue.js documentation.
+
+``` r
+library(htmltools)
+library(vueR)
+
+attachDependencies(
+  tagList(
+    tags$div(id="app","{{message}}"),
+    tags$script(
+    "
+    var app = new Vue({
+      el: '#app',
+      data: {
+        message: 'Hello Vue!'
+      }
+    });
+    "
+    )
+  ),
+  html_dependency_vue()
+)
+```
+
 ### Code of Conduct
 
 Please note that this project is released with a [Contributor Code of Conduct](CONDUCT.md). By participating in this project you agree to abide by its terms.

inst/examples/vue_widget_examples.R

@@ -0,0 +1,41 @@
+\dontrun{
+library(vueR)
+library(htmltools)
+
+# recreate Hello Vue! example
+browsable(
+  tagList(
+    tags$div(id="app", "{{message}}"),
+    vue(
+      list(
+        el = "#app",
+        data = list(
+          message = "Hello Vue!"
+        )
+      )
+    )
+  )
+)
+
+# 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!"
+      )
+    ),
+    vue(
+      list(
+        el = "#app-2",
+        data = list(
+          message =  htmlwidgets::JS(
+            "'You loaded this page on ' + new Date()"
+          )
+        )
+      )
+    )
+  )
+)
+}

inst/htmlwidgets/vue.js

@@ -0,0 +1,41 @@
+HTMLWidgets.widget({
+
+  name: 'vue',
+
+  type: 'output',
+
+  factory: function(el, width, height) {
+
+    var instance;
+
+    return {
+
+      instance: instance,
+
+      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;
+        }
+
+        instance = new Vue(x);
+
+      },
+
+      resize: function(width, height) {
+
+        // for now ignore resize hopefully without
+        //   much consequence
+
+      }
+
+    };
+  }
+});

inst/htmlwidgets/vue.yaml

@@ -0,0 +1,13 @@
+---
+title: "Intro to vueR"
+author: "Kenton Russell"
+date: "`r Sys.Date()`"
+output: rmarkdown::html_vignette
+vignette: >
+  %\VignetteIndexEntry{Intro to vueR}
+  %\VignetteEngine{knitr::rmarkdown}
+  %\VignetteEncoding{UTF-8}
+---
+
+All the awesomeness of [Vue.js](https://vuejs.org) is available in `R` with `vueR`.  We will work through some of the examples to give you a feel for both `Vue.js` and how to incorporate this powerful binding framework in your `R` workflows.
+