Merge branch 'main' into develop

Author: Sebi Nemeth

.github/workflows/pages.yml

@@ -0,0 +1,40 @@
+name: GH Pages Demo app
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+      - run: npm ci
+      - run: npm run build:demo
+      - name: Upload Artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: './dist-demo'
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{steps.deployment.outputs.page_url}}
+    permissions:
+      id-token: write
+      pages: write
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "i18n-ally.localesPaths": [
+        "src/demo/lang"
+    ]
+}

README.md

@@ -1,16 +1,40 @@
-# Live Translator Plugin for Vue 2
+# 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.
+
+## Demo
+Find a live demo app at: [https://apicore-engineering.github.io/vue-i18n-live-translator-plugin/](https://apicore-engineering.github.io/vue-i18n-live-translator-plugin/)
 
 ## Install
 ```bash
 npm i -s https://github.com/apicore-engineering/vue-i18n-live-translator-plugin
 ```
 
 ## Use
+Encode locale messages before passing them to `createI18n`:
 ```typescript
-import LiveTranslatorPlugin, { TranslationMeta } from 'vue-i18n-live-translator-plugin'
+// i18n.ts
+import { createI18n } from 'vue-i18n'
+import { encodeMessages } from 'vue-i18n-live-translator-plugin'
 
-Vue.use(LiveTranslatorPlugin, {
-    i18n,
+export const i18n = createI18n({
+  // ...
+  messages: encodeMessages(messages),
+})
+```
+Use plugin to decode info from locale messages:
+```typescript
+// main.ts
+import { LiveTranslatorPlugin, TranslationMeta } from 'vue-i18n-live-translator-plugin'
+
+// const app = createApp(App)
+// app.use(i18n)
+// ...
+
+app.use(LiveTranslatorPlugin, {
     translationLink (meta: TranslationMeta) {
         return '' // your platform-specific link to the translation software
     },
@@ -37,4 +61,7 @@ npm install
 ```
 ```bash
 husky install
+```
+```bash
+npm run dev # demo & dev app with vite
 ```

dist/index.d.ts

@@ -1,15 +1,15 @@
-import VueI18n from 'vue-i18n';
 export type TranslationMeta = {
     locale: string;
     message: string;
     values?: object;
+    choice?: number;
     path: string;
 };
 type LiveTranslatorPluginOptions = {
-    i18n: VueI18n;
     translationLink: (meta: TranslationMeta) => string;
     persist?: boolean;
 };
+export declare function encodeMessages(messagesObject: any): any;
 export declare const LiveTranslatorPlugin: {
     install(app: any, options: LiveTranslatorPluginOptions): void;
 };

dist/index.js

@@ -1,4 +1,7 @@
 import throttle from 'lodash/throttle';
+import forIn from 'lodash/forIn';
+import cloneDeep from 'lodash/cloneDeep';
+import set from 'lodash/set';
 const css = `
 .live-translator-enable-button {
   position: fixed !important;
@@ -56,7 +59,50 @@ const css = `
   background: #00c0ff !important;
   box-shadow: 0px 0px 5px #00c0ff !important;
 }
+.live-translator-box {
+  outline: solid 2px green;
+  background: green;
+  opacity: 0.1;
+  position: absolute;
+  border-radius: 4px;
+  z-index: 9999;
+  display: none;
+}
+.live-translator-box.attribute {
+  outline: solid 2px blue;
+  background: blue;
+}
 `;
+function deepForIn(object, fn) {
+    const iteratee = (v, k) => {
+        if (typeof v === 'object') {
+            forIn(v, (childV, childK) => iteratee(childV, `${k}.${childK}`));
+        }
+        else {
+            fn(v, k);
+        }
+    };
+    forIn(object, iteratee);
+}
+export function encodeMessages(messagesObject) {
+    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(' | '));
+        });
+    });
+    return messages;
+}
 class ZeroWidthEncoder {
     static START = '\u200B';
     static ZERO = '\u200C';
@@ -110,6 +156,7 @@ class LiveTranslatorManager {
     _options;
     _enableButton;
     _indicator;
+    _box;
     constructor(options) {
         this._enabled = false;
         this._options = options;
@@ -134,35 +181,14 @@ class LiveTranslatorManager {
         this._enableButton.appendChild(this._indicator);
         this._enableButton.addEventListener('click', () => {
             this.toggle();
-            this.refreshI18n();
             this.render();
         });
         document.body.appendChild(this._enableButton);
+        this._box = document.createElement('div');
+        this._box.classList.add('live-translator-box');
+        document.body.appendChild(this._box);
         // initialize encode
-        const originalFormatter = this._options.i18n.formatter;
-        const self = this;
-        this._options.i18n.formatter = {
-            interpolate(message, values, path) {
-                const original = originalFormatter.interpolate(message, values, path);
-                let meta = '';
-                try {
-                    // filter nested objects, replace inner objects with string 'object'
-                    // this is needed when values from <i18n> tags are circular dependent objects
-                    const filteredValues = Object.fromEntries(Object.entries(values || {})
-                        .map(([key, value]) => [key, typeof value !== 'object' ? value : 'object']));
-                    meta = ZeroWidthEncoder.encode(JSON.stringify({
-                        message,
-                        values: filteredValues,
-                        path,
-                        locale: self._options.i18n.locale,
-                    }));
-                }
-                catch (exception) {
-                    console.warn(message, values, path, self._options.i18n.locale, exception);
-                }
-                return (original && meta && self._enabled) ? [meta, ...original] : original;
-            },
-        };
+        // encode is moved to i18n.ts file
         // initialize decode & render
         const throttler = throttle(() => this.render(), 800);
         const observer = new MutationObserver(throttler);
@@ -173,15 +199,10 @@ class LiveTranslatorManager {
             childList: false,
         });
         document.documentElement.addEventListener('mousemove', throttler);
+        window.setInterval(throttler, 1000);
         // render for the first time
-        this.refreshI18n();
         this.render();
     }
-    refreshI18n() {
-        const originalLocale = this._options.i18n.locale;
-        this._options.i18n.locale = '';
-        this._options.i18n.locale = originalLocale;
-    }
     toggle(enable) {
         if (enable !== undefined) {
             this._enabled = enable;
@@ -196,6 +217,7 @@ class LiveTranslatorManager {
     }
     render() {
         const badgeWrappers = document.querySelectorAll('.live-translator-badge-wrapper');
+        this._box.style.display = 'none';
         badgeWrappers.forEach((wrapper) => {
             wrapper.remove();
         });
@@ -209,11 +231,14 @@ class LiveTranslatorManager {
             const node = queue.pop();
             const badges = [];
             const parent = node.parentElement;
+            const rect = getBoundingClientRect(node);
             if (node instanceof Text) {
                 const matches = node.textContent.match(re);
                 for (const match of matches ?? []) {
                     const meta = JSON.parse(ZeroWidthEncoder.decode(match));
-                    badges.push(createBadge(meta, this._options));
+                    const badge = createBadge(meta, this._options, node);
+                    badge.addEventListener('mouseenter', () => this.showBox(node));
+                    badges.push(badge);
                 }
             }
             const attributes = (node.attributes ? [...node.attributes] : [])
@@ -222,7 +247,9 @@ class LiveTranslatorManager {
             for (const { attribute, match } of attributes) {
                 for (const m of match) {
                     const meta = JSON.parse(ZeroWidthEncoder.decode(m));
-                    badges.push(createBadge(meta, this._options, attribute.name));
+                    const badge = createBadge(meta, this._options, node, attribute.name);
+                    badge.addEventListener('mouseenter', () => this.showBox(node, true));
+                    badges.push(badge);
                 }
             }
             if (badges.length) {
@@ -231,8 +258,11 @@ class LiveTranslatorManager {
                     container = node.previousElementSibling;
                 }
                 else {
+                    const parentRect = getBoundingClientRect(node instanceof Text ? parent : node);
                     container = document.createElement('span');
                     container.classList.add('live-translator-badge-container');
+                    container.style.top = rect.top - parentRect.top + 'px';
+                    container.style.left = rect.left - parentRect.left + 'px';
                     const relativeWrapper = document.createElement('span');
                     relativeWrapper.classList.add('live-translator-badge-wrapper');
                     relativeWrapper.appendChild(container);
@@ -247,8 +277,26 @@ class LiveTranslatorManager {
             }
         }
     }
+    showBox(node, attribute = false) {
+        const rect = !attribute ? getBoundingClientRect(node) : node.getClientRects()[0];
+        if (!rect) {
+            return;
+        }
+        if (attribute) {
+            this._box.classList.add('attribute');
+        }
+        else {
+            this._box.classList.remove('attribute');
+        }
+        const padding = 2;
+        this._box.style.top = rect.top - padding + window.scrollY + 'px';
+        this._box.style.left = rect.left - padding + window.scrollX + 'px';
+        this._box.style.width = rect.width + 2 * padding + 'px';
+        this._box.style.height = rect.height + 2 * padding + 'px';
+        this._box.style.display = 'block';
+    }
 }
-const createBadge = (meta, options, attribute) => {
+const createBadge = (meta, options, node, attribute) => {
     const badge = document.createElement('a');
     badge.classList.add('live-translator-badge');
     let title = meta.path + ': ' + meta.message;
@@ -269,6 +317,11 @@ const createBadge = (meta, options, attribute) => {
     });
     return badge;
 };
+function getBoundingClientRect(node, textOffset) {
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    return range.getBoundingClientRect();
+}
 export const LiveTranslatorPlugin = {
     install(app, options) {
         console.log('LiveTranslator is installed');

index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue i18n Live Translator plugin</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/demo/main.ts"></script>
+  </body>
+</html>