You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Esbuild Plugin React18 is a comprehensive library designed to unlock the full potential of React 18 server components. It provides customizable loading animation components and a fullscreen loader container, seamlessly integrating with React and Next.js.
5
+
<imgsrc="esbuild-react18.webp"title="Build Awesome Libraries using React Server Components and make your Mark!"style="width:100%"/>
6
6
7
-
✅ Fully Treeshakable (import from `esbuild-plugin-react18/client/loader-container`)
7
+
> Build Awesome Libraries using React Server Components and make your Mark!
8
8
9
-
✅ Fully TypeScript Supported
9
+
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.
10
10
11
-
✅ Leverages the power of React 18 Server components
11
+
## Why?
12
12
13
-
✅ Compatible with all React 18 build systems/tools/frameworks
13
+
✅ Unleash the full power of React18 Server components\
14
+
✅ Build libraries for all build systems/tools/frameworks supporting React18\
15
+
✅ Unleash the power of combining react client and server components in your libraries\
16
+
✅ Full TypeScript support out of the box\
17
+
✅ Supports CJS and ESM builds out of the box\
18
+
✅ Simple and tiny\
19
+
✅ Easy to use — just add the plugin, and you are good to go\
20
+
✅ All in one plugin for building react18 libraries with `tsup` or `esbuild`\
21
+
✅ add "use client" directive to indicate client component and the plugin will do the rest\
22
+
✅ Automatically ignore test files during build\
23
+
✅ Automatically remove `data-testid` attributes\
24
+
✅ Add `ignorePatterns` and `replacePatterns` to achieve much more control over your build\
25
+
✅ Fully Documented\
26
+
✅ Ready to use [GitHub repository template](https://github.com/mayank1513/turborepo-template.git) to create your next react18 library\
14
27
15
-
✅ Documented with [Typedoc](https://react18-tools.github.io/esbuild-plugin-react18) ([Docs](https://react18-tools.github.io/esbuild-plugin-react18))
28
+
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](https://mayank1513.medium.com/unleash-the-power-of-react-server-components-eb3fe7201231).
16
29
17
-
✅ Examples for Next.js, Vite, and Remix
30
+
### Build the libraries that
18
31
19
-
> <imgsrc=".https://github.com/react18-tools/esbuild-plugin-react18/blob/main/popper.png?raw=true"style="height: 20px"/> Please consider starring [this repository](https://github.com/react18-tools/esbuild-plugin-react18) and sharing it with your friends.
32
+
✅ are Fully Treeshakable (import from `esbuild-plugin-react18/client/loader-container`)
33
+
34
+
✅ provide Fully TypeScript Supported
35
+
36
+
✅ Leverage the full power of React 18 Server components
37
+
38
+
✅ are Compatible with all React 18 build systems/tools/frameworks
39
+
40
+
✅ are Documented with [Typedoc](https://react18-tools.github.io/esbuild-plugin-react18) ([Docs](https://react18-tools.github.io/esbuild-plugin-react18))
41
+
42
+
✅ provide Examples for Next.js, Vite, and Remix
43
+
44
+
> <imgsrc="https://github.com/react18-tools/turborepo-template/blob/main/popper.png?raw=true"style="height: 20px"/> Please consider starring [this repository](https://github.com/react18-tools/esbuild-plugin-react18) and sharing it with your friends.
45
+
46
+
## Compatibility
47
+
48
+
- JavaScript/TypeScript React libraries using `tsup` or other builders based on `esbuild`
49
+
50
+
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.
> 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.
42
73
43
-
You can import styles globally or within specific components.
Want a hands-on course for getting started with Turborepo? Check out [React and Next.js with TypeScript](https://www.udemy.com/course/react-and-next-js-with-typescript/?referralCode=7202184A1E57C3DCA8B2) and [The Game of Chess with Next.js, React, and TypeScript](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescrypt/?referralCode=851A28F10B254A8523FE)
78
155
79
-
`LoaderContainer` is a fullscreen component. You can add this component directly in your layout and then use `useLoader` hook to toggle its visibility.
- Fix: Avoid regexp creating havoc with CSS imports when no empty chunks found.
8
+
9
+
## 0.1.4
10
+
11
+
### Patch Changes
12
+
13
+
- Fix esm build for non minified cases
14
+
15
+
## 0.1.3
16
+
17
+
### Patch Changes
18
+
19
+
- Optimise and touch up
20
+
21
+
## 0.1.2
22
+
23
+
### Patch Changes
24
+
25
+
- Remove empty chunk import instead
26
+
27
+
## 0.1.1
28
+
29
+
### Patch Changes
30
+
31
+
- Fix ESM default chunks
32
+
33
+
## 0.1.0
34
+
35
+
### Minor Changes
36
+
37
+
- Support module level "use server" directive
38
+
39
+
## 0.0.7
40
+
41
+
### Patch Changes
42
+
43
+
- Add provenance
44
+
45
+
## 0.0.6
46
+
47
+
### Patch Changes
48
+
49
+
- Move repo
50
+
51
+
## 0.0.5
52
+
53
+
### Patch Changes
54
+
55
+
- Remove test build files from publish artefects
56
+
57
+
## 0.0.4
58
+
59
+
### Patch Changes
60
+
61
+
- Fix #8 initialise plugin without passing options
62
+
63
+
## 0.0.3
64
+
65
+
### Patch Changes
66
+
67
+
- e5d3a58: remove data-testid as last item in sourceReplacePatterns. This will reduce the onLoad conflicts significantly as this pattern matches all the js, ts, jsx and tsx files.
68
+
- Fix buildReplacePatterns to work on all esbuild setups
69
+
- e186209: Fix ignorePatterns with contentPatterns
0 commit comments