chore: setup oxfmt for formatting

.oxfmtrc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "semi": false,
+  "singleQuote": true
+}

eslint.config.js

@@ -9,12 +9,7 @@ import globals from 'globals'
 
 export default tseslint.config(
   {
-    ignores: [
-      '**/dist/**',
-      '**/playground-temp/**',
-      '**/temp/**',
-      'packages/plugin-rsc/**',
-    ],
+    ignores: ['**/dist/**', '**/playground-temp/**', '**/temp/**', 'packages/plugin-rsc/**'],
   },
   eslint.configs.recommended,
   ...tseslint.configs.recommended,
@@ -65,10 +60,7 @@ export default tseslint.config(
         'error',
         { allowArgumentsExplicitlyTypedAsAny: true },
       ],
-      '@typescript-eslint/no-empty-function': [
-        'error',
-        { allow: ['arrowFunctions'] },
-      ],
+      '@typescript-eslint/no-empty-function': ['error', { allow: ['arrowFunctions'] }],
       '@typescript-eslint/no-empty-interface': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       'no-extra-semi': 'off',

package.json

@@ -18,7 +18,7 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "postinstall": "simple-git-hooks",
-    "format": "prettier --write --cache .",
+    "format": "oxfmt",
     "lint": "eslint --cache .",
     "typecheck": "tsc -p scripts && tsc -p playground && tsc -p packages/plugin-react",
     "test": "pnpm run test-unit && pnpm run test-serve && pnpm run test-build && pnpm --filter ./packages/plugin-react-swc run test",
@@ -44,6 +44,7 @@
     "fs-extra": "^11.3.2",
     "globals": "^16.5.0",
     "lint-staged": "^16.2.7",
+    "oxfmt": "^0.16.0",
     "picocolors": "^1.1.1",
     "playwright-chromium": "^1.57.0",
     "prettier": "^3.6.2",
@@ -58,8 +59,8 @@
     "pre-commit": "pnpm exec lint-staged --concurrent false"
   },
   "lint-staged": {
-    "*": [
-      "prettier --write --cache --ignore-unknown"
+    "*.{js,mjs,cjs,jsx,ts,mts,cts,tsx,vue,astro,svelte,json,jsonc}": [
+      "oxfmt"
     ],
     "packages/*/{src,types}/**/*.ts": [
       "eslint --cache --fix"

packages/common/refresh-runtime.js

@@ -190,9 +190,7 @@ function performReactRefresh() {
     failedRootsSnapshot.forEach((root) => {
       const helpers = helpersByRootSnapshot.get(root)
       if (helpers === undefined) {
-        throw new Error(
-          'Could not find helpers for a root. This is a bug in React Refresh.',
-        )
+        throw new Error('Could not find helpers for a root. This is a bug in React Refresh.')
       }
       if (!failedRoots.has(root)) {
         // No longer failed.
@@ -217,9 +215,7 @@ function performReactRefresh() {
     mountedRootsSnapshot.forEach((root) => {
       const helpers = helpersByRootSnapshot.get(root)
       if (helpers === undefined) {
-        throw new Error(
-          'Could not find helpers for a root. This is a bug in React Refresh.',
-        )
+        throw new Error('Could not find helpers for a root. This is a bug in React Refresh.')
       }
       if (!mountedRoots.has(root)) {
         // No longer mounted.
@@ -405,8 +401,7 @@ export function injectIntoGlobalHook(globalObject) {
           alternate.memoizedState.element != null &&
           mountedRoots.has(root)
 
-        const isMounted =
-          current.memoizedState != null && current.memoizedState.element != null
+        const isMounted = current.memoizedState != null && current.memoizedState.element != null
 
         if (!wasMounted && isMounted) {
           // Mount a new root.
@@ -481,10 +476,7 @@ export function createSignatureFunctionForTransform() {
       // Set the signature for all types (even wrappers!) in case
       // they have no signatures of their own. This is to prevent
       // problems like https://github.com/facebook/react/issues/20417.
-      if (
-        type != null &&
-        (typeof type === 'function' || typeof type === 'object')
-      ) {
+      if (type != null && (typeof type === 'function' || typeof type === 'object')) {
         setSignature(type, key, forceReset, getCustomHooks)
       }
       return type
@@ -578,10 +570,7 @@ export function registerExportsForReactRefresh(filename, moduleExports) {
       register(exportValue, filename + ' export ' + key)
     } else if (isCompoundComponent(exportValue)) {
       for (const subKey in exportValue) {
-        register(
-          exportValue[subKey],
-          filename + ' export ' + key + '-' + subKey,
-        )
+        register(exportValue[subKey], filename + ' export ' + key + '-' + subKey)
       }
     }
   }
@@ -604,28 +593,12 @@ const enqueueUpdate = debounce(async () => {
   performReactRefresh()
 }, 16)
 
-export function validateRefreshBoundaryAndEnqueueUpdate(
-  id,
-  prevExports,
-  nextExports,
-) {
+export function validateRefreshBoundaryAndEnqueueUpdate(id, prevExports, nextExports) {
   const ignoredExports = window.__getReactRefreshIgnoredExports?.({ id }) ?? []
-  if (
-    predicateOnExport(
-      ignoredExports,
-      prevExports,
-      (key) => key in nextExports,
-    ) !== true
-  ) {
+  if (predicateOnExport(ignoredExports, prevExports, (key) => key in nextExports) !== true) {
     return 'Could not Fast Refresh (export removed)'
   }
-  if (
-    predicateOnExport(
-      ignoredExports,
-      nextExports,
-      (key) => key in prevExports,
-    ) !== true
-  ) {
+  if (predicateOnExport(ignoredExports, nextExports, (key) => key in prevExports) !== true) {
     return 'Could not Fast Refresh (new export)'
   }
 

packages/common/refresh-utils.ts

@@ -14,8 +14,7 @@ injectIntoGlobalHook(window);
 window.$RefreshReg$ = () => {};
 window.$RefreshSig$ = () => (type) => type;`
 
-export const getPreambleCode = (base: string): string =>
-  preambleCode.replace('__BASE__', base)
+export const getPreambleCode = (base: string): string => preambleCode.replace('__BASE__', base)
 
 export function addRefreshWrapper(
   code: string,
@@ -41,9 +40,7 @@ if (import.meta.hot && !inWebWorker) {
   }
 
   RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
-    RefreshRuntime.registerExportsForReactRefresh(${JSON.stringify(
-      id,
-    )}, currentExports);
+    RefreshRuntime.registerExportsForReactRefresh(${JSON.stringify(id)}, currentExports);
     import.meta.hot.accept((nextExports) => {
       if (!nextExports) return;
       const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(${JSON.stringify(

packages/common/warning.ts

@@ -1,14 +1,11 @@
 import type { BuildOptions, UserConfig } from 'vite'
 
-export const silenceUseClientWarning = (
-  userConfig: UserConfig,
-): BuildOptions => ({
+export const silenceUseClientWarning = (userConfig: UserConfig): BuildOptions => ({
   rollupOptions: {
     onwarn(warning, defaultHandler) {
       if (
         warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
-        (warning.message.includes('use client') ||
-          warning.message.includes('use server'))
+        (warning.message.includes('use client') || warning.message.includes('use server'))
       ) {
         return
       }

packages/plugin-react-oxc/src/index.ts

@@ -51,12 +51,7 @@ export default function viteReact(opts: Options = {}): Plugin[] {
           jsxRefreshExclude: exclude,
         },
         optimizeDeps: {
-          include: [
-            'react',
-            'react-dom',
-            jsxImportDevRuntime,
-            jsxImportRuntime,
-          ],
+          include: ['react', 'react-dom', jsxImportDevRuntime, jsxImportRuntime],
           rolldownOptions: { transform: { jsx: { runtime: 'automatic' } } },
         },
       }
@@ -134,9 +129,7 @@ export default function viteReact(opts: Options = {}): Plugin[] {
         const useFastRefresh =
           !skipFastRefresh &&
           !ssr &&
-          (isJSX ||
-            code.includes(jsxImportDevRuntime) ||
-            code.includes(jsxImportRuntime))
+          (isJSX || code.includes(jsxImportDevRuntime) || code.includes(jsxImportRuntime))
         if (!useFastRefresh) return
 
         const newCode = addRefreshWrapper(code, '@vitejs/plugin-react-oxc', id)

packages/plugin-react-swc/playground/emotion-plugin/__tests__/emotion-plugin.spec.ts

@@ -1,10 +1,5 @@
 import { expect, test } from '@playwright/test'
-import {
-  expectColor,
-  setupBuildAndPreview,
-  setupDevServer,
-  setupWaitForLogs,
-} from '../../utils.ts'
+import { expectColor, setupBuildAndPreview, setupDevServer, setupWaitForLogs } from '../../utils.ts'
 
 test('Emotion plugin build', async ({ page }) => {
   const { testUrl, server } = await setupBuildAndPreview('emotion-plugin')
@@ -39,10 +34,7 @@ test('Emotion plugin HMR', async ({ page }) => {
   const code = page.locator('code')
   await expectColor(code, 'color', '#646cff')
 
-  editFile('src/Button.jsx', [
-    'background-color: #d26ac2;',
-    'background-color: #646cff;',
-  ])
+  editFile('src/Button.jsx', ['background-color: #d26ac2;', 'background-color: #646cff;'])
   await waitForLogs('[vite] hot updated: /src/Button.jsx')
   await expect(button).toHaveText('count is 1')
   await expectColor(button, 'backgroundColor', '#646cff')

packages/plugin-react-swc/playground/emotion-plugin/src/App.jsx

@@ -8,11 +8,7 @@ export const App = () => (
         <img src="/vite.svg" className="logo" alt="Vite logo" />
       </a>
       <a href="https://emotion.sh/" target="_blank" rel="noreferrer">
-        <img
-          src="https://emotion.sh/logo-96x96.png"
-          className="logo emotion"
-          alt="Emotion logo"
-        />
+        <img src="https://emotion.sh/logo-96x96.png" className="logo emotion" alt="Emotion logo" />
       </a>
     </div>
     <div className="card">
@@ -21,8 +17,6 @@ export const App = () => (
         Edit <StyledCode>src/Button.tsx</StyledCode> and save to test HMR
       </p>
     </div>
-    <p className="read-the-docs">
-      Click on the Vite and Emotion logos to learn more
-    </p>
+    <p className="read-the-docs">Click on the Vite and Emotion logos to learn more</p>
   </div>
 )

packages/plugin-react-swc/playground/emotion/__tests__/emotion.spec.ts

@@ -1,10 +1,5 @@
 import { expect, test } from '@playwright/test'
-import {
-  expectColor,
-  setupBuildAndPreview,
-  setupDevServer,
-  setupWaitForLogs,
-} from '../../utils.ts'
+import { expectColor, setupBuildAndPreview, setupDevServer, setupWaitForLogs } from '../../utils.ts'
 
 test('Emotion build', async ({ page }) => {
   const { testUrl, server } = await setupBuildAndPreview('emotion')
@@ -39,10 +34,7 @@ test('Emotion HMR', async ({ page }) => {
   const code = page.locator('code')
   await expectColor(code, 'color', '#646cff')
 
-  editFile('src/Button.tsx', [
-    'background-color: #d26ac2;',
-    'background-color: #646cff;',
-  ])
+  editFile('src/Button.tsx', ['background-color: #d26ac2;', 'background-color: #646cff;'])
   await waitForLogs('[vite] hot updated: /src/Button.tsx')
   await expect(button).toHaveText('count is 1')
   await expectColor(button, 'backgroundColor', '#646cff')

packages/plugin-react-swc/playground/emotion/src/App.tsx

@@ -8,11 +8,7 @@ export const App = () => (
         <img src="/vite.svg" className="logo" alt="Vite logo" />
       </a>
       <a href="https://emotion.sh/" target="_blank" rel="noreferrer">
-        <img
-          src="https://emotion.sh/logo-96x96.png"
-          className="logo emotion"
-          alt="Emotion logo"
-        />
+        <img src="https://emotion.sh/logo-96x96.png" className="logo emotion" alt="Emotion logo" />
       </a>
     </div>
     <div className="card">
@@ -21,8 +17,6 @@ export const App = () => (
         Edit <StyledCode>src/Button.tsx</StyledCode> and save to test HMR
       </p>
     </div>
-    <p className="read-the-docs">
-      Click on the Vite and Emotion logos to learn more
-    </p>
+    <p className="read-the-docs">Click on the Vite and Emotion logos to learn more</p>
   </div>
 )

packages/plugin-react-swc/playground/hmr/__tests__/hmr.spec.ts

@@ -1,9 +1,5 @@
 import { expect, test } from '@playwright/test'
-import {
-  setupBuildAndPreview,
-  setupDevServer,
-  setupWaitForLogs,
-} from '../../utils.ts'
+import { setupBuildAndPreview, setupDevServer, setupWaitForLogs } from '../../utils.ts'
 
 test('Default build', async ({ page }) => {
   const { testUrl, server } = await setupBuildAndPreview('hmr')
@@ -41,10 +37,7 @@ test('HMR invalidate', async ({ page }) => {
   await expect(page.locator('h1')).toHaveText('Vite * React!')
 
   // Add non-component export
-  editFile('src/TitleWithExport.tsx', [
-    "React!'",
-    "React!'\nexport const useless = 3",
-  ])
+  editFile('src/TitleWithExport.tsx', ["React!'", "React!'\nexport const useless = 3"])
   await waitForLogs(
     '[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh (new export)',
     '[vite] hot updated: /src/App.tsx',
@@ -67,10 +60,7 @@ test('HMR invalidate', async ({ page }) => {
   await expect(page.locator('h2')).toHaveText('Title2')
 
   // Remove component export
-  editFile('src/TitleWithExport.tsx', [
-    '\nexport const Title2 = () => <h2>Title2</h2>',
-    '',
-  ])
+  editFile('src/TitleWithExport.tsx', ['\nexport const Title2 = () => <h2>Title2</h2>', ''])
   await waitForLogs(
     '[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh (export removed)',
     '[vite] hot updated: /src/App.tsx',

packages/plugin-react-swc/playground/hmr/src/App.tsx

@@ -23,9 +23,7 @@ export const App = () => {
           Edit <code>src/App.tsx</code> and save to test HMR
         </p>
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and {framework} logos to learn more
-      </p>
+      <p className="read-the-docs">Click on the Vite and {framework} logos to learn more</p>
     </div>
   )
 }

packages/plugin-react-swc/playground/mdx/__tests__/mdx.spec.ts

@@ -1,9 +1,5 @@
 import { expect, test } from '@playwright/test'
-import {
-  setupBuildAndPreview,
-  setupDevServer,
-  setupWaitForLogs,
-} from '../../utils.ts'
+import { setupBuildAndPreview, setupDevServer, setupWaitForLogs } from '../../utils.ts'
 
 test('MDX build', async ({ page }) => {
   const { testUrl, server } = await setupBuildAndPreview('mdx')

packages/plugin-react-swc/playground/react-18/__tests__/react-18.spec.ts

@@ -1,9 +1,5 @@
 import { expect, test } from '@playwright/test'
-import {
-  setupBuildAndPreview,
-  setupDevServer,
-  setupWaitForLogs,
-} from '../../utils.ts'
+import { setupBuildAndPreview, setupDevServer, setupWaitForLogs } from '../../utils.ts'
 
 test('Default build', async ({ page }) => {
   const { testUrl, server } = await setupBuildAndPreview('react-18')
@@ -41,10 +37,7 @@ test('HMR invalidate', async ({ page }) => {
   await expect(page.locator('h1')).toHaveText('Vite * React!')
 
   // Add non-component export
-  editFile('src/TitleWithExport.tsx', [
-    "React!'",
-    "React!'\nexport const useless = 3",
-  ])
+  editFile('src/TitleWithExport.tsx', ["React!'", "React!'\nexport const useless = 3"])
   await waitForLogs(
     '[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh (new export)',
     '[vite] hot updated: /src/App.tsx',
@@ -67,10 +60,7 @@ test('HMR invalidate', async ({ page }) => {
   await expect(page.locator('h2')).toHaveText('Title2')
 
   // Remove component export
-  editFile('src/TitleWithExport.tsx', [
-    '\nexport const Title2 = () => <h2>Title2</h2>',
-    '',
-  ])
+  editFile('src/TitleWithExport.tsx', ['\nexport const Title2 = () => <h2>Title2</h2>', ''])
   await waitForLogs(
     '[vite] invalidate /src/TitleWithExport.tsx: Could not Fast Refresh (export removed)',
     '[vite] hot updated: /src/App.tsx',