https://github.com/dreamRs/jstools
Tools to work with JavaScript and CSS files
https://github.com/dreamRs/jstools
Last synced: 5 months ago
JSON representation
Tools to work with JavaScript and CSS files
- Host: GitHub
- URL: https://github.com/dreamRs/jstools
- Owner: dreamRs
- Created: 2019-10-23T08:15:05.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-30T15:11:45.000Z (over 4 years ago)
- Last Synced: 2024-07-29T19:26:16.672Z (9 months ago)
- Language: JavaScript
- Size: 1.42 MB
- Stars: 25
- Watchers: 4
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.Rmd
Awesome Lists containing this project
- jimsghstars - dreamRs/jstools - Tools to work with JavaScript and CSS files (JavaScript)
README
---
output: github_document
---
```{r, include = FALSE}
knitr::opts_chunk$set(
collapse = TRUE,
comment = "#>",
fig.path = "man/figures/README-",
out.width = "100%"
)
library(jstools)
```
# jstools
[](https://www.tidyverse.org/lifecycle/#experimental)
[](https://travis-ci.org/dreamRs/jstools)
[](https://github.com/dreamRs/jstools/actions)
> Set of tools to work with JavaScript and CSS (and addins to interactively use them in RStudio)
Disclaimer: I use this in my personnal workflow when working with JavaScript or CSS, some functionnalities are similar to [{js}](https://github.com/jeroen/js) or [{reactR}](https://github.com/react-R/reactR).
## Installation
You can install the development version from GitHub with:
``` r
# install.packages("remotes")
remotes::install_github("dreamRs/jstools")
```
## Prettier : format code
Via https://prettier.io/
`prettier_js()` allow to reformat JavaScript code:
```{r, eval=FALSE}
prettier_js("function add(first, second) { return first + second; }")
```
```{r, echo=FALSE, comment=""}
cat(prettier_js("function add(first, second) { return first + second; }"))
```
`pettier_css()` does the same thing for CSS:
```{r, eval=FALSE}
prettier_css("b{font-weight: bold;color:red;}")
```
```{r, echo=FALSE, comment=""}
cat(prettier_css("b{font-weight: bold;color:red;}"))
```
You can reformat a file with:
```{r, eval=FALSE}
prettier_file(input = "path/to/file.js", output = "path/to/reformated.js")
```
In Rstudio, you can use addin "Prettier" to reformat the current script (careful, it will overwrite it).
## Terser : JavaScript compressor
Via https://terser.org/
`terser()` can be used to compress JavaScript code :
```{r}
terser("function add(first, second) { return first + second; }")
```
You can compress a file (or several) with:
```{r, eval=FALSE}
terser_file(input = "path/to/file.js", output = "path/to/file.min.js")
terser_file(input = c("path/to/file1.js", "path/to/file2.js"), output = "path/to/file.min.js")
```
Source maps are crucial to the debugging process, thereby making it possible to reconstruct the original
JS code starting from a minified script. To correctly generate a source map, pass the __sourceMap__ option to `terser_options`.
`includeSources = TRUE` is mandatory so that files may be retrieved by the web browser developer tools.
The folder will have the provided __root__ as name so it is important to name it consistently:
```{r}
path <- system.file("testfiles/htmlwidgets.js", package = "jstools")
# source maps options
o <- terser_options(
sourceMap = list(
root = "../../htmlwidgets-sources",
filename = "htmlwidgets.min.js",
url = "htmlwidgets.min.js.map",
includeSources = TRUE
)
)
# returns a list containing the minified code an the source map
terser_file(input = path, options = o)
```
## JSHint : code validation
Via https://jshint.com/
`jshint()` detect errors in JavaScript code:
```{r}
res <- jshint(c("var a = 2;", "var foo = 1;", "b = 3", "a + c"))
res$errors[, c("line", "reason")]
```
Use with a file :
```{r}
path <- system.file("testfiles/example.js", package = "jstools")
jshint_file(input = path)
```
To validate a Shiny script, you can add `jQuery` and `Shiny` as global variables (same for `Htmlwidgets`:
```{r, eval=FALSE}
jshint_file(input = path, options = jshint_options(jquery = TRUE, globals = list("Shiny")))
```
You can check several scripts at once (for example custom Shiny input bindings in {shinyWidgets}):
```{r, eval=FALSE}
bindings <- list.files(
path = system.file("assets", package = "shinyWidgets"),
pattern = "bindings\\.js$",
recursive = TRUE,
full.names = TRUE
)
jshint_file(input = bindings, options = jshint_options(jquery = TRUE, globals = list("Shiny")))
```
In Rstudio, you can use addin "JSHint" to run code validation on current script.
## Babel : JavaScript compiler
Via https://babeljs.io/
`babel()` can be used to convert ES6+ code to ES5 to make it works in most browser:
```{r, eval=FALSE}
# Template literals are not supported in ES5
babel("var filename = `${Date.now()}.png`;")
```
```{r, echo=FALSE, comment=""}
cat(babel("var filename = `${Date.now()}.png`;"))
```
```{r, eval=FALSE}
# Arrow function neither
babel("[1, 2, 3].map((n) => n + 1);")
```
```{r, echo=FALSE, comment=""}
cat(babel("[1, 2, 3].map((n) => n + 1);"))
```
## Crass : CSS minifier and optimizer
Via https://github.com/mattbasta/crass
Minimize and optimize CSS code :
```{r}
crass("b { font-weight: bold; }")
```
You can concatenate several files together:
```{r, eval=FALSE}
crass_file(
input = c("path/to/file1.css", "path/to/file2.css"),
output = "path/to/file.min.css"
)
```
## CSSO : CSS minifier with structural optimizations
Via https://github.com/css/csso
Merge identical rules together:
```{r}
csso(".foo { color: #ff0000; }\n.bar { color: rgba(255, 0, 0, 1); }")
```
You can also concatenate several files together:
```{r, eval=FALSE}
csso_file(
input = c("path/to/file1.css", "path/to/file2.css"),
output = "path/to/file.min.css"
)
```