Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Trans - reserved component keys #1304

Closed
joekur opened this issue Apr 21, 2021 · 8 comments
Closed

Trans - reserved component keys #1304

joekur opened this issue Apr 21, 2021 · 8 comments

Comments

@joekur
Copy link

joekur commented Apr 21, 2021

💥 Regression Report

While it's acknowledged in the docs that self-closing html tags such as link and img are reserved and cannot be used as keys in the components prop, previously using a capitalized version such as Link worked fine. In the newest version (I'm guessing due to the change in html-parse-stringify? #1283), it no longer works as expected. It seems this is a breaking regression (happened in one of our apps), but I'm not sure if there was ever an intended support for this. At the least, may be worth mentioning in the changelog.

Last working version

Worked up to version: 11.8.12

Stopped working in version: 11.8.13

To Reproduce

Steps to reproduce the behavior:

"seeMore": "click <Link>here</Link> for more"
<Trans
  i18nKey="seeMore"
  components={{ Link: <a href="/foo"> }}
/>

Expected behavior

Expected:

click <a href="/foo">here</a> for more

Actual:

click <a href="/foo"></a>here for more

Your Environment

  • runtime version: node v12.18.3, chrome 89.0.4389.128
  • i18next version: 19.9.2
  • os: Mac
@jamuhl
Copy link
Member

jamuhl commented Apr 21, 2021

shouldn't it be:

<Trans
  i18nKey="seeMore"
  components={{ Link: <a href="/foo">dummy</a> }}
/>

@joekur
Copy link
Author

joekur commented Apr 21, 2021

shouldn't it be:

<Trans
  i18nKey="seeMore"
  components={{ Link: <a href="/foo">dummy</a> }}
/>

Tested, and the outcome is the same either way.

@steven-carrell
Copy link

Tested, and the outcome is the same either way.

You also lose the translation for the link test 🤷

@jamuhl
Copy link
Member

jamuhl commented Apr 22, 2021

@kachkaev @adrai did we introduce a regression with #1283

Guess the tests only have lower cased HTML tags - as that is more regular in writing those - but still if uppercase does not work anymore we might have to mention that in the docs (if we can't fix it)?!?

@adrai
Copy link
Member

adrai commented Apr 22, 2021

Yes, I can confirm, this is a regression introduced by replacing html-parse-stringify...

html-parse-stringify:

[
    {
        "type": "tag",
        "name": "0",
        "voidElement": false,
        "attrs": {},
        "children": [
            {
                "type": "text",
                "content": "click "
            },
            {
                "type": "tag",
                "name": "Link",
                "voidElement": true,
                "attrs": {},
                "children": []
            },
            {
                "type": "text",
                "content": "here"
            },
            {
                "type": "text",
                "content": " for more"
            }
        ]
    }
]

html-parse-stringify2:

[
    {
        "type": "tag",
        "name": "0",
        "voidElement": false,
        "attrs": {},
        "children": [
            {
                "type": "text",
                "content": "click "
            },
            {
                "type": "tag",
                "name": "Link",
                "voidElement": false,
                "attrs": {},
                "children": [
                    {
                        "type": "text",
                        "content": "here"
                    }
                ]
            },
            {
                "type": "text",
                "content": " for more"
            }
        ]
    }
]

@adrai
Copy link
Member

adrai commented Apr 26, 2021

@HenrikJoreteg this is the original "issue"

@HenrikJoreteg
Copy link

@adrai html-parse-stringify has been updated v3.0.1 and... i've given you rights to make changes to it as you see fit.

@adrai adrai closed this as completed in 4b89b47 Apr 28, 2021
@adrai
Copy link
Member

adrai commented Apr 28, 2021

fixed with v11.8.14

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants