Skip to content

[ts] support optional chain call with generic#13513

Merged
nicolo-ribaudo merged 8 commits intobabel:mainfrom
lala7573:fix-13400
Aug 4, 2021
Merged

[ts] support optional chain call with generic#13513
nicolo-ribaudo merged 8 commits intobabel:mainfrom
lala7573:fix-13400

Conversation

@lala7573
Copy link
Copy Markdown
Contributor

@lala7573 lala7573 commented Jun 27, 2021

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

I referenced this part. I'm little confused whether we need to check the noCalls state like this one.

if (this.match(tt.questionDot) && this.isLookaheadToken_lt()) {
subscriptState.optionalChainMember = true;
if (noCalls) {
subscriptState.stop = true;
return base;
}
this.next();

@babel-bot
Copy link
Copy Markdown
Collaborator

babel-bot commented Jun 27, 2021

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

@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci bot commented Jun 27, 2021

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1301462:

Sandbox Source
babel-repl-custom-plugin Configuration
babel-plugin-multi-config Configuration

@fedeci fedeci added area: typescript pkg: parser PR: Bug Fix 🐛 A type of pull request used for our changelog categories labels Jun 27, 2021
Copy link
Copy Markdown
Member

@fedeci fedeci left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Could you add also a test for:

f
?.<Q>()

@lala7573
Copy link
Copy Markdown
Contributor Author

@fedeci I patched it!

Copy link
Copy Markdown
Contributor

@JLHwung JLHwung left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

whether we need to check the noCalls state like this one.

Yes we should check noCalls when consuming ?.. e.g.

new f?.<string>()

should throw because optional chain can not include new expression.

@lala7573
Copy link
Copy Markdown
Contributor Author

I have no idea on failed linting test ..:'(

Copy link
Copy Markdown
Member

@nicolo-ribaudo nicolo-ribaudo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"type": "ChainExpression",
"start":15,"end":30,"loc":{"start":{"line":2,"column":0},"end":{"line":2,"column":15}},
"expression": {
"type": "CallExpression",
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be an OptionalCallExpression.

Copy link
Copy Markdown
Contributor Author

@lala7573 lala7573 Jul 2, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I'm gonna fix it. but there is optional: true at the end of this depth. Is it different? 🤔

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes! optional: true means "here you have a question mark", while OptionalCallExpression means "there is a question mark somewhere".

For example, in a?.()() both are OptionalCallExpression but only the first one has optional: true.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The behaviour is correct. The test enables the estree plugin, which converts OptionalCallExpression to a ChainExpression.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I didn't realize it.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a lot! I patched the code, and other part is now OptionalCallExpression.

}
return this.finishCallExpression(node, state.optionalChainMember);
if (isOptionalCall) {
node.optional = true;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When state.optionalChainMember is set, we can merge this branch with the preceding one.

Copy link
Copy Markdown
Contributor Author

@lala7573 lala7573 Jul 3, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't understand the above code. I don't know the reason when state.optionalChainMember is true, then node.optional would be false.

if (state.optionalChainMember) {
// $FlowIgnore
node.optional = false;
}

You mean like this?

if (state.optionalChainMember) {
  node.optional = isOptional? true: false;
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. The isOptional should be assigned to node.optional.

});

if (!result && isOptionalCall) {
this.unexpected(this.state.pos, tt.parenL);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can throw at better position: We can track the position after typeArguments is parsed but we do not see a left parenthesis token. Then we throw on this position that we are expecting a left paren after type arguments.

Copy link
Copy Markdown
Contributor Author

@lala7573 lala7573 Jul 3, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we throw an error on this condition, the result would be undefined by tsTryParseAndCatch, and also the error message would be ignored.
I found that the error position is wrong (it should be "Unexpected token, expected "(" (1:12)" not (1:4)) because the error is restored by tsTryParseAndCatch.
I wanna throw an error with the accurate error message at a better position.
To handle this, we can make unexpectedError in packages/babel-parser/src/parser/util.js and return this.unexpectedError(this.state.pos, tt.parenL) on that condition., then change this part like this.

if (result?.failState) throw result.node;

But I'm not sure that we could use node to handle the error. It seems weird. I need help 😢

"plugins": [
"typescript"
],
"throws": "Unexpected token, expected \"(\" (1:4)"
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The position is wrong. This should be Unexpected token, expected "(" (1:12).

@lala7573 lala7573 force-pushed the fix-13400 branch 2 times, most recently from 889a19a to dac5990 Compare July 7, 2021 01:34
@lala7573
Copy link
Copy Markdown
Contributor Author

lala7573 commented Jul 7, 2021

I patched it :)

Copy link
Copy Markdown
Member

@nicolo-ribaudo nicolo-ribaudo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left two minor comments, but otherwise it looks good 👍

this.match(tt.questionDot) &&
this.lookaheadCharCode() === charCodes.lessThan
) {
state.optionalChainMember = isOptionalCall = true;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: we can move this after the if (noCalls) {} check, since we don't need to set if if we stop and return.


if (typeArguments) {
if (isOptionalCall && !this.match(tt.parenL)) {
error = [this.state.pos, tt.parenL];
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We only need to store the error position (in a missingParenErrorPos variable), and then later do

if (missingParenErrorPos) {
	this.unexpected(missingParenErrorPos, tt.parenL);
}

@lala7573
Copy link
Copy Markdown
Contributor Author

@JLHwung @fedeci @nicolo-ribaudo
Is there anything to merge this? 🙏

Copy link
Copy Markdown
Member

@fedeci fedeci left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

JLHwung
JLHwung previously approved these changes Jul 23, 2021
@JLHwung JLHwung dismissed their stale review July 23, 2021 13:48

The Lint error is related.

@nicolo-ribaudo nicolo-ribaudo merged commit 0671afc into babel:main Aug 4, 2021
@nicolo-ribaudo nicolo-ribaudo changed the title support optional chain call with generic [ts] support optional chain call with generic Aug 4, 2021
@github-actions github-actions bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Nov 4, 2021
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Nov 4, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

area: typescript outdated A closed issue/PR that is archived due to age. Recommended to make a new issue pkg: parser PR: Bug Fix 🐛 A type of pull request used for our changelog categories

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Failed to parse optional chain call with generic

5 participants