fix(issues): #585 #586 #587 #588 #589 #590 #591 #592 #594 #595 #596 #597

 #598 #599

.vscode/settings.json

@@ -1,4 +1,3 @@
 {
-  "rpc.enabled": true,
-  "eslint.packageManager": "pnpm"
+  "rpc.enabled": true
 }

docs/config/build-options.md

@@ -82,11 +82,15 @@ Especifica el directorio en el que se alojarán los recursos generados (en relac
 
 ## build.assetsInlineLimit
 
-- **Tipo:** `number`
+- **Tipo:** `number` | `((filePath: string, content: Buffer) => boolean | undefined)`
 - **Por defecto:** `4096` (4KiB)
 
 Los recursos importados o a los que se hace referencia que son más pequeños que este umbral se insertarán como URL base64 para evitar solicitudes http adicionales. Configurar en `0` para deshabilitar la inserción por completo.
 
+Si se pasa un callback, se puede devolver un valor booleano para optar por usarlo o no. Si no se devuelve nada, se aplica la lógica predeterminada.
+
+Los marcadores de posición de Git LFS se excluyen automáticamente de la inserción porque no contienen el contenido del archivo que representan.
+
 ::: tip Nota
 Si especificas `build.lib`, `build.assetsInlineLimit` se ignorará y los recursos siempre serán insertados, independientemente del tamaño del archivo o de ser un marcador de posición Git LFS.
 :::
@@ -189,7 +193,7 @@ Durante la compilación de SSR, los recursos estáticos no se emiten, ya que se
 ## build.minify
 
 - **Tipo:** `boolean | 'terser' | 'esbuild'`
-- **Por defecto:** `'esbuild'`
+- **Por defecto:** `'esbuild'` para la compilación del cliente, `false` para el servidor de compilación SSR.
 
 Configurar en `false` para deshabilitar la minificación, o especificar el minificador que se usará. El valor predeterminado es [esbuild](https://github.com/evanw/esbuild), que es 20 ~ 40 veces más rápido que terser y solo 1 ~ 2 % peor en compresión. [Pruebas de rendimiento](https://github.com/privatenumber/minification-benchmarks)
 

docs/config/dep-optimization-options.md

@@ -60,20 +60,29 @@ export default defineConfig({
 
 - **Tipo:** `boolean`
 
-  Configurar en `true` para forzar el empaquetado previo de dependencias, ignorando las dependencias previamente optimizadas y almacenadas en caché.
+Configurar en `true` para forzar el empaquetado previo de dependencias, ignorando las dependencias previamente optimizadas y almacenadas en caché.
+
+## optimizeDeps.holdUntilCrawlEnd
+
+- **Experimental**
+- **Tipo:** `boolean`
+- **Por defecto:** `true`
+
+Cuando está habilitado, retendrá los primeros resultados de las dependencias optimizadas hasta que todas las importaciones estáticas se rastreen en el arranque en frío. Esto evita la necesidad de recargar la página completa cuando se descubren nuevas dependencias y desencadenan la generación de nuevos fragmentos comunes. Si el escáner encuentra todas las dependencias más las definidas explícitamente en `include`, es mejor deshabilitar esta opción para permitir que el navegador procese más solicitudes en paralelo.
 
 ## optimizeDeps.disabled
 
+- **Obsoleto**
 - **Experimental** [Hacer Comentarios](https://github.com/vitejs/vite/discussions/13839)
 - **Tipo:** `boolean | 'build' | 'dev'`
 - **Por defecto:** `'build'`
 
-Deshabilita las optimizaciones de dependencias, `true` deshabilita el optimizador durante la compilación y el desarrollo. Pasa `'build'` o `'dev'` para deshabilitar el optimizador solo en uno de los modos. La optimización de dependencias está habilitada de forma predeterminada solo en desarrollo.
+Esta opción está en desuso. A partir de Vite 5.1, se eliminó el paquete previo de dependencias durante la compilación. Configurar `optimizeDeps.disabled` en `true` o `'dev'` deshabilita el optimizador, y configurarlo en `false` o `'build'` deja el optimizador habilitado durante el desarrollo.
 
-:::warning
-La optimización de las dependencias en el modo de compilación es **experimental**. Si está habilitado, elimina una de las diferencias más significativas entre desarrollo y producción. [`@rollup/plugin-commonjs`](https://github.com/rollup/plugins/tree/master/packages/commonjs) ya no es necesario en este caso, ya que esbuild convierte las dependencias solo de CJS en ESM.
+Para deshabilitar el optimizador por completo, usa `optimizeDeps.noDiscovery: true` para no permitir el descubrimiento automático de dependencias y deja `optimizeDeps.include` sin definir o vacío.
 
-Si deseas probar esta estrategia de compilación, puedes usar `optimizeDeps.disabled: false`. `@rollup/plugin-commonjs` se puede eliminar pasando `build.commonjsOptions: { include: [] }`.
+:::warning
+La optimización de las dependencias durante el tiempo de compilación fue una característica **experimental**. Los proyectos que probaron esta estrategia también eliminaron `@rollup/plugin-commonjs` usando `build.commonjsOptions: { include: [] }`. Si lo hiciste en algún momento, una advertencia te guiará a volver a habilitarlo y así darle soporte a paquetes CJS únicamente mientras se realiza el empaquetado.
 :::
 
 ## optimizeDeps.needsInterop

docs/config/server-options.md

@@ -199,7 +199,7 @@ export defineConfig default ({
 
 Opciones para el observador del sistema de archivos que serán pasados a [chokidar](https://github.com/paulmillr/chokidar#api).
 
-El observador del servidor Vite observa el `root` y omite los directorios `.git/` y `node_modules/` de forma predeterminada. Al actualizar un archivo observado, Vite aplicará HMR y actualizará la página solo si es necesario.
+El observador del servidor Vite observa el `root` y omite los directorios `.git/`, `node_modules/`, y las carpetas de Vite `cacheDir` y `build.outDir` de forma predeterminada. Al actualizar un archivo observado, Vite aplicará HMR y actualizará la página solo si es necesario.
 
 Si se configura en `null`, no se observará ningún archivo. `server.watcher` proporcionará un emisor de eventos compatible, pero invocar a `add` o `unwatch` no tendrá ningún efecto.
 

docs/config/shared-options.md

@@ -214,17 +214,12 @@ Especifica las opciones a pasar a los preprocesadores de CSS. Las extensiones de
 - `less` - [Opciones](https://lesscss.org/usage/#less-options).
 - `styl`/`stylus`: solo se admite [`define`](https://stylus-lang.com/docs/js.html#define-name-node), el cual se puede pasar como un objeto.
 
-Todas las opciones de preprocesadores también soportan la opción `additionalData`, el cual se puede usar para inyectar código adicional para cada contenido de estilo. Ten en cuenta que si incluyes estilos reales y no solo variables, estos podrían duplicarse en el paquete final.
-
-Ejemplo:
+**Ejemplo**:
 
 ```js
 export default defineConfig({
   css: {
     preprocessorOptions: {
-      scss: {
-        additionalData: `$injectedColor: orange;`,
-      },
       less: {
         math: 'parens-division',
       },
@@ -238,9 +233,37 @@ export default defineConfig({
 })
 ```
 
+### css.preprocessorOptions[extension].additionalData
+
+- **Tipo:** `string | ((source: string, filename: string) => (string | { content: string; map?: SourceMap }))`
+
+Esta opción se puede utilizar para inyectar código adicional para cada contenido de estilo. Ten en cuenta que si incluyes estilos reales y no solo variables, esos estilos se duplicarán en el paquete final.
+
+**Ejemplo:**
+
+```js
+export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `$injectedColor: orange;`,
+      },
+    },
+  },
+})
+```
+
+## css.preprocessorMaxWorkers
+
+- **Experimental:** [Hacer comentarios](TODO: update)
+- **Tipo:** `number | true`
+- **Por defecto:** `0` (no crea ningún worker y se ejecuta en el hilo principal)
+
+Si se configura esta opción, los preprocesadores CSS se ejecutarán en los workers cuando sea posible. `true` significa el número de CPU menos 1.
+
 ## css.devSourcemap
 
-- **Experimental** [Hacer Comentarios](https://github.com/vitejs/vite/discussions/13845)
+- **Experimental** [Hacer comentarios](https://github.com/vitejs/vite/discussions/13845)
 - **Tipo:** `boolean`
 - **Por defecto:** `false`
 
@@ -249,8 +272,8 @@ Habilita los mapas de origen durante el desarrollo.
 ## css.transformer
 
 - **Experimental** [Hacer Comentarios](https://github.com/vitejs/vite/discussions/13835)
-- **Type:** `'postcss' | 'lightningcss'`
-- **Default:** `'postcss'`
+- **Tipo:** `'postcss' | 'lightningcss'`
+- **Por defecto:** `'postcss'`
 
 Selecciona el motor utilizado para el procesamiento de CSS. Consulta [Lightning CSS](../guide/features.md#lightning-css) para obtener más información.
 

docs/config/ssr-options.md

@@ -2,17 +2,25 @@
 
 ## ssr.external
 
-- **Tipo:** `string[]`
+- **Tipo:** `string[] | true`
 - **Relacionado:** [SSR Externos](/guide/ssr#ssr-externos)
 
-  Fuerza la externalización de dependencias para SSR.
+Externaliza las dependencias dadas y sus dependencias transitivas para SSR. Por defecto, todas las dependencias se externalizan excepto las dependencias vinculadas (para HMR). Si prefieres externalizar la dependencia vinculada, puedes pasar su nombre a esta opción.
+
+Si es `true`, todas las dependencias, incluidas las vinculadas, se externalizan.
+
+Ten en cuenta que las dependencias enumeradas explícitamente (que usan el tipo `string[]`) siempre tendrán prioridad si también se enumeran en `ssr.noExternal` (usando cualquier tipo).
 
 ## ssr.noExternal
 
 - **Tipo:** `string | RegExp | (string | RegExp)[] | true`
 - **Relacionado:** [SSR Externos](/guide/ssr#ssr-externos)
 
-  Evita que las dependencias enumeradas se externalicen para SSR. Si es `true`, no se externalizan dependencias.
+Previene que las dependencias enumeradas se externalicen para SSR, las cuales se incluirán después en la compilación. Por defecto, sólo las dependencias vinculadas no se externalizan (para HMR). Si prefieres externalizar la dependencia vinculada, puede pasar su nombre a la opción `ssr.external`.
+
+Si es `true`, no se externalizan dependencias. Sin embargo, las dependencias enumeradas explícitamente en `ssr.external` (usando el tipo `string[]`) pueden tener prioridad y aún así externalizarse.
+
+Ten en cuenta que si tanto `ssr.noExternal: true` como `ssr.external: true` están configurados, `ssr.noExternal` tiene prioridad y no se externalizan dependencias.
 
 ## ssr.target
 

docs/guide/api-plugin.md

@@ -418,11 +418,11 @@ interface HtmlTagDescriptor {
 
   - Filtrar y reducir la lista de módulos afectados para que el HMR sea más preciso.
 
-  - Devuelva un array vacío y realiza un manejo completo de HMR personalizado enviando eventos personalizados al cliente:
+  - Devuelva un array vacío y realiza un manejo completo de HMR personalizado enviando eventos personalizados al cliente (el ejemplo usa `server.hot` que se introdujo en Vite 5.1, se recomienda usar también `server.ws` si se quiere soportar versiones inferiores)::
 
     ```js
     handleHotUpdate({ server }) {
-      server.ws.send({
+      server.hot.send({
         type: 'custom',
         event: 'special-update',
         data: {}
@@ -529,7 +529,7 @@ Desde Vite 2.9, proporcionamos algunas utilidades para complementos que ayudan a
 
 ### Servidor a Cliente
 
-En el lado del complemento, podríamos usar `server.ws.send` para transmitir eventos a todos los clientes:
+En el lado del complemento, podríamos usar `server.hot.send` (a partir de Vite 5.1) o `server.ws.send` para transmitir eventos a todos los clientes:
 
 ```js
 // vite.config.js
@@ -539,8 +539,8 @@ export default defineConfig({
       // ...
       configureServer(server) {
         // Ejemplo: espera a que un cliente se conecte antes de enviar un mensaje
-        server.ws.on('connection', () => {
-          server.ws.send('my:greetings', { msg: 'hello' })
+        server.hot.on('connection', () => {
+          server.hot.send('my:greetings', { msg: 'hello' })
         })
       },
     },
@@ -551,6 +551,7 @@ export default defineConfig({
 ::: tip NOTA
 Recomendamos **siempre prefijar** los nombres de tus eventos para evitar colisiones con otros complementos.
 :::
+
 En el lado del cliente, usa [`hot.on`](/guide/api-hmr.html#hot-on-event-cb) para escuchar los eventos:
 
 ```ts
@@ -573,7 +574,7 @@ if (import.meta.hot) {
 }
 ```
 
-Luego usar `server.ws.on` y escuchar los eventos en el lado del servidor:
+Luego usar `server.hot.on` (a partir de Vite 5.1) o `server.ws.on` y escuchar los eventos en el lado del servidor:
 
 ```js
 // vite.config.js
@@ -582,7 +583,7 @@ export default defineConfig({
     {
       // ...
       configureServer(server) {
-        server.ws.on('my:from-client', (data, client) => {
+        server.hot.on('my:from-client', (data, client) => {
           console.log('Message from client:', data.msg) // Hey!
           // reply only to the client (if needed)
           client.send('my:ack', { msg: 'Hi! I got your message!' })

docs/guide/features.md

@@ -391,26 +391,6 @@ const modules = {
 }
 ```
 
-### Formas de importación Glob
-
-`import.meta.glob` también admite la importación de archivos como cadenas (similar a la [importación de recursos como cadena](./assets#importar-recursos-como-cadenas-de-texto)) con la sintaxis de [importación reflexiva](https://github.com/tc39/proposal-import-reflection):
-
-```js
-const modules = import.meta.glob('./dir/*.js', { as: 'raw', eager: true })
-```
-
-Lo anterior se transformará en lo siguiente:
-
-```js
-// código producido por vite
-const modules = {
-  './dir/foo.js': 'export default "foo"\n',
-  './dir/bar.js': 'export default "bar"\n',
-}
-```
-
-`{ as: 'url' }` también se admite para cargar recursos como URL.
-
 ### Patrones múltiples
 
 El primer argumento puede ser una array de globs, por ejemplo
@@ -436,7 +416,7 @@ const modules = {
 
 #### Importaciones nombradas
 
-Es posible importar solo partes de los módulos con las opciones de`import`.
+Es posible importar solo partes de los módulos con las opciones de `import`.
 
 ```ts
 const modules = import.meta.glob('./dir/*.js', { import: 'setup' })
@@ -490,24 +470,39 @@ const modules = {
 
 #### Consultas personalizadas
 
-También puedes usar la opción `query` para proporcionar consultas personalizadas a las importaciones para que las consuman otros complementos.
+También puedes utilizar la opción `query` para realizar consultas sobre importaciones, por ejemplo, para importar recursos [como una cadena](./assets.html#importar-recursos-como-cadenas-de-texto) o [como URL](./assets.html#importar-recursos-como-url):
 
 ```ts
-const modules = import.meta.glob('./dir/*.js', {
-  query: { foo: 'bar', bar: true },
+const moduleStrings = import.meta.glob('./dir/*.svg', {
+  query: '?raw',
+  import: 'default',
+})
+const moduleUrls = import.meta.glob('./dir/*.svg', {
+  query: '?url',
+  import: 'default',
 })
 ```
 
 ```ts
 // código producido por vite:
-const modules = {
-  './dir/foo.js': () =>
-    import('./dir/foo.js?foo=bar&bar=true').then((m) => m.setup),
-  './dir/bar.js': () =>
-    import('./dir/bar.js?foo=bar&bar=true').then((m) => m.setup),
+const moduleStrings = {
+  './dir/foo.svg': () => import('./dir/foo.js?raw').then((m) => m['default']),
+  './dir/bar.svg': () => import('./dir/bar.js?raw').then((m) => m['default']),
+}
+const moduleUrls = {
+  './dir/foo.svg': () => import('./dir/foo.js?url').then((m) => m['default']),
+  './dir/bar.svg': () => import('./dir/bar.js?url').then((m) => m['default']),
 }
 ```
 
+También puedes proporcionar consultas personalizadas para que las consuman otros complementos:
+
+```ts
+const modules = import.meta.glob('./dir/*.js', {
+  query: { foo: 'bar', bar: true },
+})
+```
+
 ### Advertencias de importación glob
 
 Ten en cuenta que:
@@ -619,6 +614,8 @@ const worker = new Worker(new URL('./worker.js', import.meta.url), {
 })
 ```
 
+La detección de workers solo funcionará si el constructor `new URL()` se usa directamente dentro de la declaración `new Worker()`. Además, todos los parámetros de opciones deben ser valores estáticos (es decir, cadenas literales).
+
 ### Importar con sufijos de consulta
 
 Se puede importar directamente un script de web worker agregando `?worker` o `?sharedworker` a la solicitud de importación. La exportación predeterminada será un constructor de worker personalizado:

docs/guide/index.md

@@ -62,7 +62,7 @@ $ pnpm create vite
 ```
 
 ```bash [Bun]
-$ bunx create-vite
+$ bun create vite
 ```
 
 :::
@@ -83,7 +83,7 @@ yarn create vite my-vue-app --template vue
 pnpm create vite my-vue-app --template vue
 
 # bun
-bunx create-vite my-vue-app --template vue
+bun create vite my-vue-app --template vue
 ```
 
 Consulta [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) para más detalles sobre cada plantilla admitida: `vanilla`, `vanilla-ts`, `vue`, `vue-ts`, `react`, `react-ts`, `react-swc`, `react-swc-ts`, `preact`, `preact-ts`, `lit`, `lit-ts`, `svelte`, `svelte-ts`, `solid`, `solid-ts`, `qwik`, `qwik-ts`.

docs/guide/performance.md

@@ -6,6 +6,10 @@ Si bien Vite es rápido por defecto, los problemas de rendimiento pueden aparece
 - Cargas de página lentas
 - compilaciones lentas
 
+## Evita las extensiones del navegador
+
+Algunas extensiones del navegador pueden interferir con las solicitudes y ralentizar los tiempos de inicio y recarga de aplicaciones grandes, especialmente cuando se utilizan herramientas de desarrollo del navegador. Recomendamos crear un perfil solo para desarrolladores sin extensiones, o cambiar al modo incógnito, mientras usa el servidor de desarrollo de Vite en estos casos. El modo incógnito también debería ser más rápido que un perfil normal sin extensiones.
+
 ## Auditar complementos de Vite configurados
 
 Los complementos internos y oficiales de Vite están optimizados para realizar la menor cantidad de trabajo posible y al mismo tiempo brindar compatibilidad con el ecosistema más amplio. Por ejemplo, las transformaciones de código usan expresiones regulares en desarrollo, pero realizan un análisis completo en compilación para garantizar exactitud.

docs/guide/ssr.md

@@ -91,7 +91,7 @@ async function createServer() {
   // router de Express (express.Router()), debes usar router.use
   // Cuando el servidor se reinicia (por ejemplo, después de que el usuario modifica
   // vite.config.js), `vite.middlewares` seguirá siendo la misma
-  // referencia (con una nueva cola interna de middlewares de Vite e inyectados por complementos.
+  // referencia (con una nueva cola interna de middlewares de Vite e inyectados por complementos).
   // Lo siguiente es válido incluso después de reinicios.
   app.use(vite.middlewares)