Support jsx mode "string" #15217
Description
Suggestion
Add a new mode for the tsx/jsx mode: "string" that, when used and given the input
let foo =
<div>
<div>hello world</div>
</div>outputs
let foo =`
<div>
<div>hello world</div>
</div>`;OR (maybe an alt mode?)
let foo = `
<div>
<div>hello world</div>
</div>`;Use case A
I'm currently doing a lot of unit tests (requiring line-number) that look like:
let html = `
<template>
<div></div>
</template>
`;There are several reasons why the string literal use here is less than ideal:
- indentation is done manually / no automatic formatting
- spaces become part of the string.
- time consuming to rearrange (i.e. deeper indentation, several uses in a test suite).
Use case B
Other frameworks can make use of tsx formatting: for example, Aurelia has an inlineView decorator that allows passing markup to the view compiler:
import {inlineView} from 'aurelia-framework';
@inlineView('<template><div>Hello World</div></template>')
export class Foo{
}with tsx - mode: string, this could be improved to
const FooView =
<template>
<div>Hello World</div>
</template>
@inlineView(FooView)
export class FooViewModel{
}the improvement here being better support for indentation, formatting in editors and markup checking.
Activity
BANG88 commentedon Apr 17, 2017
Why not just use template string instead ?
MeirionHughes commentedon Apr 17, 2017
I am, and its annoying when a) I need to rearrange, b) want to format a large chunk, or c) want to ensure correct markup; see Case A.
WorldMaker commentedon Oct 16, 2017
You could implement this today with a custom
--jsxFactorythat calls an "h" factory that produces a string. You take a runtime hit for that, of course, though maybe not a terrible one. The benefit here is that there are a couple options you could use today, thanks to server-side rendering work in the "isomorphic rendering space", for instance snabbdom-to-html.That said, some ability for TS to just stringify JSX could still be handy as a compile-time optimization. (I'd also like to see at something that could be done for some JSX but not all, maybe through a decorator tag or something.)
RyanCavanaugh commentedon Jun 23, 2021
There doesn't seem to be ecosystem demand for this in any appreciable amount.
jsx: "preserve"is still there if you have some post-build transformer for it