Vite для разработки

Для начала работы с Slim.js в среде Vite требуется базовая установка проекта. Создание проекта осуществляется командой:

npm create vite@latest my-slim-app
cd my-slim-app
npm install

После этого необходимо установить Slim.js:

npm install @slim/core

Vite автоматически обрабатывает модули ES, поэтому подключение Slim.js в проекте происходит через стандартный import:

import { Slim, html } from '@slim/core';

Структура компонентов Slim.js

Slim-компонент представляет собой класс, наследующийся от Slim. Ключевыми элементами компонента являются:

  • Свойства (props) — публичные данные компонента, автоматически отслеживаемые для изменений.
  • Состояние (state) — внутренние данные компонента, не предназначенные для прямого взаимодействия извне.
  • Метод render() — возвращает шаблон с использованием функции html.

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

class MyComponent extends Slim {
    static get props() {
        return ['title'];
    }

    constructor() {
        super();
        this.title = 'Привет, Slim.js!';
        this.state = { counter: 0 };
    }

    increment() {
        this.state.counter++;
        this.update(); // Перерисовка компонента
    }

    render() {
        return html`
            <div>
                <h1>${this.title}</h1>
                <p>Счётчик: ${this.state.counter}</p>
                <button @click=${() => this.increment()}>Увеличить</button>
            </div>
        `;
    }
}

customElements.define('my-component', MyComponent);

Интеграция с Vite

Vite обеспечивает быструю переработку модулей (HMR) и поддерживает современный синтаксис ES6+. В Slim.js это позволяет использовать:

  • Динамические импорты компонентов
  • Поддержку TypeScript
  • Импорт CSS и других ассетов напрямую в компоненты

Пример импорта CSS:

import './style.css';

Vite автоматически внедряет CSS в DOM при сборке и во время разработки.

Работа с состоянием и реактивностью

Slim.js отслеживает изменения состояния через методы state и props. Важные моменты:

  • Изменения props автоматически вызывают перерисовку компонента.
  • Изменения state требуют вызова метода update() для триггера рендера.
  • Реактивные выражения можно использовать прямо в шаблоне:
render() {
    const message = this.state.counter > 5 ? 'Много!' : 'Мало';
    return html`<p>${message}</p>`;
}

Обработка событий

Slim.js использует синтаксис @event для привязки событий к DOM-элементам:

<button @click=${() => this.increment()}>Увеличить</button>

Поддерживаются все стандартные события: click, input, change, submit и кастомные события через dispatchEvent.

Вложенные и динамические компоненты

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

render() {
    return html`
        <div>
            ${this.items.map(item => html`<item-card .data=${item}></item-card>`)}
        </div>
    `;
}

При изменении массива items необходимо вызвать this.update(), чтобы отразить новые данные в DOM.

Работа с Vite-плагинами

Для более сложных проектов Vite поддерживает подключение плагинов, которые облегчают работу с:

  • TypeScript: через @vitejs/plugin-vue или прямую настройку tsconfig.json
  • PostCSS и Tailwind CSS: интеграция с глобальными стилями
  • Автоимпортом компонентов: плагин vite-plugin-components упрощает подключение Slim-компонентов без явного импорта

Оптимизация сборки

Vite использует Rollup под капотом, что позволяет:

  • Минифицировать JavaScript
  • Разделять код на чанки (Code Splitting)
  • Автоматически оптимизировать зависимости

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

const LazyComponent = () => import('./LazyComponent.js');

Примеры продвинутого использования

Компонент с асинхронными данными:

class AsyncComponent extends Slim {
    constructor() {
        super();
        this.state = { data: null };
    }

    async fetchData() {
        const response = await fetch('https://api.example.com/data');
        this.state.data = await response.json();
        this.update();
    }

    connectedCallback() {
        super.connectedCallback();
        this.fetchData();
    }

    render() {
        if (!this.state.data) return html`<p>Загрузка...</p>`;
        return html`<pre>${JSON.stringify(this.state.data, null, 2)}</pre>`;
    }
}

customElements.define('async-component', AsyncComponent);

Комбинирование нескольких компонентов:

html`
    <my-component title="Счётчик 1"></my-component>
    <my-component title="Счётчик 2"></my-component>
`

Slim.js с Vite обеспечивает легковесную и реактивную структуру для создания современных веб-приложений с поддержкой HMR, динамических импортов и современных возможностей JavaScript. В сочетании с плагинами Vite можно легко масштабировать проект, интегрировать стили и асинхронные данные, сохраняя высокую скорость разработки.

Оглавление