-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
042d0c0
commit 7810ccb
Showing
4 changed files
with
93 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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, ""), | ||
}); | ||
} | ||
}); | ||
}); | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
} |