babel-plugin-transform-react-hot-loader-wrapper

Wraps all exported React components (whose names match the configured pattern) with react-hot-loader to enable hot-reloading, even if the React components are spread across Webpack chunks using code splitting.

For example, this source file:

import React from 'react'

export const A = () => <p>a</p>

becomes:

import React from 'react'
import { hot } from 'react-hot-loader/root'

export const A = hot(() => <p>a</p>)

Usage

npm install --save-dev @sourcegraph/babel-plugin-transform-react-hot-loader-wrapper
# or
yarn add --dev @sourcegraph/babel-plugin-transform-react-hot-loader-wrapper

Then add this to your Babel configuration file (.babelrc or babel.config.js):

{
  "plugins": [
    [
      "@sourcegraph/babel-plugin-transform-react-hot-loader-wrapper",
      {
        "modulePattern": "src/.*Page\\.tsx$",
        "componentNamePattern": "Page$"
      }
    ]
  ]
}

Configuration

• modulePattern: A regular expression that matches files to process. You probably only want to wrap your own application's React page components, not node_modules or utility modules. The example above (src/.*Page\\.tsx$) matches all files in src/ ending with Page.tsx.
• componentNamePattern: A regular expression that matches React component names to process. The example above (Page$) matches all React components whose name ends with Page. This matches export const MyPage = () => <p>hello</p> but does not match export function myOtherFunction() { return 123 }.

Known issues

• default exports are not supported (export default class Foo ...), only named exports (export class Foo ...).

Build

yarn
yarn build

Test

yarn test

Release

Releases are done automatically in CI when commits are merged into master by analyzing Conventional Commit Messages. After running yarn, commit messages will be linted automatically when committing though a git hook.