fix(fabric): hoist HTML/SVG fallback Sets to module scope — hbc bug

ImLunaHey · ImLunaHey · commit 835a6479e112 · 2026-06-02T15:26:48.000+01:00
The previous attempts (2eb1e35 + 1beb374) initialized the HTML_VIEW_TAGS, HTML_TEXT_TAGS, and SVG_TAGS Sets INSIDE createInstance, recomputing them on every host element creation. Each addition shifted the vendor.bundle.hbc into the same Hermes x86_64 bytecode bug we've now hit four times in a row (URL polyfill v1, LogBoxOverlay wrap, Icon+Label in module.exports literal, SVG Set in createInstance). `blank` flipped from PASS → BOOT_FAIL on the SVG push as collateral. Forward-only fix: hoist the three Sets to module-level constants above hostConfig. createInstance now references them by name; the literal initialisers only emit once at module load, not on every call. Different bytecode shape, dodges the bug. Also rolls up the two separate "HTML element fallback" + "SVG element fallback" comment blocks into one to reduce wall-of-text inside the create path. Tracked: task #69. The pattern is now: any time a multi-element literal is added inside the createInstance body, hoist it out.
diff --git a/apps/playground/runtime/fabricHostConfig.js b/apps/playground/runtime/fabricHostConfig.js
@@ -287,6 +287,140 @@ function makeInstance(tag, fabricNode, componentName, type) {
   };
 }
 
+// HTML + SVG element fallback tables for createInstance below.
+// Hoisted to module scope to keep the bytecode shape stable —
+// inlining these Set literals inside createInstance with their long
+// string-array initialisers triggered a Hermes x86_64 bytecode bug
+// that silently blank-screens the host (same family as the URL
+// polyfill v1 and the Icon+Label-in-literal regressions, tracked in
+// task #69).
+const HTML_VIEW_TAGS = new Set([
+  'div',
+  'section',
+  'nav',
+  'main',
+  'aside',
+  'article',
+  'header',
+  'footer',
+  'ul',
+  'ol',
+  'li',
+  'figure',
+  'figcaption',
+  'form',
+  'fieldset',
+  'label',
+  'table',
+  'thead',
+  'tbody',
+  'tfoot',
+  'tr',
+  'td',
+  'th',
+  'colgroup',
+  'col',
+  'video',
+  'audio',
+  'canvas',
+  'iframe',
+  'details',
+  'summary',
+  'dialog',
+  'button',
+  'a',
+]);
+const HTML_TEXT_TAGS = new Set([
+  'p',
+  'span',
+  'strong',
+  'em',
+  'b',
+  'i',
+  'u',
+  's',
+  'small',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'pre',
+  'code',
+  'kbd',
+  'samp',
+  'var',
+  'mark',
+  'sub',
+  'sup',
+  'abbr',
+  'cite',
+  'q',
+  'time',
+  'br',
+  'hr',
+]);
+const SVG_TAGS = new Set([
+  'svg',
+  'g',
+  'defs',
+  'symbol',
+  'use',
+  'foreignObject',
+  'path',
+  'rect',
+  'circle',
+  'ellipse',
+  'line',
+  'polyline',
+  'polygon',
+  'text',
+  'tspan',
+  'textPath',
+  'linearGradient',
+  'radialGradient',
+  'stop',
+  'marker',
+  'mask',
+  'clipPath',
+  'pattern',
+  'filter',
+  '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',
+  'animate',
+  'animateMotion',
+  'animateTransform',
+  'set',
+  'mpath',
+  'title',
+  'desc',
+  'metadata',
+]);
+
 const hostConfig = {
   // Persistence is the natural fit for Fabric — every commit clones
   // the affected nodes via nativeFabricUIManager.cloneNodeWith*, then
@@ -492,83 +626,14 @@ const hostConfig = {
       return makeInstance(tag, fabricNode, 'Text', type);
     }
 
-    // HTML element fallback. Expo Router DOM Components, with-html,
-    // and any example that mixes JSX with a `"use dom"` directive
-    // emit lowercase HTML element names (`<div>`, `<p>`, `<span>`,
-    // `<h1>` …) directly into the React tree. We don't have a real
-    // WebView host, but mapping the structural elements onto View
-    // and the text-bearing elements onto Paragraph is enough to let
-    // these trees mount + render the visible text without throwing.
-    // Layout / styling fidelity is not the goal here — just "boots
-    // and renders something" so the rest of the app surface gets a
-    // chance to run.
-    const HTML_VIEW_TAGS = new Set([
-      'div',
-      'section',
-      'nav',
-      'main',
-      'aside',
-      'article',
-      'header',
-      'footer',
-      'ul',
-      'ol',
-      'li',
-      'figure',
-      'figcaption',
-      'form',
-      'fieldset',
-      'label',
-      'table',
-      'thead',
-      'tbody',
-      'tfoot',
-      'tr',
-      'td',
-      'th',
-      'colgroup',
-      'col',
-      'video',
-      'audio',
-      'canvas',
-      'iframe',
-      'details',
-      'summary',
-      'dialog',
-      'button',
-      'a',
-    ]);
-    const HTML_TEXT_TAGS = new Set([
-      'p',
-      'span',
-      'strong',
-      'em',
-      'b',
-      'i',
-      'u',
-      's',
-      'small',
-      'h1',
-      'h2',
-      'h3',
-      'h4',
-      'h5',
-      'h6',
-      'pre',
-      'code',
-      'kbd',
-      'samp',
-      'var',
-      'mark',
-      'sub',
-      'sup',
-      'abbr',
-      'cite',
-      'q',
-      'time',
-      'br',
-      'hr',
-    ]);
+    // HTML / SVG element fallback. Expo Router DOM Components,
+    // with-html, react-flow's edge markers, every icon set emit
+    // lowercase HTML/SVG element names directly into the React
+    // tree. Structural HTML + every SVG primitive map onto View,
+    // text-bearing HTML onto Paragraph. Goal is "tree mounts" not
+    // "looks right"; layout / styling fidelity is out of scope.
+    // The tag sets themselves live at module scope above — see
+    // the comment there.
     if (HTML_VIEW_TAGS.has(type)) {
       const tag = newTag();
       const fabricNode = currentFabric.createNode(
@@ -592,81 +657,6 @@ const hostConfig = {
       return makeInstance(tag, fabricNode, 'Paragraph', type);
     }
 
-    // SVG element fallback. react-native-svg, expo-router DOM
-    // Components, and any example that renders inline SVG (lots of
-    // dashboards, with-react-flow's edge markers, every icon set)
-    // emit lowercase SVG element names directly into the React tree.
-    // We don't render actual SVG (would need cairo + librsvg), but
-    // mapping everything to View lets the tree mount instead of
-    // throwing — so examples surface their REAL post-SVG failures
-    // rather than blanking out on `Unknown host element: <stop>`.
-    const SVG_TAGS = new Set([
-      // Containers
-      'svg',
-      'g',
-      'defs',
-      'symbol',
-      'use',
-      'foreignObject',
-      // Shapes
-      'path',
-      'rect',
-      'circle',
-      'ellipse',
-      'line',
-      'polyline',
-      'polygon',
-      // Text
-      'text',
-      'tspan',
-      'textPath',
-      // Gradients + fills
-      'linearGradient',
-      'radialGradient',
-      'stop',
-      // Markers + clipping + masking
-      'marker',
-      'mask',
-      'clipPath',
-      'pattern',
-      'filter',
-      // Filter primitives
-      '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',
-      // Animation (no-op — we don't drive SMIL)
-      'animate',
-      'animateMotion',
-      'animateTransform',
-      'set',
-      'mpath',
-      // Misc descriptive
-      'title',
-      'desc',
-      'metadata',
-    ]);
     if (SVG_TAGS.has(type)) {
       const tag = newTag();
       const fabricNode = currentFabric.createNode(
