Add support for the Drupal Twig t and trans filters in combination with the String module and Twig.js.
Add the package to your dependencies:
npm install --save-dev twig twig-drupal-stringCrate a file called strings.yaml with the following content:
welcome:
default: WelcomeThen create render-template.mjs:
import Twig from "twig";
import { twigDrupalString } from "twig-drupal-string";
twigDrupalString({
Twig,
files: ["strings.yaml"],
});
const data = `<h1>{{ 'welcome'|t }}</h1>`;
const template = Twig.twig({ data });
const output = template.render();
console.log(output);Run the example with:
node render-template.mjs
# The output is:
# <h1>Welcome</h1>The filter also supports placeholders inside the strings that will be replaced with dynamic data during template rendering.
Add the following to strings.yaml:
greeting:
default: Hello @nameThen adjust the template inside render-template.mjs:
const data = `<h1>{{ 'greeting'|t({'@name': 'world'}) }}</h1>`;
const template = Twig.twig({ data });
const output = template.render();
// Output will be:
// <h1>Hello world</h1>By default, the filter names t and trans are supported. You can overwrite or extend these names with the filterNames option:
twigDrupalString({
Twig,
files: ["strings.yaml"],
filterNames: ["t", "trans", "tc"],
});For development purposes, a watch mode can be enabled that reloads the translation strings from disk if any of the referenced files change.
Set the watch options:
twigDrupalString({
Twig,
files: ["strings.yaml"],
watch: true,
});The twigDrupalString method receives an options object with the following properties:
| Property | Type | Description |
|---|---|---|
Twig |
Twig |
Twig.js engine instance |
files |
string[] |
Array of paths to translation string files |
filterNames |
string[] |
Array of filter name strings, default ["t", "trans"] |
watch |
boolean |
Enable or disable watch mode, default false |
See contributing documentation for more information.