From 6e6b7032f5ed2a0e12250d650006eb7df3f25cf1 Mon Sep 17 00:00:00 2001 From: Helmer <11061182+helmerdavila@users.noreply.github.com> Date: Thu, 25 Apr 2024 18:54:57 -0400 Subject: [PATCH 01/14] i18n(es): First preview of making toolbar apps --- .../docs/es/recipes/making-toolbar-apps.mdx | 185 ++++++++++++++++++ 1 file changed, 185 insertions(+) create mode 100644 src/content/docs/es/recipes/making-toolbar-apps.mdx diff --git a/src/content/docs/es/recipes/making-toolbar-apps.mdx b/src/content/docs/es/recipes/making-toolbar-apps.mdx new file mode 100644 index 0000000000000..bc3abd82eb200 --- /dev/null +++ b/src/content/docs/es/recipes/making-toolbar-apps.mdx @@ -0,0 +1,185 @@ +--- +title: Crear aplicaciones de barra de herramientas para desarrollo +description: Aprende como crear una aplicación de barra de herramientas para desarrollo para tu sitio +type: recipe +i18nReady: true +--- + +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { FileTree } from '@astrojs/starlight/components'; +import { Steps } from '@astrojs/starlight/components'; +import ReadMore from '~/components/ReadMore.astro'; + +Astro incluye una [barra de herramientas de desarrollo](/es/guides/dev-toolbar/) que puedes usar para inspeccionar tu sitio, comprobar la accesibilidad y problemas de rendimiento, y más. Esta barra puede ser extendida con aplicaciones personalizadas. + +## Construir una aplicación de barra de herramientas para desarrollo motivacional + +En esta receta, aprenderás como crear una barra de herramienta de desarrollo que te ayuda a estar motivado mientras estás trabajando en tu sitio. Esta aplicación mostrará un mensaje motivacional cada vez que lo actives. + +:::tip +¿Quieres comenzar rápidamente? Comienza tu aplicación creando un proyecto nuevo con AStro usando la plantilla `toolbar-app`. + + + + ```shell + npm create astro@latest -- --template toolbar-app + ``` + + + ```shell + pnpm create astro -- --template toolbar-app + ``` + + + ```shell + yarn create astro -- --template toolbar-app + ``` + + + +O, sigue leyendo para aprender como construir la aplicación desde cero. +::: + +### Creando la integración con Astro + +Las aplicaciones de barra de herramientas para desarrollo sólo pueden ser agregadas por [las integraciones de Astro](/es/guides/integrations-guide/) usando [el hook `astro:config:setup`](/en/reference/integrations-reference/#astroconfigsetup). Necesitarás crear la aplicación de barra de herramientas y la integración que agregará la barra de herramientas a tu proyecto de Astro existente. + + + +1. En la raíz de tu proyecto Astro, crea un nuevo directorio llamado `my-toolbar-app/` para tu aplicación y archivos de integración. Crea dos nuevos archivos en este directorio: `app.ts` y `my-integration.ts`. + + + - **my-toolbar-app/** + - **app.ts** + - **my-integration.ts** + - src/ + - pages/ + - ... + - astro.config.mjs + - package.json + - tsconfig.json + + + +2. En `my-integration.ts`, agrega el siguiente código para proveer el nombre de tu integración y la [función `addDevToolbarApp()`](/en/reference/dev-toolbar-app-reference/#toolbar-app-integration-setup) que añadirá tu aplicación de barra de herramientas con el hook `astro:config:setup`: + + ```ts title="my-toolbar-app/my-integration.ts" "'astro:config:setup'" "hooks" "addDevToolbarApp" + import { fileURLToPath } from 'node:url'; + import type { AstroIntegration } from 'astro'; + + export default { + name: 'my-astro-integration', + hooks: { + 'astro:config:setup': ({ addDevToolbarApp }) => { + addDevToolbarApp({ + id: "my-toolbar-app", + name: "My Toolbar App", + icon: "🚀", + entrypoint: fileURLToPath(new URL('./app.ts', import.meta.url)) + }); + }, + }, + } satisfies AstroIntegration; + ``` + + :::note[Usando rutas relativas en el entrypoint] + El `entrypoint` es la ruta al archivo de tu aplicación de barra de herramientas, **relativo a la raíz de tu proyecto Astro existente**, no al directorio de integración (`my-toolbar-app/`) por sí mismo. + +3. Para usar esta integración en tu proyecto, agrégala al array `integrations` en tu archivo `astro.config.mjs`. + + ```js title="astro.config.mjs" ins={2,5} + import { defineConfig } from 'astro/config'; + import myIntegration from './my-toolbar-app/my-integration.ts'; + + export default defineConfig({ + integrations: [myIntegration], + }) + ``` + +4. Si aún el servidor de desarrollo no está corriendo, inícialo. Si la integración ha sido exitosamente añadida a tu proyecto, deberías ver una nueva aplicación "undefined" en la barra de herramientas de desarrollo. + + Pero, también verás un mensaje de error de que tu aplicación de barra de herramientas de desarrollo ha fallado al cargar. Esto es porque aún no has creado la aplicación. Lo haremos en la siguiente sección. + + + + Mira la [documentación de la API de integración de Astro](/es/reference/integrations-reference/) para más información sobre como construir integraciones en Astro. + +### Creando la aplicación + +Las aplicaciones de barra de herramientas para desarrollo son definidas usando la función `defineToolbarApp()` del módulo `astro/toolbar`. Esta función toma un objeto con una función `init()` que será llamada cuando la aplicación de barra de herramientas para desarrollo es cargada. + +Esta función `init()` contiene la lógica de tu aplicación para renderizar los elementos en la pantalla, enviar y recibir eventos del lado del cliente de la barra de desarrollo, y comunicarse con el servidor. + +```ts title="app.ts" +import { defineToolbarApp } from "astro/toolbar"; + +export default defineToolbarApp({ + init(canvas, app, server) { + // ... + }, +}); +``` + +Para mostrar mensajes motivacionales en la pantalla, utilizarás la propiedad `canvas` para acceder a un [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) estándar. Los elementos pueden ser creados y agregados al ShadowRoot utilizando las API estándar del DOM. + + + +1. Copia el siguiente código en `my-toolbar-app/app.ts`. Este código provee una lista de mensajes motivacionales, y la lógica para crear un nuevo elemento `

` con un mensaje aleatorio. + + ```ts title="my-toolbar-app/app.ts" {3-8, 12-15} + import { defineToolbarApp } from "astro/toolbar"; + + const motivationalMessages = [ + "¡Lo estás haciendo genial!", + "¡Sigue trabajando así!", + "¡Eres increíble!", + "¡Eres una estrella!", + ]; + + export default defineToolbarApp({ + init(canvas) { + const h1 = document.createElement('h1'); + h1.textContent = motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)]; + + canvas.append(h1); + }, + }); + ``` + +2. Inicia el servidor si aún no está corriendo y activa la aplicación en la barra de herramientas de desarrollo. Si tu aplicación funciona correctamente, verás un mensaje motivacional en la parte superior izquierda de tu pantalla. (Y, ¡tienen razón!) + + Sin embargo, este mensaje no cambiará cuando la aplicación se activa y desactiva consecutivamente, puesto que la función `init()` es llamada solamente cuando la aplicación es cargada. + +3. Para agregar interactividad desde el lado del cliente a tu aplicación, agrega el argumento `app` y utiliza `onAppToggled()` para seleccionar un nuevo mensaje aleatorio cada vez que tu aplicación de barra de herramientas es activada. + + ```ts title="app.ts" ins=", app" ins={17-21} + import { defineToolbarApp } from "astro/toolbar"; + + const motivationalMessages = [ + "¡Lo estás haciendo genial!", + "¡Sigue trabajando así!", + "¡Eres increíble!", + "¡Eres una estrella!", + ]; + + export default defineToolbarApp({ + init(canvas, app) { + const h1 = document.createElement('h1'); + h1.textContent = motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)]; + + canvas.append(h1); + + // Mostrar un mensaje aleatorio cuando la aplicación es activada + app.onToggled(({ state }) => { + const newMessage = motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)]; + h1.textContent = newMessage; + }); + }, + }); + ``` + +4. En la vista previa de tu navegador, activa y desactiva tu aplicación consecutivamente algunas veces. Con este cambio, un nuevo mensaje se seleccionará cada vez que tu aplicación sea activada, dándote una fuente infinita de motivación. + + + + Mira la [documentación de la API de aplicaciones de barra de herramientas para desarrollo](/es/reference/dev-toolbar-app-reference/) para más información sobre como construir aplicaciones de barra de herramientas para desarrollo. \ No newline at end of file From 580f4e1466d2ac9b5d61f32080384ccb947ff5ee Mon Sep 17 00:00:00 2001 From: Helmer <11061182+helmerdavila@users.noreply.github.com> Date: Thu, 25 Apr 2024 22:33:20 -0400 Subject: [PATCH 02/14] i18n(es): Using es prefix for some links --- src/content/docs/es/recipes/making-toolbar-apps.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/es/recipes/making-toolbar-apps.mdx b/src/content/docs/es/recipes/making-toolbar-apps.mdx index bc3abd82eb200..75531e306afce 100644 --- a/src/content/docs/es/recipes/making-toolbar-apps.mdx +++ b/src/content/docs/es/recipes/making-toolbar-apps.mdx @@ -42,7 +42,7 @@ O, sigue leyendo para aprender como construir la aplicación desde cero. ### Creando la integración con Astro -Las aplicaciones de barra de herramientas para desarrollo sólo pueden ser agregadas por [las integraciones de Astro](/es/guides/integrations-guide/) usando [el hook `astro:config:setup`](/en/reference/integrations-reference/#astroconfigsetup). Necesitarás crear la aplicación de barra de herramientas y la integración que agregará la barra de herramientas a tu proyecto de Astro existente. +Las aplicaciones de barra de herramientas para desarrollo sólo pueden ser agregadas por [las integraciones de Astro](/es/guides/integrations-guide/) usando [el hook `astro:config:setup`](/es/reference/integrations-reference/#astroconfigsetup). Necesitarás crear la aplicación de barra de herramientas y la integración que agregará la barra de herramientas a tu proyecto de Astro existente. @@ -61,7 +61,7 @@ Las aplicaciones de barra de herramientas para desarrollo sólo pueden ser agreg -2. En `my-integration.ts`, agrega el siguiente código para proveer el nombre de tu integración y la [función `addDevToolbarApp()`](/en/reference/dev-toolbar-app-reference/#toolbar-app-integration-setup) que añadirá tu aplicación de barra de herramientas con el hook `astro:config:setup`: +2. En `my-integration.ts`, agrega el siguiente código para proveer el nombre de tu integración y la [función `addDevToolbarApp()`](/es/reference/dev-toolbar-app-reference/#toolbar-app-integration-setup) que añadirá tu aplicación de barra de herramientas con el hook `astro:config:setup`: ```ts title="my-toolbar-app/my-integration.ts" "'astro:config:setup'" "hooks" "addDevToolbarApp" import { fileURLToPath } from 'node:url'; From 04a861a67f65be663e4244760b7a08ef2e04c287 Mon Sep 17 00:00:00 2001 From: Helmer <11061182+helmerdavila@users.noreply.github.com> Date: Thu, 25 Apr 2024 22:54:59 -0400 Subject: [PATCH 03/14] i18n(es): Final content translated --- .../docs/es/recipes/making-toolbar-apps.mdx | 136 +++++++++++++++++- 1 file changed, 135 insertions(+), 1 deletion(-) diff --git a/src/content/docs/es/recipes/making-toolbar-apps.mdx b/src/content/docs/es/recipes/making-toolbar-apps.mdx index 75531e306afce..b133607757489 100644 --- a/src/content/docs/es/recipes/making-toolbar-apps.mdx +++ b/src/content/docs/es/recipes/making-toolbar-apps.mdx @@ -182,4 +182,138 @@ Para mostrar mensajes motivacionales en la pantalla, utilizarás la propiedad `c - Mira la [documentación de la API de aplicaciones de barra de herramientas para desarrollo](/es/reference/dev-toolbar-app-reference/) para más información sobre como construir aplicaciones de barra de herramientas para desarrollo. \ No newline at end of file + Mira la [documentación de la API de aplicaciones de barra de herramientas para desarrollo](/es/reference/dev-toolbar-app-reference/) para más información sobre como construir aplicaciones de barra de herramientas para desarrollo. + +## Construyendo apps con un framework UI + +Los frameworks UI como React, Vue, o Svelte pueden también ser usados para crear aplicaciones de barra de herramientas para desarrollo. Estos frameworks proveen una manera más declarativa para crear UIs y hacer que tu código sea más mantenible y fácil de leer. + +La misma aplicación de barra de herramientas para desarrollo motivacional construida en tu proyecto Astro en esta página con JavaScript, puede ser construida con un framework UI (e.j Preact) en su lugar. Dependiendo en el framework de tu elección, puedes o no puedes requerir un paso de build adicional. + +:::note +Como tu hayas escogido crear tu aplicación de barra de herramientas para desarrollo, usando JavaScript o un framework UI, necesitarás [crear la integración](#creando-la-integración-con-astro) que agrega tu aplicación a la barra de herramientas de desarrollo. +::: + +### Sin un paso de build + +Si tu framework lo soporta, puedes crear una aplicación de barra de herramientas para desarrollo sin un paso de build adicional. Por ejemplo, puedes usar la función de Preact `h` para crear elementos y renderizarlos directamente al ShadowRoot: + +```ts title="app.ts" +import { defineToolbarApp } from "astro/toolbar"; +import { render, h } from "preact"; + +const motivationalMessages = [ + "¡Lo estás haciendo genial!", + "¡Sigue trabajando así!", + "¡Eres increíble!", + "¡Eres una estrella!", +]; + +export default defineToolbarApp({ + init(canvas) { + const message = motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)]; + render(h('h1', null, message), canvas); + }, +}); +``` + +Alternativamente, el [paquete `htm`](https://github.com/developit/htm) es una buena elección para crear una aplicación de barra de herramientas para desarrollo sin un paso de build adicional, ofreciendo una integración nativa para React y Preact, además del soporte para otros frameworks: + +```ts title="app.ts" ins={3, 15} +import { defineToolbarApp } from "astro/toolbar"; +import { render } from "preact"; +import { html } from 'htm/preact'; + +const motivationalMessages = [ + "¡Lo estás haciendo genial!", + "¡Sigue trabajando así!", + "¡Eres increíble!", + "¡Eres una estrella!", +]; + +export default defineToolbarApp({ + init(canvas) { + const message = motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)]; + render(html`

${message}

`, canvas); + }, +}); +``` + +En ambos casos, puedes iniciar el proyecto y ver el mensaje motivacional en la esquina superior izquierda de tu pantalla cuando la aplicación es activada. + +### Con un paso de build + +Astro no preprocesa código JSX en las aplicaciones de barra de herramientas para desarrollo, por lo tanto un paso de build adicional es requerido para usar componentes JSX en tu aplicación de barra de herramientas para desarrollo. + +Los siguientes pasos usarán TypeScript para hacerlo, pero cualquier otra herramienta para compilar código JSX puede ser usada (e.j Babel, Rollup, ESBuild). + + +1. Instala TypeScript en tu proyecto: + + + + ```shell + npm install --save-dev typescript + ``` + + + ```shell + pnpm install --save-dev typescript + ``` + + + ```shell + yarn add --dev typescript + ``` + + + + +2. Crear un archivo `tsconfig.json` en la raíz de tu directorio de aplicación de barra de herramientas con las configuraciones apropiadas para hacer un build y para el framework que estés usando ([React](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup), [Preact](https://preactjs.com/guide/v10/typescript), [Solid](https://www.solidjs.com/guides/typescript)). Por ejemplo, para Preact: + + ```json title="my-toolbar-app/tsconfig.json" + { + "compilerOptions": { + "skipLibCheck": true, + "module": "NodeNext", + "jsx": "react-jsx", + "jsxImportSource": "preact", + } + } + ``` +3. Ajustar la propiedad `entrypoint` en tu integración para apuntar al archivo compilado, recordando que ese archivo es relativo a la raíz de tu proyecto Astro. + + ```ts title="my-integration.ts" ins="app.js" + addDevToolbarApp({ + id: "my-toolbar-app", + name: "Mi aplicación de barra de herramientas", + icon: "🚀", + entrypoint: join(__dirname, "./app.js"), + }); + ``` + +4. Ejecuta `tsc` para hacer un build de tu aplicación de barra de herramientas, o `tsc --watch` para automáticamente hacer un rebuild de tu aplicación cuando hagas cambios. + + Con estos cambios, puedes renombrar tu archivo `app.ts` a `app.tsx` (o `.jsx`) y usar la síntaxis JSX para crear tu aplicación de barra de herramientas para desarrollo. + + ```tsx title="app.tsx" + import { defineToolbarApp } from "astro/toolbar"; + import { render } from "preact"; + + const motivationalMessages = [ + "¡Lo estás haciendo genial!", + "¡Sigue trabajando así!", + "¡Eres increíble!", + "¡Eres una estrella!", + ]; + + export default defineToolbarApp({ + init(canvas) { + const message = motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)]; + render(

{message}

, canvas); + }, + }); + ``` + + +Ya deberías tener todas las herramientas que necesitas para crear una aplicación de barra de herramientas para desarrollo usando el framework UI de tu elección. \ No newline at end of file From 6612c279a5dff6c809ec13a52fb40976d8d573fe Mon Sep 17 00:00:00 2001 From: Helmer <11061182+helmerdavila@users.noreply.github.com> Date: Thu, 25 Apr 2024 22:58:48 -0400 Subject: [PATCH 04/14] i18n(es): Fixing link anchor --- src/content/docs/es/recipes/making-toolbar-apps.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/es/recipes/making-toolbar-apps.mdx b/src/content/docs/es/recipes/making-toolbar-apps.mdx index b133607757489..fd589fdc81bf5 100644 --- a/src/content/docs/es/recipes/making-toolbar-apps.mdx +++ b/src/content/docs/es/recipes/making-toolbar-apps.mdx @@ -61,7 +61,7 @@ Las aplicaciones de barra de herramientas para desarrollo sólo pueden ser agreg -2. En `my-integration.ts`, agrega el siguiente código para proveer el nombre de tu integración y la [función `addDevToolbarApp()`](/es/reference/dev-toolbar-app-reference/#toolbar-app-integration-setup) que añadirá tu aplicación de barra de herramientas con el hook `astro:config:setup`: +2. En `my-integration.ts`, agrega el siguiente código para proveer el nombre de tu integración y la [función `addDevToolbarApp()`](/es/reference/dev-toolbar-app-reference/#agregando-apps) que añadirá tu aplicación de barra de herramientas con el hook `astro:config:setup`: ```ts title="my-toolbar-app/my-integration.ts" "'astro:config:setup'" "hooks" "addDevToolbarApp" import { fileURLToPath } from 'node:url'; From 5cb68b78dd915c2f4dc6e1b1596c3fe0d0cda1f1 Mon Sep 17 00:00:00 2001 From: Helmer <11061182+helmerdavila@users.noreply.github.com> Date: Fri, 26 Apr 2024 18:56:14 -0400 Subject: [PATCH 05/14] Update src/content/docs/es/recipes/making-toolbar-apps.mdx Co-authored-by: Waxer59 <78129249+Waxer59@users.noreply.github.com> --- src/content/docs/es/recipes/making-toolbar-apps.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/es/recipes/making-toolbar-apps.mdx b/src/content/docs/es/recipes/making-toolbar-apps.mdx index fd589fdc81bf5..3ae6d735b7658 100644 --- a/src/content/docs/es/recipes/making-toolbar-apps.mdx +++ b/src/content/docs/es/recipes/making-toolbar-apps.mdx @@ -17,7 +17,7 @@ Astro incluye una [barra de herramientas de desarrollo](/es/guides/dev-toolbar/) En esta receta, aprenderás como crear una barra de herramienta de desarrollo que te ayuda a estar motivado mientras estás trabajando en tu sitio. Esta aplicación mostrará un mensaje motivacional cada vez que lo actives. :::tip -¿Quieres comenzar rápidamente? Comienza tu aplicación creando un proyecto nuevo con AStro usando la plantilla `toolbar-app`. +¿Quieres comenzar rápidamente? Comienza tu aplicación creando un proyecto nuevo con Astro usando la plantilla `toolbar-app`. From 67ad8097ea403c730baac9ea6ef851945e91959f Mon Sep 17 00:00:00 2001 From: Helmer <11061182+helmerdavila@users.noreply.github.com> Date: Fri, 26 Apr 2024 18:56:23 -0400 Subject: [PATCH 06/14] Update src/content/docs/es/recipes/making-toolbar-apps.mdx Co-authored-by: Waxer59 <78129249+Waxer59@users.noreply.github.com> --- src/content/docs/es/recipes/making-toolbar-apps.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/es/recipes/making-toolbar-apps.mdx b/src/content/docs/es/recipes/making-toolbar-apps.mdx index 3ae6d735b7658..f25f519a11740 100644 --- a/src/content/docs/es/recipes/making-toolbar-apps.mdx +++ b/src/content/docs/es/recipes/making-toolbar-apps.mdx @@ -46,7 +46,7 @@ Las aplicaciones de barra de herramientas para desarrollo sólo pueden ser agreg -1. En la raíz de tu proyecto Astro, crea un nuevo directorio llamado `my-toolbar-app/` para tu aplicación y archivos de integración. Crea dos nuevos archivos en este directorio: `app.ts` y `my-integration.ts`. +1. En la raíz de tu proyecto de Astro, crea un nuevo directorio llamado `my-toolbar-app/` para tu aplicación y archivos de integración. Crea dos nuevos archivos en este directorio: `app.ts` y `my-integration.ts`. - **my-toolbar-app/** From b5aaaf3a7a0fe5f36853821af3563cd2dab26294 Mon Sep 17 00:00:00 2001 From: Helmer <11061182+helmerdavila@users.noreply.github.com> Date: Fri, 26 Apr 2024 18:56:32 -0400 Subject: [PATCH 07/14] Update src/content/docs/es/recipes/making-toolbar-apps.mdx Co-authored-by: Waxer59 <78129249+Waxer59@users.noreply.github.com> --- src/content/docs/es/recipes/making-toolbar-apps.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/es/recipes/making-toolbar-apps.mdx b/src/content/docs/es/recipes/making-toolbar-apps.mdx index f25f519a11740..c2d9b3e49c94d 100644 --- a/src/content/docs/es/recipes/making-toolbar-apps.mdx +++ b/src/content/docs/es/recipes/making-toolbar-apps.mdx @@ -83,7 +83,7 @@ Las aplicaciones de barra de herramientas para desarrollo sólo pueden ser agreg ``` :::note[Usando rutas relativas en el entrypoint] - El `entrypoint` es la ruta al archivo de tu aplicación de barra de herramientas, **relativo a la raíz de tu proyecto Astro existente**, no al directorio de integración (`my-toolbar-app/`) por sí mismo. + El `entrypoint` es la ruta al archivo de tu aplicación de barra de herramientas, **relativo a la raíz de tu proyecto de Astro existente**, no al directorio de integración (`my-toolbar-app/`) por sí mismo. 3. Para usar esta integración en tu proyecto, agrégala al array `integrations` en tu archivo `astro.config.mjs`. From c73083f483b30cbfc655e739a42d3923702b4350 Mon Sep 17 00:00:00 2001 From: Helmer <11061182+helmerdavila@users.noreply.github.com> Date: Fri, 26 Apr 2024 18:57:07 -0400 Subject: [PATCH 08/14] Update src/content/docs/es/recipes/making-toolbar-apps.mdx Co-authored-by: Waxer59 <78129249+Waxer59@users.noreply.github.com> --- src/content/docs/es/recipes/making-toolbar-apps.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/es/recipes/making-toolbar-apps.mdx b/src/content/docs/es/recipes/making-toolbar-apps.mdx index c2d9b3e49c94d..09b95f32b7f87 100644 --- a/src/content/docs/es/recipes/making-toolbar-apps.mdx +++ b/src/content/docs/es/recipes/making-toolbar-apps.mdx @@ -194,7 +194,7 @@ La misma aplicación de barra de herramientas para desarrollo motivacional const Como tu hayas escogido crear tu aplicación de barra de herramientas para desarrollo, usando JavaScript o un framework UI, necesitarás [crear la integración](#creando-la-integración-con-astro) que agrega tu aplicación a la barra de herramientas de desarrollo. ::: -### Sin un paso de build +### Sin un paso de construcción Si tu framework lo soporta, puedes crear una aplicación de barra de herramientas para desarrollo sin un paso de build adicional. Por ejemplo, puedes usar la función de Preact `h` para crear elementos y renderizarlos directamente al ShadowRoot: From 3bc975693e032680bc238901343131b5b0713303 Mon Sep 17 00:00:00 2001 From: Helmer <11061182+helmerdavila@users.noreply.github.com> Date: Fri, 26 Apr 2024 18:57:12 -0400 Subject: [PATCH 09/14] Update src/content/docs/es/recipes/making-toolbar-apps.mdx Co-authored-by: Waxer59 <78129249+Waxer59@users.noreply.github.com> --- src/content/docs/es/recipes/making-toolbar-apps.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/es/recipes/making-toolbar-apps.mdx b/src/content/docs/es/recipes/making-toolbar-apps.mdx index 09b95f32b7f87..fc82781d6cab2 100644 --- a/src/content/docs/es/recipes/making-toolbar-apps.mdx +++ b/src/content/docs/es/recipes/making-toolbar-apps.mdx @@ -188,7 +188,7 @@ Para mostrar mensajes motivacionales en la pantalla, utilizarás la propiedad `c Los frameworks UI como React, Vue, o Svelte pueden también ser usados para crear aplicaciones de barra de herramientas para desarrollo. Estos frameworks proveen una manera más declarativa para crear UIs y hacer que tu código sea más mantenible y fácil de leer. -La misma aplicación de barra de herramientas para desarrollo motivacional construida en tu proyecto Astro en esta página con JavaScript, puede ser construida con un framework UI (e.j Preact) en su lugar. Dependiendo en el framework de tu elección, puedes o no puedes requerir un paso de build adicional. +La misma aplicación de barra de herramientas para desarrollo motivacional construida en tu proyecto de Astro en esta página con JavaScript, puede ser construida con un framework UI (e.j Preact) en su lugar. Dependiendo en el framework de tu elección, puedes o no puedes requerir un paso de construcción adicional. :::note Como tu hayas escogido crear tu aplicación de barra de herramientas para desarrollo, usando JavaScript o un framework UI, necesitarás [crear la integración](#creando-la-integración-con-astro) que agrega tu aplicación a la barra de herramientas de desarrollo. From e196f9bdd9fc1e52eee4b08f7fdab172bb6511d2 Mon Sep 17 00:00:00 2001 From: Helmer <11061182+helmerdavila@users.noreply.github.com> Date: Fri, 26 Apr 2024 18:57:19 -0400 Subject: [PATCH 10/14] Update src/content/docs/es/recipes/making-toolbar-apps.mdx Co-authored-by: Waxer59 <78129249+Waxer59@users.noreply.github.com> --- src/content/docs/es/recipes/making-toolbar-apps.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/es/recipes/making-toolbar-apps.mdx b/src/content/docs/es/recipes/making-toolbar-apps.mdx index fc82781d6cab2..9ef1aac3efdc6 100644 --- a/src/content/docs/es/recipes/making-toolbar-apps.mdx +++ b/src/content/docs/es/recipes/making-toolbar-apps.mdx @@ -241,7 +241,7 @@ export default defineToolbarApp({ En ambos casos, puedes iniciar el proyecto y ver el mensaje motivacional en la esquina superior izquierda de tu pantalla cuando la aplicación es activada. -### Con un paso de build +### Con un paso de construcción Astro no preprocesa código JSX en las aplicaciones de barra de herramientas para desarrollo, por lo tanto un paso de build adicional es requerido para usar componentes JSX en tu aplicación de barra de herramientas para desarrollo. From 51f7ecfbeb1d047b12a9f7fe02bb65b417aa792b Mon Sep 17 00:00:00 2001 From: Helmer <11061182+helmerdavila@users.noreply.github.com> Date: Fri, 26 Apr 2024 18:57:25 -0400 Subject: [PATCH 11/14] Update src/content/docs/es/recipes/making-toolbar-apps.mdx Co-authored-by: Waxer59 <78129249+Waxer59@users.noreply.github.com> --- src/content/docs/es/recipes/making-toolbar-apps.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/es/recipes/making-toolbar-apps.mdx b/src/content/docs/es/recipes/making-toolbar-apps.mdx index 9ef1aac3efdc6..3488dee8fbc01 100644 --- a/src/content/docs/es/recipes/making-toolbar-apps.mdx +++ b/src/content/docs/es/recipes/making-toolbar-apps.mdx @@ -243,7 +243,7 @@ En ambos casos, puedes iniciar el proyecto y ver el mensaje motivacional en la e ### Con un paso de construcción -Astro no preprocesa código JSX en las aplicaciones de barra de herramientas para desarrollo, por lo tanto un paso de build adicional es requerido para usar componentes JSX en tu aplicación de barra de herramientas para desarrollo. +Astro no preprocesa código JSX en las aplicaciones de barra de herramientas para desarrollo, por lo tanto un paso de construcción adicional es requerido para usar componentes JSX en tu aplicación de barra de herramientas para desarrollo. Los siguientes pasos usarán TypeScript para hacerlo, pero cualquier otra herramienta para compilar código JSX puede ser usada (e.j Babel, Rollup, ESBuild). From 971e559a750b6bdee74c936620c872bc9a601702 Mon Sep 17 00:00:00 2001 From: Helmer <11061182+helmerdavila@users.noreply.github.com> Date: Fri, 26 Apr 2024 18:57:36 -0400 Subject: [PATCH 12/14] Update src/content/docs/es/recipes/making-toolbar-apps.mdx Co-authored-by: Waxer59 <78129249+Waxer59@users.noreply.github.com> --- src/content/docs/es/recipes/making-toolbar-apps.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/es/recipes/making-toolbar-apps.mdx b/src/content/docs/es/recipes/making-toolbar-apps.mdx index 3488dee8fbc01..22b55a6fe1bb1 100644 --- a/src/content/docs/es/recipes/making-toolbar-apps.mdx +++ b/src/content/docs/es/recipes/making-toolbar-apps.mdx @@ -269,7 +269,7 @@ Los siguientes pasos usarán TypeScript para hacerlo, pero cualquier otra herram -2. Crear un archivo `tsconfig.json` en la raíz de tu directorio de aplicación de barra de herramientas con las configuraciones apropiadas para hacer un build y para el framework que estés usando ([React](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup), [Preact](https://preactjs.com/guide/v10/typescript), [Solid](https://www.solidjs.com/guides/typescript)). Por ejemplo, para Preact: +2. Crea un archivo `tsconfig.json` en la raíz de tu directorio de aplicación de barra de herramientas con las configuraciones apropiadas para hacer un build y para el framework que estés usando ([React](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup), [Preact](https://preactjs.com/guide/v10/typescript), [Solid](https://www.solidjs.com/guides/typescript)). Por ejemplo, para Preact: ```json title="my-toolbar-app/tsconfig.json" { From 2ab02f13c8233e1afd2d9a01dcdbcfe87d3ee8ed Mon Sep 17 00:00:00 2001 From: Helmer <11061182+helmerdavila@users.noreply.github.com> Date: Fri, 26 Apr 2024 18:57:42 -0400 Subject: [PATCH 13/14] Update src/content/docs/es/recipes/making-toolbar-apps.mdx Co-authored-by: Waxer59 <78129249+Waxer59@users.noreply.github.com> --- src/content/docs/es/recipes/making-toolbar-apps.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/es/recipes/making-toolbar-apps.mdx b/src/content/docs/es/recipes/making-toolbar-apps.mdx index 22b55a6fe1bb1..eabf2d0d3c7d4 100644 --- a/src/content/docs/es/recipes/making-toolbar-apps.mdx +++ b/src/content/docs/es/recipes/making-toolbar-apps.mdx @@ -281,7 +281,7 @@ Los siguientes pasos usarán TypeScript para hacerlo, pero cualquier otra herram } } ``` -3. Ajustar la propiedad `entrypoint` en tu integración para apuntar al archivo compilado, recordando que ese archivo es relativo a la raíz de tu proyecto Astro. +3. Ajusta la propiedad `entrypoint` en tu integración para apuntar al archivo compilado, recordando que ese archivo es relativo a la raíz de tu proyecto de Astro. ```ts title="my-integration.ts" ins="app.js" addDevToolbarApp({ From 5b0bb264256c42e418f1278609855d96fe188a95 Mon Sep 17 00:00:00 2001 From: Helmer <11061182+helmerdavila@users.noreply.github.com> Date: Fri, 26 Apr 2024 18:57:46 -0400 Subject: [PATCH 14/14] Update src/content/docs/es/recipes/making-toolbar-apps.mdx Co-authored-by: Waxer59 <78129249+Waxer59@users.noreply.github.com> --- src/content/docs/es/recipes/making-toolbar-apps.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/es/recipes/making-toolbar-apps.mdx b/src/content/docs/es/recipes/making-toolbar-apps.mdx index eabf2d0d3c7d4..8313089365bf3 100644 --- a/src/content/docs/es/recipes/making-toolbar-apps.mdx +++ b/src/content/docs/es/recipes/making-toolbar-apps.mdx @@ -292,7 +292,7 @@ Los siguientes pasos usarán TypeScript para hacerlo, pero cualquier otra herram }); ``` -4. Ejecuta `tsc` para hacer un build de tu aplicación de barra de herramientas, o `tsc --watch` para automáticamente hacer un rebuild de tu aplicación cuando hagas cambios. +4. Ejecuta `tsc` para hacer construir tu aplicación de barra de herramientas, o `tsc --watch` para automáticamente hacer una reconstrucción de tu aplicación cuando hagas cambios. Con estos cambios, puedes renombrar tu archivo `app.ts` a `app.tsx` (o `.jsx`) y usar la síntaxis JSX para crear tu aplicación de barra de herramientas para desarrollo.