Internationalization

Stream Dock supports multiple languages.

The manifest contains several strings that can be internationalized. You can provide translations in a JSON file named en.json located next to the manifest.json.

{
  "Description": "Test", 
  "Name": "Test", 
  "Category": "Test", 
  "com.mirabox.demo.action1": {
    "Name": "Test", 
    "Tooltip": "Test"
  },
  "Localization": {
    "test": "Test"
  }
}

Please note that if you do not provide localized strings, the strings in the manifest.json file will be used. Stream Dock supports the following languages:

• Chinese: zh_CN.json

• German: de.json

• English: en.json

• French: fr.json

• Japanese: ja.json

• Korean: ko.json

• Spanish: es.json

You can also provide your own strings in the JSON files.

These files must be saved in the plugin's directory. You will find an example in the template plugin. Here is an example of the file: en.json

For information on how to automatically localize strings in the Property Inspector.

{
  "Description": "Test", 
  "Name": "Test", 
  "Category": "Test", 
  "com.mirabox.demo.action1": {
    "Name": "Test", 
    "Tooltip": "Test"
  },
  "Localization": {
    "test": "Test"
  }
}

For standard JS templates, if you need to display strings in an internationalized form within your plugin, you only need to write the corresponding keys from Localization directly in your Property Inspector's index.js and set $local = true. The SDK will automatically handle the translation.

 if (!$local) return;
    $lang = await new Promise(resolve => {
        const req = new XMLHttpRequest();
        req.open('GET', `../../${JSON.parse(app).application.language}.json`);
        req.send();
        req.onreadystatechange = () => {
            if (req.readyState === 4) {
                resolve(JSON.parse(req.responseText).Localization);
            }
        };
    });

    const walker = document.createTreeWalker($dom.main, NodeFilter.SHOW_TEXT, (e) => {
        return e.data.trim() && NodeFilter.FILTER_ACCEPT;
    });
    while (walker.nextNode()) {
        console.log(walker.currentNode.data);
        walker.currentNode.data = $lang[walker.currentNode.data];
    }
    // placeholder
    const translate = item => {
        if (item.placeholder?.trim()) {
            console.log(item.placeholder);
            item.placeholder = $lang[item.placeholder];
        }
    };
    $('input', true).forEach(translate);
    $('textarea', true).forEach(translate);

For Vue templates, You need to define these strings in src/hooks/i18n.ts and manually import useI18nStore where needed.

export const useI18nStore = () => {
  const language = window.argv[3].application.language;
  const localString = {
    en: {
      test: 'test'
    },
    zh_CN: {
      test: '测试'
    }
  };
  return localString[language] || localString['en'];
};

Example:

<script setup lang="ts">
  import { usePropertyStore, useWatchEvent } from '@/hooks/property';
  import { useI18nStore } from '@/hooks/i18n';

  const i18n = useI18nStore();
  const property = usePropertyStore();
  useWatchEvent({
    didReceiveSettings(data) {},
    sendToPropertyInspector(data) {}
  });
</script>

<template>
  <div>{{ i18n.test }}</div>
</template>