feat: Svelte integration TG-380

.eslintrc.json

@@ -7,7 +7,8 @@
     "**/*.generated.*",
     "*.js",
     "**/lib",
-    "**/src/serviceWorker.ts"
+    "**/src/serviceWorker.ts",
+    "**/svelte/package/**"
   ],
   "extends": [
     "eslint:recommended",

.github/workflows/publish-examples.yml

@@ -0,0 +1,42 @@
+name: Publish examples
+
+on:
+  workflow_run:
+    workflows: [ "Test" ]
+    branches: [ "main" ]
+    types:
+      - completed
+jobs:
+  main:
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          path: root
+
+      - run: mkdir -p testapps/svelte
+
+      - uses: actions/checkout@v2
+        with:
+          token: '${{ secrets.TOLGEE_MACHINE_PAT }}'
+          repository: tolgee/svelte-example
+          path: testapps/svelte
+
+      - run: |
+          rsync -av --progress root/testapps/svelte/* \
+          testapps/svelte/ \
+          --exclude node_modules \
+          --exclude .svelte-kit \
+          --exclude build \
+          --exclude build-dev \
+          --exclude dist
+
+      - name: Commit & Push files
+        run: |
+          git add .
+          git config --local user.email "[email protected]"
+          git config --local user.name "Tolgee Automation Machine"
+          git commit -m "chore: Publishing example from release: ${{ github.event.head_commit.message }}" -a || true
+          git push
+        working-directory: testapps/svelte

.github/workflows/test.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v1
         with:
-          node-version: '12.x'
+          node-version: '14.x'
 
       - run: npm install -g npm@7
 

.gitignore

@@ -26,4 +26,11 @@ testapps/next/.next
 testapps/next/dist
 **/.vscode
 .gradle
-e2e/extension
+e2e/extension
+testapps/**/build
+testapps/svelte-kit/.svelte-kit
+testapps/svelte-kit/package
+testapps/svelte/.env.local
+testapps/svelte/.env.production.local
+testapps/svelte/.env.development.local
+testapps/svelte/build-dev

.prettierignore

@@ -6,3 +6,6 @@
 
 **/*.generated.*
 **/*.md
+testapps/gatsby/public
+testapps/gatsby/.cache
+testapps/next/.next

build.gradle

@@ -104,6 +104,13 @@ task buildVue(type: Exec) {
     mustRunAfter "buildCore", "buildUi"
 }
 
+task buildSvelte(type: Exec) {
+    dependsOn "lernaBootstrap"
+    commandLine "npm", "run", "build"
+    workingDir "packages/svelte"
+    mustRunAfter "buildCore", "buildUi"
+}
+
 task buildNgx(type: Exec) {
     dependsOn "lernaBootstrap"
     commandLine "npm", "run", "build"
@@ -172,11 +179,32 @@ task buildNextTestapps(type: Exec) {
     mustRunAfter "buildCore", "buildReact", "buildUi"
 }
 
-task buildAll(type: Task) {
-    dependsOn "buildCore", "buildUi", "buildReact", "buildVue", "buildNgx", "buildSocketIoClient",
-            "buildCoreTestapps", "buildReactTestapps", "buildVueTestapps", "buildNgxTestapps", "buildGatsbyTestapps", "buildNextTestapps"
+task buildSvelteTestApps() {
+    dependsOn "buildSvelteProdTestApp", "buildSvelteDevTestApp"
+}
+
+task buildSvelteProdTestApp(type: Exec) {
+    dependsOn "lernaBootstrap"
+    commandLine "npm", "run", "build"
+    workingDir "testapps/svelte"
+    mustRunAfter "buildCore", "buildUi", "buildSvelte"
+}
+
+task buildSvelteDevTestApp(type: Exec) {
+    dependsOn "lernaBootstrap"
+    commandLine "npm", "run", "build"
+    workingDir "testapps/svelte"
+    mustRunAfter "buildCore", "buildUi", "buildSvelte"
+    environment 'SVELTE_TESTAPP_DIST_DIR': './build-dev',
+                'VITE_TOLGEE_API_URL'    : 'http://localhost:8202',
+                'VITE_TOLGEE_API_KEY'    : 'examples-admin-imported-project-implicit'
 }
 
+task buildAll(type: Task) {
+    dependsOn "buildCore", "buildUi", "buildReact", "buildVue", "buildSvelte", "buildNgx", "buildSocketIoClient",
+            "buildCoreTestapps", "buildReactTestapps", "buildVueTestapps", "buildNgxTestapps", "buildGatsbyTestapps", "buildNextTestapps", "buildSvelteTestApps"
+    }
+
 task developAll(type: Exec) {
     dependsOn "lernaBootstrap", "buildAll"
     commandLine "lerna", "run", "--parallel", "develop"
@@ -205,6 +233,16 @@ task testReact(type: Exec) {
     workingDir "packages/react"
 }
 
+task testSvelte(type: Exec) {
+    commandLine "npm", "run", "test"
+    workingDir "packages/svelte"
+}
+
+task testNgx(type: Exec) {
+    commandLine "npm", "run", "test"
+    workingDir "packages/ngx"
+}
+
 task testUi(type: Exec) {
     commandLine "npm", "run", "test"
     workingDir "packages/ui"
@@ -221,5 +259,5 @@ task testVue(type: Exec) {
 }
 
 task build(type: Task) {
-    dependsOn "buildAll", "testUi", "testCore", "testReact", "testSocketIoClient", "testVue", "runE2e"
+    dependsOn "buildAll", "testUi", "testCore", "testReact", "testSvelte", "testNgx", "testSocketIoClient", "testVue", "runE2e"
 }

docker/Dockerfile

@@ -1,3 +1,3 @@
-FROM node:12-alpine
+FROM node:14-alpine
 
-COPY wait-for-file /
+COPY wait-for-file /

e2e/cypress/common/exampleAppDevTest.ts

@@ -0,0 +1,21 @@
+export const exampleAppDevTest = (url: string) =>
+  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');
+    });
+
+    it('title can be translated', () => {
+      cy.contains('On the road').trigger('keydown', { key: 'Alt' }).click();
+      cy.contains('Quick translation').should('be.visible');
+    });
+
+    it('placeholder can be translated', () => {
+      cy.get('input').trigger('keydown', { key: 'Alt' }).click();
+      cy.contains('Quick translation').should('be.visible');
+    });
+  });

e2e/cypress/common/exampleAppTest.ts

@@ -0,0 +1,55 @@
+export const exampleAppTest = (url: string) =>
+  describe('standard example app test', () => {
+    before(() => {
+      cy.visit(url);
+    });
+
+    it('Has title', () => {
+      cy.contains('On the road').should('be.visible');
+    });
+
+    it('Has subtitle', () => {
+      cy.contains('What to pack for the trip').should('be.visible');
+    });
+
+    it('Has default items', () => {
+      cy.contains('Flame-thrower').should('be.visible');
+      cy.contains('Horse').should('be.visible');
+      cy.contains('My favourite toothbrush').should('be.visible');
+    });
+
+    it('Has buttons', () => {
+      cy.contains('Share').should('be.visible');
+      cy.contains('Send via e-mail').should('be.visible');
+    });
+
+    it('Deletes item', () => {
+      cy.contains('Delete').first().click();
+      cy.get('.item__text').should('have.length', 2);
+    });
+
+    it('Adds item', () => {
+      const newItem = 'Shower gel';
+      cy.get('.items__new-item input').type(newItem);
+      cy.get('.items__new-item button').click();
+      cy.get('.item__text').contains(newItem).should('be.visible');
+    });
+
+    it('is translated to german', () => {
+      cy.get('.lang-selector').select('de');
+      cy.get('body')
+        .should('contain', 'Auf dem Weg')
+        .should('contain', 'Was zum Ausflug einzupacken')
+        .should('contain', 'Löschen')
+        .should('contain', 'Teilen')
+        .should('contain', 'Per Email abschicken')
+        .should('contain', 'Übersetzungsmethoden')
+        .should('contain', 'Einfügen');
+
+      cy.get('.items__new-item input').should(
+        'have.attr',
+        'placeholder',
+        'Neuer Eintrag'
+      );
+    });
+  });

e2e/cypress/common/translationMethodsTest.ts

@@ -0,0 +1,29 @@
+export const translationMethodsTest = (
+  url: string,
+  items: Record<string, { text: string; count: number }[]>
+) =>
+  describe('translation methods test', () => {
+    before(() => {
+      cy.visit(url + '/translation-methods');
+    });
+
+    Object.entries(items).forEach(([language, texts]) => {
+      describe(`for language ${language}`, () => {
+        before(() => {
+          cy.get('.lang-selector').select(language);
+          Object.values(texts).forEach((text) => {
+            cy.contains(text.text).should('be.visible');
+          });
+        });
+
+        texts.forEach((text) => {
+          it(`contains "${text.text}" ${text.count} times`, () => {
+            cy.xpath(`.//*[text() = '${text.text}']`).should(
+              'have.length',
+              text.count
+            );
+          });
+        });
+      });
+    });
+  });

e2e/cypress/integration/svelte/dev.spec.ts

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

e2e/cypress/integration/svelte/prod.spec.ts

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