Internationalization (i18n)

Read the current locale

getLocale()

Returns the locale currently used by the app.


const locale = await dmn.i18n.getLocale();
console.log(locale); // "ko", "en", "zh-cn", "zh-Hant", or "ru"

The plugin API does not change the app locale. Users choose the locale in the app settings.

onLocaleChange(listener)

Calls the listener whenever the app locale changes and returns an unsubscribe function.


const unsub = dmn.i18n.onLocaleChange((locale) => {
  console.log('Locale changed:', locale);
  updateUI(locale);
});
 
dmn.plugin.registerCleanup(unsub);

Localize a plugin element

Use messages with defineElement. The element template and lifecycle helpers receive a t() function for the current locale.


// @id i18n-demo
 
dmn.plugin.defineElement({
  name: 'Keyboard Monitor',
 
  messages: {
    ko: {
      'menu.create': '모니터 생성',
      title: '키보드 모니터',
      count: '입력 횟수',
    },
    en: {
      'menu.create': 'Create Monitor',
      title: 'Keyboard Monitor',
      count: 'Key Count',
    },
  },
 
  contextMenu: {
    create: 'menu.create',
  },
 
  template: (state, settings, { html, t }) => html`
    <div>
      <h3>${t('title')}</h3>
      <p>${t('count')}: ${state.count ?? 0}</p>
    </div>
  `,
 
  onMount: ({ locale, t, onLocaleChange }) => {
    console.log('Current locale:', locale);
    console.log('Translation:', t('title'));
 
    onLocaleChange((newLocale) => {
      console.log('Element locale changed:', newLocale);
    });
  },
});

Message parameters

Use {{param}} placeholders in message strings and pass their values to t().


messages: {
  ko: {
    greeting: "안녕하세요, {{name}}님!",
  },
  en: {
    greeting: "Hello, {{name}}!",
  },
},
 
template: (state, settings, { html, t }) => html`
  <div>${t("greeting", { name: "DM NOTE" })}</div>
`

Locale-aware formatting

Use the standard Intl APIs with the locale returned by getLocale().


async function formatDate(date) {
  const locale = await dmn.i18n.getLocale();
  return new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  }).format(date);
}

Supported locales

Code	Language
`ko`	Korean
`en`	English
`zh-cn`	Simplified Chinese
`zh-Hant`	Traditional Chinese
`ru`	Russian