Precompiled JSX shouldn't preserve spaces

[mary-ext]

Version: Deno 1.41.3

Using this example code, with jsr:@mary/jsx to do JSX serialization...

const result = (
	<div>
		<h1>Hello world</h1>
	</div>
);

console.log(result.value);

When the precompile JSX option is used, the resulting serialization retains the whitespace information from the source code:

<div>           <h1>Hello world</h1>    </div>

It should match what react-jsx has:

<div><h1>Hello world</h1></div>

Not just for stylistic reasons but also because it means that switching between the two transforms could lead to broken website styling due to unexpected whitespace.

[marvinhagemeister]

Wanted to take a stab at this, but I'm unable to reproduce this issue. The spaces are not present for me and everything works as expected with the provided reproduction. Tested on my mac, linux and windows machine. This is what the emitted file looks like (removed the inline sourcemap comment for readability):

import { jsxTemplate as _jsxTemplate } from "@mary/jsx/jsx-runtime";
const $$_tpl_1 = [
  "<div><h1>Hello world</h1></div>"
];
const result = _jsxTemplate($$_tpl_1);
console.log(result.value);

[mary-ext]

Ooh, so I decided to look into this some more and this seems to be only happening when tabs are being used for indentations instead of spaces.

I wasn't sure how I'd get to the emitted code so I'm making use of the x/emit module, but it seems to be producing the same results (under v1.42.1)

import { transpile } from "https://deno.land/x/emit/mod.ts";

const url = new URL("./mod.tsx", import.meta.url);
const result = await transpile(url, {
  compilerOptions: {
    jsx: "precompile",
    jsxImportSource: "@mary/jsx",
  },
});

console.log(result.get(url.href));

Tabs

Spaces

With spaces it works fine as expected

[marvinhagemeister]

Good catch, I missed that with the tabs. Only tried spaces. Can confirm that using tabs for indentation reproduces the issue.

[marvinhagemeister]

@mary-ext FYI you can see the emitted output from Deno by running deno info path/to/file.tsx. It will print the path to the emitted code.