Learning Babel

Follow the tutorial https://github.com/ULL-ESIT-PL/babel-learning to learn how to create a Babel plugin.

TC39

See section TC39 for a description of the TC39 and the process followed by a proposal to be accepted as a standard.

The forum at https://es.discourse.group/ is the official discussion forum for TC39. Join the https://es.discourse.group and have a look.

The TC39 Proposal Pattern Matching and plugins

See section Pattern Matching for a description of the proposal and the 0-syntax Babel plugin https://github.com/iptop/babel-plugin-proposal-pattern-matching.

The Task

Following the chapter at https://github.com/ULL-ESIT-PL/babel-learning/tree/main/src/awesome/tc39-pattern-matching re-create your own Babel plugin that implements as much as you can of the TC39 pattern matching proposal.

Videos

2025/03/31

2025/04/02

Videos about Babel

1. Romulo Cintra introduces the way the TC39 works.

• TC39: From the Proposal to ECMAScript, Step by Step. Romulo Cintra. Feb 2024. Youtube
• Same contents and title but in Porto: https://youtu.be/ZheFIz4FhXo?si=ZQqgUWdEm5EU6iAj TC39 – From the proposal to ECMAScript - Step by Step - Romulo Cintra - Fest.dev Porto, 2023
• Slides

2. Henry Zhu: “So how does Babel even work.”
3. Ross Kirsling, member of the TC39 committee, describes in JSConfJP how the optional chaining operator was added to JS from the specification to the implementation, including bytecode generation. It is a generic talk, not a Babel talk.
4. Nicolo Ribaudo, Babel developer, makes a “demo” showing how to write a Babel plugin to implement the optional chaining.
   • Nicolo’s talk @babel/howto at HolyJS in Youtube: https://youtu.be/UeVq_U5obnE?si=Vl_A49__5zgITvjx
   • See the associated repo at GitHub: https://github.com/nicolo-ribaudo/conf-holyjs-moscow-2019,
   • Nicolo slides
   • The plugin babel-plugin-transform-optional-chaining at GitHub Babel repo and the way it is used
   • Web site of the HolyJS 2019 conference: https://holyjs.ru/en/archive/2019%20Moscow/
   • babel-plugin-tester link at npm: This is a fairly simple module to help write tests for your babel plugin or preset that is mentioned by Nicolo. It works with Jest.
5. The last one is in Chinese. It is a talk by iptop, the author of the pattern-matching plugin.

References

• See the Svelte maintainer Tan Liu Hau (陈立豪) article “Creating custom JavaScript syntax with Babel” (September 25, 2019) available at https://lihautan.com/creating-custom-javascript-syntax-with-babel

• Babel ast-explorer: https://lihautan.com/babel-ast-explorer/

• Step-by-step guide for writing a custom babel transformation September 12, 2019

• Babel macros by Tan Liu Hau

• I Can Babel Macros (and So Can You!) by Shawn “swyx” Wang in JSConf Hawaii 2019 (Growing a Language)

• Learning Babel Macros: ULL-ESIT-PL/learning-babel-macros by Casiano

• babel-plugin-macros Usage for macros authors. A tutorial on how to write Babel macros by Kent C. Dodds

• List of Babel Youtube videos by Tan Liu Hau

• List of Q&A Youtube videos by Tan Liu Hau

• Babel flow pragma bug not finished

• babel-plugin-transform-rename-properties

• Babel: Usage Guide

• Plugins: Babel

• Plugins list

• StackOverflow: How to create a babel plugin for internal use

• See this introduction by Matt Zeunert and the associated GitHub repository for a simple example of how to create a Babel plugin.

• Babel Handbook at jamiebuilds/babel-handbook This document covers how to create Babel plugins.

  • StackOverflow: How to create a babel plugin for internal use

• Awesome Babel A list of awesome Babel plugins, presets, etc.

• Babel plugin Remove debugger transform. This plugin removes all debugger; statements

• babel-plugin-transform-remove-debugger at GitHub

• A boilerplate monorepo for people writing babel plugins in normal plugin form as well as babel-plugin-macros form by Shawn “swyx” Wang

• JavaScript engines - how do they even? by Franziska Hinkelmann from the V8 Team. Youtubes. JSConf EU 2017

• Parsing JavaScript - better lazy than eager? by Marja Hölttä from the V8 Team. JSConf EU 2017

• Parsing Javascript - Programming Languages a non maintained Udacity course. 2012. The Youtube list of videos for this course

• Babel videos

• Babel repo: issues with label help wanted

• ECMA TC39, TC53 presentations at Youtube

• TC39: From the Proposal to ECMAScript, Step by Step. Romulo Cintra. Feb 2024. Youtube [Slides}(https://es.slideshare.net/slideshow/from-the-proposal-to-ecmascript-step-by-step/264286515)

  Same contents and title but in Porto: https://youtu.be/ZheFIz4FhXo?si=ZQqgUWdEm5EU6iAj TC39 – From the proposal to ECMAScript - Step by Step - Romulo Cintra - Fest.dev Porto, 2023

• So how does Babel even work? by Henry Zhu. 2017. Youtube

• On BabelJS by James Kyle. 2016. Youtube. (Slides)

• Babel Podcast

• Nicolo’s talk @babel/howto at HolyJS in Youtube: https://youtu.be/UeVq_U5obnE?si=Vl_A49__5zgITvjx

  • See the associated repo at GitHub: https://github.com/nicolo-ribaudo/conf-holyjs-moscow-2019,
  • Nicolo slides
  • The plugin babel-plugin-transform-optional-chaining at GitHub Babel repo and the way it is used
  • Web site of the HolyJS 2019 conference: https://holyjs.ru/en/archive/2019%20Moscow/
  • babel-plugin-tester

• Babel Tutorial Part 3 - Source Maps 2020

• Babel: Beyond the Basics. Sebastian McKenzie, Creator of Babel. 2015. Youtube. Slides

• Google slides of the presentation at ÚLTIMOS AVANCES EN INFORMÁTICA 2004 XXVIII ed. “Function Expressions on the Left Side of Assignments”