npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

esbuild-plugin-react18

v0.2.3

Published

Unlock the Potential of React Server Components! Harness the power of an ESBuild plugin designed for crafting libraries compatible with RSC (React18 Server Components).

Downloads

4,556

Readme

Esbuild Plugin React18

test Maintainability codecov Version Downloads npm bundle size Gitpod ready-to-code

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

// 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)]
}));

Use with esbuild

import react18Plugin from "esbuild-react18-useclient";

const react18PluginOptions: React18PluginOptions = {}
esbuild.build({
	...
	plugins: [react18Plugin()],
});

Plugin Options

interface React18PluginOptions {
  /** to not ignore test 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 the same file does 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 testids 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 the same file does not match multiple patterns
   * to avoid any unexpected results.
   */
  buildReplacePatterns?: {
    pathPattern: RegExp;
    replaceParams: { pattern: RegExp; substitute: string }[];
  }[];
}

🤩 Don't forget to star this repo!

💖 🌟 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

Alt

License

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

Please consider enrolling in our courses or sponsoring our work.