Patterns in JS

[afdev82]

I'm using the i18n-js gem/package to use the translations also in JS and till now I don't really understand which patterns are recognized by the scanner, I was always getting unused translations.
There are several possibilities to specify the translation in JS (and interpolate strings too).
To avoid to interpolate strings like i18n.t("some.scope." + key) or i18n.t(`some.scope.${key}`), I'm just using the scope option in the following way (see also here):

i18n.t(key, { scope: 'some.scope' });

I think this syntax is very similar to the one used in Ruby.

Could you clarify that aspect? I haven't found anything special about JS in the docs.
I'm using the scope option when the key is dynamic, but also a simple string sometimes is not recognized.
Few examples:

$(".modal-body", this.alertProductModal).html(I18n.t('configurations.check_background.your_product_doesnt_fit'));
$(".modal-footer", this.alertProductModal).append($("<a id='ignore_alert_background' class='conf-btn btn btn-outline-dark btn-secondary'>" + I18n.t('global.ignore') + "</a>"));

Thank you for your support!

[davidwessman]

@afdev82 Are these translations in a html file or a javascript file?

[afdev82]

It's javascript

[davidwessman]

Then I think you would have to implement a CustomScanner to handle a case like this.

[afdev82]

Ah ok,

in the Usage search section of the README I read:

i18n-tasks uses an AST scanner for .rb and .html.erb files, and a regexp scanner for all other files.

I thought that the javascript files were supported by the regexp scanner and it was not needed to implement a custom one.
If I need to implement one for the javascript files it's also fine, could it be clarified in the README which files are supported out of the box?
Thank you!

[davidwessman]

@afdev82
Ah, that makes sense to document.
The existing one probably works for a lot of syntaxes, but I do not think it can handle the Javascript object as parameter.

[afdev82]

Could it be worth to improve the existing one? I think many users could benefit from it.
First I will try to have a look at the custom scanner to fix my issue, I think if I find a solution, maybe it could be integrated later.

[davidwessman]

@afdev82 Yes, that would probably be good 🙂
Could you write some test cases?

[afdev82]

I'll try to write some when I will work on that again.
For the moment, thank you!

[cantin]

One approach for the JS scanner is using JS AST parser like @babel/parser and @babel/traverse to traverse and find the items.
Example here:

let fs = require('fs')
let parser = require("@babel/parser")
let traverse = require("@babel/traverse")

function collectCalls(filepath) {
  let results = []

  let code = fs.readFileSync(filepath).toString()
  let ast = parser.parse(code, {
    // parse in strict mode and allow module declarations
    sourceType: "module",

    plugins: [
      // enable jsx and flow syntax
      "jsx",
    ],
  });

  traverse.default(ast, {
    CallExpression(path) {
      //console.log(path.node)
      let { loc, start, end } = path.node
      let { type, object: objectNode, property: propertyNode } = path.node.callee

      if (type == 'MemberExpression' && objectNode.name == 'I18n' && (propertyNode.name == 't' || propertyNode.name == 'translate')) {
        let [ { value: rawKey }, defaultArg ] = path.node.arguments

        let h = {
          path: filepath,
          pos: start,
          line_num: loc.start.line,
          line_pos: loc.start.column,
          line: code.substring(start, end),
          raw_key: rawKey || null,
          default_arg: null,
        }

        if (defaultArg && defaultArg.type == 'ObjectExpression') {
          let node = defaultArg.properties.find(node => node.key.name == 'defaultValue')
          if (node) {
            if (node.value.type == 'StringLiteral') {
              h.default_arg = node.value.value
            } else if (node.value.type == 'ObjectExpression') {
              h.default_arg = node.value.properties.reduce((obj, property) => {
                obj[property.key.name] = property.value.value
                return obj
              }, {})
            }
          }
        }

        results.push(h)
      }
    },
  })
  return results
}

[JohnRDOrazio]

Or a simple fix would be to update the pattern to allow a lowercase i18n.t.

i18n-tasks/lib/i18n/tasks/scanners/pattern_scanner.rb

Line 15 in a2b06e3

TRANSLATE_CALL_RE = /(?<=^|[^\w'\-.]|[^\w'\-]I18n\.|I18n\.)t(?:!|ranslate!?)?/.freeze

Something like:

-    TRANSLATE_CALL_RE = /(?<=^|[^\w'\-.]|[^\w'\-]I18n\.|I18n\.)t(?:ranslate)?/
+   TRANSLATE_CALL_RE = /(?<=^|[^\w'\-.]|[^\w'\-](?:I|i)18n\.|(?:I|i)18n\.)t(?:ranslate)?/

Or:

-    TRANSLATE_CALL_RE = /(?<=^|[^\w'\-.]|[^\w'\-]I18n\.|I18n\.)t(?:ranslate)?/
+   TRANSLATE_CALL_RE = /(?<=^|[^\w'\-.]|[^\w'\-][Ii]18n\.|[Ii]18n\.)t(?:ranslate)?/

Either one of these patches is working for me.

[jclusso]

I'm using I18n.t('js.key') in JS files and i18n-tasks isn't picking up on them. Not sure what could be wrong. Here is my config.

# i18n-tasks finds and manages missing and unused translations: https://github.com/glebm/i18n-tasks

# The "main" locale.
base_locale: en
## All available locales are inferred from the data by default. Alternatively, specify them explicitly:
locales: [en]
## Reporting locale, default: en. Available: en, ru.
# internal_locale: en

# Read and write translations.
data:
  ## Translations are read from the file system. Supported format: YAML, JSON.
  ## Provide a custom adapter:
  # adapter: I18n::Tasks::Data::FileSystem

  # Locale files or `Find.find` patterns where translations are read from:
  read:
    - config/locales/views/application/en.js.yml
    - config/locales/**/%{locale}.yml
    - config/locales/**/*.%{locale}.yml

  # Locale files to write new keys to, based on a list of key pattern => file rules. Matched from top to bottom:
  # `i18n-tasks normalize -p` will force move the keys according to these rules
  write:

  # External locale data (e.g. gems).
  # This data is not considered unused and is never written to.
  external:
    ## Example (replace %#= with %=):
    # - "<%#= %x[bundle info vagrant --path].chomp %>/templates/locales/%{locale}.yml"

  ## Specify the router (see Readme for details). Valid values: conservative_router, pattern_router, or a custom class.
  # router: conservative_router

  yaml:
    write:
      # do not wrap lines at 80 characters
      line_width: 80

  ## Pretty-print JSON:
  # json:
  #   write:
  #     indent: '  '
  #     space: ' '
  #     object_nl: "\n"
  #     array_nl: "\n"

# Find translate calls
search:
  ## Paths or `Find.find` patterns to search in:
  paths:
   - app/
   - config/breadcrumbs

  ## Root directories for relative keys resolution.
  relative_roots:
    - app/components
    - app/controllers
    - app/decorators
    - app/handlers
    - app/helpers
    - app/mailers
    - app/views/mailers
    - app/views

  ## Directories where method names which should not be part of a relative key resolution.
  # By default, if a relative translation is used inside a method, the name of the method will be considered part of the resolved key.
  # Directories listed here will not consider the name of the method part of the resolved key
  #
  relative_exclude_method_name_paths:
    - app/components

  ## Files or `File.fnmatch` patterns to exclude from search. Some files are always excluded regardless of this setting:
  ##   *.jpg *.jpeg *.png *.gif *.svg *.ico *.eot *.otf *.ttf *.woff *.woff2 *.pdf *.css *.sass *.scss *.less
  ##   *.yml *.json *.zip *.tar.gz *.swf *.flv *.mp3 *.wav *.flac *.webm *.mp4 *.ogg *.opus *.webp *.map *.xlsx
  exclude:
    - app/assets/images
    - app/assets/fonts
    - app/assets/videos
    - app/assets/builds

  ## Alternatively, the only files or `File.fnmatch patterns` to search in `paths`:
  ## If specified, this settings takes priority over `exclude`, but `exclude` still applies.
  # only: ["*.rb", "*.html.slim"]

  ## If `strict` is `false`, guess usages such as t("categories.#{category}.title"). The default is `true`.
  strict: false

  ## Allows adding ast_matchers for finding translations using the AST-scanners
  ## The available matchers are:
  ## - RailsModelMatcher
  ##     Matches ActiveRecord translations like
  ##     User.human_attribute_name(:email) and User.model_name.human
  ##
  ## To implement your own, please see `I18n::Tasks::Scanners::AstMatchers::BaseMatcher`.
  <%# I18n::Tasks.add_ast_matcher('I18n::Tasks::Scanners::AstMatchers::RailsModelMatcher') %>

  ## Multiple scanners can be used. Their results are merged.
  ## The options specified above are passed down to each scanner. Per-scanner options can be specified as well.
  ## See this example of a custom scanner: https://github.com/glebm/i18n-tasks/wiki/A-custom-scanner-example

## Translation Services
# translation:
#   # Google Translate
#   # Get an API key and set billing info at https://code.google.com/apis/console to use Google Translate
#   google_translate_api_key: "AbC-dEf5"
#   # DeepL Pro Translate
#   # Get an API key and subscription at https://www.deepl.com/pro to use DeepL Pro
#   deepl_api_key: "48E92789-57A3-466A-9959-1A1A1A1A1A1A"
#   # deepl_host: "https://api.deepl.com"
#   # deepl_version: "v2"
#   # add additional options to the DeepL.translate call: https://www.deepl.com/docs-api/translate-text/translate-text/
#   deepl_options:
#     formality: prefer_less
## Do not consider these keys missing:
ignore_missing:
  - exceptions_app.*

## Consider these keys used:
ignore_unused:
  - '{activemodel,mongoid}.{attributes,errors}.*'
  - '{devise}.*'
  - '{enumerize.*}'

## Exclude these keys from the `i18n-tasks eq-base' report:
# ignore_eq_base:
#   all:
#     - common.ok
#   fr,es:
#     - common.brand

## Exclude these keys from the `i18n-tasks check-consistent-interpolations` report:
# ignore_inconsistent_interpolations:
# - 'activerecord.attributes.*'

## Ignore these keys completely:
ignore:

## Sometimes, it isn't possible for i18n-tasks to match the key correctly,
## e.g. in case of a relative key defined in a helper method.
## In these cases you can use the built-in PatternMapper to map patterns to keys, e.g.:
#
# <%# I18n::Tasks.add_scanner 'I18n::Tasks::Scanners::PatternMapper',
#       only: %w(*.html.haml *.html.slim),
#       patterns: [['= title\b', '.page_title']] %>
#
# The PatternMapper can also match key literals via a special %{key} interpolation, e.g.:
#
# <%# I18n::Tasks.add_scanner 'I18n::Tasks::Scanners::PatternMapper',
#       patterns: [['\bSpree\.t[( ]\s*%{key}', 'spree.%{key}']] %>