Fix JS evals not working in meta, use htmlwidgets TOJSON_FUNC attribute

* Keep old behavior of preserializing data as an optimization
* Add json_verbatim to toJSON

Author: glin

R/reactable.R

@@ -541,13 +541,10 @@ reactable <- function(
       stop("`meta` must be a named list")
     }
     # Omit empty lists and objects for consistency with htmltools tag behavior when supplying
-    # empty attributes.
+    # empty attributes. This was previously done implicitly in reactR::component(), but now done
+    # explicitly here.
     if (length(meta) == 0) {
       meta <- NULL
-    } else {
-      # Use the same JSON serialization as reactable, not htmlwidgets (which differs very slightly)
-      # for consistency, since meta can contain complex data types.
-      meta <- toJSON(meta)
     }
   }
 
@@ -718,11 +715,10 @@ reactable <- function(
     }
   }
 
-  # Override the htmlwidgets default JSON serialization options for data:
-  #
-  # * Serialize numbers with max precision
-  # * Preserve numeric NA, NaN, Inf, and -Inf as strings
-  # * Serialize both dates/datetimes as ISO 8601
+  # Pre-compute / pre-serialize data to JSON to optimize for large datasets that can take seconds to serialize.
+  # By pre-serializing, we only pay the serialization cost once at the start, rather than every time when
+  # rendering or printing the widget. This was originally done as a necessity to change the JSON serializer,
+  # but now kept as an intentional optimization.
   data <- toJSON(data)
 
   # Create a unique key for the data. The key is used to fully reset state when
@@ -791,9 +787,23 @@ reactable <- function(
   # Temporary workaround for JS() not working in htmlwidgets 1.6.3
   class(component) <- c(class(component), "list")
 
+  # Override the htmlwidgets default JSON serialization options for meta and other attributes:
+  #
+  # * Serialize numbers with max precision (typically 15 digits depending on the installed jsonlite version).
+  # * Preserve numeric NA, NaN, Inf, and -Inf as strings. String NAs are still serialized as `null`.
+  # * Serialize both datetimes and dates as ISO 8601 in UTC timezone.
+  #
+  # Use TOJSON_FUNC attribute, rather than serializing meta ourselves, because htmlwidgets
+  # will also process JS() evals. If meta is converted to JSON before reaching htmlwidgets,
+  # those JS evals will be lost.
+  #
+  # https://www.htmlwidgets.org/develop_advanced.html
+  markup <- reactR::reactMarkup(component)
+  attr(markup, "TOJSON_FUNC") <- toJSON
+
   htmlwidgets::createWidget(
     name = "reactable",
-    reactR::reactMarkup(component),
+    markup,
     width = width,
     height = height,
     sizingPolicy = htmlwidgets::sizingPolicy(
@@ -807,7 +817,7 @@ reactable <- function(
     elementId = elementId,
     preRenderHook = preRenderHook
   )
-  }
+}
 
 # Convert named list of column orders to { id, desc } definitions
 columnSortDefs <- function(defaultSorted) {

R/utils.R

@@ -32,7 +32,9 @@ toJSON <- function(
     UTC = TRUE,
     force = TRUE,
     auto_unbox = TRUE,
-    null = "null"
+    null = "null",
+    # Match htmlwidgets behavior of not double-serializing JSON
+    json_verbatim = TRUE
   )
 }
 

pkgdown/templates/content-article.html

@@ -1,42 +1,63 @@
-{{^as_is}}$for(header-includes)$ $header-includes$ $endfor${{/as_is}}
+<!-- Last updated: pkgdown 2.1.3 -->
+{{^as_is}}$for(header-includes)$
+$header-includes$
+$endfor${{/as_is}}
 
 <div class="row">
-  <!-- Don't add toc if the article has no toc -->
+  <!-- Allow content to be full-width if article has no toc -->
   <main id="main" $if(toc)$class="col-md-9" $endif$>
     <div class="page-header">
-      {{#logo}}<img src="{{logo.src}}" class="logo" alt="" />{{/logo}}
+      {{#logo}}<img src="{{logo.src}}" class="logo" alt="" >{{/logo}}
       <h1>{{{pagetitle}}}</h1>
       $if(subtitle)$
       <h3 data-toc-skip class="subtitle">$subtitle$</h3>
-      $endif$ $for(author)$ $if(author.name)$
+      $endif$
+      $for(author)$
+      $if(author.name)$
       <h4 data-toc-skip class="author">$author.name$</h4>
       $if(author.affiliation)$
       <address class="author_afil">
-        $author.affiliation$<br />$endif$ $if(author.email)$
-        <a class="author_email" href="mailto:#">$author.email$</a>
+      $author.affiliation$<br>$endif$
+      $if(author.email)$
+      <a class="author_email" href="mailto:#">$author.email$</a>
       </address>
-      $endif$ $else$
+      $endif$
+      $else$
       <h4 data-toc-skip class="author">$author$</h4>
-      $endif$ $endfor$ $if(date)$
+      $endif$
+      $endfor$
+
+      $if(date)$
       <h4 data-toc-skip class="date">$date$</h4>
-      $endif$ {{#source}}<small class="dont-index">{{{.}}}</small>{{/source}}
+      $endif$
+
+      {{#source}}<small class="dont-index">{{{.}}}</small>{{/source}}
       <div class="d-none name"><code>{{filename}}</code></div>
     </div>
 
-    $for(include-before)$ $include-before$ $endfor$ $if(abstract)$
+    $for(include-before)$
+    $include-before$
+    $endfor$
+
+    $if(abstract)$
     <div class="abstract">
-      <p class="abstract">Abstract</p>
+      <p class="abstract">{{#translate}}{{abstract}}{{/translate}}</p>
       $abstract$
     </div>
-    $endif$ $body$
+    $endif$
+
+$body$
   </main>
-  $if(toc)$
+ {{#toc}}
   <aside class="col-md-3">
-    <nav id="toc">
+    <nav id="toc" aria-label="{{#translate}}{{toc}}{{/translate}}">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>
-  $endif$
+ {{/toc}}
+
 </div>
 
-$for(include-after)$ $include-after$ $endfor$
+$for(include-after)$
+$include-after$
+$endfor$

srcjs/__tests__/server.test.js

@@ -10,7 +10,7 @@ import { renderToHTML, setInitialProps, renderToData, resetTestRenderer } from '
 describe('renderToHTML', () => {
   it('renders tables to HTML', () => {
     const inputString =
-      '{"props":{"data":"{\\"Manufacturer\\":[\\"Acura\\",\\"Acura\\",\\"Audi\\"],\\"Model\\":[\\"Integra\\",\\"Legend\\",\\"90\\"],\\"Type\\":[\\"Small\\",\\"Midsize\\",\\"Compact\\"]}","columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"}],"dataKey":"b540d0d929ae2ade6248d0cbb7f477fc"},"evals":[]}'
+      '{"props":{"data":{"Manufacturer":["Acura","Acura","Audi"],"Model":["Integra","Legend","90"],"Type":["Small","Midsize","Compact"]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"}],"dataKey":"b540d0d929ae2ade6248d0cbb7f477fc"},"evals":[]}'
     const { html, css, ids } = renderToHTML(inputString)
     expect(html).toMatchSnapshot()
     expect(css).toEqual('')
@@ -19,7 +19,7 @@ describe('renderToHTML', () => {
 
   it('renders tables to HTML with JS evals', () => {
     const inputString =
-      '{"props":{"data":"{\\"Manufacturer\\":[\\"Acura\\",\\"Acura\\"],\\"Model\\":[\\"Integra\\",\\"Legend\\"]}","columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor","cell":"cellInfo => cellInfo.value + \'__\'"}],"dataKey":"7951e598fecb5fa57c37a854a0917a7c"},"evals":["columns.1.cell"]}'
+      '{"props":{"data":{"Manufacturer":["Acura","Acura"],"Model":["Integra","Legend"]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor","cell":"cellInfo => cellInfo.value + \'__\'"}],"dataKey":"7951e598fecb5fa57c37a854a0917a7c"},"evals":["columns.1.cell"]}'
     const { html, css, ids } = renderToHTML(inputString)
     expect(html).toContain('Integra__')
     expect(html).toContain('Legend__')
@@ -30,7 +30,7 @@ describe('renderToHTML', () => {
 
   it('renders tables to HTML with theme styles', () => {
     const inputString =
-      '{"props":{"data":"{\\"Manufacturer\\":[\\"Acura\\",\\"Acura\\"],\\"Model\\":[\\"Integra\\",\\"Legend\\"]}","columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"}],"theme":{"color":"red","cellPadding":"1rem"},"dataKey":"01768d44dd8153352ff1cfa908f38d72"},"evals":[]}'
+      '{"props":{"data":{"Manufacturer":["Acura","Acura"],"Model":["Integra","Legend"]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"}],"theme":{"color":"red","cellPadding":"1rem"},"dataKey":"01768d44dd8153352ff1cfa908f38d72"},"evals":[]}'
     const { html, css, ids } = renderToHTML(inputString)
     expect(html).toMatchSnapshot()
     expect(css).toEqual('.reactable-1galy0v{color:red;}.reactable-1rsvkai{padding:1rem;}')

srcjs/server.js

@@ -22,9 +22,6 @@ export function renderToHTML(inputJson) {
   const input = JSON.parse(inputJson)
 
   const props = input.props
-  // Table data comes through double-serialized, first with reactable's custom serialization
-  // options, and then with the htmlwidgets default serialization.
-  props.data = JSON.parse(props.data)
 
   // Resolve strings marked as JavaScript literals to objects
   if (input.evals) {

tests/testthat/test-reactable.R

@@ -1310,8 +1310,10 @@ test_that("meta", {
     emptyList = list()  # will be serialized as []
   )
   tbl <- reactable(data, meta = meta, rowStyle = JS("(rowInfo, state) => { console.log(state.meta) }"))
+  # meta must not be pre-serialized or the JS() func will be lost
+  expect_equal(getAttrib(tbl, "meta"), meta)
   expected <- '{"number":30,"str":"str","df":{"y":[2]},"func":"value => value > 30","na":null,"naInteger":"NA","null":null,"inf":"Inf","date":"2019-01-02T03:22:15Z","array":[2,4,6],"arrayLength1":1,"list":[1],"emptyList":[]}'
-  expect_equal(as.character(getAttrib(tbl, "meta")), expected)
+  expect_equal(as.character(toJSON(getAttrib(tbl, "meta"))), expected)
 })
 
 test_that("elementId", {

tests/testthat/test-utils.R

@@ -1,5 +1,11 @@
 library(htmltools)
 
+test_that("toJSON", {
+  # Should not double-serialize JSON to match htmlwidgets behavior
+  x <- list(x = 1, json = toJSON(list(y = "b")))
+  expect_equal(as.character(toJSON(x)), '{"x":1,"json":{"y":"b"}}')
+})
+
 test_that("mergeLists", {
   a <- list(a = 1, b = "b", c = 3)
   b <- list(a = 2, c = 4, d = "d")

vignettes/cran-packages/cran-packages.Rmd

@@ -1,6 +1,7 @@
 ---
 title: "CRAN Packages"
 output: html_document
+toc: false
 resource_files:
   - '.'
 ---

vignettes/nba-box-score/nba-box-score.Rmd

@@ -1,6 +1,7 @@
 ---
 title: NBA Box Score
 output: html_document
+toc: false
 resource_files:
   - '.'
 ---

vignettes/popular-movies/popular-movies.Rmd

@@ -1,6 +1,7 @@
 ---
 title: "Popular Movies"
 output: html_document
+toc: false
 resource_files:
   - '.'
 ---