Working input scaffold; dedup package.json and webpack templates

Author: alandipert

NAMESPACE

@@ -12,5 +12,6 @@ export(html_dependency_corejs)
 export(html_dependency_react)
 export(html_dependency_reacttools)
 export(reactMarkup)
+export(scaffoldReactInput)
 export(scaffoldReactWidget)
 importFrom(htmltools,htmlDependency)

R/reacttools.R

@@ -119,10 +119,10 @@ createReactInput <- function(inputId,
     container(id = inputId, class = class),
     htmltools::tags$script(id = sprintf("%s_value", inputId),
                            type = "application/json",
-                           jsonlite::toJSON(value, auto_unbox = FALSE)),
+                           jsonlite::toJSON(value, auto_unbox = TRUE)),
     htmltools::tags$script(id = sprintf("%s_configuration", inputId),
                            type = "application/json",
-                           jsonlite::toJSON(configuration, auto_unbox = FALSE)),
+                           jsonlite::toJSON(configuration, auto_unbox = TRUE)),
     html_dependency_react(),
     html_dependency_reacttools(),
     dependencies

R/scaffold_input.R

@@ -16,37 +16,61 @@
 #'
 #' @export
 scaffoldReactInput <- function(name, npmPkgs = NULL, edit = interactive()) {
-  if (!file.exists('DESCRIPTION')){
-    stop(
-      "You need to create a package to house your widget first!",
-      call. = F
-    )
-  }
-
-  package <- read.dcf('DESCRIPTION')[[1,"Package"]]
+  package <- getPackage()
 
-  # Add input constructor
-  renderFile(
+  file <- renderFile(
     sprintf("R/%s.R", name),
     "templates/input_r.txt",
     "boilerplate for input constructor",
     list(
       name = name,
-      package = package,
-      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
     )
   )
-  # addInputConstructor(name, package, edit)
-  # addInputJSON(toDepJSON(npmPkgs))
-  # addWebpackConfig(name)
-  # addWidgetJS(name, edit)
-  # addExampleApp(name)
-  #
-  # 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")
+
+  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")
 }
 

R/scaffold_utils.R

@@ -46,3 +46,9 @@ renderFile <- function(outputFile, templateFile, description = '', substitutions
   outputFile
 }
 
+getPackage <- function() {
+  if (!file.exists('DESCRIPTION')) {
+    stop("You need to create a package to house your widget first!", call. = FALSE)
+  }
+  read.dcf('DESCRIPTION')[[1,"Package"]]
+}

R/scaffold_widget.R

@@ -16,14 +16,8 @@
 #'
 #' @export
 scaffoldReactWidget <- function(name, npmPkgs = NULL, edit = interactive()){
-  if (!file.exists('DESCRIPTION')){
-    stop(
-      "You need to create a package to house your widget first!",
-      call. = F
-    )
-  }
+  package <- getPackage()
 
-  package <- read.dcf('DESCRIPTION')[[1,"Package"]]
   addWidgetConstructor(name, package, edit)
   addWidgetYAML(name, edit)
   addPackageJSON(toDepJSON(npmPkgs))
@@ -65,7 +59,7 @@ addWidgetYAML <- function(name, edit){
 addPackageJSON <- function(npmPkgs) {
   renderFile(
     'package.json',
-    'templates/widget_package.json.txt',
+    'templates/package.json.txt',
     'project metadata',
     list(npmPkgs = npmPkgs)
   )
@@ -74,9 +68,12 @@ addPackageJSON <- function(npmPkgs) {
 addWebpackConfig <- function(name) {
   renderFile(
     'webpack.config.js',
-    'templates/widget_webpack.config.js.txt',
+    'templates/webpack.config.js.txt',
     'webpack configuration',
-    list(name = name)
+    list(
+      name = name,
+      outputPath = 'inst/htmlwidgets'
+    )
   )
 }
 

inst/templates/input_app.R.txt

@@ -0,0 +1,16 @@
+library(shiny)
+library(${package})
+
+ui <- fluidPage(
+  titlePanel("reactR Input Example"),
+  ${name}Input("textInput"),
+  textOutput("textOutput")
+)
+
+server <- function(input, output, session) {
+  output$textOutput <- renderText({
+    sprintf("You entered: %s", input$textInput)
+  })
+}
+
+shinyApp(ui, server)

inst/templates/input_js.txt

@@ -0,0 +1,7 @@
+import { reactInput } from 'reactR';
+
+const TextInput = ({ configuration, value, setValue }) => {
+  return <input type='text' value={value} onChange={e => setValue(e.target.value)}/>;
+};
+
+reactInput('.${name}', '${package}.${name}', TextInput);

inst/templates/input_r.txt

@@ -15,8 +15,8 @@ ${name}Input <- function(inputId, default = "") {
     htmlDependency(
       name = "${name}-input",
       version = "1.0.0",
-      src = "www/${name}",
-      package = "${name}",
+      src = "www/${package}/${name}",
+      package = "${package}",
       script = "${name}.js"
     ),
     value,

inst/templates/widget_package.json.txt inst/templates/package.json.txtinst/templates/widget_package.json.txt renamed to inst/templates/package.json.txt

@@ -2,15 +2,16 @@ var path = require('path');
 
 module.exports = {
     mode: 'development',
-    entry: path.join(__dirname, 'srcjs', '${name}.js'),
+    entry: path.join(__dirname, 'srcjs', '${name}.jsx'),
     output: {
-        path: path.join(__dirname, 'inst', 'htmlwidgets'),
+        path: path.join(__dirname, 'inst', 'www', '${package}', '${name}'),
+        path: path.join(__dirname, '${outputPath}'),
         filename: '${name}.js'
     },
     module: {
         rules: [
             {
-                test: /\.js$/,
+                test: /\.jsx?$/,
                 loader: 'babel-loader',
                 options: {
                     presets: ['@babel/preset-env', '@babel/preset-react']