Replace ESLint and Prettier with Oxc tooling

.changeset/config.json

@@ -8,7 +8,6 @@
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
   "ignore": [
-    "@reflag/eslint-config",
     "@reflag/tsconfig",
     "customer-admin-panel",
     "nextjs-bootstrap-demo",

.github/workflows/package-ci.yml

@@ -46,15 +46,9 @@ jobs:
           name: Build & Test Report
           path: ./packages/*/junit.xml
           reporter: jest-junit
-      - id: prettier
-        name: Check styling
-        run: yarn prettier
+      - id: fmt
+        name: Check formatting
+        run: yarn fmt
       - id: lint
         name: Check for linting errors
         run: yarn lint:ci
-      - name: Annotate from ESLint report
-        uses: ataylorme/eslint-annotate-action@v2
-        with:
-          repo-token: "${{ secrets.GITHUB_TOKEN }}"
-          report-json: ./packages/*/eslint-report.json
-          fail-on-warning: true

.gitignore

@@ -41,5 +41,4 @@ playwright/.cache/
 junit.xml
 
 .next
-eslint-report.json
 reflag.config.json

.husky/pre-commit

@@ -0,0 +1 @@
+yarn lint-staged

.oxfmtrc.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "printWidth": 80,
+  "ignorePatterns": [
+    "**/__snapshots__/**",
+    "**/build/**",
+    "**/dist/**",
+    "**/gen/**",
+    "coverage/**",
+    "playwright-report/**",
+    "test-results/**",
+    "packages/management-sdk/src/generated/**",
+    "packages/node-sdk/examples/cloudflare-worker/worker-configuration.d.ts"
+  ],
+  "experimentalSortImports": {
+    "groups": [
+      "builtin",
+      "external",
+      "internal",
+      ["parent", "sibling", "index"]
+    ],
+    "internalPattern": ["@reflag/", "@/"],
+    "newlinesBetween": true
+  }
+}

.oxlintrc.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "react", "import"],
+  "rules": {
+    "no-unused-vars": "warn",
+    "unicorn/no-thenable": "off",
+    "react/exhaustive-deps": "warn",
+    "import/no-duplicates": "warn",
+    "sort-imports": "off",
+    "typescript/no-floating-promises": "error"
+  },
+  "ignorePatterns": [
+    "build/",
+    "**/build/**",
+    "**/dist/**",
+    "**/gen/**",
+    "node_modules/",
+    "coverage/",
+    "playwright-report/",
+    "test-results/",
+    "packages/management-sdk/src/generated/**",
+    "packages/node-sdk/examples/cloudflare-worker/worker-configuration.d.ts"
+  ]
+}

package.json

@@ -17,21 +17,25 @@
     "build": "lerna run build --stream",
     "test:ci": "lerna run test:ci --stream",
     "test": "lerna run test --stream",
-    "format": "lerna run format --stream",
-    "prettier": "lerna run prettier --stream",
-    "prettier:fix": "lerna run prettier -- --write",
-    "lint": "lerna run lint --stream",
-    "lint:ci": "lerna run lint:ci --stream",
+    "format": "yarn fmt:fix && yarn lint:fix",
+    "lint": "yarn oxlint .",
+    "lint:ci": "yarn oxlint .",
     "version-packages": "changeset version && YARN_ENABLE_IMMUTABLE_INSTALLS=false yarn install",
     "release-packages": "yarn build && yarn release",
     "release": "changeset publish",
-    "docs": "./docs.sh"
+    "docs": "./docs.sh",
+    "lint:fix": "yarn oxlint --fix .",
+    "fmt": "yarn oxfmt --check .",
+    "fmt:fix": "yarn oxfmt --write .",
+    "postinstall": "husky"
   },
-  "packageManager": "yarn@4.10.3",
   "devDependencies": {
     "@changesets/cli": "^2.29.6",
+    "husky": "^9.1.7",
     "lerna": "^8.1.3",
-    "prettier": "^3.5.2",
+    "lint-staged": "^16.2.7",
+    "oxfmt": "^0.27.0",
+    "oxlint": "^1.42.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "typedoc": "0.27.6",
@@ -43,5 +47,15 @@
   "resolutions": {
     "react": "19.1.0",
     "react-dom": "19.1.0"
-  }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx,mjs,cjs,mts,cts,vue}": [
+      "oxfmt --write",
+      "oxlint --fix"
+    ],
+    "*.{json,md,yml,yaml,css,html}": [
+      "oxfmt --write"
+    ]
+  },
+  "packageManager": "yarn@4.10.3"
 }

packages/browser-sdk/package.json

@@ -1,29 +1,11 @@
 {
   "name": "@reflag/browser-sdk",
   "version": "1.4.7",
-  "packageManager": "yarn@4.1.1",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/reflagcom/javascript.git"
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc --project tsconfig.native.json && tsc --project tsconfig.build.json && vite build",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:e2e": "yarn build && playwright test",
-    "test:ci": "yarn test --reporter=default --reporter=junit --outputFile=junit.xml && yarn test:e2e",
-    "coverage": "yarn test --coverage",
-    "lint": "eslint .",
-    "lint:ci": "eslint --output-file eslint-report.json --format json .",
-    "prettier": "prettier --check .",
-    "format": "yarn lint --fix && yarn prettier --write",
-    "preversion": "yarn lint && yarn prettier && yarn test && yarn build"
-  },
   "files": [
     "dist"
   ],
@@ -32,12 +14,31 @@
   "react-native": "./dist/index.native.js",
   "exports": {
     ".": {
+      "types": "./dist/types/src/index.d.ts",
       "react-native": "./dist/index.native.js",
       "import": "./dist/reflag-browser-sdk.mjs",
-      "require": "./dist/reflag-browser-sdk.umd.js",
-      "types": "./dist/types/src/index.d.ts"
+      "require": "./dist/reflag-browser-sdk.umd.js"
     }
   },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --project tsconfig.native.json && tsc --project tsconfig.build.json && vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "yarn build && playwright test",
+    "test:ci": "yarn test --reporter=default --reporter=junit --outputFile=junit.xml && yarn test:e2e",
+    "coverage": "yarn test --coverage",
+    "lint": "oxlint .",
+    "lint:ci": "oxlint .",
+    "format": "yarn fmt:fix && yarn lint:fix",
+    "preversion": "yarn lint && yarn fmt && yarn test && yarn build",
+    "lint:fix": "oxlint --fix .",
+    "fmt": "oxfmt --check .",
+    "fmt:fix": "oxfmt --write ."
+  },
   "dependencies": {
     "@floating-ui/dom": "^1.6.8",
     "fast-equals": "^5.2.2",
@@ -46,26 +47,23 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.49.1",
-    "@reflag/eslint-config": "0.0.2",
     "@reflag/tsconfig": "0.0.2",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.12.0",
     "@vitest/coverage-v8": "^2.0.4",
     "c8": "~10.1.3",
-    "eslint": "^9.21.0",
-    "eslint-config-preact": "^1.5.0",
     "http-server": "^14.1.1",
     "jsdom": "^24.1.0",
     "msw": "^2.3.4",
     "nock": "^14.0.1",
     "postcss": "^8.4.33",
     "postcss-nesting": "^12.0.2",
     "postcss-preset-env": "^9.3.0",
-    "prettier": "^3.5.2",
     "typescript": "^5.7.3",
     "vite": "^6.4.2",
     "vite-plugin-dts": "^4.0.0-beta.1",
     "vite-plugin-static-copy": "^2.3.2",
     "vitest": "^2.0.4"
-  }
+  },
+  "packageManager": "yarn@4.1.1"
 }

packages/browser-sdk/src/bulkQueue.ts

@@ -1,6 +1,6 @@
-import { logResponseError } from "./utils/responseError";
 import { BULK_QUEUE_FLUSH_DELAY_MS, BULK_QUEUE_MAX_SIZE } from "./config";
 import { Logger } from "./logger";
+import { logResponseError } from "./utils/responseError";
 
 const DROP_ERROR_THROTTLE_MS = 15 * 60 * 1000;
 

packages/browser-sdk/src/client.ts

@@ -1,5 +1,13 @@
 import { deepEqual } from "fast-equals";
 
+import { BulkEvent, BulkQueue } from "./bulkQueue";
+import {
+  API_BASE_URL,
+  APP_BASE_URL,
+  IS_SERVER,
+  SSE_REALTIME_BASE_URL,
+} from "./config";
+import { ReflagContext, ReflagDeprecatedContext } from "./context";
 import {
   AutoFeedback,
   Feedback,
@@ -15,21 +23,13 @@ import {
   FlagsClient,
   RawFlags,
 } from "./flag/flags";
-import { ToolbarPosition } from "./ui/types";
-import { logResponseError } from "./utils/responseError";
-import { BulkEvent, BulkQueue } from "./bulkQueue";
-import {
-  API_BASE_URL,
-  APP_BASE_URL,
-  IS_SERVER,
-  SSE_REALTIME_BASE_URL,
-} from "./config";
-import { ReflagContext, ReflagDeprecatedContext } from "./context";
 import { HookArgs, HooksManager, State } from "./hooksManager";
 import { HttpClient } from "./httpClient";
 import { Logger, loggerWithPrefix, quietConsoleLogger } from "./logger";
 import { StorageAdapter } from "./storage";
 import { showToolbarToggle } from "./toolbar";
+import { ToolbarPosition } from "./ui/types";
+import { logResponseError } from "./utils/responseError";
 
 const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
 const isNode = typeof document === "undefined"; // deno supports "window" but not "document" according to https://remix.run/docs/en/main/guides/gotchas

packages/browser-sdk/src/feedback/feedback.ts

@@ -5,12 +5,6 @@ import { AblySSEChannel, openAblySSEChannel } from "../sse";
 import { Position } from "../ui/types";
 import { logResponseError } from "../utils/responseError";
 import { retryOnThrow } from "../utils/retry";
-
-import {
-  FeedbackSubmission,
-  FeedbackTranslations,
-  OpenFeedbackFormOptions,
-} from "./ui/types";
 import {
   FeedbackPromptCompletionHandler,
   parsePromptMessage,
@@ -19,6 +13,11 @@ import {
 import { getAuthToken } from "./promptStorage";
 import * as feedbackLib from "./ui";
 import { DEFAULT_POSITION } from "./ui";
+import {
+  FeedbackSubmission,
+  FeedbackTranslations,
+  OpenFeedbackFormOptions,
+} from "./ui/types";
 
 const INITIAL_FETCH_RETRY_DELAYS_MS = [0, 5000];
 

packages/browser-sdk/src/feedback/ui/FeedbackDialog.tsx

@@ -4,10 +4,9 @@ import { useCallback, useState } from "preact/hooks";
 import { feedbackContainerId } from "../../ui/constants";
 import { Dialog, useDialog } from "../../ui/Dialog";
 import { Close } from "../../ui/icons/Close";
-
 import { DEFAULT_TRANSLATIONS } from "./config/defaultTranslations";
-import { useTimer } from "./hooks/useTimer";
 import { FeedbackForm } from "./FeedbackForm";
+import { useTimer } from "./hooks/useTimer";
 import styles from "./index.css?inline";
 import { RadialProgress } from "./RadialProgress";
 import {
@@ -76,7 +75,7 @@ export const FeedbackDialog: FunctionComponent<FeedbackDialogProps> = ({
   }, [autoClose, close, onDismiss]);
 
   return (
-    <>
+    <Fragment>
       <style dangerouslySetInnerHTML={{ __html: styles }} />
       <Dialog
         key={key}
@@ -86,7 +85,7 @@ export const FeedbackDialog: FunctionComponent<FeedbackDialogProps> = ({
         position={position}
         onDismiss={onDismiss}
       >
-        <>
+        <Fragment>
           <FeedbackForm
             key={key}
             openWithCommentVisible={openWithCommentVisible}
@@ -107,8 +106,8 @@ export const FeedbackDialog: FunctionComponent<FeedbackDialogProps> = ({
             )}
             <Close />
           </button>
-        </>
+        </Fragment>
       </Dialog>
-    </>
+    </Fragment>
   );
 };

packages/browser-sdk/src/feedback/ui/FeedbackForm.tsx

@@ -3,7 +3,6 @@ import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 
 import { Check } from "../../ui/icons/Check";
 import { CheckCircle } from "../../ui/icons/CheckCircle";
-
 import { Button } from "./Button";
 import { Plug } from "./Plug";
 import { StarRating } from "./StarRating";