is there a nice way to use nanostores/i18n outside of react / react-hooks? about i18n

[ai]

You will need a helpers around or library. The main use case of our library is web UI and desktop apps. So you will need to a helper to simplify API a little.

Another problem is that we need a translation in default locale described in your code (not in JSON). We use it to get types. Also to avoid changing all translation when you fix a typo in English translation.

Tomorrow I will write an example.

[ai]

// lib/i18n.js
import { atom } from 'nanostores'
import { createI18n } from '@nanostores/i18n'
import { readFile } from 'fs/promises'

export const locale = atom('en')

export const i18n = createI18n(locale, {
  async get (code) {
    return JSON.parse(await readFile(`/translations/${code}.json`))
  }
})

export function getMessage (messages, lang, key) {
  locale.set(locale)
  return messages.get()[key]
}

export async function preloadLocales (locales) {
  for (const i of locales) {
    locale.set(i)
    if (i18n.loading.get()) { 
      await new Promise(resolve => {
        let unbindLoading = i18n.loading.listen(isLoading => {
          if (!isLoading) {
            unbindLoading()
            resolve()
          }
        })
      }
    }
  }
}

// app.js
import { preloadLocales } from './lib/i18n.js'

await preloadLocales(['de-DE'])

// errors.js
import { i18n, getMessage } from './lib/i18n.js'

let messages = i18n('errors', {
  forbidden: 'Forbidden ヾ(・ω・)ノ. Insufficient Authorization.'
})

getMessage(messages, 'de-DE', 'forbidden')

[ai]

We don't have sync API since it is not good for performance and Node.js is getting so many good things to write sync code easy.

Why do you need sync API in your case and can't use top-level await?

[iambumblehead]

@ai I could use await as well. the example above is a sketch and mostly I'm searching for away to quickly obtain the international string result from a locale or language string and a key.

[iambumblehead]

https://github.com/mashpie/i18n-node (over 1mb btw) gives this '__mf' method for returning messages. Does nanostores/i18n expose anything like i18n-node's '__mf'?

import fs from 'fs';
import { I18n } from 'i18n';

const i18n = new I18n({
  defaultLocale: 'en',
  staticCatalog: {
    en: JSON.parse( fs.readFileSync( 'en-US.json' ) )
  }
});

// Hello Marcus
console.log( i18n.__mf('Hello {name}', { name: 'Marcus' }) );

[ai]

Do you split your CLI tool by separated modules?

Our library promote component based approach which works great for web/desktop/mobile UI bit didn't fit all CLI cases.

[iambumblehead]

My goal is to return ~40 internationalized error messages from a koa data-service. The service has a small number of routes and currently returns english messages. If it works out well, a different and bigger service will be updated in a similar way.

The only CLI tool I'm using so far is used to convert and pre-process language files

[iambumblehead]

the application files look like this atm

msg.js

const msgErrorForbidden = () => (
  'Forbidden ヾ(・ω・)ノ. Insufficient Authorization.' );

err.js

const errForbidden = err(
  403, 2103, access_denied, msgErrorForbidden );

[ai]

Helpers are big because our library was not created for this specific use case.

[ai]

I released 0.5 version with a small helper to simplify this code:

// lib/i18n.js
import { atom } from 'nanostores'
- import { createI18n } from '@nanostores/i18n'
+ import { createI18n, translationsLoading } from '@nanostores/i18n'
import { readFile } from 'fs/promises'

export const locale = atom('en')

export const i18n = createI18n(locale, {
  async get (code) {
    return JSON.parse(await readFile(`/translations/${code}.json`))
  }
})

export function getMessage (messages, lang, key) {
  locale.set(locale)
  return messages.get()[key]
}

export async function preloadLocales (locales) {
  for (const i of locales) {
    locale.set(i)
-    if (i18n.loading.get()) { 
-      await new Promise(resolve => {
-        let unbindLoading = i18n.loading.listen(isLoading => {
-          if (!isLoading) {
-            unbindLoading()
-            resolve()
-          }
-        })
-      }
-    }
+   await translationsLoading(i18n)
  }
}

[iambumblehead]

thank you. the helper does simplify the setup

[iambumblehead]

I've changed locale.set(locale) to this locale.set(lang) to avoid a runtime error. the default message is always returned to me in the example below. Adding logs to the createi18n get shows the language files are loaded. Would you tell me what I'm doing wrong?

import { atom } from 'nanostores';
import { createI18n, translationsLoading } from '@nanostores/i18n';
import { readFile } from 'fs/promises';

export const locale = atom('en-US');

export const i18nano = createI18n(locale, {
  async get (code) {
    return JSON.parse( await readFile( `i18n.${code}.json` ) );
  }
});

export function getMessage (messages, lang, key) {
  locale.set(lang);
  return messages.get()[key];
}

const preloadLocales = async locales => {
  for (const i of locales) {
    locale.set(i);

    await translationsLoading(i18nano);
  }
};

(async () => {
  await preloadLocales(['en-US', 'ja-JP']);

  let messages = i18nano('errors', {
    login: 'fallback english login',
    forbidden: 'Forbidden ヾ(・ω・)ノ. Insufficient Authorization.'
  });

  console.log( 'i18nano', getMessage(messages, 'en-US', 'login') );
  console.log( 'i18nano', getMessage(messages, 'ja-JP', 'login') );
})();

[iambumblehead]

cc @ai in case the closed state of the ticket prevents my question from reaching you

[iambumblehead]

the locale files I'm using look like this

{
  "login": "ログイン"
}

I've tried nesting the messages inside "error" like this, but the result is the same and the fallback english version message is always returned,

{
  "error": {
    "login": "ログイン"
  }
}

[ai]

The correct file is

{
  "error": {
    "login": "ログイン"
  }
}

You also need to change base locale (default is en):

export const i18nano = createI18n(locale, {
+ baseLocale: 'en-US'
  async get (code) {

What is console.log output?

[iambumblehead]

import { atom } from 'nanostores';
import { createI18n, translationsLoading } from '@nanostores/i18n';
import { readFile } from 'fs/promises';

export const locale = atom('en');

export const i18nano = createI18n(locale, {
  baseLocale: 'en-US',
  async get (code) {
    // return JSON.parse( await readFile( `i18n.${code}.json` ) );
    return code === 'ja-JP'
      ? { errors: { login: "ログイン" } }
      : { errors: { login: 'Log In' } };
  }
});

export function getMessage (messages, lang, key) {
  locale.set(lang);

  return messages.get()[key];
}

const preloadLocales = async locales => {
  for (const i of locales) {
    locale.set(i);

    await translationsLoading(i18nano);
  }
};

(async () => {
  await preloadLocales(['en-US', 'ja-JP']);

  let messages = i18nano('errors', {
    login: 'fallback english login',
    forbidden: 'Forbidden ヾ(・ω・)ノ. Insufficient Authorization.'
  });

  console.log( 'i18nano', getMessage(messages, 'en-US', 'login') );
  // i18nano fallback english login
  console.log( 'i18nano', getMessage(messages, 'ja-JP', 'login') );
  // i18nano fallback english login
})();

the above prints the below output,

$ node ./example.javascript.nano.js 
i18nano fallback english login
i18nano fallback english login

[ai]

You need:

1. Call let messages = i18nano() before await preloadLocales()
2. Add messages.listen(() => {}) to initialize messages store.

export const locale = atom('en')

export const i18nano = createI18n(locale, {
  baseLocale: 'en-US',
  async get(code) {
    // return JSON.parse( await readFile( `i18n.${code}.json` ) );
    if (code === 'ja-JP') return { errors: { login: 'ログイン' } }
    else return { errors: { login: 'Log In' } }
  }
})

export function getMessage(messages, lang, key) {
  locale.set(lang)

  return messages.get()[key]
}

const preloadLocales = async locales => {
  for (let i of locales) {
    locale.set(i)
    await translationsLoading(i18nano)
  }
}

let messages = i18nano('errors', {
  login: 'fallback english login',
  forbidden: 'Forbidden ヾ(・ω・)ノ. Insufficient Authorization.'
})

messages.listen(() => {})
;(async () => {
  await preloadLocales(['en-US', 'ja-JP'])

  console.log('i18nano', getMessage(messages, 'en-US', 'login'))
  console.log('i18nano', getMessage(messages, 'ja-JP', 'login'))
})()

[iambumblehead]

👍 thank you that works

[iambumblehead]

@ai apologies for messaging you directly, otherwise I'm not sure if the 'closed' status of the ticket will surface my message to you. I'm trying to smoke-test parameters https://github.com/nanostores/i18n#parameters. How should I do this using the script above with { errors: { login: 'ログイン {username}' } }?

[ai]

Yes, JSON should be like

{ errors: { login: 'ログイン {username}' } }

[iambumblehead]

import { atom } from 'nanostores';
import { createI18n, translationsLoading, params } from '@nanostores/i18n';
import { readFile } from 'fs/promises';

export const locale = atom('en');

export const i18nano = createI18n(locale, {
  baseLocale: 'en-US',
  async get(code) {
    // return JSON.parse( await readFile( `i18n.${code}.json` ) );
    return code === 'ja-JP'
      ? { errors: { login: 'ログイン {name}' } }
      : { errors: { login: 'Log In' } };
  }
});

export function getMessage(messages, lang, key, param) {
  locale.set(lang);

  const res = messages.get()[key];
  if ( typeof res === 'function' )
    return res(param);

  return res;
}

const preloadLocales = async locales => {
  for (let i of locales) {
    locale.set(i);
    await translationsLoading(i18nano);
  }
};

let messages = i18nano('errors', {
  login: params( 'fallback english login {name}' ),
  forbidden: 'Forbidden ヾ(・ω・)ノ. Insufficient Authorization.'
});

messages.listen(() => {});
(async () => {
  await preloadLocales(['en-US', 'ja-JP']);

  console.log('i18nano', getMessage(messages, 'en-US', 'login', { name: 'jim' }));
  console.log('i18nano', getMessage(messages, 'ja-JP', 'login', { name: 'jim' }));
})();

[ai]

And what is output? (I am not with computer)

[iambumblehead]

the output is

i18nano fallback english login jim
i18nano ログイン jim

[iambumblehead]

thank you for your help!

[iambumblehead]

actually, I'm not sure why 'en-US' returns the fallback and I'm unable to get it to return en-US 'Log In'

[iambumblehead]

I see I suppose that's because it is the 'default' language... everything is good

[ai]

I see I suppose that's because it is the 'default' language.

Yes. It is by design.