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 (under the files section). 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, refer to the Property Inspector documentation.

{
  "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 HTML and set $local = true. The SDK will automatically handle the translation.

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

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

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>