refactor: rename package to react-display-name-plugin and update references across codebase and examples

Author: niranjan94

.github/dependabot.yml

@@ -1,8 +1,9 @@
 version: 2
 updates:
-  - package-ecosystem: "npm"
+  - package-ecosystem: "pnpm"
     directories:
       - "/examples/*"
+      - "/"
     schedule:
       interval: "monthly"
     labels: []

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright for portions of webpack-react-component-name are held by Reflect Software, Inc (2020) as the original Authors. All other copyright for webpack-react-component-name are held by Mockingjay Pte Ltd (2024).
+Copyright for small portions of react-display-name-plugin are held by SmartBear Software (2020) as the original Authors of https://github.com/runreflect/webpack-react-component-name. All other copyright for react-display-name-plugin are held by Mockingjay Pte Ltd (2025)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,10 +1,9 @@
 ## Overview
 
-**webpack-react-component-name** is a build plugin for both Webpack and Vite that makes your custom
+**react-display-name-plugin** is a build plugin for both Webpack and Vite that makes your custom
 React components visible within React Dev Tools and other tools that rely on the displayName parameter.
 
-_Note: This branch contains the version of this plugin that is compatible with
-Webpack 5 and Vite 2+. For support for Webpack 4, see 0.x [branch/version](https://github.com/mockingjay-io/webpack-react-component-name/tree/0.x.) of this plugin_
+_Note: This package supports Webpack 5 and Vite 2+. For older versions (Webpack 4), see the legacy package [@mockingjay-io/webpack-react-component-name](https://github.com/mockingjay-io/webpack-react-component-name)._
 
 Normally React component names are minified during compilation. This plugin
 makes these component names available in production bundles by hooking into
@@ -20,30 +19,30 @@ result in a small size increase to your production bundles.
 
 ## Installation
 
-1. Install via your prefered package manager:
+1. Install via your preferred package manager:
 
 ```bash
-npm install @mockingjay-io/webpack-react-component-name --save-dev
+npm install react-display-name-plugin --save-dev
 ```
 
 ### For Webpack
 
 2. Import and add the plugin to your Webpack configuration:
 
 ```js
-const WebpackReactComponentNamePlugin = require('@mockingjay-io/webpack-react-component-name');
+const ReactDisplayNamePlugin = require('react-display-name-plugin/webpack');
 
 module.exports = {
   // ... other config
   plugins: [
-    new WebpackReactComponentNamePlugin({
+    new ReactDisplayNamePlugin({
       parseDependencies: true,
     })
   ],
 };
 ```
 
-**Next.js users** have to add this within `next.config.js`/`next.config.mjs`/`next.config.ts`. Examples available [here](https://github.com/mockingjay-io/webpack-react-component-name/tree/main/examples).
+**Next.js users** have to add this within `next.config.js`/`next.config.mjs`/`next.config.ts`. Examples available [here](https://github.com/mockingjay-io/react-display-name-plugin/tree/main/examples).
 
 ### For Vite
 
@@ -53,12 +52,12 @@ module.exports = {
 // vite.config.js / vite.config.ts
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import ViteReactComponentNamePlugin from '@mockingjay-io/webpack-react-component-name/vite';
+import reactDisplayNamePlugin from 'react-display-name-plugin/vite';
 
 export default defineConfig({
   plugins: [
     react(),
-    ViteReactComponentNamePlugin({
+    reactDisplayNamePlugin({
       parseDependencies: true,
     })
   ],
@@ -67,6 +66,34 @@ export default defineConfig({
 
 **Note:** The Vite plugin should be placed after the React plugin in your plugins array, as it needs to run after JSX transformation.
 
+### Core Utilities (Advanced)
+
+For building custom plugins for other bundlers, you can import the core utilities directly:
+
+```js
+const {
+  detectReactComponents,
+  generateDisplayNameCode
+} = require('react-display-name-plugin');
+const { parse } = require('acorn');
+
+const code = 'function MyComponent() { return <div>Hello</div>; }';
+const ast = parse(code, { ecmaVersion: 'latest', sourceType: 'module' });
+
+detectReactComponents(ast, (node) => {
+  const componentName = node.id.name;
+  const injectionCode = generateDisplayNameCode(componentName);
+  console.log(injectionCode); // ;try{MyComponent.displayName="MyComponent";}catch(e){}
+});
+```
+
+**Available Utilities:**
+- `detectReactComponents(ast, callback)` - Walks an AST and detects React components
+- `generateDisplayNameCode(componentName)` - Generates displayName injection code
+- `argumentCreatesElement(argument)` - Checks if AST node is React.createElement
+- `argumentJsx(argument)` - Checks if AST node is JSX transform output (_jsx, _jsxs)
+- `shouldAddDisplayName(node)` - Checks if a node should have displayName added
+
 ## Options
 
 ```json

examples/create-react-app-ejected/config/webpack.config.js

@@ -9,7 +9,7 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const WebpackReactComponentNamePlugin = require('webpack-react-component-name');
+const WebpackReactComponentNamePlugin = require('react-display-name-plugin/webpack');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');

examples/create-react-app-ejected/package.json

@@ -58,7 +58,7 @@
     "workbox-webpack-plugin": "^6.4.1"
   },
   "devDependencies": {
-    "@mockingjay-io/webpack-react-component-name": "../../"
+    "react-display-name-plugin": "../../"
   },
   "scripts": {
     "start": "node scripts/start.js",

examples/nextjs12/next.config.js

@@ -1,4 +1,4 @@
-const WebpackReactComponentNamePlugin = require("@mockingjay-io/webpack-react-component-name");
+const WebpackReactComponentNamePlugin = require("react-display-name-plugin/webpack");
 
 module.exports = {
   reactStrictMode: true,

examples/nextjs12/package.json

@@ -15,7 +15,7 @@
     "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "@mockingjay-io/webpack-react-component-name": "../../",
+    "react-display-name-plugin": "../../",
     "eslint": "8.6.0",
     "eslint-config-next": "12.0.7",
     "webpack": "^5.102.1"

examples/nextjs13-app-router/next.config.js

@@ -1,4 +1,4 @@
-const WebpackReactComponentNamePlugin = require('@mockingjay-io/webpack-react-component-name');
+const WebpackReactComponentNamePlugin = require('react-display-name-plugin/webpack');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {

examples/nextjs13-app-router/package.json

@@ -14,7 +14,7 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@mockingjay-io/webpack-react-component-name": "../../",
+    "react-display-name-plugin": "../../",
     "@types/node": "^20.19.24",
     "@types/react": "^18.3.26",
     "@types/react-dom": "^18.3.7",

examples/nextjs13-pages-router/next.config.js

@@ -1,4 +1,4 @@
-const WebpackReactComponentNamePlugin = require('@mockingjay-io/webpack-react-component-name');
+const WebpackReactComponentNamePlugin = require('react-display-name-plugin/webpack');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {