Problem with setting language

[untier]

I cannot succeed setting the language in numbro, with language.min.js included. I'm using the CDN-include. What am I doing wrong?

HTML

<div id="number"></div>

JS

numbro.setLanguage("de-DE");
var number = numbro("1111111111").format({thousandSeparated: true});
document.getElementById("number").innerHTML = number;

The result should read 1.111.111.111 but it is 1,111,111,111.

When I step into the underlying method, the variable languages contains only "en-US", but numbro.allLanguages contains "de-DE". Somehow the initialization does fail...

http://jsfiddle.net/rj927ewm/

[BenjaminVanRyseghem]

You load the languages, but numbro do not register them automatically (so that tree-shaking algorithm can work).

just add first

Object.values(numbro.allLanguages).forEach(function(data) {
    numbro.registerLanguage(data);
})

And it works :smile:

[untier]

Sorry to bug you with this, but this would not have happened, if the registerLanguage-function was mentioned here: https://numbrojs.com/languages.html

I would propose to add a line, explaining this.

Anyway, thank you very much for your quick and helpful response!

[BenjaminVanRyseghem]

You are right!

Feel free to open a PR to add the documentation :smile:

[the-spyke]

If you're using imports it will be:

import numbro from "numbro";
import languages from "numbro/dist/languages.min";
Object.values(languages).forEach(l => numbro.registerLanguage(l));

[marcorm]

If you want to register one language only:

import numbro from 'numbro'<br/>
import languages from 'numbro/dist/languages.min'
numbro.registerLanguage(languages['it-IT']);
numbro.setLanguage('it-IT')

[inglkruiz]

For the ones following this issue I found isn’t needed to import languages. This function will do the job:

export function configureNumbroUsingLanguageTag(numbroInstance, tag?: string) {
  const numbroLang = numbroInstance.language();

  if (tag && tag !== numbroLang) {
    let tagLanguageData: numbro.NumbroLanguage;

    try {
      numbro.loadLanguagesInNode([tag]);
      tagLanguageData = numbro.languageData(tag);
    } catch (error) {
      console.warn(`Warning: Language data for ${tag} is not available in numbro.`);
    }

    if (tagLanguageData) {
      numbro.setLanguage(tag);
    }
  }
}

I wrote some tests using jest:

import numbro from 'numbro';

import { configureNumbroUsingLanguageTag } from './numbro.helper';

describe('configureNumbroUsingLanguageTag', () => {
  it('should be en-US by default', () => {
    configureNumbroUsingLanguageTag(numbro);

    expect(numbro.language()).toEqual('en-US');
  });

  afterEach(() => {
    jest.restoreAllMocks();
  });

  it("should log a warning if language tag isn't supported", () => {
    const loadLanguagesInNodeSpy = jest.spyOn(numbro, 'loadLanguagesInNode');
    const languageDataSpy = jest.spyOn(numbro, 'languageData');
    const setLanguageSpy = jest.spyOn(numbro, 'setLanguage');
    const consoleWarnSpy = jest.spyOn(console, 'warn');
    const unsupportedTag = 'xx-YY';

    configureNumbroUsingLanguageTag(numbro, unsupportedTag);

    expect(loadLanguagesInNodeSpy).toHaveBeenCalledWith([unsupportedTag]);
    expect(languageDataSpy).toHaveBeenCalledWith(unsupportedTag);
    expect(setLanguageSpy).not.toHaveBeenCalled();
    expect(consoleWarnSpy).toHaveBeenCalled();
    expect(numbro.language()).toEqual('en-US');
  });

  it('should configure a supported language', () => {
    const loadLanguagesInNodeSpy = jest.spyOn(numbro, 'loadLanguagesInNode');
    const languageDataSpy = jest.spyOn(numbro, 'languageData');
    const setLanguageSpy = jest.spyOn(numbro, 'setLanguage');

    const frenchFranceTag = 'fr-FR';

    configureNumbroUsingLanguageTag(numbro, frenchFranceTag);

    expect(loadLanguagesInNodeSpy).toHaveBeenCalledWith([frenchFranceTag]);
    expect(languageDataSpy).toHaveBeenCalledWith(frenchFranceTag);
    expect(setLanguageSpy).toHaveBeenCalledWith(frenchFranceTag);
    expect(numbro.language()).toEqual(frenchFranceTag);
  });
});

[bpapajewski]

You load the languages, but numbro do not register them automatically (so that tree-shaking algorithm can work). > > just add first > > js > Object.values(numbro.allLanguages).forEach(function(data) { > numbro.registerLanguage(data); > }) > > > And it works 😄

This doesn't work for in React with typescript or does it? Beacuse the numbro.d.ts does not contain any function allLanguages().

If I wanted to use the language "de-De", but similarly to the issue only "numbro.setLanguage("de-DE");" doesn't seem to work. Additionally, "numbro.languages()" only contains "en-US".

And as a second part of this question, I found the following workaround:

import deDE from "numbro/languages/de-DE";
numbro.registerLanguage(deDE);

But the import leads to an error because there is no declaration file for "numbro/languages/de-DE" and I don't just want to supress that. Is there a solution available for this issue in React with TypeScript, eliminating the need for me to create my own declaration file?

[BenjaminVanRyseghem]

Unfortunately I never worked with Typescript, so the ts file shipped only relies on kind people contributing. If something is missing, I can't do much but wait for a PR

[bpapajewski]

Thank you very much for your quick reply! Do you know who worked on the Typescript support? So there is no one currently responsible for typescript?

[BenjaminVanRyseghem]

No one is responsible for it. Simeon opened a Fr a while ago and some people updated it via PRs.

Le 27 nov. 2023, 16:08, à 16:08, bpapajewski @.***> a écrit:

Thank you very much for your quick reply! Do you know who worked on the Typescript support? So there is no one currently responsible for typescript?

-- Reply to this email directly or view it on GitHub: https://github.com/BenjaminVanRyseghem/numbro/issues/388#issuecomment-1828017370 You are receiving this because you commented.

Message ID: @.***>