⚛️Add idx in babel-preset

[pierr]

Idx is the existential function, it seems to me that it would be a benefit for almost all project using react and data in a graph.
I concidered using eject to add this feature but maybe this be a good add for the community.

see https://facebook.github.io/react-native/blog/2017/03/13/idx-the-existential-function.html for more informations about it.

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at cla@fb.com. Thanks!

If you are contributing on behalf of someone else (eg your employer): the individual CLA is not sufficient - use https://developers.facebook.com/opensource/cla?type=company instead. Contact cla@fb.com if you have any questions.

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[gaearon]

Let's do it.

[gaearon]

Hmm. Actually I'm concerned that Babel plugin doesn't verify idx comes from an import from idx package. This change could be dangerous if somebody has a function called idx in their code.

Can you please raise an issue about this in idx repo?

[pierr]

Ok i will do this. Thanks for your quick reply.

[pierr]

@gaearon If fact there is no ambiguity, as idx has to be imported and in the project direct dependencies or devDependencies. I add it to react-scripts dev dependencies.

import idx from 'idx'
const props = {user: {friends :[{friends: 1}]}}
idx(props, _ => _.user.friends[0].friends)

Generated

And i have been able to use idx in a map somewhere else

[1,2,4].map((a, idx) => console.log('idx', idx))

[gaearon]

What happens if the user writes

function idx() {
  // my own code
}

var a = idx();

Isn't Babel plugin going to change the function meaning?

[pierr]

Indeed...

[ggregoire]

Isn't it redundant for those who already use Lodash?

var props = { user: { friends: [{ friends: ['yo'] }] } }

_.has(props, 'user.friends[0].friends') // true
_.get(props, 'user.friends[0].friends') // ['yo']

var props = { user: { friends: [] } }

_.has(props, 'user.friends[0].friends') // false
_.get(props, 'user.friends[0].friends') // undefined

[viankakrisna]

@ggregoire thanks for the lodash trick! been using it everywhere now :) I think the use case for idx babel plugin is to transform the function calls to nested ternary checks https://facebook.github.io/react-native/blog/2017/03/13/idx-the-existential-function.html not really sure why we need this though (will it make the bundle larger for deeply nested property access?)

[ericnakagawa]

I'd love to have this functionality! I'm writing a very long list of ternary functions on my own and it is tedious and bug prone!

This helps greatly when dealing with asynchronously loaded data from APIs you don't control/own.

[wtgtybhertgeghgtwtg]

Correct me if I'm wrong, but shouldn't the optional chaining syntax available with babel@7 now that it's in?
babel PR: babel/babel#5813

[gaearon]

We won't enable that proposal unless it advances to 3rd or 4th stages.

[Timer]

Maybe we shouldn't merge this given the Optional Chaining Operator exists?
I imagine it will progress quickly.

[Timer]

I'll close this because there hasn't been much support around it and there's a syntax proposal in the works.

Thanks @pierr!

[gaearon]

I think Optional Chaining was somewhat controversial and wouldn't count on it progressing quickly.

However, this feature seems like a good fit for babel-plugin-macros support we just merged.
So I'd rather see this as a macro in userland.

[kentcdodds]

Hey guess what! There's already a macro for it! https://github.com/dralletje/idx.macro

Woo!

[Timer]

That's seriously awesome @kentcdodds

[kentcdodds]

That said, it does need to upgrade to babel-plugin-macros: dralletje/idx.macro#3 😅 should be a cinch though!