Babel is a tool many JavaScript developers use to enable writing modern language features on all platforms. It’s incredibly useful, but for most of us it feels like a mysterious black box. We just drop in preset-env and we’re set! It’s great that it’s so easy to get started with Babel, but there’s also value in understanding how it works. I got to spend a week contributing to the upcoming private class fields feature for Babel. During that week, I went from knowing nothing about how Babel works to being able to fix some failing tests and implement new edge cases. As part of this process, I had to get up to speed quickly on Babel’s plugin and transformation systems. And I’d like to share what I learned with you.

1. Newbie's Guide to
Contributing
to BabelJosh Justice
1 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

2. @CodingItWrong
2 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

3. We're hiring!
bignerdranch.com/careers
3 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

4. https://learntdd.in
4 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

5. 5 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

6. 6 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

7. Private
Fields7 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

8. “I'm never
gonna work
on Babel”8 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

9. 1. Understand
what Babel is doing to
your code
9 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

10. 2. Get familiar
with how plugins are
implemented
10 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

11. 3. Be inspired
to contribute to Babel
yourself???
11 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

12. What are
private
fields?12 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

13. http://2ality.com/2017/07/class-fields.html
13 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

14. class Countdown {
constructor(counter, action) {
// ...
}
decrement() {
// ...
}
}
14 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

15. class Countdown {
constructor(counter, action) {
}
decrement() {
}
}
15 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

16. class Countdown {
#counter;
#action;
constructor(counter, action) {
}
decrement() {
}
}
16 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

17. #17 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

18. class Countdown {
#counter;
#action;
constructor(counter, action) {
}
decrement() {
}
}
18 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

19. class Countdown {
#counter;
#action;
constructor(counter, action) {
this.#counter = counter;
this.#action = action;
}
decrement() {
}
}
19 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

20. class Countdown {
#counter;
#action;
constructor(counter, action) {
this.#counter = counter;
this.#action = action;
}
decrement() {
if (this.#counter < 1) return;
}
}
20 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

21. class Countdown {
#counter;
#action;
constructor(counter, action) {
this.#counter = counter;
this.#action = action;
}
decrement() {
if (this.#counter < 1) return;
this.#counter--;
}
}
21 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

22. class Countdown {
#counter;
#action;
constructor(counter, action) {
this.#counter = counter;
this.#action = action;
}
decrement() {
if (this.#counter < 1) return;
this.#counter--;
if (this.#counter === 0) {
this.#action();
}
}
}
22 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

23. class Countdown {
#counter;
#action;
constructor(counter, action) {
this.#counter = counter;
this.#action = action;
}
decrement() {
if (this.#counter < 1) return;
this.#counter--;
if (this.#counter === 0) {
this.#action();
}
}
}
23 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

24. const countdown = new Countdown(5, () => {});
countdown.decrement();
countdown.counter; // undefined
countdown.#counter; // syntax error
24 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

25. https://babejs.io/7
25 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

26. Try 'Em Out
@babel/plugin-proposal-class-properties
26 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

27. I didn't build
the private fields transform
27 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

28. !
Justin
Ridgewell
built it!
28 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago
2018

29. https://github.com/babel/babel/pull/7666
29 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

30. What I did learn to do was
• Rebase the PR off of master
• Fix some failing tests
• Handle some more edge cases
30 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

31. What I had to learn was:
1. How can we simulate private fields?
2. How does Babel transform in general?
3. How can Babel transform private fields?
31 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

32. 1. How can we
simulate
private fields?
32 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

33. WeakMap
const map = new WeakMap();
map.set('foo', 'bar');
const keyObject = {};
map.set(keyObject, 'baz');
33 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

34. export default class Countdown {
#counter;
#action;
constructor(counter, action) {
this.#counter = counter;
this.#action = action;
}
decrement() {
if (this.#counter < 1) return;
this.#counter--;
if (this.#counter === 0) {
this.#action();
}
}
}
34 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

35. export default class Countdown {
constructor(counter, action) {
this.#counter = counter;
this.#action = action;
}
decrement() {
if (this.#counter < 1) return;
this.#counter--;
if (this.#counter === 0) {
this.#action();
}
}
}
const _counterFields = new WeakMap();
const _actionFields = new WeakMap();
35 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

36. export default class Countdown {
constructor(counter, action) {
_counterFields.set(this, counter);
_actionFields.set(this, action);
}
decrement() {
if (this.#counter < 1) return;
this.#counter--;
if (this.#counter === 0) {
this.#action();
}
}
}
const _counterFields = new WeakMap();
const _actionFields = new WeakMap();
36 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

37. export default class Countdown {
constructor(counter, action) {
_counterFields.set(this, counter);
_actionFields.set(this, action);
}
decrement() {
let counter = _counterFields.get(this);
if (counter < 1) return;
this.#counter--;
if (this.#counter === 0) {
this.#action();
}
}
}
const _counterFields = new WeakMap();
const _actionFields = new WeakMap();
37 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

38. export default class Countdown {
constructor(counter, action) {
_counterFields.set(this, counter);
_actionFields.set(this, action);
}
decrement() {
let counter = _counterFields.get(this);
if (counter < 1) return;
counter--;
_counterFields.set(this, counter);
if (this.#counter === 0) {
this.#action();
}
}
}
const _counterFields = new WeakMap();
const _actionFields = new WeakMap();
38 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

39. export default class Countdown {
constructor(counter, action) {
_counterFields.set(this, counter);
_actionFields.set(this, action);
}
decrement() {
let counter = _counterFields.get(this);
if (counter < 1) return;
counter--;
_counterFields.set(this, counter);
if (counter === 0) {
_actionFields.get(this)();
}
}
}
const _counterFields = new WeakMap();
const _actionFields = new WeakMap();
39 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

40. export default class Countdown {
constructor(counter, action) {
_counterFields.set(this, counter);
_actionFields.set(this, action);
}
decrement() {
let counter = _counterFields.get(this);
if (counter < 1) return;
counter--;
_counterFields.set(this, counter);
if (counter === 0) {
_actionFields.get(this)();
}
}
}
const _counterFields = new WeakMap();
const _actionFields = new WeakMap();
40 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

41. 2. How does Babel
transform
in general?
41 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

42. Abstract Syntax Tree (AST)
A data structure to represent code that is easy to inspect and
transform
42 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

43. Abstract Syntax Tree (AST)
function square(n) {
return n ** 2;
}
43 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

44. Abstract Syntax Tree (AST)
44 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

45. Abstract Syntax Tree (AST)
45 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

46. Abstract Syntax Tree (AST)
46 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

47. Abstract Syntax Tree (AST)
47 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

48. Abstract Syntax Tree (AST)
48 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

49. Abstract Syntax Tree (AST)
49 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

50. Abstract Syntax Tree (AST)
50 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

51. Abstract Syntax Tree (AST)
51 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

52. Abstract Syntax Tree (AST)
52 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

53. Transformation
53 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

54. Transformation
54 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

55. Babel Steps
1. Read source JS files into an AST
2. Pass the AST to plugins to transform it
3. Write transformed AST back out to output JS files
55 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

56. 3. How does
Babel transform
private fields?
56 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

57. function buildClassPrivatePropertySpec(ref, path, initNodes, state) {
//...
const map = scope.generateUidIdentifier(name);
memberExpressionToFunctions(/* ... */);
initNodes.push(
template.statement`var MAP = new WeakMap();`({
MAP: map,
}),
);
return () =>
template.statement`MAP.set(REF, VALUE);`({
MAP: map,
REF: ref,
VALUE: path.node.value || scope.buildUndefinedNode(),
});
}
57 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

58. export default class Countdown {
#counter;
#action;
constructor(counter, action) {
this.#counter = counter;
this.#action = action;
}
//...
}
58 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

59. export default class Countdown {
#counter;
#action;
constructor(counter, action) {
babelHelpers.classPrivateFieldSet(this, _counterFields, counter);
this.#action = action;
}
//...
}
59 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

60. export default class Countdown {
#counter;
#action;
constructor(counter, action) {
babelHelpers.classPrivateFieldSet(this, _counterFields, counter);
babelHelpers.classPrivateFieldSet(this, _actionFields, action);
}
//...
}
60 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

61. function buildClassPrivatePropertySpec(ref, path, initNodes, state) {
//...
const map = scope.generateUidIdentifier(name);
memberExpressionToFunctions(/* ... */);
initNodes.push(
template.statement`var MAP = new WeakMap();`({
MAP: map,
}),
);
return () =>
template.statement`MAP.set(REF, VALUE);`({
MAP: map,
REF: ref,
VALUE: path.node.value || scope.buildUndefinedNode(),
});
}
61 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

62. export default class Countdown {
#counter;
#action;
constructor(counter, action) {
babelHelpers.classPrivateFieldSet(this, _counterFields, counter);
babelHelpers.classPrivateFieldSet(this, _actionFields, action);
}
//...
}
62 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

63. export default class Countdown {
#counter;
#action;
constructor(counter, action) {
_counterFields.set(this, undefined);
_actionFields.set(this, undefined);
babelHelpers.classPrivateFieldSet(this, _counterFields, counter);
babelHelpers.classPrivateFieldSet(this, _actionFields, action);
}
//...
}
63 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

64. export default class Countdown {
#counter;
#action;
constructor(counter, action) {
_counterFields.set(this, undefined);
_actionFields.set(this, undefined);
babelHelpers.classPrivateFieldSet(this, _counterFields, counter);
babelHelpers.classPrivateFieldSet(this, _actionFields, action);
}
//...
}
64 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

65. export default class Countdown {
constructor(counter, action) {
_counterFields.set(this, undefined);
_actionFields.set(this, undefined);
babelHelpers.classPrivateFieldSet(this, _counterFields, counter);
babelHelpers.classPrivateFieldSet(this, _actionFields, action);
}
//...
}
65 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

66. export default class Countdown {
constructor(counter, action) {
_counterFields.set(this, undefined);
_actionFields.set(this, undefined);
babelHelpers.classPrivateFieldSet(this, _counterFields, counter);
babelHelpers.classPrivateFieldSet(this, _actionFields, action);
}
//...
}
66 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

67. export default class Countdown {
constructor(counter, action) {
_counterFields.set(this, undefined);
_actionFields.set(this, undefined);
babelHelpers.classPrivateFieldSet(this, _counterFields, counter);
babelHelpers.classPrivateFieldSet(this, _actionFields, action);
}
//...
}
67 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

68. export default class Countdown {
constructor(counter, action) {
_counterFields.set(this, undefined);
_actionFields.set(this, undefined);
babelHelpers.classPrivateFieldSet(this, _counterFields, counter);
babelHelpers.classPrivateFieldSet(this, _actionFields, action);
}
//...
}
const _counterFields = new WeakMap();
const _actionFields = new WeakMap();
68 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

69. Before
and
After69 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

70. export default class Countdown {
#counter;
#action;
constructor(counter, action) {
this.#counter = counter;
this.#action = action;
}
//...
}
70 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

71. export default class Countdown {
constructor(counter, action) {
_counterFields.set(this, undefined);
_actionFields.set(this, undefined);
babelHelpers.classPrivateFieldSet(this, _counterFields, counter);
babelHelpers.classPrivateFieldSet(this, _actionFields, action);
}
//...
}
const _counterFields = new WeakMap();
const _actionFields = new WeakMap();
71 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

72. What did we
accomplish?
72 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

73. Understand
everything
about the transform
73 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

74. Understand
something
about the transform
74 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

75. Babel is not
magic75 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

76. Babel Makes
JavaScript
Awesome76 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

77. You
can make Babel
awesomer77 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

78. 78 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

79. https://opencollective.com/babel
79 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018

80. Thanks!
@CodingItWrong
Resources: http://bit.ly/newbies-guide
80 Newbie's Guide to Contributing to Babel - @CodingItWrong - JSCamp Chicago 2018