An SWC plugin to add displayName to React components
npm install swc-plugin-add-display-nameAutomatically add displayName to top-level React functional components:
- ✅ const Component = () =>
- ✅ function Component() { return
- ✅ const Component = () => jsx("div", { children: "hello" }) (Compiled JSX code)
- ✅ const Component = () => React.createElement("div", null, "hello") (Compiled or hand-written JSX code)
And some API calls that produce component:
- ✅ const Context = createContext() (React Context)
- ✅ const StyledButton = styled.button (Styled Components)
- ✅ const ObservedComponent = observer(() => (MobX observer)
- ✅ const ConnectedComponent = connect(...)(() => (Redux connect)
And even compiled code!
> If you have other situations that needs to add displayName, feel free to open an issue or PR!
Install with your favorite package manager as devDependency.
``bash`
npm i -D swc-plugin-add-display-name
Add plugin to wherever you have an SWC config (e.g. .swcrc file, swc-loader config, etc). Make sure either jsx or tsx option is turned on depending on the syntax you are using.
`js
// JavaScript
{
jsc: {
parser: {
jsx: true,
},
experimental: {
plugins: [
['swc-plugin-add-display-name', {}],
],
},
},
}
// TypeScript
{
jsc: {
parser: {
syntax: 'typescript',
tsx: true,
},
experimental: {
plugins: [
['swc-plugin-add-display-name', {}],
],
}
},
}
`
This plugin currently has no configuration. However you have to pass an empty object to meet SWC's API schema.
If you'd like to disable this plugin in production build, simply remove this plugin from the plugins list.
`tsx
// Before
export const Component = () => ;
// After
export const Component = () =>
tsx
// Before
const Component = forwardRef((props, ref) => );// After
const Component = forwardRef((props, ref) =>
);
Component.displayName = "Component";
`tsx
// Before
export function Component() { return ; }// After
export function Component() { return
; }
Component.displayName = "Component";
`tsx
// Before
export const Component = () => jsx("div", { children: "hello" });// After
export const Component = () => jsx("div", { children: "hello" });
Component.displayName = "Component";
`tsx
// Before
import { createContext } from 'react';
export const ThemeContext = createContext('light');// After
import { createContext } from 'react';
export const ThemeContext = createContext('light');
ThemeContext.displayName = "ThemeContext";
`tsx
// Before
import styled from 'styled-components';
export const StyledButton = styled.button;// After
import styled from 'styled-components';
export const StyledButton = styled.button
;
StyledButton.displayName = "StyledButton";
`tsx
// Before
import { observer } from 'mobx-react-lite';
export const ObservedComponent = observer(() => );// After
import { observer } from 'mobx-react-lite';
export const ObservedComponent = observer(() =>
);
ObservedComponent.displayName = "ObservedComponent";
`tsx
// Before
import { connect } from 'react-redux';
export const ConnectedComponent = connect(() => ({}))(() => null);// After
import { connect } from 'react-redux';
export const ConnectedComponent = connect(() => ({}))(() => null);
ConnectedComponent.displayName = "ConnectedComponent";
``MIT