Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@sourcegraph/babel-plugin-transform-react-hot-loader-wrapper

Package Overview
Dependencies
Maintainers
16
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@sourcegraph/babel-plugin-transform-react-hot-loader-wrapper

Wraps all exported React components in a configurable set of files with react-hot-loader's hot() function

  • 1.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2
Maintainers
16
Weekly downloads
 
Created
Source

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

npm downloads build codecov code style: prettier semantic-release

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.

Keywords

FAQs

Package last updated on 17 May 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc