Problem
The Web Components scaffolds each carry their own copy of the glyph helpers — GLYPH_BASE, glyphUrl, glyphStyle, roughly ten lines — duplicated verbatim in every generated component. A fix has to land in N files, and a consumer diffing two components sees the same block twice.
React already solved this: it emits one _runtime.ts per workspace and each scaffold imports exactly the helpers its body calls. Web Components should do the same.
Two related problems in the same block:
const GLYPH_BASE = '/assets/icons' bakes a deployment path into component code. Any app not served from the site root, or serving assets from a CDN, gets silently invisible icons — the CSS falls back to mask: none, which renders an empty box with no error. React's runtime now exports a settable glyphBase; the WC copy still hardcodes it.
The slug is computed at runtime from a name the generator already knew, using a five-step regex. React now resolves the slug at generation and emits glyphUrl("plus"), deferring to the runtime only for a prop-bound name that genuinely is not known until render. Web Components still kebab-cases on every render.
Proposal
Mirror the React approach:
- Emit one runtime module per workspace for the Web Components target
- Import only the helpers each scaffold's body actually calls
- Resolve the glyph slug at generation where the spec names it; keep a runtime path only for prop-bound names
- Export a settable asset base rather than a hardcoded constant
Whether the two targets share one runtime file or emit one each is worth deciding when this is picked up — they currently duplicate deliberately, since Lit and JSX share no attribute syntax, but plain helper functions are not target-specific.
Notes
Surfaced by an independent review of generated output for DE Button and DE Favorite button. The React half is done; this is the remaining target.
Problem
The Web Components scaffolds each carry their own copy of the glyph helpers —
GLYPH_BASE,glyphUrl,glyphStyle, roughly ten lines — duplicated verbatim in every generated component. A fix has to land in N files, and a consumer diffing two components sees the same block twice.React already solved this: it emits one
_runtime.tsper workspace and each scaffold imports exactly the helpers its body calls. Web Components should do the same.Two related problems in the same block:
const GLYPH_BASE = '/assets/icons'bakes a deployment path into component code. Any app not served from the site root, or serving assets from a CDN, gets silently invisible icons — the CSS falls back tomask: none, which renders an empty box with no error. React's runtime now exports a settableglyphBase; the WC copy still hardcodes it.The slug is computed at runtime from a name the generator already knew, using a five-step regex. React now resolves the slug at generation and emits
glyphUrl("plus"), deferring to the runtime only for a prop-bound name that genuinely is not known until render. Web Components still kebab-cases on every render.Proposal
Mirror the React approach:
Whether the two targets share one runtime file or emit one each is worth deciding when this is picked up — they currently duplicate deliberately, since Lit and JSX share no attribute syntax, but plain helper functions are not target-specific.
Notes
Surfaced by an independent review of generated output for DE Button and DE Favorite button. The React half is done; this is the remaining target.