fix: Throw error when compiling super() in arrow functions with default / rest parameters

[SuperSodaSea]

Q	A
Fixed Issues?	Fixes #15148
Patch: Bug Fix?	👍
Major: Breaking Change?
Minor: New Feature?
Tests Added + Pass?	Yes
Documentation PR Link
Any Dependency Changes?
License	MIT

In @babel/plugin-transform-parameters, compiling super() in arrow functions with default or rest parameters without compiling classes will generate code with infinite recursion. Check and throw error in this situation.

Tests

• babel-plugin-transform-arrow-functions/test/fixtures/arrow-functions/super-call
• babel-plugin-transform-arrow-functions/test/fixtures/arrow-functions/super-prop
• babel-plugin-transform-parameters/test/fixtures/parameters/arrow-default-super-no-classes-plugin
• babel-plugin-transform-parameters/test/fixtures/parameters/arrow-rest-super-no-classes-plugin

[babel-bot]

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/53499/

[JLHwung]

I think we can avoid the extra traversal if we fix this issue in the arrow conversion.

[JLHwung]

Note that the input here is very similar to how we would transform super():

babel/packages/babel-traverse/test/arrow-transform.js

Lines 53 to 71 in 9862d42

	assertConversion(
	`
	() => {
	super(345);
	};
	super();
	() => super();
	`,
	`
	var _supercall = (..._args) => super(..._args);
	(function () {
	_supercall(345);
	});
	_supercall();
	() => _supercall();
	`,
	{ methodName: "constructor", extend: true },
	);

My gut is that it should have been fixed in how we generate the super call:

babel/packages/babel-traverse/src/path/conversion.ts

Line 652 in 9862d42

function getSuperBinding(thisEnvFn: NodePath<t.Function>) {

We already have an arrow function check when constructing supercall,

babel/packages/babel-traverse/src/path/conversion.ts

Lines 287 to 291 in 9862d42

	if (!allowInsertArrow) {
	throw superCalls[0].buildCodeFrameError(
	"Unable to handle nested super() usage in arrow",
	);
	}

somehow it does not throw, probably because allowInsertArrow is not properly passed.

[SuperSodaSea]

Perhaps we can add allowInsertArrow: false here?

babel/packages/babel-plugin-transform-parameters/src/index.ts

Lines 48 to 49 in 073b3b0

	// default/rest visitors require access to `arguments`, so it cannot be an arrow
	path.arrowFunctionToExpression({ noNewArrows });

[SuperSodaSea]

I tried to add allowInsertArrow: false and it fails on #13939 related tests...:thinking:
Maybe we need something like allowInsertArrowWithRest?

    × 13939
    × 13939 complex
    × 13939 private
    × 13939 private complex

SyntaxError: babel/packages/babel-plugin-transform-parameters/test/fixtures/regression/13939/input.js: Unable to transform arrow inside class property
      1 | class A {
    > 2 |   handle = (x = 0) => {
        |            ^
      3 |     console.log(x);
      4 |   };
      5 | }

...

[JLHwung]

This error message is way better than Unable to handle nested super() usage in arrow, we can improve that message if we figure out how to make that work.

[SuperSodaSea]

@JLHwung arrowFunctionToExpression and hoistFunctionEnvironment now have a new parameter allowInsertArrowWithRest, and we can check this directly without having the extra traversal.

babel/packages/babel-plugin-transform-parameters/src/index.ts

Lines 30 to 33 in db066ab

	path.arrowFunctionToExpression({
	allowInsertArrowWithRest: false,
	noNewArrows,
	});

babel/packages/babel-traverse/src/path/conversion.ts

Lines 298 to 305 in db066ab

	if (!allowInsertArrowWithRest) {
	// NOTE: This may happen in `@babel/preset-env` with target `since 2017`, or in the default setting of `create-react-app`.
	throw superCalls[0].buildCodeFrameError(
	"When using '@babel/plugin-transform-parameters', " +
	"it's not possible to compile `super()` in an arrow function with default or rest parameters without compiling classes.\n" +
	"Please add '@babel/plugin-transform-classes' to your Babel configuration.",
	);
	}

---

I also figure out that the allowInsertArrow only comes from @babel/plugin-transform-arrow-functions, so I also improved the Unable to handle nested super() usage in arrow errors, now they looks like this:

babel/packages/babel-plugin-transform-arrow-functions/src/index.ts

Lines 22 to 30 in db066ab

	path.arrowFunctionToExpression({
	// While other utils may be fine inserting other arrows to make more transforms possible,
	// the arrow transform itself absolutely cannot insert new arrow functions.
	allowInsertArrow: false,
	noNewArrows,
	// TODO(Babel 8): This is only needed for backward compat with @babel/traverse <7.13.0
	specCompliant: !noNewArrows,
	});

babel/packages/babel-traverse/src/path/conversion.ts

Lines 290 to 297 in db066ab

	if (inConstructor && superCalls.length > 0) {
	if (!allowInsertArrow) {
	throw superCalls[0].buildCodeFrameError(
	"When using '@babel/plugin-transform-arrow-functions', " +
	"it's not possible to compile `super()` in an arrow function without compiling classes.\n" +
	"Please add '@babel/plugin-transform-classes' to your Babel configuration.",
	);
	}

babel/packages/babel-traverse/src/path/conversion.ts

Lines 359 to 366 in db066ab

	if (superProps.length > 0) {
	if (!allowInsertArrow) {
	throw superProps[0].buildCodeFrameError(
	"When using '@babel/plugin-transform-arrow-functions', " +
	"it's not possible to compile `super.prop` in an arrow function without compiling classes.\n" +
	"Please add '@babel/plugin-transform-classes' to your Babel configuration.",
	);
	}

[JLHwung]

Thanks!

[AntiMoron]

666