chore: build and typecheck with TypeScript 7

.github/workflows/ci.yml

@@ -158,6 +158,9 @@ jobs:
       # The generated database registry must reach appkit-ui's built declarations.
       - name: Typecheck database components
         run: pnpm --filter=dev-playground typecheck:database
+      # The playground server and Playwright specs against the built appkit declarations.
+      - name: Typecheck playground
+        run: pnpm --filter=dev-playground check
       - name: Run Integration Tests
         run: pnpm --filter=dev-playground test:integration
         env:

.gitignore

@@ -13,6 +13,9 @@ appkit-template-*.zip
 
 coverage
 
+# Scratch dirs written by appkit-ui type-probe tests
+.type-probe-*
+
 *.tsbuildinfo
 
 .turbo

apps/clean-app/.oxlintrc.json

@@ -0,0 +1,130 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  // Ports the ESLint config this app used (@eslint/js recommended, typescript-eslint recommended,
+  // eslint-plugin-react-hooks 7 recommended, and eslint-plugin-react-refresh vite).
+  "plugins": ["typescript", "react"],
+  // React Compiler rules run through eslint-plugin-react-hooks. The alias is required because
+  // oxlint reserves the `react-hooks` name for its native rules-of-hooks and exhaustive-deps.
+  "jsPlugins": [
+    { "name": "react-hooks-js", "specifier": "eslint-plugin-react-hooks" }
+  ],
+  // Only the rules listed below are enabled.
+  "categories": {
+    "correctness": "off"
+  },
+  "options": {
+    "reportUnusedDisableDirectives": "warn"
+  },
+  "overrides": [
+    {
+      // The ESLint config only linted TypeScript files.
+      "files": ["**/*.ts", "**/*.tsx"],
+      "rules": {
+        // eslint:recommended, as typescript-eslint adjusts it for TypeScript files. no-octal has no oxlint
+        // rule: oxlint reports legacy octal literals as a parse error.
+        "for-direction": "error",
+        "no-async-promise-executor": "error",
+        "no-case-declarations": "error",
+        "no-compare-neg-zero": "error",
+        "no-cond-assign": "error",
+        "no-constant-binary-expression": "error",
+        "no-constant-condition": "error",
+        "no-control-regex": "error",
+        "no-debugger": "error",
+        "no-delete-var": "error",
+        "no-dupe-else-if": "error",
+        "no-duplicate-case": "error",
+        "no-empty": "error",
+        "no-empty-character-class": "error",
+        "no-empty-pattern": "error",
+        "no-empty-static-block": "error",
+        "no-ex-assign": "error",
+        "no-extra-boolean-cast": "error",
+        "no-fallthrough": "error",
+        "no-global-assign": "error",
+        "no-invalid-regexp": "error",
+        "no-irregular-whitespace": [
+          "error",
+          {
+            "skipComments": false,
+            "skipJSXText": false,
+            "skipRegExps": false,
+            "skipStrings": true,
+            "skipTemplates": false
+          }
+        ],
+        "no-loss-of-precision": "error",
+        "no-misleading-character-class": "error",
+        "no-nonoctal-decimal-escape": "error",
+        "no-prototype-builtins": "error",
+        "no-regex-spaces": "error",
+        "no-self-assign": "error",
+        "no-shadow-restricted-names": ["error", { "reportGlobalThis": false }],
+        "no-sparse-arrays": "error",
+        "no-unexpected-multiline": "error",
+        "no-unsafe-finally": "error",
+        "no-unsafe-optional-chaining": "error",
+        "no-unused-labels": "error",
+        "no-unused-private-class-members": "error",
+        "no-useless-backreference": "error",
+        "no-useless-catch": "error",
+        "no-useless-escape": "error",
+        "no-var": "error",
+        "prefer-const": "error",
+        "prefer-rest-params": "error",
+        "prefer-spread": "error",
+        "require-yield": "error",
+        "use-isnan": "error",
+        "valid-typeof": "error",
+
+        // typescript-eslint recommended
+        "no-array-constructor": "error",
+        "no-unused-expressions": "error",
+        "no-unused-vars": "error",
+        "typescript/ban-ts-comment": "error",
+        "typescript/no-duplicate-enum-values": "error",
+        "typescript/no-empty-object-type": "error",
+        "typescript/no-explicit-any": "error",
+        "typescript/no-extra-non-null-assertion": "error",
+        "typescript/no-misused-new": "error",
+        "typescript/no-namespace": "error",
+        "typescript/no-non-null-asserted-optional-chain": "error",
+        "typescript/no-require-imports": "error",
+        "typescript/no-this-alias": "error",
+        "typescript/no-unnecessary-type-constraint": "error",
+        "typescript/no-unsafe-declaration-merging": "error",
+        "typescript/no-unsafe-function-type": "error",
+        "typescript/no-wrapper-object-types": "error",
+        "typescript/prefer-as-const": "error",
+        "typescript/prefer-namespace-keyword": "error",
+        "typescript/triple-slash-reference": "error",
+
+        // eslint-plugin-react-hooks recommended
+        "react/exhaustive-deps": "warn",
+        "react/rules-of-hooks": "error",
+        "react-hooks-js/component-hook-factories": "error",
+        "react-hooks-js/config": "error",
+        "react-hooks-js/error-boundaries": "error",
+        "react-hooks-js/gating": "error",
+        "react-hooks-js/globals": "error",
+        "react-hooks-js/immutability": "error",
+        "react-hooks-js/incompatible-library": "warn",
+        "react-hooks-js/preserve-manual-memoization": "error",
+        "react-hooks-js/purity": "error",
+        "react-hooks-js/refs": "error",
+        "react-hooks-js/set-state-in-effect": "error",
+        "react-hooks-js/set-state-in-render": "error",
+        "react-hooks-js/static-components": "error",
+        "react-hooks-js/unsupported-syntax": "warn",
+        "react-hooks-js/use-memo": "error",
+
+        // eslint-plugin-react-refresh vite
+        "react/only-export-components": [
+          "error",
+          { "allowConstantExport": true }
+        ]
+      }
+    }
+  ],
+  "ignorePatterns": ["dist"]
+}

apps/clean-app/README.md

@@ -1,6 +1,6 @@
 # React + TypeScript + Vite
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This template provides a minimal setup to get React working in Vite with HMR.
 
 Currently, two official plugins are available:
 
@@ -10,64 +10,3 @@ Currently, two official plugins are available:
 ## React Compiler
 
 The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```

apps/clean-app/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "NODE_ENV=development tsx watch server.ts",
     "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "lint": "oxlint",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -15,17 +15,14 @@
     "react-dom": "19.2.0"
   },
   "devDependencies": {
-    "@eslint/js": "9.39.1",
     "@types/node": "22.20.5",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "5.1.1",
     "eslint": "9.39.1",
     "eslint-plugin-react-hooks": "7.0.1",
-    "eslint-plugin-react-refresh": "0.4.24",
-    "globals": "16.5.0",
-    "typescript": "5.9.3",
-    "typescript-eslint": "8.49.0",
+    "oxlint": "1.77.0",
+    "typescript": "7.0.2",
     "vite": "7.2.4"
   }
 }

apps/dev-playground/client/.oxlintrc.json

@@ -0,0 +1,114 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  // Ports the ESLint config this app used (@eslint/js recommended, typescript-eslint recommended,
+  // eslint-plugin-react-hooks 5 recommended-latest, and eslint-plugin-react-refresh vite).
+  "plugins": ["typescript", "react"],
+  // Only the rules listed below are enabled.
+  "categories": {
+    "correctness": "off"
+  },
+  "options": {
+    "reportUnusedDisableDirectives": "warn"
+  },
+  "overrides": [
+    {
+      // The ESLint config only linted TypeScript files.
+      "files": ["**/*.ts", "**/*.tsx"],
+      "rules": {
+        // eslint:recommended, as typescript-eslint adjusts it for TypeScript files. no-octal has no oxlint
+        // rule: oxlint reports legacy octal literals as a parse error.
+        "for-direction": "error",
+        "no-async-promise-executor": "error",
+        "no-case-declarations": "error",
+        "no-compare-neg-zero": "error",
+        "no-cond-assign": "error",
+        "no-constant-binary-expression": "error",
+        "no-constant-condition": "error",
+        "no-control-regex": "error",
+        "no-debugger": "error",
+        "no-delete-var": "error",
+        "no-dupe-else-if": "error",
+        "no-duplicate-case": "error",
+        "no-empty": "error",
+        "no-empty-character-class": "error",
+        "no-empty-pattern": "error",
+        "no-empty-static-block": "error",
+        "no-ex-assign": "error",
+        "no-extra-boolean-cast": "error",
+        "no-fallthrough": "error",
+        "no-global-assign": "error",
+        "no-invalid-regexp": "error",
+        "no-irregular-whitespace": [
+          "error",
+          {
+            "skipComments": false,
+            "skipJSXText": false,
+            "skipRegExps": false,
+            "skipStrings": true,
+            "skipTemplates": false
+          }
+        ],
+        "no-loss-of-precision": "error",
+        "no-misleading-character-class": "error",
+        "no-nonoctal-decimal-escape": "error",
+        "no-prototype-builtins": "error",
+        "no-regex-spaces": "error",
+        "no-self-assign": "error",
+        "no-shadow-restricted-names": ["error", { "reportGlobalThis": false }],
+        "no-sparse-arrays": "error",
+        "no-unexpected-multiline": "error",
+        "no-unsafe-finally": "error",
+        "no-unsafe-optional-chaining": "error",
+        "no-unused-labels": "error",
+        "no-unused-private-class-members": "error",
+        "no-useless-backreference": "error",
+        "no-useless-catch": "error",
+        "no-useless-escape": "error",
+        "no-var": "error",
+        "prefer-const": "error",
+        "prefer-rest-params": "error",
+        "prefer-spread": "error",
+        "require-yield": "error",
+        "use-isnan": "error",
+        "valid-typeof": "error",
+
+        // typescript-eslint recommended
+        "no-array-constructor": "error",
+        "no-unused-expressions": "error",
+        "no-unused-vars": "error",
+        "typescript/ban-ts-comment": "error",
+        "typescript/no-duplicate-enum-values": "error",
+        "typescript/no-empty-object-type": "error",
+        "typescript/no-explicit-any": "error",
+        "typescript/no-extra-non-null-assertion": "error",
+        "typescript/no-misused-new": "error",
+        "typescript/no-namespace": "error",
+        "typescript/no-non-null-asserted-optional-chain": "error",
+        "typescript/no-require-imports": "error",
+        "typescript/no-this-alias": "error",
+        "typescript/no-unnecessary-type-constraint": "error",
+        "typescript/no-unsafe-declaration-merging": "error",
+        "typescript/no-unsafe-function-type": "error",
+        "typescript/no-wrapper-object-types": "error",
+        "typescript/prefer-as-const": "error",
+        "typescript/prefer-namespace-keyword": "error",
+        "typescript/triple-slash-reference": "error",
+
+        // eslint-plugin-react-hooks recommended
+        "react/exhaustive-deps": "warn",
+        "react/rules-of-hooks": "error",
+
+        // eslint-plugin-react-refresh vite. ESLint's plugin took the PascalCase `Route` export of a TanStack
+        // Router route file for a component; oxlint does not, so the route factories are listed as HOCs.
+        "react/only-export-components": [
+          "error",
+          {
+            "allowConstantExport": true,
+            "customHOCs": ["createFileRoute", "createRootRoute"]
+          }
+        ]
+      }
+    }
+  ],
+  "ignorePatterns": ["dist", "src/routeTree.gen.ts"]
+}