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-string
Crate a file called strings.yaml
with the following content:
welcome:
default: Welcome
Then 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 @name
Then 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.