gitalk-react 1.0.0-beta.8 → 1.1.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "gitalk-react",
-  "version": "1.0.0-beta.8",
+  "version": "1.1.0",
   "private": false,
   "author": {
     "name": "LolipopJ",
-    "email": "mail@towind.fun",
+    "email": "mail@towind.cn",
     "url": "https://github.com/LolipopJ"
   },
   "repository": {
@@ -13,21 +13,34 @@
   },
   "homepage": "https://lolipopj.github.io/gitalk-react",
   "license": "MIT",
+  "packageManager": "pnpm@12.11.2",
   "type": "module",
   "files": [
-    "dist",
-    "lib",
+    "dist/",
+    "proxy-server/",
     "LICENSE",
     "package.json",
     "README-zh-CN.md",
     "README.md"
   ],
-  "main": "./dist/gitalk.umd.cjs",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/gitalk.cjs",
   "module": "./dist/gitalk.js",
+  "unpkg": "./dist/gitalk.browser.full.js",
+  "jsdelivr": "./dist/gitalk.browser.full.js",
   "exports": {
     ".": {
-      "import": "./dist/gitalk.js",
-      "require": "./dist/gitalk.umd.cjs"
+      "unpkg": "./dist/gitalk.browser.full.js",
+      "import": {
+        "types": "./dist/gitalk.d.mts",
+        "default": "./dist/gitalk.js"
+      },
+      "require": {
+        "types": "./dist/gitalk.d.cts",
+        "default": "./dist/gitalk.cjs"
+      }
     },
     "./gitalk.css": "./dist/gitalk-light.css",
     "./light.css": "./dist/gitalk-light.css",
@@ -35,57 +48,67 @@
     "./dark.css": "./dist/gitalk-dark.css",
     "./gitalk-dark.css": "./dist/gitalk-dark.css"
   },
-  "types": "./dist/gitalk.d.ts",
+  "types": "./dist/gitalk.d.mts",
   "scripts": {
     "dev": "vite --config vite.config.preview.ts",
-    "build": "npm run build:lib && npm run build:preview",
-    "build:lib": "npm run build:ts && npm run build:scss",
-    "build:ts": "tsc -b && vite build",
+    "build": "tsc -b && pnpm run build:lib && pnpm run build:browser && pnpm run build:scss && pnpm run build:preview",
+    "build:lib": "vite build",
+    "build:browser": "vite build --config vite.config.browser.ts && vite build --config vite.config.browser.ts --mode full",
     "build:scss": "vite build --config vite.config.scss.ts",
     "build:preview": "vite build --config vite.config.preview.ts",
-    "lint": "npm run lint:ts && npm run lint:scss",
+    "analyze": "vite build --mode analyze",
+    "prepack": "pnpm run test",
+    "lint": "pnpm run lint:ts && pnpm run lint:scss",
     "lint:ts": "eslint . --fix",
-    "lint:scss": "stylelint **/*.scss --fix"
+    "lint:scss": "stylelint {dev,lib}/**/*.scss --fix",
+    "start:proxy": "node --env-file=proxy-server/.env.local proxy-server/server.mjs",
+    "test": "pnpm run build && node --test test/*.test.mjs"
   },
   "dependencies": {
-    "ahooks": "^3.0.0",
-    "date-fns": "^4.0.0",
-    "node-polyglot": "^2.0.0",
-    "octokit": "^4.0.0",
-    "react-flip-move": "^3.0.0"
+    "@octokit/types": "^18.0.0",
+    "ahooks": "^3.10.0",
+    "classnames": "^2.5.1",
+    "node-polyglot": "^2.6.0",
+    "octokit": "^5.0.5"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.24.0",
-    "@octokit/types": "^14.0.0",
-    "@types/node": "^22.14.1",
+    "@eslint/js": "^10.0.1",
+    "@microsoft/api-extractor": "^7.59.4",
+    "@types/node": "^24.19.2",
     "@types/node-polyglot": "^2.5.0",
-    "@types/react": "^16.8.0",
-    "@types/react-dom": "^16.8.0",
-    "@vitejs/plugin-react": "^4.4.0",
-    "eslint": "^9.24.0",
-    "eslint-config-prettier": "^10.1.2",
-    "eslint-plugin-prettier": "^5.2.6",
+    "@types/react": "^16.14.70",
+    "@types/react-dom": "^16.9.25",
+    "@types/react-latest": "npm:@types/react@latest",
+    "@types/react-dom-latest": "npm:@types/react-dom@latest",
+    "@vitejs/plugin-react": "^6.1.2",
+    "eslint": "^10.12.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.7",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "github-markdown-css": "^5.8.1",
-    "globals": "^16.0.0",
-    "prettier": "^3.5.3",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "rollup-plugin-visualizer": "^5.14.0",
-    "sass-embedded": "^1.86.3",
-    "stylelint": "^16.18.0",
-    "stylelint-config-recess-order": "^6.0.0",
-    "stylelint-config-standard-scss": "^14.0.0",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.1",
-    "vite-plugin-dts": "^4.5.3"
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.7",
+    "eslint-plugin-simple-import-sort": "^14.0.0",
+    "github-markdown-css": "^5.9.0",
+    "globals": "^17.13.0",
+    "postcss": "^8.5.30",
+    "prettier": "^3.9.10",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-latest": "npm:react@latest",
+    "react-dom-latest": "npm:react-dom@latest",
+    "rollup-plugin-visualizer": "^7.1.1",
+    "sass-embedded": "^1.105.1",
+    "stylelint": "^17.16.0",
+    "stylelint-config-recess-order": "^7.8.0",
+    "stylelint-config-standard-scss": "^17.0.0",
+    "stylelint-order": "^8.1.2",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.71.2",
+    "vite": "^8.3.4",
+    "vite-plugin-dts": "^5.1.2"
   }
 }

package/proxy-server/.env.example

@@ -0,0 +1,6 @@
+# Server-only settings. Never use VITE_* for the client secret.
+GITHUB_CLIENT_ID=YOUR_GITHUB_OAUTH_APP_CLIENT_ID
+GITHUB_CLIENT_SECRET=YOUR_GITHUB_OAUTH_APP_CLIENT_SECRET
+ALLOWED_ORIGIN=http://localhost:5173
+HOST=127.0.0.1
+PORT=3000

package/proxy-server/README.md

@@ -0,0 +1,38 @@
+# OAuth proxy
+
+This Node.js 22+ server exchanges GitHub OAuth authorization codes using credentials kept on the server. It has no additional dependencies.
+
+From the repository root, copy `proxy-server/.env.example` to `proxy-server/.env.local`. Set:
+
+- `GITHUB_CLIENT_ID`: the same OAuth App ID as the browser's `clientID`.
+- `GITHUB_CLIENT_SECRET`: the OAuth App secret, stored only on the server.
+- `ALLOWED_ORIGIN`: your exact site origin, such as `http://localhost:5173` or `https://example.com`, without a path or trailing slash. For the deployed preview, use `https://lolipopj.github.io`.
+- `HOST` and `PORT`: default to `127.0.0.1` and `3000`. Set `HOST=0.0.0.0` when a container needs to accept connections from outside it.
+
+The `.env.local` file is ignored by Git. Never copy its secret into `VITE_*`, component props, or the static preview build.
+
+```bash
+npm run start:proxy
+```
+
+In another terminal, run `npm run dev`. Vite forwards `/oauth/access_token` to the local proxy. If you override `VITE_PROXY`, point it to `http://localhost:3000/oauth/access_token` locally and use the exact Vite origin for `ALLOWED_ORIGIN`.
+
+For deployment, copy `server.mjs` to a Node host, inject the environment variables through the host's secret settings, and run:
+
+```bash
+node server.mjs
+```
+
+Use a process manager and an HTTPS reverse proxy. Disable caching and query-string access logs for `/oauth/access_token`; URLs contain one-time authorization codes. For the GitHub Pages preview, configure the repository Actions variable `OAUTH_PROXY_URL` with this HTTPS endpoint. Set `VITE_CLIENT_ID` too if you use a different OAuth App. Register the frontend callback URL with that App.
+
+Requests with an `Origin` must match `ALLOWED_ORIGIN`. Requests without `Origin` are permitted for same-origin browsers and command-line clients; CORS is a browser restriction, not authentication. Only the server-configured App credentials are used, regardless of query parameters supplied by callers.
+
+The endpoint accepts `GET /oauth/access_token?code=...` and preserves the status and JSON body returned by `https://github.com/login/oauth/access_token`, including `scope`, `token_type`, and OAuth error fields. The browser validates this response using the same code as client-side exchange. Missing or duplicate codes return 400; disallowed origins return 403; unsupported paths and methods return 404/405. Invalid upstream JSON or network failures return 502 with a generic error. All responses use `Cache-Control: no-store`. Upstream requests time out after 10 seconds.
+
+For both client-side and server-side exchange, Gitalk generates a cryptographically random, one-time `state` stored in the initiating tab's `sessionStorage`, scoped to the OAuth App and valid for 10 minutes. The frontend validates and consumes it before contacting this endpoint, handles denied authorization, and removes OAuth callback parameters while preserving the page's other query parameters and hash. The proxy only exchanges codes; it does not establish a separate login session. A 401 or logout clears the browser's token and user state and cancels pending requests. Rotate secrets previously published in preview source before deploying.
+
+Run the focused tests from the repository root:
+
+```bash
+npm run test:oauth
+```

package/proxy-server/server.mjs

@@ -0,0 +1,110 @@
+import { createServer } from "node:http";
+import { pathToFileURL } from "node:url";
+
+export const createOAuthServer = ({
+  clientID,
+  clientSecret,
+  allowedOrigin,
+}) => {
+  if (!clientID || !clientSecret || !allowedOrigin) {
+    throw new Error(
+      "GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET and ALLOWED_ORIGIN are required",
+    );
+  }
+  const origin = new URL(allowedOrigin);
+  if (
+    !["http:", "https:"].includes(origin.protocol) ||
+    origin.origin !== allowedOrigin
+  ) {
+    throw new Error(
+      "ALLOWED_ORIGIN must be an exact HTTP(S) origin without a path",
+    );
+  }
+
+  return createServer(async (req, res) => {
+    res.setHeader("Cache-Control", "no-store");
+    res.setHeader("Vary", "Origin");
+    const send = (status, body) => {
+      res.writeHead(status, { "Content-Type": "application/json" });
+      res.end(JSON.stringify(body));
+    };
+
+    if (req.headers.origin && req.headers.origin !== allowedOrigin) {
+      send(403, { error: "origin_not_allowed" });
+      return;
+    }
+    if (req.headers.origin) {
+      res.setHeader("Access-Control-Allow-Origin", allowedOrigin);
+    }
+
+    let url;
+    try {
+      url = new URL(req.url, "http://localhost");
+    } catch {
+      send(400, { error: "invalid_url" });
+      return;
+    }
+    if (url.pathname !== "/oauth/access_token") {
+      send(404, { error: "not_found" });
+      return;
+    }
+    if (req.method === "OPTIONS") {
+      res.writeHead(204, { "Access-Control-Allow-Methods": "GET" });
+      res.end();
+      return;
+    }
+    if (req.method !== "GET") {
+      res.setHeader("Allow", "GET, OPTIONS");
+      send(405, { error: "method_not_allowed" });
+      return;
+    }
+
+    const codes = url.searchParams.getAll("code");
+    const code = codes[0];
+    if (codes.length !== 1 || !code || code.length > 2048) {
+      send(400, { error: "invalid_code" });
+      return;
+    }
+
+    try {
+      const upstream = await fetch(
+        "https://github.com/login/oauth/access_token",
+        {
+          method: "POST",
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            code,
+            client_id: clientID,
+            client_secret: clientSecret,
+          }),
+          signal: AbortSignal.timeout(10000),
+        },
+      );
+      const data = await upstream.json();
+      send(upstream.status, data);
+    } catch {
+      send(502, { error: "oauth_exchange_failed" });
+    }
+  });
+};
+
+if (
+  process.argv[1] &&
+  import.meta.url === pathToFileURL(process.argv[1]).href
+) {
+  const port = Number(process.env["PORT"] ?? 3000);
+  if (!Number.isInteger(port) || port < 1 || port > 65535) {
+    throw new Error("PORT must be an integer from 1 to 65535");
+  }
+  const server = createOAuthServer({
+    clientID: process.env["GITHUB_CLIENT_ID"],
+    clientSecret: process.env["GITHUB_CLIENT_SECRET"],
+    allowedOrigin: process.env["ALLOWED_ORIGIN"],
+  });
+  server.listen(port, process.env["HOST"] ?? "127.0.0.1", () => {
+    console.log(`OAuth proxy listening on port ${port}`);
+  });
+}