TSX control statements
These are a set of components that provide basic control flow like conditionals and loops in JSX. These components can be either used as is or can be transpiled to TypeScript expressions using provided transformer.
It is recommened to use both the components and the transformer together because:
- The components provide type defintions and safety.
- Using only components can and will fail in certain conditions. Consider the following example:
If
<If condition={user}>{user.name}</If>
userisundefinedin above example, you'll see the infamousCannot read property 'name' of undefinederror. This is because in a JSX component, all of its properties including body are eagerly evaluated.
Known Limitations
-
Transformer: Intented to work only with
ts-loaderandawesome-typescript-loader. Will not work withbabel. -
Transformer: Since CLIs (like
tsc,ts-node) do not provide option to add custom transformers, this will not work with those.
Installation
npm install -D @vkbansal/tsx-control-statements
# or
yarn add -D @vkbansal/tsx-control-statementsComponents API
This package exposes the following components:
If Component
Usage
import React from 'react';
import { If } from '@vkbansal/tsx-control-statements';
function MyComponent() {
return (
<div>
{/* component code... */}
<If condition={myBooleanCondition}>
<span>This will included only if condition is true</span>
</If>
{/* component code... */}
</div>
);
}Transformation
import React from 'react';
function MyComponent() {
return (
<div>
{/* component code... */}
{myBooleanCondition ? (
<React.Fragment>
<span>This will included only if condition is true</span>
</React.Fragment>
) : null}
{/* component code... */}
</div>
);
}
For Component
Usage
import React from 'react';
import { For } from '@vkbansal/tsx-control-statements';
function MyComponent() {
return (
<div>
{/* component code... */}
<For items={[1, 2, 3, 4, 5]}>
{(item) => <div key={item}>{item}</div>}
</For>
{/* component code... */}
</div>
);
}Transformation
import React from 'react';
function MyComponent() {
return (
<div>
{/* component code... */}
<React.Fragment>
{[1, 2, 3, 4, 5].map((item) => (
<div key={item}>{item}</div>
))}
</React.Fragment>
{/* component code... */}
</div>
);
}
Choose, When & Otherwise Component
Usage
import React from 'react';
import { Choose, When, Otherwise } from '@vkbansal/tsx-control-statements';
function MyComponent() {
return (
<div>
{/* component code... */}
<Choose>
<When condition={condition1}>
This will be shown when "condition1" is true
</When>
<When condition={condition2}>
This will be shown when "condition2" is true
</When>
<Otherwise>
This will be shown when both "condition1" and "condition2" are false
</Otherwise>
</Choose>
{/* component code... */}
</div>
);
}Transformation
import React from 'react';
function MyComponent() {
return (
<div>
{/* component code... */}
{condition1 ? (
<React.Fragment>
This will be shown when "condition1" is true
</React.Fragment>
) : condition2 ? (
<React.Fragment>
This will be shown when "condition2" is true
</React.Fragment>
) : (
<React.Fragment>
This will be shown when both "condition1" and "condition2" are false
</React.Fragment>
)}
{/* component code... */}
</div>
);
}Transformer API
ts-loader
/* webpack.config.js */
const {
transformer: tsxControlStatementsTransformer
} = require('@vkbansal/tsx-control-statements');
module.exports = {
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
options: {
getCustomTransformers: (program) => ({
before: [tsxControlStatementsTransformer]
})
}
}
];
}
}Release & Changelog
This project uses standard-version for managing releases and changelog
License
MIT. Copyright(c) Vivek Kumar Bansal