Using constants in translations

[seaders]

Just started integrating this into our project, and it's fitting much of our use criteria except one key issue around our company / brand name.

We've just had to reword the name of our company from "Company Name" to "Other Detail: Company Name" in our app because of reasons out of our control. This means we've had to change every area that had "Company Name" in.

What would be amazing would be some way to "refer back" to another translation's entry.

As in, in your app's dictionary ,

import { type DeclarationContent } from "intlayer"

const appContent = {
  key: "app",

  content: {
    brandName: "Other Detail: Company Name",
    brandNameShort: "Company Name",
  }
} satisfies DeclarationContent

export default appContent

And then, in another page/component, you can pull that in,

import { DeclarationContent } from "intlayer"

const overviewContent = {
  key: "overview",
  content: {
    header: "Do all this awesome stuff with %%{app.brandName}%%",
    subHeader: "With %%{app.brandNameShort}%%, you'll be even more awesomer!"
  }
} satisfies DeclarationContent

export default overviewContent

Make sense?

Also, just checking on the status of the online editor? I tried setting up there but ran into a number of hangs and errors, and can't create an organisation, or new project at all.

[aymericzip]

Hey Seaders, thanks for your Issue!

---

Recommendation

My recommendation is to keep your two declaration files separate. This approach makes your content declarations more maintainable and flexible, especially if you plan to use the visual editor.

import { type DeclarationContent } from 'intlayer';

const overviewContent = {
  key: 'overview',
  content: {
    header: 'Do all this awesome stuff with ',
    subHeader: ['With ', " you'll be even more awesome!"],
  },
} satisfies DeclarationContent;

export default overviewContent;

import { useIntlayer } from 'next-intlayer'; // or react-intlayer
import { type FC } from 'react';

export const YourComponent: FC = () => {
  const { brandName, brandNameShort } = useIntlayer('app');
  const { header, subHeader } = useIntlayer('overview');
  return (
    <div>
      <h1>
        {header}
        {brandName}
      </h1>
      <h2>
        {subHeader[0]}
        {brandNameShort}
        {subHeader[1]}
      </h2>
    </div>
  );
};

Alternative: Importing One Content File into Another

If you'd like to use TypeScript declaration files, an alternative is to import one content file into the other.

Here’s an example:

import { type DeclarationContent } from 'intlayer';
import appContent from './app.content';

const overviewContent = {
  key: 'overview',
  content: {
    header: `Do all this awesome stuff with ${appContent.content.brandName}`,
    subHeader: `With ${appContent.content.brandNameShort}, you'll be even more awesome!`,
  },
} satisfies DeclarationContent;

export default overviewContent;

It will works properly, but the limitation of this approach is its compatibility with the visual editor for your overviewContent content declaration file. The editor will interpret Do all this awesome stuff with Other Detail: Company Name as a single string fully declared in your overviewContent declaration file. The visual editor does not interpret nested declaration for now.

Alternative: Using Component Logic

Another option is to call your content as a string using .value and replace placeholders with JavaScript's replace function.

import { useIntlayer } from 'next-intlayer'; // or react-intlayer
import { type FC } from 'react';

export const YourComponent: FC = () => {
  const { brandName, brandNameShort } = useIntlayer('app');
  const { header, subHeader } = useIntlayer('overview');

  return (
    <div>
      <h1>{header.value.replace('%%{app.brandName}%%', brandName.value)}</h1>
      <h2>
        {subHeader.value.replace(
          '%%{app.brandNameShort}%%',
          brandNameShort.value
        )}
      </h2>
    </div>
  );
};

However, this approach sacrifices the benefits of the IntlayerNode (type returned by objects like brandName, brandNameShort, header, or subHeader). These types enable features such as displaying the content selector within the visual editor.

Content Nesting

I know that i18next offers a similar feature called nesting. Would this be a feature you'd like to see in Intlayer? If so, and if there’s enough interest from others, let me know. I’d be happy to add it to the roadmap.

---

Updated Visual Editor Documentation

Regarding the visual editor: A new documentation has been released since Intlayer v4. The previous visual editor have been slitted into two tools :

• Intlayer visual editor (for locale declaration files)
• Intlayer CMS (for distant dictionaries)

Because of a big refactor regarding the approach, the visual editor will be released in the coming days with version 4.1.0. Meanwhile, we are still working on improvements related to the CMS, which will be fully available next weeks.

[seaders]

I don't love option one because if brandName comes first in one language, we'd need to have an empty entry first, then brandName, then the second entry. I think I'll probably go with option 2 until I get the visual editor working fully right at least, but i18n's nesting does look the most ideal solution (but also definitely the most complex one too, unfortunately).

One way or another, thanks so much for the comprehensive response, and, overall your work on this, it's massively appreciated.

[aymericzip]

Hi @seaders !

Just to communicate the release of nesting feature sice the v5!

I hope it will match your needs

[seaders]

I FINALLY got around to this @aymericzip thanks so much for your work on this, it really is great and appreciated.

I think? I'm using it correctly, but I did find one issue where I'm not sure if it's my incorrect usage.

Using this dictionary code,

import { nest, type Dictionary } from "intlayer"

const brandNameShort = nest("app", "brandNameShort")

export default {
  key: "overview",
  content: {
    publishHeader: (
      <>
        Publish your product listings in the {brandNameShort} Mobile Web
        Application or in the {brandNameShort} Chrome Extension
      </>
    ),
    brandNameShort
  }
} satisfies Dictionary

and this view code,

  const { brandNameShort } = useIntlayer("app")
  const overview = useIntlayer("overview")
  console.log("overview", overview)

  return (
      <h2>{brandNameShort}</h2>
      <h2>{overview.brandNameShort}</h2>
      <h2>{overview.publishHeader}</h2>
  )

The correct brand name is shown under "brandNameShort", coming from the app dictionary, "overview.brandNameShort", coming, nested, from the overview dictionary, but for "overview.publishHeader", I get

Publish your product listings in the Mobile Web Application or in the Chrome Extension

Again, not totally sure if this is by design or not, but I just thought I'd point it out to you. Thanks again!

[aymericzip]

Hey @seaders! Thanks for the feedback!

Maybe have a look to the insert function

But the combinaison of nesting + insertion + react node is not supported for now

A way to fix it

import { nest, insert, type Dictionary } from "intlayer"

export default {
  key: "overview",
  content: {
    publishHeader: insert("Publish your product listings in the {{brandNameShort}} Mobile Web. Application or in the {{brandNameShort}} Chrome Extension"),
    brandNameShort: nest("app", "brandNameShort")
  }
} satisfies Dictionary

  const { brandNameShort, publishHeader } = useIntlayer("overview")

  return (
     <>
        <h2>{brandNameShort}</h2>
        <h2>
           {publishHeader({
              brandNameShort: brandNameShort.value
           })}
       </h2>
    </>
  )

We implemented this function something like one month ago based on your feedback. So thanks for that !

[quest-bot]

New Quest!

A new Quest has been launched in @aymericzip’s repo.
Merge a PR that solves this issue to loot the Quest and earn your reward.

---

A badge has been stashed in this issue to reward the solver!

🗡 Comment @quest-bot embark to check-in for this Quest and start solving the issue. Other solvers will be notified!

⚔️ When you submit a PR, comment @quest-bot loot #89 to link your PR to this Quest.

Questions? Check out the docs.

[Akshama2003]

hi,
Feature Suggestion
It would be incredibly helpful to have a way to reference one translation key from another, something like:

// app.ts

 export const appContent = {
  key: "app",
  content: {
    brandName: "Other Detail: Company Name",
    brandNameShort: "Company Name",
  }
};

// overview.ts

export const overviewContent = {
  key: "overview",
  content: {
    header: "Do all this awesome stuff with %%{app.brandName}%%",
    subHeader: "With %%{app.brandNameShort}%%, you'll be even more awesomer!",
  }
};

And have those placeholders resolved automatically either at compile-time or runtime.

[aymericzip]

Make sense @Akshama2003 ! Thanks

We will see to bring this feature soon as possible