Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Roadmap for version 3.0 #6475

Open
iansu opened this Issue Feb 20, 2019 · 44 comments

Comments

Projects
None yet
@iansu
Copy link
Collaborator

iansu commented Feb 20, 2019

We are planning to release Create React App version 3.0 soon. This will be a relatively small release but will include a number of necessary breaking changes.

Planned Features

  • Jest 24: #6278
  • Hooks ESLint plugin: #5997
  • TypeScript ESLint plugin #6513
  • Add browserslist support to @babel/preset-env: #6608

Nice to Have Features

  • babel-plugin-optimize-react: #6219
  • Absolute imports using jsconfig.json/tsconfig.json: #6656

Refer to the 3.0 Milestone to see exactly what is included in this release.

☢️ How Can I Test This Now? ☢️

We're happy you'd like to test the next version of react-scripts! Before getting into the details, we'd like to make you aware of a few things:

  1. Features may be broken or not work as expected
  2. There will be more breaking changes introduced before the final release ⚠️
  3. Documentation for new features is still sparse, so look through the pull requests for how they're expected to work

You can install the latest alpha version of react-scripts using one of the following commands:

$ # Create a new application
$ npx create-react-app@next --scripts-version=3.0.0-next.68 app-name
$ # Upgrade an existing application
$ yarn upgrade react-scripts@3.0.0-next.68

Upgrading from 2.0 to 3.0

  • The browserslist config in your package.json is now used to control the output of your JavaScript files. You can use separate configuration for development and production. See

    "browserslist": {
    "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
    ],
    "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
    ]
    }
    for a good starting point which gives a good development experience, especially when using language features such as async/await, but still provides high compatibility with many browsers in production

  • We now have linting support for TypeScript files! If you're using Visual Studio Code, see https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/setting-up-your-editor.md#displaying-lint-output-in-the-editor for tips to get syntax highlighting from the ESLint extension in your .ts and .tsx files

  • We now support setting basePath in jsconfig.json. To configure basePath to point to the src directory create a jsconfig.json file in your project root:

     {
       "compilerOptions": {
         "baseUrl": "src"
       }
     }

Known Issues in 3.0 Alphas

  • File watching issue with Jest 24: #6646
  • Dynamic imports may not work in some cases: #6673

Please report any bugs you encounter or behavior you believe to be incorrect by creating a new issue. Have fun!

@miraage

This comment has been minimized.

Copy link
Contributor

miraage commented Feb 21, 2019

Not sure if it is a good place to ask, but.. could you share your intentions regarding RHL support? Can we expect it to be supported out of the box?

@amshtemp

This comment has been minimized.

Copy link

amshtemp commented Feb 22, 2019

It would be nice if these two css features get included too:

  • Support scoped CSS in the same file (#5224)
  • CSS Modules with TypeScript: css-modules-typescript-loader (#5677)

@iansu iansu pinned this issue Feb 22, 2019

@iansu

This comment has been minimized.

Copy link
Collaborator Author

iansu commented Feb 22, 2019

@miraage I do not have any information to share about hot loader support.

@amshtemp Both of those issues are just proposals with no PR so it's very unlikely they will be included.

This is going to be a small release because we need to upgrade Jest due to the security issue with Jest 23. Once this is out we will immediately start work on version 4.0 so it's possible these features could be included then.

@mrmckeb

This comment has been minimized.

Copy link
Collaborator

mrmckeb commented Feb 25, 2019

@amshtemp, as previously stated on #5677, we aren't planning to add anything like that for now as it's not a good DX. We do want a solution, we just need the right one.

@rovansteen

This comment has been minimized.

Copy link
Contributor

rovansteen commented Feb 25, 2019

Regrading the Typescript aliases (#6116) could the team give a little bit more details about how you would like this to work? There are still some questions/inconsistencies that I need some clarity on before I can continue working on the aliases part.

@cassiozen

This comment has been minimized.

Copy link

cassiozen commented Feb 28, 2019

With hooks, it seems like class-based components will be used less and less. Should the default App component be function-based? (references #6451)

@iansu

This comment has been minimized.

Copy link
Collaborator Author

iansu commented Feb 28, 2019

@cassiozen Yes, we will want to convert the template component to a function for v3. I'll add that to the list.

@fchienvuhoang

This comment has been minimized.

Copy link

fchienvuhoang commented Mar 4, 2019

love it!

@raRaRa

This comment has been minimized.

Copy link

raRaRa commented Mar 7, 2019

Any thoughts about supporting webpackPrefetch?

@pavinthan

This comment has been minimized.

Copy link
Contributor

pavinthan commented Mar 8, 2019

Load PostCSS config file from project root directory if exists ?

@pavinthan

This comment has been minimized.

Copy link
Contributor

pavinthan commented Mar 12, 2019

Search available port to start webpack dev server if port is not specified in env

@raix

This comment has been minimized.

Copy link

raix commented Mar 15, 2019

@iansu I saw that #6280 was moved to milestone 3 - does that mean that it will be part of this release?

@iansu

This comment has been minimized.

Copy link
Collaborator Author

iansu commented Mar 15, 2019

We've just published the first alpha release of Create React App 3.0! This issue has been updated with instructions on testing the new release. If you encounter any problems please create a new issue instead of commenting here. Thanks!

@ianschmitz

This comment has been minimized.

Copy link
Collaborator

ianschmitz commented Mar 15, 2019

Any thoughts about supporting webpackPrefetch?

@raRaRa please follow #3319 for updates on this. We're waiting on jantimon/html-webpack-plugin#1014 to support this.

@iansu

This comment has been minimized.

Copy link
Collaborator Author

iansu commented Mar 15, 2019

@raix That doesn't necessarily mean it will be included. We're considering it but we're also hoping to get 3.0 final out pretty quickly. Anything that isn't critical to the release and isn't ready will be pushed to a future version. That isn't a breaking change so it can be released at any time.

@rovansteen

This comment has been minimized.

Copy link
Contributor

rovansteen commented Mar 15, 2019

@iansu I've created a new PR (#6656) for baseUrl support in favor of #6116 so we can hopefully get that in with 3.0

@pavinthan

This comment has been minimized.

Copy link
Contributor

pavinthan commented Mar 15, 2019

@iansu why 3.0 add ability to configure PostCSS plugins ?
please have a look into this if possible #6649

@delasierra

This comment has been minimized.

Copy link

delasierra commented Mar 17, 2019

It seems that React @types are not installed by using --typescript flag.

npx create-react-app@next --scripts-version=3.0.0-next.b0cbf2ca my-app --typescript

@ianschmitz

This comment has been minimized.

Copy link
Collaborator

ianschmitz commented Mar 17, 2019

It seems that React @types are not installed by using --typescript flag.

npx create-react-app@next --scripts-version=3.0.0-next.b0cbf2ca my-app --typescript

@delasierra please file an issue. Let's keep this issue focused on the roadmap discussions.

@iansu iansu added this to To do in v3 via automation Mar 17, 2019

@iansu iansu removed this from To do in v3 Mar 17, 2019

@TomasHubelbauer

This comment has been minimized.

Copy link

TomasHubelbauer commented Apr 2, 2019

CRA3 seems (so far) to have support for TypeScript v 3.4.1, for anyone wondering. CRA2 would break on new TS syntax (as const, readonly on array return types, …).

@delaaxe

This comment has been minimized.

Copy link

delaaxe commented Apr 3, 2019

Any approximate timeline for the release of 3.0?

@ulrichb

This comment has been minimized.

Copy link

ulrichb commented Apr 3, 2019

@TomasHubelbauer It's enough to update the indirect dependencies @babel/parser and @babel/plugin-transform-typescript to >= 7.4.0. This allows to use TS 3.4 in CRA 2.1.8.

@stramel

This comment has been minimized.

Copy link

stramel commented Apr 11, 2019

I noticed a 2-3x slowdown when using TypeScript with Storybook v5. ~9s to ~30s.

@kaiwen-zhang-ck

This comment has been minimized.

Copy link

kaiwen-zhang-ck commented Apr 11, 2019

updates on when this is going to be released?

@aloker

This comment has been minimized.

Copy link

aloker commented Apr 12, 2019

I noticed a 2-3x slowdown when using TypeScript with Storybook v5. ~9s to ~30s.

I can confirm this. Transpilation time has massively increased, both for yarn build and yarn start

@voliva

This comment has been minimized.

Copy link

voliva commented Apr 12, 2019

This transpilation performance is probably due to Microsoft/TypeScript#30663 (comment) - It seems like with typescript@next it's already solved by that comment.

@stramel

This comment has been minimized.

Copy link

stramel commented Apr 12, 2019

@voliva Even with typescript@next I'm still getting slow storybooks.

@iansu

This comment has been minimized.

Copy link
Collaborator Author

iansu commented Apr 17, 2019

We've just published a new alpha release of Create React App 3.0! This issue has been updated with instructions on testing the new release. If you encounter any problems please create a new issue instead of commenting here.

Notable changes since the last alpha

  • Add support for baseUrl in jsconfig.json (#6656)
  • Update to core-js 3 (#6769)
  • Upgrade to workbox-webpack-plugin v4 (#6725)
  • Enable futureEmitAssets setting in webpack config (#6696)
  • Fix terser causing build to hang on WSL (#6732)
  • Add PostCSS Normalize (#5810)

Refer to the 3.0 Milestone to see exactly what is included in this release.

@jkdowdle

This comment has been minimized.

Copy link

jkdowdle commented Apr 17, 2019

@iansu

Not sure where the best place to open an issue is for an alpha build, but I noticed strange behavior after updating to latest alpha trying my test coverage script. Instead of running a coverage report it seems to be entering watch mode.

Here is a reproducible repo.

https://github.com/jkdowdle/creact-react-app-3.0.0-next.68-test-coverage-issue
Or

npx create-react-app@next --scripts-version=3.0.0-next.68 app-name && cd $_ && yarn test --coverage

@iansu

This comment has been minimized.

Copy link
Collaborator Author

iansu commented Apr 17, 2019

@jkdowdle Please file this as a new issue so we can track it properly.

@jlarmstrongiv

This comment has been minimized.

Copy link

jlarmstrongiv commented Apr 17, 2019

I read the “Nice to Have Features” for the 3.0 release, and was wondering whether these PR’s qualify:

  • Simple electron.js support #5498
  • Webworker support #3660, please see the updated version #5886
@iansu

This comment has been minimized.

Copy link
Collaborator Author

iansu commented Apr 17, 2019

@jlarmstrongiv I don't think either of those features are going to make it into 3.0 but they're not breaking changes so we can include them in a 3.x release.

@devongovett

This comment has been minimized.

Copy link

devongovett commented Apr 18, 2019

jsconfig.json is not a good idea. The filename implies that it is somehow a standard JS thing, when it is actually a CRA specific thing. tsconfig.json IS a TypeScript standard thing, since it comes from the sole vendor of the TypeScript language. However, JavaScript is a standard from multiple vendors, and publishing a config file that implies that it is related to that standard will cause confusion when people switch between tools.

I would suggest renaming this file to craconfig.json or something similar, or maybe adding a cra key in package.json for this config.

@ianschmitz

This comment has been minimized.

Copy link
Collaborator

ianschmitz commented Apr 18, 2019

@devongovett it's a configuration file that is used by TypeScript's JavaScript language service. See http://code.visualstudio.com/docs/languages/jsconfig.

If you still have concerns maybe we could create a separate issue and discuss?

@devongovett

This comment has been minimized.

Copy link

devongovett commented Apr 18, 2019

Yeah, Dan already corrected me on Twitter. Even so, I don’t think propagating that config file further outside of VSCode is a good idea for the same reasons.

@ianschmitz

This comment has been minimized.

Copy link
Collaborator

ianschmitz commented Apr 18, 2019

The file isn't unique to VS Code. Code just happens to have TypeScript baked in 😛. But yeah let's fire up a separate issue to discuss if you prefer!

@mrmckeb

This comment has been minimized.

Copy link
Collaborator

mrmckeb commented Apr 18, 2019

@devongovett, as @ianschmitz said we're definitely open for discussion in an issue :)

jsconfig.json is quite powerful, and users in IDEs making use of the TypeScript service will benefit from this.

As I understand it, your concern is more that you'd like to see a config file for create-react-app. This is something we've discussed a few times, and we're definitely look at ways to make create-react-app more flexible for different users.

@ReasonableDeveloper

This comment has been minimized.

Copy link

ReasonableDeveloper commented Apr 18, 2019

Very excited about CRA 3.0 especially about the eslint-hooks plugin 🎉
Could we also add #6599 to 3.0? It feels like full lerna support is one of the most requested features of the community.

@devongovett

This comment has been minimized.

Copy link

devongovett commented Apr 18, 2019

I don't really mind if there is or isn't a CRA specific config, I am mostly concerned with propagating a non-standard config masquerading as a standard one. It will cause confusion for people using other tools that support JavaScript but do not support this config file.

@rovansteen

This comment has been minimized.

Copy link
Contributor

rovansteen commented Apr 18, 2019

We can specifically mention that in the documentation. But a standard needs to start somewhere, vscode has a huge user base and these users will benefit from a configuration that keeps their IDE and build tool in sync with things like auto completion. Having our own configuration file will not do that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.