Update dependencies and migrate to oxc

.github/workflows/main.yml

@@ -6,8 +6,10 @@ jobs:
     name: Build and Typecheck
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v1
+      - uses: actions/checkout@v6
+      - uses: oven-sh/setup-bun@v2
       - run: bun install --frozen-lockfile
       - run: bunx tsc --noEmit
-      - run: bun --bun run build
+      - run: bun run build
+      - run: bun run lint --format=github
+      - run: bun run fmt --check

.oxfmtrc.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "ignorePatterns": [],
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "bracketSameLine": true,
+  "arrowParens": "avoid",
+  "embeddedLanguageFormatting": "auto",
+  "sortPackageJson": false,
+  "sortImports": {
+    "newlinesBetween": false
+  },
+  "overrides": [{
+    "files": ["example/**/*.ts{,x}"],
+    "options": {
+      "printWidth": 80
+    }
+  }]
+}

.oxlintrc.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "unicorn", "oxc"],
+  "options": {
+    "typeAware": true,
+    "typeCheck": true,
+    "reportUnusedDisableDirectives": "warn"
+  },
+  "categories": {
+    "correctness": "error"
+  },
+  "rules": {
+    "no-explicit-any": "error",
+    "unbound-method": "allow",
+  },
+  "env": {
+    "builtin": true
+  }
+}

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "editor.formatOnSave": true,
   "files.eol": "\n",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "js/ts.tsdk.path": "node_modules/typescript/lib"
 }

dev/scss.d.ts

@@ -0,0 +1 @@
+declare module '*.scss';

example/src/App.tsx

@@ -1,4 +1,5 @@
 import { ChakraProvider, extendTheme } from '@chakra-ui/react';
+// @ts-ignore
 import { QueryBuilderChakra } from '@react-querybuilder/chakra2';
 import { useState } from 'react';
 import type { Field, RuleGroupType } from 'react-querybuilder';

example/src/scss.d.ts

@@ -0,0 +1 @@
+declare module '*.scss';

example/tsconfig.json

@@ -3,7 +3,6 @@
   "exclude": ["node_modules"],
   "compilerOptions": {
     "strict": true,
-    "esModuleInterop": false,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "jsx": "react-jsx",
     "target": "ESNext",

package.json

@@ -11,16 +11,16 @@
     "./package.json": "./package.json",
     ".": {
       "import": {
-        "types": "./dist/types-esm/index.d.mts",
+        "types": "./dist/react-querybuilder_chakra2.d.mts",
         "default": "./dist/react-querybuilder_chakra2.mjs"
       },
       "require": {
-        "types": "./dist/types/index.d.ts",
+        "types": "./dist/cjs/index.d.ts",
         "default": "./dist/cjs/index.js"
       }
     }
   },
-  "types": "./dist/types/index.d.ts",
+  "types": "./dist/react-querybuilder_chakra2.legacy-esm.d.ts",
   "files": [
     "dist"
   ],
@@ -46,40 +46,41 @@
   ],
   "scripts": {
     "start": "bunx --bun vite",
-    "build": "bunx --bun tsup",
+    "build": "bunx --bun tsdown",
     "typecheck": "tsc --noEmit",
     "typecheck:watch": "tsc --noEmit --watch",
-    "pretty-print": "prettier --config prettier.config.mjs --write '*.*' './src/**' './dev/**' './example/**'",
-    "pretty-check": "prettier --config prettier.config.mjs --check '*.*' './src/**' './dev/**' './example/**'",
+    "lint": "oxlint",
+    "fmt": "oxfmt",
+    "fmt:check": "oxfmt --check",
     "are-the-types-wrong": "attw --format table-flipped --pack .",
     "codesandbox-ci": "bash .codesandbox/ci.sh"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "0.17.2",
-    "@chakra-ui/icons": "2.2.4",
-    "@chakra-ui/react": "2.10.4",
-    "@chakra-ui/system": "2.6.2",
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
-    "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.1.0",
-    "@testing-library/user-event": "14.5.2",
-    "@types/bun": "1.1.16",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@types/web": "0.0.190",
-    "@vitejs/plugin-react": "4.3.4",
-    "framer-motion": "11.16.4",
-    "oxc-transform": "0.44.0",
-    "prettier": "3.4.2",
-    "react": "^19",
-    "react-dom": "^19",
-    "react-querybuilder": "8.1.0",
-    "sass": "1.83.1",
-    "tsup": "8.3.5",
-    "typescript": "5.7.3",
-    "vite": "^5"
+    "@arethetypeswrong/cli": "^0.18.2",
+    "@chakra-ui/icons": "^2.2.4",
+    "@chakra-ui/react": "^2.10.3",
+    "@chakra-ui/system": "^2.6.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@types/bun": "^1.3.12",
+    "@types/node": "^24.0.0",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "@types/web": "^0.0.345",
+    "@typescript/native-preview": "^7.0.0-dev.20260416.1",
+    "@vitejs/plugin-react": "^6.0.1",
+    "framer-motion": "^11.18.2",
+    "oxc-transform": "^0.125.0",
+    "oxfmt": "^0.45.0",
+    "oxlint": "^1.60.0",
+    "oxlint-tsgolint": "^0.21.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-querybuilder": "^7.7.1",
+    "sass": "^1.99.0",
+    "tsdown": "^0.21.9",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.8"
   },
   "peerDependencies": {
     "@chakra-ui/icons": "^2",

src/ChakraValueEditor.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import type { ValueEditorProps } from 'react-querybuilder';
 import { ValueEditor, useValueEditor } from 'react-querybuilder';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line no-explicit-any
 type ChakraValueEditorProps = ValueEditorProps & { extraProps?: Record<string, any> };
 
 export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.Element | null => {

tsconfig.json

@@ -7,12 +7,15 @@
     "isolatedModules": true,
     "jsx": "react",
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
     "target": "esnext",
-    "types": ["@testing-library/jest-dom", "node", "web", "bun"]
+    "types": ["node", "web", "bun"],
+    "paths": {
+      "@react-querybuilder/chakra2": ["./src"]
+    }
   },
-  "include": ["./src/", "./dev/"]
+  "include": ["./*.ts", "./src/", "./dev/"]
 }

tsdown.config.ts

@@ -0,0 +1,81 @@
+import type { UserConfig } from 'tsdown';
+
+const pkgName = 'react-querybuilder_chakra2';
+
+export default (async options => {
+  const entryPoint = `src/index.tsx`;
+
+  const commonOptions = {
+    sourcemap: true,
+    platform: 'neutral',
+    dts: { oxc: true },
+    ...options,
+  } satisfies UserConfig;
+
+  const productionOptions = {
+    minify: true,
+    define: { NODE_ENV: 'production' },
+  } satisfies UserConfig;
+
+  const opts: UserConfig[] = [
+    // ESM, standard bundler dev, embedded `process` references
+    {
+      ...commonOptions,
+      entry: { [pkgName]: entryPoint },
+      format: 'esm',
+      clean: true,
+    },
+    // ESM, Webpack 4 support. Target ES2017 syntax to compile away optional chaining and spreads
+    {
+      ...commonOptions,
+      entry: { [`${pkgName}.legacy-esm`]: entryPoint },
+      // ESBuild outputs `'.mjs'` by default for the 'esm' format. Force '.js'
+      outExtensions: () => ({ js: '.js' }),
+      target: 'es2017',
+      format: 'esm',
+    },
+    // ESM for use in browsers. Minified, with `process` compiled away
+    {
+      ...commonOptions,
+      ...productionOptions,
+      entry: { [`${pkgName}.production`]: entryPoint },
+      format: 'esm',
+      outExtensions: () => ({ js: '.mjs' }),
+    },
+    // CJS development
+    {
+      ...commonOptions,
+      entry: { [`${pkgName}.cjs.development`]: entryPoint },
+      format: 'cjs',
+      outDir: './dist/cjs/',
+    },
+    // CJS production
+    {
+      ...commonOptions,
+      ...productionOptions,
+      entry: { [`${pkgName}.cjs.production`]: entryPoint },
+      format: 'cjs',
+      outDir: './dist/cjs/',
+      onSuccess: async () => {
+        const prodfilename = `${pkgName}.cjs.production.js`;
+        const devfilename = `${pkgName}.cjs.development.js`;
+
+        await Promise.all([
+          Bun.write(
+            `dist/cjs/index.js`,
+            `'use strict';
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./${prodfilename}');
+} else {
+  module.exports = require('./${devfilename}');
+}
+`
+          ),
+          Bun.write(`dist/cjs/index.d.ts`, `export * from './${devfilename}';`),
+        ]);
+      },
+    },
+  ];
+
+  return opts;
+}) as (options: UserConfig) => Promise<UserConfig[]>;