Run pnpm format using new oxfmt version (#359)

Author: onlywei

docs/guide/getting-started.md

@@ -65,7 +65,7 @@ const server = Fastify()
 await server.register(FastifyVite, {
   root: import.meta.dirname, // where to look for vite.config.js
   dev: process.argv.includes('--dev'),
-  spa: true
+  spa: true,
 })
 
 server.get('/', (req, reply) => {
@@ -99,10 +99,7 @@ import viteReact from '@vitejs/plugin-react'
 
 export default {
   root: resolve(import.meta.dirname, 'client'),
-  plugins: [
-    viteFastify(),
-    viteReact({ jsxRuntime: 'classic' }),
-  ],
+  plugins: [viteFastify(), viteReact({ jsxRuntime: 'classic' })],
 }
 ```
 
@@ -151,10 +148,8 @@ root.render(createApp())
 ```jsx [client/base.jsx]
 import React from 'react'
 
-export function createApp () {
-  return (
-    <p>Hello world from React and @fastify/vite!</p>
-  )
+export function createApp() {
+  return <p>Hello world from React and @fastify/vite!</p>
 }
 ```
 

docs/guide/known-limitations.md

@@ -16,7 +16,7 @@ If you're looking into a microfrontend setup, consider [this approach](https://d
 
 ## Using @fastify/middie Directly
 
-`@fastify/vite` internally registers `@fastify/middie` in **development mode** to run Vite's dev server middleware. If you need to use middie yourself:
+`@fastify/vite` internally registers `@fastify/middie` in **development mode** to run Vite's dev server middleware. If you want to use middie yourself with different options:
 
 **In development mode:** You can either register middie before `@fastify/vite` (it will detect this and skip its own registration), or simply use `server.use()` after calling `server.vite.ready()`.
 
@@ -30,6 +30,11 @@ import FastifyVite from '@fastify/vite'
 const server = Fastify()
 
 // Register middie first - works in both dev and production
-await server.register(middie)
-await server.register(FastifyVite, { /* options */ })
+await server.register(middie, {
+  /* options */
+})
+
+await server.register(FastifyVite, {
+  /* options */
+})
 ```

docs/guide/rendering-function.md

@@ -14,16 +14,16 @@ The default behavior of `prepareClient()` is to just load the module as-is, but
 To illustrate, a snippet from the [`react-vanilla`][react-vanilla] SSR example:
 
 ```js {4-9}
-  await server.register(FastifyVite, {
-    root: import.meta.dirname,
-    createRenderFunction ({ createApp }) {
-      return () => {
-        return {
-          element: renderToString(createApp())
-        }
+await server.register(FastifyVite, {
+  root: import.meta.dirname,
+  createRenderFunction({ createApp }) {
+    return () => {
+      return {
+        element: renderToString(createApp()),
       }
     }
-  })
+  },
+})
 ```
 
 `createRenderFunction()` receives as the first parameter a reference to your **Vite application module**, i.e., your client application. The function it returns is added ([decorated](https://fastify.dev/docs/v2.15.x/Documentation/Decorators/)) to the Fastify `Reply` class as `render()`.
@@ -56,10 +56,8 @@ Let's focus on the main React component:
 ```jsx [client/base.jsx]
 import React from 'react'
 
-export function createApp () {
-  return (
-    <p>Hello world from React and** **`@fastify/vite`**!**</p>
-  )
+export function createApp() {
+  return <p>Hello world from React and** **`@fastify/vite`**!**</p>
 }
 ```
 
@@ -133,13 +131,13 @@ const server = Fastify()
 await server.register(FastifyVite, {
   root: import.meta.dirname,
   dev: process.argv.includes('--dev'),
-  createRenderFunction ({ createApp }) {
+  createRenderFunction({ createApp }) {
     return () => {
       return {
-        element: renderToString(createApp())
+        element: renderToString(createApp()),
       }
     }
-  }
+  },
 })
 
 server.get('/', (req, reply) => {

docs/guide/router-integration.md

@@ -51,30 +51,30 @@ import { uneval } from 'devalue'
 
 export default { createRenderFunction, createRoute }
 
-async function foobarHook (req) {
+async function foobarHook(req) {
   req.server.log.info(`Hello from ${req.url} and foobarHook`)
 }
 
-function createRoute ({ handler, errorHandler, route }, scope, config) {
+function createRoute({ handler, errorHandler, route }, scope, config) {
   scope.route({
     url: route.path,
     method: 'GET',
     handler,
     errorHandler,
-    ...route.addFoobarHook && {
+    ...(route.addFoobarHook && {
       onRequest: foobarHook,
-    }
+    }),
   })
 }
 
-function createRenderFunction ({ createApp }) {
+function createRenderFunction({ createApp }) {
   return async function (server, req, reply) {
     const data = { todoList: ['Do laundry', 'Respond to emails', 'Write report'] }
     const app = await createApp({ data, server, req, reply }, req.raw.url)
     const element = await renderToString(app.instance, app.ctx)
     return {
       element,
-      hydration: `<script>window.hydration = ${uneval({ data })}</script>`
+      hydration: `<script>window.hydration = ${uneval({ data })}</script>`,
     }
   }
 }
@@ -89,8 +89,8 @@ export default [
   },
   {
     path: '/other',
-    component: () => import('./views/other.vue')
-  }
+    component: () => import('./views/other.vue'),
+  },
 ]
 ```
 
@@ -102,20 +102,22 @@ export default {
   // Provides client-side navigation routes to server
   routes,
   // Provides function needed to perform SSR
-  createApp
+  createApp,
 }
 ```
 
-````html [client/index.html]
+```html [client/index.html]
 <!DOCTYPE html>
 <!-- hydration -->
 <div id="root"><!-- element --></div>
 <script type="module" src="/mount.js"></script>
+```
+
 :::
 
 The key thing to understand in this example is that **`@fastify/vite`** automatically executes [`createRoute()`](/config/#createroute) **for each of the routes defined** in the **`routes`** key from your client module default export.
 
-As long as each object in the `routes` array (or function returning an array) has a `path` property, **`@fastify/vite`** will use it to register an individual Fastify route for your client-side route, by default. By providing your own [`createRoute()`](/config/#createroute) definition, you can customize it however you want. In this example, `client/routes.js` is shared by `client/base.js` and `client/index.js`, which *also* imports `client/base.js`.
+As long as each object in the `routes` array (or function returning an array) has a `path` property, **`@fastify/vite`** will use it to register an individual Fastify route for your client-side route, by default. By providing your own [`createRoute()`](/config/#createroute) definition, you can customize it however you want. In this example, `client/routes.js` is shared by `client/base.js` and `client/index.js`, which _also_ imports `client/base.js`.
 
 ```mermaid
 flowchart TD
@@ -126,7 +128,7 @@ flowchart TD
     X[client/routes.js] --> A
     B -->D(client/index.html)
     C -->|"for (const route of routes)"| G("createRoute(route)")
-````
+```
 
 Notice how `addFoobarHook` is a flag set in one of the client-side routes (in `client/routes.js`), just to demonstrante how it can be used to customize route registration, in this case setting `foobarHook` as an [`onRequest`](https://fastify.dev/docs/latest/Reference/Hooks/#onrequest) hook.
 

docs/guide/templating-function.md

@@ -12,12 +12,8 @@ When you run the `vite build` command, `index.html` is what Vite automatically l
 ```js
 import { createHtmlTemplateFunction } from '@fastify/vite/utils'
 
-const template = createHtmlTemplateFunction(
-  '<main><!-- foobar --></main>'
-)
-console.log(
-  template({ foobar: 'This will be inserted' })
-)
+const template = createHtmlTemplateFunction('<main><!-- foobar --></main>')
+console.log(template({ foobar: 'This will be inserted' }))
 ```
 
 The snippet above prints out `<main>This will be inserted</main>`.
@@ -27,7 +23,7 @@ By default, that function is used internally by the `createHtmlFunction()` confi
 Notice that `createHtmlTemplateFunction()` is not only a utility you can import from `@fastify/vite/utils`, but is also set as configuration hook within `@fastify/vite`. If you want to use a different templating engine, just provide a different `createHtmlTemplateFunction()` implementation and it will be automatically used by the [**default definition of `createHtmlFunction()`**](https://github.com/fastify/fastify-vite/blob/dev/packages/fastify-vite/config.js#L58):
 
 ```js
-function createHtmlFunction (source, scope, config) {
+function createHtmlFunction(source, scope, config) {
   const indexHtmlTemplate = config.createHtmlTemplateFunction(source)
   if (config.spa) {
     return function () {
@@ -38,7 +34,7 @@ function createHtmlFunction (source, scope, config) {
   }
   return async function (ctx) {
     this.type('text/html')
-    this.send(indexHtmlTemplate(ctx ?? await this.render()))
+    this.send(indexHtmlTemplate(ctx ?? (await this.render())))
     return this
   }
 }

docs/index.md

@@ -3,24 +3,24 @@
 layout: home
 
 hero:
-  name: "@fastify/vite"
-  text: "Titans Combined"
+  name: '@fastify/vite'
+  text: 'Titans Combined'
   tagline: Cleanly and elegantly integrate <b><a href="https://fastify.dev/" target="_blank">Fastify</a></b> and <b><a href="https://vitejs.dev/" target="_blank">Vite</a></b> to create a <b>minimal</b>, <b>low overhead</b> setup for <b>full stack monoliths</b>.
   actions:
     - theme: brand
       text: Get Started
       link: /guide/getting-started
     - theme: brand
-      text: "Vue"
+      text: 'Vue'
       link: /vue/index
     - theme: brand
-      text: "React"
+      text: 'React'
       link: /react/index
   image:
     src: /fastify-vite.svg
-    alt: "@fastify/vite"
+    alt: '@fastify/vite'
 
-title: "@fastify/vite"
+title: '@fastify/vite'
 titleTemplate: Fastify plugin for Vite integration
 
 features:

docs/react/project-structure.md

@@ -88,14 +88,14 @@ The Vite application HTML template:
 ```html
 <!doctype html>
 <html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
-<link rel="stylesheet" href="/base.css" />
-<div id="root"><!-- element --></div>
-<!-- hydration -->
-<script type="module" src="/$app/mount.js"></script>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <link rel="stylesheet" href="/base.css" />
+  <div id="root"><!-- element --></div>
+  <!-- hydration -->
+  <script type="module" src="/$app/mount.js"></script>
 </html>
 ```
 
@@ -136,8 +136,8 @@ const server = Fastify({
   logger: {
     transport: {
       target: '@fastify/one-line-logger',
-    }
-  }
+    },
+  },
 })
 
 await server.register(FastifyVite, {
@@ -157,10 +157,7 @@ import fastifyReact from '@fastify/react/plugin'
 
 export default {
   root: resolve(import.meta.dirname, 'client'),
-  plugins: [
-    viteReact(),
-    fastifyReact(),
-  ],
+  plugins: [viteReact(), fastifyReact()],
 }
 ```
 
@@ -178,16 +175,16 @@ export default {
 ```html [client/index.html]
 <!DOCTYPE html>
 <html>
-<head>
-<meta charset="utf-8">
-<link rel="stylesheet" href="./base.css">
-<!-- head -->
-</head>
-<body>
-<div id="root"><!-- element --></div>
-</body>
-<!-- hydration -->
-<script type="module" src="/$app/mount.js"></script>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="./base.css" />
+    <!-- head -->
+  </head>
+  <body>
+    <div id="root"><!-- element --></div>
+  </body>
+  <!-- hydration -->
+  <script type="module" src="/$app/mount.js"></script>
 </html>
 ```
 

docs/react/rendering-modes.md

@@ -45,19 +45,19 @@ import React, { Suspense } from 'react'
 
 export const streaming = true
 
-export default function Index () {
+export default function Index() {
   return (
     <Suspense fallback={<p>Waiting for content</p>}>
       <Message />
     </Suspense>
   )
 }
 
-function Message () {
+function Message() {
   const message = afterSeconds({
     id: 'index',
     message: 'Delayed by Suspense API',
-    seconds: 5
+    seconds: 5,
   })
   return <p>{message}</p>
 }