haspar.us

Fixing JSX.IntrinsicElements conflict in react‑three‑fiber

Feb 26, 2020 · WrocTypeScript

Slides: https://github.com/hasparus/r3fts
Talk duration: 35 minutes


Dan Questions:

  • How will you deliver the idea to the audience?
    • R3F is pretty rad. Gonna show this on the first slide.
  • What is the one thing that you want people to take away from your talk?
    • Compiler API is powerful. We can use this power to hard solve problems.
  • Why are you giving the talk? What is the emotional core? What do you believe in?
    • Don’t be afraid. Contribute to open source. Hack weird stuff.

Format: Case Study.

Outline:

  • what is React Three Fiber
  • why I care about it
    • (past threejs experience in Explain Everything)
  • how it works
    • what is a reconciler?
  • reconciler problem — conflict with @types/react #233
    I generated components for dynamic behavior of r3f by mapping over THREE types, dumping them to a file with Compiler API.
    • why was it hard in TS
      • static clashes with dynamic
    • How React Native lies about its types
    • Why was traversing the API in JS harder (impossible?)
    • show the code

Comments:

I have actually removed 1/3 of the talk (initial idea gist) on the same day I gave it. It was a good idea. The talk took the time it was meant to.

Started with the tease, went ahead to explain the problem and continued with the solution. Why -> What -> How. Got good feedback on the flow.

I think it resonated pretty well. However, after watching the video I’m a bit unhappy with the delivery. The deck could also be improved. I might polish it and try to fit more story and more knowledge in a bit longer time window. I think I’ll leave rollup plugin story for another talk though, to keep this more focused on React and TS Compiler API.