Beta

.changeset/cold-pillows-wink.md

@@ -0,0 +1,5 @@
+---
+"esbuild-plugin-react18": minor
+---
+
+Remove duplicate require("react/jsx-runtime")

.changeset/pre.json

@@ -0,0 +1,20 @@
+{
+  "mode": "exit",
+  "tag": "beta",
+  "initialVersions": {
+    "@example/express": "0.0.0",
+    "@example/nextjs": "0.0.0",
+    "@example/remix": "0.0.0",
+    "@example/vite": "0.0.0",
+    "esbuild-plugin-react18": "0.1.6",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0",
+    "@repo/jest-presets": "0.0.0",
+    "@repo/logger": "0.0.0",
+    "@repo/shared": "0.0.0",
+    "@repo/scripts": "0.0.0"
+  },
+  "changesets": [
+    "cold-pillows-wink"
+  ]
+}

examples/express/package.json

@@ -30,7 +30,7 @@
     "@types/express": "^4.17.21",
     "@types/jest": "^29.5.12",
     "@types/morgan": "^1.9.9",
-    "@types/node": "^20.12.11",
+    "@types/node": "^20.12.12",
     "@types/supertest": "^6.0.2",
     "jest": "^29.7.0",
     "supertest": "^7.0.0",

examples/nextjs/package.json

@@ -19,14 +19,14 @@
     "nextjs-themes": "^3.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react18-loaders": "^1.0.0"
+    "react18-loaders": "^1.0.1"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.2.3",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "@types/node": "^20.12.11",
-    "@types/react": "^18.3.1",
+    "@types/node": "^20.12.12",
+    "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "typescript": "^5.4.5"
   }

examples/remix/package.json

@@ -10,24 +10,24 @@
     "lint": "eslint app/"
   },
   "dependencies": {
-    "@remix-run/node": "^2.9.1",
-    "@remix-run/react": "^2.9.1",
-    "@remix-run/serve": "^2.9.1",
-    "@remix-run/server-runtime": "^2.9.1",
+    "@remix-run/node": "^2.9.2",
+    "@remix-run/react": "^2.9.2",
+    "@remix-run/serve": "^2.9.2",
+    "@remix-run/server-runtime": "^2.9.2",
     "@repo/shared": "workspace:*",
     "@vercel/analytics": "^1.2.2",
     "@vercel/remix-entry-server": "^0.1.1",
     "esbuild-plugin-react18": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react18-loaders": "^1.0.0",
+    "react18-loaders": "^1.0.1",
     "react18-themes": "^3.1.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.9.1",
+    "@remix-run/dev": "^2.9.2",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "@types/react": "^18.3.1",
+    "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "typescript": "^5.4.5"
   },

examples/vite/package.json

@@ -15,13 +15,13 @@
     "esbuild-plugin-react18": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react18-loaders": "^1.0.0",
+    "react18-loaders": "^1.0.1",
     "react18-themes": "^3.1.0"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "@types/react": "^18.3.1",
+    "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.2.1",
     "typescript": "^5.4.5",

lib/CHANGELOG.md

@@ -1,5 +1,11 @@
 # esbuild-plugin-react18
 
+## 0.2.0-beta.0
+
+### Minor Changes
+
+- ecb89d5: Remove duplicate require("react/jsx-runtime")
+
 ## 0.1.6
 
 ### Patch Changes

lib/package.json

@@ -2,7 +2,7 @@
   "name": "esbuild-plugin-react18",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "0.1.6",
+  "version": "0.2.0-beta.0",
   "description": "Unlock the Potential of React Server Components! Harness the power of an ESBuild plugin designed for crafting libraries compatible with RSC (React18 Server Components).",
   "license": "MPL-2.0",
   "main": "./dist/index.js",
@@ -26,9 +26,9 @@
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "@types/node": "^20.12.11",
+    "@types/node": "^20.12.12",
     "@vitest/coverage-v8": "^1.6.0",
-    "esbuild": "^0.21.1",
+    "esbuild": "^0.21.2",
     "esbuild-plugin-react18-css": "^0.0.4",
     "tiny-glob": "^0.2.9",
     "tsup": "^8.0.2",

lib/src/index.ts

@@ -123,6 +123,12 @@ function replaceBuild(buildReplacePattern: ReplacePattern, result: BuildResult)
     );
 }
 
+const useClientRegExp = /^(["']use strict["'];)?["']use client["'];?/i;
+const useServerRegExp = /^(["']use strict["'];)?["']use server["'];?/i;
+const jsxImportRegExp = /(var |,)?[a-zA-Z_$][\w$]*=require\("react\/jsx-runtime"\);?/g;
+const regExp2replace2GetVar0 = /(var |,)/;
+const regExp2replace2GetVar = /[=]require\(['"]react\/jsx-runtime['"]\);?/;
+
 function onEndCallBack(result: BuildResult, options: React18PluginOptions, write?: boolean) {
   /** remove empty file imports */
   const emptyChunkFiles = result.outputFiles
@@ -139,20 +145,30 @@ function onEndCallBack(result: BuildResult, options: React18PluginOptions, write
     ?.filter(f => !f.path.endsWith(".map"))
     .forEach(f => {
       let txt = f.text;
-      txt = txt.replace(
-        /^(["']use strict["'];)?["']use client["'];?/i,
-        '"use client";\n"use strict";',
-      );
+      txt = txt.replace(useClientRegExp, '"use client";\n"use strict";');
 
       /** module level use server */
-      txt = txt.replace(
-        /^(["']use strict["'];)?["']use server["'];?/i,
-        '"use server";\n"use strict";',
-      );
+      txt = txt.replace(useServerRegExp, '"use server";\n"use strict";');
 
       /** remove empty file imports */
       txt = txt.replace(emptyChunkImportRegExp, "");
 
+      /** remove extra jsx-runtime imports */
+      if (f.path.endsWith(".js")) {
+        const jsxMatches = txt.match(jsxImportRegExp);
+        if (jsxMatches !== null && jsxMatches.length > 1) {
+          const importVarName = jsxMatches[0]
+            .replace(regExp2replace2GetVar, "")
+            .replace(regExp2replace2GetVar0, "");
+          for (let index = 1; index < jsxMatches.length; index++) {
+            txt = txt.replace(jsxMatches[index], "");
+            const v1 = jsxMatches[index]
+              .replace(regExp2replace2GetVar, "")
+              .replace(regExp2replace2GetVar0, "");
+            txt = txt.replace(new RegExp(`\\b${v1}\\b`, "g"), importVarName);
+          }
+        }
+      }
       f.contents = new TextEncoder().encode(txt);
     });
 

package.json

@@ -19,7 +19,7 @@
     "typedoc": "^0.25.13",
     "typedoc-plugin-extras": "^3.0.0",
     "typedoc-plugin-inline-sources": "^1.0.2",
-    "typedoc-plugin-mdn-links": "^3.1.24",
+    "typedoc-plugin-mdn-links": "^3.1.25",
     "typedoc-plugin-missing-exports": "^2.2.0",
     "typedoc-plugin-rename-defaults": "^0.7.0",
     "typedoc-plugin-zod": "^1.1.2"
@@ -29,6 +29,6 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@types/node": "^20.12.11"
+    "@types/node": "^20.12.12"
   }
 }

packages/logger/package.json

@@ -22,7 +22,7 @@
     "@repo/jest-presets": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.12.11",
+    "@types/node": "^20.12.12",
     "jest": "^29.7.0",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5"

packages/shared/package.json

@@ -22,8 +22,8 @@
     "@repo/jest-presets": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@testing-library/react": "^15.0.7",
-    "@types/node": "^20.12.11",
-    "@types/react": "^18.3.1",
+    "@types/node": "^20.12.12",
+    "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^1.6.0",
@@ -37,12 +37,22 @@
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.6.0"
   },
+  "peerDependencies": {
+    "@types/react": "16.8 - 19",
+    "next": "10 - 14",
+    "react": "16.8 - 19"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@mayank1513/fork-me": "^2.1.2",
     "@repo/scripts": "workspace:*",
     "nextjs-themes": "^3.1.1",
     "r18gs": "^1.0.2",
     "react-live": "^4.1.6",
-    "react18-loaders": "^1.0.0"
+    "react18-loaders": "^1.0.1"
   }
 }

packages/shared/src/server/logo/logo.module.scss

@@ -8,7 +8,7 @@
   overflow: hidden;
   box-shadow: 0px 2px 8px -1px #0000001a;
   padding: 2px;
-  width: 180px;
+  width: 215px;
   span {
     font-weight: 700;
     font-family: var(--font-mono);
@@ -61,9 +61,3 @@
     background-position: -100% 50%;
   }
 }
-
-@media screen and (min-width: 800px) {
-  .logo {
-    width: 210px;
-  }
-}