Creation:2025-04-18Last update:2026-05-31

    Traduce tu Vite y Preact con Intlayer | Internacionalización (i18n)

    www.youtube.com
    Este paquete está en desarrollo. Consulta el issue para más información. Muestra tu interés en Intlayer para Preact dando like al issue.

    See Plantilla de Aplicación en GitHub.

    ¿Por qué Intlayer en lugar de alternativas?

    En comparación con soluciones principales como preact-i18n o i18next, Intlayer es una solución que viene con optimizaciones integradas como:

    Intlayer está optimizado para funcionar perfectamente con Preact al ofrecer alcance del contenido a nivel de componente, traducciones cargadas de forma diferida y todas las funciones necesarias para escalar la internacionalización (i18n).

    En lugar de cargar archivos JSON masivos en sus páginas, cargue solo el contenido necesario. Intlayer ayuda a reducir el tamaño de su bundle y de sus páginas hasta en un 50%.

    Determinar el alcance del contenido de su aplicación facilita el mantenimiento para aplicaciones a gran escala. Puede duplicar o eliminar una sola carpeta de funciones sin la carga mental de revisar todo el código base de contenido. Además, Intlayer está completamente escrito para garantizar la precisión de su contenido.

    La ubicación conjunta de contenido reduce el contexto necesario para los modelos de lenguajes grandes (LLM). Intlayer también viene con un conjunto de herramientas, como una CLI para comprobar si faltan traducciones,LSP, MCP y agent skills, para que la experiencia del desarrollador (DX) sea aún más fluida para los agentes de IA.

    Utilice la automatización para traducir su canal de CI/CD utilizando el LLM de su elección al costo de su proveedor de IA. Intlayer también ofrece un compilador para automatizar la extracción de contenido, así como una plataforma web para ayudar a traducir en segundo plano.

    La conexión de archivos JSON masivos a componentes puede provocar problemas de rendimiento y reactividad. Intlayer optimiza la carga de su contenido en el momento de la compilación.

    Más que una simple solución i18n, Intlayer proporciona un [editor visual] autohospedado(/es/doc/concept/editor) y un CMS completo para ayudarle a administrar su contenido multilingüe en tiempo real, lo que facilita la colaboración con traductores, redactores y otros miembros del equipo. El contenido se puede almacenar de forma local y/o remota.

    Guía paso a paso para configurar Intlayer en una aplicación Vite y Preact

    1. Instalar dependencias

      Instala los paquetes necesarios usando npm:

      bash
      npm install intlayer preact-intlayernpm install vite-intlayer --save-devnpx intlayer init

      • intlayer

        El paquete principal que proporciona herramientas de internacionalización para la gestión de configuración, traducción, declaración de contenido, transpilación y comandos CLI.

      • preact-intlayer El paquete que integra Intlayer con la aplicación Preact. Proporciona proveedores de contexto y hooks para la internacionalización en Preact.

      • vite-intlayer Incluye el plugin de Vite para integrar Intlayer con el empaquetador Vite, así como middleware para detectar la configuración regional preferida del usuario, gestionar cookies y manejar la redirección de URLs.

    2. Configuración de tu proyecto

      Crea un archivo de configuración para configurar los idiomas de tu aplicación:

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // Tus otros locales
    ],
    defaultLocale: Locales.ENGLISH,
  },
  routing: {
    mode: "prefix-no-default", // Por defecto: prefijo para todos los locales excepto el predeterminado
    storage: ["cookie", "header"], // Por defecto: guardar locale en cookie y detectar del header
  },
};

export default config;
      A través de este archivo de configuración, puedes configurar URLs localizadas, modos de enrutamiento, opciones de almacenamiento, nombres de cookies, la ubicación y extensión de tus declaraciones de contenido, deshabilitar los logs de Intlayer en la consola, y más. Para una lista completa de los parámetros disponibles, consulta la documentación de configuración.

    3. Integra Intlayer en tu configuración de Vite

      Agrega el plugin de intlayer en tu configuración.

      vite.config.ts
      import { defineConfig } from "vite";
import preact from "@preact/preset-vite";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact(), intlayer()],
});
      El plugin intlayer() de Vite se utiliza para integrar Intlayer con Vite. Garantiza la construcción de archivos de declaración de contenido y los supervisa en modo de desarrollo. Define variables de entorno de Intlayer dentro de la aplicación Vite. Además, proporciona alias para optimizar el rendimiento.

    4. Declara Tu Contenido

      Crea y administra tus declaraciones de contenido para almacenar traducciones:

      src/app.content.tsx
      import { t, type Dictionary } from "intlayer";
import type { ComponentChildren } from "preact";

const appContent = {
  key: "app",
  content: {
    viteLogo: t({
      en: "Vite logo",
      fr: "Logo Vite",
      es: "Logo Vite",
    }),
    preactLogo: t({
      en: "Preact logo",
      fr: "Logo Preact",
      es: "Logo Preact",
    }),

    title: "Vite + Preact",

    count: t({
      en: "count is ",
      fr: "le compte est ",
      es: "el recuento es ",
    }),

    edit: t<ComponentChildren>({
      en: (
        <>
          Edit <code>src/app.tsx</code> and save to test HMR
        </>
      ),
      fr: (
        <>
          Éditez <code>src/app.tsx</code> et enregistrez pour tester HMR
        </>
      ),
      es: (
        <>
          Edita <code>src/app.tsx</code> y guarda para probar HMR
        </>
      ),
    }),

    readTheDocs: t({
      en: "Click on the Vite and Preact logos to learn more",
      fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
      es: "Haz clic en los logotipos de Vite y Preact para obtener más información",
    }),
  },
} satisfies Dictionary;

export default appContent;
      Tus declaraciones de contenido pueden definirse en cualquier parte de tu aplicación siempre que estén incluidas en el directorio contentDir (por defecto, ./src). Y coincidan con la extensión de archivo de declaración de contenido (por defecto, .content.{json,ts,tsx,js,jsx,mjs,cjs}).
      Para más detalles, consulta la documentación de declaración de contenido.
      Si tu archivo de contenido incluye código TSX, es posible que necesites importar import { h } from "preact"; o asegurarte de que tu pragma JSX esté configurado correctamente para Preact.

    5. Utiliza Intlayer en tu Código

      Accede a tus diccionarios de contenido en toda tu aplicación:

      src/app.tsx
      import { useState } from "preact/hooks";
import type { FunctionalComponent } from "preact";
import preactLogo from "./assets/preact.svg"; // Suponiendo que tienes un preact.svg
import viteLogo from "/vite.svg";
import "./app.css"; // Suponiendo que tu archivo CSS se llama app.css
import { IntlayerProvider, useIntlayer } from "preact-intlayer";

const AppContent: FunctionalComponent = () => {
  const [count, setCount] = useState(0);
  const content = useIntlayer("app");

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} class="logo" alt={content.viteLogo.value} />
        </a>
        <a href="https://preactjs.com" target="_blank">
          <img
            src={preactLogo}
            class="logo preact"
            alt={content.preactLogo.value}
          />
        </a>
      </div>
      <h1>{content.title}</h1>
      <div class="card">
        <button onClick={() => setCount((count) => count + 1)}>
          {content.count}
          {count}
        </button>
        <p>{content.edit}</p>
      </div>
      {/* Contenido Markdown */}
      <div>{content.myMarkdownContent}</div>

      {/* Contenido HTML */}
      <div>{content.myHtmlContent}</div>

      <p class="read-the-docs">{content.readTheDocs}</p>
    </>
  );
};

const App: FunctionalComponent = () => (
  <IntlayerProvider>
    <AppContent />
  </IntlayerProvider>
);

export default App;
      Si desea usar su contenido en un atributo de tipo string, como alt, title, href, aria-label, etc., puede usar el valor de la función, así:
      html
      <img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />
      Nota: En Preact, className se escribe típicamente como class.
      Para aprender más sobre el hook useIntlayer, consulta la documentación (La API es similar para preact-intlayer).
      Si su aplicación ya existe, puede utilizar el Compilador Intlayer, así como el comando de extracción, para transformar miles de componentes en un segundo.

    6. Cambiar el idioma de tu contenido

      Opcional

      Para cambiar el idioma de tu contenido, puedes usar la función setLocale proporcionada por el hook useLocale. Esta función te permite establecer la configuración regional de la aplicación y actualizar el contenido en consecuencia.

      src/components/LocaleSwitcher.tsx
      import type { FunctionalComponent } from "preact";
import { Locales } from "intlayer";
import { useLocale } from "preact-intlayer";

const LocaleSwitcher: FunctionalComponent = () => {
  const { setLocale } = useLocale();

  return (
    <button onClick={() => setLocale(Locales.ENGLISH)}>
      Cambiar idioma a inglés
    </button>
  );
};

export default LocaleSwitcher;
      Para aprender más sobre el hook useLocale, consulta la documentación (La API es similar para preact-intlayer).

    7. Agregar enrutamiento por localeizado a su aplicación

      Opcional

      El propósito de este paso es crear rutas únicas para cada idioma. Esto es útil para SEO y URLs amigables para el SEO. Ejemplo:

      plaintext
      - https://example.com/about- https://example.com/es/about- https://example.com/fr/about
      Por defecto, las rutas no tienen prefijo para el idioma predeterminado. Si desea prefijar el idioma predeterminado, puede establecer la opción routing.mode en "prefix-all" en su configuración. Consulte la documentación de configuración para obtener más información.

      Para agregar enrutamiento por localeizado a su aplicación, puede crear un componente LocaleRouter que envuelva las rutas de su aplicación y maneje el enrutamiento basado en el idioma. Aquí hay un ejemplo usando preact-iso:

      src/components/LocaleRouter.tsx
      import { localeMap } from "intlayer";
import { IntlayerProvider } from "preact-intlayer";
import { LocationProvider, Router, Route } from "preact-iso";
import type { ComponentChildren, FunctionalComponent } from "preact";

/**
 * Un componente de enrutador que configura rutas específicas para cada idioma.
 * Utiliza preact-iso para gestionar la navegación y renderizar componentes localizados.
 */
export const LocaleRouter: FunctionalComponent<{
  children: ComponentChildren;
}> = ({ children }) => (
  <LocationProvider>
    <Router>
      {localeMap(({ locale, urlPrefix }) => ({ locale, urlPrefix }))
        .sort((a, b) => b.urlPrefix.length - a.urlPrefix.length)
        .map(({ locale, urlPrefix }) => (
          <Route
            key={locale}
            path={`${urlPrefix}/:rest*`}
            component={() => (
              <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
            )}
          />
        ))}
    </Router>
  </LocationProvider>
);

      Luego, puede usar el componente LocaleRouter en su aplicación:

      src/app.tsx
      import { LocaleRouter } from "./components/LocaleRouter";
import type { FunctionalComponent } from "preact";

// ... Su componente AppContent

const App: FunctionalComponent = () => (
  <LocaleRouter>
    <AppContent />
  </LocaleRouter>
);

export default App;

    8. Cambiar la URL cuando cambia el idioma

      Opcional

      Para cambiar la URL cuando cambia el idioma, puede usar la propiedad onLocaleChange proporcionada por el hook useLocale. Paralelamente, puede usar el método route de useLocation de preact-iso para actualizar la ruta de la URL.

      src/components/LocaleSwitcher.tsx
      import { useLocation } from "preact-iso";
import {
  Locales,
  getHTMLTextDir,
  getLocaleName,
  getLocalizedUrl,
} from "intlayer";
import { useLocale } from "preact-intlayer";
import type { FunctionalComponent } from "preact";

const LocaleSwitcher: FunctionalComponent = () => {
  const { url, route } = useLocation();
  const { locale, availableLocales, setLocale } = useLocale({
    onLocaleChange: (newLocale) => {
      // Construir la URL con el idioma actualizado
      // Ejemplo: /es/about?foo=bar
      const pathWithLocale = getLocalizedUrl(url, newLocale);

      // Actualizar la ruta de la URL
      route(pathWithLocale, true); // true para reemplazar
    },
  });

  return (
    <div>
      <button popovertarget="localePopover">{getLocaleName(locale)}</button>
      <div id="localePopover" popover="auto">
        {availableLocales.map((localeItem) => (
          <a
            href={getLocalizedUrl(url, localeItem)}
            hreflang={localeItem}
            aria-current={locale === localeItem ? "page" : undefined}
            onClick={(e) => {
              e.preventDefault();
              setLocale(localeItem);
              // La navegación programática después de establecer el idioma será manejada por onLocaleChange
            }}
            key={localeItem}
          >
            <span>
              {/* Idioma - p.ej. FR */}
              {localeItem}
            </span>
            <span>
              {/* Idioma en su propio idioma - p.ej. Français */}
              {getLocaleName(localeItem, localeItem)}
            </span>
            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
              {/* Idioma en el idioma actual - p.ej. Francés con el idioma actual establecido en Locales.SPANISH */}
              {getLocaleName(localeItem, locale)}
            </span>
            <span dir="ltr" lang={Locales.ENGLISH}>
              {/* Idioma en inglés - p.ej. French */}
              {getLocaleName(localeItem, Locales.ENGLISH)}
            </span>
          </a>
        ))}
      </div>
    </div>
  );
};

export default LocaleSwitcher;

      Referencias de la documentación:

      - Hook useLocale (la API es similar para preact-intlayer)> - Hook getLocaleName> - Hook getLocalizedUrl> - Hook getHTMLTextDir> - Atributo hreflang> - Atributo lang> - Atributo dir> - Atributo aria-current> - API Popover

    9. Cambiar los atributos de idioma y dirección del HTML

      Opcional

      Cuando su aplicación soporta varios idiomas, es fundamental actualizar los atributos lang y dir de la etiqueta <html> para que coincidan con el idioma actual. Al hacerlo, se garantiza:

      • Accesibilidad: Los lectores de pantalla y las tecnologías de asistencia dependen del atributo lang correcto para pronunciar e interpretar el contenido con precisión.
      • Renderizado de texto: El atributo dir (dirección) garantiza que el texto se represente en el orden adecuado (p. ej., de izquierda a derecha para el inglés, de derecha a izquierda para el árabe o el hebreo), lo cual es esencial para la legibilidad.
      • SEO: Los motores de búsqueda utilizan el atributo lang para determinar el idioma de su página, lo que ayuda a ofrecer el contenido localizado adecuado en los resultados de búsqueda.

      Al actualizar estos atributos dinámicamente cuando cambia el idioma, garantiza una experiencia coherente y accesible para los usuarios en todos los idiomas admitidos.

      Implementación del Hook

      Cree un hook personalizado para gestionar los atributos HTML. El hook escucha los cambios de idioma y actualiza los atributos en consecuencia:

      src/hooks/useI18nHTMLAttributes.tsx
      import { useEffect } from "preact/hooks";
import { useLocale } from "preact-intlayer";
import { getHTMLTextDir } from "intlayer";

/**
 * Actualiza los atributos `lang` y `dir` del elemento HTML <html> según el idioma actual.
 * - `lang`: Informa a los navegadores y motores de búsqueda sobre el idioma de la página.
 * - `dir`: Asegura el orden de lectura correcto (p. ej., 'ltr' para el inglés, 'rtl' para el árabe).
 *
 * Esta actualización dinámica es esencial para el renderizado correcto del texto, la accesibilidad y el SEO.
 */
export const useI18nHTMLAttributes = () => {
  const { locale } = useLocale();

  useEffect(() => {
    // Actualizar el atributo de idioma al idioma actual.
    document.documentElement.lang = locale;

    // Establecer la dirección del texto según el idioma actual.
    document.documentElement.dir = getHTMLTextDir(locale);
  }, [locale]);
};

      Uso del Hook en su Aplicación

      Integre el hook en su componente principal para que los atributos HTML se actualicen cada vez que cambie el idioma:

      src/app.tsx
      import type { FunctionalComponent } from "preact";
import { IntlayerProvider } from "preact-intlayer"; // useIntlayer ya importado si AppContent lo necesita
import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
import "./app.css";
// Definición de AppContent del Paso 5

const AppWithHooks: FunctionalComponent = () => {
  // Aplicar el hook para actualizar los atributos lang y dir de la etiqueta <html> según el idioma.
  useI18nHTMLAttributes();

  // Suponiendo que AppContent es su componente principal de visualización de contenido del Paso 5
  return <AppContent />;
};

const App: FunctionalComponent = () => (
  <IntlayerProvider>
    <AppWithHooks />
  </IntlayerProvider>
);

export default App;

    10. Crear un Componente de Enlace Localizado

      Opcional

      Para garantizar que la navegación de su aplicación respete el idioma actual, puede crear un componente Link personalizado. Este componente añade automáticamente el prefijo del idioma actual a las URL internas.

      Este comportamiento es útil por varias razones:

      • SEO y Experiencia del Usuario: Las URL localizadas ayudan a los motores de búsqueda a indexar correctamente las páginas específicas de un idioma y proporcionan a los usuarios contenido en su idioma preferido.
      • Consistencia: Al utilizar un enlace localizado en toda su aplicación, garantiza que la navegación se mantenga dentro del idioma actual, evitando cambios de idioma inesperados.
      • Mantenibilidad: Centralizar la lógica de localización en un único componente simplifica la gestión de las URL.

      A continuación se muestra la implementación de un componente Link localizado en Preact:

      src/components/Link.tsx
      import { getLocalizedUrl } from "intlayer";
import { useLocale } from "preact-intlayer";
import { forwardRef } from "preact/compat";
import type { JSX } from "preact";

export interface LinkProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
  href: string;
}

/**
 * Función de utilidad para comprobar si una URL determinada es externa.
 * Si la URL comienza con http:// o https://, se considera externa.
 */
export const checkIsExternalLink = (href?: string): boolean =>
  /^https?:\/\//.test(href ?? "");

/**
 * Un componente Link personalizado que adapta el atributo href según el idioma actual.
 * Para los enlaces internos, utiliza `getLocalizedUrl` para prefijar la URL con el idioma (p. ej., /fr/about).
 * Esto garantiza que la navegación se mantenga dentro del mismo contexto de idioma.
 */
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
  ({ href, children, ...props }, ref) => {
    const { locale } = useLocale();
    const isExternalLink = checkIsExternalLink(href);

    // Si el enlace es interno y se proporciona un href válido, obtener la URL localizada.
    const hrefI18n =
      href && !isExternalLink ? getLocalizedUrl(href, locale) : href;

    return (
      <a href={hrefI18n} ref={ref} {...props}>
        {children}
      </a>
    );
  }
);

Link.displayName = "Link";

      Cómo Funciona

      • Detección de Enlaces Externos:
        La función de ayuda checkIsExternalLink determina si una URL es externa. Los enlaces externos se dejan sin cambios porque no necesitan localización.
      • Recuperación del Idioma Actual:
        El hook useLocale proporciona el idioma actual (p. ej., fr para el francés).
      • Localización de la URL:
        Para los enlaces internos (es decir, no externos), se utiliza getLocalizedUrl para prefijar automáticamente la URL con el idioma actual. Esto significa que si su usuario está en francés, pasar /about como href lo transformará a /fr/about.
      • Devolución del Enlace:
        El componente devuelve un elemento <a> con la URL localizada, garantizando que la navegación sea coherente con el idioma.

    11. Renderizar Markdown y HTML

      Opcional

      Intlayer admite el renderizado de contenido Markdown y HTML en Preact.

      Puede personalizar el renderizado del contenido Markdown y HTML utilizando el método .use(). Este método le permite anular el renderizado predeterminado de etiquetas específicas.

      tsx
      import { useIntlayer } from "preact-intlayer";const { myMarkdownContent, myHtmlContent } = useIntlayer("my-component");// ...return (  <div>    {/* Renderizado básico */}    {myMarkdownContent}    {/* Renderizado personalizado para Markdown */}    {myMarkdownContent.use({      h1: (props) => <h1 style={{ color: "red" }} {...props} />,    })}    {/* Renderizado básico para HTML */}    {myHtmlContent}    {/* Renderizado personalizado para HTML */}    {myHtmlContent.use({      b: (props) => <strong style={{ color: "blue" }} {...props} />,    })}  </div>);

    12. Extraer el contenido de tus componentes

      Opcional

      Si tienes una base de código existente, transformar miles de archivos puede llevar mucho tiempo.

      Para facilitar este proceso, Intlayer propone un compilador / extractor para transformar tus componentes y extraer el contenido.

      Para configurarlo, puedes agregar una sección compiler en tu archivo intlayer.config.ts :

      intlayer.config.ts
      import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Resto de tu configuración
  compiler: {
    /**
     * Indica si el compilador debe estar habilitado.
     */
    enabled: true,

    /**
     * Define la ruta de los archivos de salida
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Indica si los componentes deben guardarse después de ser transformados. De esa manera, el compilador se puede ejecutar solo una vez para transformar la aplicación y luego se puede eliminar.
     */
    saveComponents: false,

    /**
     * Prefijo de clave de diccionario
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

      Ejecuta el extractor para transformar tus componentes y extraer el contenido

      bash
      npx intlayer extract

    (Opcional) Sitemap y robots.txt (generación en el build)

    Intlayer ofrece utilidades - generateSitemap y getMultilingualUrls - para formatear un sitemap.xml multilingüe y un robots.txt listos para rastreadores y escribirlos automáticamente en public/. Lo habitual es ejecutar un script pequeño de Node antes de Vite (por ejemplo hooks npm predev / prebuild) para que esos archivos existan al compilar o al levantar el servidor de desarrollo.

    Sitemap

    El generador de sitemaps de Intlayer respeta tu configuración de idiomas y añade los metadatos habituales.

    El sitemap admite el espacio de nombres xhtml:link (hreflang). En lugar de listar solo URLs sueltas, Intlayer enlaza de forma bidireccional todas las versiones localizadas de cada página (p. ej. /about, /fr/about o /about?lang=fr según el modo de rutas).

    Robots.txt

    Usa getMultilingualUrls para que las reglas Disallow cubran todas las variantes localizadas de rutas sensibles.

    1. Crear generate-seo.mjs en la raíz del proyecto

    generate-seo.mjs
    import fs from "fs";import path from "path";import { fileURLToPath } from "url";import { generateSitemap, getMultilingualUrls } from "intlayer";const __dirname = path.dirname(fileURLToPath(import.meta.url));const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(  /\/$/,  "");const pathList = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);const getAllMultilingualUrls = (urls) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);const robotsTxt = [  "User-agent: *",  "Allow: /",  ...disallowedPaths.map((path) => `Disallow: ${path}`),  "",  `Sitemap: ${SITE_URL}/sitemap.xml`,].join("\n");fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);console.log("SEO files generated successfully.");

    Debe estar instalado intlayer para poder importarlo. Define SITE_URL en el entorno en producción (por ejemplo en CI).

    Prefiere generate-seo.mjs para ESM en Node. Si usas generate-seo.js, asegúrate de tener "type": "module" en package.json o ejecuta Node con ESM.

    2. Ejecutar el script antes de Vite

    package.json
    {  "scripts": {    "dev": "vite",    "prebuild": "node generate-seo.mjs",    "build": "vite build",    "preview": "vite preview"  }}

    Ajusta los comandos si usas pnpm o yarn. También puedes llamar al script desde CI u otro paso del pipeline.

    Configurar TypeScript

    Intlayer utiliza la ampliación de módulos para aprovechar las ventajas de TypeScript y fortalecer su base de código.

    Autocompletado

    Error de traducción

    Asegúrese de que su configuración de TypeScript incluya los tipos autogenerados.

    tsconfig.json
    {  // ... Sus configuraciones de TypeScript existentes  "compilerOptions": {    // ...    "jsx": "react-jsx",    "jsxImportSource": "preact", // Recomendado para Preact 10+    // ...  },  "include": [    // ... Sus configuraciones de TypeScript existentes    ".intlayer/**/*.ts", // Incluir los tipos autogenerados  ],}
    Asegúrese de que su tsconfig.json esté configurado para Preact, especialmente jsx y jsxImportSource o jsxFactory/jsxFragmentFactory para versiones anteriores de Preact si no utiliza los valores predeterminados de preset-vite.

    Configuración de Git

    Se recomienda ignorar los archivos generados por Intlayer. Esto le permite evitar comprometerlos en su repositorio Git.

    Para hacerlo, puede agregar las siguientes instrucciones a su archivo .gitignore:

    bash
    #  Ignorar los archivos generados por Intlayer.intlayer

    Extensión de VS Code

    Para mejorar su experiencia de desarrollo con Intlayer, puede instalar la Extensión oficial de Intlayer para VS Code.

    Instalar desde el VS Code Marketplace

    Esta extensión proporciona:

    • Autocompletado para las claves de traducción.
    • Detección de errores en tiempo real para traducciones faltantes.
    • Vistas previas en línea del contenido traducido.
    • Acciones rápidas para crear y actualizar traducciones fácilmente.

    Para más detalles sobre cómo usar la extensión, consulte la documentación de la extensión de Intlayer para VS Code.

    Ir Más Allá

    Para ir más allá, puede implementar el editor visual o externalizar su contenido utilizando el CMS.

    SvelteKit
    Vite y Vanilla JS