Fix dark theme facet subplot borders and update README (#53)

Fix strip_cdn_versions regex - remove erroneous leading slash that prevented version stripping

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: yihui <163582+yihui@users.noreply.github.com>
Co-authored-by: Yihui Xie <xie@yihui.name>

Author: Copilot

.github/copilot-instructions.md

@@ -79,9 +79,18 @@ Since gglite generates HTML/JavaScript visualizations, **plots must be tested in
 headless browsers** to make sure they can be rendered correctly and produce no
 errors in the browser console. The workflow is:
 
-1.  **Render to a full HTML page** — both `.Rmd` and `.R` files can be rendered
-    to `.html` via `litedown::fuse()`. The output is self-contained (all JS/CSS
-    embedded) because `embed_resources` is enabled in `copilot-setup-steps.yml`.
+> **Prefer SVG rendering for headless tests.** Set
+> `options(gglite.renderer = 'svg')` before calling `litedown::fuse()` so the
+> rendered output contains an `<svg>` element that you can inspect directly in
+> the DOM. SVG attributes (fill, stroke, etc.) are directly readable without
+> relying on canvas pixel values, making theme and style verification much
+> easier. Use `document.querySelectorAll('svg rect[fill]')` or similar to check
+> theme properties.
+
+1.  **Render to a full HTML page** — set `options(gglite.renderer = 'svg')`,
+    then render both `.Rmd` and `.R` files to `.html` via `litedown::fuse()`.
+    The output is self-contained (all JS/CSS embedded) because `embed_resources`
+    is enabled in `copilot-setup-steps.yml`.
 
 2.  **Open with `google-chrome` under Xvfb** and enable remote debugging. Use
     `google-chrome`, **not** `chromium` — `chromium` crashes in this
@@ -140,14 +149,19 @@ errors in the browser console. The workflow is:
                 {"url": "file:///absolute/path/to/foo.html"})
             await asyncio.sleep(8)  # wait for G2 charts to render
 
+            # For SVG renderer: inspect element attributes directly
             r = await js(ws, "JSON.stringify({G2: typeof G2 !== 'undefined', "
-                             "c: document.querySelectorAll('canvas').length})")
+                             "svgs: document.querySelectorAll('svg').length})")
             print("Status:", r["result"]["value"])
 
-            # Hover over a canvas to trigger tooltip
-            await send(ws, "Input.dispatchMouseEvent",
-                {"type": "mouseMoved", "x": 400, "y": 300})
-            await asyncio.sleep(0.8)
+            # Example: check area fill color for dark theme
+            r2 = await js(ws, """
+            var areas = Array.from(document.querySelectorAll('.area'));
+            JSON.stringify(areas.map(el => ({fill: el.getAttribute('fill'),
+                                             stroke: el.getAttribute('stroke')})))
+            """)
+            print("Area elements:", r2["result"]["value"])
+
             await shot(ws, "/tmp/screenshot.png")
 
     asyncio.run(main())
@@ -158,6 +172,8 @@ errors in the browser console. The workflow is:
     -   The chart container element exists in the DOM.
     -   The G2 chart renders without JavaScript errors (check `console.error`).
     -   No warnings or errors appear in the browser console.
+    -   For SVG renderer: inspect element attributes (fill, stroke) directly to
+        verify theme colors.
 
 ### Submitting Plot Changes in PRs
 

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: gglite
 Title: Lightweight Data Visualization via the Grammar of Graphics
-Version: 0.0.28
+Version: 0.0.29
 Authors@R: person("Yihui", "Xie", role = c("aut", "cre"), email = "xie@yihui.name",
     comment = c(ORCID = "0000-0003-0645-5666"))
 Description: A lightweight R interface to the AntV G2 JavaScript visualization

R/render.R

@@ -218,12 +218,38 @@ build_config = function(chart) {
 
   # Theme: merge global option with per-chart theme
   theme = modifyList(as.list(getOption('gglite.theme')), as.list(chart$theme))
-  # For dark themes, auto-set the view background so facet subplots get a dark
-  # background (G2 uses transparent by default, making axis/grid hard to see).
+  # For dark themes, auto-set the view background so the chart and facet
+  # subplots get a dark background (G2 uses transparent by default).
   if (isTRUE(theme$type %in% c('dark', 'classicDark')))
     theme = modifyList(list(view = list(viewFill = '#141414')), theme)
   if (length(theme)) config$theme = theme
 
+  # For faceted charts, propagate the resolved theme to each child mark so
+  # that G2 applies it to every subplot view. Without this, G2's facetRect
+  # creates child views with no theme, causing them to fall back to the
+  # default light theme (transparent background, light axis/grid colors).
+  # Also inject visible border colors on each child via viewStyle (NOT style
+  # — G2's mark composition moves 'style' to the mark renderer, while
+  # 'viewStyle' becomes the view's style used for background area rectangles):
+  #   - mainStroke: frame=TRUE in plot.ts hardcodes '#000'; override via
+  #     viewStyle so G2's deepMix({mainStroke:'#000'}, viewStyle) uses ours.
+  #   - viewStroke: @antv/g defaults rect stroke to black; set explicitly
+  #     so the outer subplot outline is visible on the dark background.
+  if (!is.null(chart$facet) && length(theme) && length(config$children)) {
+    dark_facet = isTRUE(theme$type %in% c('dark', 'classicDark'))
+    config$children = lapply(config$children, function(ch) {
+      if (is.null(ch$theme)) ch = modifyList(ch, list(theme = theme))
+      if (dark_facet) {
+        border_col = 'rgba(255,255,255,0.25)'
+        vsty = ch$viewStyle %||% list()
+        if (is.null(vsty$mainStroke)) vsty$mainStroke = border_col
+        if (is.null(vsty$viewStroke)) vsty$viewStroke = border_col
+        ch$viewStyle = vsty
+      }
+      ch
+    })
+  }
+
   # Faceting wraps the spec as a facet view
   if (!is.null(chart$facet)) {
     config$type = chart$facet$type

README.md

@@ -1,2 +1,26 @@
 # gglite
-An R package for data visualization via g2 (based on the Grammar of Graphics)
+
+> **Experimental** — this package is still under active development. The API may
+> change and it has been hurting my brain badly. Feedback welcome!
+
+An R package for interactive data visualization using the [AntV
+G2](https://g2.antv.antgroup.com/) JavaScript library, with a [Grammar of
+Graphics](https://www.springer.com/gp/book/9780387245447)-style API inspired by
+ggplot2. The goal is to have Grammar of Graphics *and* interactivity *and* keep
+everything lightweight ({gglite} has only one R package dependency).
+
+## Install
+
+Not on CRAN yet, but r-universe.dev is an awesome service in many ways:
+
+``` r
+install.packages('gglite', repos = 'https://yihui.r-universe.dev')
+```
+
+You can also try the package without installing in the package playground:
+<https://pkg.yihui.org/gglite/playground/> (it also works on your mobile
+devices, thanks to webR). See the package site (<https://pkg.yihui.org/gglite/>)
+for examples and documentation.
+
+R Markdown, [litedown](#0), Quarto, Jupyter, Shiny, and standalone HTML previews
+(in the browser) are all supported.

tests/normalize-notebook.py

@@ -12,7 +12,7 @@
 
 def strip_cdn_versions(s: str) -> str:
     """Remove version specifiers (e.g. @5, @v0.14.34) from CDN URLs in src/href attributes."""
-    return re.sub(r'((src|href)="https://[^"]*?)/@v?\d+(?:\.\d+)*', r'\1', s)
+    return re.sub(r'((src|href)="https://[^"]*?)@v?\d+(?:\.\d+)*', r'\1', s)
 
 
 def normalize_value(v):

tests/testit/test-theme.R

@@ -37,3 +37,52 @@ assert('light theme does not set viewFill', {
   config = build_config(chart)
   (is.null(config$theme$view))
 })
+
+assert('dark theme propagates to facet children', {
+  chart = g2(mtcars, hp ~ mpg | cyl) |> theme_dark()
+  config = build_config(chart)
+  (config$children[[1]]$theme$type %==% 'dark')
+  (config$children[[1]]$theme$view$viewFill %==% '#141414')
+})
+
+assert('classicDark theme propagates to facet children', {
+  chart = g2(iris, Sepal.Length ~ Sepal.Width | Species) |> theme_classic_dark()
+  config = build_config(chart)
+  (config$children[[1]]$theme$type %==% 'classicDark')
+  (config$children[[1]]$theme$view$viewFill %==% '#141414')
+})
+
+assert('light theme does not propagate viewFill to facet children', {
+  chart = g2(iris, Sepal.Length ~ Sepal.Width | Species) |> theme_light()
+  config = build_config(chart)
+  (is.null(config$children[[1]]$theme$view))
+})
+
+assert('dark theme injects border colors on facet children', {
+  chart = g2(mtcars, hp ~ mpg | cyl) |> theme_dark()
+  config = build_config(chart)
+  (config$children[[1]]$viewStyle$mainStroke %==% 'rgba(255,255,255,0.25)')
+  (config$children[[1]]$viewStyle$viewStroke %==% 'rgba(255,255,255,0.25)')
+})
+
+assert('classicDark theme injects border colors on facet children', {
+  chart = g2(iris, Sepal.Length ~ Sepal.Width | Species) |> theme_classic_dark()
+  config = build_config(chart)
+  (config$children[[1]]$viewStyle$mainStroke %==% 'rgba(255,255,255,0.25)')
+  (config$children[[1]]$viewStyle$viewStroke %==% 'rgba(255,255,255,0.25)')
+})
+
+assert('light theme does not inject border colors on facet children', {
+  chart = g2(iris, Sepal.Length ~ Sepal.Width | Species)
+  config = build_config(chart)
+  (is.null(config$children[[1]]$viewStyle$mainStroke))
+  (is.null(config$children[[1]]$viewStyle$viewStroke))
+})
+
+assert('user-provided mainStroke in viewStyle is not overwritten by dark theme', {
+  chart = g2(mtcars, hp ~ mpg | cyl) |> theme_dark() |>
+    mark_point(viewStyle = list(mainStroke = '#ff0000'))
+  config = build_config(chart)
+  (config$children[[1]]$viewStyle$mainStroke %==% '#ff0000')
+})
+