Merge pull request #5 from apicore-engineering/develop

sebinemeth · web-flow · commit 908aad30a65b · 2024-01-11T21:42:50.000+01:00
Implement badge cache, move encode to plugin
diff --git a/README.md b/README.md
@@ -1,7 +1,4 @@
 # Live Translator Plugin for Vue i18n
-> [!WARNING]  
-> Plugin has been updated to Vue 3 only. To use with Vue 2 please use the legacy `vue2` branch.
-
 > [!WARNING]  
 > This plugin makes significant changes to the DOM, possibly messing up your layout and appearance. We advise you **NOT TO USE IT IN PRODUCTION**, only in development and staging instances.
 
@@ -14,32 +11,27 @@ npm i -s https://github.com/apicore-engineering/vue-i18n-live-translator-plugin
 ```
 
 ## Use
-Encode locale messages before passing them to `createI18n`:
-```typescript
-// i18n.ts
-import { createI18n } from 'vue-i18n'
-import { encodeMessages } from 'vue-i18n-live-translator-plugin'
-
-export const i18n = createI18n({
-  // ...
-  messages: encodeMessages(messages),
-})
-```
-Use plugin to decode info from locale messages:
 ```typescript
 // main.ts
+import { i18n } from './i18n'
 import { LiveTranslatorPlugin, TranslationMeta } from 'vue-i18n-live-translator-plugin'
 
-// const app = createApp(App)
-// app.use(i18n)
-// ...
+const app = createApp(App)
+app.use(i18n)
 
 app.use(LiveTranslatorPlugin, {
+    i18n,                                 // i18n instance
     translationLink (meta: TranslationMeta) {
-        return '' // your platform-specific link to the translation software
+        // your platform-specific link to the translation software
+        return ''
     },
     persist: true,
+    root: document.getElementById('app'), // root of your vue app, this is where the plugin looks for translated strings. defaults to document.documentElement
+    refreshRate: 100,                     // max refresh rate (ms)
+    checkVisibility: true,                // hide elements that are covered
 })
+
+app.mount('#app')
 ```
 
 ## Weblate example
diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -6,13 +6,13 @@ export type TranslationMeta = {
     path: string;
 };
 type LiveTranslatorPluginOptions = {
+    i18n: any;
     translationLink: (meta: TranslationMeta) => string;
     persist?: boolean;
     root?: HTMLElement;
     refreshRate?: number;
     checkVisibility?: boolean;
 };
-export declare function encodeMessages(messagesObject: any): any;
 export declare const LiveTranslatorPlugin: {
     install(app: any, options: LiveTranslatorPluginOptions): void;
 };
diff --git a/dist/index.js b/dist/index.js
@@ -5,23 +5,26 @@ import set from 'lodash/set';
 const css = `
 .live-translator-enable-button {
   position: fixed !important;
-  top: 0;
-  left: 0;
+  top: 2px;
+  left: 2px;
   z-index: 10000;
   padding: 2px;
   color: black;
   background: rgba(255, 255, 255, 0.6);
   font-family: sans-serif;
   font-size: 8px;
+  border-radius: 10px;
+  display: flex;
+  gap: 2px;
+  align-items: center;
 }
 .live-translator-enable-button:hover {
   background: white;
 }
 .live-translator-enable-button-indicator {
   display: inline-block;
-  height: 6px;
-  width: 6px;
-  margin-left: 2px;
+  height: 10px;
+  width: 10px;
   border-radius: 100%;
   background-color: red;
 }
@@ -82,22 +85,20 @@ function deepForIn(object, fn) {
     };
     forIn(object, iteratee);
 }
-export function encodeMessages(messagesObject) {
+function encodeMessages(messagesObject, locale) {
     const messages = cloneDeep(messagesObject);
-    forIn(messages, (localeMessages, locale) => {
-        deepForIn(localeMessages, (message, path) => {
-            const parts = message.split('|').map(part => part.trim());
-            for (let i = 0; i < parts.length; i++) {
-                const meta = ZeroWidthEncoder.encode(JSON.stringify({
-                    locale,
-                    message,
-                    path,
-                    choice: i || undefined,
-                }));
-                parts[i] = meta + parts[i];
-            }
-            set(localeMessages, path, parts.join(' | '));
-        });
+    deepForIn(messages, (message, path) => {
+        const parts = message.split('|').map(part => part.trim());
+        for (let i = 0; i < parts.length; i++) {
+            const meta = ZeroWidthEncoder.encode(JSON.stringify({
+                locale,
+                message,
+                path,
+                choice: i || undefined,
+            }));
+            parts[i] = meta + parts[i];
+        }
+        set(messages, path, parts.join(' | '));
     });
     return messages;
 }
@@ -149,13 +150,40 @@ class ZeroWidthEncoder {
         return text;
     }
 }
+class Cache {
+    _cache = {};
+    has(key) {
+        return key in this._cache;
+    }
+    store(key, value) {
+        this._cache[key] = { value, locked: true };
+    }
+    lock(key) {
+        this._cache[key].locked = true;
+    }
+    clear(force = false) {
+        for (const key in this._cache) {
+            if (!force && this._cache[key].locked) {
+                this._cache[key].locked = false;
+            }
+            else {
+                this._cache[key].value.remove();
+                delete this._cache[key];
+            }
+        }
+    }
+    get length() {
+        return Object.keys(this._cache).length;
+    }
+}
 class LiveTranslatorManager {
     _enabled;
     _options;
     _enableButton;
     _indicator;
     _box;
     _wrapper;
+    _cache = new Cache();
     constructor(options) {
         this._enabled = false;
         this._options = options;
@@ -190,7 +218,11 @@ class LiveTranslatorManager {
         this._box.classList.add('live-translator-box');
         this._wrapper.appendChild(this._box);
         // initialize encode
-        // encode is moved to i18n.ts file
+        for (const locale of this.i18n.availableLocales) {
+            let messages = this.i18n.getLocaleMessage(locale);
+            messages = encodeMessages(messages, locale);
+            this.i18n.setLocaleMessage(locale, messages);
+        }
         // initialize decode & render
         const throttler = throttle(() => this.render(), this._options.refreshRate || 50);
         const observer = new MutationObserver(throttler);
@@ -208,6 +240,9 @@ class LiveTranslatorManager {
     get root() {
         return this._options.root || document.documentElement;
     }
+    get i18n() {
+        return this._options.i18n.global || this._options.i18n;
+    }
     toggle(enable) {
         if (enable !== undefined) {
             this._enabled = enable;
@@ -219,14 +254,11 @@ class LiveTranslatorManager {
             localStorage.setItem('live-translator-enabled', JSON.stringify(this._enabled));
         }
         console.log(`%c Live Translator ${this._enabled ? 'ON' : 'OFF'} `, 'background: #222; color: #bada55');
+        if (!this._enabled) {
+            this._cache.clear(true);
+        }
     }
     render() {
-        this._box.style.display = 'none';
-        document.
-            querySelectorAll('.live-translator-badge-container').
-            forEach((elem) => {
-            elem.remove();
-        });
         this._indicator.style.background = this._enabled ? 'lightgreen' : 'red';
         if (!this._enabled) {
             return;
@@ -236,13 +268,16 @@ class LiveTranslatorManager {
         while (queue.length > 0) {
             const node = queue.pop();
             const badges = [];
+            let cacheKeyParts = [];
             if (node instanceof Text) {
                 const matches = node.textContent.match(re);
                 for (const match of matches ?? []) {
                     const meta = JSON.parse(ZeroWidthEncoder.decode(match));
                     const badge = createBadge(meta, this._options, node);
                     badge.addEventListener('mouseenter', () => this.showBox(node));
+                    badge.addEventListener('mouseleave', () => this.hideBox());
                     badges.push(badge);
+                    cacheKeyParts.push(meta.path);
                 }
             }
             const attributes = (node.attributes ? [...node.attributes] : [])
@@ -253,7 +288,9 @@ class LiveTranslatorManager {
                     const meta = JSON.parse(ZeroWidthEncoder.decode(m));
                     const badge = createBadge(meta, this._options, node, attribute.name);
                     badge.addEventListener('mouseenter', () => this.showBox(node, true));
+                    badge.addEventListener('mouseleave', () => this.hideBox());
                     badges.push(badge);
+                    cacheKeyParts.push(meta.path);
                 }
             }
             if (badges.length) {
@@ -264,13 +301,19 @@ class LiveTranslatorManager {
                         const clientRect = getBoundingClientRect(node);
                         position.top = clientRect.top + window.scrollY;
                         position.left = clientRect.left + window.screenX;
-                        isVisible = isVisible || node.parentElement.contains(document.elementFromPoint(clientRect.left + clientRect.width / 2, clientRect.top + clientRect.height / 2));
+                        const elemOnTop = document.elementFromPoint(clientRect.left + clientRect.width / 2, clientRect.top + clientRect.height / 2);
+                        isVisible = isVisible ||
+                            node.parentElement.contains(elemOnTop) ||
+                            this._wrapper.contains(elemOnTop);
                     }
                     else {
                         const clientRect = node.getClientRects()[0];
                         position.top = clientRect.top + clientRect.height - 10 + window.scrollY;
                         position.left = clientRect.left + window.screenX;
-                        isVisible = isVisible || node.contains(document.elementFromPoint(clientRect.left + clientRect.width / 2, clientRect.top + clientRect.height / 2));
+                        const elemOnTop = document.elementFromPoint(clientRect.left + clientRect.width / 2, clientRect.top + clientRect.height / 2);
+                        isVisible = isVisible ||
+                            node.contains(elemOnTop) ||
+                            this._wrapper.contains(elemOnTop);
                     }
                     if (!isVisible) {
                         continue;
@@ -280,19 +323,28 @@ class LiveTranslatorManager {
                     // console.warn('Could not get bounding box for', node);
                     continue;
                 }
-                const container = document.createElement('span');
-                container.classList.add('live-translator-badge-container');
-                container.style.top = position.top + 'px';
-                container.style.left = position.left + 'px';
-                this._wrapper.appendChild(container);
-                for (const badge of badges) {
-                    container.appendChild(badge);
+                cacheKeyParts.unshift(position.left, position.top);
+                const cacheKey = cacheKeyParts.join(';');
+                if (!this._cache.has(cacheKey)) {
+                    const container = document.createElement('span');
+                    container.classList.add('live-translator-badge-container');
+                    container.style.top = position.top + 'px';
+                    container.style.left = position.left + 'px';
+                    this._wrapper.appendChild(container);
+                    for (const badge of badges) {
+                        container.appendChild(badge);
+                    }
+                    this._cache.store(cacheKey, container);
+                }
+                else {
+                    this._cache.lock(cacheKey);
                 }
             }
             for (const child of node.childNodes) {
                 queue.push(child);
             }
         }
+        this._cache.clear();
     }
     showBox(node, attribute = false) {
         const rect = !attribute ? getBoundingClientRect(node) : node.getClientRects()[0];
@@ -312,6 +364,9 @@ class LiveTranslatorManager {
         this._box.style.height = rect.height + 2 * padding + 'px';
         this._box.style.display = 'block';
     }
+    hideBox() {
+        this._box.style.display = 'none';
+    }
 }
 const createBadge = (meta, options, node, attribute) => {
     const badge = document.createElement('a');
diff --git a/src/demo/i18n.ts b/src/demo/i18n.ts
@@ -1,14 +1,10 @@
 import { createI18n } from "vue-i18n"
 import en from './lang/en.json'
 import hu from './lang/hu.json'
-import { encodeMessages } from ".."
 
 export const i18n = createI18n({
   legacy: false,
   locale: 'en',
   fallbackLocale: 'en',
-  messages: encodeMessages({
-    en,
-    hu,
-  }),
+  messages: { en, hu },
 })
diff --git a/src/demo/main.ts b/src/demo/main.ts
@@ -8,12 +8,13 @@ const app = createApp(App)
 app.use(i18n)
 
 app.use(LiveTranslatorPlugin, {
+  i18n,
   translationLink(meta: TranslationMeta) {
     return `?meta=${encodeURIComponent(JSON.stringify(meta))}`
   },
   persist: true,
   root: document.getElementById('app'),
-  refreshRate: 50,
+  refreshRate: 100,
   checkVisibility: true,
 })
 
diff --git a/src/index.ts b/src/index.ts
