Babel: A refactoring tool
summary
Shows a working codemod that converts React class components into function components with hooks, parses class fields and initial state into useState calls, rewrites this.props and this.foo references, and injects React imports. Uses Babel APIs for AST transforms, AST Explorer for iterating, and printing/run-tools like recast and JSCodeshift. Runs on a TypeScript todoMVC app, produces many correct edits, emits warning comments for tricky patterns (refs, complex initializers) and leaves small manual fixes; the app still runs after fixes.
AI-written summary · about
chapters (11)
- 0:00Start
- 1:48What Is Bubble
- 2:21A Customizable Javascript Compiler
- 3:14What Are Codemods
- 5:19How Are Codemods Different from Normal Compilers
- 9:50Regular Expressions
- 10:56Why Do You Choose Bubble
- 12:39Asd Explorer
- 14:47Anatomy of the Bubble Plugin
- 37:22Reverse Usage
- 41:05Shift Container
