docs: remove horizontal scrollbars in code blocks (#509)

closes #509

Author: patak-dev

docs/config/index.md

@@ -100,7 +100,8 @@ import { defineConfig, loadEnv } from 'vite'
 
 export default defineConfig(({ mode }) => {
   // Load env file based on `mode` in the current working directory.
-  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
+  // Set the third parameter to '' to load all env regardless of the
+  // `VITE_` prefix.
   const env = loadEnv(mode, process.cwd(), '')
   return {
     // vite config

docs/config/server-options.md

@@ -101,15 +101,21 @@ In einigen Fällen möchten Sie möglicherweise auch den zugrunde liegenden Entw
 export default defineConfig({
   server: {
     proxy: {
-      // Zeichenfolgen-Schnellzugriff: http://localhost:5173/foo -> http://localhost:4567/foo
+      // string shorthand:
+      // http://localhost:5173/foo
+      //   -> http://localhost:4567/foo
       '/foo': 'http://localhost:4567',
-      // Mit Optionen: http://localhost:5173/api/bar-> http://jsonplaceholder.typicode.com/bar
+      // with options:
+      // http://localhost:5173/api/bar
+      //   -> http://jsonplaceholder.typicode.com/bar
       '/api': {
         target: 'http://jsonplaceholder.typicode.com',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ''),
       },
-      // mit RegExp: http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
+      // with RegExp:
+      // http://localhost:5173/fallback/
+      //   -> http://jsonplaceholder.typicode.com/
       '^/fallback/.*': {
         target: 'http://jsonplaceholder.typicode.com',
         changeOrigin: true,
@@ -123,7 +129,11 @@ export default defineConfig({
           // proxy wird eine Instanz von 'http-proxy' sein
         },
       },
-      // Proxying von Websockets oder socket.io: ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
+      // Proxying websockets or socket.io:
+      // ws://localhost:5173/socket.io
+      //   -> ws://localhost:5174/socket.io
+      // Exercise caution using `rewriteWsOrigin` as it can leave the
+      // proxying open to CSRF attacks.
       '/socket.io': {
         target: 'ws://localhost:5174',
         ws: true,
@@ -246,16 +256,17 @@ async function createServer() {
   // Erstellen Sie den Vite-Server im Middleware-Modus
   const vite = await createViteServer({
     server: { middlewareMode: true },
-    appType: 'custom', // Vites Standard-HTML-Handling-Middlewares nicht einschließen
+    // don't include Vite's default HTML handling middlewares
+    appType: 'custom',
   })
   // Verwenden Sie Vites Connect-Instanz als Middleware
   app.use(vite.middlewares)
 
   app.use('*', async (req, res) => {
-    // Da `appType` `'custom'` ist, sollte die Antwort hier bedient werden.
-    // Hinweis: Wenn `appType` `'spa'` oder `'mpa'` ist, fügt Vite Middlewares hinzu, um
-    // HTML-Anfragen und 404er zu behandeln, sodass Benutzer-Middlewares hinzugefügt werden sollten
-    // vor Vites Middlewares, um wirksam zu werden.
+    // Since `appType` is `'custom'`, should serve response here.
+    // Note: if `appType` is `'spa'` or `'mpa'`, Vite includes middlewares
+    // to handle HTML requests and 404s so user middlewares should be added
+    // before Vite's middlewares to take effect instead
   })
 }
 

docs/guide/api-environment-frameworks.md

@@ -22,7 +22,8 @@ export class RunnableDevEnvironment extends DevEnvironment {
 
 class ModuleRunner {
   /**
-   * URL to execute. Accepts file path, server path, or id relative to the root.
+   * URL to execute.
+   * Accepts file path, server path, or id relative to the root.
    * Returns an instantiated module (same as in ssrLoadModule)
    */
   public async import(url: string): Promise<Record<string, any>>
@@ -52,20 +53,21 @@ const server = await createServer({
   appType: 'custom',
   environments: {
     server: {
-      // by default, the modules are run in the same process as the vite dev server during dev
+      // by default, modules are run in the same process as the vite server
     },
   },
 })
 
-// You might need to cast this to RunnableDevEnvironment in TypeScript or use
-// the "isRunnableDevEnvironment" function to guard the access to the runner
+// You might need to cast this to RunnableDevEnvironment in TypeScript or
+// use isRunnableDevEnvironment to guard the access to the runner
 const environment = server.environments.node
 
 app.use('*', async (req, res, next) => {
   const url = req.originalUrl
 
   // 1. Read index.html
-  let template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8')
+  const indexHtmlPath = path.resolve(__dirname, 'index.html')
+  let template = fs.readFileSync(indexHtmlPath, 'utf-8')
 
   // 2. Apply Vite HTML transforms. This injects the Vite HMR client,
   //    and also applies HTML transforms from Vite plugins, e.g. global
@@ -112,7 +114,7 @@ const server = createServer()
 const ssrEnvironment = server.environment.ssr
 const input = {}
 
-const { createHandler } = await ssrEnvironment.runner.import('./entrypoint.js')
+const { createHandler } = await ssrEnvironment.runner.import('./entry.js')
 const handler = createHandler(input)
 const response = handler(new Request('/'))
 
@@ -186,10 +188,10 @@ function vitePluginVirtualIndexHtml(): Plugin {
         let html: string
         if (server) {
           this.addWatchFile('index.html')
-          html = await fs.promises.readFile('index.html', 'utf-8')
+          html = fs.readFileSync('index.html', 'utf-8')
           html = await server.transformIndexHtml('/', html)
         } else {
-          html = await fs.promises.readFile('dist/client/index.html', 'utf-8')
+          html = fs.readFileSync('dist/client/index.html', 'utf-8')
         }
         return `export default ${JSON.stringify(html)}`
       }

docs/guide/api-environment-instances.md

@@ -74,9 +74,9 @@ class DevEnvironment {
 
   /**
    * Register a request to be processed with low priority. This is useful
-   * to avoid waterfalls. The Vite server has information about the imported
-   * modules by other requests, so it can warmup the module graph so the
-   * modules are already processed when they are requested.
+   * to avoid waterfalls. The Vite server has information about the
+   * imported modules by other requests, so it can warmup the module graph
+   * so the modules are already processed when they are requested.
    */
   async warmupRequest(url: string): void
 }

docs/guide/api-environment-plugins.md

@@ -158,14 +158,15 @@ const UnoCssPlugin = () => {
   // shared global state
   return {
     buildStart() {
-      // init per environment state with WeakMap<Environment,Data>, this.environment
+      // init per environment state with WeakMap<Environment,Data>
+      // using this.environment
     },
     configureServer() {
       // use global hooks normally
     },
     applyToEnvironment(environment) {
       // return true if this plugin should be active in this environment
-      // if the function isn't provided, the plugin is active in all environments
+      // if the hook is not used, the plugin is active in all environments
     },
     resolveId(id, importer) {
       // only called for environments this plugin apply to

docs/guide/api-environment-runtimes.md

@@ -84,7 +84,11 @@ One of the goals of this feature is to provide a customizable API to process and
 ```ts
 import { DevEnvironment, RemoteEnvironmentTransport } from 'vite'
 
-function createWorkerdDevEnvironment(name: string, config: ResolvedConfig, context: DevEnvironmentContext) {
+function createWorkerdDevEnvironment(
+  name: string,
+  config: ResolvedConfig,
+  context: DevEnvironmentContext
+) {
   const hot = /* ... */
   const connection = /* ... */
   const transport = new RemoteEnvironmentTransport({
@@ -120,20 +124,21 @@ export class ModuleRunner {
     private debug?: ModuleRunnerDebugger,
   ) {}
   /**
-   * URL to execute. Accepts file path, server path, or id relative to the root.
+   * URL to execute.
+   * Accepts file path, server path, or id relative to the root.
    */
   public async import<T = any>(url: string): Promise<T>
   /**
    * Clear all caches including HMR listeners.
    */
   public clearCache(): void
   /**
-   * Clears all caches, removes all HMR listeners, and resets source map support.
+   * Clear all caches, remove all HMR listeners, reset sourcemap support.
    * This method doesn't stop the HMR connection.
    */
   public async close(): Promise<void>
   /**
-   * Returns `true` if the runner has been closed by calling `close()` method.
+   * Returns `true` if the runner has been closed by calling `close()`.
    */
   public isClosed(): boolean
 }
@@ -174,9 +179,12 @@ export interface ModuleRunnerOptions {
    */
   transport: RunnerTransport
   /**
-   * Configure how source maps are resolved. Prefers `node` if `process.setSourceMapsEnabled` is available.
-   * Otherwise it will use `prepareStackTrace` by default which overrides `Error.prepareStackTrace` method.
-   * You can provide an object to configure how file contents and source maps are resolved for files that were not processed by Vite.
+   * Configure how source maps are resolved.
+   * Prefers `node` if `process.setSourceMapsEnabled` is available.
+   * Otherwise it will use `prepareStackTrace` by default which overrides
+   * `Error.prepareStackTrace` method.
+   * You can provide an object to configure how file contents and
+   * source maps are resolved for files that were not processed by Vite.
    */
   sourcemapInterceptor?:
     | false
@@ -190,7 +198,7 @@ export interface ModuleRunnerOptions {
     | false
     | {
         /**
-         * Configure how HMR communicates between the client and the server.
+         * Configure how HMR communicates between client and server.
          */
         connection: ModuleRunnerHMRConnection
         /**
@@ -199,7 +207,8 @@ export interface ModuleRunnerOptions {
         logger?: false | HMRLogger
       }
   /**
-   * Custom module cache. If not provided, it creates a separate module cache for each module runner instance.
+   * Custom module cache. If not provided, it creates a separate module
+   * cache for each module runner instance.
    */
   evaluatedModules?: EvaluatedModules
 }
@@ -344,7 +353,8 @@ export interface ModuleRunnerHMRConnection {
   send(payload: HotPayload): void
   /**
    * Configure how HMR is handled when this connection triggers an update.
-   * This method expects that the connection will start listening for HMR updates and call this callback when it's received.
+   * This method expects that the connection will start listening for HMR
+   * updates and call this callback when it's received.
    */
   onUpdate(callback: (payload: HotPayload) => void): void
 }

docs/guide/build.md

@@ -315,17 +315,21 @@ import type { UserConfig } from 'vite'
 import path from 'node:path'
 
 const config: UserConfig = {
-  experimental: {
-    renderBuiltUrl(filename, { hostId, hostType, type }) {
-      if (type === 'public') {
-        return 'https://www.domain.com/' + filename
-      } else if (path.extname(hostId) === '.js') {
-        return { runtime: `window.__assetsPath(${JSON.stringify(filename)})` }
-      } else {
-        return 'https://cdn.domain.com/assets/' + filename
+// ---cut-before---
+experimental: {
+  renderBuiltUrl(filename, { hostId, hostType, type }) {
+    if (type === 'public') {
+      return 'https://www.domain.com/' + filename
+    } else if (path.extname(hostId) === '.js') {
+      return {
+        runtime: `window.__assetsPath(${JSON.stringify(filename)})`
       }
-    },
+    } else {
+      return 'https://cdn.domain.com/assets/' + filename
+    }
   },
+},
+// ---cut-after---
 }
 ```