Optional Chaining Operator (Stage 1) by jridgewell · Pull Request #5813 · babel/babel

jridgewell · 2017-06-02T08:04:37Z

Example: https://babeljs.io/repl/build/master#?babili=false&browsers=&build=&builtIns=false&code_lz=IYfgdARg3AUDqTAYzAE1vcFnnXBA2gOQREC6shEFmYAFAJRRA&debug=false&circleciRepo=&evaluate=false&lineWrap=false&presets=stage-0&prettier=false&targets=&version=7.0.0-beta.2

Q	A
Patch: Bug Fix?	No
Major: Breaking Change?	No
Minor: New Feature?	Yes
Deprecations?
Spec Compliancy?
Tests Added/Pass?	Yes
Fixed Tickets	Closes #5786
License	MIT
Doc PR
Dependency Changes

This is another implementation of Null Propagation Operators, competing with #5786. This one takes a different, top-down approach to the transform that avoids the WeakSet state. It also implements optional CallExpressions and NewExpressions.

This has a few todos:

Split transform into two plugins
1. Syntax enabler (the manipulateOptions stuff)
2. The transform
There's a "fixer" for the WIP parser.
- Optional CallExpressions don't have a callee
- Optional NewExpressions have a callee that's a CallExpression. That callee's callee and arguments should be the NewExpressions callee and arguments
Update babel-generator printer

hzoo

readme update with example and link to proposal
does babel-types need changing?
do we want some simple exec tests? (could be basis for test262 as well)

jridgewell · 2017-06-04T05:28:23Z

@hzoo: done. Please advise whether I have all the necessary LHS parents we need to guard.

xtuc · 2017-06-05T11:19:48Z

Nice job @jridgewell!

In the spec, they are talking about a "special Reference" called nil. Could we explicitly use it in the plugin's code? Like in my plugin here.

I'm ok with closing my PR.

Link to parser PR babel/babylon#545.

jridgewell · 2017-06-05T17:58:25Z

Done.

Sorry about the duplicate PRs. I usually open one against the original PR (like the parser one), but this implementation was significantly different.

ljharb · 2017-06-05T21:38:59Z

packages/babel-plugin-transform-optional-chaining/README.md

+const baz = obj?.foo?.bar?.baz(); // 42
+
+const safe = obj?.qux?.baz(); // undefined
+const safe2 = obj?.foo.bar.qux?.(); // undefined


can we add an example like obj?.foo.bar.bazz() that throws?

ljharb · 2017-06-05T21:40:36Z

packages/babel-plugin-transform-optional-chaining/README.md

+
+const baz = new obj?.foo?.bar?.baz(); // baz instance
+
+const safe = new obj?.qux?.baz(); // undefined


I don't think this should return undefined (obv that depends on the proposal itself).

I think that if you want the new not to throw when it gets a non-function, either the new or the () must have the conditional operator attached to it.

In other words, new obj?.qux?.baz() should be identical to const foo = obj?.qux?.baz; new foo().

Moving to tc39/proposal-optional-chaining#2.

Jessidhia · 2017-06-06T02:11:57Z

packages/babel-plugin-transform-optional-chaining/src/index.js

+        optionals.push(node);
+      }
+
+      objectPath = objectPath.get("object");


for (let objectPath = path.get(key); objectPath.isMemberExpression(); objectPath = objectPath.get("object"))

Jessidhia · 2017-06-06T02:12:41Z

packages/babel-plugin-transform-optional-chaining/src/index.js

+      objectPath = objectPath.get("object");
+    }
+
+    for (let i = optionals.length - 1; i >= 0; i--) {


for (const [i, node] of optionals.entries())

or

optionals.forEach((node, i) => {})

Can't, I have to reverse iterate.

Oh, right. .reverse() could do the trick, but the i would have to be subtracted from the length 🤔

Jessidhia · 2017-06-06T02:14:54Z

packages/babel-plugin-transform-optional-chaining/src/index.js

+      if (atCall && t.isMemberExpression(chain)) {
+        if (loose) {
+          // To avoid a Function#call, we can instead re-grab the property from the context object.
+          // `a.?b.?()` translates roughly to `_a.b != null && _a.b()`


That would invoke a getter twice though...

Yup, that's why it's loose. 😉

packages/babel-plugin-transform-optional-chaining/test/fixtures/execute/new.js

Jessidhia · 2017-06-06T02:21:47Z

packages/babel-types/src/definitions/core.js


 defineType("MemberExpression", {
-  builder: ["object", "property", "computed"],
+  builder: ["object", "property", "computed", "optional"],


Does this need to be added to NewExpression / CallExpression as well?

Damn, missed that.

hzoo · 2017-06-06T15:57:58Z

update babylon https://github.com/babel/babylon/releases/tag/v7.0.0-beta.13
I would add some printer tests for babel-generator too

This way, it quickly returns from the conditions. The first nil will now exit, instead of checking every nil. This also allows conditionalChaining inside a container to still operate the container.

gisenberg

Looks good to me, thanks so much for the contribution! I'll work towards updating the TC39 proposal to cover some of the comments in this PR.

Mouvedia · 2017-06-21T19:22:18Z

Does this mean that it has been added to the preset-stage-1?

jridgewell · 2017-06-27T05:28:10Z

It's in there now.

xtuc · 2017-06-27T14:25:05Z

packages/babel-plugin-transform-optional-chaining/package.json

+    "babel-plugin-syntax-optional-chaining": "7.0.0-alpha.13"
+  },
+  "keywords": [
+    "babel-plugin"


We can more keyword here:

optional chaining

null propagator

elvis

@xtuc It's not the Elvis operator.

Cyclops-Elvis operator

xtuc

Nice work guys 👍

hzoo · 2017-06-27T15:16:52Z

Great job @jridgewell and @xtuc, thanks for the review @gisenberg!!

pronebird · 2017-06-30T15:22:46Z

This is awesome! Can this be released on NPM please? I was not able to install syntax-optional-chaining plugin :/

mastilver · 2017-06-30T15:39:48Z

@pronebird see #5905

hzoo · 2017-07-12T13:49:37Z

You want transform not syntax - https://github.com/babel/babel/releases/tag/v7.0.0-alpha.15, it's part of stage-1 too

https://babeljs.io/7/

chenjigeng · 2018-10-11T07:34:17Z

This is awesome! Can this support destructuring?
ex:
const { foo?: { bar } } = obj;

Mouvedia · 2018-10-11T12:14:46Z

@chenjigeng tc39/proposal-optional-chaining#19

jridgewell added es-proposal area: experimental PR: New Feature 🚀 A type of pull request used for our changelog categories labels Jun 2, 2017

jridgewell force-pushed the pr/5786 branch from 562e5e0 to 120215c Compare June 2, 2017 08:07

jridgewell changed the title ~~Pr/5786~~ Null Propagation Operators Jun 2, 2017

hzoo reviewed Jun 4, 2017

View reviewed changes

hzoo requested review from gisenberg and xtuc June 5, 2017 16:47

hzoo mentioned this pull request Jun 5, 2017

Null Propagation Operator #5786

Closed

2 tasks

hzoo changed the title ~~Null Propagation Operators~~ Optional Chaining Operator (Stage 1) Jun 5, 2017

jridgewell mentioned this pull request Jun 5, 2017

Optional Chaining: Stage 1 plugin babel/babylon#545

Merged

1 task

hzoo mentioned this pull request Jun 5, 2017

Optional Chaining: Stage 1 babel/babylon#328

Closed

ljharb reviewed Jun 5, 2017

View reviewed changes

Jessidhia reviewed Jun 6, 2017

View reviewed changes

xtuc and others added 12 commits June 7, 2017 03:22

feat: optional chaing

00f58b9

feat: cleanup

72259ca

refactor: improved transformation logic

64ff5a0

fix: use undefined instead of null

ed15443

feat: optional chaining with function call

6bd3bf4

feat: WIP assignements

cc6959e

wip

3faca62

refactor: change undefined to void 0

a9d8040

fix: typo

98487b5

refactor: use WeakSet to keep track of transformed nodes

750b03a

Implement Null Propagation Operator

3fae121

Use a better nested syntax

2a49689

This way, it quickly returns from the conditions. The first nil will now exit, instead of checking every nil. This also allows conditionalChaining inside a container to still operate the container.

gisenberg approved these changes Jun 21, 2017

View reviewed changes

alangpierce mentioned this pull request Jun 22, 2017

Option to use lodash' _.get() instead of __guard functions decaffeinate/decaffeinate#1103

Closed

Add to stage-1 preset

f363ec6

xtuc reviewed Jun 27, 2017

View reviewed changes

xtuc approved these changes Jun 27, 2017

View reviewed changes

hzoo merged commit 89d8f70 into babel:7.0 Jun 27, 2017

STRML mentioned this pull request Jun 27, 2017

Suggestion: "safe navigation operator", i.e. x?.y microsoft/TypeScript#16

Closed

fernahh mentioned this pull request Jun 27, 2017

Edição 200 - 29/06/2017 braziljs/weekly#161

Closed

hzoo mentioned this pull request Jun 28, 2017

Elvis/existential operator? #855

Closed

xtuc mentioned this pull request Jul 2, 2017

Include "idx" plugin babel/babel-standalone#89

Closed

existentialism mentioned this pull request Jul 12, 2017

Update babel-types docs [skip ci] #5941

Merged

pronebird mentioned this pull request Jul 21, 2017

Support for optional chaining facebook/flow#4434

Closed

keithkml mentioned this pull request Jul 24, 2017

Syntax for handling nullable variables facebook/flow#607

Closed

hzoo mentioned this pull request Jul 27, 2017

Optional Chaining Operator (Stage 1) babel/proposals#18

Closed

hzoo added Spec: Optional Chaining and removed area: experimental area: tc39 proposal labels Oct 5, 2017

wtgtybhertgeghgtwtg mentioned this pull request Jan 13, 2018

⚛️Add idx in babel-preset facebook/create-react-app#1874

Closed

vjpr mentioned this pull request Jan 18, 2018

Tooling implementation status tc39/proposal-optional-chaining#44

Open

5 tasks

jridgewell deleted the pr/5786 branch June 7, 2019 09:53

lock bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Oct 3, 2019

lock bot locked as resolved and limited conversation to collaborators Oct 3, 2019


		const baz = new obj?.foo?.bar?.baz(); // baz instance

		const safe = new obj?.qux?.baz(); // undefined

Uh oh!

Conversation

jridgewell commented Jun 2, 2017 • edited by hzoo Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hzoo left a comment

Choose a reason for hiding this comment

Uh oh!

jridgewell commented Jun 4, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

xtuc commented Jun 5, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jridgewell commented Jun 5, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hzoo commented Jun 6, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gisenberg left a comment

Choose a reason for hiding this comment

Uh oh!

Mouvedia commented Jun 21, 2017

Uh oh!

jridgewell commented Jun 27, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

xtuc left a comment

Choose a reason for hiding this comment

Uh oh!

hzoo commented Jun 27, 2017

Uh oh!

pronebird commented Jun 30, 2017

Uh oh!

mastilver commented Jun 30, 2017

Uh oh!

hzoo commented Jul 12, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chenjigeng commented Oct 11, 2018

Uh oh!

Mouvedia commented Oct 11, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

jridgewell commented Jun 2, 2017 •

edited by hzoo

Loading

jridgewell commented Jun 4, 2017 •

edited

Loading

xtuc commented Jun 5, 2017 •

edited

Loading

hzoo commented Jun 6, 2017 •

edited

Loading

hzoo commented Jul 12, 2017 •

edited

Loading