국제화 (i18n)

const locale = await dmn.i18n.getLocale();
console.log(locale); // "ko" 또는 "en"

const unsub = dmn.i18n.onLocaleChange((locale) => {
  console.log("로케일 변경:", locale);
  updateUI(locale);
});
 
dmn.plugin.registerCleanup(unsub);

// @id i18n-demo
 
dmn.plugin.defineElement({
  name: "Keyboard Monitor",
 
  messages: {
    ko: {
      "menu.create": "모니터 생성",
      "menu.delete": "모니터 삭제",
      title: "키보드 모니터",
      count: "입력 횟수",
    },
    en: {
      "menu.create": "Create Monitor",
      "menu.delete": "Delete Monitor",
      title: "Keyboard Monitor",
      count: "Key Count",
    },
  },
 
  contextMenu: {
    create: "menu.create",
    delete: "menu.delete",
  },
 
  template: (state, settings, { html, t }) => html`
    <div
      style="background: rgba(0,0,0,0.8); color: #fff; padding: 16px; border-radius: 8px;"
    >
      <h3>${t("title")}</h3>
      <p>${t("count")}: ${state.count ?? 0}</p>
    </div>
  `,
 
  onMount: ({ setState, onHook, locale, t, onLocaleChange }) => {
    console.log("현재 로케일:", locale);
    console.log("번역:", t("title"));
 
    let count = 0;
    onHook("key", ({ state }) => {
      if (state === "DOWN") {
        count++;
        setState({ count });
      }
    });
 
    // 로케일 변경 감지
    onLocaleChange((newLocale) => {
      console.log("로케일 변경됨:", newLocale);
    });
  },
});

messages: {
  ko: {
    greeting: "안녕하세요, {{name}}님!",
    keyCount: "총 {{count}}회 입력",
  },
  en: {
    greeting: "Hello, {{name}}!",
    keyCount: "Total {{count}} inputs",
  },
}
 
// 템플릿에서 사용
template: (state, settings, { html, t }) => html`
  <div>${t("greeting", { name: "사용자" })}</div>
  <div>${t("keyCount", { count: state.count })}</div>
`

async function formatNumber(num) {
  const locale = await dmn.i18n.getLocale();
  return new Intl.NumberFormat(locale).format(num);
}
 
console.log(await formatNumber(1234567));
// ko: "1,234,567"
// en: "1,234,567"

async function formatDate(date) {
  const locale = await dmn.i18n.getLocale();
  return new Intl.DateTimeFormat(locale, {
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(date);
}
 
console.log(await formatDate(new Date()));
// ko: "2024년 12월 25일"
// en: "December 25, 2024"

async function formatRelativeTime(date) {
  const locale = await dmn.i18n.getLocale();
  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
 
  const diff = date - Date.now();
  const days = Math.round(diff / (1000 * 60 * 60 * 24));
 
  if (Math.abs(days) < 1) {
    const hours = Math.round(diff / (1000 * 60 * 60));
    return rtf.format(hours, "hour");
  }
  return rtf.format(days, "day");
}