Установка и начальная настройка

Установка Slim.js

Slim.js — это лёгкая библиотека для построения реактивных пользовательских интерфейсов на JavaScript. Основные способы подключения библиотеки:

  1. Через CDN
<script src="https://cdn.jsdelivr.net/npm/slim-js@4.0.0/dist/slim.min.js"></script>

Этот способ позволяет мгновенно использовать библиотеку без необходимости установки через пакетный менеджер. Достаточно подключить скрипт в <head> или перед закрывающим тегом </body>.

  1. Через npm
npm install slim-js

После установки пакет можно импортировать в проект:

import { Slim } from 'slim-js';

Или подключить через require в Node.js-проектах:

const { Slim } = require('slim-js');

Структура проекта

Для работы с Slim.js рекомендуется следующая минимальная структура проекта:

project/
│
├─ index.html
├─ main.js
└─ components/
    └─ my-component.js
  • index.html — основной файл HTML.
  • main.js — точка входа приложения.
  • components/ — директория для хранения пользовательских компонентов.

Подключение и инициализация

После подключения Slim.js через CDN или импорт в модуле, требуется инициализация компонентов. Slim.js автоматически сканирует DOM на наличие тегов с кастомными элементами, но для ручной инициализации можно использовать:

Slim.tag('my-component', class extends Slim {
  get template() {
    return `<div>Hello, Slim.js!</div>`;
  }
});

После регистрации тега можно использовать его в HTML:

<my-component></my-component>

Slim автоматически создаст экземпляр компонента и вставит его содержимое в DOM.

Основные настройки

Slim.js поддерживает следующие ключевые настройки при определении компонента:

  • template — HTML-шаблон компонента. Может содержать обычные элементы, директивы Slim.js и привязки к данным.
  • useShadow — логический параметр, определяющий, будет ли использоваться Shadow DOM. По умолчанию false.
  • onCreated — метод, вызываемый сразу после создания компонента, до рендеринга.
  • onBeforeRender и onAfterRender — методы, позволяющие управлять жизненным циклом рендера.
  • observedAttributes — массив атрибутов, изменения которых будут отслеживаться автоматически.

Пример расширенной настройки компонента:

Slim.tag('user-card', class extends Slim {
  get template() {
    return `
      <div class="card">
        <h2>{{name}}</h2>
        <p>{{email}}</p>
      </div>
    `;
  }

  get useShadow() { return true; }

  onCreated() {
    this.name = 'Имя пользователя';
    this.email = 'email@example.com';
  }

  onAfterRender() {
    console.log('Компонент отрендерен');
  }
});

Интеграция с современными инструментами

Slim.js легко интегрируется с системами сборки, такими как Webpack или Vite. Для этого достаточно импортировать библиотеку через npm и подключить компоненты в модульном стиле:

import './components/user-card.js';

document.body.innerHTML = `
  <user-card></user-card>
`;

При использовании Vite или Webpack рекомендуется включить поддержку ES-модулей для корректной работы Slim.js и автоматического tree-shaking.

Настройка реактивности

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

Slim.tag('counter-app', class extends Slim {
  get template() {
    return `
      <div>
        <p>Счётчик: {{count}}</p>
        <button click="increment">Увеличить</button>
      </div>
    `;
  }

  onCreated() {
    this.count = 0;
  }

  increment() {
    this.count += 1;
  }
});

Любое изменение свойства count автоматически обновляет соответствующую часть шаблона без дополнительного рендеринга.

Стиль и CSS

Slim.js поддерживает инкапсуляцию стилей через Shadow DOM. Для компонентов с useShadow = true стили можно добавлять напрямую в шаблон:

get template() {
  return `
    <style>
      .card { 
        border: 1px solid #ccc; 
        padding: 10px; 
        border-radius: 5px; 
      }
    </style>
    <div class="card">{{name}}</div>
  `;
}

Для компонентов без Shadow DOM стили можно подключать обычными CSS-файлами.

Проверка работоспособности

После подключения и регистрации компонентов необходимо убедиться, что они корректно рендерятся в DOM. Минимальная проверка:

console.log(document.querySelector('my-component'));

Если элемент существует и содержит внутренний HTML, Slim.js установлен и работает корректно.

Начальная настройка Slim.js обеспечивает быстрый старт разработки реактивных компонентов, интеграцию с современными сборщиками и простую работу с реактивными свойствами и шаблонами.

Оглавление