Настройка тестового окружения

Slim.js — это легковесная библиотека для создания веб-компонентов с реактивными свойствами и шаблонами. Начало работы требует подготовки минимального окружения.

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

npm install slim-js

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

import { Slim } from 'slim-js';

Для простых проектов можно использовать подключение через CDN:

<script type="module" src="https://cdn.jsdelivr.net/npm/slim-js@4.0.0/dist/slim.min.js"></script>

Важно использовать type="module" для корректной работы модулей ES6.

Создание тестового HTML

Минимальная HTML-структура для тестирования компонентов Slim.js выглядит следующим образом:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Тест Slim.js</title>
</head>
<body>
  <my-component></my-component>

  <script type="module" src="app.js"></script>
</body>
</html>

Файл app.js будет содержать определение компонентов.

Определение первого компонента

Компоненты в Slim.js создаются с помощью наследования от базового класса Slim.

import { Slim } from 'slim-js';

class MyComponent extends Slim {
  get useShadow() {
    return true; // Включение Shadow DOM для инкапсуляции стилей
  }

  get template() {
    return `<div>
              <h1>{{title}}</h1>
              <p>{{description}}</p>
            </div>`;
  }

  get is() {
    return 'my-component';
  }

  constructor() {
    super();
    this.title = 'Привет, Slim.js';
    this.description = 'Это тестовый компонент.';
  }
}

Slim.define(MyComponent);

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

  • useShadow — определяет использование Shadow DOM, что обеспечивает изоляцию стилей и структуры.
  • template — HTML-шаблон с реактивными привязками через {{}}.
  • is — уникальное имя компонента, под которым он будет использоваться в HTML.
  • Slim.define() — регистрация компонента.

Настройка локального сервера

Для корректного тестирования модулей ES6 рекомендуется использовать локальный сервер. Можно применить Live Server или http-server через npm:

npm install -g http-server
http-server ./ -c-1

Опция -c-1 отключает кеширование, что удобно при разработке.

Реактивные свойства и привязка данных

Slim.js позволяет связывать свойства компонента с шаблоном автоматически.

this.title = 'Новый заголовок';

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

this.watch('title', function(newValue, oldValue) {
  console.log(`Заголовок изменен с "${oldValue}" на "${newValue}"`);
});

Добавление стилей

Стили можно инкапсулировать через Shadow DOM, определяя их в шаблоне:

get template() {
  return `<style>
            h1 { color: #2c3e50; font-size: 24px; }
            p { font-style: italic; }
          </style>
          <div>
            <h1>{{title}}</h1>
            <p>{{description}}</p>
          </div>`;
}

Стили, включенные в шаблон, не влияют на другие элементы страницы.

Организация тестовой структуры проекта

Рекомендуемая структура файлов для обучения и тестирования:

/project
  index.html
  app.js
  /components
    my-component.js
  • index.html — основной HTML-файл.
  • app.js — точка входа для регистрации компонентов.
  • /components — каталог для отдельных компонентов.

Это упрощает масштабирование проекта и поддержку кода.

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

  1. Запустить локальный сервер.
  2. Открыть index.html в браузере.
  3. Изменить значения свойств в консоли, чтобы убедиться в реактивности:
document.querySelector('my-component').title = 'Изменённый заголовок';

При этом DOM обновится автоматически.

Подключение дополнительных инструментов

Для отладки можно использовать:

  • DevTools Browser — инспекция Shadow DOM и реактивных свойств.
  • ESLint / Prettier — поддержка качества кода.
  • Vite или Webpack — для более сложных проектов с модульной структурой и сборкой.

Эта настройка обеспечивает стабильную платформу для разработки и тестирования компонентов Slim.js, позволяя сосредоточиться на изучении реактивности, шаблонов и инкапсуляции стилей.

Оглавление