Control flow JSX/TSX elements that get compiled to plain old javascript.
WTFPL License
Basically jsx-control-statements, but for the typescript compiler toolchain. Works for both javascript and typescript.
Typescript version range |
tsx-control-statements version |
---|---|
2.4.x - 3.3.x
|
v3.3.x |
3.4.x - 4.6.x
|
v4.x |
4.9 |
v5.0 |
5.x |
>= v5.1 |
.tsx
files
.js
and .jsx
files
"allowJs"
should be set to true
in your typescript configurationnpm i && npm run build && npm run test
. It includes:
jsx-control-statements
(i.e. both produce the same output html)2.4.x
create-react-app
scaffold project without ejecting the scripts and modifying themtsc
, ts-register
, ts-node
) feature no flag (that I know of) that allows for addition of custom transformersisolatedModules
flag currently causes build errors for typescript files, since the typings currently live in a namespaceisolatedModules
is supported since the module tsx-control-statements/components
contains stub definitions which can be imported import { For, If } from 'tsx-control-statements/components'
@babel/preset-typescript
@babel/plugin-transform-typescript
import { If } from 'tsx-control-statements/components';
const SongRelatedThingy = ({ songList }: { songList: string[] }) => (
<p>
<If condition={songList.includes('Gery-Nikol - Im the Queen')}>
good taste in music
</If>
</p>
);
// will transpile to
const SongRelatedThingy = ({ songList }) => (
<p>
{songList.includes('Gery-Nikol - Im the Queen')
? 'good taste in music'
: null}
</p>
);
import { With } from 'tsx-control-statements/components';
const Sum = () => (
<p>
<With a={3} b={5} c={6}>
{a + b + c}
</With>
</p>
);
// becomes
const Sum = () => <p>{((a, b, c) => a + b + c)(3, 5, 6)}</p>;
Array.from
callsMore flexible than [].map
, since it can be provided with an iterator or an array-like as it's first parameter. For non-legacy code, prefer the more type-safe alternative.
import { For } from 'tsx-control-statements/components';
// more type-safe for, the typechecker knows
// the types of the "name" and "i" bindings
const Names = ({ names }: { names: string[] }) => (
<ol>
<For
of={names}
body={(name, i) => (
<li key={name}>
{i}
<strong>{name}</strong>
</li>
)}
/>
</ol>
);
// jsx-control-statements compatible
const Names = ({ names }: { names: string[] }) => (
<ol>
<For each="name" of={names} index="i">
<li key={name}>
{i}
<strong>{name}</strong>
</li>
</For>
</ol>
);
// both of the above will transpile to:
const Names = ({ names }) => (
<ol>
{Array.from(names, (name, i) => (
<li key={name}>
{i}
<strong>{name}</strong>
</li>
))}
</ol>
);
import {
Choose,
When,
Otherwise
} from 'tsx-control-statements/components';
const RandomStuff = ({ str }: { str: string }) => (
<article>
<Choose>
<When condition={str === 'ivan'}>ivancho</When>
<When condition={str === 'sarmi'}>
<h1>yum!</h1>
</When>
{/* Otherwise tag is optional,
* if not provided, null will be rendered */}
<Otherwise>im the queen da da da da</Otherwise>
</Choose>
</article>
);
// transpiles to
const RandomStuff = ({ str }) => (
<article>
{str === 'ivan'
? 'ivancho'
: str === 'sarmi'
? React.createElement('h1', null, 'yum!')
: 'im the queen da da da da'}
</article>
);
webpack
with ts-loader
rollup
with typescript plugin
parcel
- this might work but don't count on itava
, mocha
or anything other that can use ts-node
- ts-node
supports programatically adding custom transformers so it can be used to run test suites.jest
using ts-jest
like that
// commonjs
const transformer = require('tsx-control-statements').default;
// ts
import transformer from 'tsx-control-statements';
import {
For,
If,
With,
Choose,
When,
Otherwise
} from 'tsx-control-statements/components';
With