Merge pull request #4 from mayank1513/plugin

Plugin

Author: mayank1513

.github/workflows/test.yml

@@ -4,6 +4,8 @@ on:
   push:
     branches: [main]
   pull_request:
+  schedule:
+    - cron: "0 */3 * * *"
 
 jobs:
   test:
@@ -15,6 +17,8 @@ jobs:
           node-version: 18
       - run: npm i -g pnpm && pnpm i --ignore-scripts
         name: Install dependencies
+      - run: pnpm build --filter esbuild-plugin-react18-example
+        name: build example app to run tests
       - name: Run unit tests
         run: pnpm test
       - name: Upload coverage reports to Codecov

.gitignore

@@ -37,3 +37,6 @@ yarn-error.log*
 
 # lock files
 *lock*
+
+# build files
+dist

README.md

@@ -1,110 +1,121 @@
-# esbuild-plugin-react18 [![test](https://github.com/mayank1513/esbuild-plugin-react18/actions/workflows/test.yml/badge.svg)](https://github.com/mayank1513/esbuild-plugin-react18/actions/workflows/test.yml) [![codecov](https://codecov.io/gh/mayank1513/esbuild-plugin-react18/graph/badge.svg)](https://codecov.io/gh/mayank1513/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/dt/esbuild-plugin-react18.svg)](https://www.npmjs.com/package/esbuild-plugin-react18) [![Unit Tests](https://github.com/mayank1513/esbuild-plugin-react18/actions/workflows/test.yml/badge.svg)](https://github.com/mayank1513/esbuild-plugin-react18/actions/workflows/test.yml) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/esbuild-plugin-react18)
-
-- ✅ Fully Treeshakable (`import from esbuild-plugin-react18/client/component`)
-- ✅ Full TypeScript Support
-- ✅ Unleash the full power of React18 Server components
-- ✅ Works with all build systems/tools/frameworks for React18
-
-## Install
-
-```bash
-$ pnpm add esbuild-plugin-react18
-# or
-$ npm install esbuild-plugin-react18
-# or
-$ yarn add esbuild-plugin-react18
-```
+# esbuild-plugin-react18 [![test](https://github.com/mayank1513/esbuild-plugin-react18/actions/workflows/test.yml/badge.svg)](https://github.com/mayank1513/esbuild-plugin-react18/actions/workflows/test.yml) [![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/dt/esbuild-plugin-react18.svg)](https://www.npmjs.com/package/esbuild-plugin-react18) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/esbuild-plugin-react18)
 
+<img src="esbuild-react18.jpg" 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!
 
-## What's different from scaffolding turbo-repo by `create-turbo`
+This is an `esbuild` plugin for compiling libraries compatible with React 18 server and client component, Nextjs13, Remix, etc.
 
-The default scafold from `create-turbo` just gives some stubs for sharing packages across projects/apps within current monorepo.
+## Why?
 
-This template is targeted for sharing packages across organizations/repos publically or privately.
+✅ 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
+✅ 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](https://github.com/mayank1513/turborepo-template) to create your next react18 library
 
-Following features make it really cool and useful
+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 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).
 
-- Unit tests with `vitest`
-- Build setup with `tsup` and `esbuild-react18-useclient` Supports React Server components out of the box
-- **Automatic file generation**
-  - just run `yarn turbo gen` and follow the propts to auto generate your new component with test file and dependency linking
-  - follow best practices automatically
-- github actions/workflows to auto publish your package when version changes
+## Compatibility
 
-## Checklist
+- 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 smaller package. Explore more functionalities in the docs.
 
-- [ ] Set up `CodeCov`
-  - [ ] Visit codecov and setup your repo
-  - [ ] Create repository secrets for `CODECOV_TOKEN`
-- [ ] Add `NPM_AUTH_TOKEN` to repository secrets to automate publishing package
-  - [ ] login to your `npm` account and create automation token
-  - [ ] Create a new repository secrets `NPM_AUTH_TOKEN`
-- [ ] Update description in `packages/esbuild-plugin-react18/package.json`
-- [ ] Update Repo Stats by visiting and setting up [repobeats](https://repobeats.axiom.co/)
-- [ ] Create your library and update examples
-- [ ] Update README
-- [ ] Push your changes/Create PR and see your library being automatically tested and published
-- [ ] Optionally deploy your example(s) to Vercel.
-- [ ] You are most welcome to star this template, contribute, and/or sponsor the `terbo-repo-template` project or my other open-source work
-
-## What's inside?
-
-### Utilities
+## Install
 
-This Turborepo has some additional tools already setup for you:
+```bash
+yarn add --dev esbuild-react18-useclient
+```
 
-- [TypeScript](https://www.typescriptlang.org/) for static type checking
-- [ESLint](https://eslint.org/) for code linting
-- [Prettier](https://prettier.io) for code formatting
+or
 
-### Apps and Packages
+```bash
+pnpm add -D esbuild-react18-useclient
+```
 
-This Turborepo includes the following packages/examples:
+or
 
-- `nextjs`: a [Next.js](https://nextjs.org/) app
-- `vite`: a [Vite.js](https://vitest.dev) app
-- `fork-me`: a React component library shared by both `nextjs` and `vite` examples
-- `eslint-config-custom`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
-- `tsconfig`: `tsconfig.json`s used throughout the monorepo
+```bash
+npm install -D esbuild-react18-useclient
+```
 
-Each package/example is 100% [TypeScript](https://www.typescriptlang.org/).
+> If you are using `monorepo` or `workspaces` you can install this plugin to root using `-w` or to specific workspace using `--filter your-package` or `--scope your-package` for `pnpm` and `yarn` workspaces respectively.
 
-### Build
+## Simplatest use with `tsup`
 
-To build all apps and packages, run the following command:
+```javascript
+// tsup.config.ts or tsup.config.js
+import { defineConfig } from "tsup";
+import react18Plugin from "esbuild-react18-useclient";
 
+const react18PluginOptions: React18PluginOptions = {}
+export default defineConfig(options => ({
+    ...
+    esbuildPlugins:[react18Plugin(react18PluginOptions)]
+}));
 ```
-cd esbuild-plugin-react18
-pnpm build
-```
-
-### Develop
-
-To develop all apps and packages, run the following command:
 
+## Plugin Options
+
+```ts
+type React18PluginOptions = {
+	/** to not ignore tese files */
+	keepTests?: boolean;
+
+	/** to not remove `data-testid` attributes. If `keepTests` is true,
+	 * `data-testid` attributes will not be removed irrespective of
+	 * `keepTestIds` value.
+	 * This attribute is useful when setting `sourceReplacePatterns`
+	 */
+	keepTestIds?: boolean;
+
+	/**
+	 * regExp patterns to match file paths to be ignored.
+	 * If contentPatterns are provided, only the files at matching paths
+	 * containing one or more of the content patterns will be ignored
+	 */
+	ignorePatterns?: { pathPattern: RegExp; contentPatterns?: RegExp[] }[];
+
+	/**
+	 * regExp patterns to find and replace in source files before build
+	 *
+	 * Use with caution! Make sure same file do not match multiple patterns
+	 * to avoid any unexpected results.
+	 *
+	 * Caution! - if you have not enabled `keepTests`, we are already using
+	 * `/.*\.(j|t)s(x)?$/` pattern to remove `data-testid` attributes. If your
+	 * `sourceReplacePatterns` collide with these files, please set `keepTestIds`
+	 * to `true` and handle removing testsids yourself.
+	 */
+	sourceReplacePatterns?: {
+		pathPattern: RegExp;
+		replaceParams: { pattern: RegExp; substitute: string }[];
+	}[];
+
+	/**
+	 * regExp patterns to find and replace in build files after build
+	 * Use with caution! Make sure same file do not match multiple patterns
+	 * to avoid any unexpected results.
+	 */
+	buildReplacePatterns?: {
+		pathPattern: RegExp;
+		replaceParams: { pattern: RegExp; substitute: string }[];
+	}[];
+};
 ```
-cd esbuild-plugin-react18
-pnpm dev
-```
-
-## Useful Links
-
-Learn more about the power of Turborepo:
-
-- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
-- [Caching](https://turbo.build/repo/docs/core-concepts/caching)
-- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
-- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
-- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
-- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)
 
 ### 🤩 Don't forger to start this repo!
 
-Want handson 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)
-
-![Repo Stats](https://repobeats.axiom.co/api/embed/2ef1a24385037998386148afe5a98ded6006f410.svg "Repobeats analytics image")
+Want handson 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 TypeScrypt](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescrypt/?referralCode=851A28F10B254A8523FE)
 
 ## License
 

contributing.md

@@ -1,4 +1,26 @@
-# Contributing to fork-me
+# Contributing to esbuild-plugin-react18
+
+## What's inside?
+
+### Utilities
+
+This Turborepo has some additional tools already setup for you:
+
+- [TypeScript](https://www.typescriptlang.org/) for static type checking
+- [ESLint](https://eslint.org/) for code linting
+- [Prettier](https://prettier.io) for code formatting
+
+### Apps and Packages
+
+This Turborepo includes the following packages/examples:
+
+- `nextjs`: a [Next.js](https://nextjs.org/) app
+- `vite`: a [Vite.js](https://vitest.dev) app
+- `fork-me`: a React component library shared by both `nextjs` and `vite` examples
+- `eslint-config-custom`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
+- `tsconfig`: `tsconfig.json`s used throughout the monorepo
+
+Each package/example is 100% [TypeScript](https://www.typescriptlang.org/).
 
 ## Automatic file generation
 
@@ -10,7 +32,7 @@
 To build all apps and packages, run the following command:
 
 ```bash
-cd esbuild-plugin-react18
+# cd esbuild-plugin-react18
 pnpm build
 ```
 
@@ -19,7 +41,7 @@ pnpm build
 To develop all apps and packages, run the following command:
 
 ```bash
-cd esbuild-plugin-react18
+# cd esbuild-plugin-react18
 pnpm dev
 ```
 
@@ -28,7 +50,7 @@ pnpm dev
 To run unit tests, run the following command:
 
 ```bash
-cd esbuild-plugin-react18
+# cd esbuild-plugin-react18
 pnpm test
 ```
 
@@ -37,13 +59,14 @@ pnpm test
 Before creating PR make sure lint is passing and also run formatter to properly format the code.
 
 ```bash
-cd esbuild-plugin-react18
+# cd esbuild-plugin-react18
 pnpm lint
 ```
 
 and
 
 ```bash
+# cd esbuild-plugin-react18
 pnpm format
 ```
 

esbuild-react18.jpg

@@ -1,7 +1,7 @@
 {
 	"name": "esbuild-plugin-react18-example",
 	"author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
-	"private": false,
+	"private": true,
 	"version": "0.0.0",
 	"description": "An intuitive React.js fork me ribbon component for promoting open source project forks.",
 	"main": "./index.ts",
@@ -33,6 +33,7 @@
 		"esbuild-plugin-ignoretests": "^0.0.6",
 		"esbuild-plugin-removetestid": "^0.0.3",
 		"esbuild-react18-useclient": "^1.0.5",
+		"esbuild-plugin-react18": "workspace:*",
 		"eslint-config-custom": "workspace:*",
 		"jsdom": "^22.1.0",
 		"octokit": "^3.1.0",

packages/esbuild-plugin-react18-example/package.json

@@ -1,3 +1,4 @@
+"use client";
 /**
  * need to export server components and client components from separate files as
  * directive on top of the file from which component is imported takes effect.

packages/esbuild-plugin-react18-example/src/client/index.ts

@@ -46,17 +46,20 @@ fs.writeFileSync(
 	JSON.stringify(packageJson, null, 2),
 );
 
-fs.copyFileSync(path.resolve(__dirname, "..", "..", "README.md"), path.resolve(__dirname, "dist", "README.md"));
+fs.copyFileSync(
+	path.resolve(__dirname, "..", "..", "README.md"),
+	path.resolve(__dirname, "dist", "README.md"),
+);
 
-const dirs = [path.resolve(__dirname, "dist")];
+// const dirs = [path.resolve(__dirname, "dist")];
 
-while (dirs.length) {
-	const dir = dirs.shift();
-	fs.readdirSync(dir).forEach(f => {
-		const f1 = path.resolve(dir, f);
-		if (f.includes(".test.")) fs.unlink(f1, () => {});
-		else if (fs.lstatSync(f1).isDirectory()) {
-			dirs.push(f1);
-		}
-	});
-}
+// while (dirs.length) {
+// 	const dir = dirs.shift();
+// 	fs.readdirSync(dir).forEach(f => {
+// 		const f1 = path.resolve(dir, f);
+// 		if (f.includes(".test.")) fs.unlink(f1, () => {});
+// 		else if (fs.lstatSync(f1).isDirectory()) {
+// 			dirs.push(f1);
+// 		}
+// 	});
+// }

packages/esbuild-plugin-react18-example/touchup.js

@@ -1,8 +1,10 @@
 {
 	"extends": "tsconfig/react-library.json",
 	"compilerOptions": {
-		"outDir": "dist"
+		"outDir": "dist",
+		"emitDeclarationOnly": true,
+		"sourceMap": false
 	},
 	"include": ["src"],
-	"exclude": ["dist", "build", "node_modules"]
+	"exclude": ["dist", "build", "node_modules", "**/*.test.*", "**/*.spec.*"]
 }

packages/esbuild-plugin-react18-example/tsconfig-build.json

@@ -1,7 +1,5 @@
 import { defineConfig } from "tsup";
-import reactUseClientPlugin from "esbuild-react18-useclient";
-import ignoretestsPlugin from "esbuild-plugin-ignoretests";
-import removeTestidPlugin from "esbuild-plugin-removetestid";
+import react18Plugin from "esbuild-plugin-react18";
 
 export default defineConfig(options => ({
 	format: ["cjs", "esm"],
@@ -10,6 +8,6 @@ export default defineConfig(options => ({
 	clean: true,
 	bundle: true,
 	minify: !options.watch,
-	esbuildPlugins: [reactUseClientPlugin, ignoretestsPlugin(), removeTestidPlugin()],
+	esbuildPlugins: [react18Plugin()],
 	legacyOutput: true,
 }));