Jetsly/ts-react-hot-transformer

react hot transformer for ts,and no babel

ts-react-hot-transformer

react hot transformer for ts,and no babel

• Standalone : no babel, only configuration ts-loader

Table of Contents

• Install
• Usage
• Code Splitting
• License

Installation

For use with node and npm:

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:

// 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:

// App.js
import { hot } from 'react-hot-loader/root'
const App = () => <div>Hello World!</div>
export default hot(App)

3. Run webpack with Hot Module Replacement:

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

// webpack.conf
...
resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
}
...

License

MIT License