Skip to content

Commit

Permalink
add plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
mayank1513 committed Jul 31, 2023
1 parent 042d0c0 commit 7810ccb
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 1 deletion.
50 changes: 49 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,50 @@
# esbuild-react18-useclient
esbuild plugin for compiling libraries compatible with React 18 server and client component, Nextjs13, Remix, etc.

<img src="./esbuild-react18-useclient\esbuild-react18.jpg?raw=true" title="Build Awesome Libraries using React Server Components and make your Mark!" style="width:100%"/>

> Build Awesome Libraries using React Server Components and make your Mark!
This is an `esbuild` plugin for compiling libraries compatible with React 18 server and client component, Nextjs13, Remix, etc.

Introduction of React server components in React 18 has unlocked immense possibilities. However, library authors are not yet able to fully encash upon this potential. Many libraries like `chakra-ui`, simply add "use client" for each component. However, much more can be unlashed when we can use both server and client components to build libraries.

This plugin seamlessly integrates with `tsup` and other builders based on `esbuild`. With this you can have both server and client components in your library and the plugin will take care of the rest. All you need to do is add this plugin and add `"use client";` on top of client components.

## Add dependencies:

```bash
yarn add --dev esbuild-react18-useclient
```

or

```bash
pnpm add -D esbuild-react18-useclient
```

or

```bash
npm install -D esbuild-react18-useclient
```



## Use with `tsup`

```javascript
// tsup.config.ts or tsup.config.js
import { defineConfig } from "tsup";
import reactUseClient from "esbuild-react18-useclient";

export default defineConfig(options => ({
...
esbuildPlugins:[reactUseClient]
}));
```



## License

Licensed as MIT open source.
Binary file added esbuild-react18.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
const rxp = /['"]use client['"]\s?;/i;

module.exports = {
name: "esbuild-react18-useclient",
setup(build) {
build.onEnd((result) => {
result.outputFiles
?.filter((f) => !f.path.endsWith(".map"))
.forEach((f) => {
const txt = f.text;
if (txt.match(rxp)) {
Object.defineProperty(f, "text", {
value: '"use client";\n' + txt.replace(rxp, ""),
});
}
});
});
},
};
25 changes: 25 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"name": "esbuild-react18-useclient",
"version": "1.0.0",
"description": "esbuild plugin for compiling libraries compatible with React 18 server and client component, Nextjs13, Remix, etc.",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/mayank1513/esbuild-react18-useclient.git"
},
"keywords": [
"react",
"nextjs",
"react18",
"react-server-components",
"react-client-components",
"use client",
"rsc compatible"
],
"author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
"license": "MIT",
"bugs": {
"url": "https://github.com/mayank1513/esbuild-react18-useclient/issues"
},
"homepage": "https://github.com/mayank1513/esbuild-react18-useclient#readme"
}

0 comments on commit 7810ccb

Please sign in to comment.