Skip to content

Support jsx mode "string" #15217

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

Closed
MeirionHughes opened this issue Apr 17, 2017 · 4 comments
Closed

Support jsx mode "string" #15217

MeirionHughes opened this issue Apr 17, 2017 · 4 comments
Labels
Awaiting More Feedback This means we'd like to hear from more people who would be helped by this feature Suggestion An idea for TypeScript

Comments

@MeirionHughes
Copy link

MeirionHughes commented Apr 17, 2017

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.

@BANG88
Copy link

BANG88 commented Apr 17, 2017

Why not just use template string instead ?

@MeirionHughes
Copy link
Author

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.

@RyanCavanaugh RyanCavanaugh added Awaiting More Feedback This means we'd like to hear from more people who would be helped by this feature Suggestion An idea for TypeScript labels Apr 17, 2017
@WorldMaker
Copy link

You could implement this today with a custom --jsxFactory that 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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting More Feedback This means we'd like to hear from more people who would be helped by this feature Suggestion An idea for TypeScript
Projects
None yet
Development

No branches or pull requests

4 participants