swc-plugin-add-display-name 0.7.0 → 0.8.1

package/README.md

@@ -1,9 +1,18 @@
 # swc-plugin-add-display-name
 
-Automatically add `displayName` to *top-level* React *functional* components.
+Automatically add `displayName` to *top-level* React *functional* components:
 - ✅ `const Component = () => <jsx />`
 - ✅ `function Component() { return <jsx /> }`
-- ❌ `const Context = createContext()`
+- ✅ `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(() => <jsx />)` (MobX observer)
+- ✅ `const ConnectedComponent = connect(...)(() => <jsx />)` (Redux connect)
+
+And even compiled code!
 
 > If you have other situations that needs to add `displayName`, feel free to open an issue or PR!
 
@@ -50,9 +59,9 @@ Add plugin to wherever you have an SWC config (e.g. `.swcrc` file, `swc-loader`
 
 ## Configuration
 
-This plugin currently has no configuration. However you have to leave an empty object to meet SWC's API schema.
+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, remove this plugin from the plugins list.
+If you'd like to disable this plugin in production build, simply remove this plugin from the plugins list.
 
 ## Examples
 
@@ -83,6 +92,63 @@ export function Component() { return <div />; }
 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`
+  color: red;
+`;
+
+// After
+import styled from 'styled-components';
+export const StyledButton = styled.button`
+  color: red;
+`;
+StyledButton.displayName = "StyledButton";
+```
+
+```tsx
+// Before
+import { observer } from 'mobx-react-lite';
+export const ObservedComponent = observer(() => <div />);
+
+// After
+import { observer } from 'mobx-react-lite';
+export const ObservedComponent = observer(() => <div />);
+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";
+```
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "swc-plugin-add-display-name",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "An SWC plugin to add displayName to React components",
   "author": "hjkcai <huajingkun1214@gmail.com>",
   "license": "MIT",