Esbuild Plugin React18 ![](https://github.com/react18-tools/turborepo-template/blob/main/popper.png?raw=true)
![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)
Build Awesome Libraries using React Server Components and make your Mark!
Esbuild Plugin React18 is an esbuild
plugin designed to help library developers unlock the full potential of React 18 server components. It facilitates compiling libraries compatible with React 18 server and client components, Next.js 13, Remix, etc., seamlessly integrating with React and Next.js.
Why?
✅ Unleash the full power of React18 Server components
✅ 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
✅ add "use client" directive to indicate client component and the plugin will do the rest
✅ Automatically ignore test files during build
✅ Automatically remove data-testid
attributes
✅ Add ignorePatterns
and replacePatterns
to achieve much more control over your build
✅ Fully Documented
✅ Ready to use GitHub repository template to create your next react18 library\
The introduction of React server components in React 18 has unlocked immense possibilities. However, library authors are not yet able to fully capitalize on this potential. Many libraries, like chakra-ui
, simply add “use client” for each component. However, much more can be unleashed when we can use both server and client components to build libraries. Also, check out this blog.
Build the libraries that
✅ are Fully Treeshakable (import from esbuild-plugin-react18/client/loader-container
)
✅ provide Fully TypeScript Supported
✅ Leverage the full power of React 18 Server components
✅ are Compatible with all React 18 build systems/tools/frameworks
✅ are Documented with Typedoc (Docs)
✅ provide Examples for Next.js, Vite, and Remix
Please consider starring this repository and sharing it with your friends.
Compatibility
- JavaScript/TypeScript React libraries using
tsup
or other builders based on esbuild
This plugin seamlessly integrates with tsup
and any 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 (in your source code). Additionally, test files will be removed automatically from the build resulting in a smaller package. Explore more functionalities in the docs.
Getting Started
Installation
$ pnpm add esbuild-plugin-react18
or
$ npm install esbuild-plugin-react18
or
$ yarn add esbuild-plugin-react18
If you are using monorepo
or workspaces
, you can install this plugin to the root using -w
or to a specific workspace using --filter your-package
or --scope your-package
for pnpm
or yarn
workspaces, respectively.
Use with tsup
import { defineConfig } from "tsup";
import react18Plugin from "esbuild-react18-useclient";
const react18PluginOptions: React18PluginOptions = {}
export default defineConfig(options => ({
...
esbuildPlugins:[react18Plugin(react18PluginOptions)]
}));
Use with esbuild
import react18Plugin from "esbuild-react18-useclient";
const react18PluginOptions: React18PluginOptions = {}
esbuild.build({
...
plugins: [react18Plugin()],
});
Plugin Options
interface React18PluginOptions {
keepTests?: boolean;
keepTestIds?: boolean;
ignorePatterns?: { pathPattern: RegExp; contentPatterns?: RegExp[] }[];
sourceReplacePatterns?: {
pathPattern: RegExp;
replaceParams: { pattern: RegExp; substitute: string }[];
}[];
buildReplacePatterns?: {
pathPattern: RegExp;
replaceParams: { pattern: RegExp; substitute: string }[];
}[];
}
💖 🌟
Want a hands-on course for getting started with Turborepo? Check out React and Next.js with TypeScript and The Game of Chess with Next.js, React, and TypeScript
![Repobeats analytics image Alt](https://repobeats.axiom.co/api/embed/798673e15cf0802fe4e2470f946b64b551b5536d.svg)
License
This library is licensed under the MPL-2.0 open-source license.
Please consider enrolling in our courses or sponsoring our work.
with 💖 by Mayank Kumar Chaudhari