In gadenbuie/js4shiny: Companion Package for JavaScript for Shiny Users

knitr::opts_chunk$set(js_lint = FALSE)
js4shiny::register_knitr_output_hooks()

I am but a simple text paragraph. Toggle the opacity of this paragraph with a button and some Javascript.

Toggle the above paragraph

---

``{js, name="myScript.js"} const btn = document.getElementById("toggle-paragraph") btn.addEventListener('click', () => { const p = document.querySelector('p') if (!p.style.transition) { console.log(p) p.style.transition = 'opacity 1s' } if (p.style.opacity === "0") { console.log(showing p because opacity=${p.style.opacity}`) p.style.opacity = 1 } else { console.log("hiding p") p.style.opacity = 0 } })

Here's some standard R code

```r
mean(runif(100))

And some "standard" JavaScript code

```{js another-chunk, class.source="numberLines"} console.log("named chunk")

The last statement in a chunk doesn't need `console.log()` to be output.
This makes it easier to show results of code
without requiring numerous `console.log()` statements.

```{js}
const x = 10
x * 4 + 2

true && false

```{js, js_live = FALSE} let x = 10 console.log(x * 20)

```{json json-example}
{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}

// data declared in a json chunk become global as data_<chunk_name>
data_json_example

npm run-script build

title: A demonstration
author: Your's Truly
output: js4shiny::html_document_js

---

JavaScript chunks are redirected into closures where console.log() has been redefined. In other words, each chunk is isolated.

But you can use the js_redirect = FALSE chunk option to treat the JavaScript chunk like a normal JS chunk. The JS is then embedded in <script> tags in the HTML document's global environment, so console.log() goes to the browser console and any declared variables are globally available.

```{js, js_redirect = FALSE} const globalVariable = 'this is a global variable' console.log(globalVariable) // goes to browser console

```{js}
console.log(globalVariable) // outputs in document

---

throw 'bad thing happened'

console.log(1)
console.log(2.0)
console.log('test')
console.log([1, 2, 3])
console.log({apple: 1, banana: 2})

---

Output <div>

The new knitr js engine adds a <div> above the live <script> tag containing the JavaScript code in the chunk. This <div> has the id #out-{chunk-name}. Spaces or non alpha-numeric characters in the chunk name are converted to "_". This allows you to write into the <div> if needed, and it makes inserting data visualizations like this much easier.

``{js write-my-own-content} // chunk name is "write-my-own-content" const outDiv = document.getElementById('out-write-my-own-content') outDiv.innerHTML =

I added this text myself at runtime.

` outDiv.style.background = "var(--red)" outDiv.style.color = "white" outDiv.style.borderRadius = "5px" outDiv.style.padding = "0.5em"

But this js chunk won't output anything, 
so there shouldn't be visible output.

```{js write-nothing}
const x = 42
const meaning = 'life'

---

.red-text {
  color: var(--red);
}

<p class="red-text">Is this text red?</p>

gadenbuie/js4shiny documentation built on March 25, 2024, 8:16 p.m.