Implement optional chaining and nullish coalescing

[a-x-]

a?.b → a && a.b
Ok or fork?

[alangpierce]

@a-x- sure, I don't have any problem with anyone forking the project and adding any features they want to their own fork.

In this case, I wouldn't accept this transformation as a PR because it's not correct in all cases, and more generally I think a correct optional chaining implementation is likely difficult enough that I'd prefer to call it out of scope for Sucrase. But if there's an implementation that's correct and isn't too complicated, I'd be happy to consider it.

Babel compiles it as:

var _a;
(_a = a) === null || _a === void 0 ? void 0 : _a.b;

which also requires finding a good place to declare _a.

Some issues with the a?.b → a && a.b transformation you have:

• If a is a function call, like a()?.b, then it will be called twice when it's only supposed to be called once.
• The expression a && a.b uses a truthy/falsy check rather than a null/undefined check, so the evaluation behavior will be different if a is 0, false, NaN, or ''.
• The expression a && a.b returns a if the check fails, but a?.b (I believe) returns undefined if the check fails.

[a-x-]

Thank you!

but a?.b (I believe) returns undefined if the check fails.

I think it should return null or undefined according to a's value.

[alangpierce]

Hmm, the README from https://github.com/tc39/proposal-optional-chaining says it would be undefined if a is null:

a?.b                          // undefined if `a` is null/undefined, `a.b` otherwise.
a == null ? undefined : a.b

But I know it has been a topic of discussion and they've gone back and forth on the exact behavior there.

[villesau]

This is how Babel plugin handles optional chaining: https://github.com/babel/babel/blob/master/packages/babel-plugin-proposal-optional-chaining/src/index.js

[alangpierce]

Optional Chaining is now Stage 3, and currently my hope is that Chrome/Node will get optional chaining soon enough that it's ok to skip in Sucrase. It's being tracked here and looks like it just got an initial implementation:

https://www.chromestatus.com/feature/5748330720133120
https://bugs.chromium.org/p/v8/issues/detail?id=9553

It definitely seems like the most significant recent JS feature, so it might be high priority enough to go into Sucrase even if the implementation is really complex, but for now I'd prefer to wait and see, so closing this out for now.

[ansballard]

Figured it's worth bumping this now that typescript has released optional chaining (and nullish coalescing, but that isn't in any browsers yet) in 3.7. Curious to know what might push this one over the edge. For me keeping parity with stable typescript features would be ideal since I'm running both over the same code, but I don't know how common that use case is. Thanks for the hard work!

Also, what would be the first step implementing, just to pull in the way babel does it and tweak from there?

[alangpierce]

Yep, agreed! I've been thinking about this more over the last few days since the TS release, and I'll reopen this issue and repurpose it to built-in support in Sucrase. I'll add some more detail when I get a chance.

Chrome Canary now has optional chaining available by default, and in Chrome Beta it's available behind the "Experimental JavaScript" flag, so it's already reasonable to use it in development with Sucrase (which will emit it unchanged) for running code in the browser. My team runs tests in Node, though, and it looks like Node 14 (to be released next year) will be the first version with support. We also lag behind the latest Node, so it will be a while before we have native support for the syntax in tests. It seems like a high-enough value syntax that it can be an exception to the "Sucrase is hesitant to implement upcoming JS features" rule.

Sucrase transforms require a lot more thought and care than Babel transforms since Sucrase makes the parser as minimal as possible and transforms code in a left-to-right scan, so it's tricky, but I think there will be a way to make it work.

[alangpierce]

Ooh, looks like optional chaining is actually available in node 13 behind a flag and there's a backport that will make it available in node 12 behind a flag: nodejs/node#30109 . Still seems useful to have in Sucrase, but hopefully runtime support will come relatively soon.

[Whobeu]

I have tested Optional Chaining and Nullish Coalescing in Node 13 using the --harmony-optional-chaining and --harmony-nullish flags respectively. No issues with either. However, I tested out this function from https://node.green validation for Nullish Coalescing with Node 13 and it returns false:

function nullishCoalescingOperator() {
  return (null ?? 42 === 42) &&
    (undefined ?? 42 === 42) &&
    (false ?? 42 === false) &&
    ('' ?? 42 === '') &&
    (0 ?? 42 === 0);
}

Putting parentheses around the last three tests makes it work correctly:

function nullishCoalescingOperator() {
  return (null ?? 42 === 42) &&
    (undefined ?? 42 === 42) &&
    ((false ?? 42) === false) &&
    (('' ?? 42) === '') &&
    ((0 ?? 42) === 0);
}

I did not look at the Nullish Coalescing spec to see how the implementation differs in terms of parentheses requirements from when this test had been created.

[alangpierce]

I worked through the details and different options by writing up a technical plan at https://github.com/alangpierce/sucrase/wiki/Sucrase-Optional-Chaining-and-Nullish-Coalescing-Technical-Plan . I'll get started on the implementation soon.

[alangpierce]

I just published optional chaining and nullish coalescing support as 3.12.0, so closing this!

[ansballard]

@alangpierce just want to thank you for knocking this out so quick!