@ 流利/ dom

@fluent/dom 提供 DOM 绑定 项目流利。 。 。 .

安装

@fluent/dom 可以在客户端和服务器端使用。 你个 可以从 npm 注册处安装或用作独立的脚本( 作为 FluentDOM 联合国.

npm install @fluent/dom

如何使用

这个 DOMLocalization 构造器提供了 完全返回已准备好的消息格式化。 用懒惰的解药 FluentBundle 对象从 @fluent/bundle 用于格式化消息的软件包.

除此之外, DOMLocalization 可以通过 识别可本地化元素 data-l10n-id 并翻译他们.

import { DOMLocalization } from "@fluent/dom";

const l10n = new DOMLocalization(
  ["/browser/main.ftl", "/toolkit/menu.ftl"],
  generateBundles
);

l10n.connectRoot(document.documentElement);

l10n.translateRoots();

const h1 = document.querySelector("h1");

// Sets `data-l10n-id` and `data-l10n-args` which triggers
// the `MutationObserver` from `DOMLocalization` and translates the
// element.
l10n.setAttributes(h1, "welcome", { user: "Anna" });

对于JS代码的强制使用,还有一个 Localization 类,仅提供运行代码中格式化消息所需的API.

import { Localization } from "@fluent/dom";

function* generateBundles() {
  // Some lazy logic for yielding FluentBundles.
  yield* [bundle1, bundle2];
}

const l10n = new Localization(
  document,
  ["/browser/main.ftl", "/toolkit/menu.ftl"],
  generateBundles
);

async function main() {
  const msg = await l10n.formatValue("welcome", { name: "Anna" });
  // → 'Welcome, Anna!'
}