i18next-scanner: component in Typescript files is no longer parsed

@beheh I think it might be useful if we can provide built-in support for transpiling TypeScript to ES5 if the file extension is .ts or .tsx.

I made package from @peitschie comment. Feel free to PR. https://github.com/nucleartux/i18next-scanner-typescript

I made package from @peitschie comment. Feel free to PR. https://github.com/nucleartux/i18next-scanner-typescript

Works very well thank you.

Also, make sure you have not put any ['.ts', '.tsx'] extensions from within the options, which would display the same error message

{
  input: ['src/**/*.{js,jsx,ts,tsx}'],
  options: {
    func: {
      extensions: ['.js', '.jsx'],
    },
    trans: {
      extensions: ['.js', '.jsx'],
    },
  },
  transform: typescriptTransform({ extensions: ['.ts', '.tsx'] }),
}

and not

{
  input: ['src/**/*.{js,jsx,ts,tsx}'],
  options: {
    func: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
    trans: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
  },
  transform: typescriptTransform({ extensions: ['.ts', '.tsx'] }),
}

This is still an issue, Any plan to make it happen? 😃

I have also experienced problems when using decorators.

I’m having the same problem with v2.6.5, I had to reverse to v2.6.1 because acorn-jsx-walk is not working for Trans components. I don’t use typescrypt, I’m using ES6 for my code so that’s the “problem”. Here’s my example on a .jsx file:

render() {
  return (
    <Dialog onClose={this.closeDialog} className="upgrade-dialog">
      <h3>{t('wantMoreSkips')}</h3>
      <p>
        <Trans i18nKey="getUnlimitedSkips">
          Get unlimited skips with <span className="pro-badge">Pro</span>!
        </Trans>
      </p>
      <Button className="button" onClick={this.closeDialog} text={t('gotIt')} />
    </Dialog>
  );
}

On version <=2.6.1 that would show up on my language files, and now it’s not. I don’t think this issue should be marked as an enhacement, this is a bug that broke things for many people.

For anyone looking for hints towards a typescript solution, it appears possible using the typescript compiler api: https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API

An untested example of a custom transform function might be something like:

function transform(file, enc, done) {
  const extension = path.extname(file.path)
  const parser = this.parser;
  let content = fs.readFileSync(file.path, enc);


  if (extension == '.ts') {
    content = typescript.transpileModule(content, {
      compilerOptions: tsCompilerOptions,
      fileName: path.basename(file.path)
    }).outputText;
  }

  if (options.attr.extensions.indexOf(extension) !== -1)
    parser.parseAttrFromString(content);

  if (options.func.extensions.indexOf(extension) !== -1) {
    parser.parseFuncFromString(content);
  }

  done();
}

@messerm @daliusd and for those interested I’ve proposed a patch for the latest acorn-jsx in #112

If you can’t wait, try npm install @contentpass/i18next-scanner.

Would be curious to hear if this solves your issues as well.

I have the same problems described above for pure JavaScript code where we use object decomposition {...ohterObject}. I was checking the code and found that acorn-jsx-walk is 3 years old and still uses on acorn-jsx@3.0.0. I wonder whether it would be worth to switch a more recent walker which works with the latest version of acorn-jsx@5.0.1?

Edit: I see this is what @daliusd basically proposed in his latest post 😃.

This (almost) works with newer babel: plugins: [ ‘@babel/plugin-syntax-jsx’, ‘@babel/plugin-proposal-class-properties’, ‘@babel/plugin-proposal-object-rest-spread’, ‘@babel/plugin-transform-spread’, ‘@babel/plugin-transform-arrow-functions’, ],

Remaining problem is that acorn-jsx stops on JSX comments, e.g. {/* comment *.}. Maybe newest acorn version would solve the problem.

what i’ve ended up doing, is to transpile typescript -> js to a temp directory, and run the scanner on it.