Webpack и Slim.js

Для работы с Slim.js в современных проектах на JavaScript часто используют сборщик модулей Webpack. Slim.js предоставляет легковесный компонентный фреймворк, основанный на шаблонах и реактивных свойствах. Интеграция с Webpack позволяет использовать модульную структуру, ES6-модули и оптимизацию сборки.

Установка через npm:

npm install slim-js

Импорт в проекте:

import { Slim } from 'slim-js';

Webpack автоматически обрабатывает зависимости и позволяет подключать Slim.js как обычный модуль ES6.

Для корректной работы рекомендуется настроить Babel, если используются современные возможности JavaScript, которые не поддерживаются всеми браузерами.

Создание компонента Slim.js

Компоненты в Slim.js создаются с помощью функции Slim.tag. Они представляют собой кастомные HTML-элементы с привязанными свойствами и реактивными шаблонами.

Пример базового компонента:

Slim.tag('my-counter', `
  <div>
    <button oncl ick="decrement()">-</button>
    <span>{{ count }}</span>
    <button oncl ick="increment()">+</button>
  </div>
`, class extends Slim {
  count = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
});

Ключевые моменты:

  • Slim.tag регистрирует компонент с указанным именем.
  • Шаблон задается в виде строки HTML с привязкой к реактивным свойствам через {{ property }}.
  • Методы класса могут изменять свойства, автоматически обновляя DOM благодаря реактивности Slim.js.

Реактивные свойства

Slim.js использует механизм наблюдаемых свойств, что позволяет автоматически обновлять DOM при изменении состояния.

class MyComponent extends Slim {
  name = 'Slim.js';
  count = 0;

  changeName(newName) {
    this.name = newName; // автоматически обновит все {{ name }} в шаблоне
  }
}

Особенности:

  • Все свойства класса становятся наблюдаемыми.
  • Любое изменение значения вызывает реактивное обновление соответствующих участков DOM.
  • Поддерживаются вычисляемые свойства, которые зависят от других реактивных полей.

Связывание событий

Slim.js поддерживает связывание событий через HTML-атрибуты onclick, oninput и т.д. Методы компонента можно вызывать напрямую из шаблона.

<input type="text" onin put="updateValue(event)" value="{{ value }}">
<p>{{ value }}</p>

Метод updateValue класса компонента автоматически получает объект события:

updateValue(event) {
  this.value = event.target.value;
}

Работа с Webpack: оптимизация и модульность

Использование Webpack позволяет разбивать проект на отдельные модули и динамически подключать компоненты Slim.js.

Пример структуры проекта:

src/
 ├─ components/
 │   ├─ counter.js
 │   └─ todo.js
 ├─ index.js
 └─ styles.css

В index.js можно импортировать компоненты:

import './components/counter';
import './components/todo';

Webpack соберёт весь код в единый бандл, а Tree Shaking позволит убрать неиспользуемые части Slim.js, снижая размер итогового файла.

Интеграция с CSS и сторонними библиотеками

Slim.js не навязывает внутренние стили, поэтому компоненты легко оформлять через внешние CSS-файлы или CSS-модули:

import './counter.css';

Slim.tag('my-counter', `
  <div class="counter">
    <button oncl ick="decrement()">-</button>
    <span>{{ count }}</span>
    <button oncl ick="increment()">+</button>
  </div>
`, class extends Slim { ... });

Сторонние библиотеки, подключенные через npm, также легко интегрируются через Webpack, что позволяет использовать Slim.js в сложных интерфейсах.

Жизненный цикл компонентов

Slim.js поддерживает несколько методов жизненного цикла:

  • onBeforeCreated() — вызывается перед созданием компонента.
  • onCreated() — после инициализации всех свойств.
  • onBeforeUpdate() — перед обновлением DOM.
  • onUpdated() — после изменения DOM.
  • onBeforeRemoved() — перед удалением компонента из DOM.
  • onRemoved() — после удаления из DOM.

Пример использования:

class MyComponent extends Slim {
  onCreated() {
    console.log('Компонент создан');
  }

  onUpdated() {
    console.log('DOM обновлён');
  }
}

Жизненный цикл позволяет управлять сторонними ресурсами, таймерами и подписками на события.

Асинхронные операции и данные

Slim.js легко интегрируется с асинхронными запросами через fetch или библиотеки вроде Axios. После получения данных их можно присвоить реактивным свойствам:

class DataLoader extends Slim {
  data = [];

  async loadData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    this.data = await response.json();
  }

  onCreated() {
    this.loadData();
  }
}

Шаблон может использовать {{ data.length }} или {{ data.map(...) }} для рендеринга списков.

Использование слотов

Slim.js поддерживает слоты для внедрения произвольного содержимого в компоненты, аналогично Web Components:

Slim.tag('card-component', `
  <div class="card">
    <slot></slot>
  </div>
`, class extends Slim {});

В HTML:

<card-component>
  <p>Текст внутри слота</p>
</card-component>

Это позволяет создавать универсальные, переиспользуемые компоненты с настраиваемым содержимым.

Вывод

Интеграция Slim.js с Webpack позволяет создавать модульные, реактивные и лёгкие интерфейсы на современном JavaScript. Реактивные свойства, шаблоны с привязкой данных, жизненный цикл компонентов и поддержка асинхронных операций обеспечивают гибкость при построении сложных веб-приложений. Разделение на модули и поддержка CSS и сторонних библиотек через Webpack делает Slim.js удобным инструментом для масштабных проектов.

Оглавление