Пишем компонент с «материальными» кнопками для Svelte

Вдохновившись статьями SvelteJS: Релиз второй версии, Исчезающие фреймворки и Re: «Сравнение JS-фреймворков: React, Vue и Hyperapp», про «исчезающий» фреймворк Svelte (читается «свелт»), я захотел его попробовать. И, для начала, решил написать небольшой компонентик с кнопками из Materialize.

Способ первый: классический

Стартовый шаблон Svelte предлагается в двух вариантах: с Webpack или с Rollup. Я использовал Webpack, поскольку он мне привычнее. Установка, запуск — все как обычно.

Устанавливаем Materialize и иконочки:

npm install materialize-css@next
npm install material-design-icons

В подключаем все это в src/main.js:

import 'material-design-icons/iconfont/material-icons.css';
import 'materialize-css/dist/css/materialize.min.css';

Установим file-loader, чтобы обрабатывать шрифты (и не только):

npm install file-loader --save-dev

И добавим настройки в webpack.config.js:

{
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    use: [{
      loader: 'file-loader',
      options: {
      name: '[name].[ext]',
      outputPath: 'fonts/'
    }
  }]
}

Пишем компонент

Создаем файл src/components/Buttons.html — собственно, это и будет компонент. В Materialize для кнопок почему-то используется тег <a>, поэтому, для семантичности, было решено сделать два вида кнопок: <button> — если ссылки нет, и <a> — если ссылка есть.

Пишем два шаблона:

{#if href} // Проверка на наличие ссылки

<a on:click class="{classes}" {href} {title} >
  {#if icon} // И на наличие иконки
  <i class="material-icons {iconAlign}">{icon}</i>
  {/if}
  <slot>button</slot>
</a>

{:else}

<button on:click class="{classes}" {type} {name} {disabled} >
  {#if icon}
  <i class="material-icons {iconAlign}">{icon}</i>
  {/if}
  <slot>button</slot>
</button>

{/if}

Здесь {classes} — список классов, {href}, {title}, {type}, {name}, {disabled} — соответствующие атрибуты, а {iconAlign} и {icon} — позиция и название иконки. Атрибуты можно добавить и другие (там, в основном, экзотика осталась), но для примера этого должно быть достаточно.

А on:click добавим, чтобы потом клики по кнопочкам ловить. Пример будет ниже.

Дальше, в секции <script> описываем данные по-умолчанию и добавление классов (computed):

  export default {
    data() {
      return {
        color: '',
        size: '',
        iconAlign: 'left',
        floating: false,
        flat: false,
        waves: false,
        wavesColor: 'light',
        icon: '', // название иконки
        type: '',// и нужные атрибуты
        href: '',
        name: '',
        disabled: false,
        title: ''
      };
    },
    computed: { // здесь описываем добавление классов
      classes: ({ // перечисляем свойства, которые используем при вызове кнопки
        color,
        size,
        floating,
        flat,
        disabled,
        waves,
        wavesColor
      }) => {
        const classes = [];
        flat ? classes.push(`btn-flat`) : classes.push(`btn`);
        floating && classes.push(`btn-floating`);
        disabled && classes.push(`disabled`);
        waves && classes.push(`waves-effect`);
        wavesColor && classes.push(`waves-${wavesColor}`);
        size && classes.push(`btn-${size}`);
        color && classes.push(`${color}`);
        return classes.join(' ');
      }
    }
  };

В разделе data() описываем данные по-умолчанию, а в computed — заполняется массив классов на основе свойств, которые мы будем передавать при вызове кнопки. Причем при изменении этих свойств все автоматически пересчитается. Р — реактивность.

Собственно, компонент готов. В src/App.html подключаем его:

<script>
  import Button from './components/Buttons.html';

  export default {
    components: {
      Button
    }
  };
</script>

Собираем/вызываем кнопки

  <Button waves></Button>
  <Button waves icon="cloud" iconAlign="left"></Button>
  <Button floating  waves size="large" color="red" icon="add"></Button>

Или ссылки:

  <Button href="#foo" waves> Link_0 </Button>
  <Button href="#bar" waves icon="cloud"> Link_1 </Button>
  <Button href="#qux" waves flat> Link_2 </Button>
  <Button href="#baz" waves icon="cloud" iconAlign="right"> Link_3 </Button>
  <Button href="#foo" waves floating size="large" color="red" icon="add" />

События: ловим клик

С помощью on:click можно ловить клики по кнопке, например так:

<Button on:click="set({ count: count + 1 })" waves>Button++</Button>
<Button on:click="set({ count: count - 1 })" waves icon="cloud" iconAlign="left">Button--</Button>

Для этого в нужно добавить код в export default:

data() {
      return {
        count: 3
      };
    },

И где-нибудь этот счетчик вывести:

<p>Count: {count}</p>

Код на GitHub и демка.

Способ второй: REPL — попроще и побыстрее

На сайте фреймворка есть крутая «песочница» — REPL, в которой уже есть несколько десятков примеров. А еще там можно форкнуть готовый код, дописать/написать что-то своё и поделиться.
Например, вышеописанный компонент там выглядит так.