1.0.11 • Published 2 years ago
@master/literal v1.0.11
On this page
Install
npm install @master/literal
Import
import $ from '@master/literal';
// or
import { literal } from '@master/literal';
$
is equal to literal
Usage and behavior
Try it online at https://stackblitz.com/edit/js-5jtq81
Strings
$`a ${true && 'b'} c`;
// 'a b c'
Objects
$`a ${{ b: true, c: false, d: isTrue() }} e`;
// 'a b d e'
Arrays
$`a ${['b', 0, false, 'c']} d`;
// 'a b c d'
Resolve types
$`a ${true} ${false} ${''} ${null} ${undefined} ${0} ${NaN} b`
// 'a b'
Trim and clear
- Remove newlines
- Convert consecutive spaces to one space
$`
a
b
${undefined}
c d
`
// 'a b c d'
Mixed and nested
$`
a
${
[
1 && 'b',
{ c: false, d: null },
['e', ['f']]
]
}
g h
`;
// 'a b e f g h'
Execute like a function
$`a b ${['c', 'd']} ${{ e: true, f: false }} ${true && 'g'}`;
// or
$('a b', ['c', 'd'], { e: true, f: false }, true && 'g');
// 'a b c d e g'
Related
- @master/style-element.react - Quickly create styled React elements with conditional class names.
- @master/css - A Virtual CSS language with enhanced syntax. ~13KB
Inspiration
- clsx - A tiny utility for constructing
className
strings conditionally.