@@ -14,6 +14,7 @@ This is an `esbuild` plugin for compiling libraries compatible with React 18 ser
✅ Build libraries for all build systems/tools/frameworks supporting React18\
✅ Unleash the power of combining react client and server components in your libraries\
✅ Full TypeScript support out of the box\
+✅ Supports CJS and ESM builds out of the box
✅ Simple and tiny\
✅ Easy to use — just add the plugin, and you are good to go\
✅ All in one plugin for building react18 libraries with `tsup` or `esbuild`\
diff --git a/esbuild-plugin-react18/src/index.ts b/esbuild-plugin-react18/src/index.ts
index 50559041..152662e5 100644
--- a/esbuild-plugin-react18/src/index.ts
+++ b/esbuild-plugin-react18/src/index.ts
@@ -119,6 +119,7 @@ function onEndCallBack(result: BuildResult, options: React18PluginOptions, write
?.filter(f => f.text.trim() === "" && f.path.includes("chunk"))
.map(f => f.path.split(path.sep).pop());
+ const emptyChunkImportRegExp = new RegExp(`import"[^"]*(${emptyChunkFiles?.join("|")})";`, "g");
/** fix use client and use server*/
result.outputFiles
?.filter(f => !f.path.endsWith(".map"))
@@ -136,9 +137,7 @@ function onEndCallBack(result: BuildResult, options: React18PluginOptions, write
);
/** remove empty file imports */
- emptyChunkFiles?.forEach(chunkFile => {
- txt = txt.replace(new RegExp(`import"[^"]*${chunkFile}";`, "g"), "");
- });
+ txt = txt.replace(emptyChunkImportRegExp, "");
f.contents = new TextEncoder().encode(txt);
});
diff --git a/examples/nextjs/app/layout.tsx b/examples/nextjs/app/layout.tsx
index 4f8ad22b..d592fe6e 100644
--- a/examples/nextjs/app/layout.tsx
+++ b/examples/nextjs/app/layout.tsx
@@ -1,4 +1,4 @@
-import { ForkMe } from "esbuild-plugin-react18-example/server";
+import { ForkMe } from "esbuild-plugin-react18-example/dist/server";
import "./globals.css";
import { ThemeSwitcher } from "nextjs-themes";
import { ServerSideWrapper } from "nextjs-themes/server/nextjs";
diff --git a/packages/esbuild-plugin-react18-example/package.json b/packages/esbuild-plugin-react18-example/package.json
index dc15de18..764b26d5 100644
--- a/packages/esbuild-plugin-react18-example/package.json
+++ b/packages/esbuild-plugin-react18-example/package.json
@@ -4,8 +4,9 @@
"private": true,
"version": "0.0.0",
"description": "An intuitive React.js fork me ribbon component for promoting open source project forks.",
- "main": "./index.ts",
- "types": "./index.ts",
+ "main": "./dist/index.js",
+ "types": "./dist/index.d.ts",
+ "module": "./dist/esm/index.mjs",
"repository": {
"type": "git",
"url": "git+https://github.com/mayank1513/turborepo-template.git"
@@ -24,7 +25,6 @@
},
"devDependencies": {
"@testing-library/react": "^15.0.2",
- "@turbo/gen": "^1.13.2",
"@types/node": "^20.12.7",
"@types/react": "^18.2.79",
"@types/react-dom": "^18.2.25",
diff --git a/packages/esbuild-plugin-react18-example/server.ts b/packages/esbuild-plugin-react18-example/server.ts
deleted file mode 100644
index dcc241ce..00000000
--- a/packages/esbuild-plugin-react18-example/server.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-/** to make sure import statements remain same for monorepo setup and install via npm */
-
-export * from "./src/server";
diff --git a/packages/esbuild-plugin-react18-example/src/index.ts b/packages/esbuild-plugin-react18-example/src/index.ts
deleted file mode 100644
index 013d21b0..00000000
--- a/packages/esbuild-plugin-react18-example/src/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-"use client";
-// client component exports
-export * from "./client";
diff --git a/packages/esbuild-plugin-react18-example/turbo/generators/config.ts b/packages/esbuild-plugin-react18-example/turbo/generators/config.ts
deleted file mode 100644
index 8e77d9cb..00000000
--- a/packages/esbuild-plugin-react18-example/turbo/generators/config.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import fs from "node:fs";
-import path from "node:path";
-import type { PlopTypes } from "@turbo/gen";
-
-export default function generator(plop: PlopTypes.NodePlopAPI): void {
- // A simple generator to add a new React component to the internal UI library
- plop.setGenerator("react-component", {
- description: "Adds a new react component",
- prompts: [
- {
- type: "input",
- name: "name",
- message: "What is the name of the component?",
- },
- {
- type: "confirm",
- name: "isClient",
- message: 'Is this a client component? (Should we add "use client" directive?)',
- },
- {
- type: "input",
- name: "description",
- message: "Describe your component. (This will be added as js-doc comment.)",
- },
- ],
- actions: data => {
- let root = data?.isClient ? "src/client/" : "src/server/";
- const _actions: PlopTypes.ActionType[] = [];
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call -- intentional
- if (data?.name.includes("/")) {
- const name = data.name as string;
- const lastSlashInd = name.lastIndexOf("/") || name.lastIndexOf("\\");
- data.name = name.slice(lastSlashInd + 1);
- const dir = name.slice(0, lastSlashInd).split(/\/|\\/);
- const r1 = root.split(/\/|\\/);
- for (let i = 1; i <= dir.length; i++) {
- const p = path.resolve(process.cwd(), "..", "..", ...r1, ...dir.slice(0, i), "index.ts");
- if (!fs.existsSync(p)) {
- const content = `${data.isClient ? '"use client";\n' : ""}// ${dir
- .slice(0, i)
- .join("/")} component exports\n`;
- _actions.push({
- type: "add",
- path: `${root + dir.slice(0, i).join("/")}/index.ts`,
- template: content,
- });
- _actions.push({
- type: "append",
- pattern: /(?