proper support for this inside a JSX-name

This commit is contained in:
Erik Krogh Kristensen
2020-08-17 14:23:42 +02:00
parent 3469ad7ca6
commit 6f28ddf1f8
14 changed files with 138 additions and 7 deletions

View File

@@ -35,6 +35,7 @@ import com.semmle.js.ast.jsx.JSXMemberExpression;
import com.semmle.js.ast.jsx.JSXNamespacedName;
import com.semmle.js.ast.jsx.JSXOpeningElement;
import com.semmle.js.ast.jsx.JSXSpreadAttribute;
import com.semmle.js.ast.jsx.JSXThisExpr;
import com.semmle.util.data.Either;
import java.util.ArrayList;
import java.util.List;
@@ -225,22 +226,26 @@ public class JSXParser extends Parser {
}
/** Parse next token as JSX identifier */
private JSXIdentifier jsx_parseIdentifier() {
private IJSXName jsx_parseIdentifier(boolean expectThisExpr) {
SourceLocation loc = new SourceLocation(this.startLoc);
String name = null;
if (this.type == jsxName) name = String.valueOf(this.value);
else if (this.type.keyword != null) name = this.type.keyword;
else this.unexpected();
this.next();
return this.finishNode(new JSXIdentifier(loc, name));
if (expectThisExpr && name.equals("this")) {
return this.finishNode(new JSXThisExpr(loc));
} else {
return this.finishNode(new JSXIdentifier(loc, name));
}
}
/** Parse namespaced identifier. */
private IJSXName jsx_parseNamespacedName() {
SourceLocation loc = new SourceLocation(this.startLoc);
JSXIdentifier namespace = this.jsx_parseIdentifier();
if (!((JSXOptions) options).allowNamespaces || !this.eat(colon)) return namespace;
return this.finishNode(new JSXNamespacedName(loc, namespace, this.jsx_parseIdentifier()));
IJSXName namespace = this.jsx_parseIdentifier(true);
if (namespace instanceof JSXThisExpr || (!((JSXOptions) options).allowNamespaces || !this.eat(colon))) return namespace;
return this.finishNode(new JSXNamespacedName(loc, (JSXIdentifier)namespace, (JSXIdentifier)this.jsx_parseIdentifier(false)));
}
/**
@@ -258,7 +263,7 @@ public class JSXParser extends Parser {
}
while (this.eat(dot)) {
SourceLocation loc = new SourceLocation(startPos);
node = this.finishNode(new JSXMemberExpression(loc, node, this.jsx_parseIdentifier()));
node = this.finishNode(new JSXMemberExpression(loc, node, (JSXIdentifier)this.jsx_parseIdentifier(false)));
}
return node;
}

View File

@@ -15,6 +15,7 @@ import com.semmle.js.ast.jsx.JSXMemberExpression;
import com.semmle.js.ast.jsx.JSXNamespacedName;
import com.semmle.js.ast.jsx.JSXOpeningElement;
import com.semmle.js.ast.jsx.JSXSpreadAttribute;
import com.semmle.js.ast.jsx.JSXThisExpr;
import com.semmle.ts.ast.ExportWholeDeclaration;
import com.semmle.ts.ast.ExternalModuleReference;
import com.semmle.ts.ast.ImportWholeDeclaration;
@@ -635,6 +636,11 @@ public class AST2JSON extends DefaultVisitor<Void, JsonElement> {
return result;
}
@Override
public JsonElement visit(JSXThisExpr nd, Void c) {
return this.mkNode(nd, "JSXThisExpr");
}
@Override
public JsonElement visit(JSXMemberExpression nd, Void c) {
JsonObject result = this.mkNode(nd);

View File

@@ -14,6 +14,7 @@ import com.semmle.js.ast.jsx.JSXMemberExpression;
import com.semmle.js.ast.jsx.JSXNamespacedName;
import com.semmle.js.ast.jsx.JSXOpeningElement;
import com.semmle.js.ast.jsx.JSXSpreadAttribute;
import com.semmle.js.ast.jsx.JSXThisExpr;
import com.semmle.ts.ast.ArrayTypeExpr;
import com.semmle.ts.ast.ConditionalTypeExpr;
import com.semmle.ts.ast.DecoratorList;
@@ -498,6 +499,11 @@ public class DefaultVisitor<C, R> implements Visitor<C, R> {
return visit((IJSXName) nd, c);
}
@Override
public R visit(JSXThisExpr nd, C c) {
return visit((IJSXName) nd, c);
}
@Override
public R visit(JSXMemberExpression nd, C c) {
return visit((IJSXName) nd, c);

View File

@@ -10,6 +10,7 @@ import com.semmle.js.ast.jsx.JSXMemberExpression;
import com.semmle.js.ast.jsx.JSXNamespacedName;
import com.semmle.js.ast.jsx.JSXOpeningElement;
import com.semmle.js.ast.jsx.JSXSpreadAttribute;
import com.semmle.js.ast.jsx.JSXThisExpr;
import com.semmle.ts.ast.ArrayTypeExpr;
import com.semmle.ts.ast.ConditionalTypeExpr;
import com.semmle.ts.ast.DecoratorList;
@@ -567,6 +568,11 @@ public class NodeCopier implements Visitor<Void, INode> {
return new JSXIdentifier(visit(nd.getLoc()), nd.getName());
}
@Override
public INode visit(JSXThisExpr nd, Void c) {
return new JSXThisExpr(visit(nd.getLoc()));
}
@Override
public INode visit(JSXMemberExpression nd, Void c) {
return new JSXMemberExpression(visit(nd.getLoc()), copy(nd.getObject()), copy(nd.getName()));

View File

@@ -10,6 +10,7 @@ import com.semmle.js.ast.jsx.JSXMemberExpression;
import com.semmle.js.ast.jsx.JSXNamespacedName;
import com.semmle.js.ast.jsx.JSXOpeningElement;
import com.semmle.js.ast.jsx.JSXSpreadAttribute;
import com.semmle.js.ast.jsx.JSXThisExpr;
import com.semmle.ts.ast.ArrayTypeExpr;
import com.semmle.ts.ast.ConditionalTypeExpr;
import com.semmle.ts.ast.DecoratorList;
@@ -200,6 +201,8 @@ public interface Visitor<C, R> {
public R visit(JSXIdentifier nd, C c);
public R visit(JSXThisExpr nd, C c);
public R visit(JSXMemberExpression nd, C c);
public R visit(JSXNamespacedName nd, C c);

View File

@@ -0,0 +1,21 @@
package com.semmle.js.ast.jsx;
import com.semmle.js.ast.ThisExpression;
import com.semmle.js.ast.SourceLocation;
import com.semmle.js.ast.Visitor;
public class JSXThisExpr extends ThisExpression implements IJSXName {
public JSXThisExpr(SourceLocation loc) {
super(loc);
}
@Override
public <C, R> R accept(Visitor<C, R> v, C c) {
return v.visit(this, c);
}
@Override
public String getQualifiedName() {
return "this";
}
}

View File

@@ -82,6 +82,7 @@ import com.semmle.js.ast.SwitchStatement;
import com.semmle.js.ast.TaggedTemplateExpression;
import com.semmle.js.ast.TemplateElement;
import com.semmle.js.ast.TemplateLiteral;
import com.semmle.js.ast.ThisExpression;
import com.semmle.js.ast.ThrowStatement;
import com.semmle.js.ast.TryStatement;
import com.semmle.js.ast.UnaryExpression;
@@ -105,6 +106,7 @@ import com.semmle.js.ast.jsx.JSXMemberExpression;
import com.semmle.js.ast.jsx.JSXNamespacedName;
import com.semmle.js.ast.jsx.JSXOpeningElement;
import com.semmle.js.ast.jsx.JSXSpreadAttribute;
import com.semmle.js.ast.jsx.JSXThisExpr;
import com.semmle.js.extractor.ExtractionMetrics.ExtractionPhase;
import com.semmle.js.extractor.ExtractorConfig.Platform;
import com.semmle.js.extractor.ExtractorConfig.SourceType;
@@ -1641,6 +1643,11 @@ public class ASTExtractor {
return visit((Identifier) nd, c);
}
@Override
public Label visit(JSXThisExpr nd, Context c) {
return visit((ThisExpression) nd, c);
}
@Override
public Label visit(JSXMemberExpression nd, Context c) {
Label key = super.visit(nd, c);

View File

@@ -18,6 +18,7 @@ import com.semmle.js.ast.Literal;
import com.semmle.js.ast.LogicalExpression;
import com.semmle.js.ast.MemberExpression;
import com.semmle.js.ast.MetaProperty;
import com.semmle.js.ast.ThisExpression;
import com.semmle.js.ast.UnaryExpression;
import com.semmle.js.ast.UpdateExpression;
import com.semmle.js.ast.XMLAnyName;
@@ -28,6 +29,7 @@ import com.semmle.js.ast.XMLQualifiedIdentifier;
import com.semmle.js.ast.jsx.JSXIdentifier;
import com.semmle.js.ast.jsx.JSXMemberExpression;
import com.semmle.js.ast.jsx.JSXSpreadAttribute;
import com.semmle.js.ast.jsx.JSXThisExpr;
import com.semmle.js.extractor.ASTExtractor.IdContext;
import com.semmle.ts.ast.DecoratorList;
import com.semmle.ts.ast.ExpressionWithTypeArguments;
@@ -191,6 +193,11 @@ public class ExprKinds {
return visit((Identifier) nd, c);
}
@Override
public Integer visit(JSXThisExpr nd, Void c) {
return visit((ThisExpression) nd, c);
}
@Override
public Integer visit(LogicalExpression nd, Void q) {
return binOpKinds.get(nd.getOperator());

View File

@@ -110,6 +110,7 @@ import com.semmle.js.ast.jsx.JSXIdentifier;
import com.semmle.js.ast.jsx.JSXMemberExpression;
import com.semmle.js.ast.jsx.JSXOpeningElement;
import com.semmle.js.ast.jsx.JSXSpreadAttribute;
import com.semmle.js.ast.jsx.JSXThisExpr;
import com.semmle.js.parser.JSParser.Result;
import com.semmle.ts.ast.ArrayTypeExpr;
import com.semmle.ts.ast.ConditionalTypeExpr;
@@ -2356,7 +2357,7 @@ public class TypeScriptASTConverter {
convertJSXName(me.getObject()),
(JSXIdentifier) convertJSXName(me.getProperty()));
}
if (e instanceof ThisExpression) return new JSXIdentifier(e.getLoc(), "this");
if (e instanceof ThisExpression) return new JSXThisExpr(e.getLoc());
return (IJSXName) e;
}

View File

@@ -181,6 +181,7 @@ class JSXQualifiedName extends Expr, @jsxqualifiedname {
class JSXName extends Expr {
JSXName() {
this instanceof Identifier or
this instanceof ThisExpr or
this.(DotExpr).getBase() instanceof JSXName or
this instanceof JSXQualifiedName
}
@@ -198,6 +199,9 @@ class JSXName extends Expr {
exists(JSXQualifiedName qual | qual = this |
result = qual.getNamespace().getName() + ":" + qual.getName().getName()
)
or
this instanceof ThisExpr and
result = "this"
}
}

View File

@@ -0,0 +1,19 @@
import semmle.javascript.frameworks.React
query predicate test_JSXname(JSXElement element, JSXName jsxname, string name, string type) {
name = jsxname.getValue() and
(
jsxname instanceof Identifier and type = "Identifier"
or
jsxname instanceof ThisExpr and type = "thisExpr"
or
jsxname.(DotExpr).getBase() instanceof JSXName and type = "dot"
or
jsxname instanceof JSXQualifiedName and type = "qualifiedName"
) and
element.getNameExpr() = jsxname
}
query ThisExpr test_JSXName_this(JSXElement element) {
result.getParentExpr+() = element
}

View File

@@ -35,6 +35,7 @@ test_ReactComponent_getInstanceMethod
| thisAccesses.js:18:19:29:1 | {\\n r ... }\\n} | someInstanceMethod | thisAccesses.js:26:25:28:5 | functio ... ;\\n } |
| thisAccesses.js:31:2:36:1 | functio ... iv/>;\\n} | render | thisAccesses.js:31:2:36:1 | functio ... iv/>;\\n} |
| thisAccesses.js:38:19:45:1 | {\\n r ... },\\n} | render | thisAccesses.js:39:13:44:5 | functio ... ;\\n } |
| thisAccesses.js:54:1:63:1 | class C ... }\\n} | render | thisAccesses.js:59:11:62:5 | () {\\n ... ;\\n } |
| thisAccesses_importedMappers.js:4:19:15:1 | {\\n r ... },\\n} | render | thisAccesses_importedMappers.js:5:13:14:5 | functio ... ;\\n } |
test_react
| es5.js:1:13:1:17 | React |
@@ -70,6 +71,7 @@ test_react
| thisAccesses.js:38:1:38:5 | React |
| thisAccesses.js:40:9:40:13 | React |
| thisAccesses.js:47:18:47:22 | React |
| thisAccesses.js:54:18:54:22 | React |
| thisAccesses_importedMappers.js:1:8:1:12 | React |
| thisAccesses_importedMappers.js:4:1:4:5 | React |
| thisAccesses_importedMappers.js:6:9:6:13 | React |
@@ -165,6 +167,10 @@ test_ReactComponent_ref
| thisAccesses.js:47:1:52:1 | class C ... }\\n} | thisAccesses.js:48:17:48:16 | this |
| thisAccesses.js:47:1:52:1 | class C ... }\\n} | thisAccesses.js:49:9:49:12 | this |
| thisAccesses.js:47:1:52:1 | class C ... }\\n} | thisAccesses.js:50:9:50:12 | this |
| thisAccesses.js:54:1:63:1 | class C ... }\\n} | thisAccesses.js:55:16:55:15 | this |
| thisAccesses.js:54:1:63:1 | class C ... }\\n} | thisAccesses.js:59:11:59:10 | this |
| thisAccesses.js:54:1:63:1 | class C ... }\\n} | thisAccesses.js:60:20:60:23 | this |
| thisAccesses.js:54:1:63:1 | class C ... }\\n} | thisAccesses.js:61:20:61:23 | this |
| thisAccesses_importedMappers.js:4:19:15:1 | {\\n r ... },\\n} | thisAccesses_importedMappers.js:4:19:15:1 | {\\n r ... },\\n} |
| thisAccesses_importedMappers.js:4:19:15:1 | {\\n r ... },\\n} | thisAccesses_importedMappers.js:5:13:5:12 | this |
| thisAccesses_importedMappers.js:4:19:15:1 | {\\n r ... },\\n} | thisAccesses_importedMappers.js:6:38:6:37 | this |
@@ -248,6 +254,7 @@ test_ReactComponent
| thisAccesses.js:31:2:36:1 | functio ... iv/>;\\n} |
| thisAccesses.js:38:19:45:1 | {\\n r ... },\\n} |
| thisAccesses.js:47:1:52:1 | class C ... }\\n} |
| thisAccesses.js:54:1:63:1 | class C ... }\\n} |
| thisAccesses_importedMappers.js:4:19:15:1 | {\\n r ... },\\n} |
test_ReactComponent_getAPropRead
| es5.js:1:31:11:1 | {\\n dis ... ;\\n }\\n} | name | es5.js:4:24:4:38 | this.props.name |
@@ -258,3 +265,30 @@ test_ReactComponent_getAPropRead
| preact.js:1:1:7:1 | class H ... }\\n} | name | preact.js:3:9:3:18 | props.name |
| probably-a-component.js:1:1:6:1 | class H ... }\\n} | name | probably-a-component.js:3:9:3:23 | this.props.name |
| statePropertyWrites.js:36:19:45:1 | {\\n ren ... ;\\n }\\n} | name | statePropertyWrites.js:38:24:38:38 | this.props.name |
test_JSXname
| es5.js:4:12:4:45 | <div>He ... }</div> | es5.js:4:13:4:15 | div | div | Identifier |
| es5.js:20:12:20:44 | <h1>Hel ... e}</h1> | es5.js:20:13:20:14 | h1 | h1 | Identifier |
| es6.js:3:12:3:45 | <div>He ... }</div> | es6.js:3:13:3:15 | div | div | Identifier |
| exportedComponent.jsx:2:12:2:46 | <div st ... lor}}/> | exportedComponent.jsx:2:13:2:15 | div | div | Identifier |
| importedComponent.jsx:4:12:4:39 | <MyComp ... olor}/> | importedComponent.jsx:4:13:4:23 | MyComponent | MyComponent | Identifier |
| plainfn.js:2:10:2:38 | <div>He ... }</div> | plainfn.js:2:11:2:13 | div | div | Identifier |
| preact.js:5:16:5:21 | <div/> | preact.js:5:17:5:19 | div | div | Identifier |
| probably-a-component.js:4:16:4:21 | <div/> | probably-a-component.js:4:17:4:19 | div | div | Identifier |
| props.js:7:6:7:37 | <C prop ... JSX"}/> | props.js:7:7:7:7 | C | C | Identifier |
| props.js:19:6:19:37 | <C prop ... JSX"}/> | props.js:19:7:19:7 | C | C | Identifier |
| props.js:27:16:27:21 | <div/> | props.js:27:17:27:19 | div | div | Identifier |
| props.js:32:6:32:37 | <C prop ... JSX"}/> | props.js:32:7:32:7 | C | C | Identifier |
| statePropertyWrites.js:38:12:38:45 | <div>He ... }</div> | statePropertyWrites.js:38:13:38:15 | div | div | Identifier |
| thisAccesses.js:23:16:23:21 | <div/> | thisAccesses.js:23:17:23:19 | div | div | Identifier |
| thisAccesses.js:35:12:35:17 | <div/> | thisAccesses.js:35:13:35:15 | div | div | Identifier |
| thisAccesses.js:43:16:43:21 | <div/> | thisAccesses.js:43:17:43:19 | div | div | Identifier |
| thisAccesses.js:60:19:60:41 | <this.n ... s.name> | thisAccesses.js:60:20:60:28 | this.name | this.name | dot |
| thisAccesses.js:61:19:61:41 | <this.t ... s.this> | thisAccesses.js:61:20:61:28 | this.this | this.this | dot |
| thisAccesses_importedMappers.js:13:16:13:21 | <div/> | thisAccesses_importedMappers.js:13:17:13:19 | div | div | Identifier |
test_JSXName_this
| es5.js:4:12:4:45 | <div>He ... }</div> | es5.js:4:24:4:27 | this |
| es5.js:20:12:20:44 | <h1>Hel ... e}</h1> | es5.js:20:24:20:27 | this |
| es6.js:3:12:3:45 | <div>He ... }</div> | es6.js:3:24:3:27 | this |
| statePropertyWrites.js:38:12:38:45 | <div>He ... }</div> | statePropertyWrites.js:38:24:38:27 | this |
| thisAccesses.js:60:19:60:41 | <this.n ... s.name> | thisAccesses.js:60:20:60:23 | this |
| thisAccesses.js:61:19:61:41 | <this.t ... s.this> | thisAccesses.js:61:20:61:23 | this |

View File

@@ -8,3 +8,4 @@ import ReactComponent_getADirectPropsSource
import ReactComponent_getACandidatePropsValue
import ReactComponent
import ReactComponent_getAPropRead
import ReactName

View File

@@ -50,3 +50,14 @@ class C2 extends React.Component {
this.state = y;
}
}
class C3 extends React.Component {
constructor() {
}
render() {
var foo = <this.name></this.name>;
var bar = <this.this></this.this>;
}
}