swc-plugin-add-display-name 0.9.2 → 0.9.3

package/README.md

@@ -1,20 +1,23 @@
 # swc-plugin-add-display-name
 
+> **PLEASE GIVE A STAR IF YOU LIKE THIS PROJECT!**
+
+![NPM Version](https://img.shields.io/npm/v/swc-plugin-add-display-name?style=for-the-badge)
+![NPM Downloads](https://img.shields.io/npm/dm/swc-plugin-add-display-name?style=for-the-badge)
+
 Automatically add `displayName` to *top-level* React *functional* components:
-- ✅ `const Component = () => <jsx />`
-- ✅ `function Component() { return <jsx /> }`
-- ✅ `const Component = () => jsx("div", { children: "hello" })` (Compiled JSX code)
-- ✅ `const Component = () => React.createElement("div", null, "hello")` (Compiled or hand-written JSX code)
+- `const Component = () => <jsx />`
+- `function Component() { return <jsx /> }`
+- `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!
+- `const Context = createContext()` (React Context)
+- `const StyledButton = styled.button` (Styled Components)
+- `const ObservedComponent = observer(() => <jsx />)` (MobX observer)
+- `const ConnectedComponent = connect(...)(() => <jsx />)` (Redux connect)
 
-> If you have other situations that needs to add `displayName`, feel free to open an issue or PR!
+If you have other situations that needs to add `displayName`, feel free to open an issue or PR!
 
 ## Installation
 
@@ -24,44 +27,64 @@ Install with your favorite package manager as devDependency.
 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.
+## Configuration
 
-```js
-// JavaScript
+Add this plugin to wherever you have an SWC config.
+
+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.
+
+### [`.swcrc`](https://swc.rs/docs/configuration/compilation#jscexperimentalplugins)
+
+You may configure SWC directly via `.swcrc`.
+Or pass the configuration as options to loaders (e.g. `swc-loader`, Rspack's `builtin:swc-loader`).
+
+Make sure either `jsx` or `tsx` option is turned on depending on the syntax you are using.
+
+```json
 {
-  jsc: {
-    parser: {
-      jsx: true,
-    },
-    experimental: {
-      plugins: [
-        ['swc-plugin-add-display-name', {}],
-      ],
-    },
-  },
+  "jsc": {
+    "experimental": {
+      "plugins": [
+        ["swc-plugin-add-display-name", {}]
+      ]
+    }
+  }
 }
+```
 
-// TypeScript
-{
-  jsc: {
-    parser: {
-      syntax: 'typescript',
-      tsx: true,
+### [Rsbuild](https://rsbuild.rs/guide/configuration/swc#register-swc-plugin)
+
+Simply configure SWC via `tools.swc`.
+
+```js
+export default {
+  tools: {
+    swc: {
+      jsc: {
+        experimental: {
+          plugins: [
+            ['swc-plugin-add-display-name', {}],
+          ],
+        },
+      },
     },
-    experimental: {
-      plugins: [
-        ['swc-plugin-add-display-name', {}],
-      ],
-    }
   },
-}
+};
 ```
 
-## Configuration
+### [Next.js](https://nextjs.org/docs/architecture/nextjs-compiler)
 
-This plugin currently has no configuration. However you have to pass an empty object to meet SWC's API schema.
+If you’re using the Next.js Compiler powered by SWC, add this plugin to your next.config.js.
 
-If you'd like to disable this plugin in production build, simply remove this plugin from the plugins list.
+```js
+module.exports = {
+  experimental: {
+    swcPlugins: [['swc-plugin-add-display-name', {}]],
+  },
+};
+```
 
 ## Examples
 
@@ -149,6 +172,32 @@ export const ConnectedComponent = connect(() => ({}))(() => null);
 ConnectedComponent.displayName = "ConnectedComponent";
 ```
 
+## Troubleshooting
+
+### SWC Versions
+
+SWC plugins may encounter compatibility issues across different SWC versions.
+If your app won't compile after configuring this plugin,
+please try to find a compatible version between this plugin and SWC.
+
+You may refer to the following docs:
+- [Selecting the version](https://swc.rs/docs/plugin/selecting-swc-core)
+- [SWC compatibility table](https://plugins.swc.rs/versions/range)
+- [SWC plugin version mismatch](https://rspack.rs/errors/swc-plugin-version)
+
+| swc-plugin-add-display-name | swc_core |
+|-----------------------------|----------|
+| >0.9.0                      | 54.0.0   |
+| >=0.7.0 <0.9.0              | 46.0.3   |
+| ^0.6.0                      | 31.1.0   |
+
+### Incorrect Results
+
+Please file an issue if this plugin:
+- Causes runtime errors (e.g. `Cannot add property displayName, object is not extensible`, `Cannot create property 'displayName'`).
+- Adds `displayName` where it shouldn't.
+- Fails to add `displayName` on certain cases.
+
 ## License
 
 MIT

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "swc-plugin-add-display-name",
-  "version": "0.9.2",
-  "description": "An SWC plugin to add displayName to React components",
+  "version": "0.9.3",
+  "description": "Automatically add displayName to top-level React functional components",
   "author": "hjkcai <huajingkun1214@gmail.com>",
   "license": "MIT",
   "keywords": [
@@ -15,9 +15,6 @@
   "scripts": {
     "prepublishOnly": "cargo build-wasi --release"
   },
-  "peerDependencies": {
-    "@swc/core": "^1.15.0"
-  },
   "devDependencies": {
     "@swc/cli": "^0.6.0",
     "@swc/core": "^1.15.0"