feat: react component in message

Author: cwtuan

packages/react-intl-universal/examples/nextjs-example/locales/es-ES.json

@@ -0,0 +1,58 @@
+{
+  "SIMPLE": "Frase simple",
+  "HELLO": "Hola, {username}!",
+  "TIP": "Esto es <span style='color:red'>HTML</span>",
+  "TIP_VAR": "Esto es <span style='color:red'>{message}</span>",
+  "RICH_LINK": "Consulta la <link>documentación</link> para obtener más detalles.",
+  "RICH_MULTIPLE_CHUNKS": "<user>{username}</user> tiene un vuelo <status>retrasado</status>, pero recibió <gift>{service} gratis</gift>.",
+  "EXAMPLE_TITLE_PLAIN": "Plain string messages",
+  "EXAMPLE_TITLE_RICH_GET": "Rich React components con intl.get",
+  "EXAMPLE_TITLE_DEPRECATED_GETHTML": "Workaround deprecated de rich text con intl.getHTML",
+  "EXAMPLE_TOC_TITLE": "Contenido",
+  "EXAMPLE_SECTION_INTL": "Uso de react-intl-universal",
+  "EXAMPLE_SECTION_SKILL": "Agent Skill para internacionalización",
+  "EXAMPLE_SECTION_EXTRACT": "Extraer defaults a locale files",
+  "EXAMPLE_TITLE_OUTSIDE_REACT": "Messages fuera de React components",
+  "EXAMPLE_TITLE_PLURAL": "Plural messages",
+  "EXAMPLE_TITLE_DATE_TIME": "Date and time formatting",
+  "EXAMPLE_TITLE_NUMBER_CURRENCY": "Number formatting",
+  "EXAMPLE_NOTE_PLAIN": "Usa ICU variables con los valores pasados a <code>intl.get</code>. Mantén <code>.d()</code> como default message y source text para la extracción. Consulta <formatjs>FormatJS ICU syntax</formatjs> para más detalles.",
+  "EXAMPLE_NOTE_PLURAL": "Los plural messages usan las reglas ICU <code>plural</code>. El placeholder <code>#</code> se formatea con el locale activo, así que los números grandes usan separadores adecuados al idioma. Más detalles en la <icu>ICU MessageFormat guide</icu>.",
+  "EXAMPLE_NOTE_DATE_TIME": "Formatea valores JavaScript Date con intl.formatDate, intl.formatTime o intl.formatDateTime, y luego pasa el resultado a intl.get. Estos helpers usan defaults estables: YYYY-MM-DD, HH:mm:ss y YYYY-MM-DD HH:mm:ss. Los locale messages conservan placeholders simples como '{start}'.",
+  "EXAMPLE_NOTE_NUMBER_CURRENCY": "Formatea números simples con <code>intl.formatNumber</code> y luego pasa el resultado a <code>intl.get</code>. Los locale messages conservan placeholders simples como <code>{count}</code>.",
+  "EXAMPLE_NOTE_RICH_GET": "Desde <package>react-intl-universal</package>@2.14+, intl.get no solo devuelve plain strings: también puede renderizar Rich React components. Usa <code>get</code> como unified API para plain text, HTML-like markup y React UI.",
+  "EXAMPLE_NOTE_DEPRECATED_GETHTML": "intl.getHTML está deprecated. Usa <code>get</code> como unified API para messages. Para renderizar Rich React components con <code>get</code>, actualiza a <package>react-intl-universal</package>@2.14+. Los getHTML examples de abajo dividen una frase en varios messages, lo que dificulta una traducción natural.",
+  "EXAMPLE_NOTE_SKILL": "Usa el skill <skill>use-react-intl-universal</skill> para dar a los agents un workflow i18n práctico, no solo pistas de API.",
+  "EXAMPLE_SKILL_BENEFITS_TITLE": "Ayuda a los agents a:",
+  "EXAMPLE_SKILL_BENEFIT_COPY": "redactar localized copy de alta calidad que conserve el significado real del producto, sin traducciones palabra por palabra;",
+  "EXAMPLE_SKILL_BENEFIT_TERMS": "mantener términos de producto y textos de UI consistentes entre módulos;",
+  "EXAMPLE_SKILL_BENEFIT_UI": "evitar problemas de localized UI como truncation, overflow, overlap o misalignment;",
+  "EXAMPLE_SKILL_BENEFIT_CONTRACT": "mantener alineados ICU variables, rich tags, default messages y locale files;",
+  "EXAMPLE_SKILL_BENEFIT_MQM": "revisar la calidad de traducción con <mqm>Multidimensional Quality Metrics (MQM)</mqm>, uno de los frameworks de evaluación de calidad de traducción más profesionales y completos reconocidos en la industria de localización;",
+  "EXAMPLE_SKILL_BENEFIT_INSPECTION": "inspeccionar páginas localized en ejecución por URL, hacer clic en interacciones, capturar screenshots y generar un process-and-findings report;",
+  "EXAMPLE_SKILL_BENEFIT_REVIEWABLE": "producir locale changes más pequeños y fáciles de revisar.",
+  "EXAMPLE_SKILL_PROJECT_GUIDANCE": "Al trabajar en internacionalización con react-intl-universal, sigue la guía del skill use-react-intl-universal.",
+  "EXAMPLE_SKILL_AGENT_PROMPT": "Añade un mensaje de bienvenida con la variable username.",
+  "EXAMPLE_SKILL_INSPECTION_PROMPT": "Inspecciona https://example.com/settings en alemán y reporta problemas de localized UI con screenshots.",
+  "EXAMPLE_SKILL_INSPECTION_REPORT": "El agent hace clic en interacciones seguras, revisa dialogs, captura screenshots y escribe un report con el proceso completo de inspección y todos los findings.",
+  "EXAMPLE_NOTE_EXTRACT": "<package>react-intl-universal-extract</package> lee los default messages de <code>.d()</code> en el código fuente y los escribe en un locale JSON file. Mantén <code>.d()</code> como source text y usa el archivo generado como base para la traducción.",
+  "EXAMPLE_LABEL_SOURCE_CODE": "Código fuente",
+  "EXAMPLE_LABEL_LOCALE_OUTPUT": "Locale file generado",
+  "EXAMPLE_LABEL_PACKAGE_SCRIPT": "package.json script",
+  "EXAMPLE_LABEL_RUN_COMMAND": "Comando",
+  "LEGACY_LINK_BEFORE": "Consulta la ",
+  "LEGACY_LINK_TEXT": "documentación",
+  "LEGACY_LINK_AFTER": " para obtener más detalles.",
+  "LEGACY_BADGE_BEFORE": "<strong>{username}</strong> tiene un vuelo ",
+  "LEGACY_BADGE_STATUS": "retrasado",
+  "LEGACY_BADGE_BETWEEN": ", pero recibió ",
+  "LEGACY_BADGE_GIFT": "{service} gratis",
+  "LEGACY_BADGE_AFTER": ".",
+  "SALE_START": "La venta empieza el {start}",
+  "SALE_END": "La venta termina el {end}",
+  "COUPON": "El cupón caduca a las {expires}",
+  "VIEW_COUNT": "{count} vistas",
+  "AVERAGE_SCORE": "Puntuación media: {score}",
+  "PHOTO": "Tienes {photoNum, plural, =0 {ninguna foto.} =1 {una foto.} other {# fotos.}}",
+  "MESSAGE_NOT_IN_COMPONENT": "react-intl-universal también puede internacionalizar mensajes fuera de React.Component"
+}

packages/react-intl-universal/examples/nextjs-example/pages/index.tsx

@@ -6,6 +6,7 @@ import zhCN from 'locales/zh-CN.json';
 import zhTW from 'locales/zh-TW.json';
 import frFr from 'locales/fr-FR.json';
 import deDE from 'locales/de-DE.json';
+import esES from 'locales/es-ES.json';
 import koKR from 'locales/ko-KR.json';
 import jaJP from 'locales/ja-JP.json';
 
@@ -39,6 +40,10 @@ const LOCALES_LIST = [
     label: "Deutsch",
     value: "de-DE"
   },
+  {
+    label: "Español",
+    value: "es-ES"
+  },
   {
     label: "한국어",
     value: "ko-KR"
@@ -55,6 +60,7 @@ const LOCALE_DATA = {
   "zh-TW": zhTW,
   "fr-FR": frFr,
   "de-DE": deDE,
+  "es-ES": esES,
   "ko-KR": koKR,
   "ja-JP": jaJP,
 }