chore: add printWidth 80 and enable experimentalSortImports

Co-authored-by: hi-ogawa <4232207+hi-ogawa@users.noreply.github.com>

Author: Copilot

.oxfmtrc.json

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

eslint.config.js

@@ -1,15 +1,20 @@
-// @ts-check
-import { builtinModules } from 'node:module'
 import eslint from '@eslint/js'
-import pluginN from 'eslint-plugin-n'
 import pluginImportX from 'eslint-plugin-import-x'
+import pluginN from 'eslint-plugin-n'
 import pluginRegExp from 'eslint-plugin-regexp'
-import tseslint from 'typescript-eslint'
 import globals from 'globals'
+// @ts-check
+import { builtinModules } from 'node:module'
+import tseslint from 'typescript-eslint'
 
 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,
@@ -60,7 +65,10 @@ 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',
@@ -95,17 +103,18 @@ export default tseslint.config(
         { allow: builtinModules.map((mod) => `node:${mod}`) },
       ],
       'import-x/no-duplicates': 'error',
-      'import-x/order': 'error',
-      'sort-imports': [
-        'error',
-        {
-          ignoreCase: false,
-          ignoreDeclarationSort: true,
-          ignoreMemberSort: false,
-          memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
-          allowSeparatedGroups: false,
-        },
-      ],
+      // import ordering handled by oxfmt
+      // 'import-x/order': 'error',
+      // 'sort-imports': [
+      //   'error',
+      //   {
+      //     ignoreCase: false,
+      //     ignoreDeclarationSort: true,
+      //     ignoreMemberSort: false,
+      //     memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
+      //     allowSeparatedGroups: false,
+      //   },
+      // ],
 
       'regexp/prefer-regexp-exec': 'error',
       'regexp/prefer-regexp-test': 'error',

packages/common/refresh-runtime.js

@@ -190,7 +190,9 @@ 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.
@@ -215,7 +217,9 @@ 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.
@@ -401,7 +405,8 @@ 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.
@@ -476,7 +481,10 @@ 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
@@ -570,7 +578,10 @@ 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,
+        )
       }
     }
   }
@@ -593,12 +604,28 @@ 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

@@ -1,4 +1,5 @@
 import type { Plugin } from 'vite'
+
 import { exactRegex } from '@rolldown/pluginutils'
 
 export const runtimePublicPath = '/@react-refresh'
@@ -14,7 +15,8 @@ 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,

packages/common/warning.ts

@@ -1,11 +1,14 @@
 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

@@ -1,14 +1,15 @@
-import { dirname, join } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { readFileSync } from 'node:fs'
 import type { BuildOptions, Plugin } from 'vite'
+
+import { exactRegex } from '@rolldown/pluginutils'
 import {
   addRefreshWrapper,
   getPreambleCode,
   runtimePublicPath,
   silenceUseClientWarning,
 } from '@vitejs/react-common'
-import { exactRegex } from '@rolldown/pluginutils'
+import { readFileSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 const _dirname = dirname(fileURLToPath(import.meta.url))
 const refreshRuntimePath = join(_dirname, 'refresh-runtime.js')
@@ -51,7 +52,12 @@ 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' } } },
         },
       }
@@ -129,7 +135,9 @@ 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/base-path/__tests__/base-path.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from '@playwright/test'
+
 import { setupDevServer, setupWaitForLogs } from '../../utils.ts'
 
 test('Base path HMR', async ({ page }) => {

packages/plugin-react-swc/playground/base-path/src/index.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+
 import { App } from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(

packages/plugin-react-swc/playground/base-path/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [react()],

packages/plugin-react-swc/playground/class-components/__tests__/class-components.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from '@playwright/test'
+
 import { setupDevServer, setupWaitForLogs } from '../../utils.ts'
 
 test('Class component HMR', async ({ page }) => {