Skip to content
This repository was archived by the owner on Jul 16, 2020. It is now read-only.

Commit 507fa3d

Browse files
Konafetsmartinlindhe
Konafets
authored and
martinlindhe
committed
Implement support for vuex-i18n library (#31)
* Implement support for vuex-i18n library The package is nearly ready to support vuex-i18n out of the box. One significally difference between vue-i18n and vuex-i18n is the way the handle plural forms. While vue-i18n using the pipe `|`, vuex-i18n uses three colons `:::`. The patch introduces a new flag to specify which i18n lib are used. The generator replaces than the pipe by three colons. * Update note about pluralization
1 parent e38f48d commit 507fa3d

File tree

5 files changed

+213
-9
lines changed

5 files changed

+213
-9
lines changed

‎README.md‎

Lines changed: 63 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33

44

55
Laravel 5 package that allows you to share your [Laravel localizations](http://laravel.com/docs/5.1/localization)
6-
with your [vue](http://vuejs.org/) front-end, using [vue-i18n](https://github.com/kazupon/vue-i18n).
6+
with your [vue](http://vuejs.org/) front-end, using [vue-i18n](https://github.com/kazupon/vue-i18n) or [vuex-i18n](https://github.com/dkfbasel/vuex-i18n).
77

88

9-
## Usage
9+
## Install the package
1010

1111
In your project:
1212
```composer require martinlindhe/laravel-vue-i18n-generator```
@@ -23,6 +23,20 @@ Next, publish the package default config:
2323
php artisan vendor:publish --provider="MartinLindhe\VueInternationalizationGenerator\GeneratorProvider"
2424
```
2525

26+
## Using vue-i18n
27+
28+
Next, you need to install one out of two supported VueJs i18n libraries. We support [vue-i18n](https://github.com/kazupon/vue-i18n) as default library. Beside that we also support [vuex-i18n](https://github.com/dkfbasel/vuex-i18n).
29+
30+
When you go with the default option, you only need to install the library through your favorite package manager.
31+
### vue-i18n
32+
```
33+
npm -i --save vue-i18n
34+
```
35+
36+
```
37+
yarn add vue-i18n
38+
```
39+
2640
Then generate the include file with
2741
```
2842
php artisan vue-i18n:generate
@@ -60,6 +74,47 @@ Vue.use(VueInternationalization, {
6074

6175
...
6276
```
77+
## Using vuex-i18n
78+
79+
### vuex-i18n
80+
```
81+
npm -i --save vuex-i18n
82+
```
83+
84+
```
85+
yarn add vuex-i18n
86+
```
87+
88+
Next, open `config/vue-i18n-generator.php` and do the following changes:
89+
90+
```php
91+
- 'i18nLib' => \MartinLindhe\VueInternationalizationGenerator\Generator::VUE_I18N,
92+
+ 'i18nLib' => \MartinLindhe\VueInternationalizationGenerator\Generator::VUEX_I18N,
93+
```
94+
95+
Then generate the include file with
96+
```
97+
php artisan vue-i18n:generate
98+
```
99+
100+
Assuming you are using a recent version of vuex-i18n, adjust your vue app with something like:
101+
```js
102+
import store from './vuex';
103+
import vuexI18n from 'vuex-i18n';
104+
Vue.use(vuexI18n.plugin, store);
105+
106+
import Locales from './vue-i18n-locales.generated.js';
107+
Vue.i18n.add('en', Locales.en);
108+
Vue.i18n.add('de', Locales.de);
109+
110+
// set the start locale to use
111+
Vue.i18n.set('en');
112+
113+
const app = new Vue({
114+
store, // inject store into all children
115+
el: '#app',
116+
});
117+
```
63118

64119
## UMD module
65120

@@ -121,10 +176,14 @@ Vue template:
121176

122177
## Notices
123178

124-
The generated file is an ES6 module.
179+
- The generated file is an ES6 module.
125180

126-
[Pluralization](http://laravel.com/docs/5.1/localization#pluralization) don't work with vue-i18n
181+
- One note on [Pluralization](http://laravel.com/docs/5.5/localization#pluralization). This used not to work with vue-i18n but as mentioned at [#12](https://github.com/martinlindhe/laravel-vue-i18n-generator/issues/12)
182+
they might work since vue-i18n uses the same syntax for separation of singular and plural form as Laravel does. So far this is not confirmed.
127183

184+
On the other hand it has been tested that pluralization work with vuex-i18n for simple singular / plural forms. However, the
185+
more sophisticated localization as described [here](https://laravel.com/docs/5.5/localization#pluralization) is not supported since
186+
vuex-i18n does not support this.
128187

129188
# License
130189

‎src/Commands/GenerateInclude.php‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ class GenerateInclude extends Command
1818
*
1919
* @var string
2020
*/
21-
protected $description = "Generates a vue-i18n compatible js array out of project translations";
21+
protected $description = "Generates a vue-i18n|vuex-i18n compatible js array out of project translations";
2222

2323
/**
2424
* Execute the console command.
@@ -32,17 +32,20 @@ public function handle()
3232

3333
$multipleFiles = $this->option('multi');
3434

35+
$i18nLib = config('vue-i18n-generator.i18nLib');
36+
3537
if ($multipleFiles) {
36-
$files = (new Generator)
38+
$files = (new Generator($i18nLib))
3739
->generateMultiple($root, $umd);
3840
echo "Written to :" . PHP_EOL . $files . PHP_EOL;
3941
exit();
4042
}
4143

42-
$data = (new Generator)
44+
$data = (new Generator($i18nLib))
4345
->generateFromPath($root, $umd);
4446

4547

48+
4649
$jsFile = base_path() . config('vue-i18n-generator.jsFile');
4750
file_put_contents($jsFile, $data);
4851

‎src/Generator.php‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,21 @@ class Generator
1010
private $availableLocales = [];
1111
private $filesToCreate = [];
1212

13+
const VUEX_I18N = 'vuex-i18n';
14+
const VUE_I18N = 'vue-i18n';
15+
16+
private $i18nLib;
17+
18+
/**
19+
* The constructor
20+
*
21+
* @param string $i18nLib
22+
*/
23+
public function __construct($i18nLib = self::VUE_I18N)
24+
{
25+
$this->i18nLib = $i18nLib;
26+
}
27+
1328
/**
1429
* @param string $path
1530
* @param boolean $umd
@@ -207,7 +222,9 @@ private function adjustArray(array $arr)
207222
}
208223

209224
/**
210-
* Turn Laravel style ":link" into vue-i18n style "{link}"
225+
* Turn Laravel style ":link" into vue-i18n style "{link}" and
226+
* turn Laravel style "|" into vuex-i18n style ":::" when using vuex-i18n.
227+
*
211228
* @param string $s
212229
* @return string
213230
*/
@@ -217,6 +234,13 @@ private function adjustString($s)
217234
return $s;
218235
}
219236

237+
if ($this->i18nLib === self::VUEX_I18N) {
238+
$searchPipePattern = '/(\s)*(\|)(\s)*/';
239+
$threeColons = ' ::: ';
240+
241+
$s = preg_replace($searchPipePattern, $threeColons, $s);
242+
}
243+
220244
return preg_replace_callback(
221245
'/(?<!mailto|tel):\w+/',
222246
function ($matches) {

‎src/config/vue-i18n-generator.php‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,17 @@
2424
|
2525
*/
2626
'jsPath' => '/resources/assets/js/langs/',
27-
'jsFile' => '/resources/assets/js/vue-i18n-locales.generated.js'
27+
'jsFile' => '/resources/assets/js/vue-i18n-locales.generated.js',
28+
29+
/*
30+
|--------------------------------------------------------------------------
31+
| i18n library
32+
|--------------------------------------------------------------------------
33+
|
34+
| Specify the library you use for localization.
35+
| Options are vue-i18n or vuex-i18n.
36+
| You can also use Generator::VUE_I18N or Generator::VUEX_I18N
37+
|
38+
*/
39+
'i18nLib' => \MartinLindhe\VueInternationalizationGenerator\Generator::VUE_I18N,
2840
];

‎tests/GenerateTest.php‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,45 @@ function testBasic()
130130
$this->destroyLocaleFilesFrom($arr, $root);
131131
}
132132

133+
function testBasicWithVuexLib()
134+
{
135+
$arr = [
136+
'en' => [
137+
'help' => [
138+
'yes' => 'yes',
139+
'no' => 'no',
140+
]
141+
],
142+
'sv' => [
143+
'help' => [
144+
'yes' => 'ja',
145+
'no' => 'nej',
146+
]
147+
]
148+
];
149+
150+
$root = $this->generateLocaleFilesFrom($arr);
151+
152+
$this->assertEquals(
153+
'export default {' . PHP_EOL
154+
. ' "en": {' . PHP_EOL
155+
. ' "help": {' . PHP_EOL
156+
. ' "yes": "yes",' . PHP_EOL
157+
. ' "no": "no"' . PHP_EOL
158+
. ' }' . PHP_EOL
159+
. ' },' . PHP_EOL
160+
. ' "sv": {' . PHP_EOL
161+
. ' "help": {' . PHP_EOL
162+
. ' "yes": "ja",' . PHP_EOL
163+
. ' "no": "nej"' . PHP_EOL
164+
. ' }' . PHP_EOL
165+
. ' }' . PHP_EOL
166+
. '}' . PHP_EOL,
167+
(new Generator('vuex-i18n'))->generateFromPath($root));
168+
169+
$this->destroyLocaleFilesFrom($arr, $root);
170+
}
171+
133172
function testNamed()
134173
{
135174
$arr = [
@@ -219,4 +258,71 @@ function testShouldNotTouchHtmlTags()
219258

220259
$this->destroyLocaleFilesFromJSON($arr, $root);
221260
}
261+
262+
function testPlurals()
263+
{
264+
$arr = [
265+
'en' => [
266+
'plural' => [
267+
'one' => 'There is one apple|There are many apples',
268+
'two' => 'There is one apple | There are many apples',
269+
'three' => 'There is one apple | There are many apples',
270+
'four' => 'There is one apple | There are many apples',
271+
'five' => [
272+
'one' => 'There is one apple|There are many apples',
273+
'two' => 'There is one apple | There are many apples',
274+
'three' => 'There is one apple | There are many apples',
275+
'four' => 'There is one apple | There are many apples',
276+
]
277+
]
278+
]
279+
];
280+
281+
$root = $this->generateLocaleFilesFrom($arr);
282+
283+
$this->assertEquals(
284+
'export default {' . PHP_EOL
285+
. ' "en": {' . PHP_EOL
286+
. ' "plural": {' . PHP_EOL
287+
. ' "one": "There is one apple ::: There are many apples",' . PHP_EOL
288+
. ' "two": "There is one apple ::: There are many apples",' . PHP_EOL
289+
. ' "three": "There is one apple ::: There are many apples",' . PHP_EOL
290+
. ' "four": "There is one apple ::: There are many apples",' . PHP_EOL
291+
. ' "five": {' . PHP_EOL
292+
. ' "one": "There is one apple ::: There are many apples",' . PHP_EOL
293+
. ' "two": "There is one apple ::: There are many apples",' . PHP_EOL
294+
. ' "three": "There is one apple ::: There are many apples",' . PHP_EOL
295+
. ' "four": "There is one apple ::: There are many apples"' . PHP_EOL
296+
. ' }' . PHP_EOL
297+
. ' }' . PHP_EOL
298+
. ' }' . PHP_EOL
299+
. '}' . PHP_EOL,
300+
(new Generator('vuex-i18n'))->generateFromPath($root));
301+
302+
$this->destroyLocaleFilesFrom($arr, $root);
303+
304+
$root = $this->generateLocaleFilesFromJSON($arr);
305+
306+
$this->assertEquals(
307+
'export default {' . PHP_EOL
308+
. ' "en": {' . PHP_EOL
309+
. ' "plural": {' . PHP_EOL
310+
. ' "one": "There is one apple ::: There are many apples",' . PHP_EOL
311+
. ' "two": "There is one apple ::: There are many apples",' . PHP_EOL
312+
. ' "three": "There is one apple ::: There are many apples",' . PHP_EOL
313+
. ' "four": "There is one apple ::: There are many apples",' . PHP_EOL
314+
. ' "five": {' . PHP_EOL
315+
. ' "one": "There is one apple ::: There are many apples",' . PHP_EOL
316+
. ' "two": "There is one apple ::: There are many apples",' . PHP_EOL
317+
. ' "three": "There is one apple ::: There are many apples",' . PHP_EOL
318+
. ' "four": "There is one apple ::: There are many apples"' . PHP_EOL
319+
. ' }' . PHP_EOL
320+
. ' }' . PHP_EOL
321+
. ' }' . PHP_EOL
322+
. '}' . PHP_EOL,
323+
(new Generator('vuex-i18n'))->generateFromPath($root));
324+
325+
$this->destroyLocaleFilesFromJSON($arr, $root);
326+
}
327+
222328
}

0 commit comments

Comments
 (0)