@abide/abide 0.110.1 → 0.110.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @abide/abide
 
+## 0.110.2
+
+### Patch Changes
+
+- 14ee265: an SVG element spelled in camelCase hydrates, the compiler asking for the tag the parser writes inside an <svg> ([`f10c81b`](https://github.com/briancray/abide/commit/f10c81bff3ce0e43762a71e24634a218312c0d93))
+
 ## 0.110.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@abide/abide",
-    "version": "0.110.1",
+    "version": "0.110.2",
     "type": "module",
     "description": "Isomorphic type-safe framework for reactive async interfaces for humans and machines",
     "license": "MIT",

package/src/compiler/Cursor.ts

@@ -81,7 +81,8 @@ export type PlacedNode = {
      */
     parent: string
     /**
-     * An element's FOLDED tag, for the kind check `elementHere` makes. '' for the other two kinds.
+     * An element's tag as the parser writes it, for the kind check `elementHere` makes: folded,
+     * then given back SVG's camelCase (`SVG_CASE`). '' for the other two kinds.
      */
     tag: string
     /**
@@ -115,6 +116,51 @@ export type PlacedNode = {
     children: PlacedNode[]
 }
 
+// THE NAMES THE PARSER GIVES BACK SVG'S CASE, folded to the case it writes — the HTML standard's
+// adjustment table for foreign content. None is an HTML element, so one stands under an `<svg>`
+// even where the compiler cannot see it: a component's root does not know where it is invoked.
+const SVG_CASE = new Map<string, string>()
+for (const name of [
+    'altGlyph',
+    'altGlyphDef',
+    'altGlyphItem',
+    'animateColor',
+    'animateMotion',
+    'animateTransform',
+    'clipPath',
+    'feBlend',
+    'feColorMatrix',
+    'feComponentTransfer',
+    'feComposite',
+    'feConvolveMatrix',
+    'feDiffuseLighting',
+    'feDisplacementMap',
+    'feDistantLight',
+    'feDropShadow',
+    'feFlood',
+    'feFuncA',
+    'feFuncB',
+    'feFuncG',
+    'feFuncR',
+    'feGaussianBlur',
+    'feImage',
+    'feMerge',
+    'feMergeNode',
+    'feMorphology',
+    'feOffset',
+    'fePointLight',
+    'feSpecularLighting',
+    'feSpotLight',
+    'feTile',
+    'feTurbulence',
+    'foreignObject',
+    'glyphRef',
+    'linearGradient',
+    'radialGradient',
+    'textPath',
+])
+    SVG_CASE.set(name.toLowerCase(), name)
+
 /** A run of siblings being walked: the region's own root, or the inside of one element. */
 type Frame = {
     /**
@@ -202,7 +248,13 @@ export class Cursor {
      * emitted between its open and close tags and nowhere else. A void element is left at once.
      */
     element(node: ElementNode): PlacedNode {
-        const at = this.record('element', node, node.lowerTag, false, [])
+        const at = this.record(
+            'element',
+            node,
+            SVG_CASE.get(node.lowerTag) ?? node.lowerTag,
+            false,
+            [],
+        )
         this.frames.push({
             parent: at.name,
             within: at,