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

Problem with Babylon's JSX plugin encoding #6790

Open
igor-ribeiro opened this Issue Nov 10, 2017 · 6 comments

Comments

Projects
None yet
3 participants
@igor-ribeiro

igor-ribeiro commented Nov 10, 2017

Choose one: is this a bug report or feature request? Bug

Input Code

https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=MYewdgzgLgBFCm0YF4YHIBCIoGORoG4AoI0SWDAVyinBRgAoBKFAPkaIEgAeAI2tpgYwABYBLADYATAE7wwyAERZcIRTAD0rIkwJA&debug=false&circleciRepo=&evaluate=false&lineWrap=true&presets=es2015%2Creact%2Cstage-2&targets=&version=6.26.0

Babel/Babylon Configuration (.babelrc, package.json, cli command)

{
  parserOpts: {
    sourceType: 'module',
    plugins: [ 'jsx' ],
  },
}

Expected Behavior

var Button = function Button() {
	return React.createElement("button", { children: "Botão" });
};

Current Behavior

var Button = function Button() {
	return React.createElement("button", { children: "Bot\xE3o" });
};

Context

I'm from Brazil, so in our language it's common to have those words: Botão, Amanhã, Coração...

software version(s)
Babel 6.26.0
node 8.5.0
npm 5.3.0
Operating System Fedora 25

I'm also creating and using multiple plugins, so the end result is like:

var Button = function Button() {
	return React.createElement("button", { children: "Bot\\\\\\\\\\\\\\\xE3o" });
};
@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Nov 10, 2017

Collaborator

Hey @igor-ribeiro! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

Collaborator

babel-bot commented Nov 10, 2017

Hey @igor-ribeiro! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

@igor-ribeiro

This comment has been minimized.

Show comment
Hide comment
@igor-ribeiro

igor-ribeiro Nov 10, 2017

This works:

<button children={'Botão'} />

// transforms to
React.createElement('button', { children: 'botão' });

igor-ribeiro commented Nov 10, 2017

This works:

<button children={'Botão'} />

// transforms to
React.createElement('button', { children: 'botão' });
@igor-ribeiro

This comment has been minimized.

Show comment
Hide comment
@igor-ribeiro

igor-ribeiro Nov 10, 2017

I had to do this

babelTypes.jSXAttribute(
  babelTypes.jSXIdentifier('children'),
  babelTypes.jSXExpressionContainer(babelTypes.jSXIdentifier(`'Botão'`))
)

igor-ribeiro commented Nov 10, 2017

I had to do this

babelTypes.jSXAttribute(
  babelTypes.jSXIdentifier('children'),
  babelTypes.jSXExpressionContainer(babelTypes.jSXIdentifier(`'Botão'`))
)
@nicolo-ribaudo

This comment has been minimized.

Show comment
Hide comment
@nicolo-ribaudo

nicolo-ribaudo Nov 10, 2017

Member

Hi, I don't think that the conversion from ã to \xE3 is an issue, since they are the same thing (you can run "\xE3" === "ã" in the browser console to verify it yourself).

I'm also creating and using multiple plugins, so the end result is like:

var Button = function Button() {
	return React.createElement("button", { children: "Bot\\\\\\\\\\\\\\\xE3o" });
};

Can you expand a bit on this? Which plugins are you using?

Member

nicolo-ribaudo commented Nov 10, 2017

Hi, I don't think that the conversion from ã to \xE3 is an issue, since they are the same thing (you can run "\xE3" === "ã" in the browser console to verify it yourself).

I'm also creating and using multiple plugins, so the end result is like:

var Button = function Button() {
	return React.createElement("button", { children: "Bot\\\\\\\\\\\\\\\xE3o" });
};

Can you expand a bit on this? Which plugins are you using?

@igor-ribeiro

This comment has been minimized.

Show comment
Hide comment
@igor-ribeiro

igor-ribeiro Nov 10, 2017

I'm creating plugins myself to transform the code using the babel.transform API. One plugin example is:

{
  visitor: {
    ExportDeclaration(path) {
      path.remove();
    },
  },
}

But I have multiple, like one for extracting all imports, one to remove the duplicate imports, one to walk through JSX elements...

Hi, I don't think that the conversion from ã to \xE3 is an issue, since they are the same thing (you can run "\xE3" === "ã" in the browser console to verify it yourself).

For me it's kind of an issue, because I need to display Botão in the browser. But I got it working by using an expression instead of a string literal.

igor-ribeiro commented Nov 10, 2017

I'm creating plugins myself to transform the code using the babel.transform API. One plugin example is:

{
  visitor: {
    ExportDeclaration(path) {
      path.remove();
    },
  },
}

But I have multiple, like one for extracting all imports, one to remove the duplicate imports, one to walk through JSX elements...

Hi, I don't think that the conversion from ã to \xE3 is an issue, since they are the same thing (you can run "\xE3" === "ã" in the browser console to verify it yourself).

For me it's kind of an issue, because I need to display Botão in the browser. But I got it working by using an expression instead of a string literal.

@igor-ribeiro

This comment has been minimized.

Show comment
Hide comment
@igor-ribeiro

igor-ribeiro Nov 10, 2017

Using my plugins example, when I use the extractImports plugin it transforms Botão to Bot\xE3o, the I use the removeDuplicateImports and it transform Bot\xE3o to Bot\\\xE3o and so on

igor-ribeiro commented Nov 10, 2017

Using my plugins example, when I use the extractImports plugin it transforms Botão to Bot\xE3o, the I use the removeDuplicateImports and it transform Bot\xE3o to Bot\\\xE3o and so on

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment