Skip to content

Commit

Permalink
add vue internationalization
Browse files Browse the repository at this point in the history
create vue internalization module using i18next 23.14.0 with language detector
see https://i18next.github.io/i18next-vue/introduction.html
  • Loading branch information
fabienpuissant committed Sep 1, 2024
1 parent bae298f commit 501c7fb
Show file tree
Hide file tree
Showing 19 changed files with 481 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
public class ReactI18nModuleFactory {

private static final JHipsterSource APP_SOURCE = from("client/react/i18n/src/main/webapp/app");
private static final JHipsterSource ASSETS_FR_SOURCE = from("client/react/i18n/src/main/webapp/assets/locales/fr");
private static final JHipsterSource ASSETS_EN_SOURCE = from("client/react/i18n/src/main/webapp/assets/locales/en");
private static final JHipsterSource ASSETS_FR_SOURCE = from("client/react/src/main/webapp/assets/fr");
private static final JHipsterSource ASSETS_EN_SOURCE = from("client/react/src/main/webapp/assets/en");

private static final String INDEX = "src/main/webapp/";
private static final String INDEX_TEST = "src/test/webapp/unit/common/primary/app/";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
class ReactI18nModuleConfiguration {

@Bean
JHipsterModuleResource i18nModule(ReactI18nApplicationService i18n) {
JHipsterModuleResource reactI18nModule(ReactI18nApplicationService i18n) {
return JHipsterModuleResource.builder()
.slug(REACT_I18N)
.propertiesDefinition(JHipsterModulePropertiesDefinition.builder().build())
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
package tech.jhipster.lite.generator.client.vue.i18n.application;

import org.springframework.stereotype.Service;
import tech.jhipster.lite.generator.client.vue.i18n.domain.VueI18nModuleFactory;
import tech.jhipster.lite.module.domain.JHipsterModule;
import tech.jhipster.lite.module.domain.properties.JHipsterModuleProperties;

@Service
public class VueI18nApplicationService {

private final VueI18nModuleFactory factory;

public VueI18nApplicationService() {
factory = new VueI18nModuleFactory();
}

public JHipsterModule buildModule(JHipsterModuleProperties properties) {
return factory.buildModule(properties);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
package tech.jhipster.lite.generator.client.vue.i18n.domain;

import static tech.jhipster.lite.module.domain.JHipsterModule.*;

import tech.jhipster.lite.module.domain.JHipsterModule;
import tech.jhipster.lite.module.domain.file.JHipsterSource;
import tech.jhipster.lite.module.domain.packagejson.VersionSource;
import tech.jhipster.lite.module.domain.properties.JHipsterModuleProperties;
import tech.jhipster.lite.shared.error.domain.Assert;

public class VueI18nModuleFactory {

private static final JHipsterSource APP_SOURCE = from("client/vue/i18n/src/main/webapp/app");
private static final JHipsterSource ASSETS_FR_SOURCE = from("client/common/i18n/locales/fr");
private static final JHipsterSource ASSETS_EN_SOURCE = from("client/common/i18n/locales/en");
private static final JHipsterSource TEST_SOURCE = from("client/vue/i18n/src/test");

private static final String INDEX = "src/main/webapp/";
private static final String INDEX_TEST = "src/test/";

public JHipsterModule buildModule(JHipsterModuleProperties properties) {
Assert.notNull("properties", properties);

//@formatter:off
return moduleBuilder(properties)
.packageJson()
.addDependency(packageName("i18next"), VersionSource.COMMON)
.addDependency(packageName("i18next-vue"), VersionSource.VUE)
.addDependency(packageName("i18next-browser-languagedetector"), VersionSource.COMMON)
.and()
.files()
.batch(APP_SOURCE, to(INDEX + "/app"))
.addFile("i18n.ts")
.and()
.batch(ASSETS_EN_SOURCE, to(INDEX + "content/locales/en/"))
.addFile("common.json")
.addFile("homepage.json")
.and()
.batch(ASSETS_FR_SOURCE, to(INDEX + "content/locales/fr/"))
.addFile("common.json")
.addFile("homepage.json")
.and()
.batch(TEST_SOURCE, to(INDEX_TEST))
.addFile("setupTests.ts")
.and()
.and()
.mandatoryReplacements()
.in(path(INDEX + "app/main.ts"))
.add(lineBeforeText("// jhipster-needle-main-ts-import"), "import i18next from './i18n';")
.add(lineBeforeText("// jhipster-needle-main-ts-import"), "import I18NextVue from 'i18next-vue';")
.add(lineBeforeText("app.mount('#app');"), "app.use(I18NextVue, { i18next });")
.and()
.in(path(INDEX + "app/common/primary/homepage/Homepage.html"))
.add(lineAfterRegex("Vue 3 \\+ TypeScript \\+ Vite"), properties.indentation().times(1) + "<p v-html=\"$t('translationEnabled', {ns: 'homepage'})\"></p>")
.add(lineAfterRegex("Vue 3 \\+ TypeScript \\+ Vite"), properties.indentation().times(1) + "<p v-html=\"$t('translationEnabled', {ns: 'common'})\"></p>")
.and()
.in(path("./vitest.config.ts"))
.add(lineAfterRegex("test:"), properties.indentation().times(2) + "setupFiles: ['./src/test/setupTests.ts'],")
.and()
.in(path(INDEX_TEST + "webapp/unit/common/primary/homepage/Homepage.spec.ts"))
.add(append(), LINE_BREAK + """
describe('App I18next', () => {
it('should renders with translation', () => {
wrap();
expect(wrapper.text()).toContain("translationEnabled");
});
});
""")
.and()
.and()
.build();
//@formatter:off
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
package tech.jhipster.lite.generator.client.vue.i18n.infrastructure.primary;

import static tech.jhipster.lite.generator.slug.domain.JHLiteFeatureSlug.CLIENT_INTERNATIONALIZATION;
import static tech.jhipster.lite.generator.slug.domain.JHLiteModuleSlug.VUE_CORE;
import static tech.jhipster.lite.generator.slug.domain.JHLiteModuleSlug.VUE_I18N;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import tech.jhipster.lite.generator.client.vue.i18n.application.VueI18nApplicationService;
import tech.jhipster.lite.module.domain.resource.JHipsterModuleOrganization;
import tech.jhipster.lite.module.domain.resource.JHipsterModulePropertiesDefinition;
import tech.jhipster.lite.module.domain.resource.JHipsterModuleResource;

@Configuration
class VueI18nModuleConfiguration {

@Bean
JHipsterModuleResource vueI18nModule(VueI18nApplicationService i18n) {
return JHipsterModuleResource.builder()
.slug(VUE_I18N)
.propertiesDefinition(JHipsterModulePropertiesDefinition.builder().build())
.apiDoc("Frontend - Vue", "Add vue internationalization")
.organization(JHipsterModuleOrganization.builder().feature(CLIENT_INTERNATIONALIZATION).addDependency(VUE_CORE).build())
.tags("client", "vue", "i18n")
.factory(i18n::buildModule);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@tech.jhipster.lite.BusinessContext
package tech.jhipster.lite.generator.client.vue.i18n;
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ public enum JHLiteModuleSlug implements JHipsterModuleSlugFactory {
SVELTE_CORE("svelte-core"),
TYPESCRIPT("typescript"),
VUE_CORE("vue-core"),
VUE_I18N("vue-i18next"),
VUE_PINIA("vue-pinia"),
TS_PAGINATION_DOMAIN("ts-pagination-domain"),
TS_REST_PAGINATION("ts-rest-pagination");
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"translationEnabled": "Internationalisation enabled namespace common"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"translationEnabled": "Internationalization enabled namespace Homepage"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"translationEnabled": "Internationalisation activée namespace common"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"translationEnabled": "Internationalisation activée namespace homepage"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import i18n, { type ResourceLanguage } from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

const sources: Record<string, Record<string, unknown>> = {
fr: import.meta.glob('../content/locales/fr/*.json', {
eager: true,
import: 'default',
}),
en: import.meta.glob('../content/locales/en/*.json', {
eager: true,
import: 'default',
}),
};

const getNamespace = (path: string): string => {
const parts = path.split('/');
const filename = parts[parts.length - 1];
return filename.replace('.json', '');
};

const getLocaleResources = (): Record<string, ResourceLanguage> =>
Object.keys(sources).reduce(
(messages, locale) => ({
...messages,
[locale]: Object.keys(sources[locale]).reduce((localeMessages, path) => {
const namespace = getNamespace(path);
return {
...localeMessages,
[namespace]: sources[locale][path],
};
}, {}),
}),
{},
);

i18n.use(LanguageDetector).init({
fallbackLng: 'en',
debug: false,
interpolation: {
escapeValue: false,
},
resources: getLocaleResources(),
});

export default i18n;
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { config } from '@vue/test-utils';

config.global.mocks = {
$t: msg => msg,
};
1 change: 1 addition & 0 deletions src/main/resources/generator/dependencies/vue/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"license": "Apache-2.0",
"dependencies": {
"axios": "1.7.5",
"i18next-vue": "5.0.0",
"pinia": "2.2.2",
"pinia-plugin-persistedstate": "3.2.1",
"vue": "3.4.38",
Expand Down
17 changes: 17 additions & 0 deletions src/test/features/client/vue-i18n.feature
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
Feature: Vue i18n

Scenario: Should apply vue i18n module to vue
When I apply modules to default project
| init |
| vue-core |
| vue-i18next |
Then I should have files in "src/main/webapp/app"
| i18n.ts |
And I should have files in "src/main/webapp/content/locales/en"
| common.json |
| homepage.json |
And I should have files in "src/main/webapp/content/locales/fr"
| common.json |
| homepage.json |
And I should have files in "src/test"
| setupTests.ts |
Loading

0 comments on commit 501c7fb

Please sign in to comment.