feat: add @tanstack/oxfmt-config

.changeset/oxfmt-config.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/oxfmt-config': minor
+---
+
+Add `@tanstack/oxfmt-config`, a shared Oxfmt config used by TanStack projects

.github/comment-on-release/comment-on-release.ts

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
+import { execSync } from 'node:child_process'
 import { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
-import { execSync } from 'node:child_process'
 
 interface PublishedPackage {
   name: string

docs/config.json

@@ -22,6 +22,10 @@
           "label": "Oxlint",
           "to": "oxlint"
         },
+        {
+          "label": "Oxfmt",
+          "to": "oxfmt"
+        },
         {
           "label": "ESLint",
           "to": "eslint"

docs/overview.md

@@ -19,6 +19,7 @@ The following tools are required to use these packages:
 ## Utilities
 
 - [Oxlint](./oxlint.md)
+- [Oxfmt](./oxfmt.md)
 - [ESLint](./eslint.md)
 - [Publish](./publish.md)
 - [Vite](./vite.md)

docs/oxfmt.md

@@ -0,0 +1,37 @@
+---
+id: oxfmt
+title: Oxfmt
+---
+
+## Purpose
+
+This package unifies the shared [Oxfmt](https://oxc.rs/docs/guide/usage/formatter) config used across all TanStack projects.
+
+## Installation
+
+To install the package, run the following command:
+
+```bash
+pnpm add -D @tanstack/oxfmt-config
+```
+
+## Setup
+
+### package.json
+
+- Make sure you have Oxfmt v0.72.0+ installed
+
+### oxfmt.config.ts
+
+```ts
+import { tanstackConfig } from '@tanstack/oxfmt-config'
+import { defineConfig } from 'oxfmt'
+
+export default defineConfig({
+  ...tanstackConfig,
+  ignorePatterns: [
+    ...tanstackConfig.ignorePatterns,
+    // Custom ignore patterns go here
+  ],
+})
+```

docs/vite.md

@@ -74,8 +74,8 @@ The build config is opinionated, and was designed to work with our internal libr
 - See an example below:
 
 ```ts
-import { defineConfig, mergeConfig } from 'vite'
 import { tanstackViteConfig } from '@tanstack/vite-config'
+import { defineConfig, mergeConfig } from 'vite'
 
 const config = defineConfig({
   // Framework plugins, vitest config, etc.

integrations/react/tests/build.test.ts

@@ -1,6 +1,6 @@
 import { existsSync, readFileSync, readdirSync } from 'node:fs'
-import { fileURLToPath } from 'node:url'
 import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))

integrations/react/vite.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig, mergeConfig } from 'vitest/config'
-import react from '@vitejs/plugin-react'
 import { tanstackViteConfig } from '@tanstack/vite-config'
+import react from '@vitejs/plugin-react'
+import { defineConfig, mergeConfig } from 'vitest/config'
 
 const config = defineConfig({
   plugins: [react()],

integrations/vanilla/tests/build.test.ts

@@ -1,6 +1,6 @@
 import { existsSync, readFileSync, readdirSync } from 'node:fs'
-import { fileURLToPath } from 'node:url'
 import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))

integrations/vanilla/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig, mergeConfig } from 'vitest/config'
 import { tanstackViteConfig } from '@tanstack/vite-config'
+import { defineConfig, mergeConfig } from 'vitest/config'
 
 const config = defineConfig({
   test: {

integrations/vue/tests/build.test.ts

@@ -1,6 +1,6 @@
 import { existsSync, readFileSync, readdirSync } from 'node:fs'
-import { fileURLToPath } from 'node:url'
 import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))

integrations/vue/vite.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig, mergeConfig } from 'vitest/config'
-import vue from '@vitejs/plugin-vue'
 import { tanstackViteConfig } from '@tanstack/vite-config'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig, mergeConfig } from 'vitest/config'
 
 const config = defineConfig({
   plugins: [vue()],

oxfmt.config.ts

@@ -0,0 +1,7 @@
+import { tanstackConfig } from '@tanstack/oxfmt-config'
+import { defineConfig } from 'oxfmt'
+
+export default defineConfig({
+  ...tanstackConfig,
+  ignorePatterns: [...tanstackConfig.ignorePatterns, '**/snap'],
+})

package.json

@@ -24,7 +24,7 @@
     "build:all": "nx run-many --target=build",
     "watch": "pnpm run build:all && nx watch --all -- pnpm run build:all",
     "dev": "pnpm run watch",
-    "format": "prettier --experimental-cli --ignore-unknown '**/*' --write",
+    "format": "oxfmt",
     "changeset": "changeset",
     "changeset:version": "changeset version && pnpm install --no-frozen-lockfile && pnpm format",
     "changeset:publish": "changeset publish"
@@ -39,12 +39,13 @@
     "@arethetypeswrong/core": "catalog:",
     "@changesets/changelog-github": "catalog:",
     "@changesets/cli": "catalog:",
+    "@tanstack/oxfmt-config": "workspace:*",
     "@types/node": "catalog:",
     "jsdom": "catalog:",
     "markdown-link-extractor": "catalog:",
     "nx": "catalog:",
+    "oxfmt": "catalog:",
     "premove": "catalog:",
-    "prettier": "catalog:",
     "publint": "catalog:",
     "sherif": "catalog:",
     "tinyglobby": "catalog:",

packages/eslint-config/oxlint.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'oxlint'
 import { tanstackConfig } from '@tanstack/oxlint-config'
+import { defineConfig } from 'oxlint'
 
 export default defineConfig({
   extends: [tanstackConfig],

packages/eslint-config/src/index.ts

@@ -1,14 +1,14 @@
-import tseslint from 'typescript-eslint'
-import vueParser from 'vue-eslint-parser'
 import stylisticPlugin from '@stylistic/eslint-plugin'
 import importPlugin from 'eslint-plugin-import-x'
 import nodePlugin from 'eslint-plugin-n'
 import globals from 'globals'
-import { javascriptRules } from './javascript.js'
+import tseslint from 'typescript-eslint'
+import vueParser from 'vue-eslint-parser'
 import { importRules } from './import.js'
-import { typescriptRules } from './typescript.js'
+import { javascriptRules } from './javascript.js'
 import { nodeRules } from './node.js'
 import { stylisticRules } from './stylistic.js'
+import { typescriptRules } from './typescript.js'
 import type { Linter } from 'eslint'
 
 const GLOB_EXCLUDE = [

packages/oxfmt-config/oxlint.config.ts

@@ -0,0 +1,8 @@
+import { tanstackConfig } from '@tanstack/oxlint-config'
+import { defineConfig } from 'oxlint'
+
+export default defineConfig({
+  extends: [tanstackConfig],
+  env: tanstackConfig.env,
+  ignorePatterns: tanstackConfig.ignorePatterns,
+})

packages/oxfmt-config/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@tanstack/oxfmt-config",
+  "version": "0.0.0",
+  "description": "Shared Oxfmt config used by TanStack projects.",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/config.git",
+    "directory": "packages/oxfmt-config"
+  },
+  "homepage": "https://tanstack.com/config",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "scripts": {
+    "test:types": "tsc",
+    "test:oxlint": "oxlint ./src",
+    "build": "tsdown"
+  },
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "exports": {
+      ".": "./dist/index.js",
+      "./package.json": "./package.json"
+    }
+  },
+  "preferGlobal": false,
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "devDependencies": {
+    "@tanstack/oxlint-config": "workspace:*",
+    "oxfmt": "catalog:",
+    "oxlint": "catalog:",
+    "oxlint-tsgolint": "catalog:"
+  },
+  "peerDependencies": {
+    "oxfmt": ">=0.72.0 <1.0.0"
+  }
+}

packages/oxfmt-config/src/index.ts

@@ -0,0 +1,47 @@
+import type { OxfmtConfig } from 'oxfmt'
+
+const GLOB_EXCLUDE = [
+  '**/.next',
+  '**/.nx/cache',
+  '**/.svelte-kit',
+  '**/build',
+  '**/coverage',
+  '**/dist',
+  '.changeset/*.md',
+  'pnpm-lock.yaml',
+]
+
+/**
+ * @see https://oxc.rs/docs/guide/usage/formatter/config-file-reference
+ */
+export const tanstackConfig: OxfmtConfig & { ignorePatterns: Array<string> } = {
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'all',
+  printWidth: 80,
+  sortPackageJson: false,
+  /** Matches `import/order` from `@tanstack/eslint-config` */
+  sortImports: {
+    /** Same group order as `import/order`, with type imports split by origin */
+    groups: [
+      'builtin',
+      'external',
+      ['internal', 'subpath'],
+      'parent',
+      'sibling',
+      'index',
+      'type-builtin',
+      'type-external',
+      ['type-internal', 'type-subpath'],
+      'type-parent',
+      'type-sibling',
+      'type-index',
+      'unknown',
+    ],
+    /** `import/order` does not enforce newlines between groups */
+    newlinesBetween: false,
+    /** Case-sensitive, like `sort-imports` */
+    ignoreCase: false,
+  },
+  ignorePatterns: GLOB_EXCLUDE,
+}

packages/oxfmt-config/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "isolatedDeclarations": true
+  },
+  "include": ["src"]
+}

packages/oxfmt-config/tsdown.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'tsdown'
+
+export default defineConfig({
+  entry: ['./src/index.ts'],
+  format: ['esm'],
+  platform: 'node',
+  unbundle: true,
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  minify: false,
+  fixedExtension: false,
+  exports: {
+    devExports: true,
+  },
+  publint: {
+    strict: true,
+  },
+  attw: {
+    profile: 'esm-only',
+    level: 'error',
+  },
+})

packages/oxlint-config/oxlint.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'oxlint'
 import { tanstackConfig } from '@tanstack/oxlint-config'
+import { defineConfig } from 'oxlint'
 
 export default defineConfig({
   extends: [tanstackConfig],

packages/oxlint-config/src/index.ts

@@ -1,9 +1,9 @@
 import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'oxlint'
-import { javascriptRules } from './javascript.ts'
 import { importRules } from './import.ts'
-import { typescriptRules } from './typescript.ts'
+import { javascriptRules } from './javascript.ts'
 import { nodeRules } from './node.ts'
+import { typescriptRules } from './typescript.ts'
 import type { OxlintConfig } from 'oxlint'
 
 /**

packages/publish-config/oxlint.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'oxlint'
 import { tanstackConfig } from '@tanstack/oxlint-config'
+import { defineConfig } from 'oxlint'
 
 export default defineConfig({
   extends: [tanstackConfig],

packages/publish-config/src/index.js

@@ -1,12 +1,12 @@
 // @ts-check
 // Originally ported to TS from https://github.com/remix-run/react-router/tree/main/scripts/{version,publish}.js
 
-import path from 'node:path'
 import { execSync } from 'node:child_process'
 import { existsSync, readdirSync } from 'node:fs'
 import { platform } from 'node:os'
-import * as semver from 'semver'
+import path from 'node:path'
 import { parse as parseCommit } from '@commitlint/parse'
+import * as semver from 'semver'
 import { simpleGit } from 'simple-git'
 import {
   capitalize,

packages/typedoc-config/oxlint.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'oxlint'
 import { tanstackConfig } from '@tanstack/oxlint-config'
+import { defineConfig } from 'oxlint'
 
 export default defineConfig({
   extends: [tanstackConfig],

packages/typedoc-config/src/index.ts

@@ -1,6 +1,6 @@
+import { mkdir, rm } from 'node:fs/promises'
 import { resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { mkdir, rm } from 'node:fs/promises'
 import * as TypeDoc from 'typedoc'
 import type { PluginOptions } from 'typedoc-plugin-markdown'
 import type { Options } from './types.ts'