observablehq / framework

A static site generator for data apps, dashboards, reports, and more. Observable Framework combines JavaScript on the front-end for interactive graphics with any language on the back-end for data analysis.
https://observablehq.com/framework/
ISC License
2.13k stars 85 forks source link

a few parsing tests #1442

Closed Fil closed 3 weeks ago

Fil commented 3 weeks ago

This adds tests for:

Regarding the SVG placeholder test, I wonder if it's fully working: I'd expect the <observablehq-loading></observablehq-loading> element to be removed once hello is inserted in the DOM. It does not seem to be the case?

<svg width=640 height=120>
  <text x=20 y=20>${"hello"}</text>
</svg>
Capture d’écran 2024-06-07 à 11 31 00
mbostock commented 3 weeks ago

The reason that <observablehq-loading> doesn’t get removed is because in SVG, element names are case-sensitive: the client is looking for the tag name OBSERVABLEHQ-LOADING, but in SVG the tag name is observablehq-loading. But more importantly, the <observablehq-loading> doesn’t do anything within an SVG element. (I don’t think custom elements are supported within SVG? But certainly the CSS rules we’re using for the loading indicator don’t work in this context.)

So probably we should remove the <observablehq-loading> during the HTML sanitization step where we currently check for reparenting.