GithubHelp home page GithubHelp logo

fbjs's Introduction



To make it easier for Facebook to share and consume our own JavaScript. Primarily this will allow us to ship code without worrying too much about where it lives, keeping with the spirit of @providesModule but working in the broader JavaScript ecosystem.

For more information on how to build and use FBJS, click here. This library includes a number of packages that can be accessed in the packages folder. For more information on what each package does and how to run it, access the individual package from within the folder.

Note: If you are consuming the code here and you are not also a Facebook project, be prepared for a bad time. APIs may appear or disappear and we may not follow semver strictly, though we will do our best to. This library is being published with our use cases in mind and is not necessarily meant to be consumed by the broader public. In order for us to move fast and ship projects like React and Relay, we've made the decision to not support everybody. We probably won't take your feature requests unless they align with our needs. There will be overlap in functionality here and in other open source projects.


FBJS and the other packages included here are MIT licensed, as found in the LICENSE file.

fbjs's People


zpao avatar yungsters avatar dependabot[bot] avatar mjesun avatar cpojer avatar kassens avatar jstejada avatar skevy avatar SimenB avatar steveluscher avatar bigfootjon avatar davidaurelio avatar sophiebits avatar bradzacher avatar tadeuzagallo avatar zertosh avatar bvaughn avatar rickhanlonii avatar yuzhi avatar samwgoldman avatar vjeux avatar gabelevi avatar wincent avatar Esemesek avatar rafeca avatar rubennorte avatar sebmck avatar adriandmitroca avatar AlexJuarez avatar acusti avatar


Ramazan SANCAR avatar Trần Quốc Thiện avatar  avatar Another Human avatar Brian M avatar  avatar Yoshiro Matsumoto avatar Paulo avatar Rijan Ghimire avatar Nick Na avatar Ahmed Mokhtar avatar Glenn 'devalias' Grant avatar Catsmimi avatar KGBDESIGNGLOBAL avatar Berlin avatar  avatar  avatar ycl avatar Siki  Olaniran avatar Patrick Fantato avatar Hieu Truong avatar arkinfescioglu avatar DiamondYuan avatar Liang5 avatar Trishant Pahwa avatar  avatar 林水溶 avatar Joy avatar Amit Singh Rawat avatar budlion avatar 兰天游 avatar Lance Tipton avatar Ejiro Asiuwhu avatar Evoque avatar GuiJiangHeng avatar Vitaliy Irtlach avatar Yoshinori Takada avatar  avatar  avatar Kosick avatar Bryan C Guner avatar 天马行空 avatar cuibq avatar  avatar Viviane Silva Florido avatar Max avatar Mr.Chaofan avatar Josscii avatar Truong Quoc Tuan avatar Imbar Winata avatar  avatar  avatar Hasib Hassan avatar Vishesh avatar kii avatar  avatar Infab •  avatar shenghui avatar jx·wang avatar Alejandro Jesus del Campillo Jaime avatar Devyn Spencer avatar  avatar Fernando Salazar avatar Ycy avatar Nyi Nyi avatar MtJZd avatar  avatar Edward Tan avatar soloproc avatar Alex Strand avatar Yadong Wen avatar Ernst Salzmann avatar 摇了摇头oO avatar  avatar Suresha Ramappa avatar Nguyen Huy Phat avatar  avatar Yehyoung Kang avatar Gianni Hong avatar Marcelo Lima avatar Omar avatar Anas Nabil avatar Artūras Kaukėnas avatar Frank_lyan avatar Saba Shavidze avatar Dududu avatar  avatar Quang Khai avatar Andrew Luca avatar  avatar  avatar tH3-Mo!e avatar Sujish K Patel avatar Luis Medina  avatar Mohamed Abdelnasser avatar Oguzhan İnce avatar Md. Shakil Hossain avatar Jiandong Wang avatar HyunmoAhn avatar Gavin Capriola avatar


Marshall Roch avatar Paul O’Shannessy avatar kejun avatar Sebastian Markbåge avatar ND avatar Reggie Zhang avatar evandrix avatar Hung Pham avatar pan avatar Scott Bulua avatar Sendy Putra avatar Ting Kuei avatar bobnet avatar Henry Q. Dineen avatar James Cloos avatar Kenton Jacobsen avatar Aaron Kushner avatar Sander avatar Flarnie Marchan avatar Adrian le Bas avatar  avatar zhangaz1 avatar Viacheslav Shabelnyk avatar  avatar Michael Anthony avatar Mathieu M-Gosselin avatar 开水白菜 avatar Tony Brown avatar Kareem Kwong avatar 掬一捧 avatar Holt avatar Taylor Wirtz avatar 易达(易于达成)-erpadmin avatar  avatar JUNO_OKYO avatar Naman Aggarwal avatar Mohammad Saffari Far avatar Whoami avatar Gijs Weterings avatar Juraj Selep avatar  avatar Dududu avatar AceMood avatar yq avatar Zahoor Wang avatar Nikolaos Dionelis avatar Sundarapandian BALASUBRAMANIAN avatar Facebook Whois Bot avatar Richard Nii Lante Lawson avatar Kairsten Fay avatar  avatar  avatar Chen Meng avatar  avatar  avatar 别来上路 avatar Violet avatar Ravikumar Selvam avatar Ycy avatar  avatar  avatar  avatar  avatar  avatar

fbjs's Issues

fbjs will throw `(evaluating 'self.fetch.bind(self)'` in capybara.

i use capybara as my test framework,
but when i send a fetch in phantomJS,
i got:

TypeError: 'undefined' is not a function (evaluating 'self.fetch.bind(self)')
      TypeError: 'undefined' is not a function (evaluating 'self.fetch.bind(self)')
          at in __webpack_require__
          at in __webpack_require__
          at in __webpack_require__
          at in __webpack_require__
          at in __webpack_require__
          at (Capybara::Poltergeist::JavascriptError)

and anybody can tell me what should i change ?

Fail tests when not spying on warning()

In React we fail tests when there are unexpected calls to warning(). This makes sure than any warnings are intentional. If a test does something that results in a warning, we spyOn console.error. We aren't doing that here but we probably should (will need to figure out if we can take some of the logic we have internally or if we have to recreate it, the React way might be hackier than the internal way).

Inline requires throwing errors on existing node modules

I noticed that the react-native CI has been failing recently.

An example CI failure:

It's all related to

Error: /Users/travis/build/facebook/react-native/node_modules/yeoman-generator/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js: Cannot assign to a require(...) alias, debug. Line: 53

Seems like this started happening after react-native started using fbjs-scripts here: facebook/[email protected]3fca7f4

This code is throwing the error:

Identifier: {
enter: function(node, parent, scope, state) {
if (!shouldInlineRequire(node, scope, state)) {
return node;
if (
parent.type === 'AssignmentExpression' &&
this.isBindingIdentifier() &&
!scope.bindingIdentifierEquals(, node)
) {
throw new Error(
'Cannot assign to a require(...) alias, ' + +
'. Line: ' + node.loc.start.line
return this.isReferenced() ? buildRequireCall( : node;

I located the source of the error being thrown and put up a PR for it here:

But the question is, why do we want to throw an error here? There might be other node modules that do this kind of thing, and this error will show up every time this comes up. Fixing this error requires the source code to be fixed, the offending npm module to be published with the fix, and all npm modules that use it to get a version bump and also republished.

Seems kind of painful to me. I don't understand the context of why we need to throw an error in this case though.

@cpojer Could you provide some info here?

0.8.0 break some project


Hello, I created a project using a starter kit, and by default, after an npm install it use [email protected]
Later, I installed draft-js and it use [email protected], and since, I can't run test on my project anymore (karma, phantomjs, chai, etc).

I've got the following error :

06 04 2016 17:53:21.039:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
06 04 2016 17:53:21.071:INFO [launcher]: Starting browser PhantomJS
06 04 2016 17:53:22.960:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#gba2WCoQqyELMJKhAAAA with id 86581400
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  TypeError: undefined is not a constructor (evaluating 'query.startsWith(name)')
  at /Users/freddy/Desktop/react-redux-starter-kit/tests/test-bundler.js:91609 <- webpack:///~/draft-js/~/fbjs/lib/UserAgent.js:35:0

Finished in 0.654 secs / 0 secs

✔ 0 tests completed

More information

I also opened an issue on the starter-kit project : davezuko/react-redux-starter-kit#697
and How to Reproduce

related ?

I don't know if it's an issue related to this project, or directly related to the starter-kit or maybe phantomjs. So, sorry if it's not related to this project.

npm'd version fails flow

The transpiled version has stuff like:

function Deferred /*:: <Tvalue, Treason>*/() {
  // stuff ...

Deferred.prototype.resolve = function resolve(value /*: Tvalue*/) /*: void*/ {
  this._settled = true;

Which makes Tvalue undefined, b/c it's not in the same scope.
Not sure if this is a flow bug or not, but it makes it so I can't use this lib :(

flow file rewriting results in invalid type annotation

In compactArray we have

function compactArray<T>(
  array: Array<?T>
): Array<T> {

But it's getting rewritten by babel to

function compactArray<T>(array: Array<?TT>): Array<T> {

This is likely a bug in babel's printer but it's impacting us so we should try to own this. @samwgoldman - interested? (also cc @kittens because maybe it would take you 2 seconds). & cc @steveluscher since it's hitting Relay right now.

self is not defined on server

In my react-relay project I had to change 'self' variables in the following files to 'global' to get the Node server to run... I couldn't run a server using Relay without the change.


Error given was:
ReferenceError: self is not defined
[1] at /node_modules/react-relay/node_modules/fbjs/node_modules/whatwg-fetch/fetch.js:4:7
[1] at Object. (/node_modules/react-relay/node_modules/fbjs/node_modules/whatwg-fetch/fetch.js:330:3)
[1] at Module._compile (module.js:460:26)
[1] at Module._extensions..js (module.js:478:10)
[1] at Object.require.extensions.(anonymous function) as .js
[1] at Module.load (module.js:355:32)
[1] at Module._load (module.js:310:12)
[1] at Function.module._load (/node_modules/piping/lib/launcher.js:32:16)
[1] at Module.require (module.js:365:17)
[1] at require (module.js:384:17)

Restructure repo

We're going to be building 3 distinct packages in here after #135. I'm thinking we move to a structure that differentiates that better and just put each package at the top level.

├── babel-preset-fbjs
├── fbjs
└── fbjs-scripts

This would also open up for a bit more splitting of the fbjs-scripts package. We probably want to ship an eslint plugin instead of just what we're doing with the config file and we need to package in a different format for that.

Make build fail when requires can't be resolved

Right now we don't care. But when adding new modules, ensuring all the dependencies are met might be a bit tedious.

A quick sanity check (just require each file in lib/ after transforming) should probably catch this.

Fix __DEV__ & Flow interaction

Ok, there are a couple pieces to this.

  1. Revert the removal of flow/lib/dev.js from #182. We need this for projects consuming fbjs directly & using flow, which will check the raw src files. We probably want it for ourselves too (not currently an issue because the files using __DEV__ are not flowified).
  2. Add an inline declare as part of the Flow transform, inserting declare var __DEV__: boolean; at the top of each file using it.

We can ship 0.8.5 once we have part 1 here done. It's no worse than today (strictly better since the other flow+fbjs issues are resolved). We don't even need part 2 done for fbjs itself (same aside as part 1 above.


Unsure if I could use this in my own projects or not.
TIA :)

[fbjs-scripts] gulp/check-dependencies should handle outdated non-deps safely

This is only an issue after removing dependencies from package.json but we should handle it better. Specifically if you have an outdated package installed npm outdated will report it even if it's no longer a dep. But then out lookup to see if it's ok fails because it expects it.

This is easily handled. We can either skip that package or we can have gulp throw an error saying that you should run npm prune.

Ship CSS Transform

We can do this with some regular expressions or we can use an AST-based approach. Right now we only need this for Draft which is currently using the regex approach (facebook/draft-js#66) but if we want to support other projects we might want something with a bit more flexibility. It should be pretty straight forward (eg, I wrote in a few minutes).

Use an argument to babel transform to determine environment

With the current transforms we need to do different things when we're in __DEV__. The way I made that work was to piggyback on process.env.NODE_ENV as we've done for some other things. However that makes it so that you can't just run standalone jest in a project, instead you have a test script: "test": "NODE_ENV=test jest". That's fine as long as you don't care much about Windows or making people use npm test. But we should make this as seamless as possible for FB engineers so they can just run jest (assuming of course that they have run npm install -g jest-cli at some point in the past).

Another workaround is to just explicitly set process.env in the preprocessor, as was done in React (for now) - facebook/react#5020

Include JSX in babel-preset-fbjs

We should at the very least be parsing but probably also transforming JSX. We should try to ship the same set of transforms across our projects so other projects don't also need to include another preset or transform unless it's very unique. Eg, Relay shouldn't have to specify stage-1 and react presets.

Dependency to core-js prevents commit to TFS source control


A couple of months ago we TFS users have encountered a problem with core-js. The core-js package was containing some files wth a dollar sign ($) which is not allowed in TFS source control.

This was fixed in core-js 2.0.0 which was released on 12-24-2015.

Problem is... fbjs is still using core-js 1.2.6, and this prevents us from commiting our node_modules directory to TFS. Actually we're using React which references fbjs.

+-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | -- [email protected] | | +-- [email protected] | | +-- [email protected] | | |-- [email protected]
| | | +-- [email protected]
| | | | -- [email protected] | | |-- [email protected]
| | +-- [email protected]
| | | -- [email protected] | |-- [email protected]
| -- [email protected] |-- [email protected]

So do you have plans, in a not too distant future, to switch to core-js 2?

To be honest I'm not a super specialist of NPM. Do you know if, in the interval, there's a way I could force fbjs to use last core-js version?

Make it easier for to use fbjs and flow together

I don't really know if/how this could be achieved but using flow in a project using any project that uses fbjs make flow throw a lot of errors by default.

Take a simple project that uses react and react-relay. This throws 20 errors on an empty project with an empty .flowconfig

flow check                                                                                                                                      [20:30:35]

/home/christian/relay-flow-starter-kit/node_modules/react-relay/node_modules/fbjs/flow/include/Deferred.js:14:15,32: Promise
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react-relay/node_modules/fbjs/flow/include/PromiseMap.js:15:16,34: Deferred
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react-relay/node_modules/fbjs/flow/include/PromiseMap.js:17:17,36: invariant
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react-relay/node_modules/fbjs/flow/include/PromiseMap.js:19:31,39: Promise
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react-relay/node_modules/fbjs/flow/include/fetchWithRetries.js:16:28,58: ExecutionEnvironment
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react-relay/node_modules/fbjs/flow/include/fetchWithRetries.js:17:15,32: Promise
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react-relay/node_modules/fbjs/flow/include/fetchWithRetries.js:19:15,32: sprintf
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react-relay/node_modules/fbjs/flow/include/fetchWithRetries.js:20:13,28: fetch
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react-relay/node_modules/fbjs/flow/include/fetchWithRetries.js:21:15,32: warning
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react-relay/node_modules/fbjs/flow/include/resolveImmediate.js:13:15,32: Promise
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react/node_modules/fbjs/flow/include/Deferred.js:14:15,32: Promise
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react/node_modules/fbjs/flow/include/PromiseMap.js:15:16,34: Deferred
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react/node_modules/fbjs/flow/include/PromiseMap.js:17:17,36: invariant
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react/node_modules/fbjs/flow/include/PromiseMap.js:19:31,39: Promise
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react/node_modules/fbjs/flow/include/fetchWithRetries.js:16:28,58: ExecutionEnvironment
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react/node_modules/fbjs/flow/include/fetchWithRetries.js:17:15,32: Promise
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react/node_modules/fbjs/flow/include/fetchWithRetries.js:19:15,32: sprintf
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react/node_modules/fbjs/flow/include/fetchWithRetries.js:20:13,28: fetch
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react/node_modules/fbjs/flow/include/fetchWithRetries.js:21:15,32: warning
Required module not found

/home/christian/relay-flow-starter-kit/node_modules/react/node_modules/fbjs/flow/include/resolveImmediate.js:13:15,32: Promise
Required module not found

Found 20 errors

I can fix these error by mimicking the relay's .flowconfig but this gets really cumbersome. Is there anything that can be done to improve on this situation?

"Cannot read property 'startsWith' of undefined" in gulp/check-dependencies.js

This happens sometimes:

[11:48:06] Using gulpfile ~/code/draft-js/gulpfile.js
[11:48:06] Starting 'default'...
[11:48:06] Starting 'check-dependencies'...
        if (!requested.startsWith('file:') && !semver.satisfies(current, requested)) {

TypeError: Cannot read property 'startsWith' of undefined

outdatedData and pkgData:

Split out scripts into seprate package

I want to split out the scripts and ship them as their own package. We can keep the fbjs package focused the code (and flow integration). The scripts package would contain the babel transforms, gulp scripts, future lint stuff. We're already not including the deps right for fbjs (eg, missing deps for gulp scripts) and I don't think gulp-utils should end up getting installed when you use React or Relay.

[preset] Does not correctly transform arrow functions in property initializers

The babel preset currently doesn't seem to correctly transform arrow functions as class properties:

class Foo {
  boundMethod = () => {
    return this;

Output is this (note that _this is set to undefined instead of the instance).

"use strict";

var _this = undefined;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Foo = function Foo() {
  _classCallCheck(this, Foo);

  this.boundMethod = function () {
    return _this;

Code for repro:

Passing build & travis setup

Checking this out locally, installing deps & trying to run the tests I get the following failure (node 0.10.40):

 FAIL  src/fetch/__tests__/fetchWithRetries-test.js (0.639s)
● fetchWithRetries › it defaults fetch timeout to 15s
  - Expected Function to be called.
        at /Users/glen/Development/Github/fbjs/src/fetch/__tests__/fetchWithRetries-test.js:114:26
        at mockConstructor (/Users/glen/Development/Github/fbjs/node_modules/jest-cli/src/lib/moduleMocker.js:144:27)
        at undefined (eval at makeComponent (/Users/glen/Development/Github/fbjs/node_modules/jest-cli/src/lib/moduleMocker.js:157:15), <anonymous>:2:52)
        at _timers.(anonymous function).callback (/Users/glen/Development/Github/fbjs/node_modules/jest-cli/src/lib/FakeTimers.js:413:23)
        at FakeTimers._runTimerHandle (/Users/glen/Development/Github/fbjs/node_modules/jest-cli/src/lib/FakeTimers.js:450:7)
        at FakeTimers.runAllTimers (/Users/glen/Development/Github/fbjs/node_modules/jest-cli/src/lib/FakeTimers.js:170:10)
        at Loader.jestRuntime.exports.runAllTimers (/Users/glen/Development/Github/fbjs/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:1039:42)
        at Spec.<anonymous> (/Users/glen/Development/Github/fbjs/src/fetch/__tests__/fetchWithRetries-test.js:116:10)
        at Timer.listOnTimeout [as ontimeout] (timers.js:121:15)
● fetchWithRetries › it preserves fetch timeout of 0s
  - Expected Function to be called.
        at /Users/glen/Development/Github/fbjs/src/fetch/__tests__/fetchWithRetries-test.js:129:26
        at mockConstructor (/Users/glen/Development/Github/fbjs/node_modules/jest-cli/src/lib/moduleMocker.js:144:27)
        at undefined (eval at makeComponent (/Users/glen/Development/Github/fbjs/node_modules/jest-cli/src/lib/moduleMocker.js:157:15), <anonymous>:2:52)
        at _timers.(anonymous function).callback (/Users/glen/Development/Github/fbjs/node_modules/jest-cli/src/lib/FakeTimers.js:413:23)
        at FakeTimers._runTimerHandle (/Users/glen/Development/Github/fbjs/node_modules/jest-cli/src/lib/FakeTimers.js:450:7)
        at FakeTimers.runAllTimers (/Users/glen/Development/Github/fbjs/node_modules/jest-cli/src/lib/FakeTimers.js:170:10)
        at Loader.jestRuntime.exports.runAllTimers (/Users/glen/Development/Github/fbjs/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:1039:42)
        at Spec.<anonymous> (/Users/glen/Development/Github/fbjs/src/fetch/__tests__/fetchWithRetries-test.js:131:10)
        at Timer.listOnTimeout [as ontimeout] (timers.js:121:15)

I'm not sure whether this is a problem with my machine, or the actual state of the repo, as there's no CI set up.

I'm happy to submit a PR for this if you like.

Put old 'object.assign' modules here?


In v15 the internal module file object.assign.js got swapped, as you probably know. Should we consider to put it in here for people to use? I know it's double up, since it's doing the same as the npm package, but some libraries depend on the old Object.assign. I believe the old Object.assign also was deeply used in the previous versions, so this would not matter for some libraries, as they would depend on those deep nested assigns as well as only the module file.

This won't solve all problems though, but it would be a nice add to smoothen the transition between v.15 and previous versions of React for extension libraries such as React-Canvas (which just got super-outdated)

Flow errors

Im getting a bunch of flowtype error, is it normal ??

/Path/to/my/project/node_modules/react/node_modules/fbjs/flow/include/Deferred.js:14:15,32: Promise
Required module not found

/Path/to/my/project/node_modules/react/node_modules/fbjs/flow/include/Deferred.js:39:15,15: return
Missing annotation

/Path/to/my/project/node_modules/react/node_modules/fbjs/flow/include/PromiseMap.js:15:16,34: Deferred
Required module not found

/Path/to/my/project/node_modules/react/node_modules/fbjs/flow/include/PromiseMap.js:17:17,36: invariant
Required module not found

/Path/to/my/project/node_modules/react/node_modules/fbjs/flow/include/PromiseMap.js:19:31,39: Promise
Required module not found

/Path/to/my/project/node_modules/react/node_modules/fbjs/flow/include/fetchWithRetries.js:16:28,58: ExecutionEnvironment
Required module not found

/Path/to/my/project/node_modules/react/node_modules/fbjs/flow/include/fetchWithRetries.js:17:15,32: Promise
Required module not found

/Path/to/my/project/node_modules/react/node_modules/fbjs/flow/include/fetchWithRetries.js:19:15,32: sprintf
Required module not found

/Path/to/my/project/node_modules/react/node_modules/fbjs/flow/include/fetchWithRetries.js:20:13,28: fetch
Required module not found

/Path/to/my/project/node_modules/react/node_modules/fbjs/flow/include/fetchWithRetries.js:21:15,32: warning
Required module not found

/Path/to/my/project/node_modules/react/node_modules/fbjs/flow/include/resolveImmediate.js:13:15,32: Promise
Required module not found

the eslint stay in 1.x , could modified it to 2.x?

Seems modified the fbjs-scripts's .eslintrc.js's 1.x rules to 2.x , all eslint rules still work correctly.
Is staying in 1.x because of compatibility for jshint ? ( i known nothing about jshint,just guess).

Uncaught Error: The fbjs package should never be required without a full path

I have this bug thrown when I use fbjs with Webpack. What is this, how to baypass?

    entry: {
        'index': './assets/js/react/dev/App',
        'todo': './assets/js/todo',
        'todo2': './assets/js/react/dev/App2',
        'vendors': [
                'fbjs',  // I include fbjs in vendors chunk

Promises are used incorrectly

On a basic

$ flow check

I get a ton of errors similar to this one:

 25:   _promise: Promise;
                 ^^^^^^^ Promise. Application of polymorphic type needs <list of 1 argument>. (Can use `*` for inferrable ones)

As far as I see, Promise is defined as a template Promise<+R> but it's not used correctly in fbjs.

Here is my .flowconfig:







suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-1]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*relay[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-1]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*relay[a-z,_]*\\)?)\\)? #[0-9]+

Increase Requirement to Node v4

What is holding us back from increasing the node version requirement to v4? This will allow us to use a lot of niceties like arrow functions, concise object notation, Object.assign, etc.

reletavise requires in compiled .flow files

There's an issue right now where the result is that we basically force all indirect consumers of fbjs (eg using Relay) to use the haste system in their package or ignore things specifically. @mroch said we should be able to make this work with our projects and others by rewriting the requires in our generated flow files so they are relative while keeping the @providesModule headers.

Can we stop using Promise.prototype.done?

As of Flow v0.23.0, Flow only ships with the standard Promise definition. Users who want to use non-standard Promise APIs need to provide their own Promise lib file.

Currently, fbjs uses Promise.prototype.done() in one place (in Deferred.js). This means when Deferred.js is compiled into Deferred.js.flow it refers to Promise.prototype.done(). Other projects which depend on fbjs will have Flow errors unless they add their own Promise lib file.

I'm sure there are a million workarounds, but it feels to me that the cleanest would be to stop using this nonstandard API. The polyfill looks really short, so Deferred.prototype.done() could just implement done using then.

Happy to send a PR for this if people are ok with it.

fbjs must be imported with charset='utf-8'

Just for reference.

If you get the error bellow, you need to import your javascript using charset='utf-8'.

(was working in Chrome and Firefox, it wasn't using crosswalk.

(this comes from unicodeBidi.js)

Uncaught SyntaxError: Invalid regular expression: /[A-Za-zªµºÀ-ÖØ-öø-ƺƻƼ-Æ¿Ç€-ǃDŽ-ʓʔʕ-ʯʰ-ʸʻ-Ë�Ë�-Ë‘Ë -ˤˮͰ-ͳͶ-ͷͺͻ-ͽͿΆΈ-ΊΌΎ-ΡΣ-ϵϷ-Ò�Ò‚ÒŠ-Ô¯Ô±-Õ–Õ™Õš-ÕŸÕ¡-և։ःऄ-हऻऽा-ीॉ-ौॎ-à¥�à¥�क़-ॡ।-॥०-९॰ॱॲ-ঀং-ঃঅ-ঌà¦�-à¦�ও-নপ-রলশ-হঽা-ীে-ৈো-ৌৎৗড়-à§�য়-ৡ০-৯ৰ-ৱ৴-৹৺ਃਅ-ਊà¨�-à¨�ਓ-ਨਪ-ਰਲ-ਲ਼ਵ-ਸ਼ਸ-ਹਾ-ੀਖ਼-ੜਫ਼੦-੯ੲ-ੴઃઅ-àª�àª�-ઑઓ-નપ-રલ-ળવ-હઽા-ીૉો-à«Œà«�à« -ૡ૦-૯૰ଂ-ଃଅ-ଌà¬�-à¬�ଓ-ନପ-ରଲ-ଳଵ-ହଽାୀେ-ୈୋ-ୌୗଡ଼-à­�à­Ÿ-à­¡à­¦-୯୰ୱ୲-୷ஃஅ-ஊஎ-à®�à®’-கங-சஜஞ-டண-தந-பம-ஹா-ிà¯�-ூெ-ைொ-ௌà¯�ௗ௦-௯௰-௲à°�-ఃఅ-ఌఎ-à°�à°’-నప-హఽà±�-ౄౘ-ౙౠ-ౡ౦-౯౿ಂ-ಃಅ-ಌಎ-à²�ಒ-ನಪ-ಳವ-ಹಽಾಿೀ-ೄೆೇ-ೈೊ-ೋೕ-ೖೞೠ-ೡ೦-೯ೱ-ೲം-ഃഅ-ഌഎ-à´�à´’-ഺഽാ-ീെ-ൈൊ-ൌൎൗൠ-ൡ൦-൯൰-൵൹ൺ-ൿං-ඃඅ-ඖක-නඳ-රලව-à·†à·�-à·‘à·˜-à·Ÿà·¦-෯ෲ-ෳ෴à¸�-ะา-ำเ-ๅๆà¹�à¹�-๙๚-๛àº�-ຂຄງ-ຈຊàº�ດ-ທນ-ຟມ-ຣລວສ-ຫອ-ະາ-ຳຽເ-ໄໆà»�-໙ໜ-ໟༀà¼�-༃༄-༒༓༔༕-༗༚-༟༠-༩༪-༳༴༶༸༾-༿ཀ-ཇཉ-ཬཿ྅ྈ-ྌ྾-࿅࿇-࿌࿎-à¿�à¿�-࿔࿕-࿘࿙-࿚က-ဪါ-ာေးျ-ြဿá�€-á�‰á�Š-á��á��-á�•á�–-á�—á�š-á��á�¡á�¢-á�¤á�¥-á�¦á�§-á�­á�®-á�°á�µ-á‚�ႃ-ႄႇ-ႌႎá‚�á‚�-႙ႚ-ႜ႞-á‚Ÿá‚ -ჅჇáƒ�áƒ�-ჺ჻ჼჽ-ቈቊ-á‰�á‰�-ቖቘቚ-á‰�በ-ኈኊ-áŠ�áŠ�-ኰኲ-ኵኸ-ኾዀዂ-ዅወ-ዖዘ-áŒ�ጒ-ጕጘ-á�šá� -á�¨á�©-á�¼áŽ€-áŽ�Ꭰ-á�´á��-ᙬ᙭-᙮ᙯ-ᙿáš�-áššáš -ᛪ᛫-á›­á›®-á›°á›±-ᛸᜀ-ᜌᜎ-ᜑᜠ-ᜱ᜵-᜶á�€-á�‘á� -á�¬á�®-á�°áž€-ឳាើ-ៅះ-ៈ។-៖ៗ៘-៚ៜ០-៩á �-᠙ᠠ-ᡂᡃᡄ-ᡷᢀ-ᢨᢪᢰ-ᣵᤀ-ᤞᤣ-ᤦᤩ-ᤫᤰ-ᤱᤳ-ᤸ᥆-á¥�á¥�-ᥭᥰ-ᥴᦀ-ᦫᦰ-ᧀá§�-ᧇᧈ-ᧉá§�-᧙᧚ᨀ-ᨖᨙ-ᨚ᨞-᨟ᨠ-ᩔᩕᩗᩡᩣ-ᩤᩭ-ᩲ᪀-᪉áª�-᪙᪠-᪦ᪧ᪨-᪭ᬄᬅ-ᬳᬵᬻᬽ-á­�á­ƒ-á­„á­…-á­‹á­�-᭙᭚-á­ á­¡-᭪᭴-᭼ᮂᮃ-ᮠᮡᮦ-ᮧ᮪ᮮ-ᮯ᮰-᮹ᮺ-ᯥᯧᯪ-ᯬᯮ᯲-᯳᯼-᯿ᰀ-ᰣᰤ-á°«á°´-ᰵ᰻-á°¿á±€-᱉á±�-á±�á±�-᱙ᱚ-ᱷᱸ-ᱽ᱾-᱿᳀-᳇᳓᳡ᳩ-ᳬᳮ-ᳱᳲ-ᳳᳵ-ᳶᴀ-á´«á´¬-ᵪᵫ-ᵷᵸᵹ-ᶚᶛ-ᶿḀ-ἕἘ-á¼�á¼ -ὅὈ-á½�á½�-ὗὙὛá½�Ὗ-ώᾀ-ᾴᾶ-ᾼιῂ-ῄῆ-á¿Œá¿�-á¿“á¿–-Ίῠ-Ῥῲ-ῴῶ-ῼ‎â�±â�¿â‚�-ₜℂℇℊ-â„“â„•â„™-â„�ℤΩℨK-ℭℯ-ℴℵ-ℸℹℼ-â„¿â……-ⅉⅎâ…�â… -ↂↃ-ↄↅ-ↈ⌶-â�ºâŽ•â’œ-ⓩ⚬⠀-⣿Ⰰ-Ⱞⰰ-ⱞⱠ-ⱻⱼ-ⱽⱾ-ⳤⳫ-ⳮⳲ-ⳳⴀ-ⴥⴧⴭⴰ-ⵧⵯ⵰ⶀ-ⶖⶠ-ⶦⶨ-ⶮⶰ-ⶶⶸ-ⶾⷀ-ⷆⷈ-â·Žâ·�-â·–â·˜-ⷞ々〆〇〡-〩〮-〯〱-〵〸-〺〻〼ã��-ã‚–ã‚�-ã‚žã‚Ÿã‚¡-ヺー-ヾヿㄅ-ㄭㄱ-ㆎã†�-㆑㆒-㆕㆖-㆟ㆠ-ㆺㇰ-ㇿ㈀-㈜㈠-㈩㈪-㉇㉈-ã‰�㉠-㉻㉿㊀-㊉㊊-㊰㋀-ã‹‹ã‹�-㋾㌀-ã�¶ã�»-ã��ã� -ã�¾ã�€-䶵一-鿌ꀀ-ꀔꀕꀖ-ê’Œê“�-ꓷꓸ-ꓽ꓾-꓿ꔀ-ꘋꘌê˜�-ꘟ꘠-꘩ꘪ-ꘫꙀ-ꙭꙮꚀ-ꚛꚜ-êš�êš -ꛥꛦ-ꛯ꛲-꛷Ꜣ-ê�¯ê�°ê�±-ꞇ꞉-꞊Ꞌ-ꞎêž�-êž­êž°-Ʇꟷꟸ-ꟹꟺꟻ-ê �ê ƒ-ê …ê ‡-ê Šê Œ-ꠢꠣ-ꠤꠧ꠰-꠵꠶-ê ·ê¡€-ꡳꢀ-ê¢�ꢂ-ꢳꢴ-ꣃ꣎-ê£�ê£�-꣙ꣲ-ꣷ꣸-꣺ꣻ꤀-꤉ꤊ-ꤥ꤮-꤯ꤰ-ꥆꥒ-꥓꥟ꥠ-ꥼꦃꦄ-ꦲꦴ-ꦵꦺ-ꦻꦽ-꧀ê§�-ê§�ê§�ê§�-꧙꧞-꧟ꧠ-ꧤꧦꧧ-ꧯ꧰-꧹ꧺ-ꧾꨀ-ꨨꨯ-ꨰꨳ-ꨴꩀ-ê©‚ê©„-ê©‹ê©�ê©�-꩙꩜-ê©Ÿê© -ꩯꩰꩱ-ꩶ꩷-꩹ꩺꩻꩽꩾ-ꪯꪱꪵ-ꪶꪹ-ꪽꫀꫂꫛ-ê«œê«�ê«ž-ê«Ÿê« -ꫪꫫꫮ-ꫯ꫰-꫱ꫲꫳ-ꫴꫵê¬�-ꬆꬉ-ꬎꬑ-ꬖꬠ-ꬦꬨ-ꬮꬰ-ꭚ꭛ꭜ-ê­Ÿê­¤-ꭥꯀ-ꯢꯣ-ꯤꯦ-ꯧꯩ-ꯪ꯫꯬꯰-꯹가-힣ힰ-ퟆퟋ-ퟻ-豈-ï©­ï©°-龎ff-stﬓ-ﬗA-Zï½�-zヲ-ッーア-ï¾�゙-゚ᅠ-하-ᅦᅧ-ï¿�ï¿’-ï¿—ï¿š-ï¿œÖ�־׀׃׆׈-×�×�-ת׫-ׯװ-ײ׳-×´×µ-׿߀-߉ߊ-ߪߴ-ߵߺ߻-ß¿à €-ࠕࠚࠤࠨ࠮-࠯࠰-࠾࠿ࡀ-ࡘ࡜-à¡�à¡žà¡Ÿ-࢟â€�ï¬�ײַ-ﬨשׁ-זּ﬷טּ-לּ﬽מּ﬿נּ-ï­�ï­‚ï­ƒ-ï­„ï­…ï­†-ï­�؈؋Ø�؛؜Ø�Øž-؟ؠ-ؿـÙ�-ي٭ٮ-ٯٱ-Û“Û”Û•Û¥-Û¦Û®-Û¯Ûº-Û¼Û½-Û¾Û¿Ü€-Ü�ÜŽÜ�Ü�Ü’-ܯ݋-ÝŒÝ�-Þ¥Þ±Þ²-޿ࢠ-ࢲࢳ-ࣣï­�-ﮱ﮲-ï¯�﯂-﯒ﯓ-ﴽ﵀-ïµ�ïµ�-ï¶�ï¶�-﶑ﶒ-ﷇ﷈-ï·�ï·°-ﷻ﷼﷾-ï·¿ï¹°-ﹴ﹵ﹶ-ﻼ﻽-﻾]/: Range out of order in character class(…)

Rewrite module and _modulePrefix

I know this is a library initially for Facebook internal projects but instead of copying the script, I was trying to reuse what you did here and noticed something in the script rewrite-modules.

The default value for _modulePrefix is ./.

var modulePrefix = context.state.opts._modulePrefix || './';

I think the default value should be an empty string, because if you require an external module from your node_modules folder, you don't want to prefix it with ./.

For my needs, and because my project uses external modules, I would need the default to be an empty string, but because of the line above, you'll understand it's not possible.

If for your needs the default should stay ./, would at least be possible to check if the option is set?

[fbjs-scripts] Babel dependency quite large for packages not using jest preprocessor

The jest preprocessor we ship requires Babel, which means we put it into dependencies, however it also means that anybody (eg React Native) that installs fbjs-scripts for just a single script that isn't the preprocessor is paying a 20MB penalty. This is true for the other pieces too (eg the gulp scripts require gulp-util) but it's most felt in the jest stuff.

A couple things:

  1. We should be using babel-core instead of babel, which would save a few MB
  2. We're going to drop Babel 5 soon and switch over to Babel 6. That might be smaller as well

A couple ideas

  1. We could maybe make babel a peerDep. The problem with this is you get a warning about missing peerdeps (npm 3) or they just get installed and no wins (npm 2).
  2. We remove it from deps entirely and just try/catch the require so it's only an issue if it's used and then we can error out with a helpful message.
  3. We remove it from deps and instead make a transform injectible. That pretty much entirely defeats the purpose of having the preprocessor though so I'm not really a fan of this.
  4. We remove the preprocessor and make it just a sample file - projects that are using it must copy it into their project manually (or maybe with a simple "bootstrap" script)

^0.8.3 includes immutable

I'm not a big fan of immutable.js, because it is too big (the latest immutable.min.js is 55.7 KB without gzip).

React ^v15.0 depends on fbjs ^v0.8, so npm will install [email protected] by default.

Does it mean React is now depends on immutable.js now??? I hadn't found any documents mention this.

Provide some kind of guidance for using haste system with webpack

I am aware of the description of the repo, those who use this will have a hard time, but I would be grateful if somebody would give a couple of minutes to explain me (and probably others) how to use the Haste module system with webpack.

So I see it's quite simple to use it with gulp, basically, you just generate the modules map and use the Babel API to rewrite the requires, essentially skiping the .babelrc.

  1. But how should I do this in a webpack environment?
  2. When should I generate the modules map?

Thank you!

_moduleMap Babel option as require path

If you need to pull fbjs/module-map as _moduleMap in .babelrc there's no way to do it aside from copy/pasting everything as you can't require from there.
Would it be feasible to detect if the option is a string and in that case do a require on it?

createNodesFromMarkup Returns Invalid linearGradient or radialGradient Nodes

I am afraid the createNodesFromMarkup module does not properly handle a linearGradient & radialGradient nodes, or presumably any element whose tag has capital letters. getNodeName always converts the tag name to lowercase, so the node adopts incorrectly adopts the XHTML namespace.

Here is a working demonstration with React. Notice that the circle's gradient fill is not working after the component is updated.

And here is a bare-bones example:

import createNodesFromMarkup from 'fbjs/lib/createNodesFromMarkup'

const markup = '<linearGradient id="foo"></linearGradient>'
const result = createNodesFromMarkup(markup)
const node = result[0]

console.log(node.tagName) // 'LINEARGRADIENT', should be 'linearGradient'
console.log(node.localName) // 'lineargradient', should be 'linearGradient'
console.log(node.namespaceURI) // '', should be ''

Thank you for your time.

Error building: fbjs colliding with itself?

I get this error when I try to build my react-native project:

Failed to build DependencyGraph: Naming collision detected: /Users/tom/projects/myapp/node_modules/fbjs/flow/include/CSSCore.js collides with /Users/tom/projects/myapp/node_modules/fbjs/lib/CSSCore.js
Error: Naming collision detected: /Users/tom/projects/myapp/node_modules/fbjs/flow/include/CSSCore.js collides with /Users/tom/projects/myapp/node_modules/fbjs/lib/CSSCore.js
    at HasteMap._updateHasteMap (HasteMap.js:132:13)
    at HasteMap.js:103:28
    at tryCallOne (/Users/tom/projects/myapp/node_modules/promise/lib/core.js:37:12)
    at /Users/tom/projects/myapp/node_modules/promise/lib/core.js:123:15
    at flush (/Users/tom/projects/myapp/node_modules/asap/raw.js:50:29)
    at nextTickCallbackWith0Args (node.js:452:9)
    at process._tickCallback (node.js:381:13)

If I'm reading this correctly, it says that fbjs is colliding with itself.

Using `document` and `window` global variables won't cover all cases

I can see that we are replying to window and document variables, that won't be great for some edge cases.

For example on this instance:

var Style = {
   * Gets the style property for the supplied node. This will return either the
   * computed style, if available, or the declared style.
   * @param {DOMNode} node
   * @param {string} name Style property name.
   * @return {?string} Style property value.
  get: getStyleProperty,

   * Determines the nearest ancestor of a node that is scrollable.
   * NOTE: This can be expensive if used repeatedly or on a node nested deeply.
   * @param {?DOMNode} node Node from which to start searching.
   * @return {?DOMWindow|DOMElement} Scroll parent of the supplied node.
  getScrollParent: function(node) {
    if (!node) {
      return null;
    while (node && node !== document.body) {
      if (_isNodeScrollable(node, 'overflow') ||
          _isNodeScrollable(node, 'overflowY') ||
          _isNodeScrollable(node, 'overflowX')) {
        return node;
      node = node.parentNode;
    return window;


then Style.getScrollParent won't work on the following example:

var iframeEl = document.getElementById('some_iframe');
var scrollParentEl = Style.getScrollParent(iframeEl.contentWindow.document.getElementById('some_element'));

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.