handle multipart

Author: Sebi Nemeth

dist/index.d.ts

@@ -2,6 +2,7 @@ export type TranslationMeta = {
     locale: string;
     message: string;
     values?: object;
+    choice?: number;
     path: string;
 };
 type LiveTranslatorPluginOptions = {

dist/index.js

@@ -75,12 +75,17 @@ 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);
+            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;

src/demo/App.vue

@@ -14,24 +14,35 @@
         <br>
         Live Translator Plugin
         <br>
-        <small>demo application</small>
+        <small>demo app</small>
       </h1>
+      <p>
+        This is a demo app and development test page for the plugin. To turn the plugin on/off, click the <b>LT</b> button
+        in the top left corner. Localized strings appear in <span class="translated">red</span>.
+      </p>
       <div class="selector">
         <button :class="{ active: locale === 'en' }" @click="locale = 'en'">English</button>
         <button :class="{ active: locale === 'hu' }" @click="locale = 'hu'">Hungarian</button>
       </div>
       <h3>Simple string</h3>
-      <p>{{ $t('LTPlugin.HelloWorld') }}</p>
+      <p class="translated">{{ $t('LTPlugin.HelloWorld') }}</p>
       <h3>Interplolation</h3>
-      <p>{{ $t('LTPlugin.WelcomeToLT', { app: 'Live Translator Plugin'}) }}</p>
+      <p class="translated">{{ $t('LTPlugin.WelcomeToLT', { app: 'Live Translator Plugin' }) }}</p>
       <h3>Plurals</h3>
       <input class="plural" type="number" min="0" step="1" v-model="pluralCount">
-      <br>
-      {{ $t('LTPlugin.Messages', pluralCount) }}
-      <br>
-      {{ $t('LTPlugin.MessagesCount', pluralCount) }}
+      <p class="translated">
+        {{ $t('LTPlugin.Messages', pluralCount) }}
+      </p>
+      <p class="translated">
+        {{ $t('LTPlugin.MessagesCount', pluralCount) }}
+      </p>
+      <h3>Multiple strings inside one tag</h3>
+      <p class="translated">
+        {{ t('LTPlugin.PartOne') }} {{ $t('LTPlugin.PartTwo') }}
+      </p>
       <h3>Attribute</h3>
-      <img class="image" src="https://source.unsplash.com/random/500x500" :alt="t('LTPlugin.Attrs.ImageAlt')" :title="t('LTPlugin.Attrs.ImageTitle')">
+      <img class="image" src="https://source.unsplash.com/random/500x500" :alt="t('LTPlugin.Attrs.ImageAlt')"
+        :title="t('LTPlugin.Attrs.ImageTitle')">
     </div>
   </div>
 </template>
@@ -44,19 +55,26 @@ const { t, locale } = useI18n()
 const pluralCount = ref(1)
 const showMeta = computed(() => {
   const params = new URLSearchParams(location.search)
-  if (params.get('meta')) {
-    return JSON.parse(decodeURIComponent(params.get('meta')))
+  const meta = params.get('meta')
+  if (meta) {
+    return JSON.parse(decodeURIComponent(meta))
   }
   return null
 })
 
 </script>
 
 <style lang="scss" scoped>
+.translated {
+  color: rgb(161, 0, 0);
+}
+
 .show-meta {
   table {
     text-align: left;
-    th, td {
+
+    th,
+    td {
       padding: 4px 8px;
     }
   }

src/demo/lang/en.json

@@ -7,6 +7,8 @@
         "Attrs": {
             "ImageAlt": "Image alt",
             "ImageTitle": "Image title"
-        }
+        },
+        "PartOne": "Part one",
+        "PartTwo": "Part two"
     }
 }

src/demo/lang/hu.json

@@ -7,6 +7,8 @@
         "Attrs": {
             "ImageAlt": "Képleírás",
             "ImageTitle": "Képcím"
-        }
+        },
+        "PartOne": "Első rész",
+        "PartTwo": "Második rész"
     }
 }

src/index.ts

@@ -65,6 +65,7 @@ export type TranslationMeta = {
   locale: string,
   message: string,
   values?: object,
+  choice?: number,
   path: string,
 }
 
@@ -88,14 +89,19 @@ 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,
-        } as TranslationMeta),
-      )
-      set(localeMessages, path, meta+message)
+      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,
+          } as TranslationMeta),
+        )
+        parts[i] = meta + parts[i]
+      }
+      set(localeMessages, path, parts.join(' | '))
     })
   })
   return messages