Skip to content

Jetsly/ts-react-hot-transformer

Repository files navigation

npm downloads travis

ts-react-hot-transformer

react hot transformer for ts,and no babel

  • Standalone : no babel, only configuration ts-loader

Table of Contents

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/
      }
    ]
  },
  // ...
}
  1. 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)
  1. 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