# Usages

# Browser

<script type="module">
import { TranslateMutationObserver } from 'https://unpkg.com/translate-mutation-observer@^1/dist/index.js';
TranslateMutationObserver.n((str) => str.toLocaleLowerCase());
document.body.innerText = "TEST";
</script>
<body></body>

# Translate Without Observer

import { NodeTranslator } from 'translate-mutation-observer';

const t = (str: string) => str;
const translateMutationObserver = new NodeTranslator(t);
await translateMutationObserver.translate(document.documentElement);

# Basic

import { TranslateMutationObserver } from 'translate-mutation-observer';

// some translate function that take a full string and translate it
const t = (str: string) => str;
TranslateMutationObserver.n(t);

# Translate Each Character

import { TranslateMutationObserver } from 'translate-mutation-observer';

const t = (str: string) => str.split('').map((s) => s).join();
TranslateMutationObserver.n(t);

# Async Translate

Make sure handle all exception on translation function

import { TranslateMutationObserver } from 'translate-mutation-observer';

const t = async (str: string) => {
  try {
    return await fetch('some-api').then((r) => r.text());
  } catch (e) {
    console.error(e);
    return str;
  }
};
TranslateMutationObserver.n(t);

# Trigger Translation for document.body

import { TranslateMutationObserver } from 'translate-mutation-observer';

const t = (str: string) => str;
const translateMutationObserver = TranslateMutationObserver.n(t);
await translateMutationObserver.translate();

# Translate Entire Document

import { TranslateMutationObserver } from 'translate-mutation-observer';

const t = (str: string) => str;
// default only document.body will be translated
TranslateMutationObserver.n(t, { targets: [document.documentElement] });

# Filter Attributes

by default it will not translate any attribute content

import { TranslateMutationObserver } from 'translate-mutation-observer';

TranslateMutationObserver.n((str: string) => str, {
  filterAttribute(attribute: Attr, node: Element) {
    // return true to translate
    // return false to skip
    return ['title', 'alt'].includes(attribute.name) || attribute.name.startsWith('aria-');
  },
});

# Filter

import { TranslateMutationObserver } from 'translate-mutation-observer';

TranslateMutationObserver.n((str: string) => str, {
  filter(node: Node) {
    // if element contains class of .do-not-translate
    if (node instanceof Element && node.classList.contains('do-not-translate')) {
      // false to skip
      return false;
    }

    // true to translate
    return true;
  },
});

# Function Parameters

import { TranslateMutationObserver } from 'translate-mutation-observer';

const t = (str: string, { node }: { node: Node }) => {
  if (node.nodeType === node.TEXT_NODE) {
    // handle node type is text
  } else {
    // translating attributes
  }
  return str;
};
TranslateMutationObserver.n(t);

# Translate To Simplified Chinese Using External Library

import { sify } from 'chinese-conv';
import { TranslateMutationObserver } from 'translate-mutation-observer';

TranslateMutationObserver.n(sify);

# vue

App.vue

import { Vue } from 'vue-class-component';
import { sify } from 'chinese-conv';
import { TranslateMutationObserver } from 'translate-mutation-observer';

export default class extends Vue {
  public beforeCreate() {
     if (this.$i18n.locale === 'zh-CN') {
      // make sure vue-router title translate as well
      TranslateMutationObserver.n(sify, { targets: [document.body, ...document.getElementsByTagName('title')] });
    }
  }
}

← Getting Started