Namespacing
Rosey supports hierarchical namespacing, where an element can scope the translation keys for all of its children. This is particularly useful when building components, as your component may be tagged with generic key names that are combined with the namespace in which that component is used.
#Defining a namespace
Use the data-rosey-ns attribute to define namespaces to be included as part of the key for the translations. All parents of an element with a data-rosey-ns attribute will contribute to the final key, with each namespace concatenated by a colon.
<!DOCTYPE html>
<html>
<head>
<title data-rosey="title">Home title</title>
</head>
<body data-rosey-ns='home'>
<h1 data-rosey="title">Home page title</h1>
<div data-rosey-ns="contact-info">
<h2 data-rosey="title">Contact us</h2>
</div>
</body>
</html>
In the above example, all text is tagged as data-rosey="title". Due to the namespace attributes provided, these are de-conflicted and the output translation keys will be:
{
"title": "Home title",
"home:title": "Home page title",
"home:contact-info:title": "Contact us"
}
#Defining a namespace root
Use the data-rosey-root attribute to start a new namespace for all child elements.
In this example we set a root namespace separately for our head and body elements, and unset the namespace within an inner div:
<!DOCTYPE html>
<html>
<head data-rosey-root="meta">
<title data-rosey="title">Home title</title>
</head>
<body data-rosey-root="content">
<h1 data-rosey="title">Home page title</h1>
<div data-rosey-root="">
<p data-rosey="contact-us">...</p>
</div>
</body>
</html>
Output translation keys:
{
"meta:title": "Home title",
"content:title": "Home page title",
"contact-us": "..."
}
The data-rosey-ns attributes may be nested within a data-rosey-root attribute:
<!DOCTYPE html>
<html>
<body data-rosey-root="content">
<div data-rosey-ns="contact">
<p data-rosey="contact-us">...</p>
</div>
</body>
</html>
Output translation keys:
{
"content:contact:contact-us": "..."
}