-
Notifications
You must be signed in to change notification settings - Fork 800
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
Performance oriented .babelrc for TS users #884
Comments
I would suggest to use |
Does anyone know if I can target TS to |
No. In this case RHL will not see any Components, ie classes, as long they will be transpile, and you will lose ability to change like a anything except ‘render’ method. |
Hey all! Maintainer of
With v3 I didn't need to which I liked. Would you be able to clarify why babel is needed with v4 please? If it's the only game in town that's cool - but if there's a way I can stick with just my TypeScript + core-js flow I'd love to. If babel has to be in the mix I want to keep it as targeted as possible. I maintain a react-hot-loader example in the ts-loader repo so I'd like to provide a good boilerplate for people wondering how to use ts-loader with react-hot-loader. I'd love to understand the limitation if you're up for explaining! 🌻 |
@johnnyreilly - so here is a fairy tale. As result - RHL will search for classes, and inject magic method, to EVAL something in the class scope and class context And later we drop thousand lines from proxy, and just rely on this 3 lines long method. If you will transpile TS to ES5 - RHL will not found any "class" it is looking for. This means - if you will transpile TS to ES5 or dont apply babel - RHL will still work (dont forget to import it before react), but just will lose some abilities. Not the main ones. |
Hey @theKashey! Thanks for that; super interesting context. I've a bunch of questions off the back of what you've said:
Trying to do a cost / benefit on:
vs
|
Not debugging. Replacing. RHL will lose ability to repeat changes in the new constructor and will not repeat changes you made.
If you dont use babel plugin - the "mode" you are using does not make any sence. No babel - no cry.
Only RHL patch is enough. In dev mode.
React-hot-loader should patch React before any component would be created. Import order is not significant, but better to import RHL before anything else.
v4 could handle almost any code you may write, v3 could handle almost no code I wrote.
That's why I created this issue - how to setup RHL and TS and babel without any significant slowdown. |
Here is the minimal babel config I ended up with: {
loader: 'babel-loader',
options: {
plugins: [
'@babel/plugin-syntax-typescript',
'@babel/plugin-syntax-decorators',
'@babel/plugin-syntax-jsx',
'react-hot-loader/babel',
],
},
} I put it BEFORE ts-loader. Works fine for me but the build is noticeably slower. |
Actually we could try to make it better to TS users, and NOT require nor babel, nor compiling to ES6 instead of ES5. That may make TS users more happier, or just make it possible to use RHL, as long most of them have a target: es5, and, as result, could not use RHL :( |
@theKashey could you go into more details on this? I would be happy to remove babel from my pipeline and |
There is nothing you could do, but there is something that could be changed in the RHL's internals. |
@theKashey I would ❤️ that to happen! Question on this:
Would that work for arrow functions as class members? eg
|
No. Only babel magic can handle arrow functions. |
That's a shame :-( |
Unfortunately nothing could change context of arrow function, is it bound to the single function renegenerateArrowFunction(code){
return eval(code);
}
instance.arrowMember = renegenerateArrowFunction.call(instance, newFunctionBody) But arrow function might "consume" something from variable scope, and we have to preserve that scope. Nor Proxy, nor Reflection API could not help here :( |
Doesn't look like a good idea, just didn't think of the limitations transpiling TypeScript using babel. |
What about using typescript plugins to repeat the things babel do? |
Seems that TypeScript plugins can't do it (at least right now): UPD: but it seems to be possible with Custom Transformers which I was not aware of but seems ts-loader supports it. I think @johnnyreilly can tell more about this |
I was getting a hell lot of TS errors with the preferred config from README because with it the code is compiled first by Babel, and by TypeScript after, and TypeScript compiler goes nuts on 'babelified' code. Working config for me (you must put {
test: /\.ts|\.tsx$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
plugins: [
'@babel/plugin-syntax-typescript',
'@babel/plugin-syntax-decorators',
'@babel/plugin-syntax-jsx',
'react-hot-loader/babel',
],
},
},
{
loader: 'ts-loader',
},
],
}, |
May be you have .babelrc and it adds some transformations you are not expecting? Otherwise RHL will not properly work unless you are set es6 as a target. |
@theKashey Nope, I have no .babelrc and am getting errors like this: ERROR in /.../components/ClientListItem.tsx
./client/components/ClientListItem.tsx
[tsl] ERROR in /.../components/ClientListItem.tsx(63,36)
TS7006: Parameter 'key' implicitly has an 'any' type.
ERROR in /.../components/ClientListItem.tsx
./client/components/ClientListItem.tsx
[tsl] ERROR in /.../components/ClientListItem.tsx(63,41)
TS7006: Parameter 'code' implicitly has an 'any' type. I assume that type checking happens after Babel compiles the code as I see no such lines in ClientListItem.tsx and VS Code doesn't output such errors. It looks like transpiled |
😆😆😆😕
PS: It is easy to make Reopening task. |
A hacky, but possibly easy to implement way of handling this problem is using i.e. // @ts-ignore
__reactstandin__regenerateByEval(key, code) {
// @ts-ignore
this[key] = eval(code);
} I've never found a good source of documentation for
Unfortunately you can't block specific errors at the moment, only all errors. |
Ok. PR just opened.
Please review. |
OK for me, but I think another look from a TS expert would be great. |
I don't know anything about babel, so I can't comment on that. Thanks for updating the example project to show using babel 7. I struggled a little on the weekend with the differences between the documentation showing babel 7, and the example using babel 6, before hitting the "invalid" typescript issue. I got there in the end by guessing which packages I needed to grab/update, so having that in the example should make things smoother for others who haven't had much exposure to babel. You guys are very active and responsive on this project. It doesn't mean much, but I'm personally very impressed! Thank you for all your time and effort. |
@Madou - are you TS expert? |
Meanwhile - found one more way to "babel" TS - it is build into awesome-typescript-loader! loader: "awesome-typescript-loader",
options: {
silent: process.argv.indexOf("--json") !== -1,
useBabel: true,
babelOptions: {
plugins: ['react-hot-loader/babel']
}
} |
feat. Better typescript with babel 7. implements #884
Released in v4.1.3 |
@theKashey, do you can provide your configs(webpack.config.js, tsconfig.json, package.json(for versioni))? |
Our example - https://github.com/gaearon/react-hot-loader/tree/master/examples/typescript - uses babel 7 under the hood, and might be not the best option. |
@theKashey Is there a way to use it without babel now? Both ts-loader and babel are compiler. I believe most people think that ts-loader and babel are redundant at the same time, and many people are forced to do so. |
It will be never possible to use all the features without babel. With webpack-loaders restored RHL will be almost usable for TS-only applications. |
We have to include example with babel configuration for TS users.
The key ideas:
The text was updated successfully, but these errors were encountered: