Leave html tags as they are. Is it possible?

[melisiweb]

Hi we are using lokalise for the translation on our website.
This is the string to translate (react):

<Trans i18nKey="testTranslation">Test <strong>{{ variable }}</strong> ok</Trans>

the exporter is replacing <strong> with <0> which is not supported by lokalise.
Is there a way to avoid this conversion?

Thanks

Version

• i18next: 19.2.0
• i18next-scanner: 2.10.3

Configuration

debug: true,
    func: {
      list: ['i18next.t', 'i18n.t', 't'],
      extensions: ['.js', '.jsx']
    },
    trans: {
      component: 'Trans',
      i18nKey: 'i18nKey',
      defaultsKey: 'defaults',
      extensions: ['.js'],
      fallbackKey: function (ns, value) {
        return value
      },
      acorn: {
        ecmaVersion: 10, // defaults to 10
        sourceType: 'module' // defaults to 'module'
        // Check out https://github.com/acornjs/acorn/tree/master/acorn#interface for additional options
      }
    },
    lngs: ['en', 'de'],
    ns: [
      'locale',
      'resource'
    ],
    defaultLng: 'en',
    defaultNs: 'resource',
    defaultValue: '__STRING_NOT_TRANSLATED__',
    resource: {
      loadPath: 'i18n/{{lng}}/{{ns}}.json',
      savePath: 'i18n/{{lng}}/{{ns}}.json',
      jsonIndent: 2,
      lineEnding: '\n'
    },
    nsSeparator: false, // namespace separator
    keySeparator: false, // key separator
    interpolation: {
      prefix: '{{',
      suffix: '}}'
    }

[melisiweb]

Any update on this one 🙏 ? @cheton ? It would be cool if we can interpolate tags with react components too

[cheton]

It will be resolved when PR #211 is merged.

[wokayme]

@cheton can I help in some way with this PR? It's one year later and is still not merged and this problem is still relevant for us.

[cheton]

Hi @wokayme

Please help check if PR #234 will work as expected. If everything looks good, I will merge the PR to the master branch and publish a major release for this change.

[wokayme]

@cheton what I can say is much better, but still require some improvements, bellow I wrote two snippets of code with are parsed incorrectly
Examples of incorrect code:


        <Trans>
          <span>Example test, </span>
          <Text>
            Wow
          </Text>
        </Trans>


I got key -> <1>Example test, </1><3>Wow</3> instead <0>Example test, </0><1>Wow</1>



<Trans>
              lorem
              <img />
              <img />
              ipsum
            </Trans>


I get key -> lorem<1></1><3></3>ipsum instead lorem<1></1><2></2>ipsum



Looks like problem with tag indexing




@cheton also I would like to give extra feedback about developer experience / problems which I med and (as I think) are worthy to point out:

1. When I installed your change locally and build the package, I couldn't run the bin command, the reason was simple the missing ensure-array dependency. I think maybe you have it inside your node_modules when you publish package it's why you don't have any problem with it adding to package.json and rebuild fix this problem ;)

2. I think you build previously package differently or I have problem with dependencies, when I use build locally suddenly place where we were using const scanner = require('i18next-scanner’); I needed to change for `const scanner = require('i18next-scanner’).default;



Version 3.3.0 index.js from node modules:


module.exports = function () {
  var _module$exports;

  return (_module$exports = module.exports).createStream.apply(_module$exports, arguments);
}; // Basic API

module.exports.createStream = createStream; // Parser

module.exports.Parser = _parser["default"];



Version which I build locally:


var createStream = function createStream(options, customTransform, customFlush) {
  var parser = new _parser["default"](options);

  var stream = _through["default"].obj(transform(parser, customTransform), flush(parser, customFlush));

  return stream;
};

exports.createStream = createStream;

var _default = function _default() {
  return createStream.apply(void 0, arguments);
};

exports["default"] = _default;


It can be connected with incorrect install dependencies on my side (lack of package.lock.json, and many ^ inside package.json), also it can be connected with “resolve dependency problem” screen bellow:



I hope my feedback will help make your package better ;)

[cheton]

@wokayme

Examples of incorrect code:


<Trans>
  <span>Example test, </span>
  <Text>
    Wow
  </Text>
</Trans>

<Trans>
  lorem
  <img />
  <img />
  ipsum
</Trans>

The issue of incorrectly indexed tags was fixed in f9cf506 by filtering out nodes with empty strings.

When I installed your change locally and build the package, I couldn't run the bin command, the reason was simple the missing ensure-array dependency. I think maybe you have it inside your node_modules when you publish package it's why you don't have any problem with it adding to package.json and rebuild fix this problem ;)

I forgot to replace ensure-array with ensure-type for the cli command. It's fixed in 4e3bc9f

I think you build previously package differently or I have problem with dependencies, when I use build locally suddenly place where we were using const scanner = require('i18next-scanner’); I needed to change for `const scanner = require('i18next-scanner’).default;

Thanks for the finding. I accidentally made a breaking change in PR #220 when migrating to Jest. Fixed in c6bc159 to keep it compatible with CJS exports.

[wokayme]

Looks good all my problems disappear ;) Let's go with it 🕺 !

[cheton]

Published v4.0.0