~/talk

Hacking JSX pragma for fun and profit

Talkat React Nexus 2023 · 2023-07-07..07-08· [react, compilers-and-language-design]
slides:none on file

JSX pragma is repurposed into a global middleware that replaces the compiler’s element factory (Babel/SWC/TypeScript output) with a custom function that intercepts args, logs them, and can mutate props before returning react.createElement. Examples include classNames/CX injected globally to turn className objects into strings, CSS prop mapped to emotion to auto-wrap styling, and Zod runtime prop validation that throws on mismatch (caught by an error boundary). Works but adds runtime overhead and onboarding cost.

AI-written summary · about

  1. 0:00Start
  2. 1:51Browsers and JSX
  3. 3:15What is JSX pragma?
  4. 11:14Summary
~/search
type to search 6,249 conferences, 138,987 speakers and 185,172 talks
~/help
cmdctrl k
search every conference, speaker and series
/
focus the filter search
h
home
c
conferences
s
speakers
e
series
t
light / dark — the status bar button does the same
?
this help
esc
close this, then clear every filter — or just the search, while you are typing in it

Ignored while you are typing. Pages without a filter rail have no search to focus.