Add additional example

Author: mayank1513

lib/esbuild-plugin-react18-css/__tests__/esbuild.test.ts

@@ -1,6 +1,6 @@
 import fs from "node:fs";
 import path from "node:path";
-import { describe, test, beforeAll, afterAll } from "vitest";
+import { describe, test, beforeAll } from "vitest";
 import esbuild from "esbuild";
 import cssPlugin from "../src";
 import glob from "tiny-glob";
@@ -28,7 +28,7 @@ describe("Test plugin with esbuild", async () => {
   });
 
   test("Should contain -moz-", ({ expect }) => {
-    const test = fs.readFileSync(path.resolve(exampleBuildDir, "server", "index.css"), "utf-8");
+    const test = fs.readFileSync(path.resolve(exampleBuildDir, "index.css"), "utf-8");
     expect(/-moz-/.test(test)).toBe(true);
   });
 });
@@ -66,3 +66,31 @@ describe("Test plugin with esbuild and options", async () => {
     expect(/-moz-/.test(test)).toBe(false);
   });
 });
+
+describe("Only server styles", () => {
+  const exampleBuildDir = path.resolve(process.cwd(), "test-build1");
+
+  beforeAll(async () => {
+    await esbuild.build({
+      format: "cjs",
+      target: "es2019",
+      sourcemap: false,
+      bundle: true,
+      minify: true,
+      plugins: [cssPlugin()],
+      entryPoints: await glob("../example2/src/**/*.*"),
+      external: ["react", "react-dom"],
+      outdir: "./test-build1",
+    });
+  });
+
+  test(`Test CSS Class Hash`, ({ expect }) => {
+    const text = fs.readFileSync(path.resolve(exampleBuildDir, "server", "index.js"), "utf-8");
+    expect(/{fork:["'][^"']*fork[^"']*["']/.test(text)).toBe(true);
+  });
+
+  test("Should contain -moz-", ({ expect }) => {
+    const test = fs.readFileSync(path.resolve(exampleBuildDir, "index.css"), "utf-8");
+    expect(/-moz-/.test(test)).toBe(true);
+  });
+});

lib/esbuild-plugin-react18-css/src/index.ts

@@ -37,8 +37,6 @@ function generateCombinedCSS(result: BuildResult) {
     indexCSSFilePath = serverCSSFile?.path.replace(`server${path.sep}`, "") ?? "";
   }
 
-  console.log({ indexCSSFilePath });
-
   if (indexCSSFile) indexCSSFile.contents = new TextEncoder().encode(combinedCSS);
   else
     result.outputFiles?.push({

lib/example2/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["custom/react-internal"],
+};

lib/example2/.gitignore

@@ -0,0 +1,2 @@
+# tsup build
+dist

lib/example2/README.md

@@ -0,0 +1,39 @@
+# Fork Me React.js component
+
+A simple fork me component for React.js projects!
+
+## Install
+
+```bash
+$ pnpm add @mayank1513/fork-me
+# or
+$ npm install @mayank1513/fork-me
+# or
+$ yarn add @mayank1513/fork-me
+```
+
+## Add on your page
+
+```ts
+<ForkMe gitHubUrl="https://github.com/mayank1513/turborepo-template" />
+// and
+<StarMe gitHubUrl="https://github.com/mayank1513/turborepo-template" />
+```
+
+You need to import styles for ForkMe component
+
+```ts
+import "@mayank1513/fork-me/server/index.css";
+```
+
+## Optional parameters
+
+```ts
+	text?: string; // replace the Fork me on GitHub text
+	width?: string | number; // if you need to adjust the width of the ribbon (length)
+	height?: string | number; // to adjust height of the ribbon
+	bgColor?: string; // background color
+	textColor?: string; // text color
+```
+
+> This package also serves as an example to demonstrate how to build and publish `React.js` library compatible with React Server Components

lib/example2/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+/** to make sure import statements remain same for monorepo setup and install via npm */
+export * from "./src/client";

lib/example2/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "esbuild-plugin-react18-css-example2",
+  "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
+  "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",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/react18-tools/esbuild-plugin-react18-css.git"
+  },
+  "bugs": {
+    "url": "https://github.com/react18-tools/esbuild-plugin-react18-css/issues"
+  },
+  "homepage": "https://github.com/react18-tools/esbuild-plugin-react18-css/tree/main/lib/fork-me#readme",
+  "sideEffects": false,
+  "license": "MIT",
+  "scripts": {
+    "test": "vitest run --coverage",
+    "build": "tsup src && tsc -p tsconfig-build.json && node touchup.js",
+    "doc": "cp -f ../../README.md README.md && typedoc",
+    "publish-package": "cd dist && npm publish --provenance --access public",
+    "lint": "eslint ."
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.2.1",
+    "@turbo/gen": "^1.12.4",
+    "@types/node": "^20.11.22",
+    "@types/react": "^18.2.60",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.3.1",
+    "esbuild-plugin-css-module": "^0.0.1",
+    "esbuild-plugin-react18": "^0.0.7",
+    "eslint-config-custom": "workspace:*",
+    "esbuild-plugin-react18-css": "workspace:*",
+    "jsdom": "^24.0.0",
+    "octokit": "^3.1.2",
+    "react": "^18.2.0",
+    "tsconfig": "workspace:*",
+    "tsup": "^8.0.2",
+    "typedoc": "^0.25.9",
+    "typescript": "^5.3.3",
+    "vite-tsconfig-paths": "^4.3.1",
+    "vitest": "^1.3.1"
+  },
+  "peerDependencies": {
+    "@types/react": "16.8 - 18",
+    "next": "10 - 14",
+    "react": "16.8 - 18"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/mayank1513"
+  },
+  "keywords": [
+    "fork-me",
+    "GitHub",
+    "nextjs",
+    "nextjs13",
+    "react",
+    "react18",
+    "react-server-components",
+    "react-client-components",
+    "typescript",
+    "javascript",
+    "mayank1513",
+    "turborepo-trmplate"
+  ]
+}

lib/example2/server.ts

@@ -0,0 +1,3 @@
+/** to make sure import statements remain same for monorepo setup and install via npm */
+
+export * from "./src/server";

lib/example2/src/client/index.ts

@@ -0,0 +1,9 @@
+"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.
+ * i.e., server component re-exported from file with "use client" will behave as client component
+ * */
+
+// client component exports
+export * from "./star-me";

lib/example2/src/client/star-me/index.ts

@@ -0,0 +1,3 @@
+"use client";
+
+export * from "./star-me";