search

strothj / react-app-rewire-typescript-babel-preset

Add TypeScript support to Create React App using @babel/preset-typescript
https://react-app-rewire-typescript-babel-preset.netlify.com
MIT License
52 stars 6 forks source link

Add tsExtHighPriority option #6

Closed detrohutt closed 6 years ago

detrohutt commented 6 years ago

Adding the actual option functionality was easy but making typescript and the linter happy, not so much.. lol

Anyway, it works perfectly. I ran first without changing anything in my "consuming" app. It predictably compiled with warnings and failed. Next I used the new withOptions property in config-overrides.js to set the new option to true, ran my build again, and it worked fine.

The relevant change (only needed if you don't want the default behavior) in the app-side code is this:

- return rewireTypescript(config);
+ return rewireTypescript.withOptions({ tsExtHighPriority: true })(config);

Sorry it took longer than expected, thanks for being patient!

detrohutt commented 6 years ago

And after thinking things through a bit more I think my previous assumptions were wrong with regards to needing to build typescript before building CRA... I forgot CRA has it's own build settings in package.json.browserslist. But honestly I still don't know for sure if that means you would never need to build typescript first... so it's probably safe to keep this as an option, and even if it ends up being unnecessary, at least you have a framework for adding other options now! :)

strothj commented 6 years ago

Hello,

I'll read through everything here and in the previous pull request soon. Have some work I'm catching up but I'll have a look soon.

strothj commented 6 years ago

I actually like the TypeScript files having precedence over the Javascript ones. I think I would prefer to leave it as is. If CRA is using another package in a monorepo, it actually takes over the compiling step in the current beta.

The Babel plugin just strips the TypeScripts types and then passes the output to the rest of the normal Babel loaders/plugins. What this means is that technically you don't even need TypeScript as a dependency to your project for Create React App to build your code with this rewire.

Having the tsconfig.json in this case supports the following: code editor support (your editor will be able to make sense of your development setup), run tslint (in which case you would need Typescript as a dependence as its required for tslint).

A cool thing with the new CRA beta is the ability for it to build your TypeScript files in other packages in your mono repo without first compiling them yourself. I've been setting up a few projects this way.

I'm rebuilding my super old portfolio site by doing it this way (work in progress): https://github.com/strothj/portfolio/tree/v2

I definitely think there's an opportunity to provide better documentation or example projects.

Does leaving the extension precedence cause problems for you?

detrohutt commented 6 years ago

As long as the typescript extensions have higher precedence (as in 2.1.1) it works for me! Thanks for explaining all that. :smiley: