From 4e66608ce7a70ed9469320da26ab2e3dac41823b Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 27 Apr 2024 13:07:18 +0530 Subject: [PATCH 1/4] optimise --- esbuild-plugin-react18/src/index.ts | 5 ++--- turbo.json | 7 +++++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/esbuild-plugin-react18/src/index.ts b/esbuild-plugin-react18/src/index.ts index 50559041..152662e5 100644 --- a/esbuild-plugin-react18/src/index.ts +++ b/esbuild-plugin-react18/src/index.ts @@ -119,6 +119,7 @@ function onEndCallBack(result: BuildResult, options: React18PluginOptions, write ?.filter(f => f.text.trim() === "" && f.path.includes("chunk")) .map(f => f.path.split(path.sep).pop()); + const emptyChunkImportRegExp = new RegExp(`import"[^"]*(${emptyChunkFiles?.join("|")})";`, "g"); /** fix use client and use server*/ result.outputFiles ?.filter(f => !f.path.endsWith(".map")) @@ -136,9 +137,7 @@ function onEndCallBack(result: BuildResult, options: React18PluginOptions, write ); /** remove empty file imports */ - emptyChunkFiles?.forEach(chunkFile => { - txt = txt.replace(new RegExp(`import"[^"]*${chunkFile}";`, "g"), ""); - }); + txt = txt.replace(emptyChunkImportRegExp, ""); f.contents = new TextEncoder().encode(txt); }); diff --git a/turbo.json b/turbo.json index 3bada2e3..7e45ad86 100644 --- a/turbo.json +++ b/turbo.json @@ -7,10 +7,13 @@ "dependsOn": ["^build"] }, "lint": {}, - "test": {}, + "test": { + "dependsOn": ["^build"] + }, "dev": { "cache": false, - "persistent": true + "persistent": true, + "dependsOn": ["^build"] } } } From 81ee74d2f287ea63c1021b19f64b97eba47a818a Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 27 Apr 2024 13:17:04 +0530 Subject: [PATCH 2/4] Update readme --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 4131d928..4247b440 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # 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) [![Maintainability](https://api.codeclimate.com/v1/badges/c5e44df548df962f3df5/maintainability)](https://codeclimate.com/github/mayank1513/esbuild-plugin-react18/maintainability) [![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) +[![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) [![Maintainability](https://api.codeclimate.com/v1/badges/c5e44df548df962f3df5/maintainability)](https://codeclimate.com/github/mayank1513/esbuild-plugin-react18/maintainability) [![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) @@ -14,6 +14,7 @@ This is an `esbuild` plugin for compiling libraries compatible with React 18 ser ✅ 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`\ From 1e541a273387d1d5c897791fcbc138a21c5b32f2 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 27 Apr 2024 13:17:19 +0530 Subject: [PATCH 3/4] Remove turbo gen --- .../package.json | 1 - .../turbo/generators/config.ts | 84 ------------------- .../turbo/generators/templates/component.hbs | 18 ---- .../generators/templates/component.test.hbs | 12 --- 4 files changed, 115 deletions(-) delete mode 100644 packages/esbuild-plugin-react18-example/turbo/generators/config.ts delete mode 100644 packages/esbuild-plugin-react18-example/turbo/generators/templates/component.hbs delete mode 100644 packages/esbuild-plugin-react18-example/turbo/generators/templates/component.test.hbs diff --git a/packages/esbuild-plugin-react18-example/package.json b/packages/esbuild-plugin-react18-example/package.json index dc15de18..86a1f51f 100644 --- a/packages/esbuild-plugin-react18-example/package.json +++ b/packages/esbuild-plugin-react18-example/package.json @@ -24,7 +24,6 @@ }, "devDependencies": { "@testing-library/react": "^15.0.2", - "@turbo/gen": "^1.13.2", "@types/node": "^20.12.7", "@types/react": "^18.2.79", "@types/react-dom": "^18.2.25", diff --git a/packages/esbuild-plugin-react18-example/turbo/generators/config.ts b/packages/esbuild-plugin-react18-example/turbo/generators/config.ts deleted file mode 100644 index 8e77d9cb..00000000 --- a/packages/esbuild-plugin-react18-example/turbo/generators/config.ts +++ /dev/null @@ -1,84 +0,0 @@ -import fs from "node:fs"; -import path from "node:path"; -import type { PlopTypes } from "@turbo/gen"; - -export default function generator(plop: PlopTypes.NodePlopAPI): void { - // A simple generator to add a new React component to the internal UI library - plop.setGenerator("react-component", { - description: "Adds a new react component", - prompts: [ - { - type: "input", - name: "name", - message: "What is the name of the component?", - }, - { - type: "confirm", - name: "isClient", - message: 'Is this a client component? (Should we add "use client" directive?)', - }, - { - type: "input", - name: "description", - message: "Describe your component. (This will be added as js-doc comment.)", - }, - ], - actions: data => { - let root = data?.isClient ? "src/client/" : "src/server/"; - const _actions: PlopTypes.ActionType[] = []; - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call -- intentional - if (data?.name.includes("/")) { - const name = data.name as string; - const lastSlashInd = name.lastIndexOf("/") || name.lastIndexOf("\\"); - data.name = name.slice(lastSlashInd + 1); - const dir = name.slice(0, lastSlashInd).split(/\/|\\/); - const r1 = root.split(/\/|\\/); - for (let i = 1; i <= dir.length; i++) { - const p = path.resolve(process.cwd(), "..", "..", ...r1, ...dir.slice(0, i), "index.ts"); - if (!fs.existsSync(p)) { - const content = `${data.isClient ? '"use client";\n' : ""}// ${dir - .slice(0, i) - .join("/")} component exports\n`; - _actions.push({ - type: "add", - path: `${root + dir.slice(0, i).join("/")}/index.ts`, - template: content, - }); - _actions.push({ - type: "append", - pattern: /(? component exports)/g, - path: `${root + (i === 1 ? "" : `${dir.slice(0, i - 1).join("/")}/`)}index.ts`, - template: `export * from "./${dir[i - 1]}"`, - }); - } - } - root = `${root + dir.join("/")}/`; - } - return _actions.concat([ - { - type: "add", - path: `${root}{{kebabCase name}}/index.ts`, - template: `${ - data?.isClient ? '"use client";\n\n' : "" - }export * from "./{{kebabCase name}}";\n`, - }, - { - type: "add", - path: `${root}{{kebabCase name}}/{{kebabCase name}}.tsx`, - templateFile: "templates/component.hbs", - }, - { - type: "add", - path: `${root}{{kebabCase name}}/{{kebabCase name}}.test.tsx`, - templateFile: "templates/component.test.hbs", - }, - { - type: "append", - path: `${root}index.ts`, - pattern: /(? component exports)/g, - template: 'export * from "./{{kebabCase name}}";', - }, - ]); - }, - }); -} diff --git a/packages/esbuild-plugin-react18-example/turbo/generators/templates/component.hbs b/packages/esbuild-plugin-react18-example/turbo/generators/templates/component.hbs deleted file mode 100644 index 7005671e..00000000 --- a/packages/esbuild-plugin-react18-example/turbo/generators/templates/component.hbs +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from "react"; - -interface {{ pascalCase name }}Props { - children?: React.ReactNode; -} - -/** - * # {{ pascalCase name }} - * {{ description }} - */ -export function {{ pascalCase name }}({ children }: {{ pascalCase name }}Props) { - return ( -
-

{{ name }}

- {children} -
- ); -} diff --git a/packages/esbuild-plugin-react18-example/turbo/generators/templates/component.test.hbs b/packages/esbuild-plugin-react18-example/turbo/generators/templates/component.test.hbs deleted file mode 100644 index f08ba2b0..00000000 --- a/packages/esbuild-plugin-react18-example/turbo/generators/templates/component.test.hbs +++ /dev/null @@ -1,12 +0,0 @@ -import { cleanup, render, screen } from "@testing-library/react"; -import { afterEach, describe, test } from "vitest"; -import { {{ pascalCase name }} } from "./{{ kebabCase name }}"; - -describe.concurrent("{{ kebabCase name }}", () => { - afterEach(cleanup); - - test("check if h1 heading exists", ({ expect }) => { - render(<{{ pascalCase name }} />); - expect(screen.getByTestId("{{ kebabCase name }}-h1").textContent).toBe("{{ name }}"); - }); -}); From f4ef242067e4e37f0ccb23fcdd09231d6b899844 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 27 Apr 2024 13:21:37 +0530 Subject: [PATCH 4/4] Fix pakcage example --- examples/nextjs/app/layout.tsx | 2 +- packages/esbuild-plugin-react18-example/package.json | 5 +++-- packages/esbuild-plugin-react18-example/server.ts | 3 --- packages/esbuild-plugin-react18-example/src/index.ts | 3 --- 4 files changed, 4 insertions(+), 9 deletions(-) delete mode 100644 packages/esbuild-plugin-react18-example/server.ts delete mode 100644 packages/esbuild-plugin-react18-example/src/index.ts diff --git a/examples/nextjs/app/layout.tsx b/examples/nextjs/app/layout.tsx index 4f8ad22b..d592fe6e 100644 --- a/examples/nextjs/app/layout.tsx +++ b/examples/nextjs/app/layout.tsx @@ -1,4 +1,4 @@ -import { ForkMe } from "esbuild-plugin-react18-example/server"; +import { ForkMe } from "esbuild-plugin-react18-example/dist/server"; import "./globals.css"; import { ThemeSwitcher } from "nextjs-themes"; import { ServerSideWrapper } from "nextjs-themes/server/nextjs"; diff --git a/packages/esbuild-plugin-react18-example/package.json b/packages/esbuild-plugin-react18-example/package.json index 86a1f51f..764b26d5 100644 --- a/packages/esbuild-plugin-react18-example/package.json +++ b/packages/esbuild-plugin-react18-example/package.json @@ -4,8 +4,9 @@ "private": true, "version": "0.0.0", "description": "An intuitive React.js fork me ribbon component for promoting open source project forks.", - "main": "./index.ts", - "types": "./index.ts", + "main": "./dist/index.js", + "types": "./dist/index.d.ts", + "module": "./dist/esm/index.mjs", "repository": { "type": "git", "url": "git+https://github.com/mayank1513/turborepo-template.git" diff --git a/packages/esbuild-plugin-react18-example/server.ts b/packages/esbuild-plugin-react18-example/server.ts deleted file mode 100644 index dcc241ce..00000000 --- a/packages/esbuild-plugin-react18-example/server.ts +++ /dev/null @@ -1,3 +0,0 @@ -/** to make sure import statements remain same for monorepo setup and install via npm */ - -export * from "./src/server"; diff --git a/packages/esbuild-plugin-react18-example/src/index.ts b/packages/esbuild-plugin-react18-example/src/index.ts deleted file mode 100644 index 013d21b0..00000000 --- a/packages/esbuild-plugin-react18-example/src/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -"use client"; -// client component exports -export * from "./client";