Code formatting with Prettier (#2515)

* wip

* Fix code style

Author: pascalbaljet

.github/workflows/coding-standards.yml

@@ -0,0 +1,31 @@
+name: Coding Standards
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Format code
+        run: pnpm run format
+
+      - name: Commit linted files
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: "Fix code style"

.prettierignore

@@ -1,9 +1,31 @@
-.github/
-pnpm-lock.yaml
+# Dependencies
+node_modules/
+**/vendor/
+
+# Build outputs
+**/dist/
 **/.svelte-kit
 **/bootstrap/ssr
-**/composer.json
-**/composer.lock
-**/dist
-**/public/build
-**/vendor
+
+# Generated files
+*.d.ts
+**/types/
+*.timestamp-*.mjs
+
+# Files we don't want to format
+*.lock
+*.yaml
+*.json
+*.md
+
+# Vue files with parsing issues (dual script blocks)
+packages/vue3/test-app/Pages/PersistentLayouts/RenderFunction/Nested/PageA.vue
+packages/vue3/test-app/Pages/PersistentLayouts/RenderFunction/Nested/PageB.vue
+packages/vue3/test-app/Pages/PersistentLayouts/RenderFunction/Simple/PageA.vue
+packages/vue3/test-app/Pages/PersistentLayouts/RenderFunction/Simple/PageB.vue
+packages/vue3/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageA.vue
+packages/vue3/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageB.vue
+
+# Directories we don't want to format
+.github/
+**/test-results/

package.json

@@ -19,7 +19,8 @@
     "playground:react": "cd playgrounds/react && composer run dev",
     "playground:svelte4": "cd playgrounds/svelte4 && composer run dev",
     "playground:svelte5": "cd playgrounds/svelte5 && composer run dev",
-    "playground:vue": "cd playgrounds/vue3 && composer run dev"
+    "playground:vue": "cd playgrounds/vue3 && composer run dev",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@playwright/test": ">=1.51.0 <1.53.0",

packages/core/src/history.ts

@@ -107,12 +107,10 @@ class History {
           return
         }
 
-        this.doReplaceState(
-          {
-            page: window.history.state.page,
-            scrollRegions,
-          }
-        )
+        this.doReplaceState({
+          page: window.history.state.page,
+          scrollRegions,
+        })
       })
     })
   }
@@ -124,12 +122,10 @@ class History {
           return
         }
 
-        this.doReplaceState(
-          {
-            page: window.history.state.page,
-            documentScrollPosition: scrollRegion,
-          }
-        )
+        this.doReplaceState({
+          page: window.history.state.page,
+          documentScrollPosition: scrollRegion,
+        })
       })
     })
   }

packages/core/src/index.ts

@@ -2,12 +2,12 @@ import { Router } from './router'
 
 export { objectToFormData } from './formData'
 export { formDataToObject } from './formObject'
-export { resetFormFields } from './resetFormFields'
 export { default as createHeadManager } from './head'
 export { hide as hideProgress, reveal as revealProgress, default as setupProgress } from './progress'
+export { resetFormFields } from './resetFormFields'
 export { default as shouldIntercept } from './shouldIntercept'
 export * from './types'
-export { hrefToUrl, mergeDataIntoQueryString, urlWithoutHash, isUrlMethodPair } from './url'
+export { hrefToUrl, isUrlMethodPair, mergeDataIntoQueryString, urlWithoutHash } from './url'
 export { type Router }
 
 export const router = new Router()

packages/core/src/resetFormFields.ts

@@ -165,7 +165,9 @@ export function resetFormFields(formElement: HTMLFormElement, defaults: FormData
   if (!fieldNames || fieldNames.length === 0) {
     // Get all field names from both defaults and form elements (including disabled ones)
     const formData = new FormData(formElement)
-    const formElementNames = Array.from(formElement.elements).map(el => isFormElement(el) ? el.name : '').filter(Boolean)
+    const formElementNames = Array.from(formElement.elements)
+      .map((el) => (isFormElement(el) ? el.name : ''))
+      .filter(Boolean)
     fieldNames = [...new Set([...defaults.keys(), ...formData.keys(), ...formElementNames])]
   }
 

packages/core/src/server.ts

@@ -1,8 +1,8 @@
 import { createServer, IncomingMessage } from 'http'
+import cluster from 'node:cluster'
+import { availableParallelism } from 'node:os'
 import * as process from 'process'
 import { InertiaAppResponse, Page } from './types'
-import cluster from 'node:cluster';
-import { availableParallelism } from 'node:os';
 
 type AppCallback = (page: Page) => InertiaAppResponse
 type RouteHandler = (request: IncomingMessage) => Promise<unknown>
@@ -21,11 +21,15 @@ const readableToString: (readable: IncomingMessage) => Promise<string> = (readab
   })
 
 export default (render: AppCallback, options?: Port | ServerOptions): void => {
-  const _port = typeof options === 'number' ? options : options?.port ?? 13714;
-  const _useCluster = typeof options === 'object' && options?.cluster !== undefined ? options.cluster : false;
+  const _port = typeof options === 'number' ? options : (options?.port ?? 13714)
+  const _useCluster = typeof options === 'object' && options?.cluster !== undefined ? options.cluster : false
 
   const log = (message: string) => {
-    console.log(_useCluster && !cluster.isPrimary ? `[${cluster.worker?.id ?? 'N/A'} / ${cluster.worker?.process?.pid ?? 'N/A'}] ${message}` : message)
+    console.log(
+      _useCluster && !cluster.isPrimary
+        ? `[${cluster.worker?.id ?? 'N/A'} / ${cluster.worker?.process?.pid ?? 'N/A'}] ${message}`
+        : message,
+    )
   }
 
   if (_useCluster && cluster.isPrimary) {

packages/core/src/types.ts

@@ -60,8 +60,9 @@ export type FormDataKeys<T> = T extends Function | FormDataConvertibleValue
               [Key in Extract<keyof T, `${number}`>]: `${Key & string}.${FormDataKeys<T[Key & string]> & string}`
             }[Extract<keyof T, `${number}`>]
     : string extends keyof T
-        ? string
-        : | Extract<keyof T, string>
+      ? string
+      :
+          | Extract<keyof T, string>
           | {
               [Key in Extract<keyof T, string>]: `${Key}.${FormDataKeys<T[Key]> & string}`
             }[Extract<keyof T, string>]
@@ -273,13 +274,25 @@ export type PageEvent = 'newComponent' | 'firstLoad'
 
 export type GlobalEventNames<T extends RequestPayload = RequestPayload> = keyof GlobalEventsMap<T>
 
-export type GlobalEvent<TEventName extends GlobalEventNames<T>, T extends RequestPayload = RequestPayload> = CustomEvent<GlobalEventDetails<TEventName, T>>
-
-export type GlobalEventParameters<TEventName extends GlobalEventNames<T>, T extends RequestPayload = RequestPayload> = GlobalEventsMap<T>[TEventName]['parameters']
-
-export type GlobalEventResult<TEventName extends GlobalEventNames<T>, T extends RequestPayload = RequestPayload> = GlobalEventsMap<T>[TEventName]['result']
-
-export type GlobalEventDetails<TEventName extends GlobalEventNames<T>, T extends RequestPayload = RequestPayload> = GlobalEventsMap<T>[TEventName]['details']
+export type GlobalEvent<
+  TEventName extends GlobalEventNames<T>,
+  T extends RequestPayload = RequestPayload,
+> = CustomEvent<GlobalEventDetails<TEventName, T>>
+
+export type GlobalEventParameters<
+  TEventName extends GlobalEventNames<T>,
+  T extends RequestPayload = RequestPayload,
+> = GlobalEventsMap<T>[TEventName]['parameters']
+
+export type GlobalEventResult<
+  TEventName extends GlobalEventNames<T>,
+  T extends RequestPayload = RequestPayload,
+> = GlobalEventsMap<T>[TEventName]['result']
+
+export type GlobalEventDetails<
+  TEventName extends GlobalEventNames<T>,
+  T extends RequestPayload = RequestPayload,
+> = GlobalEventsMap<T>[TEventName]['details']
 
 export type GlobalEventTrigger<TEventName extends GlobalEventNames<T>, T extends RequestPayload = RequestPayload> = (
   ...params: GlobalEventParameters<TEventName, T>

packages/react/src/index.ts

@@ -6,7 +6,14 @@ export { default as Deferred } from './Deferred'
 export { default as Form } from './Form'
 export { default as Head } from './Head'
 export { InertiaLinkProps, default as Link } from './Link'
-export { InertiaFormProps, SetDataByObject, SetDataByMethod, SetDataByKeyValuePair, SetDataAction, default as useForm } from './useForm'
+export {
+  InertiaFormProps,
+  SetDataAction,
+  SetDataByKeyValuePair,
+  SetDataByMethod,
+  SetDataByObject,
+  default as useForm,
+} from './useForm'
 export { default as usePage } from './usePage'
 export { default as usePoll } from './usePoll'
 export { default as usePrefetch } from './usePrefetch'

packages/react/test-app/Pages/Article.tsx

@@ -19,8 +19,8 @@ export default () => {
 
   return (
     <>
-      <h1 style={{ 'fontSize': '40px', }}>Article Header</h1>
-      <article style={{ 'fontSize': '20px', 'maxWidth': '500px' }}>
+      <h1 style={{ fontSize: '40px' }}>Article Header</h1>
+      <article style={{ fontSize: '20px', maxWidth: '500px' }}>
         <p>
           Sunt culpa sit sunt enim aliquip. Esse ea ea quis voluptate. Enim consectetur aliqua ex ex magna cupidatat id
           minim sit elit. Amet pariatur occaecat pariatur duis eiusmod dolore magna. Et commodo cupidatat in commodo
@@ -82,26 +82,33 @@ export default () => {
         </p>
         <h2 id="far-down">Far down</h2>
         <p>
-          Ex eiusmod id est laborum sunt ex ea aute adipisicing ad magna deserunt duis. Nostrud velit dolore id commodo quis
-          enim fugiat. Sint non quis consectetur voluptate aliqua dolore ad voluptate nulla. Irure sit reprehenderit sint
-          laboris non elit. Duis minim nisi esse dolor. Sit ex in consequat non occaecat commodo irure et. Commodo qui ipsum
-          Lorem magna consequat consequat et minim eiusmod Lorem eiusmod cupidatat voluptate.
+          Ex eiusmod id est laborum sunt ex ea aute adipisicing ad magna deserunt duis. Nostrud velit dolore id commodo
+          quis enim fugiat. Sint non quis consectetur voluptate aliqua dolore ad voluptate nulla. Irure sit
+          reprehenderit sint laboris non elit. Duis minim nisi esse dolor. Sit ex in consequat non occaecat commodo
+          irure et. Commodo qui ipsum Lorem magna consequat consequat et minim eiusmod Lorem eiusmod cupidatat
+          voluptate.
         </p>
       </article>
 
       <div className="document-position">Scroll log: {JSON.stringify(scrollLog)}</div>
 
-      <Link id="home" data-testid="home" href="/"> Home </Link>
+      <Link id="home" data-testid="home" href="/">
+        {' '}
+        Home{' '}
+      </Link>
 
-      <Link id="article-far-down" data-testid="article-far-down" href="/article#far-down"> Article Far Down </Link>
+      <Link id="article-far-down" data-testid="article-far-down" href="/article#far-down">
+        {' '}
+        Article Far Down{' '}
+      </Link>
 
       <button id="enable-smooth-scroll" data-testid="enable-smooth-scroll" onClick={enableSmoothScroll}>
         Enable Smooth Scroll
-      </button >
+      </button>
 
       <button id="clear-scroll-log" data-testid="clear-scroll-log" onClick={() => setScrollLog([])}>
         Clear Scroll Log
       </button>
     </>
   )
-}
+}