Easy React-based input bindings

.Rbuildignore

@@ -4,16 +4,16 @@
 ^pkgdown$
 ^assets$
 ^.*\.Rproj$
-^\.Rproj\.user$
-^\build
 ^CONDUCT\.md$
-^cran-comments\.md$
-^docs$
+^README\.Rmd$
+^\.Rproj\.user$
 ^\.travis\.yml$
-^\assets
+^build$
+^docs$
+^cran-comments\.md$
 ^karma\.conf\.js$
+^logo.svg$
 ^package\.json$
+^webpack\.config\.js$
 ^yarn\.lock$
-^README\.Rmd$
-logo.svg
-webpack.config.js
+^logo\.svg$

.gitignore

@@ -1,3 +1,5 @@
+Meta
+doc
 .Rproj.user
 .Rhistory
 .RData

DESCRIPTION

@@ -39,6 +39,7 @@ Suggests:
     shiny,
     V8,
     knitr,
-    usethis
+    usethis,
+    jsonlite
 RoxygenNote: 6.1.1
 VignetteBuilder: knitr

NAMESPACE

@@ -7,9 +7,11 @@ S3method("[[<-",react_component_builder)
 export(React)
 export(babel_transform)
 export(component)
+export(createReactShinyInput)
 export(html_dependency_corejs)
 export(html_dependency_react)
 export(html_dependency_reacttools)
 export(reactMarkup)
+export(scaffoldReactShinyInput)
 export(scaffoldReactWidget)
 importFrom(htmltools,htmlDependency)

R/reacttools.R

@@ -92,3 +92,56 @@ reactMarkup <- function(tag) {
   list(tag = tag, class = "reactR_markup")
 }
 
+#' Create a React-based input
+#'
+#' @param inputId The \code{input} slot that will be used to access the value.
+#' @param class Space-delimited list of CSS class names that should identify
+#'   this input type in the browser.
+#' @param dependencies HTML dependencies to include in addition to those
+#'   supporting React. Must contain at least one dependency, that of the input's
+#'   implementation.
+#' @param default Initial value.
+#' @param configuration Static configuration data.
+#' @param container Function to generate an HTML element to contain the input.
+#'
+#' @return Shiny input suitable for inclusion in a UI.
+#' @export
+#'
+#' @examples
+#' myInput <- function(inputId, default = "") {
+#'   # The value of createReactShinyInput should be returned from input constructor functions.
+#'   createReactShinyInput(
+#'     inputId,
+#'     "myinput",
+#'     # At least one htmlDependency must be provided -- the JavaScript implementation of the input.
+#'     htmlDependency(
+#'       name = "my-input",
+#'       version = "1.0.0",
+#'       src = "www/mypackage/myinput",
+#'       package = "mypackage",
+#'       script = "myinput.js"
+#'     ),
+#'     default
+#'   )
+#' }
+createReactShinyInput <- function(inputId,
+                             class,
+                             dependencies,
+                             default = NULL,
+                             configuration = list(),
+                             container = htmltools::tags$div) {
+  if(length(dependencies) < 1) stop("Must include at least one HTML dependency.")
+  value <- shiny::restoreInput(id = inputId, default = default)
+  htmltools::tagList(
+    container(id = inputId, class = class),
+    htmltools::tags$script(id = sprintf("%s_value", inputId),
+                           type = "application/json",
+                           jsonlite::toJSON(value, auto_unbox = TRUE)),
+    htmltools::tags$script(id = sprintf("%s_configuration", inputId),
+                           type = "application/json",
+                           jsonlite::toJSON(configuration, auto_unbox = TRUE)),
+    html_dependency_react(),
+    html_dependency_reacttools(),
+    dependencies
+  )
+}

R/scaffold_input.R

@@ -0,0 +1,78 @@
+#' Create implementation scaffolding for a React.js-based Shiny input.
+#'
+#' Add the minimal code required to implement a React.js-based Shiny input to an
+#' R package.
+#'
+#' @param name Name of input
+#' @param npmPkgs Optional \href{https://npmjs.com/}{NPM} packages upon which
+#'   this input is based which will be used to populate \code{package.json}.
+#'   Should be a named list of names to
+#'   \href{https://docs.npmjs.com/files/package.json#dependencies}{versions}.
+#' @param edit Automatically open the input's source files after creating the
+#'   scaffolding.
+#'
+#' @note This function must be executed from the root directory of the package
+#'   you wish to add the input to.
+#'
+#' @export
+scaffoldReactShinyInput <- function(name, npmPkgs = NULL, edit = interactive()) {
+  assertNameValid(name)
+  package <- getPackage()
+
+  file <- renderFile(
+    sprintf("R/%s.R", name),
+    "templates/input_r.txt",
+    "boilerplate for input constructor",
+    list(
+      name = name,
+      capName = capitalize(name),
+      package = package
+    )
+  )
+  if (edit) fileEdit(file)
+
+  renderFile(
+    'package.json',
+    'templates/package.json.txt',
+    'project metadata',
+    list(npmPkgs = toDepJSON(npmPkgs))
+  )
+
+  renderFile(
+    'webpack.config.js',
+    'templates/webpack.config.js.txt',
+    'webpack configuration',
+    list(
+      name = name,
+      outputPath = sprintf("inst/www/%s/%s", package, name)
+    )
+  )
+
+  renderFile(
+    sprintf('srcjs/%s.jsx', name),
+    'templates/input_js.txt',
+    'JavaScript implementation',
+    list(
+      name = name,
+      package = package
+    )
+  )
+
+  renderFile(
+    'app.R',
+    'templates/input_app.R.txt',
+    'example app',
+    list(
+      name = name,
+      package = package
+    )
+  )
+
+  usethis::use_build_ignore(c("node_modules", "srcjs"))
+  usethis::use_git_ignore(c("node_modules"))
+  lapply(c("htmltools", "htmlwidgets", "reactR"), usethis::use_package)
+
+  message("To install dependencies from npm run: yarn install")
+  message("To build JavaScript run: yarn run webpack --mode=development")
+}
+