Nested dictionary items can't work

[thany]

Describe the Bug

The typings for DictionaryPhrases demand that dictionary items are always flattened. When considering even a slightly large app, this will become tedious, and nested dictionary items become virtually essential.

It bares mentioning that typescript module augmentation cannot work here, because as the term says, it can only augment modules, but not override what's already there. In other words, it can only add & merge types, but not overwrite any of them.

So this:

import '@sitecore-jss/sitecore-jss-nextjs';

declare module '@sitecore-jss/sitecore-jss-nextjs' {
  interface DictionaryPhrases {
    [k: string]: string | DictionaryPhrases;
  }
}

Does NOT work.

Another option would be to replace the entire set of typings, but then the responsibility on our end to keep them up-to-date means they won't be kept up-to-date anymore, practically speaking.

To Reproduce

There's nothing to reproduce, it's the typings that are wrong.

I'm referring to dictionary-service typings.

Expected Behavior

Nested or generic dictionary typings.

Possible Fix

Nested typings:

export interface DictionaryPhrases {
    [k: string]: string | DictionaryPhrases;
}

This would still be a hardcoded dictionary type, but at least it will make the typings correct both for applications, and in JSS internally, when using nested dictionary items. Projects not using nested dictionary items, are not inconvenienced by this, as flattened dictionaries will keep working just fine with this.

Generic typings:

export interface DictionaryPhrases<T = string> {
    [k: string]: T;
}

Problem with this one is that while we can force incoming props to be properly typed by having them be of type DictionaryPhrases<string | DictionaryPhrases>, this will only allow one level deep nesting, AND it will not do anything for JSS internal typings - they'd still be wrong for nested dictionary items.

I guess to fix the former, we'd need to go something a little bit like this:

type NestedDictionaryPhrases = DictionaryPhrases<string | NestedDictionaryPhrases>;

And then use NestedDictionaryPhrases as the prop type for dictionary in the <App> component. Doesn't feel right, does it.

Provide environment information

• Sitecore Version: 9
• JSS Version: 21.1
• Browser Name and version: Firefox 113
• Operating System and version (desktop or mobile): Windows 10

[ambrauer]

Hi @thany -

The DictionaryPhrases type is simply modeling the result of back-end Sitecore APIs, which are always flattened as you've noted.
There is nothing stopping you from creating a nested dictionary structure in Sitecore, however the APIs which fetch dictionary data are always going to flatten these. Dictionaries need a unique key by definition, so this makes sense.

If you wanted to introduce the heirarchy into your keys, then one option might be to use a key prefix convention that matches the folders you have.

e.g.

Foo <-- Dictionary Folder
    Bar <-- Dictionary Entry
        Key: "Foo/Bar"
        Phrase: "Bar"

[thany]

@ambrauer Prefixing makes for a LOT of extra data needing to be sent down the wire, and let's be honest: JSS already isn't very efficient in term of amounts of data. I don't like adding more.

Nevertheless, if what you're saying is correct, and Sitecore cannot work with nested dictionary items, then:

1. How is one of our backend developers able to produce nested dictionary items in the content tree AND export them with that nesting AND our application able to pick them up if we just conveniently ignore the incorrect typings for it? Clearly, what you're saying is at least partly incorrect, or incomplete.
2. For importantly, could you not escalate this issue to a broader Sitecore issue, to natively support nested dictionary items for the large applications that are undoubtedly being built on this platform?

I don't mind you closing this issue, and I don't even care that there's no workaround that you can think of (only a hack of sorts, that I can think of, as mentioned). But I would mind if this closure means to also completely forget about nested dictionary items at all.

[ambrauer]

@thany Sitecore definitely supports nested dictionary items but only from a content management perspective (i.e. in the content tree). From the API perspective (either using the REST or GraphQL service), the dictionary is flattened. So,

1. Your backend developers will be able to have nested dictionary items, but your application should be receiving a flattened list. I just tested this using both REST and GraphQL services to confirm.
2. Perhaps I closed this prematurely, as I can see that there may be value for this heirarchy on the front-end side. Especially since many of the translation libraries (next-localization for example) supported nesting. I've moved this to a discussion to get thoughts from the community and gauge interest.

Thanks for the suggestion!