Treeshaking, large lists of dynamically accessed messages & submodules

[apttx]

I'm in the process of migrating an old Nuxt project to a new SvelteKit stack. I've set up Paraglide based on this guide but switched to the inlang JSON plugin for my existing JSON message files, which made me run into the issue of invalid JS IDs since my files had nested objects. I flattened my JSON files and moved on, but I noticed one issue: I had an object containing translations for countries, which I want to access dynamically:

{
  "countries": {
    "AD": "Andorra",
    "/* 242 more lines of country codes": "*/",
    "ZW": "Zimbabwe"
}

I cannot do this efficiently anymore without major manual labor, since

m[`countries_${countryCode}`]()

will cause the bundler to bundle all my messages into an object; the opposite I was trying to achieve with Paraglide.

I was hoping there would be a way to tell inlang to generate a submodule

import * as countries from '$paraglide/messages/countries"

for convenience; something like

import { defineConfig } from 'vite'
import { paraglide } from '@inlang/paraglide-js-adapter-vite'

export default defineConfig({
  plugins: [
    paraglide({
      project: "./project.inlang",
      outdir: "./src/paraglide",
      submodules: {
        // <path name>: <message id matcher>
        countries: /^countries_\w{2}$/
      }
    }),
  ],
})

What is the expected way to manage large lists of messages that I need to access dynamically, without manually keeping a separate list of messages up to date?

[apttx]

felt like playing around with it and the following code would (almost) achieve my feature, modifying compile:

  // the paraglide plugin options aren't available here unfortunately. this would have to come from the plugin config.
  const submodules: [string, RegExp][] = [
    ['countries', /^countries_(?<exportName>\w{2})$/],
    ['languages', /^languages_(?<exportName>[^_]+)$/]
  ]
  // submodule code
  const submoduleEntries = submodules.map(([submodulePath, submoduleMatcher]) => {
    const submoduleFilePath = `messages/${submodulePath}.js`
    const relativePathToIndexFile = path.relative(submoduleFilePath, 'messages/messages.js')
    const matchingMessages = args.messages.filter(message => submoduleMatcher.test(message.id))
    const exportStrings = matchingMessages.map((message) => {
      const messageIdMatch = message.id.match(submoduleMatcher)
      let exportName = message.id
      if(messageIdMatch?.groups?.exportName) {
        exportName = messageIdMatch.groups.exportName
      }
      const exportString = `export { ${message.id} as ${exportName} } from '${relativePathToIndexFile}'`
      return exportString
    })
    const submoduleFileContentString = `
/* eslint-disable */
${exportStrings.join('\n\n')}
`
    return [submoduleFilePath, submoduleFileContentString]
  })
  
  return {
     ...Object.fromEntries(submoduleEntries),
     // boilerplate files
     // regular compile return ....
   }
}

[apttx]

guessing this would also be possible with the resolution of #1585

[samuelstroschein]

What is the expected way to manage large lists of messages that I need to access dynamically, without manually keeping a separate list of messages up to date?

Still forming the expectation. Things that come to my mind (in unsorted order):

• the use case of really long lists seems rare. a better solution for common words would be to import country code translations from, for example, @inlang/language-tag instead of translating them over and over again.

• @apttx submodule proposal that matches message id's will only work with aliases after human readable and random ids for messages by default  #1892. Since we deviate from giving ids/keys a meaning (for good reasons!), splitting meaningless ids/keys via a regex will not work without aliases. I have the feeling that we come up with something better though if large lists (of common words) is even a problem worth solving