Add support for Svelte in i18next (svelte-i18next plugin)

[emanuele-scarsella]

What framework do you want to have? Please provide links of its i18n solution/package.

svelte-i18next, a plugin for i18next .

Please provide some overall screenshots about how the i18n usage would be like

The overall usage is the same of i18next but with the added support for .svelte files and svelte stores syntax $i18n.t({key}). Here there is an example of his usage in a svelte component:

<script>
  import i18n from './i18n.js';
</script>

<div>
    {$i18n.t('key')}
</div>

Please provide a minimal starter project

A minimal starter project can be found here in the example folder of the svelte-i18n plugin.

Additional context This is not technically a new framework, it is just a plug-in for one of the many frameworks supported by i18next. This framework would not be necessary if only svelte was part of the languagesIds fot i18next, i18next works on almost every UI framework so is quiet restrictive to only check javascript and typescript files, especially considering that languagesIds doesn't appear to be something editable from settings. This mean that while support for the svelte syntax can be easily added in settings like so:

{
    "i18n-ally.regex.usageMatchAppend": [
        "(?:\\$i18n|(?:get)\\(\\s*i18n\\s*\\))\\.t\\(\\s*['\"`]({key})['\"`]"
    ],
}

there is no way to actually support .svelte files, so even if this framework may not be supported for any reason, at least is worth considering to add languagesIds to the existing i18next framework since it can be used on many more file types.\ \ I really hope for this framework to get supported, especially considering thet implementation of this framework can be as simple as a child class of I18nextFramework:

i18next-svelte

import I18nextFramework from './i18next'
import { LanguageId } from '~/utils'

class SvelteI18nextFramework extends I18nextFramework {
  id = 'i18next-svelte'
  display = 'Svelte I18next'

  detection = {
    packageJSON: {
      any: [
        'svelte-i18next',
      ],
      none: [
        'react-i18next',
      ],
    },
  }

  languageIds: LanguageId[] = [
    'javascript',
    'typescript',
    'javascriptreact',
    'typescriptreact',
    'ejs',
    'svelte',
  ]

  // for visualize the regex, you can use https://regexper.com/
  usageMatchRegex = [
    '(?:\\$i18n|(?:get)\\(\\s*i18n\\s*\\))\\(\\s*[\'"`]({key})[\'"`]',
    '(?:i18next|i18n|req)\\.t\\(\\s*[\'"`]({key})[\'"`]',
  ]
}

export default SvelteI18nextFramework

i18next.ts

...
  detection = {
    packageJSON: {
      any: [
        'i18next',
      ],
      none: [
        'react-i18next',
        'svelte-i18next',  // added line
      ],
    },
  }
...

Thank you in advance for your time.

[emanuele-scarsella]

I took the freedom to implement this framework on a branch in my fork of the project. Since in the CONTRIBUTING.md is clearly stated:

3. Before submitting a PR for a major new feature, or introducing a significant change, please open an issue to discuss the proposal with maintainers.

I'll wait to discuss this with a moderator before submitting any PR.\

Inside the branch is possible to find both, the new framework, the relative example by framework and the relative e2e test (passing successfully).\ \ I hope I haven't missed anything and I'll wait for your response, thank you in advance.\ \ PS: closing the issue was done accidentally, mistakes happens ¯\_(ツ)_/¯

[emanuele-scarsella]

In the meanwhile, if anybody is reading this issue while facing this same problem, a solution I found is to add this custom framework in your .vscode/i18n-ally-custom-framework.yml:

# .vscode/i18n-ally-custom-framework.yml

# An array of strings which contain Language Ids defined by VS Code
# You can check available language ids here: https://code.visualstudio.com/docs/languages/identifiers
languageIds:
  - javascript
  - typescript
  - javascriptreact
  - typescriptreact
  - svelte

# An array of RegExes to find the key usage. **The key should be captured in the first match group**.
# You should unescape RegEx strings in order to fit in the YAML file
# To help with this, you can use https://www.freeformatter.com/json-escape.html
usageMatchRegex:
  - "(?:i18next|i18n|req)\\.t\\(\\s*['\"`]({key})['\"`]"
  - "(?:\\$i18n|(?:get)\\(\\s*i18n\\s*\\))\\.t\\(\\s*['\"`]({key})['\"`]"

# A RegEx to set a custom scope range. This scope will be used as a prefix when detecting keys
# and works like how the i18next framework identifies the namespace scope from the
# useTranslation() hook.
# You should unescape RegEx strings in order to fit in the YAML file
# To help with this, you can use https://www.freeformatter.com/json-escape.html
scopeRangeRegex: "useTranslation\\(\\s*\\[?\\s*['\"`](.*?)['\"`]"

# An array of strings containing refactor templates.
# The "$1" will be replaced by the keypath specified.
# Optional: uncomment the following two lines to use

refactorTemplates:
 - i18next.t("$1")
 - $i18n.t("$1")

# If set to true, only enables this custom framework (will disable all built-in frameworks)
monopoly: false

the monopoly: false in theory ensures that all the options relative to i18next are still applied in addiction to the new one.