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.
Suggestion
Add a new mode for the tsx/jsx mode: "string" that, when used and given the input
outputs
OR (maybe an alt mode?)
Use case A
I'm currently doing a lot of unit tests (requiring line-number) that look like:
There are several reasons why the string literal use here is less than ideal:
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:
with tsx - mode: string, this could be improved to
the improvement here being better support for indentation, formatting in editors and markup checking.