{"id":20548478,"url":"https://github.com/react18-tools/esbuild-react18-useclient","last_synced_at":"2025-04-14T10:52:57.548Z","repository":{"id":185092978,"uuid":"672860366","full_name":"react18-tools/esbuild-react18-useclient","owner":"react18-tools","description":"esbuild plugin for compiling libraries compatible with React 18 server and client component, Nextjs13, Remix, etc.  Please use Turborepo Template -\u003e https://github.com/react18-tools/turborepo-template","archived":false,"fork":false,"pushed_at":"2025-02-04T07:41:31.000Z","size":71,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T19:50:23.817Z","etag":null,"topics":["esbuild","esbuild-plugin","javascript","nextjs","nodejs","react-libraries","react-server-components","react18","reactjs","tsup","tsup-plugin","typescript"],"latest_commit_sha":null,"homepage":"https://github.com/react18-tools/turborepo-template","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react18-tools.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-07-31T10:30:17.000Z","updated_at":"2025-02-18T18:24:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"f6b48d41-566b-44a9-b261-23a5ae64f1e4","html_url":"https://github.com/react18-tools/esbuild-react18-useclient","commit_stats":null,"previous_names":["mayank1513/esbuild-react18-useclient"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Fesbuild-react18-useclient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Fesbuild-react18-useclient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Fesbuild-react18-useclient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Fesbuild-react18-useclient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react18-tools","download_url":"https://codeload.github.com/react18-tools/esbuild-react18-useclient/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248868807,"owners_count":21174755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["esbuild","esbuild-plugin","javascript","nextjs","nodejs","react-libraries","react-server-components","react18","reactjs","tsup","tsup-plugin","typescript"],"created_at":"2024-11-16T02:13:38.890Z","updated_at":"2025-04-14T10:52:57.542Z","avatar_url":"https://github.com/react18-tools.png","language":"TypeScript","readme":"# esbuild-react18-useclient [![Version](https://img.shields.io/npm/v/esbuild-react18-useclient.svg?colorB=green)](https://www.npmjs.com/package/esbuild-react18-useclient) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/esbuild-react18-useclient.svg)](https://www.npmjs.com/package/esbuild-react18-useclient) [![Publish to npm and GitHub](https://github.com/mayank1513/esbuild-react18-useclient/actions/workflows/publish-to-npm-on-new-release.yml/badge.svg)](https://github.com/mayank1513/esbuild-react18-useclient/actions/workflows/publish-to-npm-on-new-release.yml)\n\n\u003e This package is deprecated in favor of [esbuild-plugin-react18](https://github.com/mayank1513/esbuild-plugin-react18)\n\u003e Please switch to [esbuild-plugin-react18](https://github.com/mayank1513/esbuild-plugin-react18), which also offers additional options and more control over your build output.\n\n\u003cimg src=\"https://github.com/mayank1513/esbuild-react18-useclient/blob/main/esbuild-react18.jpg?raw=true\" title=\"Build Awesome Libraries using React Server Components and make your Mark!\" style=\"width:100%\"/\u003e\n\n\u003e Build Awesome Libraries using React Server Components and make your Mark!\n\nThis is an `esbuild` plugin for compiling libraries compatible with React 18 server and client component, Nextjs13, Remix, etc.\n\n## Why?\n\n✅ Unleash the power of combining react client and server components in your libraries\n✅ Full TypeScript support out of the box\n✅ Simple and tiny\n✅ Easy to use — just add the plugin, and you are good to go\n\nIntroduction 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).\n\n## Example\n\nCheckout https://github.com/mayank1513/nextjs-themes\n\n## Compatibility\n\n- JavaScript/TypeScript React libraries using `tsup` or other builders based on `esbuild`\n\nThis 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).\n\n## Add dependencies:\n\n```bash\nyarn add --dev esbuild-react18-useclient\n```\n\nor\n\n```bash\npnpm add -D esbuild-react18-useclient\n```\n\nor\n\n```bash\nnpm install -D esbuild-react18-useclient\n```\n\n\u003e 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.\n\n## Use with `tsup`\n\n```javascript\n// tsup.config.ts or tsup.config.js\nimport { defineConfig } from \"tsup\";\nimport reactUseClient from \"esbuild-react18-useclient\";\n\nexport default defineConfig(options =\u003e ({\n    ...\n    esbuildPlugins:[reactUseClient]\n}));\n```\n\n## License\n\nLicensed as MIT open source.\n\n\u003chr /\u003e\n\n\u003cp align=\"center\" style=\"text-align:center\"\u003ewith 💖 by \u003ca href=\"https://mayank-chaudhari.vercel.app\" target=\"_blank\"\u003eMayank Kumar Chaudhari\u003c/a\u003e\u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact18-tools%2Fesbuild-react18-useclient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact18-tools%2Fesbuild-react18-useclient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact18-tools%2Fesbuild-react18-useclient/lists"}