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

TypeScript support #2815

Closed
wants to merge 5 commits into
base: master
from

Conversation

Projects
None yet
@Timer
Collaborator

Timer commented Jul 19, 2017

This includes PR #2784.
Here's an example of a working plugin, which enables TypeScript support for development, production, and testing.

Click here to see the diff without PR #2784.

Timer added some commits Jul 9, 2017

try {
return require('react-scripts-plugin-typescript').tsc;
} catch (e) {
return require('typescript');

This comment has been minimized.

@sompylasar

sompylasar Jul 20, 2017

What if this throws, too?

@sompylasar

sompylasar Jul 20, 2017

What if this throws, too?

This comment has been minimized.

@Timer

Timer Jul 20, 2017

Collaborator

This would only happen post eject, where throwing would happen if the user had malformed node_modules; by default this will "work". We could add a helpful message, I suppose.

@Timer

Timer Jul 20, 2017

Collaborator

This would only happen post eject, where throwing would happen if the user had malformed node_modules; by default this will "work". We could add a helpful message, I suppose.

@@ -290,3 +292,5 @@ module.exports = {
hints: false,
},
};
module.exports = applyPlugins(base, ['typescript'], { path, paths });

This comment has been minimized.

@sompylasar

sompylasar Jul 20, 2017

Maybe expand the whitelisted plugins into multiple lines starting from the first plugin, to minimize future diffs?

module.exports = applyPlugins(base, [
  'typescript',
], { path, paths });

Diff:

 module.exports = applyPlugins(base, [
   'typescript',
+  'sass',
 ], { path, paths });

Versus:

-module.exports = applyPlugins(base, ['typescript'], { path, paths });
+module.exports = applyPlugins(base, [
+  'typescript',
+  'sass',
+], { path, paths });
@sompylasar

sompylasar Jul 20, 2017

Maybe expand the whitelisted plugins into multiple lines starting from the first plugin, to minimize future diffs?

module.exports = applyPlugins(base, [
  'typescript',
], { path, paths });

Diff:

 module.exports = applyPlugins(base, [
   'typescript',
+  'sass',
 ], { path, paths });

Versus:

-module.exports = applyPlugins(base, ['typescript'], { path, paths });
+module.exports = applyPlugins(base, [
+  'typescript',
+  'sass',
+], { path, paths });

This comment has been minimized.

@Timer

Timer Jul 20, 2017

Collaborator

This is controlled by prettier, but I agree that it's a good idea.
We're going to be adding more meta information (and probably move where this is) -- we will need plugin name and plugin version supported: { name: 'typescript', version: '1.x' }.
Once this is turned into an object it'll probably break onto single lines.

@Timer

Timer Jul 20, 2017

Collaborator

This is controlled by prettier, but I agree that it's a good idea.
We're going to be adding more meta information (and probably move where this is) -- we will need plugin name and plugin version supported: { name: 'typescript', version: '1.x' }.
Once this is turned into an object it'll probably break onto single lines.

@azu azu referenced this pull request Jul 25, 2017

Open

create-almin-app #264

pushExclusiveLoader,
} = require('react-dev-utils/plugins');
function apply(config, { path, paths }) {

This comment has been minimized.

@NMinhNguyen

NMinhNguyen Jul 25, 2017

Contributor

Just curious: is there any reason this isn't just const path = require('path'), but passed into the plugin instead?

@NMinhNguyen

NMinhNguyen Jul 25, 2017

Contributor

Just curious: is there any reason this isn't just const path = require('path'), but passed into the plugin instead?

This comment has been minimized.

@Timer

Timer Jul 27, 2017

Collaborator

When inlining the plugin during eject the transform is not smart enough to pull required dependencies/packages; so for now required packages must be passed in.

@Timer

Timer Jul 27, 2017

Collaborator

When inlining the plugin during eject the transform is not smart enough to pull required dependencies/packages; so for now required packages must be passed in.

This comment has been minimized.

@NMinhNguyen

NMinhNguyen Jul 27, 2017

Contributor

Ah makes sense! Is react-dev-utils/plugins a little special then, that you're able to require it just above?

@NMinhNguyen

NMinhNguyen Jul 27, 2017

Contributor

Ah makes sense! Is react-dev-utils/plugins a little special then, that you're able to require it just above?

This comment has been minimized.

@Timer

Timer Jul 27, 2017

Collaborator

Yeah! Those methods get removed entirely when ejecting -- that package should be the only package that is ever required inside the plugin(s).

@Timer

Timer Jul 27, 2017

Collaborator

Yeah! Those methods get removed entirely when ejecting -- that package should be the only package that is ever required inside the plugin(s).

This comment has been minimized.

@Timer

Timer Jul 27, 2017

Collaborator
@davidwparker

This comment has been minimized.

Show comment
Hide comment
@davidwparker

davidwparker Aug 11, 2017

@Timer - good stuff here.

Question- is there a time we think the plugin system #2784 is going to be added? And if so, how do you think something like this will compare to https://github.com/wmonk/create-react-app-typescript ?

Keep up the good work, thanks!

davidwparker commented Aug 11, 2017

@Timer - good stuff here.

Question- is there a time we think the plugin system #2784 is going to be added? And if so, how do you think something like this will compare to https://github.com/wmonk/create-react-app-typescript ?

Keep up the good work, thanks!

@zhenwenc

This comment has been minimized.

Show comment
Hide comment
@zhenwenc

zhenwenc Aug 15, 2017

I am using create-react-app with Typescript and CSS Modules without "ejecting". The solution to me is pretty easy and strait-forward. I suggest please keep the create-react-app project clean and simple as what it is, no need to add unnecessary complexity. It was just my personal opinion, thanks for the great work!

Welcome to have a look and give it a try zc-react-scripts

zhenwenc commented Aug 15, 2017

I am using create-react-app with Typescript and CSS Modules without "ejecting". The solution to me is pretty easy and strait-forward. I suggest please keep the create-react-app project clean and simple as what it is, no need to add unnecessary complexity. It was just my personal opinion, thanks for the great work!

Welcome to have a look and give it a try zc-react-scripts

@icopp

This comment has been minimized.

Show comment
Hide comment
@icopp

icopp Sep 18, 2017

@davidwparker I think the create-react-app-typescript project has the problem that anything that doesn't ultimately feed Typescript through Babel loses benefits like tree shaking. Just using ts-loader or similar directly is only really practical if ALL your dependencies are also Typescript.

icopp commented Sep 18, 2017

@davidwparker I think the create-react-app-typescript project has the problem that anything that doesn't ultimately feed Typescript through Babel loses benefits like tree shaking. Just using ts-loader or similar directly is only really practical if ALL your dependencies are also Typescript.

@stunaz

This comment has been minimized.

Show comment
Hide comment
@stunaz

stunaz Oct 14, 2017

@Timer any news on this? Or it has to land after plugin system?

stunaz commented Oct 14, 2017

@Timer any news on this? Or it has to land after plugin system?

@Timer Timer referenced this pull request Nov 7, 2017

Closed

Official TypeScript support #3415

@bootstraponline

This comment has been minimized.

Show comment
Hide comment
@bootstraponline

bootstraponline Nov 7, 2017

Is there a plan to have this merged? TypeScript support would be awesome.

bootstraponline commented Nov 7, 2017

Is there a plan to have this merged? TypeScript support would be awesome.

@qinyang1980

This comment has been minimized.

Show comment
Hide comment
@qinyang1980

qinyang1980 Nov 24, 2017

(create react app + typescript + antd) without eject and without using Babel.

https://github.com/qinyang1980/create-react-antd-app.git

qinyang1980 commented Nov 24, 2017

(create react app + typescript + antd) without eject and without using Babel.

https://github.com/qinyang1980/create-react-antd-app.git

@js2me

This comment has been minimized.

Show comment
Hide comment
@js2me

js2me Feb 2, 2018

@qinyang1980 it's repository supports tree shaking of typescript files in build application? Just I heard so react-create-app doesn't support that feature in building

js2me commented Feb 2, 2018

@qinyang1980 it's repository supports tree shaking of typescript files in build application? Just I heard so react-create-app doesn't support that feature in building

@brunolemos brunolemos referenced this pull request Jul 29, 2018

Open

TypeScript support using Babel 7 #4837

11 of 11 tasks complete
@brunolemos

This comment has been minimized.

Show comment
Hide comment
@brunolemos

brunolemos Jul 29, 2018

I made an alternative PR adding TypeScript using Babel 7: #4837

brunolemos commented Jul 29, 2018

I made an alternative PR adding TypeScript using Babel 7: #4837

@devuxer

This comment has been minimized.

Show comment
Hide comment
@devuxer

devuxer Oct 4, 2018

@Timer, Do you have a status update on this? Is it still planned? Is there an ETA?

devuxer commented Oct 4, 2018

@Timer, Do you have a status update on this? Is it still planned? Is there an ETA?

@bugzpodder

This comment has been minimized.

Show comment
Hide comment
@bugzpodder

bugzpodder Oct 5, 2018

Collaborator

@devuxer please follow along here:
#4837
and Dan said there should be some support by end of the year: https://news.ycombinator.com/item?id=18118349

Collaborator

bugzpodder commented Oct 5, 2018

@devuxer please follow along here:
#4837
and Dan said there should be some support by end of the year: https://news.ycombinator.com/item?id=18118349

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Oct 5, 2018

Collaborator

We're very interested in bringing TypeScript support. I will either finish this PR or merge #4837 provided everything works properly.

Collaborator

Timer commented Oct 5, 2018

We're very interested in bringing TypeScript support. I will either finish this PR or merge #4837 provided everything works properly.

@Timer

This comment has been minimized.

Show comment
Hide comment
@Timer

Timer Oct 18, 2018

Collaborator

Closing in favor of #4837.

Collaborator

Timer commented Oct 18, 2018

Closing in favor of #4837.

@Timer Timer closed this Oct 18, 2018

@Timer Timer added this to the 2.1 milestone Oct 18, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment