React: Thoughts on making react/lib/keyMirror an NPM module

[nhunzaker]

I'm finding I really love something like keyMirror on non-react related fluxy projects. Is there a good NPM module for this, or considerations of making it a separate module?

[STRML]

I thought the same thing, so I published keyMirror as a standalone module.

[nhunzaker]

Awesome! I heard some discussion about splitting out some utils in React into separate modules like this. I'm curious to know if Facebook would consider using @STRML's module, or if they'd rather keep things under their control.

If not, I'd be happy to send out a PR.

[STRML]

It's a super simple module - I think, in the end, it would be better to separate react/lib into react-lib, a module with no dependencies, and allow users to require a single one at a time, e.g. react-lib/keyMirror. Smart packagers, e.g. webpack/browserify, would pack this efficiently, FB wouldn't have to publish a ton of separate modules, and it could be simply required from within react itself.

[nhunzaker]

:+1:

[tommymarshall]

:+1:

[petehunt]

We want to do this, but versioning will be an interesting problem which is why we haven't done it yet (these are common core modules which may need to be versioned separately from React for e.g. jest). Stay tuned...

[jordwalke]

:+1:

@petehunt What's the challenge here? Most of these won't change a bunch.

[ToucheSir]

Out of pure curiosity, why does keyMirror take an object instead of an array of "enum" values? Is there a solid use-case for passing an object with null keys over an array? (under the impression I'm missing some vital point)

[sophiebits]

@ToucheSir The main purpose of keyMirror is to deal with the fact that Closure Compiler advanced mode crushes keys, which allows you to write code like

keyMirror({monkey: null, gorilla: null})

and have it become something like

k({m:null,g:null})

which evaluates to

{m:"m",g:"g"}

at runtime. If it was specified as a list of strings, they wouldn't get crushed matching the property names.

[petehunt]

@jordwalke and what happens when they do? what if we release a component that depends on a version of merge() that conflicts with another component used in the app? Even worse, what if the module were stateful?

BTW, we were talking about changing merge() on some thread yesterday, so this is not a super long shot. Versioning react, its dependencies and dependents is a difficult problem, especially with FB's internal development process and our desire to dogfood everything in open source.

[ToucheSir]

@spicyj Thanks for the insight! Didn't even bother to think down that route, but now keyMirror is gaining appeal by the second. :)

[raminbp]

@spicyj i didn't got it, can you explain it more ? what's the whole point of the keymirror ?

[gaearon]

i didn't got it, can you explain it more ? what's the whole point of the keymirror ?

Google Closure Compiler has an advanced mode. It's more powerful than UglifyJS and will compress your code like crazy. In advanced mode, any property names you define will be “crushed” (unless you're defining them as strings).

When you have code like

var Stuff = {
  GOOD_STUFF: 'GOOD_STUFF'
};

Closure Compiler in advanced mode will compress it to

var a = {
  b: 'GOOD_STUFF'
};

which will break your code.

There are two options:

a) Use string property name to opt out of crushing

var a = {
  'GOOD_STUFF': 'GOOD_STUFF'
};

This works, but you miss out on a nice optimization opportunity.

b) Use a helper that makes sure keys and values match

That's what keyMirror does.

[zpao]

Random usage of fbjs isn't really supported but we moved keyMirror out of React to there (require('fbjs/lib/keyMirror'). Closing out.

[ianido]

Hello, probably this sound redundant, I am using react by the bower package and I am trying to use keyMirror which is inside React.js, but this is not exposed as a global object, how can I use it without import another keyMirror package?

[sophiebits]

You can't.

[codejamninja]

Wouldn't it be easier to use key mirror the following way

keyMirror(['monkey', 'gorilla']);

Instead of

keyMirror({monkey: null, gorilla: null});

[sophiebits]

See my comment on June 5 for the answer to your question.

keyMirror isn't and has never been a supported API of React. I'm going to lock this conversation to reduce noise.