Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow pluralization customization via constructor options (closes #464) #482

Merged
merged 27 commits into from
Dec 16, 2018

Conversation

Raiondesu
Copy link
Contributor

@Raiondesu Raiondesu commented Dec 14, 2018

Closes #464.

Summary

Allows for a more civilized declarative style of defining pluralization rules via constructor options. This is needed to allow pluralization customization in environments where direct VueI18n prototype modification is not available (like nuxt, for example).

This PR changes the way custom pluralization would work in a backwards-compatible manner, which means - usages that utilize custom pluralization as defined in #451 will still work perfectly.


API changes

Instead of direct prototype modification it is now recommended to pass an optional pluralizationRules object into VueI18n constructor options.

Very simplified example using rules for Slavic languages (Russian, Ukrainian, etc.):

new VueI18n({
  pluralizationRules: {
    // Language to use the rule for, 'ru', in this case
    /**
     * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`
     * @param choicesLength {number} an overall amount of available choices
     * @returns a final choice index to select plural word by
    **/
    'ru': function (choice, choicesLength) {
      // this === VueI18n instance, so the locale property also exists here

      if (choice === 0) {
        return 0;
      }

      const teen = choice > 10 && choice < 20;
      const endsWithOne = choice % 10 === 1;

      if (choicesLength < 4) {
        return (!teen && endsWithOne) ? 1 : 2;
      }
      if (!teen && endsWithOne) {
        return 1;
      }
      if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
        return 2;
      }

      return (choicesLength < 4) ? 2 : 3;
    }
  }
});

This would effectively give this:

const messages = {
  ru: {
    car: '0 машин | 1 машина | {n} машины | {n} машин',
    banana: 'нет бананов | 1 банан | {n} банана | {n} бананов'
  }
}

Where the format is 0 things | 1 thing | few things | multiple things.

Your template still needs to use $tc(), not $t():

<p>{{ $tc('car', 1) }}</p>
<p>{{ $tc('car', 2) }}</p>
<p>{{ $tc('car', 4) }}</p>
<p>{{ $tc('car', 12) }}</p>
<p>{{ $tc('car', 21) }}</p>

<p>{{ $tc('banana', 0) }}</p>
<p>{{ $tc('banana', 4) }}</p>
<p>{{ $tc('banana', 11) }}</p>
<p>{{ $tc('banana', 31) }}</p>

Which results in:

<p>1 машина</p>
<p>2 машины</p>
<p>4 машины</p>
<p>12 машин</p>
<p>21 машина</p>

<p>нет бананов</p>
<p>4 банана</p>
<p>11 бананов</p>
<p>31 банан</p>

Default pluralization

If your current locale is not found in a pluralization map, the default rule of the english langugage will be used.


This is achieved by checking for current locale in a pluralizationRules object. If the locale is not found, VueI18n will proceed with the old implementation.

Prototype modification (as described in #451) will simply work around this concept without causing any disturbances, as demonstrated in this test.

P.S.

This is a possible minor update, essentially setting the version of vue-i18n to 8.5.0.

This provides better pluralization customization. :D
Replace Number and Date format options with standard TS `Intl` types.
@Raiondesu Raiondesu changed the title Allow pluralization customization via constructor options Allow pluralization customization via constructor options (fixes #464) Dec 14, 2018
@codecov-io
Copy link

Codecov Report

Merging #482 into dev will increase coverage by 0.02%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##              dev     #482      +/-   ##
==========================================
+ Coverage   96.64%   96.66%   +0.02%     
==========================================
  Files           9        9              
  Lines         655      660       +5     
==========================================
+ Hits          633      638       +5     
  Misses         22       22
Impacted Files Coverage Δ
src/index.js 99.63% <100%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b4a8c27...5d405a4. Read the comment docs.

@codecov-io
Copy link

codecov-io commented Dec 14, 2018

Codecov Report

Merging #482 into dev will increase coverage by 0.02%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##              dev     #482      +/-   ##
==========================================
+ Coverage   96.64%   96.66%   +0.02%     
==========================================
  Files           9        9              
  Lines         655      660       +5     
==========================================
+ Hits          633      638       +5     
  Misses         22       22
Impacted Files Coverage Δ
src/index.js 99.63% <100%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b4a8c27...5abac75. Read the comment docs.

@Raiondesu Raiondesu changed the title Allow pluralization customization via constructor options (fixes #464) Allow pluralization customization via constructor options (closes #464) Dec 14, 2018
Copy link
Owner

@kazupon kazupon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work!
Thanks!

Could you check my review comment please?

types/index.d.ts Outdated
interface DateTimeFormat { [key: string]: DateTimeFormatOptions; }
interface DateTimeFormats { [key: string]: DateTimeFormat; }

interface DateTimeFormat { [type: string]: Intl.DateTimeFormatOptions; }
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where Intl type definition ?

Copy link
Contributor Author

@Raiondesu Raiondesu Dec 15, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's included in ambient TS types and represents the internationalization options for toLocaleString functions.
https://github.com/Microsoft/TypeScript/blob/eb2297df022f6b1f284aff96e93c06097bb01ea5/lib/lib.es5.d.ts#L4093

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!
However, In about typing change, I prefer that it's changed with another PR, because different from the this issue to be solved.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I can see where you're coming from on this one, I'll revert it rn.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants