feat: Vue i18next example app TG-458

.github/workflows/publish-examples.yml

@@ -13,7 +13,16 @@ jobs:
       fail-fast: false
       matrix:
         project:
-          ['react', 'next', 'gatsby', 'vue', 'svelte', 'ngx', 'react-i18next']
+          [
+            'react',
+            'next',
+            'gatsby',
+            'vue',
+            'svelte',
+            'ngx',
+            'react-i18next',
+            'vue-i18next',
+          ]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2

build.gradle

@@ -193,6 +193,27 @@ task buildReactI18nextTestapps() {
     dependsOn "buildReactI18nextProdTestApp", "buildReactI18nextDevTestApp"
 }
 
+
+task buildVueI18nextProdTestApp(type: Exec) {
+    dependsOn "lernaBootstrap", "buildCore", "buildUi", "buildI18next"
+    commandLine "npm", "run", "build"
+    workingDir "testapps/vue-i18next"
+    mustRunAfter "buildCore", "buildUi"
+}
+
+task buildVueI18nextDevTestApp(type: Exec) {
+    dependsOn "lernaBootstrap", "buildCore", "buildUi", "buildI18next"
+    commandLine "npm", "run", "build", "--", "--dest", "dist-dev"
+    workingDir "testapps/vue-i18next"
+    mustRunAfter "buildCore", "buildUi"
+    environment 'VUE_APP_TOLGEE_API_URL'    : 'http://localhost:8202',
+                'VUE_APP_TOLGEE_API_KEY'    : 'examples-admin-imported-project-implicit'
+}
+
+task buildVueI18nextTestapps() {
+    dependsOn "buildVueI18nextProdTestApp", "buildVueI18nextDevTestApp"
+}
+
 task buildVueProdTestApp(type: Exec) {
     dependsOn "lernaBootstrap", "buildCore", "buildUi"
     commandLine "npm", "run", "build"
@@ -261,7 +282,7 @@ task buildSvelteDevTestApp(type: Exec) {
 task buildAll(type: Task) {
     dependsOn "buildCore", "buildUi", "buildReact", "buildVue", "buildSvelte", "buildNgx", "buildSocketIoClient", "buildI18next",
             "buildCoreTestapps", "buildReactTestapps", "buildVueTestapps", "buildNgxTestapps", "buildGatsbyTestapps",
-            "buildNextTestapps", "buildSvelteTestApps", "buildReactI18nextTestapps"
+            "buildNextTestapps", "buildSvelteTestApps", "buildReactI18nextTestapps", "buildVueI18nextTestapps"
 }
 
 task developAll(type: Exec) {

e2e/cypress/common/exampleAppDevTest.ts

@@ -1,13 +1,19 @@
-export const exampleAppDevTest = (url: string) =>
+type Options = {
+  noLoading: boolean;
+};
+
+export const exampleAppDevTest = (url: string, options?: Options) =>
   describe('standard example app dev test', () => {
     beforeEach(() => {
       cy.visit(url);
     });
 
-    it('Shows loading on visit', () => {
-      cy.contains('Loading...').should('be.visible');
-      cy.contains('On the road').should('be.visible');
-    });
+    if (!options?.noLoading) {
+      it('Shows loading on visit', () => {
+        cy.contains('Loading...').should('be.visible');
+        cy.contains('On the road').should('be.visible');
+      });
+    }
 
     it('title can be translated', () => {
       cy.contains('On the road').trigger('keydown', { key: 'Alt' }).click();

e2e/cypress/integration/vue-i18next/dev.spec.ts

@@ -0,0 +1,31 @@
+import { exampleAppTest } from '../../common/exampleAppTest';
+import { translationMethodsTest } from '../../common/translationMethodsTest';
+import { exampleAppDevTest } from '../../common/exampleAppDevTest';
+
+context('React i18next app in dev mode', () => {
+  const url = 'http://localhost:8120';
+  exampleAppTest(url);
+  translationMethodsTest(url, {
+    en: [
+      { text: 'This is default', count: 1 },
+      {
+        text: 'This is a key',
+        count: 1,
+      },
+      { text: ' This is key with params value value2 ', count: 1 },
+    ],
+    de: [
+      { text: 'This is default', count: 1 },
+      {
+        text: 'Dies ist ein Schlüssel',
+        count: 1,
+      },
+      {
+        text: ' Dies ist ein Schlüssel mit den Parametern value value2 ',
+        count: 1,
+      },
+    ],
+  });
+
+  exampleAppDevTest(url, { noLoading: true });
+});

e2e/cypress/integration/vue-i18next/prod.spec.ts

@@ -0,0 +1,28 @@
+import { exampleAppTest } from '../../common/exampleAppTest';
+import { translationMethodsTest } from '../../common/translationMethodsTest';
+
+context('React i18next app in prod mode', () => {
+  const url = 'http://localhost:8119';
+  exampleAppTest(url);
+  translationMethodsTest(url, {
+    en: [
+      { text: 'This is default', count: 1 },
+      {
+        text: 'This is a key',
+        count: 1,
+      },
+      { text: ' This is key with params value value2 ', count: 1 },
+    ],
+    de: [
+      { text: 'This is default', count: 1 },
+      {
+        text: 'Dies ist ein Schlüssel',
+        count: 1,
+      },
+      {
+        text: ' Dies ist ein Schlüssel mit den Parametern value value2 ',
+        count: 1,
+      },
+    ],
+  });
+});

e2e/docker-compose.yml

@@ -178,3 +178,21 @@ services:
       - 8118:8101
     command: ['npm', 'run', 'serve-dev']
     working_dir: /data/testapps/react-i18next
+  e2e_app_vue_i18next_prod:
+    container_name: tolgee_js_e2e_serve_testapps_vue_i18next_prod
+    build: ../docker
+    volumes:
+      - '../:/data'
+    ports:
+      - 8119:3002
+    command: ['npm', 'run', 'serve']
+    working_dir: /data/testapps/vue-i18next
+  e2e_app_vue_i18next_dev:
+    container_name: tolgee_js_e2e_serve_testapps_vue_i18next_dev
+    build: ../docker
+    volumes:
+      - '../:/data'
+    ports:
+      - 8120:3002
+    command: ['npm', 'run', 'serve-dev']
+    working_dir: /data/testapps/vue-i18next

testapps/vue-i18next/.env

@@ -0,0 +1,2 @@
+VUE_APP_TOLGEE_API_URL=https://app.tolgee.io
+VUE_APP_TOLGEE_API_KEY=

testapps/vue-i18next/.gitignore

@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+/dist
+/dist-dev
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

testapps/vue-i18next/README.md

@@ -0,0 +1,24 @@
+# vue-i18next
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

testapps/vue-i18next/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

testapps/vue-i18next/i18n/cs.json

@@ -0,0 +1,12 @@
+{
+  "add-item-add-button" : "Přidat",
+  "add-item-input-placeholder" : "Nová položka seznamu",
+  "delete-item-button" : "Smazat",
+  "menu-item-translation-methods" : "Metody překládání",
+  "on-the-road-subtitle" : "Co si sbalit na výlet",
+  "on-the-road-title" : "Na cestu",
+  "send-via-email" : "Odeslat e-mailem",
+  "share-button" : "Sdílet",
+  "this_is_a_key" : "Toto je klíč",
+  "this_is_a_key_with_params" : "Toto je klíč s parametry {key} {key2}"
+}

testapps/vue-i18next/i18n/de.json

@@ -0,0 +1,12 @@
+{
+  "add-item-add-button" : "Einfügen",
+  "add-item-input-placeholder" : "Neuer Eintrag",
+  "delete-item-button" : "Löschen",
+  "menu-item-translation-methods" : "Übersetzungsmethoden",
+  "on-the-road-subtitle" : "Was zum Ausflug einzupacken",
+  "on-the-road-title" : "Auf dem Weg",
+  "send-via-email" : "Per Email abschicken",
+  "share-button" : "Teilen",
+  "this_is_a_key" : "Dies ist ein Schlüssel",
+  "this_is_a_key_with_params" : "Dies ist ein Schlüssel mit den Parametern {key} {key2}"
+}

testapps/vue-i18next/i18n/en.json

@@ -0,0 +1,12 @@
+{
+  "add-item-add-button" : "Add",
+  "add-item-input-placeholder" : "New list item",
+  "delete-item-button" : "Delete",
+  "menu-item-translation-methods" : "Translation methods",
+  "on-the-road-subtitle" : "What to pack for the trip",
+  "on-the-road-title" : "On the road",
+  "send-via-email" : "Send via e-mail",
+  "share-button" : "Share",
+  "this_is_a_key" : "This is a key",
+  "this_is_a_key_with_params" : "This is key with params {key} {key2}"
+}

testapps/vue-i18next/i18n/fr.json

@@ -0,0 +1,12 @@
+{
+  "add-item-add-button" : "Ajouter",
+  "add-item-input-placeholder" : "Nouveau élément de la liste",
+  "delete-item-button" : "Supprimer",
+  "menu-item-translation-methods" : "Méthodes de la traduction",
+  "on-the-road-subtitle" : "Comment faire sa valise pour la randonnée",
+  "on-the-road-title" : "Sur la route",
+  "send-via-email" : "Envoyer par e-mail",
+  "share-button" : "Partager",
+  "this_is_a_key" : "C'est un clé",
+  "this_is_a_key_with_params" : "C'est la clé avec paramètres {key} {key2}"
+}