@master/literal

On this page

• Install
• Import
• Usage and behavior
  • Strings
  • Objects
  • Arrays
  • Resolve types
  • Trim and clear
  • Mixed and nested
  • Execute like a function
• Related
• Inspiration

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.