Skip to content

Commit 7816118

Browse files
mayank1513mayank1513
committed
Apply changesets and update CHANGELOG
1 parent 19f35e3 commit 7816118

File tree

4 files changed

+120
-63
lines changed

4 files changed

+120
-63
lines changed

‎.changeset/silver-books-draw.md‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎lib/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# esbuild-plugin-react18
22

3+
## 0.1.6
4+
5+
### Patch Changes
6+
7+
- 420d4ad: Add ESM build and minify CJS build
8+
39
## 0.1.5
410

511
### Patch Changes

‎lib/README.md‎

Lines changed: 113 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,53 @@
1-
# Esbuild Plugin React18 <img src=".https://github.com/react18-tools/esbuild-plugin-react18/blob/main/popper.png?raw=true" style="height: 40px"/>
1+
# Esbuild Plugin React18 <img src="https://github.com/react18-tools/turborepo-template/blob/main/popper.png?raw=true" style="height: 40px"/>
22

33
[![test](https://github.com/react18-tools/esbuild-plugin-react18/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/esbuild-plugin-react18/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/aa896ec14c570f3bb274/maintainability)](https://codeclimate.com/github/react18-tools/esbuild-plugin-react18/maintainability) [![codecov](https://codecov.io/gh/react18-tools/esbuild-plugin-react18/graph/badge.svg)](https://codecov.io/gh/react18-tools/esbuild-plugin-react18) [![Version](https://img.shields.io/npm/v/esbuild-plugin-react18.svg?colorB=green)](https://www.npmjs.com/package/esbuild-plugin-react18) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/esbuild-plugin-react18.svg)](https://www.npmjs.com/package/esbuild-plugin-react18) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/esbuild-plugin-react18) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
44

5-
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+
<img src="esbuild-react18.webp" title="Build Awesome Libraries using React Server Components and make your Mark!" style="width:100%"/>
66

7-
✅ Fully Treeshakable (import from `esbuild-plugin-react18/client/loader-container`)
7+
> Build Awesome Libraries using React Server Components and make your Mark!
88
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.
1010

11-
✅ Leverages the power of React 18 Server components
11+
## Why?
1212

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\
1427

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).
1629

17-
✅ Examples for Next.js, Vite, and Remix
30+
### Build the libraries that
1831

19-
> <img src=".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+
> <img src="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.
2051

2152
## Getting Started
2253

@@ -38,72 +69,97 @@ $ npm install esbuild-plugin-react18
3869
$ yarn add esbuild-plugin-react18
3970
```
4071

41-
### Import Styles
72+
> 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.
4273
43-
You can import styles globally or within specific components.
74+
## Use with `tsup`
4475

45-
```css
46-
/* globals.css */
47-
@import "esbuild-plugin-react18/dist";
48-
```
76+
```ts
77+
// tsup.config.ts or tsup.config.js
78+
import { defineConfig } from "tsup";
79+
import react18Plugin from "esbuild-react18-useclient";
4980

50-
```tsx
51-
// layout.tsx
52-
import "esbuild-plugin-react18/dist/index.css";
81+
const react18PluginOptions: React18PluginOptions = {}
82+
export default defineConfig(options => ({
83+
...
84+
esbuildPlugins:[react18Plugin(react18PluginOptions)]
85+
}));
5386
```
5487

55-
For selective imports:
88+
## Use with `esbuild`
5689

57-
```css
58-
/* globals.css */
59-
@import "esbuild-plugin-react18/dist/client"; /** required if you are using LoaderContainer */
60-
@import "esbuild-plugin-react18/dist/server/bars/bars1";
61-
```
90+
```ts
91+
import react18Plugin from "esbuild-react18-useclient";
6292

63-
### Usage
64-
65-
Using loaders is straightforward.
66-
67-
```tsx
68-
import { Bars1 } from "esbuild-plugin-react18/dist/server/bars/bars1";
93+
const react18PluginOptions: React18PluginOptions = {}
94+
esbuild.build({
95+
...
96+
plugins: [react18Plugin()],
97+
});
98+
```
6999

70-
export default function MyComponent() {
71-
return someCondition ? <Bars1 /> : <>Something else...</>;
100+
## Plugin Options
101+
102+
```ts
103+
interface React18PluginOptions {
104+
/** to not ignore test files */
105+
keepTests?: boolean;
106+
107+
/** to not remove `data-testid` attributes. If `keepTests` is true,
108+
* `data-testid` attributes will not be removed irrespective of
109+
* `keepTestIds` value.
110+
* This attribute is useful when setting `sourceReplacePatterns`
111+
*/
112+
keepTestIds?: boolean;
113+
114+
/**
115+
* regExp patterns to match file paths to be ignored.
116+
* If contentPatterns are provided, only the files at matching paths
117+
* containing one or more of the content patterns will be ignored
118+
*/
119+
ignorePatterns?: { pathPattern: RegExp; contentPatterns?: RegExp[] }[];
120+
121+
/**
122+
* regExp patterns to find and replace in source files before build
123+
*
124+
* Use with caution! Make sure the same file does not match multiple patterns
125+
* to avoid any unexpected results.
126+
*
127+
* Caution! - if you have not enabled `keepTests`, we are already using
128+
* `/.*\.(j|t)s(x)?$/` pattern to remove `
129+
130+
data-testid` attributes. If your
131+
* `sourceReplacePatterns` collide with these files, please set `keepTestIds`
132+
* to `true` and handle removing testids yourself.
133+
*/
134+
sourceReplacePatterns?: {
135+
pathPattern: RegExp;
136+
replaceParams: { pattern: RegExp; substitute: string }[];
137+
}[];
138+
139+
/**
140+
* regExp patterns to find and replace in build files after build
141+
* Use with caution! Make sure the same file does not match multiple patterns
142+
* to avoid any unexpected results.
143+
*/
144+
buildReplacePatterns?: {
145+
pathPattern: RegExp;
146+
replaceParams: { pattern: RegExp; substitute: string }[];
147+
}[];
72148
}
73149
```
74150

75-
For detailed API and options, refer to [the API documentation](https://react18-tools.github.io/esbuild-plugin-react18).
76-
77-
**Using LoaderContainer**
151+
### [🤩 Don't forget to star this repo!](https://github.com/react18-tools/esbuild-plugin-react18)
78152

79-
`LoaderContainer` is a fullscreen component. You can add this component directly in your layout and then use `useLoader` hook to toggle its visibility.
153+
[💖](https://github.com/react18-tools/esbuild-plugin-react18) [🌟](https://github.com/react18-tools/esbuild-plugin-react18)
154+
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)
80155

81-
```tsx
82-
// layout.tsx
83-
<LoaderContainer />
84-
...
85-
```
86-
87-
```tsx
88-
// some other page or component
89-
import { useLoader } from "esbuild-plugin-react18/dist/hooks";
90-
91-
export default MyComponent() {
92-
const { setLoading } = useLoader();
93-
useCallback(()=>{
94-
setLoading(true);
95-
...do some work
96-
setLoading(false);
97-
}, [])
98-
...
99-
}
100-
```
156+
![Alt](https://repobeats.axiom.co/api/embed/798673e15cf0802fe4e2470f946b64b551b5536d.svg "Repobeats analytics image")
101157

102158
## License
103159

104160
This library is licensed under the MPL-2.0 open-source license.
105161

106-
> <img src=".https://github.com/react18-tools/esbuild-plugin-react18/blob/main/popper.png?raw=true" style="height: 20px"/> Please consider enrolling in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsoring](https://github.com/sponsors/mayank1513) our work.
162+
> <img src="https://github.com/react18-tools/turborepo-template/blob/main/popper.png?raw=true" style="height: 20px"/> Please consider enrolling in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsoring](https://github.com/sponsors/mayank1513) our work.
107163
108164
<hr />
109165

‎lib/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "esbuild-plugin-react18",
33
"author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
44
"private": false,
5-
"version": "0.1.5",
5+
"version": "0.1.6",
66
"description": "Unlock the Potential of React Server Components! Harness the power of an ESBuild plugin designed for crafting libraries compatible with RSC (React18 Server Components).",
77
"license": "MPL-2.0",
88
"main": "./dist/index.js",

0 commit comments

Comments
 (0)