int vue3 & demo app

Author: Sebi Nemeth

.vscode/settings.json

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

dist/demo/i18n.d.ts

@@ -0,0 +1 @@
+export declare const i18n: import("vue-i18n").I18n<any, {}, {}, string, false>;

dist/demo/i18n.js

@@ -0,0 +1,13 @@
+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,
+    }),
+});

dist/demo/lang/en.json

@@ -0,0 +1,12 @@
+{
+    "LTPlugin": {
+        "HelloWorld": "Hello world",
+        "WelcomeToLT": "Welcome to {app}",
+        "Messages": "You have no messages | You have a message | You have more messages",
+        "MessagesCount": "{n} message | {n} messages",
+        "Attrs": {
+            "ImageAlt": "Image alt",
+            "ImageTitle": "Image title"
+        }
+    }
+}

dist/demo/lang/hu.json

@@ -0,0 +1,12 @@
+{
+    "LTPlugin": {
+        "HelloWorld": "Szia világ",
+        "WelcomeToLT": "Üdvözöl a(z) {app}",
+        "Messages": "Nincs új üzeneted | Egy új üzenet | Több új üzenet",
+        "MessagesCount": "{n} új üzenet",
+        "Attrs": {
+            "ImageAlt": "Képleírás",
+            "ImageTitle": "Képcím"
+        }
+    }
+}

dist/demo/main.d.ts

@@ -0,0 +1 @@
+import './style.css';

dist/demo/main.js

@@ -0,0 +1,14 @@
+import { createApp } from 'vue';
+import './style.css';
+import App from './App.vue';
+import { i18n } from './i18n';
+import { LiveTranslatorPlugin } from '../index';
+const app = createApp(App);
+app.use(i18n);
+app.use(LiveTranslatorPlugin, {
+    translationLink(meta) {
+        return `?meta=${encodeURIComponent(JSON.stringify(meta))}`;
+    },
+    persist: true,
+});
+app.mount('#app');

dist/index.d.ts

@@ -1,15 +1,14 @@
-import VueI18n from 'vue-i18n';
 export type TranslationMeta = {
     locale: string;
     message: string;
     values?: object;
     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;
@@ -57,6 +60,31 @@ const css = `
   box-shadow: 0px 0px 5px #00c0ff !important;
 }
 `;
+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 meta = ZeroWidthEncoder.encode(JSON.stringify({
+                locale,
+                message,
+                path,
+            }));
+            set(localeMessages, path, meta + message);
+        });
+    });
+    return messages;
+}
 class ZeroWidthEncoder {
     static START = '\u200B';
     static ZERO = '\u200C';
@@ -134,35 +162,11 @@ class LiveTranslatorManager {
         this._enableButton.appendChild(this._indicator);
         this._enableButton.addEventListener('click', () => {
             this.toggle();
-            this.refreshI18n();
             this.render();
         });
         document.body.appendChild(this._enableButton);
         // 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);
@@ -174,14 +178,8 @@ class LiveTranslatorManager {
         });
         document.documentElement.addEventListener('mousemove', throttler);
         // 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;

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>