cerxes/babel
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Don't insert __self: this within constructors of derived classes (#13552)

Browse Source 
* Don't insert `__self: this` prior to `super()` calls (#13550)

`__self: this` is inserted for debugging purposes. However, it will cause a runtime error if it is inserted prior to a `super()` call in a constructor. This commit will prevent `__self: this` from inserted when there is a following `super()` call.

* Prevent adding `__self` within a constructor that has `super()` altogether.

* Fix 2 typos in the comments.

* Add an additional test case for constructors that do not have a `super()` call.

* Detect `super()` call by testing whether the class has a superclass.

* Update method name and corresponding comments

* Add an additional test for the case where the derived class do not have a `super()` call.

* Apply the same changes to babel-plugin-transform-react-jsx
This commit is contained in:
Rin Tepis
2021-07-27 01:32:29 +08:00
committed by GitHub
parent 4a56387330
commit 224a35c5c6
8 changed files with 570 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
packages/babel-plugin-transform-react-jsx/src/create-plugin.ts
View File

@@ -103,16 +103,22 @@ export default function createPlugin({ name, development }) {
}
}
const self = t.jsxAttribute(
t.jsxIdentifier("__self"),
t.jsxExpressionContainer(t.thisExpression()),
const attributes = [];
if (isThisAllowed(path)) {
attributes.push(
t.jsxAttribute(
t.jsxIdentifier("__self"),
t.jsxExpressionContainer(t.thisExpression()),
),
);
}
attributes.push(
t.jsxAttribute(
t.jsxIdentifier("__source"),
t.jsxExpressionContainer(makeSource(path, state)),
),
);
const source = t.jsxAttribute(
t.jsxIdentifier("__source"),
t.jsxExpressionContainer(makeSource(path, state)),
);
path.pushContainer("attributes", [self, source]);
path.pushContainer("attributes", attributes);
},
};
@@ -277,6 +283,49 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`,
},
};
// Finds the closest parent function that provides `this`. Specifically, this looks for
// the first parent function that isn't an arrow function.
//
// Derived from `Scope#getFunctionParent`
function getThisFunctionParent(path) {
let scope = path.scope;
do {
if (
scope.path.isFunctionParent() &&
!scope.path.isArrowFunctionExpression()
) {
return scope.path;
}
} while ((scope = scope.parent));
return null;
}
// Returns whether the class has specified a superclass.
function isDerivedClass(classPath) {
return classPath.node.superClass !== null;
}
// Returns whether `this` is allowed at given path.
function isThisAllowed(path) {
// This specifically skips arrow functions as they do not rewrite `this`.
const parentMethodOrFunction = getThisFunctionParent(path);
if (parentMethodOrFunction === null) {
// We are not in a method or function. It is fine to use `this`.
return true;
}
if (!parentMethodOrFunction.isMethod()) {
// If the closest parent is a regular function, `this` will be rebound, therefore it is fine to use `this`.
return true;
}
// Current node is within a method, so we need to check if the method is a constructor.
if (parentMethodOrFunction.node.kind !== "constructor") {
// We are not in a constructor, therefore it is always fine to use `this`.
return true;
}
// Now we are in a constructor. If it is a derived class, we do not reference `this`.
return !isDerivedClass(parentMethodOrFunction.parentPath.parentPath);
}
function call(pass, name, args) {
const node = t.callExpression(get(pass, `id/${name}`)(), args);
if (PURE_ANNOTATION ?? get(pass, "defaultPure")) annotateAsPure(node);
@@ -476,7 +525,7 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`,
extracted.key ?? path.scope.buildUndefinedNode(),
t.booleanLiteral(children.length > 1),
extracted.__source ?? path.scope.buildUndefinedNode(),
extracted.__self ?? t.thisExpression(),
extracted.__self ?? path.scope.buildUndefinedNode(),
);
} else if (extracted.key !== undefined) {
args.push(extracted.key);