fix(issues): #1684 #1685 #1686 #1688 #1689 #1695 #1698 #1702

Author: mrcego

docs/config/build-options.md

@@ -247,6 +247,8 @@ Indica si se debe generar un archivo de manifiesto que contenga un mapeo de nomb
 
 Cuando el valor es una cadena, se usará como la ruta del archivo de manifiesto relativa a `build.outDir`. Cuando se establece en `true`, la ruta será `.vite/manifest.json`.
 
+Si estás escribiendo un plugin y necesitas inspeccionar los CSS relacionados y recursos estáticos de cada fragmento o recurso de salida durante la compilación, también puedes usar la [API de metadatos del paquete de salida `viteMetadata`](/guide/api-plugin#metadatos-del-paquete-de-salida).
+
 ## build.ssrManifest
 
 - **Tipo:** `boolean`

docs/guide/api-plugin.md

@@ -466,6 +466,44 @@ Este hook no se invocará si estás utilizando un framework que tenga un manejo
   }
   ```
 
+## Metadatos del Paquete de Salida
+
+Durante la compilación, Vite agrega un campo específico `viteMetadata` a los objetos de salida de compilación de Rolldown.
+
+Esto está disponible a través de:
+
+- `RenderedChunk` (por ejemplo en `renderChunk` y `augmentChunkHash`)
+- `OutputChunk` y `OutputAsset` (por ejemplo en `generateBundle` y `writeBundle`)
+
+`viteMetadata` proporciona:
+
+- `viteMetadata.importedCss: Set<string>`
+- `viteMetadata.importedAssets: Set<string>`
+
+Esto es útil cuando se escriben plugins que necesitan inspeccionar CSS emitidos y recursos estáticos sin depender de [`build.manifest`](/config/build-options#build-manifest).
+
+Ejemplo:
+
+```ts [vite.config.ts]
+function outputMetadataPlugin(): Plugin {
+  return {
+    name: 'output-metadata-plugin',
+    generateBundle(_, bundle) {
+      for (const output of Object.values(bundle)) {
+        const css = output.viteMetadata?.importedCss
+        const assets = output.viteMetadata?.importedAssets
+        if (!css?.size && !assets?.size) continue
+
+        console.log(output.fileName, {
+          css: css ? [...css] : [],
+          assets: assets ? [...assets] : [],
+        })
+      }
+    },
+  }
+}
+```
+
 ## Orden de Plugins
 
 Un plugin de Vite también puede especificar una propiedad `enforce` (similar a los cargadores de paquetes web) para ajustar su orden de aplicación. El valor de `enforce` puede ser `"pre"` o `"post"`. Los plugins resueltos estarán en el siguiente orden:

docs/guide/assets.md

@@ -119,6 +119,12 @@ El directorio predeterminado es `<root>/public`, pero esto se puede configurar a
 
 Ten en cuenta que siempre debes hacer referencia a los recursos de `public` utilizando una ruta absoluta desde la raíz. Por ejemplo, `public/icon.png` debería ser referenciado en el código fuente como `/icon.png`.
 
+::: tip Elección entre importaciones y la carpeta `public`
+
+En general, es preferible **importar recursos** a menos que necesites específicamente las garantías que proporciona la carpeta `public`.
+
+:::
+
 ## new URL(url, import.meta.url)
 
 [import.meta.url](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta) es una característica nativa de ESM que expone la URL del módulo actual. Combinándolo con el [constructor de URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) nativo, podemos obtener la URL completa y resuelta de un recurso estático utilizando la ruta relativa de un Módulo JavaScript:
@@ -147,7 +153,7 @@ Durante la compilación para producción, Vite realizará las transformaciones n
 const imgUrl = new URL(imagePath, import.meta.url).href
 ```
 
-::: detalles Cómo funciona  
+::: detalles Cómo funciona
 Vite transformará la función `getImageUrl` a:
 
 ```js

docs/guide/build.md

@@ -95,7 +95,7 @@ export default defineConfig({
 })
 ```
 
-Con el indicador `--watch` habilitado, los cambios en `vite.config.js`, así como cualquier archivo que se empaquete, desencadenarán una recompilación.
+Con el indicador `--watch` habilitado, los cambios en los archivos que se empaquetan desencadenarán una recompilación. Ten en cuenta que los cambios en la configuración y sus dependencias requieren reiniciar el comando de compilación.
 
 ## Aplicación multipáginas
 

docs/guide/dep-pre-bundling.md

@@ -6,7 +6,7 @@ Cuando ejecutas `vite` por primera vez, Vite preempaqueta las dependencias de tu
 
 Este es Vite realizando lo que llamamos "preempaquetado de dependencias". Este proceso tiene dos propósitos:
 
-1. **Compatibilidad con CommonJS y UMD:** Durante el desarrollo, el desarrollador de Vite sirve todo el código como ESM nativo. Por lo tanto, Vite primero debe convertir las dependencias que se envían como CommonJS o UMD en ESM.
+1. **Compatibilidad con CommonJS y UMD:** Durante el desarrollo, Vite sirve todo el código como ESM nativo. Por lo tanto, Vite primero debe convertir las dependencias que se envían como CommonJS o UMD en ESM.
 
    Al convertir las dependencias de CommonJS, Vite realiza un análisis de importación inteligente para que las importaciones con nombre a los módulos de CommonJS funcionen como se espera, incluso si las exportaciones se asignan dinámicamente (por ejemplo, React):
 

docs/guide/env-and-mode.md

@@ -33,14 +33,14 @@ Algunas constantes incorporadas están disponibles en todos los casos:
 
 Vite expone las variables de entorno bajo el objeto `import.meta.env` como cadenas automáticamente.
 
-Para evitar la filtración accidental de variables de entorno al cliente, solo las variables prefijadas con `VITE_` se exponen en el código procesado por Vite. Por ejemplo, para las siguientes variables de entorno:
+Las variables con el prefijo `VITE_` se expondrán en el código fuente del lado del cliente después del empaquetado de Vite. Para evitar la filtración accidental de variables de entorno al cliente, evita usar este prefijo. Como ejemplo, considera lo siguiente:
 
 ```[.env]
 VITE_SOME_KEY=123
 DB_PASSWORD=foobar
 ```
 
-Solo `VITE_SOME_KEY` se expondrá como `import.meta.env.VITE_SOME_KEY` en el código fuente del cliente, pero `DB_PASSWORD` no.
+El valor analizado de `VITE_SOME_KEY` – `"123"` – se expondrá en el cliente, pero el valor de `DB_PASSWORD` no. Puedes comprobar esto añadiendo lo siguiente a tu código:
 
 ```js
 console.log(import.meta.env.VITE_SOME_KEY) // "123"
@@ -53,6 +53,12 @@ Si deseas personalizar el prefijo de las variables de entorno, consulta la opci
 Como se muestra arriba, `VITE_SOME_KEY` es un número pero devuelve una cadena cuando se analiza. Lo mismo ocurriría con las variables de entorno booleanas. Asegúrate de convertir al tipo deseado cuando las uses en tu código.
 :::
 
+:::warning Protección de secretos en el código fuente
+
+Las variables `VITE_*` _no_ deben contener información sensible como claves de API. Los valores de estas variables se empaquetan en tu código fuente en tiempo de compilación. Para despliegues en producción, considera un servidor backend o funciones serverless/edge para proteger adecuadamente los secretos en el código fuente.
+
+:::
+
 ### Archivos `.env`
 
 Vite utiliza [dotenv](https://github.com/motdotla/dotenv) para cargar variables de entorno adicionales desde los siguientes archivos en tu [directorio de entorno](/config/shared-options.md#envdir):
@@ -93,14 +99,6 @@ NEW_KEY2=test\$foo  # test$foo
 NEW_KEY3=test$KEY   # test123
 ```
 
-:::warning NOTAS DE SEGURIDAD
-
-- Los archivos `.env.*.local` son solo locales y pueden contener variables sensibles. Debes agregar `*.local` a tu `.gitignore` para evitar que se suban a git.
-
-- Dado que cualquier variable expuesta en tu código fuente de Vite terminará en tu paquete de cliente, las variables `VITE_*` no deben contener información sensible.
-
-:::
-
 ::: details Expansión de variables en orden inverso
 
 Vite admite la expansión de variables en orden inverso.
@@ -118,6 +116,12 @@ Para evitar problemas de interoperabilidad, se recomienda evitar depender de est
 
 :::
 
+:::warning Ignorando archivos `.env` locales
+
+Los archivos `.env.*.local` son solo locales y pueden contener variables sensibles. Debes agregar `*.local` a tu `.gitignore` para evitar que se suban a git.
+
+:::
+
 ## IntelliSense para TypeScript
 
 Por defecto, Vite proporciona definiciones de tipo para `import.meta.env` en [`vite/client.d.ts`](https://github.com/vitejs/vite/blob/main/packages/vite/client.d.ts). Si bien puedes definir más variables de entorno personalizadas en archivos `.env.[mode]`, es posible que desees obtener IntelliSense de TypeScript para las variables de entorno definidas por el usuario que tienen el prefijo `VITE_`.

docs/guide/features.md

@@ -71,7 +71,7 @@ Esto se debe a que `esbuild` solo realiza la transpilación sin información de
 
 Debes configurar `"isolatedModules": true` en el `tsconfig.json` en `compilerOptions`, para que TS te advierta sobre las funcionalidades omitidas con la transpilación aislada.
 
-Si una dependencia no funciona bien con `"isolatedModules": true`, puedes usar `"skipLibCheck": true` para suprimir temporalmente los errores hasta que se solucione.
+Si una dependencia no funciona bien con `"isolatedModules": true`, puedes usar `"skipLibCheck": true` para suprimir temporalmente los errores hasta que se solucione de forma upstream.
 
 #### `useDefineForClassFields`
 

docs/guide/philosophy.md

@@ -20,7 +20,7 @@ Vite se ha centrado en el rendimiento desde sus [orígenes](./why.md). Su arquit
 
 ## Construyendo Frameworks de Trabajo sobre Vite
 
-Aunque Vite se puede utilizar directamente por los usuarios, brilla como una herramienta para crear frameworks. El núcleo de Vite es independiente del framework, pero existen plugins pulidos para cada framework de interfaz de usuario (IU). Su [API en JavaScript](./api-javascript.md) permite a los autores de frameworks de aplicaciones utilizar las funcionalidades de Vite para crear experiencias personalizadas para sus usuarios. Vite incluye soporte para [primitivos de SSR](./ssr.md), que generalmente están presentes en herramientas de nivel superior pero que son fundamentales para construir web frameworks modernos. Y los plugins de Vite completan el panorama al ofrecer una forma de compartir entre diferentes frameworks. Vite también es una excelente opción cuando se combina con [frameworks de backend](./backend-integration.md) como [Ruby](https://vite-ruby.netlify.app/) y [Laravel](https://laravel.com/docs/10.x/vite).
+Aunque Vite se puede utilizar directamente por los usuarios, brilla como una herramienta para crear frameworks. El núcleo de Vite es independiente del framework, pero existen plugins pulidos para cada framework de interfaz de usuario (IU). Su [API en JavaScript](./api-javascript.md) permite a los autores de frameworks de aplicaciones utilizar las funcionalidades de Vite para crear experiencias personalizadas para sus usuarios. Vite incluye soporte para [primitivos de SSR](./ssr.md), que generalmente están presentes en herramientas de nivel superior pero que son fundamentales para construir web frameworks modernos. Y los plugins de Vite completan el panorama al ofrecer una forma de compartir entre diferentes frameworks. Vite también es una excelente opción cuando se combina con [frameworks de backend](./backend-integration.md) como [Ruby](https://vite-ruby.netlify.app/) y [Laravel](https://laravel.com/docs/vite).
 
 ## Un ecosistema activo