Documentation(i18n): Translate the docs to Spanish (#923)

* translate automatic and install files * introduction * workspaces * lock * lock * add internals * add manual mode * roll back code translation * corrections * fix for path
aidenybai · Jan 31, 2024 · 3425d79 · 3425d79
1 parent 4141e5c
commit 3425d79
Show file tree

Hide file tree

Showing 15 changed files with 281 additions and 292 deletions.
diff --git a/website/pages/docs/_meta.es-ES.json b/website/pages/docs/_meta.es-ES.json
@@ -1,7 +1,7 @@
 {
-  "introduction": "Introduction",
-  "install": "Installation",
-  "automatic": "Automatic",
-  "manual-mode": "Manual Mode",
-  "internals": "Internals"
+  "introduction": "Introducción",
+  "install": "Instalación",
+  "automatic": "Automático",
+  "manual-mode": "Modo Manual",
+  "internals": "Internas"
 }
diff --git a/website/pages/docs/automatic.es-ES.mdx b/website/pages/docs/automatic.es-ES.mdx
@@ -1,23 +1,23 @@
 ---
-title: 'Automatic Mode'
-description: 'How to use Automatic Mode'
+title: 'Modo Automático'
+description: 'Cómo usar Modo Automático'
 ---
 
 import { Callout, Tab, Tabs } from 'nextra-theme-docs';
 
-# Automatic Mode
+# Modo Automático
 
-Million.js uses Automatic Mode out of the box if you installed via CLI. This optimizes your React components, improving speed without any major code changes. This is the recommended way to use Million.js.
+Million.js utiliza el Modo Automático de forma predeterminada si lo has instalado a través de la CLI.
+Esto optimiza tus componentes de React, mejorando la velocidad sin necesidad de realizar cambios importantes en el código. Esta es la forma recomendada de utilizar Million.js.
 
-### Advanced customization
+### Personalización avanzada
 
-Automatic mode provides customization options:
+El modo automático proporciona opciones de personalización:
 
-- `threshold`: What is used to determine whether a component should be converted to Million.js.
-  When the threshold increases, fewer components will be optimized, and vice versa.
-- `skip`: An array of identifiers to indicate if a component should be skipped. You can add hook or variable names, function names, etc.
+- `threshold`: Se utiliza para determinar si un componente debe convertirse a Million.js. A medida que aumenta el `threshold`, se optimizarán menos componentes, y viceversa.
+- `skip`: Un array de identificadores que indica si un componente debe omitirse. Puedes agregar nombres de hooks, variables, nombres de funciones, etc.
 
-The `auto` object lets you configure options beyond the default ones set during installation:
+El objeto `auto` te permite configurar opciones más allá de las predeterminadas establecidas durante la instalación:
 
 ```js
 auto: {
@@ -40,7 +40,7 @@ const millionConfig = {
   auto: {
     threshold: 0.05, // default: 0.1,
     skip: ['useBadHook', /badVariable/g], // default []
-    // if you're using RSC: auto: { rsc: true },
+    // Si estas usando RSC: auto: { rsc: true },
   }
 }
 
@@ -133,7 +133,7 @@ export default defineConfig({
 
 <Tab>
 <Callout type="warning">
-  If you are using a [Create React App (CRA)](https://create-react-app.dev/) Setup, you will need to [configure Craco](https://craco.js.org/docs/getting-started/) before proceeding.
+  Si estas usando [Create React App (CRA)](https://create-react-app.dev/), necesitaras [configurar Craco](https://craco.js.org/docs/getting-started/) antes de proceder.
 </Callout>
 
 ```js filename="craco.config.js"
@@ -191,17 +191,17 @@ export default {
 
 </Tabs>
 
-### Ignoring components
+### Ignorando componentes
 
-If you encounter an error with a component during the Million.js runtime, it can be skipped using the `// million-ignore` comment.
+Si te encuentras con algún error en un componente durante el tiempo de ejecución de Million.js, puedes omitirlo utilizando el comentario `// million-ignore`.
 
 ```js
 // million-ignore
 function App() {
   return ...
 }
-````
+```
 
-### Muting help messages
+### Silenciando mensajes de ayuda
 
-To avoid seeing help messages, you can pass the `mute: true{:js}` option to the compiler inside the `auto` object.
+Para evitar ver mensajes de ayuda, puedes pasar la opción `mute: true{:js}` al compilador dentro del objeto `auto`.
diff --git a/website/pages/docs/install.es-ES.mdx b/website/pages/docs/install.es-ES.mdx
@@ -1,17 +1,17 @@
 ---
-title: 'Installation'
+title: 'Instalación'
 description: 'How to install Million.js into your React project'
 ---
 
 import { Callout, Tabs, Tab, Steps } from 'nextra-theme-docs';
 
-# Installation
+# Instalación
 
-Million.js assumes that you have an existing React project. To learn about how to create a React app, please see [React's documentation](https://react.dev).
+Million.js asume que ya tienes un proyecto React existente. Para obtener información sobre cómo crear una aplicación con React, consulta la [documentación de React](https://react.dev).
 
-## Install via CLI
+## Instalación via CLI
 
-The Million.js CLI will automatically install the package and configure your project for you.
+La interfaz de línea de comandos (CLI) de Million.js instalará automáticamente el paquete y configurará tu proyecto por ti.
 
 <Tabs items={['npm', 'pnpm', 'yarn', 'bun']} storageKey="selected-manager">
   {/* prettier-ignore */}
@@ -42,32 +42,29 @@ The Million.js CLI will automatically install the package and configure your pro
 
 
 <Callout type="info">
-  Million.js is compatible with React 16 and above. If you're using an older
-  version of React, you'll need to upgrade first.
+Million.js es compatible con React 16 y versiones posteriores. Si estás utilizando una versión más antigua de React, deberás realizar una actualización primero.
 </Callout>
 
-That's it! Your project is now running on Million.js 🎉
+¡Eso es todo! Tu proyecto ahora está en funcionamiento con Million.js 🎉
 
-## Install manually
+## Instalar manualmente
 
-If you have issues [installing via the CLI](#install-via-cli), or you have a custom setup, you can
-install Million.js manually.
+Si encuentras problemas al [instalar a través de la CLI](#install-via-cli), o si tienes una configuración personalizada, puedes instalar Million.js manualmente.
 
-Notice that there are two modes you can choose: **Automatic** and **Manual**:
+Ten en cuenta que hay dos modos entre los que puedes elegir: **Automático** y **Manual**:
 
-- **Automatic mode** will automatically configure, analyze, and optimize your project for you.
-This is the recommended mode.
+- El **modo automático** configurará, analizará y optimizará automáticamente tu proyecto por ti. Este es el modo recomendado.
 
-- **Manual mode** will require you to write code to [optimize certain parts of
-your project](/docs/manual-mode/manual-mode). This mode is recommended for advanced users who want to have more control over their project.
+- El **modo Manual** requerirá que escribas código para [optimizar ciertas partes de tu proyecto](/docs/manual-mode/manual-mode).
+Este modo es recomendado para usuarios avanzados que deseen tener un mayor control sobre su proyecto.
 
 <Tabs items={['Automatic', 'Manual']} storageKey="mode">
 
 <Tab>
 
 <Steps>
 
-### Install Million.js
+### Instala Million.js
 
 <Tabs items={['npm', 'pnpm', 'yarn', 'bun']} storageKey="selected-pkg-manager">
   {/* prettier-ignore */}
@@ -96,11 +93,12 @@ your project](/docs/manual-mode/manual-mode). This mode is recommended for advan
   </Tab>
 </Tabs>
 
-### Add the compiler to your application
+### Agrega el compilador a tu aplicación
 
 <Tabs items={['Next.js', 'Astro', 'Gatsby', 'Vite','Remix', 'Create React App', 'Webpack', 'Rollup']} storageKey="selected-bundler-compiler">
 <Tab>
-Million.js is supported within the `/app` ("use client" components only) and `/pages`
+
+Million.js es compatible dentro de los directorios `/app` (solo componentes "use client") y `/pages`.
 
 ```js filename="next.config.mjs"
 import million from "million/compiler";
@@ -111,7 +109,7 @@ const nextConfig = {
 };
 
 const millionConfig = {
-  auto: true,// if you're using RSC: auto: { rsc: true },
+  auto: true,// Si estas usando RSC: auto: { rsc: true },
 };
 
 export default million.next(nextConfig, millionConfig);
@@ -169,7 +167,7 @@ export default defineConfig({
 
 <Tab>
   <Callout type="warning">
-    If you are using a [Create React App (CRA)](https://create-react-app.dev/) Setup, you will need to [configure Craco](https://craco.js.org/docs/getting-started/) before proceeding.
+    Si estas usando [Create React App (CRA)](https://create-react-app.dev/), necesitaras [configurar Craco](https://craco.js.org/docs/getting-started/) antes de proceder.
   </Callout>
 
 ```js filename="craco.config.js"
@@ -212,7 +210,7 @@ export default {
 
 <Steps>
 
-### Install Million.js
+### Instala Million.js
 
 
 <Tabs items={['npm', 'pnpm', 'yarn', 'bun']} storageKey="selected-pkg-manager">
@@ -243,11 +241,12 @@ npm install million
   </Tab>
 </Tabs>
 
-### Add the compiler to your application
+### Agrega el compilador a tu aplicación
 
 <Tabs items={['Next.js', 'Astro', 'Gatsby', 'Vite', 'Remix', 'Create React App', 'Webpack', 'Rollup']} storageKey="selected-bundler-compiler">
 <Tab>
-Million.js is supported within the `/app` ("use client" components only) and `/pages`
+
+Million.js es compatible dentro de los directorios `/app` (solo componentes "use client") y `/pages`.
 
 ```js filename="next.config.mjs"
 import million from "million/compiler";
@@ -312,7 +311,7 @@ export default defineConfig({
 
 <Tab>
 <Callout type="warning">
-  If you are using a [Create React App (CRA)](https://create-react-app.dev/) Setup, you will need to [configure Craco](https://craco.js.org/docs/getting-started/) before proceeding.
+  Si estas usando [Create React App (CRA)](https://create-react-app.dev/), necesitaras [configurar Craco](https://craco.js.org/docs/getting-started/) antes de proceder.
 </Callout>
 ```js filename="craco.config.js"
 const million = require("million/compiler");

diff --git a/website/pages/docs/internals/block.es-ES.mdx b/website/pages/docs/internals/block.es-ES.mdx
@@ -1,14 +1,13 @@
 ---
 title: "block()"
-description: "A function that creates a stateless component."
+description: "Una función que crea un componente sin estado."
 ---
 
 import { Callout } from 'nextra-theme-docs';
 
 {' '}
 <Callout type="warning">
-  **This function is part of the internal API.** You should only be using this
-  if you are making your own framework.
+  Esta función forma parte de la API interna. Deberías utilizarla **solo** si estás creando tu propio *framework*.
 </Callout>
 
 {' '}
@@ -17,14 +16,14 @@ import { Callout } from 'nextra-theme-docs';
 
 # `block(){:jsx}`
 
-**Syntax:** `block((props) => vnode){:jsx}`\
-**Example:** `block((props) => <div>{props.foo}</div>){:jsx}`
+**Sintaxis:** `block((props) => vnode){:jsx}`\
+**Ejemplo:** `block((props) => <div>{props.foo}</div>){:jsx}`
 
-The `block` function instantiates a `Block` (_a stateless "component"_). It accepts a function with a `props` object parameter that returns a `VNode`.
+La función `block` (*bloque* en español) instancia un `Block` (un "componente" sin estado). Acepta una función que contiene un objeto `props` como parámetro y que devuelve un `VNode`.
 
-### Rules of usage
+### Reglas de uso
 
-##### `props` is an immutable object with primitive or `Block` values.
+##### `props` es un objeto inmutable con valores primitivos o valores de tipo `Block`.
 
 ```jsx
 someBlock({
@@ -40,23 +39,23 @@ someBlock({
 
 ##### Top level values of `props` may not be interpolated with other values.
 
-The `props` are filled with immutable `Hole` values. These values are replaced with the actual values when the `block(){:jsx}` is called.
+Los `props` son llenados con valores inmutables de tipo `Hole`. Estos valores se reemplazan con los valores reales cuando la función `block(){:jsx}` es llamada.
 
 ```jsx
-// Anatomy of a `Hole`
+// Anatomía de un `Hole`
 {
   $: 'prop';
 }
 
-// Example:
+// Ejemplo:
 block((props) => {
   console.log(props.foo); // { $: 'foo' } ✅
   console.log(props.foo + ' bar'); // { $: 'foo' } + ' bar' ❌
   return <div>{props.foo}</div>;
 });
 ```
 
-The following are examples of this rule:
+Algunos ejemplos de esta regla:
 
 ```jsx
 block((props) => {
@@ -66,7 +65,7 @@ block((props) => {
     {Date.now() /* ✅ */}
     <button
       onClick={() => {
-        console.log(props.world); /* ❌ (no holes inside listeners) */
+        console.log(props.world); /* ❌ (No se permiten "holes" dentro de eventos) */
       }}
     >
       {props.count + 1 /* ❌ */}

diff --git a/website/pages/docs/internals/map-array.es-ES.mdx b/website/pages/docs/internals/map-array.es-ES.mdx
@@ -1,23 +1,23 @@
 ---
 title: 'mapArray()'
-description: "The mapArray function is used to create a Block list. It's the best way to loop over an array."
+description: "La función mapArray se utiliza para crear una lista de bloques. Es la mejor manera de recorrer un arreglo."
 ---
 
 import { Callout } from 'nextra-theme-docs';
 
 <Callout type="warning">
-  **This function is part of the internal API.** It is intended for developers
-  creating their own frameworks. It is not recommended for general use.
+  Esta función forma parte de la API interna. Deberías utilizarla **solo** si estás creando tu propio *framework*. No es recomendada para uso general.
 </Callout>
 
 <br />
 
 # `mapArray(){:jsx}`
 
-**Syntax:** `mapArray(Block[]){:jsx}`\
-**Example:** `mapArray([block, block, block]){:jsx}`
+**Sintaxis:** `mapArray(Block[]){:jsx}`\
+**Ejemplo:** `mapArray([block, block, block]){:jsx}`
 
-The `mapArray` function is used to create a Block list. It's the best way to render a view that's derived from array-like data. As the array changes, `mapArray(){:jsx}` updates or moves items in the DOM rather than recreating them. Let's look at an example:
+
+La función mapArray se utiliza para crear una lista de bloques (blocks). Es la mejor manera de renderizar una vista que se deriva de datos provenientes de un array. A medida que cambia el array, `mapArray(){:jsx}` actualiza o mueve elementos en el DOM en lugar de recrearlos. Veamos un ejemplo:
 
 ```jsx
 import { block, patch, mapArray } from 'million';
@@ -28,7 +28,7 @@ const list = block(({ item }) => {
   return <div>{item}</div>;
 });
 
-// updates list efficiently (only 2 moves instead of 3 updates)
+// actualiza la lista de manera eficiente (solo 2 movimientos en lugar de 3 actualizaciones)
 patch(
   document.body,
   mapArray(oldList.map((item) => list({ item }))),

diff --git a/website/pages/docs/internals/mount.es-ES.mdx b/website/pages/docs/internals/mount.es-ES.mdx
@@ -1,23 +1,22 @@
 ---
 title: 'mount()'
-description: 'Mount a block to a DOM element.'
+description: 'Montar un bloque en un elemento del DOM.'
 ---
 
 import { Callout } from 'nextra-theme-docs';
 
 <Callout type="warning">
-  **This function is part of the internal API.** It is intended for developers
-  creating their own frameworks. It is not recommended for general use.
+  Esta función forma parte de la API interna. Deberías utilizarla **solo** si estás creando tu propio *framework*. No es recomendada para uso general.
 </Callout>
 
 <br />
 
 # `mount(){:jsx}`
 
-**Syntax:** `mount(Block, el){:jsx}`\
-**Example:** `mount(block, document.getElementById('root')){:jsx}`
+**Sintaxis:** `mount(Block, el){:jsx}`\
+**Ejemplo:** `mount(block, document.getElementById('root')){:jsx}`
 
-The `mount` function is used to mount a block to a DOM element (imagine `ReactDOM.render()` in React). It takes two arguments: the block to mount and the DOM element to mount it to.
+La función `mount` se utiliza para montar un bloque (block) en un elemento del DOM (imagina `ReactDOM.render()` en React). Toma dos argumentos: el bloque (block) que se va a montar y el elemento del DOM en el que se va a montar.
 
 ```jsx
 import { block, mount } from 'million';