* Revert "Revert "Speed up TypeScript projects (#5903)""
This reverts commit 544a5943ce.
* Move fork-ts-checker dep to react-dev-utils
* Convert WebpackDevServerUtils.createCompiler to take in options arg
* Update README.md for react-dev-utils
As a lot of [people](https://hackernoon.com/why-i-no-longer-use-typescript-with-react-and-why-you-shouldnt-either-e744d27452b4) is complaining about TypeScript performance in CRA, I decided to enable `async` mode in TypeScript checker.
These changes basically brings the JS compilation times to TS projects. So, recompilation took less than 1 second instead of 3 seconds in medium size project.
The problem with async mode is that type-errors are reported after Webpack ends up recompilation as TypeScript could be slower than Babel. PR allows to emit files compiled by Babel immediately and then wait for TS and show type errors in terminal later. Also, if there was no compilation errors and any type error occurs, we trigger a hot-reload with new errors to show error overlay in browser.
Also, I wanted to start a discussion about `skipLibCheck: false` option in default `tsconfig.json`. This makes recompilations really slow and we should consider to set it to `true` or at least give users a big warning to let them know that it could be really slow.
The following video is showing the updated workflow with a forced 2.5 second delay for type-check to give you an idea how it works.
I'm pretty sure that PR needs some polishing and improvements but it should works as it is. Especially a "hack" with reloading the browser after type-check looks ugly to me.
cc @brunolemos as he is an initiator of an original TypeScript PR.
Should fix https://github.com/facebook/create-react-app/issues/5820
* Implement click-to-open for babel syntax errors in build error overlay
* Add click-to-open support for lint errors and refactor parser
* Reactor code to reuse open-in-editor functionality in both build and runtime error overlays
* Fix some eslint warnings
* Add a comment about keeping middleware and dev client in sync
* Remove es6 features from webpack dev client
* Make open-in-editor functionality to work with new iframe script
* Rename `openInEditor` to `editorHandler`
- Remove indirection of openInEditorListener
- Check editorHandler for null before styling error clickable
* Fix flow errors
* Convert react-error-overlay to React
* Update compile-time error overlay to use react-error-overlay components
* Refactor react-error-overlay components to container and presentational components.
* Make the compile-time error overlay a part of react-error-overlay package.
* Use react-error-overlay as dependency in react-dev-utils to show compile-time errors.
* Run Prettier
* Move the function name fix into StackFrame itself
* Fix clicking on source code snippet to open the code in editor
* Use exact objects + minor style tweak
* Don't linkify frames that don't exist on the disk
* Fix lint
* Consolidate iframe rendering logic
* Remove circular dependency between react-dev-utils and react-error-overlay
* Fix lint
* Fix decoupling of react-dev-utils and react-error-overlay by moving middleware
* Deduplicate identical errors
* Fixed several of the issues and nits from PR:
* Moved margin between header and file name to header, so when content was scrolled, the header would remain more separate
* Made build-time and runtime overlays better match
* Secondary error <pre> style now uses yellow bg instead of red
* 'Scrollable Header' (see above comment to why this is necessary) but I did increase the max-height from 35% to 50%.
* Fixed header and 'X' button vertical alignment
* Temporary stack margin fix
* Move "N errors" to the top
* Tweaked overlay styles
* Tweaked pre-style
* Clicked to background overlay dismiss
* Tidied up styles tobe more mobile Safari friendly
* Re-enabled pre-wrap
* Margin fixes
* Base font-size 10 -> 11px
* Error overlay is full-screen now based on feedback
* Make "N errors on the page" visible again
* Fix bottom margin of frame location and lack of tab nav
* Add tooltip to close button
* Bring compile error styles closer to runtime overlay
* s/when/if/
* mv create-react-app/index.js -> create-react-app/creteReactApp.js
* update to modern code style
* var -> cosnt
* set trailing-coma to es5 for prettier
* Add red box prototype
* Unmount fail node when hot-reloaded (future proofing)
* Slightly improve error reason
* Add Chrome unhandledrejection listener
* Close red box when Escape is pressed
* Construct our own source if not available
* Resolve sourcemaps for friendlier traces
* Allow error to be scrolled
* Only utilize sourcemaps, not the magic. :(
* Make view similar to React Native
* Fix an uncaught syntax error
* Add workaround for Firefox 50
* Add a hint for closing the prompt
* Multiple error support
When there's multiple errors, simply state that there are more instead of re-rendering
* Log any renderer error
* Dim node_modules in display
* Override chrome stack trace limit
* Magic: show me some source!
* Add ability to toggle internal calls
* Switch text from show -> hide
* Change color scheme to something easier on the eyes
* Change UI to be friendlier (thanks @nicinabox)
https://github.com/facebookincubator/create-react-app/pull/1101#issuecomment-263621057https://github.com/facebookincubator/create-react-app/pull/1101#issuecomment-263636171
* Update styles
* Add container inside overlay
* Apply pre style
* Add line highlight
* Add omitted frames ui
* Move yellow to var
* Do all function names in black
* Adapt container based on screen size
* Extract ansiHTML
Use base16-github theme
* Linting
* Add syntax highlighting of errors
* Linting
* Remove white background
* Append new files to package.json
* Target exact version
* White is a little harsh, use same color as red box.
* Fix a bug where omitted frames would never be rendered
(under certain circumstances)
* Show local file path instead of confusing webpack://
* Do not require the entire file
* Remove css file
* Use context size, not a magic variable.
* Fix title regression
* Update dependency
* Do not center text for internal calls
* Temporarily disable links
* Switch internal toggle to 'i'
* Remove unnecessary rules from container style
* Reduce omitted frames font size
* Fix font family in pre > code
* Re-introduce line highlighting
* Object.<anonymous> -> (anonymous function)
* Add ability to see script source
* Add missing ansi mappings
* Remove SIAF
* Skip native functions
* Extract hints div function
* Extract renderers
* Refacor var names
* If source is disabled, don't use the line.
* Allow toggle between source
* Allow bundles to be expanded
* Wow, how did I let this one slip?
* Toggle text for UX/DX
* Make it so clicking Close unmounts the error component
* Do not allow hot reloading once an error is thrown
* Do not wrap lines for small displays
* Fix toggle when additional errors happen
* Make the close a button
* Capture and store errors
* Dispose on render; move additional logic
* Only make code not wrap
* Switch to a view-by-index method
* Allow user to switch between errors with arrow keys
* Fix text while switching between errors
* Update close button style
* Render additional errors at top
* Add left and right arrows
* Make frames pointy
* UTF-8 arrows
* Don't mount unneeded DOM node
* Switch to single changing text for compiled <-> source
* Don't display arrows with only one error.
* Collapsed and expanded
* Make sure the last collapse toggle is appended
* Do not show the stack trace if it doesn't resolve to a file we wrote
* Style container with media queries
* Do not allow x overflow; break words by default.
* Trim off whitespace of lines
* Remove padding since it's not outer-most
* Add footer message
* Extract css file to JS
* Only inject the css when the overlay is up
* Extract red variable
* Remove env
* Update babel-code-frame
* Set force color to true
* Extract out collapse div logic
* Remove arrow field
* Insert a top collapse
* Make browser friendlier
* Absolutify ^
* Make arrows buttons
* Accessify
* Let there be ES5
* Pretty css
* Use forEach where we can ...
* Remove extracted loop
* Fix IE compatibility
* Capture React warnings
* Add source override via React output parsing
* Whoops, fix arguments to crash.
* es5-ify
* Re-enable e2e-install directory test
* Only rewrite line number if it was resolved and leaves a line at bottom
* Rename failFast to crashOverlay
* Disable console proxy
* Appease linter
* Appease more
