Merge pull request #21 from react18-tools/beta

Beta

Author: mayank1513

.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"
+  ]
+}

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",

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);
     });
 

packages/shared/package.json

@@ -37,6 +37,16 @@
     "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:*",

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;
-  }
-}