tsx-control-statements

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`

Drop-in replacement for jsx control statements

No need to rewrite anything
Compile control statements in typescript .tsx files
- Control statements transpile to type-correct typescript before type checking
Compile control statements in javascript .js and .jsx files
- "allowJs" should be set to true in your typescript configuration
Run the test suite: npm i && npm run build && npm run test. It includes:
- Compatibility tests with jsx-control-statements (i.e. both produce the same output html)
- Tests for correct transpilation
- Tests for typechecking

Zero dependencies apart from typescript

Pick any typescript version equal to or above 2.4.x
Can be used with Vue, React or just plain jsx/tsx

Known limitations:

[js, ts] I haven't found any way of integrating this into create-react-app scaffold project without ejecting the scripts and modifying them
[js, ts] Various CLIs (tsc, ts-register, ts-node) feature no flag (that I know of) that allows for addition of custom transformers
[ts] The isolatedModules flag currently causes build errors for typescript files, since the typings currently live in a namespace
- isolatedModules is supported since the module tsx-control-statements/components contains stub definitions which can be imported import { For, If } from 'tsx-control-statements/components'
[ts] Cannot work with various "smart" plugins that instead of invoking the typescript compiler rather strip the types and handle the code as javascript. This includes tools like:
- @babel/preset-typescript
- @babel/plugin-transform-typescript

What are the control statements transpiled to?

If - Ternary operators

import { If } from 'tsx-control-statements/components';

const SongRelatedThingy = ({ songList }: { songList: string[] }) =&gt; (
  <p>
    
      good taste in music
    
  </p>
);

// will transpile to
const SongRelatedThingy = ({ songList }) =&gt; (
  <p>
    {songList.includes('Gery-Nikol - Im the Queen')
      ? 'good taste in music'
      : null}
  </p>
);

With - Immediately invoked function expression

import { With } from 'tsx-control-statements/components';

const Sum = () =&gt; (
  <p>
    
      {a + b + c}
    
  </p>
);

// becomes
const Sum = () =&gt; <p>{((a, b, c) =&gt; a + b + c)(3, 5, 6)}</p>;

For - `Array.from` calls

More 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[] }) =&gt; (
  <ol>
     (
        <li>
          {i}
          <strong>{name}</strong>
        </li>
      )}
    /&gt;
  </ol>
);

// jsx-control-statements compatible
const Names = ({ names }: { names: string[] }) =&gt; (
  <ol>
    
      <li>
        {i}
        <strong>{name}</strong>
      </li>
    
  </ol>
);

// both of the above will transpile to:
const Names = ({ names }) =&gt; (
  <ol>
    {Array.from(names, (name, i) =&gt; (
      <li>
        {i}
        <strong>{name}</strong>
      </li>
    ))}
  </ol>
);

Choose/When/Otherwise - nested ternary operators, emulates switch/case.

import {
  Choose,
  When,
  Otherwise
} from 'tsx-control-statements/components';

const RandomStuff = ({ str }: { str: string }) =&gt; (
  <article>
    
      ivancho
      
        <h1>yum!</h1>
      
      {/* Otherwise tag is optional,
        * if not provided, null will be rendered */}
      im the queen da da da da
    
  </article>
);

// transpiles to
const RandomStuff = ({ str }) =&gt; (
  <article>
    {str === 'ivan'
      ? 'ivancho'
      : str === 'sarmi'
        ? React.createElement('h1', null, 'yum!')
        : 'im the queen da da da da'}
  </article>
);

Cookbook

Bundlers and scaffolding tools

Testing

ava, 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

Importing the transformer in your build configs:

// commonjs
const transformer = require('tsx-control-statements').default;

// ts
import transformer from 'tsx-control-statements';

Importing type definitions:

import {
    For,
    If,
    With,
    Choose,
    When,
    Otherwise
} from 'tsx-control-statements/components';

Reasons to not use any control statements for jsx:

~~Hard to statically type~~
- Has been somewhat adressed, with the exception of With
Not part of the standard
Not ordinary jsx elements
Requires extra dependencies to use
Many typescript tools do not support custom transformers in a convenient way

Most popular functions for tsx-control-statements

To help you get started, we’ve selected a few tsx-control-statements examples, based on popular ways it is used in public projects.

tsx-control-statements.default