Adding nested keys

[ysoo]

Is your feature request related to a problem? Please describe.

Nested keys are used for better readability and better organization in larger files. Nested keys aren't supported in this plugin. I'm wondering if that can be implemented. I see a pull request open for it already. Could we revive it?

Describe the solution you'd like

An option where nested: true can be passed in. Similar to how the i18n-webpack-plugin is supported.

Describe alternatives you've considered

I have written a custom localizeCompiler method, which works for nested keys, but there are multiple and many warnings clogging up the console stating that, which could be suppressed, but it would be nice to just have native functionality though.

[webpack-localize-assets-plugin] Missing localization for key "another.type.of.key" used in ./a/filepath:66:28 from locales: en

Additional context

LocalizeCompiler that I wrote, based on how i18n-webpack-plugin works

 localizeCompiler: {
          t(callArguments) {
            const [key] = callArguments;
            const keys = key.replace(/^\.|"/g, '').split('.');

            let localization = this.resolveKey(keys[0]);
            if (!localization) { 
              return JSON.stringify(localization); 
            }

            for(let i = 1; i < keys.length; ++i) {
              const k = keys[i]; 
              if (!(k in localization)) { 
                this.emitWarning("Missing localization for key" + k)
                return key; 
              }
              localization = localization[k];
            }

            return JSON.stringify(localization);
          }
        }

[privatenumber]

I think you can use _.get or dot-prop. Would they handle your use-case?

[ysoo]

I already have a workaround for my use case. Unless there's a way to use.get or dot-prop that I'm not seeing?

Would having nested_keys as an option not feasible? It would be nice to be able to get key validation for nested keys. I was referring to this pull request here https://github.com/privatenumber/webpack-localize-assets-plugin/pull/55

[privatenumber]

Can you throw your Webpack setup up on StackBlitz?

Im not sure if I understand your problem or why you're getting those errors if you have a valid localizeCompiler

[ysoo]

The errors occur from this file because locale data only pulls the top level keys.

Within my app, the LocalizedStringKey looks like this "another.typeof.key". and the LocaleData looks like so

"another": {
         "typeof": {
                 "key": "value"
         }
}

And it would claim that there's a missing localization when it's nested instead.

[jps5775]

I also have localization files that contain nested keys such as:

"another": { "typeof": { "key": "value" } }

I've tried using __("nested.key.here") but I receive the same error posted above [webpack-localize-assets-plugin] Missing localization for key "another.type.of.key" used in ./a/filepath:xx;yy from locales

@privatenumber do you know if we can have any workaround here?

I'm thinking we would either need a customCompiler similar to the one posted above by @ysoo or have an option like where nested: true can be passed similar to i18n-webpack-plugin. If not I'm not sure how we would be able to get around this use case.

[privatenumber]

Can you throw your Webpack setup up on StackBlitz?

[jps5775]

@privatenumber Yep, I have an example here: webpack-webpack-js-org-znr5ol

If you look at main.en.js and main.es.js, you can see at the bottom of the files the localized strings, but when trying to get the localized string for a key that is more the 1 level deep, it doesn't actually return the localized string.