feat: Use invisible wrapping instead of span component

* in integrations switch to invisible mode as default * remove additional span element in T component * svelte, vue: default value as a prop instead of child (due to tech limitations) BREAKING CHANGE: default invisible mode, defaultValue
tolgee · Mar 10, 2022 · 3848cda · 3848cda
1 parent 813f911
commit 3848cda
Show file tree

Hide file tree

Showing 72 changed files with 169,166 additions and 168,385 deletions.
diff --git a/e2e/cypress/integration/gatsby/dev.spec.ts b/e2e/cypress/integration/gatsby/dev.spec.ts
@@ -12,7 +12,7 @@ context('React app in dev mode', () => {
         text: 'This is a key',
         count: 5,
       },
-      { text: 'This is key with params value value2', count: 4 },
+      { text: 'This is key with params value value2', count: 3 },
     ],
     de: [
       { text: 'This is default', count: 2 },
@@ -22,7 +22,7 @@ context('React app in dev mode', () => {
       },
       {
         text: 'Dies ist ein Schlüssel mit den Parametern value value2',
-        count: 4,
+        count: 3,
       },
     ],
   });

diff --git a/e2e/cypress/integration/gatsby/prod.spec.ts b/e2e/cypress/integration/gatsby/prod.spec.ts
@@ -11,7 +11,7 @@ context('React app in prod mode', () => {
         text: 'This is a key',
         count: 5,
       },
-      { text: 'This is key with params value value2', count: 4 },
+      { text: 'This is key with params value value2', count: 3 },
     ],
     de: [
       { text: 'This is default', count: 2 },
@@ -21,7 +21,7 @@ context('React app in prod mode', () => {
       },
       {
         text: 'Dies ist ein Schlüssel mit den Parametern value value2',
-        count: 4,
+        count: 3,
       },
     ],
   });

diff --git a/e2e/cypress/integration/next-internal/ui.spec.ts b/e2e/cypress/integration/next-internal/ui.spec.ts
@@ -70,7 +70,7 @@ context('UI Dialog', () => {
     }).as('updateTranslation');
     cy.contains('Update').click();
     cy.wait('@updateTranslation');
-    cy.get('span').contains('Hello world').should('be.visible');
+    cy.contains('Hello world').should('be.visible');
   });
 
   it('make screenshot', () => {

diff --git a/e2e/cypress/integration/next/dev.spec.ts b/e2e/cypress/integration/next/dev.spec.ts
@@ -12,7 +12,7 @@ context('React app in dev mode', () => {
         text: 'This is a key',
         count: 5,
       },
-      { text: 'This is key with params value value2', count: 4 },
+      { text: 'This is key with params value value2', count: 3 },
       {
         text: 'This is a key with tags bold value',
         count: 2,
@@ -27,7 +27,7 @@ context('React app in dev mode', () => {
       },
       {
         text: 'Dies ist ein Schlüssel mit den Parametern value value2',
-        count: 4,
+        count: 3,
       },
       {
         text: 'Dies ist ein Schlüssel mit den Tags bold value',

diff --git a/e2e/cypress/integration/next/prod.spec.ts b/e2e/cypress/integration/next/prod.spec.ts
@@ -11,7 +11,7 @@ context('React app in prod mode', () => {
         text: 'This is a key',
         count: 5,
       },
-      { text: 'This is key with params value value2', count: 4 },
+      { text: 'This is key with params value value2', count: 3 },
       {
         text: 'This is a key with tags bold value',
         count: 2,
@@ -26,7 +26,7 @@ context('React app in prod mode', () => {
       },
       {
         text: 'Dies ist ein Schlüssel mit den Parametern value value2',
-        count: 4,
+        count: 3,
       },
       {
         text: 'Dies ist ein Schlüssel mit den Tags bold value',

diff --git a/e2e/cypress/integration/react/dev.spec.ts b/e2e/cypress/integration/react/dev.spec.ts
@@ -12,7 +12,7 @@ context('React app in dev mode', () => {
         text: 'This is a key',
         count: 5,
       },
-      { text: 'This is key with params value value2', count: 4 },
+      { text: 'This is key with params value value2', count: 3 },
       {
         text: 'This is a key with tags bold value',
         count: 2,
@@ -27,7 +27,7 @@ context('React app in dev mode', () => {
       },
       {
         text: 'Dies ist ein Schlüssel mit den Parametern value value2',
-        count: 4,
+        count: 3,
       },
       {
         text: 'Dies ist ein Schlüssel mit den Tags bold value',

diff --git a/e2e/cypress/integration/react/prod.spec.ts b/e2e/cypress/integration/react/prod.spec.ts
@@ -11,7 +11,7 @@ context('React app in prod mode', () => {
         text: 'This is a key',
         count: 5,
       },
-      { text: 'This is key with params value value2', count: 4 },
+      { text: 'This is key with params value value2', count: 3 },
       {
         text: 'This is a key with tags bold value',
         count: 2,
@@ -26,7 +26,7 @@ context('React app in prod mode', () => {
       },
       {
         text: 'Dies ist ein Schlüssel mit den Parametern value value2',
-        count: 4,
+        count: 3,
       },
       {
         text: 'Dies ist ein Schlüssel mit den Tags bold value',

diff --git a/e2e/cypress/integration/svelte/dev.spec.ts b/e2e/cypress/integration/svelte/dev.spec.ts
@@ -12,7 +12,7 @@ context('Svelte app in dev mode', () => {
         text: 'This is a key',
         count: 5,
       },
-      { text: 'This is key with params value value2', count: 4 },
+      { text: 'This is key with params value value2', count: 3 },
     ],
     de: [
       { text: 'This is default', count: 2 },
@@ -22,7 +22,7 @@ context('Svelte app in dev mode', () => {
       },
       {
         text: 'Dies ist ein Schlüssel mit den Parametern value value2',
-        count: 4,
+        count: 3,
       },
     ],
   });

diff --git a/e2e/cypress/integration/svelte/prod.spec.ts b/e2e/cypress/integration/svelte/prod.spec.ts
@@ -12,7 +12,7 @@ context('Svelte app in prod mode', () => {
         text: 'This is a key',
         count: 5,
       },
-      { text: 'This is key with params value value2', count: 4 },
+      { text: 'This is key with params value value2', count: 3 },
     ],
     de: [
       { text: 'This is default', count: 2 },
@@ -22,7 +22,7 @@ context('Svelte app in prod mode', () => {
       },
       {
         text: 'Dies ist ein Schlüssel mit den Parametern value value2',
-        count: 4,
+        count: 3,
       },
     ],
   });

diff --git a/e2e/cypress/integration/vue/dev.spec.ts b/e2e/cypress/integration/vue/dev.spec.ts
@@ -12,7 +12,7 @@ context('Vue app in dev mode', () => {
         text: 'This is a key',
         count: 5,
       },
-      { text: 'This is key with params value value2', count: 4 },
+      { text: 'This is key with params value value2', count: 3 },
     ],
     de: [
       { text: 'This is default', count: 2 },
@@ -22,7 +22,7 @@ context('Vue app in dev mode', () => {
       },
       {
         text: 'Dies ist ein Schlüssel mit den Parametern value value2',
-        count: 4,
+        count: 3,
       },
     ],
   });

diff --git a/e2e/cypress/integration/vue/prod.spec.ts b/e2e/cypress/integration/vue/prod.spec.ts
@@ -11,7 +11,7 @@ context('Vue app in prod mode', () => {
         text: 'This is a key',
         count: 5,
       },
-      { text: 'This is key with params value value2', count: 4 },
+      { text: 'This is key with params value value2', count: 3 },
     ],
     de: [
       { text: 'This is default', count: 2 },
@@ -21,7 +21,7 @@ context('Vue app in prod mode', () => {
       },
       {
         text: 'Dies ist ein Schlüssel mit den Parametern value value2',
-        count: 4,
+        count: 3,
       },
     ],
   });

diff --git a/packages/core/src/Observer.ts b/packages/core/src/Observer.ts
@@ -10,12 +10,17 @@ export class Observer {
   ) {}
 
   private _observer = undefined;
+  private _observing = false;
 
   private get observer(): MutationObserver | undefined {
     if (!this._observer && typeof window !== 'undefined') {
       this._observer = new MutationObserver(
         async (mutationsList: MutationRecord[]) => {
           for (const mutation of mutationsList) {
+            if (!this._observing) {
+              // make sure we don't touch the DOM after disconnect is called
+              return;
+            }
             if (mutation.type === 'characterData') {
               await this.textWrapper.handleText(mutation.target as Element);
               continue;
@@ -41,6 +46,10 @@ export class Observer {
     if (!this.observer) {
       return;
     }
+    if (this._observing) {
+      throw new Error('Tolgee: Observer is already running');
+    }
+    this._observing = true;
     this.observer.observe(this.properties.config.targetElement, {
       attributes: true,
       childList: true,
@@ -53,6 +62,7 @@ export class Observer {
     if (!this.observer) {
       return;
     }
+    this._observing = false;
     this.observer.disconnect();
   }
 }