⚠️ `condicional` is based on a PEG grammar and is not battle-tested.
Often times there's some mapping logic that needs to be applied to components to return values. Simple mappings can be achieved with a plain object. Adding a default value commonly adds an edge case. Things get more complicated once logic needs to be applied to an input e.g. the input is odd. The uncommon but existing case is nesting logic for checks. The tool that most resembles what comfortably covers these cases is Ramda's cond and its derivatives. However, it lacks feature richness and suffers from array overload.
condicional uses tagged template literals to combine runtime data and static pieces in a single, concise mapper. The syntax in a nutshell is
cond`
static_value_1 result_1
static_value_2 result_2
${isEven} {
static_value_3 result_3
fallback_1
}
fallback
`pnpm add condicionalJust import cond from condicional and build your mapper.
const mapper = cond`
${isEven} 0
${isOdd} 1
${'not an integer'}
`
mapper(10) === '0' // true
mapper(5) === '1' // true
mapper(0.5) === 'not an integer' // truecondicional stores your functions, so you can create stable conditional components
const isError = ({ type }) => type === 'error'
const isWarning = ({ type }) => type === 'warning'
const mapper = cond<JSXElementConstructor>`
${isError} ${ErrorIcon}
${isWarning} ${WarningIcon}
${OfflineIcon}
`
const StatusIcon = (props) => {
const Component = mapper(props)
return <Component {...props} />
}
// <StatusIcon type="error" size="small" /> renders <ErrorIcon type="error" size="small" />