BUG: fbt is not preserving ` `

[mrtnzlml]

🐛 Bug Report

Non-breaking space   is being replaced by FBT with simple space. That's unexpected in situations where you really need a non-breaking space.

To Reproduce

Steps to reproduce the behavior:

1. create the following test:

<div>
  test&nbsp;1
  <fbt desc="test2">test&nbsp;2</fbt>
</div>

2. check the output in your browser, in my case it's this:

<div>test&nbsp;1<!-- -->test 2</div>

As you can see, the second   disappeared which is not correct.

Expected behavior

  should be preserved in the output

envinfo

  System:
    OS: macOS 11.2.3
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 637.48 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.3.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.15.1 - /usr/local/bin/npm
    Watchman: 20210328.072220.0 - /usr/local/bin/watchman

[mrtnzlml]

BTW, I tried preserveWhitespace but that also didn't preserve the  . 🤔

[kayhadrin]

Hi @mrtnzlml,

That's strange because we're specifically supporting this kind of use-case.

Test case:

fbt/packages/babel-plugin-fbt/src/__tests__/fbtJsx-test.js

Lines 303 to 307 in 76debd6

	'should support html escapes': {
	input: withFbtRequireStatement(
	`<fbt desc="foo &quot;bar&quot;">&times;</fbt>`,
	),
	},

Snapshot:

fbt/packages/babel-plugin-fbt/src/__tests__/__snapshots__/fbtJsx-test.js.snap

Lines 543 to 553 in 6d2de3c

	exports[`Test declarative (jsx) fbt syntax translation should support html escapes 1`] = `
	const fbt = require("fbt");
	fbt._(
	/* __FBT__ start */ {
	type: "text",
	jsfbt: "×",
	desc: 'foo "bar"',
	project: "",
	} /* __FBT__ end */
	);

AFAIK, it's the Babel parser that reads and decodes HTML entities within JSX.
My only guess is that some other Babel transforms before/after the babel-plugin-fbt might have altered this.
Also, how did you verify that the HTML entities were missing in your rendered fbt on the browser?

It'd really help if you could make a repro repository to help us debug this further if necessary. :-)

[mrtnzlml]

Hi @kayhadrin, thanks for having a look!

I've created a demo here: https://github.com/mrtnzlml/bug-fbt-nbsp

It is certainly possible that it's something wrong with my setup. However, everything else seems to be working as expected (check the demo with other entities) and I am not sure how should this be fixed in my code. 🤔

Also, how did you verify that the HTML entities were missing in your rendered fbt on the browser?

I've clicked on "Edit as HTML" when inspecting the element because otherwise   (and some other entities) would be hidden. Output of "Edit as HTML" is visible in the demo README file.

I noticed this issue originally on my other website where "80 ℃" was having an unexpected line-break but it worked as expected when I removed the <fbt>…</fbt> wrapper.

[kayhadrin]

Thanks for this! I've prepared a patch for this.
It'll be out soon after the next big babel-plugin-fbt release.