facebook / fbjs Goto Github PK
View Code? Open in Web Editor NEWA collection of utility libraries used by other Meta JS projects.
License: MIT License
A collection of utility libraries used by other Meta JS projects.
License: MIT License
Right now we're only syncing out so we don't really need to lint here yet. But it would be good to have a base lint config here. See http://eslint.org/docs/developer-guide/shareable-configs. Then projects which consume fbjs (eg, React) could include this and extend as needed. We'd at least be starting with the same base config across projects.
On a basic
$ flow check
I get a ton of errors similar to this one:
node_modules/fbemitter/node_modules/fbjs/lib/Deferred.js.flow:25
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
:
[ignore]
.*react/node_modules/fbjs.*
[include]
./node_modules/fbjs/flow/include
[libs]
./node_modules/fbjs/flow/lib
[options]
module.system=haste
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FixMe
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]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
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?
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) // 'http://www.w3.org/1999/xhtml', should be 'http://www.w3.org/2000/svg'
Thank you for your time.
Hello,
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?
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.
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?
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.
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.
Hi,
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:
https://github.com/facebook/fbjs/blob/master/src/__forks__/Style.js#L51
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'));
I just using react-native which requires the project but got this issue.
Other promise implementations like well-known bluebird or the "promise" package itself have a ".finally" which won't change the promise state. I'm not sure why here it is different.
Unsure if I could use this in my own projects or not.
TIA :)
This happens sometimes:
[11:48:06] Using gulpfile ~/code/draft-js/gulpfile.js
[11:48:06] Starting 'default'...
[11:48:06] Starting 'check-dependencies'...
/Users/balpert/code/draft-js/node_modules/fbjs-scripts/gulp/check-dependencies.js:48
if (!requested.startsWith('file:') && !semver.satisfies(current, requested)) {
^
TypeError: Cannot read property 'startsWith' of undefined
outdatedData and pkgData: https://gist.github.com/spicyj/a50292f0d7fc760332177ae281fca4e7
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: https://gist.github.com/kassens/ee845ea5db4a24a8127ecbb1390b63cf
facebook/relay#136 has relevant discussion. The proposed module to use is https://www.npmjs.com/package/isomorphic-fetch
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(…)
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).
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).
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.
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 (facebookarchive/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 http://astexplorer.net/#/np0DfVT78g/71 in a few minutes).
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.
We'll start putting our eslint rules here and use them in conjunction with eslint-config-fbjs
(or not, up to consumers).
I really like the '@providesModule' functionality that has been used all over facebook open source projects, I really find it super useful. was wondering how much work would be involved in extracting it out from here in its own project and open source it ? :D
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?
I think core-js should be updated as a part of facebook/relay#1109
Downloading npm:[email protected]
Downloading npm:[email protected]
Peer dependency conflict for core-js:
Currently installed as npm:[email protected].
Package npm:[email protected] requires npm:core-js@^1.2.0.
I noticed that the react-native CI has been failing recently.
An example CI failure: https://travis-ci.org/facebook/react-native/jobs/81593108
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/react-native@3fca7f4
This code is throwing the error:
fbjs/scripts/babel/inline-requires.js
Lines 74 to 91 in 76faf46
I located the source of the error being thrown and put up a PR for it here:
nodejs/readable-stream#161
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?
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': [
'jquery',
'react',
'react-dom',
'react-flip-move',
'react-tap-event-plugin',
'react-addons-css-transition-group',
'fbjs', // I include fbjs in vendors chunk
'react-scrollbar',
'material-ui',
'rc-slider',
]
},
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
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.
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.
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.
The transpiled version has stuff like:
function Deferred /*:: <Tvalue, Treason>*/() {
// stuff ...
}
Deferred.prototype.resolve = function resolve(value /*: Tvalue*/) /*: void*/ {
this._settled = true;
this._resolve(value);
};
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 :(
import type ...
gets transformed but import typeof
does not, which leads to Flow errors. This is currently happening with Draft.
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
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 http://127.0.0.1:8888/assets/application-bs2.js:40940
at http://127.0.0.1:8888/assets/application-bs2.js:38711 in __webpack_require__
at http://127.0.0.1:8888/assets/application-bs2.js:39822
at http://127.0.0.1:8888/assets/application-bs2.js:38711 in __webpack_require__
at http://127.0.0.1:8888/assets/application-bs2.js:39051
at http://127.0.0.1:8888/assets/application-bs2.js:38711 in __webpack_require__
at http://127.0.0.1:8888/assets/application-bs2.js:38914
at http://127.0.0.1:8888/assets/application-bs2.js:38971
at http://127.0.0.1:8888/assets/application-bs2.js:38711 in __webpack_require__
at http://127.0.0.1:8888/assets/application-bs2.js:38738
at http://127.0.0.1:8888/assets/application-bs2.js:38711 in __webpack_require__
at http://127.0.0.1:8888/assets/application-bs2.js:38731
at http://127.0.0.1:8888/assets/application-bs2.js:46590 (Capybara::Poltergeist::JavascriptError)
and anybody can tell me what should i change ?
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.
/react-relay/node_modules/fbjs/lib/fetch.js
/react-relay/node_modules/fbjs/node_modules/whatwg-fetch/fetch.js
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)
Hello, I created a project using a starter kit https://github.com/davezuko/react-redux-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 :
START:
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
SUMMARY:
✔ 0 tests completed
I also opened an issue on the starter-kit project : dvdzkwsk/react-redux-starter-kit#697
and How to Reproduce
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.
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
.
I am depending on [email protected]
in my Relay app (using a branch of react-relay
), but somehow it is picking up an dependency on whatwg-fetch
, rather than isomorpic-fetch
, e.g.
[email protected] node_modules/react-relay
├── [email protected]
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
Any idea why this is?
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:
babel-core
instead of babel
, which would save a few MBA couple ideas
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 require
s, essentially skiping the .babelrc
.
Thank you!
Ok, there are a couple pieces to this.
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).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.
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.
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)
I can't make fbjs-0.3.1
work with flow-0.17.0
. Is it something wrong on my end?
Error messages: https://gist.github.com/meteficha/29bdec5a6ff168fabfa4
shallowEqual() should return true when dealing with NaN.
shallowEqual(NaN, NaN); // true
shallowEqual({a: NaN}, {a: NaN}); // true
Fixing this would also fix the confusing error in React, see React Issue 5773.
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.
facebook/react#6824 removed duplicate propType checking, therefore the blacklist at https://github.com/facebook/fbjs/blob/master/src/__forks__/warning.js#L34-L36 is no longer necessary. Should we remove it from here? @spicyj
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.