jsx-better-stringify

jsx-better-stringify é um transformador de JSX que converte JSX para strings para atingir o máximo de performance com SSR

Abaixo estão diversos exemplos de como ele funciona

Exemplos

Exemplo 1

const element = <div>Texto</div>;

const element = '<div>Texto</div>';

Exemplo 2

Quando ele percebe que é um attributo booleano, ele gera a expressão para evitar adicionar caso a variável seja falsy

Aqui está a lista de attributos que ele considera como booleano

const booleanAttributes = [
  'allowfullscreen',
  'async',
  'autofocus',
  'autoplay',
  'checked',
  'controls',
  'default',
  'defer',
  'disabled',
  'formnovalidate',
  'inert',
  'ismap',
  'itemscope',
  'loop',
  'multiple',
  'muted',
  'nomodule',
  'novalidate',
  'open',
  'playsinline',
  'readonly',
  'required',
  'reversed',
  'selected',
];

const element = <input required={variable} />;

const element = '<input ' + (variable ? 'required' : '') + '/>';

Exemplo 3

const element = <a href={variable}>Link</a>;

const element = '<a href="' + variable + '">Link</a>';

Exemplo 4

const element = <a href={variable + 1}>Link</a>;

const element = '<a href="' + variable + 1 + '">Link</a>';

Exemplo 5

const element = <input required />;

const element = '<input required/>';

Exemplo 6

const element = <input class='Something' />;

const element = '<input class="Something"/>';

Exemplo 7

const element = <a {...props}>Link</a>;

const element = '<a ' + props + '>Link</a>';

Exemplo 9

Quando ele percebe que é um componente, ele simplesmente chama o componente como uma função normal

const element = <Button />;

const element = Button();

Exemplo 10

const element = <Button id='myID' />;

const element = Button({ id: 'myID' });

Exemplo 11

const element = <Button num={3} />;

const element = Button({ num: 3 });

Exemplo 12

const element = <Button>My button</Button>;

const element = Button({ children: ['My button'] });

Exemplo 13

Quando a propriedade enviada possui um caractere como -, ele automaticamente adiciona os ' no identificador da propriedade

const element = <Button aria-hidden={true} />;

const element = Button({ 'aria-hidden': true });