fix(js sdk): Improve SSR stability TG-275 (#429)

.gitignore

@@ -19,3 +19,6 @@ testapps/ngx/*/dist
 testapps/gatsby/.env*
 testapps/gatsby.cache
 testapps/gatsby/public
+testapps/next/.idea
+testapps/next/.next
+testapps/next/dist

build.gradle

@@ -32,7 +32,7 @@ apply from: "./gradle/e2e.gradle"
 
 task lernaBootstrap(type: Exec) {
     commandLine "npm", "run", "lerna-bootstrap", "--", "--ci"
-    finalizedBy "linkLibReactToReactTestApp", "linkLibReactDomToReactTestApp"
+    finalizedBy "linkLibReactToReactTestApp", "linkLibReactDomToReactTestApp", "linkLibReactToNextTestApp"
 }
 
 //this is a solution for multiple react error in hook
@@ -51,6 +51,23 @@ task linkLibReactToReactTestApp {
     }
 }
 
+//this is a solution for multiple react error in hook
+//dependabot cannot handle dependency path which doesn't exist
+task linkLibReactToNextTestApp {
+    def workdir = "testapps/next/node_modules"
+    doLast {
+        exec {
+            workingDir workdir
+            commandLine "rm", "-rf", "react"
+        }
+        exec {
+            workingDir workdir
+            commandLine "ln", "-sf", "../../../packages/react/node_modules/react", "."
+        }
+    }
+}
+
+
 //this is a solution for multiple react error in hook
 //dependabot cannot handle dependency path which doesn't exist
 task linkLibReactDomToReactTestApp {
@@ -125,9 +142,25 @@ task buildNgxTestapps(type: Exec) {
     mustRunAfter "buildCore", "buildUi", "buildNgx"
 }
 
+task buildGatsbyTestapps(type: Exec) {
+    dependsOn "lernaBootstrap", "buildCore", "buildUi", "buildReact"
+    commandLine "npm", "run", "build"
+    workingDir "testapps/gatsby"
+    mustRunAfter "buildCore", "buildReact", "buildUi", "buildNgx"
+}
+
+
+task buildNextTestapps(type: Exec) {
+    dependsOn "lernaBootstrap", "buildCore", "buildUi", "buildReact"
+    commandLine "npm", "run", "build"
+    workingDir "testapps/next"
+    environment "NEXT_BUILD_DIR", "dist"
+    mustRunAfter "buildCore", "buildReact", "buildUi"
+}
+
 task buildAll(type: Task) {
     dependsOn "buildCore", "buildUi", "buildReact", "buildNgx", "buildSocketIoClient",
-            "buildCoreTestapps", "buildReactTestapps", "buildNgxTestapps"
+            "buildCoreTestapps", "buildReactTestapps", "buildNgxTestapps", "buildGatsbyTestapps", "buildNextTestapps"
 }
 
 task developAll(type: Exec) {
@@ -136,12 +169,12 @@ task developAll(type: Exec) {
 }
 
 task developReactNoBuild(type: Exec) {
-    commandLine "lerna", "run", "--parallel", "--include-dependencies" ,"--scope", "*/react", "develop"
+    commandLine "lerna", "run", "--parallel", "--include-dependencies", "--scope", "*/react", "develop"
 }
 
 task developReact(type: Exec) {
     dependsOn "lernaBootstrap", "buildAll"
-    commandLine "lerna", "run", "--parallel", "--include-dependencies" ,"--scope", "*/react", "develop"
+    commandLine "lerna", "run", "--parallel", "--include-dependencies", "--scope", "*/react", "develop"
 }
 
 task testCore(type: Exec) {

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

@@ -0,0 +1,25 @@
+context('Gatsby development', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:8104/');
+  });
+
+  it('Is translated in english', () => {
+    cy.contains('Hello world!');
+  });
+
+  it('it switches language', () => {
+    cy.contains('DE').click();
+    cy.contains('Hallo Welt!');
+    cy.contains('EN').click();
+    cy.contains('Hello world!');
+  });
+
+  it('it opens UI', () => {
+    cy.contains('Hello world!')
+      .trigger('keydown', { key: 'Alt' })
+      .trigger('mouseover')
+      .click();
+    cy.contains('Translate text');
+    cy.contains('Save');
+  });
+});

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

@@ -0,0 +1,16 @@
+context('Gatsby Production', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:8105/');
+  });
+
+  it('Is translated in english', () => {
+    cy.contains('Hello world!');
+  });
+
+  it('it switches language', () => {
+    cy.contains('DE').click();
+    cy.contains('Hallo Welt!');
+    cy.contains('EN').click();
+    cy.contains('Hello world!');
+  });
+});

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

@@ -0,0 +1,26 @@
+context('Next development', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:8106/');
+  });
+
+  it('Is translated in english', () => {
+    cy.contains('Hello world!');
+  });
+
+  it('it switches language', () => {
+    cy.contains('Hello world!').should('be.visible');
+    cy.contains('de').click();
+    cy.contains('Hallo Welt!');
+    cy.contains('en').click();
+    cy.contains('Hello world!');
+  });
+
+  it('it opens UI', () => {
+    cy.contains('Hello world!')
+      .trigger('keydown', { key: 'Alt' })
+      .trigger('mouseover')
+      .click();
+    cy.contains('Translate text');
+    cy.contains('Save');
+  });
+});

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

@@ -0,0 +1,17 @@
+context('Next Production', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:8107/');
+  });
+
+  it('Is translated in english', () => {
+    cy.contains('Hello world!');
+  });
+
+  it('it switches language', () => {
+    cy.contains('Hello world!').should('be.visible');
+    cy.contains('de').click();
+    cy.contains('Hallo Welt!');
+    cy.contains('en').click();
+    cy.contains('Hello world!');
+  });
+});

e2e/docker-compose.yml

@@ -23,7 +23,7 @@ services:
       - '../testapps/core:/data'
     ports:
       - 8101:8101
-    command: ['npm', 'run', 'serve']
+    command: [ 'npm', 'run', 'serve' ]
     working_dir: /data
   e2e_app_react:
     container_name: tolgee_js_e2e_serve_testapps_react
@@ -32,7 +32,7 @@ services:
       - '../:/data'
     ports:
       - 8102:8101
-    command: ['npm', 'run', 'serve']
+    command: [ 'npm', 'run', 'serve' ]
     working_dir: /data/testapps/react
   e2e_app_angular:
     container_name: tolgee_js_e2e_serve_testapps_ngx
@@ -41,5 +41,49 @@ services:
       - '../:/data'
     ports:
       - 8103:8101
-    command: ['npm', 'run', 'serve']
+    command: [ 'npm', 'run', 'serve' ]
     working_dir: /data/testapps/ngx
+  e2e_app_gatsby_dev:
+    container_name: tolgee_js_e2e_serve_testapps_gatsby_dev
+    build: ../docker
+    volumes:
+      - '../:/data'
+    ports:
+      - 8104:8000
+    command: [ 'npm', 'run', 'start', '--', '--host=0.0.0.0' ]
+    environment:
+      GATSBY_TOLGEE_API_URL: http://localhost:8202
+      GATSBY_TOLGEE_API_KEY: this_is_dummy_api_key
+    working_dir: /data/testapps/gatsby
+  e2e_app_gatsby_prod:
+    container_name: tolgee_js_e2e_serve_testapps_gatsby_prod
+    build: ../docker
+    volumes:
+      - '../:/data'
+    ports:
+      - 8105:9000
+    command: [ 'npm', 'run', 'serve', '--', '--host=0.0.0.0' ]
+    working_dir: /data/testapps/gatsby
+  e2e_app_next_dev:
+    container_name: tolgee_js_e2e_serve_testapps_next_dev
+    build: ../docker
+    volumes:
+      - '../:/data'
+    ports:
+      - 8106:3000
+    command: [ 'npm', 'run', 'dev' ]
+    environment:
+      NEXT_PUBLIC_TOLGEE_API_URL: http://localhost:8202
+      NEXT_PUBLIC_TOLGEE_API_KEY: this_is_dummy_api_key
+    working_dir: /data/testapps/next
+  e2e_app_next_prod:
+    container_name: tolgee_js_e2e_serve_testapps_next_prod
+    build: ../docker
+    volumes:
+      - '../:/data'
+    ports:
+      - 8107:3000
+    command: [ 'npm', 'run', 'start' ]
+    environment:
+      NEXT_BUILD_DIR: dist
+    working_dir: /data/testapps/next