Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jetsly/ts-react-hot-transformer
react hot transformer for ts,and no babel
https://github.com/jetsly/ts-react-hot-transformer
react-hot react-hot-loader ts-loader ts-react-hot-transformer
Last synced: 18 days ago
JSON representation
react hot transformer for ts,and no babel
- Host: GitHub
- URL: https://github.com/jetsly/ts-react-hot-transformer
- Owner: Jetsly
- License: mit
- Created: 2019-01-13T09:30:43.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-09T10:48:04.000Z (over 5 years ago)
- Last Synced: 2024-04-25T11:43:27.513Z (7 months ago)
- Topics: react-hot, react-hot-loader, ts-loader, ts-react-hot-transformer
- Language: TypeScript
- Homepage: https://npm.im/ts-react-hot-transformer
- Size: 151 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ts-react-hot-transformer
> react hot transformer for ts,and no babel
- **Standalone** : no babel, only configuration `ts-loader`
## Table of Contents
- [Install](#install)
- [Usage](#usage)
- [Code Splitting](#code-splitting)
- [License](#license)
## Installation
For use with [node](http://nodejs.org) and [npm](https://npmjs.com):
```sh
npm install --save-dev ts-react-hot-transformer react-hot-loader
```
## Usage
### With ts-loader
1. Add `ts-react-hot-transformer` to your `ts-loader` options:
```js
// webpack.config.js
const tsReactHotTransformer = require('ts-react-hot-transformer')
module.exports = {
// ...
module: {
rules: [
{
test: /\.(jsx|tsx|js|ts)$/,
loader: 'ts-loader',
options: {
getCustomTransformers: () => ({
before: [ tsReactHotTransformer() ]
}),
},
exclude: /node_modules/
}
]
},
// ...
}
```
2. Mark your root component as _hot-exported_:
```js
// App.js
import { hot } from 'react-hot-loader/root'
const App = () =>
Hello World!
export default hot(App)
```
3. [Run webpack with Hot Module Replacement](https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr):
```sh
webpack-dev-server --hot
```
## Code Splitting
It is the same React-Dom, with the same version, to hot patch.
There is 2 ways to install it:
* Use `@hot-loader/react-dom` installed instead of `react-dom`
```
yarn add @hot-loader/react-dom
```
* Use webpack **aliases**
```js
// webpack.conf
...
resolve: {
alias: {
'react-dom': '@hot-loader/react-dom'
}
}
...
```
## License
[MIT License](LICENSE.md)